@extends('admin.layouts.app')

@section('content')
<div class="space-y-6">
    <div>
        <h2 class="text-4xl font-extrabold">Edit {{ ucfirst($page->slug) }} Page</h2>
        <p class="text-gray-400 mt-2">Update page title, slug, banner image, content and SEO settings.</p>
    </div>

    @if(session('success'))
        <div class="bg-green-600/20 border border-green-600 text-green-300 p-4 rounded-xl">
            {{ session('success') }}
        </div>
    @endif

    @if($errors->any())
        <div class="bg-red-600/20 border border-red-600 text-red-300 p-4 rounded-xl">
            <p class="font-semibold mb-2">Please fix the following:</p>
            <ul class="list-disc list-inside space-y-1">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('admin.pages.update', $page->id) }}" method="POST" enctype="multipart/form-data" class="space-y-8">
        @csrf
        @method('PUT')

        <div class="glass-card rounded-[1.6rem] p-6 space-y-5">
            <h3 class="text-2xl font-bold">Page Details</h3>

            <div class="grid md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm text-gray-300 mb-2">Page Title</label>
                    <input
                        type="text"
                        name="title"
                        value="{{ old('title', $page->title) }}"
                        class="w-full rounded-xl bg-black border border-gray-700 text-white px-4 py-3"
                    >
                </div>

                <div>
                    <label class="block text-sm text-gray-300 mb-2">Slug</label>
                    <input
                        type="text"
                        name="slug"
                        value="{{ old('slug', $page->slug) }}"
                        class="w-full rounded-xl bg-black border border-gray-700 text-white px-4 py-3"
                    >
                </div>
            </div>

            <div>
                <label class="block text-sm text-gray-300 mb-2">Banner Image</label>
                <input
                    type="file"
                    name="banner_image"
                    class="w-full rounded-xl bg-black border border-gray-700 text-white px-4 py-3"
                >
            </div>

            @if($page->banner_image)
                <div>
                    <p class="text-sm text-gray-400 mb-2">Current Banner</p>
                    <img
                        src="{{ asset('storage/' . $page->banner_image) }}"
                        alt="{{ $page->title }}"
                        class="w-full max-w-md rounded-2xl border border-red-900"
                    >
                </div>
            @endif
        </div>

        <div class="glass-card rounded-[1.6rem] p-6 space-y-5">
            <div class="flex items-center justify-between">
                <h3 class="text-2xl font-bold">Page Content</h3>
                <p class="text-sm text-gray-400">You can format text, add images, links and media.</p>
            </div>

            <textarea
                id="editor"
                name="content"
                rows="16"
                class="w-full rounded-2xl bg-black border border-gray-700 text-white px-4 py-4"
            >{{ old('content', $page->content) }}</textarea>
        </div>

        <div class="glass-card rounded-[1.6rem] p-6 space-y-5">
            <h3 class="text-2xl font-bold">SEO Settings</h3>

            <div>
                <label class="block text-sm text-gray-300 mb-2">Meta Title</label>
                <input
                    type="text"
                    name="meta_title"
                    value="{{ old('meta_title', $page->meta_title) }}"
                    class="w-full rounded-xl bg-black border border-gray-700 text-white px-4 py-3"
                >
            </div>

            <div>
                <label class="block text-sm text-gray-300 mb-2">Meta Description</label>
                <textarea
                    name="meta_description"
                    rows="3"
                    class="w-full rounded-xl bg-black border border-gray-700 text-white px-4 py-3"
                >{{ old('meta_description', $page->meta_description) }}</textarea>
            </div>

            <div>
                <label class="block text-sm text-gray-300 mb-2">Meta Keywords</label>
                <input
                    type="text"
                    name="meta_keywords"
                    value="{{ old('meta_keywords', $page->meta_keywords) }}"
                    class="w-full rounded-xl bg-black border border-gray-700 text-white px-4 py-3"
                    placeholder="stonebwoy, bio, events, contact"
                >
            </div>
        </div>

        <button class="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-xl font-semibold text-white">
            Save Page
        </button>
    </form>
</div>

<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
<script>
    ClassicEditor
        .create(document.querySelector('#editor'), {
            toolbar: [
                'heading', '|',
                'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|',
                'blockQuote', 'insertTable', 'mediaEmbed', '|',
                'undo', 'redo'
            ],
            mediaEmbed: {
                previewsInData: true
            }
        })
        .catch(error => {
            console.error(error);
        });
</script>
@endsection