@extends("layouts.admin")
@section("header", "Edit Client: " . $client->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.clients.update", $client->id) }}" method="POST" class="space-y-6">
        @csrf
        @method("PUT")
        {{-- Client Name --}}
        <div>
            <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Name</label>
            <input type="text" id="name" name="name" value="{{ old("name", $client->name) }}" 
                   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"
                   required aria-required="true">
        </div>
        {{-- Contact Name --}}
        <div>
            <label for="contact_name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Contact Name</label>
            <input type="text" id="contact_name" name="contact_name" value="{{ old("contact_name", $client->contact_name) }}" 
                   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>
        {{-- Contact Email --}}
        <div>
            <label for="contact_email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Contact Email</label>
            <input type="email" id="contact_email" name="contact_email" value="{{ old("contact_email", $client->contact_email) }}" 
                   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>
        
        {{-- Branding Details --}}
        <div>
            <label for="branding_details-editor" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Branding Details (e.g., CSS or notes)</label>
            <!-- Container for Quill editor -->
            <div id="branding_details-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("branding_details", $client->branding_details) !!}</div>
            <!-- Hidden input to store Quill's HTML content -->
            <input type="hidden" id="branding_details" name="branding_details" value="{{ old("branding_details", $client->branding_details) }}">
        </div>
        {{-- Active Checkbox --}}
        <div class="flex items-center">
            <input id="is_active" name="is_active" type="checkbox" value="1" {{ old("is_active", $client->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="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Active</label>
        </div>
        {{-- Action Buttons --}}
        <div class="flex items-center space-x-4 pt-4">
            <x-ui.button type="submit" variant="save" size="md">Update Client</x-ui.button>
            <x-ui.button href="{{ route("admin.clients.index") }}" variant="cancel" size="md">Cancel</x-ui.button>
        </div>
    </form>
</div>
@endsection
@push("styles")
<!-- Quill.js Snow theme CSS -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
@endpush
@push("scripts")
<!-- Quill.js library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Check if Quill is defined
        if (typeof Quill !== "undefined") {
            // Initialize Quill editor for the branding_details field
            var quillBrandingDetails = new Quill("#branding_details-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 hiddenInputBrandingDetails = document.getElementById("branding_details");
            // Update hidden input when text changes in Quill editor
            quillBrandingDetails.on("text-change", function() {
                hiddenInputBrandingDetails.value = quillBrandingDetails.root.innerHTML;
            });
            // Ensure the hidden input reflects the editor initial state.
            if (hiddenInputBrandingDetails.value) {
                 hiddenInputBrandingDetails.value = quillBrandingDetails.root.innerHTML;
            }
        } else {
            console.error("Quill is not defined. Make sure it is imported correctly.");
        }
    });
</script>
@endpush