@extends('layouts.admin')

@section('header', 'Edit Event: ' . $event->name)

@section('content')
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6">
    {{-- Session Messages --}}
    @if ($errors->any())
        <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6 rounded-md" role="alert">
            <p class="font-bold">Please fix the following errors:</p>
            <ul class="mt-2 list-disc list-inside text-sm">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <form action="{{ route('admin.events.update', $event->id) }}" method="POST" class="space-y-6">
        @csrf
        @method('PUT')
        <div>
            <label for="client_id" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Client</label>
            <select id="client_id" name="client_id" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                @foreach($clients as $client)
                    <option value="{{ $client->id }}" {{ old('client_id', $event->client_id) == $client->id ? 'selected' : '' }}>{{ $client->name }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Event Name</label>
            <input type="text" id="name" name="name" value="{{ old('name', $event->name) }}" required class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
        </div>
        <div>
            <label for="description-editor" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Description</label>
            <!-- Container for Quill editor -->
            <div id="description-editor" style="height: 200px;" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">{!! old('description', $event->description) !!}</div>
            <!-- Hidden input to store Quill's HTML content -->
            <input type="hidden" id="description" name="description" value="{{ old('description', $event->description) }}">
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label for="start_datetime" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Start Date and Time</label>
                <input type="datetime-local" id="start_datetime" name="start_datetime" value="{{ old('start_datetime', $event->start_datetime && $event->start_datetime instanceof \DateTime ? $event->start_datetime->format('Y-m-d\TH:i') : '') }}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
            </div>
            <div>
                <label for="end_datetime" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">End Date and Time</label>
                <input type="datetime-local" id="end_datetime" name="end_datetime" value="{{ old('end_datetime', $event->end_datetime && $event->end_datetime instanceof \DateTime ? $event->end_datetime->format('Y-m-d\TH:i') : '') }}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
            </div>
        </div>
        <div>
            <label for="location" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Location</label>
            <input type="text" id="location" name="location" value="{{ old('location', $event->location) }}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
        </div>
        <div class="flex items-center">
            <input id="is_active" name="is_active" type="checkbox" value="1" {{ old('is_active', $event->is_active) ? 'checked' : '' }} class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
            <label for="is_active" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Active</label>
        </div>
        <div class="flex items-center space-x-4 pt-4">
            <button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Update Event</button>
            <a href="{{ route('admin.events.index') }}" class="py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Cancel</a>
        </div>
    </form>
</div>
@endsection
@push('styles')
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
@endpush
@push('scripts')
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Check if Quill is defined (it should be, as it's imported in app.js)
        if (typeof Quill !== 'undefined') {
            // Initialize Quill editor for the 'description' field
            var quillDescription = new Quill('#description-editor', {
                theme: 'snow', // Use the Snow theme
                modules: {
                    toolbar: [
                        [{ 'header': [1, 2, 3, false] }],
                        ['bold', 'italic', 'underline'],
                        ['link'],
                        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                        ['clean']
                    ]
                }
            });
            // Get the hidden input field
            var hiddenInputDescription = document.getElementById('description');
            // Update hidden input when text changes in Quill editor
            quillDescription.on('text-change', function() {
                hiddenInputDescription.value = quillDescription.root.innerHTML;
            });
            // Set initial content if the hidden input has a value (e.g., from old input or model)
            // Quill's div itself is already populated with {!! old('description', $event->description) !!}
            // So, we just need to ensure the hidden input is also in sync if that content was plain text.
            // However, if the content is already HTML, Quill handles it.
            // For safety, ensure the hidden input matches the editor's initial state.
            if (hiddenInputDescription.value) {
                 // If there's old input, Quill would have picked it up.
                 // Ensure the hidden input reflects what Quill will render.
                 // This is a bit redundant if the initial value is already HTML, 
                 // but safe if it was plain text that Quill auto-converted.
                 hiddenInputDescription.value = quillDescription.root.innerHTML;
            }
        } else {
            console.error('Quill is not defined. Make sure it is imported correctly.');
        }
    });
</script>
@endpush