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

@section('title', 'إضافة صفحة')

@php
    /** @var string $table */
    /** @var array $columns */
    $has = fn(string $c) => in_array(strtolower($c), $columns ?? [], true);
@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}
</style>
@endpush

@section('content')
<div class="d-flex align-items-center justify-content-between mb-3">
    <h4 class="m-0"><i class="bi bi-file-earmark-plus me-1"></i> إضافة صفحة</h4>
    <div class="d-flex gap-2">
        <a href="{{ route('admin.content.pages.index') }}" class="btn btn-outline-light">
            <i class="bi bi-arrow-right-short"></i> رجوع
        </a>
    </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.store') }}">
    @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="{{ old('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="{{ old('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="{{ old('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 = old('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="{{ old('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="{{ old('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="{{ old('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="{{ old('unpublish_at') }}" class="form-control">
                    </div>
                @endif
            </div>
        </div>
    </div>

    @if($has('body'))
        <div class="card card-dark mb-3">
            <div class="card-header">
                <strong>المحتوى</strong>
            </div>
            <div class="card-body">
                <textarea name="body" class="form-control min-h-300" placeholder="اكتب محتوى الصفحة هنا...">{{ old('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="{{ old('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="{{ old('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="{{ old('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="{{ old('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" {{ old('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="{{ old('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