@extends('layouts.app')

@section('head')
    <script src="https://cdn.ckeditor.com/ckeditor5/40.2.0/classic/ckeditor.js"></script>
    <style>
        /* On force une hauteur min pour l'éditeur */
        .ck-editor__editable { min-height: 400px; }
    </style>
@endsection

@section('content')
<div class="max-w-4xl mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold">Modifier : {{ $page->title }}</h1>
        <a href="{{ route('admin.pages.index') }}" class="text-gray-600 hover:text-gray-800 font-bold">Retour</a>
    </div>

    <form action="{{ route('admin.pages.update', $page->slug) }}" method="POST" class="bg-white p-6 rounded shadow">
        @csrf
        @method('PUT')

        <div class="mb-4">
            <label class="block text-gray-700 font-bold mb-2">Titre de la page</label>
            <input type="text" name="title" value="{{ $page->title }}" class="w-full border rounded p-2 focus:ring-primary focus:border-primary" required>
        </div>

        <div class="mb-6">
            <label class="block text-gray-700 font-bold mb-2">Contenu</label>
            <textarea name="content" id="editor">{!! $page->content !!}</textarea>
        </div>

        <button type="submit" class="bg-primary text-white font-bold py-3 px-6 rounded w-full hover:bg-primary-dark shadow transition">
            Enregistrer les modifications
        </button>
    </form>
</div>

<script>
    ClassicEditor
        .create(document.querySelector('#editor'), {
            toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ]
        })
        .catch(error => {
            console.error(error);
        });
</script>
@endsection