@extends('layouts.school')
@section('title', 'Pages')
@section('header', 'Pages')
@section('content')
    <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 mb-6">
        <h3 class="text-lg font-display font-semibold text-gray-900 mb-1">Create Page</h3>
        <p class="text-sm text-gray-500 mb-4">Custom pages appear at <code class="rounded bg-gray-100 px-1">/school/{your-school}/page/{slug}</code> on your public website.</p>
        <form method="POST" action="{{ route('school.cms.store-page', request()->route('schoolId')) }}" class="space-y-4">
            @csrf
            @if ($errors->any())
                <div class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm font-medium text-red-600">{{ $errors->first() }}</div>
            @endif
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div><label class="block text-xs font-medium text-gray-700">Title *</label><input type="text" name="title" value="{{ old('title') }}" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"></div>
                <div><label class="block text-xs font-medium text-gray-700">Slug</label><input type="text" name="slug" value="{{ old('slug') }}" placeholder="auto-generated from title" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"></div>
            </div>
            <div><label class="block text-xs font-medium text-gray-700">Content *</label><textarea name="content" rows="6" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">{{ old('content') }}</textarea></div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div><label class="block text-xs font-medium text-gray-700">Meta title</label><input type="text" name="meta_title" value="{{ old('meta_title') }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"></div>
                <div><label class="block text-xs font-medium text-gray-700">Meta description</label><input type="text" name="meta_description" value="{{ old('meta_description') }}" maxlength="500" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"></div>
            </div>
            <div class="flex items-center justify-between">
                <label class="flex items-center gap-2"><input type="checkbox" name="is_published" value="1" checked class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"><span class="text-sm text-gray-700">Published</span></label>
                <button type="submit" class="rounded-lg bg-primary-600 px-5 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Create Page</button>
            </div>
        </form>
    </div>

    <div class="space-y-4">
        @forelse($pages as $page)
            <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-5">
                <form method="POST" action="{{ route('school.cms.update-page', [request()->route('schoolId'), $page->id]) }}" class="space-y-3">
                    @csrf
                    @method('PUT')
                    <div class="flex flex-wrap items-center justify-between gap-2">
                        <div class="flex items-center gap-3">
                            <span class="inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium {{ $page->is_published ? 'bg-green-50 text-green-700' : 'bg-gray-100 text-gray-600' }}">{{ $page->is_published ? 'Published' : 'Draft' }}</span>
                            <span class="text-xs text-gray-400">/page/{{ $page->slug }}</span>
                        </div>
                        <div class="flex items-center gap-3 whitespace-nowrap">
                            <button type="button" data-toggle-edit="{{ $page->id }}" class="text-xs font-medium text-primary-600 hover:text-primary-800">Edit</button>
                            <a href="{{ tenant_url('public.page', [\App\Services\Tenant\TenantContext::getSchool()->slug, $page->slug]) }}" target="_blank" rel="noopener" class="text-xs text-gray-400 hover:text-gray-700">View</a>
                            <form method="POST" action="{{ route('school.cms.toggle-page', [request()->route('schoolId'), $page->id]) }}" class="inline">@csrf @method('PATCH')<button type="submit" class="text-xs text-gray-500 hover:text-gray-800">{{ $page->is_published ? 'Unpublish' : 'Publish' }}</button></form>
                            <form method="POST" action="{{ route('school.cms.delete-page', [request()->route('schoolId'), $page->id]) }}" class="inline" onsubmit="return confirm('Delete page?')">@csrf @method('DELETE')<button type="submit" class="text-xs text-red-600 hover:text-red-800">Delete</button></form>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 {{ request('edit') == $page->id ? '' : 'hidden' }}" data-edit-panel="{{ $page->id }}">
                        <input type="text" name="title" value="{{ $page->title }}" required placeholder="Title" class="block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                        <input type="text" name="slug" value="{{ $page->slug }}" required pattern="[a-z0-9]+(-[a-z0-9]+)*" placeholder="slug" class="block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                        <textarea name="content" rows="5" required placeholder="Content" class="md:col-span-2 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">{{ $page->content }}</textarea>
                        <input type="text" name="meta_title" value="{{ $page->meta_title }}" placeholder="Meta title" class="block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                        <input type="text" name="meta_description" value="{{ $page->meta_description }}" maxlength="500" placeholder="Meta description" class="block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                        <label class="flex items-center gap-2 md:col-span-2"><input type="checkbox" name="is_published" value="1" @checked($page->is_published) class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"><span class="text-sm text-gray-700">Published</span></label>
                        <div class="md:col-span-2"><button type="submit" class="rounded-lg bg-primary-600 px-5 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Save Page</button></div>
                    </div>
                </form>
            </div>
        @empty
            <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-12 text-center text-sm text-gray-500">No pages yet.</div>
        @endforelse
    </div>

    <script>
        document.addEventListener('click', function (e) {
            var btn = e.target.closest('[data-toggle-edit]');
            if (!btn) return;
            var panel = document.querySelector('[data-edit-panel="' + btn.dataset.toggleEdit + '"]');
            if (panel) panel.classList.toggle('hidden');
        });
    </script>
@endsection