@extends('layouts.app')

@section('title', 'Edit ' . $page->title)

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="mb-6">
        <a href="{{ route('admin.legal-pages.index') }}" class="text-indigo-600 dark:text-indigo-400 hover:underline text-sm">&larr; Back to Legal Pages</a>
        <h1 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white mt-2">Edit {{ $page->title }}</h1>
        <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">URL: /legal/{{ $page->slug }}</p>
    </div>

    @if($errors->any())
        <div class="mb-6 rounded-lg bg-red-50 dark:bg-red-900/50 p-4">
            <p class="text-sm font-medium text-red-800 dark:text-red-200">Please fix the following errors:</p>
            <ul class="mt-2 text-sm text-red-700 dark:text-red-300 list-disc list-inside">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

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

        <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6">
            <!-- Title -->
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Page Title</label>
                <input type="text" name="title" value="{{ old('title', $page->title) }}"
                    class="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                    required>
            </div>

            <!-- Status -->
            <div class="mb-6">
                <label class="flex items-center">
                    <input type="checkbox" name="is_active" value="1" {{ $page->is_active ? 'checked' : '' }}
                        class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                    <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Active (visible to public)</span>
                </label>
            </div>

            <!-- Content Editor -->
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Content</label>
                <div class="border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
                    <!-- Simple Toolbar -->
                    <div class="bg-gray-50 dark:bg-gray-700 border-b border-gray-300 dark:border-gray-600 p-2 flex flex-wrap gap-1">
                        <button type="button" onclick="formatDoc('bold')" class="px-3 py-1 text-sm font-bold bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded hover:bg-gray-100 dark:hover:bg-gray-500 text-gray-700 dark:text-gray-200">B</button>
                        <button type="button" onclick="formatDoc('italic')" class="px-3 py-1 text-sm italic bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded hover:bg-gray-100 dark:hover:bg-gray-500 text-gray-700 dark:text-gray-200">I</button>
                        <button type="button" onclick="formatDoc('underline')" class="px-3 py-1 text-sm underline bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded hover:bg-gray-100 dark:hover:bg-gray-500 text-gray-700 dark:text-gray-200">U</button>
                        <span class="border-l border-gray-300 dark:border-gray-500 mx-1"></span>
                        <button type="button" onclick="formatDoc('insertUnorderedList')" class="px-3 py-1 text-sm bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded hover:bg-gray-100 dark:hover:bg-gray-500 text-gray-700 dark:text-gray-200">List</button>
                        <button type="button" onclick="formatDoc('insertOrderedList')" class="px-3 py-1 text-sm bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded hover:bg-gray-100 dark:hover:bg-gray-500 text-gray-700 dark:text-gray-200">1. List</button>
                        <span class="border-l border-gray-300 dark:border-gray-500 mx-1"></span>
                        <select onchange="formatBlock(this.value); this.selectedIndex=0;" class="px-2 py-1 text-sm bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded text-gray-700 dark:text-gray-200">
                            <option value="">Heading</option>
                            <option value="h1">Heading 1</option>
                            <option value="h2">Heading 2</option>
                            <option value="h3">Heading 3</option>
                            <option value="p">Paragraph</option>
                        </select>
                        <span class="border-l border-gray-300 dark:border-gray-500 mx-1"></span>
                        <button type="button" onclick="insertLink()" class="px-3 py-1 text-sm bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded hover:bg-gray-100 dark:hover:bg-gray-500 text-gray-700 dark:text-gray-200">Link</button>
                    </div>

                    <!-- Editable Content Area -->
                    <div id="editor" contenteditable="true"
                        class="min-h-[400px] p-4 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none prose dark:prose-invert max-w-none"
                        style="overflow-y: auto;">{!! old('content', $page->content) !!}</div>

                    <!-- Hidden input to store HTML -->
                    <input type="hidden" name="content" id="content-input">
                </div>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Use the toolbar to format your content. HTML is supported.</p>
            </div>
        </div>

        <!-- Actions -->
        <div class="flex items-center justify-between">
            <a href="{{ route('admin.legal-pages.index') }}" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200">Cancel</a>
            <div class="flex gap-3">
                @if($page->is_active)
                    <a href="{{ route('legal.show', $page->slug) }}" target="_blank"
                        class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                        Preview
                    </a>
                @endif
                <button type="submit" class="px-6 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-lg">
                    Save Changes
                </button>
            </div>
        </div>
    </form>
</div>

<script>
    const editor = document.getElementById('editor');
    const contentInput = document.getElementById('content-input');

    // Update hidden input before form submit
    document.querySelector('form').addEventListener('submit', function() {
        contentInput.value = editor.innerHTML;
    });

    function formatDoc(cmd) {
        document.execCommand(cmd, false, null);
        editor.focus();
    }

    function formatBlock(tag) {
        if (tag) {
            document.execCommand('formatBlock', false, '<' + tag + '>');
            editor.focus();
        }
    }

    function insertLink() {
        const url = prompt('Enter URL:', 'https://');
        if (url) {
            document.execCommand('createLink', false, url);
            editor.focus();
        }
    }

    // Initialize content input
    contentInput.value = editor.innerHTML;
</script>

<style>
    #editor h1 { font-size: 2em; font-weight: bold; margin: 0.67em 0; }
    #editor h2 { font-size: 1.5em; font-weight: bold; margin: 0.75em 0; }
    #editor h3 { font-size: 1.17em; font-weight: bold; margin: 0.83em 0; }
    #editor p { margin: 1em 0; }
    #editor ul, #editor ol { margin: 1em 0; padding-left: 2em; }
    #editor ul { list-style-type: disc; }
    #editor ol { list-style-type: decimal; }
    #editor a { color: #4f46e5; text-decoration: underline; }
</style>
@endsection