{{-- resources/views/admin/content/pages/edit.blade.php --}}
@extends('admin.layouts.app')

@section('title', 'تعديل صفحة')

@php
    /** @var string $table */
    /** @var array $columns */
    /** @var object $page */
    $has = fn(string $c) => in_array(strtolower($c), $columns ?? [], true);

    $val = function(string $k, $fallback = null) use ($page) {
        $k = strtolower($k);
        return old($k, isset($page->$k) ? $page->$k : $fallback);
    };

    $fmtDt = function($dt) {
        if (empty($dt)) return '';
        try {
            return \Illuminate\Support\Carbon::parse($dt)->format('Y-m-d\TH:i');
        } catch (\Throwable $e) { return ''; }
    };

    $previewUrl = null;
    if ($has('canonical_url') && !empty($page->canonical_url)) {
        $previewUrl = $page->canonical_url;
    } elseif($has('slug') && !empty($page->slug)) {
        $previewUrl = url('/page/' . $page->slug);
    }
@endphp

@push('styles')
<style>
    .card-dark{background:#121a2b;border:1px solid rgba(255,255,255,.08);color:#e6e9ef}
    .form-control,.form-select,.form-check-input{background:#0b1220;color:#e2e8f0;border:1px solid rgba(255,255,255,.12)}
    .form-control::placeholder{color:#94a3b8}
    textarea.min-h-300{min-height:300px}
    .small-muted{color:#94a3b8;font-size:.9rem}
</style>
@endpush

@section('content')
<div class="d-flex align-items-center justify-content-between mb-3">
    <div class="d-flex align-items-center gap-2">
        <h4 class="m-0"><i class="bi bi-file-text me-1"></i> تعديل صفحة</h4>
        <span class="badge text-bg-secondary">#{{ $page->id ?? '—' }}</span>
        <span class="small-muted">{{ $table }}</span>
    </div>

    <div class="d-flex gap-2">
        @if($previewUrl)
            <a href="{{ $previewUrl }}" class="btn btn-outline-light" target="_blank">
                <i class="bi bi-box-arrow-up-right me-1"></i> معاينة
            </a>
        @endif
        <a href="{{ route('admin.content.pages.index') }}" class="btn btn-outline-light">
            <i class="bi bi-arrow-right-short"></i> رجوع
        </a>
        @if(Route::has('admin.content.pages.destroy'))
            <form method="POST" action="{{ route('admin.content.pages.destroy', ['id'=>$page->id]) }}"
                  onsubmit="return confirm('تأكيد الحذف النهائي لهذه الصفحة؟');">
                @csrf
                @method('DELETE')
                <button class="btn btn-outline-danger">
                    <i class="bi bi-trash"></i> حذف
                </button>
            </form>
        @endif
    </div>
</div>

@if ($errors->any())
    <div class="alert alert-danger">
        <strong>تحقق من الأخطاء:</strong>
        <ul class="mb-0 mt-2">
            @foreach ($errors->all() as $e)
                <li>{{ $e }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form method="POST" action="{{ route('admin.content.pages.update', ['id'=>$page->id]) }}">
    @csrf

    <div class="card card-dark mb-3">
        <div class="card-body">
            <div class="row g-3">
                @if($has('title'))
                    <div class="col-md-6">
                        <label class="form-label">العنوان*</label>
                        <input type="text" name="title" value="{{ $val('title') }}" class="form-control" placeholder="عنوان الصفحة" id="titleInput" required>
                    </div>
                @endif

                @if($has('slug'))
                    <div class="col-md-6">
                        <label class="form-label d-flex align-items-center justify-content-between">
                            <span>السلاق (Slug)</span>
                            <button type="button" class="btn btn-sm btn-outline-light" id="slugSuggest">
                                <i class="bi bi-magic"></i> اقتراح تلقائي
                            </button>
                        </label>
                        <input type="text" name="slug" value="{{ $val('slug') }}" class="form-control" placeholder="مثال: about-us" id="slugInput">
                        <div class="form-text text-muted">يُضمن تميّزه عند الحفظ.</div>
                    </div>
                @endif

                @if($has('locale'))
                    <div class="col-md-3">
                        <label class="form-label">اللغة</label>
                        <input type="text" name="locale" value="{{ $val('locale','ar') }}" class="form-control" placeholder="ar / en / ...">
                    </div>
                @endif

                @if($has('status'))
                    <div class="col-md-3">
                        <label class="form-label">الحالة</label>
                        @php $st = $val('status','draft'); @endphp
                        <select name="status" class="form-select">
                            <option value="draft"     @selected($st==='draft')>مسودة</option>
                            <option value="published" @selected($st==='published')>منشورة</option>
                            <option value="archived"  @selected($st==='archived')>مؤرشفة</option>
                        </select>
                    </div>
                @endif

                @if($has('template'))
                    <div class="col-md-3">
                        <label class="form-label">القالب (اختياري)</label>
                        <input type="text" name="template" value="{{ $val('template') }}" class="form-control" placeholder="default / landing / ...">
                    </div>
                @endif

                @if($has('sort_order'))
                    <div class="col-md-3">
                        <label class="form-label">الترتيب</label>
                        <input type="number" name="sort_order" value="{{ $val('sort_order',0) }}" min="0" class="form-control">
                    </div>
                @endif

                @if($has('published_at'))
                    <div class="col-md-3">
                        <label class="form-label">تاريخ النشر</label>
                        <input type="datetime-local" name="published_at" value="{{ $fmtDt($val('published_at')) }}" class="form-control">
                    </div>
                @endif

                @if($has('unpublish_at'))
                    <div class="col-md-3">
                        <label class="form-label">إيقاف النشر عند</label>
                        <input type="datetime-local" name="unpublish_at" value="{{ $fmtDt($val('unpublish_at')) }}" class="form-control">
                    </div>
                @endif
            </div>
        </div>
    </div>

    @if($has('body'))
        <div class="card card-dark mb-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <strong>المحتوى</strong>
                @if($previewUrl)
                    <small class="small-muted">
                        @if($has('slug') && !empty($page->slug))
                            <i class="bi bi-link-45deg"></i>
                            <a class="text-decoration-underline" href="{{ $previewUrl }}" target="_blank">{{ $previewUrl }}</a>
                        @endif
                    </small>
                @endif
            </div>
            <div class="card-body">
                <textarea name="body" class="form-control min-h-300" placeholder="اكتب محتوى الصفحة هنا...">{{ $val('body') }}</textarea>
            </div>
        </div>
    @endif

    {{-- SEO --}}
    @if($has('meta_title') || $has('meta_description') || $has('canonical_url') || $has('og_image') || $has('is_indexable') || $has('redirect_to'))
    <div class="card card-dark mb-3">
        <div class="card-header">
            <strong>إعدادات SEO</strong>
        </div>
        <div class="card-body">
            <div class="row g-3">
                @if($has('meta_title'))
                    <div class="col-md-6">
                        <label class="form-label">Meta Title</label>
                        <input type="text" name="meta_title" value="{{ $val('meta_title') }}" class="form-control" maxlength="255">
                    </div>
                @endif
                @if($has('meta_description'))
                    <div class="col-md-6">
                        <label class="form-label">Meta Description</label>
                        <input type="text" name="meta_description" value="{{ $val('meta_description') }}" class="form-control" maxlength="500">
                    </div>
                @endif
                @if($has('canonical_url'))
                    <div class="col-md-6">
                        <label class="form-label">Canonical URL</label>
                        <input type="url" name="canonical_url" value="{{ $val('canonical_url') }}" class="form-control" placeholder="https://example.com/your-page">
                    </div>
                @endif
                @if($has('og_image'))
                    <div class="col-md-6">
                        <label class="form-label">OG Image (رابط صورة)</label>
                        <input type="text" name="og_image" value="{{ $val('og_image') }}" class="form-control" placeholder="/storage/og/your-image.jpg">
                    </div>
                @endif
                @if($has('is_indexable'))
                    <div class="col-md-3 d-flex align-items-center">
                        <div class="form-check mt-4">
                            <input class="form-check-input" type="checkbox" name="is_indexable" id="indexable" value="1"
                                   {{ (int)$val('is_indexable',1) ? 'checked' : '' }}>
                            <label class="form-check-label" for="indexable">السماح بالفهرسة</label>
                        </div>
                    </div>
                @endif
                @if($has('redirect_to'))
                    <div class="col-md-9">
                        <label class="form-label">إعادة توجيه (اختياري)</label>
                        <input type="url" name="redirect_to" value="{{ $val('redirect_to') }}" class="form-control" placeholder="ضع رابطًا لإعادة توجيه الزائر بدل عرض الصفحة">
                    </div>
                @endif
            </div>
        </div>
    </div>
    @endif

    <div class="text-end">
        <button class="btn btn-primary">
            <i class="bi bi-check2-circle me-1"></i> حفظ التعديلات
        </button>
    </div>
</form>
@endsection

@push('scripts')
<script>
(function(){
    const title = document.getElementById('titleInput');
    const slug  = document.getElementById('slugInput');
    const btn   = document.getElementById('slugSuggest');

    function slugify(str){
        return (str || '')
            .toString()
            .trim()
            .toLowerCase()
            .replace(/[\u0600-\u06FF]+/g, '')   // إزالة العربية للعرض فقط
            .replace(/[^a-z0-9\s\-]+/g,'')
            .replace(/\s+/g,'-')
            .replace(/\-+/g,'-')
            .replace(/^\-+|\-+$/g,'');
    }

    btn?.addEventListener('click', function(){
        if (!slug) return;
        const base = slug.value || (title ? title.value : '');
        slug.value = slugify(base);
        slug.dispatchEvent(new Event('change'));
    });
})();
</script>
@endpush