@extends('themes.frontend.layouts.app')
@section('body_class', 'bg-background font-body text-on-surface antialiased overflow-x-hidden')
@section('validate') @stop
@push('head_scripts')
    <script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        "on-secondary-fixed": "#091d2c",
                        "secondary-container": "#d1e5fa",
                        "surface-dim": "#dcdad6",
                        "surface-bright": "#fcf9f5",
                        "error-container": "#ffdad6",
                        "inverse-primary": "#adc6ff",
                        "surface-variant": "#e5e2de",
                        surface: "#fcf9f5",
                        tertiary: "#251e16",
                        "surface-container-low": "#f6f3ef",
                        "primary-fixed-dim": "#adc6ff",
                        "on-background": "#1c1c1a",
                        "surface-container-high": "#eae8e4",
                        "inverse-on-surface": "#f3f0ec",
                        "secondary-fixed-dim": "#b5c9dd",
                        "on-tertiary": "#ffffff",
                        "on-secondary": "#ffffff",
                        "on-primary-container": "#809ddb",
                        error: "#ba1a1a",
                        "on-primary-fixed-variant": "#26467d",
                        "on-primary-fixed": "#001a41",
                        "on-surface": "#1c1c1a",
                        "on-secondary-container": "#546678",
                        "on-surface-variant": "#434750",
                        "on-primary": "#ffffff",
                        "surface-container-highest": "#e5e2de",
                        background: "#fcf9f5",
                        "surface-container": "#f0ede9",
                        "primary-container": "#0e336a",
                        primary: "#001e49",
                        "chagger-blue": "#0E336A",
                        "tertiary-fixed-dim": "#d1c4b8",
                        "secondary-fixed": "#d1e5fa",
                        "on-error-container": "#93000a",
                        "tertiary-container": "#3b332b",
                        "on-error": "#ffffff",
                        "on-secondary-fixed-variant": "#36495a",
                        "primary-fixed": "#d8e2ff",
                        "surface-tint": "#405e97",
                        secondary: "#4e6072",
                        outline: "#747781",
                        "on-tertiary-fixed-variant": "#4e453c",
                        "on-tertiary-fixed": "#211a13",
                        "surface-container-lowest": "#ffffff",
                        "on-tertiary-container": "#a79b90",
                        "tertiary-fixed": "#eee0d4",
                        "outline-variant": "#c4c6d1",
                        "inverse-surface": "#31302e",
                    },
                    borderRadius: {
                        DEFAULT: "0.25rem",
                        lg: "0.5rem",
                        xl: "0.75rem",
                        full: "9999px",
                    },
                    fontFamily: {
                        headline: ["Manrope"],
                        body: ["Inter"],
                        label: ["Inter"],
                    },
                },
            },
        };
    </script>
@endpush
@push('styles')
    <style>
        .glass-panel {
            background: rgba(255, 255, 255, 0.45);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        /* nabrbar css */
        .chg-nav-glass-morphism {
            background: #ffffff;
            border-bottom: 1px solid rgba(0, 30, 73, 0.08);
        }

        .chg-nav-dropdown-container {
            visibility: hidden;
            opacity: 0;
            transform: translateY(10px);
            pointer-events: none;
        }

        .chg-nav-link {
            @apply relative text-[#4e6072] font-semibold text-sm tracking-wide transition-colors duration-200 cursor-pointer;
        }

        .chg-nav-link:hover {
            @apply text-primary;
        }

        .chg-nav-active-nav-link {
            @apply text-primary;
        }

        .chg-nav-active-nav-link::after {
            /* content: ""; */
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #001e49;
        }

        .chg-nav-z-menu {
            z-index: 100;
        }

        .glass-silk {
            background: rgba(252, 249, 245, 0.7);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }

        .light-sweep {
            position: relative;
            overflow: hidden;
        }

        .light-sweep::after {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg,
                    transparent 45%,
                    rgba(255, 255, 255, 0.3) 50%,
                    transparent 55%);
            transform: rotate(30deg);
            animation: sweep 8s infinite;
        }

        @keyframes sweep {
            0% {
                transform: translate(-100%, -100%) rotate(30deg);
            }

            20% {
                transform: translate(100%, 100%) rotate(30deg);
            }

            100% {
                transform: translate(100%, 100%) rotate(30deg);
            }
        }

        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }

        .custom-scrollbar::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 10px;
        }

        .material-symbols-outlined {
            font-variation-settings:
                "FILL" 0,
                "wght" 400,
                "GRAD" 0,
                "opsz" 24;
        }

        .glass-input {
            background: rgba(14, 51, 106, 0.4) !important;
            border: 1px solid rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            color: white;
            transition: all 0.3s ease;
        }

        .glass-input:focus {
            background: rgba(14, 51, 106, 0.6);
            border-color: rgba(255, 255, 255, 0.4);
            outline: none;
            box-shadow: 0 0 0 4px rgba(14, 51, 106, 0.2);
        }

        .glass-input::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }

        select.glass-input option {
            background-color: #0e336a;
            color: white;
        }

        input[type="date"]::-webkit-calendar-picker-indicator {
            filter: invert(1);
            /* Turns a black icon white */
        }

        .glass-card {
            background: rgba(14, 51, 106, 0.4);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }
    </style>
@endpush
@section('content')
    <main class="min-h-screen p-6 flex flex-col md:flex-row gap-6 mt-20">
        <!-- Left: The Visual Sanctuary (60%) -->
        <section
            class="relative w-full md:w-[50%] h-[512px] md:h-screen sticky top-0 overflow-hidden rounded-2xl shadow-2xl">
            <div class="absolute inset-0 z-0">
                <img alt="Professional, radiant image of happy dental clients sharing a joyful moment"
                    class="w-full h-full object-cover transform scale-110 transition-transform duration-[10s] ease-linear hover:scale-100"
                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuCuI6XDZb-YucVKVIDszj65aVGKb1pCJbfqTxhG6z-yu6mBeqsXjtRE_zAdLSsXnGDXUIVGYwzwtFHg3tVBe37d9sOCuU9WWvmPGEl5gHLGDME2p_1xMDyyw_0dgAtU6utbbJG9A2uVHedgRTwp3mUOXI2SlDBN41LX2MV-U37W5jH1nu6To1tMJ9RGHaK899VcIQHb-DhnuVokg-m4kdTa1qiyKpghqBNKFcEQANb0thZlooIuE6umco4m856JcdVQn4o92uUMiJ2J" />
            </div>
            <div class="absolute inset-0 bg-gradient-to-r from-primary/60 to-transparent z-10"></div>
        </section>
        <!-- Right: The Sophisticated Form (40%) -->
        <section
            class="w-full md:w-[50%] bg-chagger-blue flex flex-col pt-8 pb-12 px-8 md:px-12 overflow-y-auto custom-scrollbar text-white z-[99] rounded-2xl shadow-2xl">
            <div class="max-w-xl mx-auto w-full">
                <div class="mb-5">
                    <h2 class="font-headline text-3xl font-bold text-center text-white mb-2">
                        Book Appointment
                    </h2>
                </div>
                <form action="{{ module_url('web.appointment.submit') }}" method="POST" name="enquiry_form"
                    id="enquiry_form" class="space-y-3" novalidate>
                    {{ csrf_field() }}
                    <x-form.field.hidden name="recaptcha_v3" id="recaptcha_v3" />
                    <!-- Patient Type -->
                    <div class="space-y-2 error-container">
                        <label class="block text-xs font-bold uppercase tracking-widest text-white/70"
                            for="{{ $fields['patient_type']->field_name }}">{{ $fields['patient_type']->field_label }}</label>
                        <div class="flex gap-6">
                            @foreach ($patientType as $value => $label)
                                <label class="relative flex items-center gap-3 cursor-pointer group">
                                    <input name="{{ $fields['patient_type']->field_name }}" value="{{ $value }}"
                                        {{ old($fields['patient_type']->field_name) == $value ? 'checked' : '' }}
                                        class="peer hidden" type="radio" />
                                    <div
                                        class="w-5 h-5 rounded-full border-2 border-white/30 peer-checked:border-white peer-checked:border-[6px] transition-all">
                                    </div>
                                    <span
                                        class="text-white/70 group-hover:text-white transition-colors">{{ $label }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>
                    <!-- Select Location (New Field) -->
                    <div class="grid grid-cols-1 md:grid-cols-1 space-y-2">
                        <label class="block text-xs font-bold uppercase tracking-widest text-white/70 ml-1"
                            for="{{ $fields['preferred_location']->field_name }}">{{ $fields['preferred_location']->field_label }}</label>
                        <select
                            class="w-full bg-white/10 border-none rounded-xl text-white/70 focus:ring-2 focus:ring-primary-fixed py-4"
                            name="{{ $fields['preferred_location']->field_name }}"
                            id="{{ $fields['preferred_location']->field_name }}">
                            @foreach ($clinicList as $id => $title)
                                <option class="bg-primary-container" value="{{ $title }}"
                                    @selected(old($fields['preferred_location']->field_name) == $title) data-location-id="{{ $id }}">
                                    {{ $title }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <!-- Personal Info -->
                    <div class="space-y-2">
                        <label class="text-xs font-bold uppercase tracking-widest text-white/70 ml-1"
                            for="{{ $fields['full_name']->field_name }}">{{ $fields['full_name']->field_label }}</label>
                        <input class="w-full glass-input rounded-xl px-4 py-4"
                            placeholder="{{ $fields['full_name']->placeholder }}"
                            name="{{ $fields['full_name']->field_name }}" id="{{ $fields['full_name']->field_name }}"
                            value="{{ old($fields['full_name']->field_name) }}" type="text" />
                    </div>
                    <!-- Contact -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-2">
                            <label class="text-xs font-bold uppercase tracking-widest text-white/70 ml-1"
                                for="{{ $fields['email_address']->field_name }}">{{ $fields['email_address']->field_label }}</label>
                            <input class="w-full glass-input rounded-xl px-4 py-4"
                                placeholder="{{ $fields['email_address']->placeholder }}"
                                name="{{ $fields['email_address']->field_name }}"
                                id="{{ $fields['email_address']->field_name }}"
                                value="{{ old($fields['email_address']->field_name) }}" type="email" />
                        </div>
                        <div class="space-y-2">
                            <label class="text-xs font-bold uppercase tracking-widest text-white/70 ml-1"
                                for="{{ $fields['phone_number']->field_name }}">{{ $fields['phone_number']->field_label }}</label>
                            <input class="w-full glass-input rounded-xl px-4 py-4"
                                placeholder="{{ $fields['phone_number']->placeholder }}"
                                name="{{ $fields['phone_number']->field_name }}"
                                id="{{ $fields['phone_number']->field_name }}"
                                value="{{ old($fields['phone_number']->field_name) }}" type="tel" />
                        </div>
                    </div>

                    <!-- Schedule -->
                    <div class="grid grid-cols-2 gap-6">
                        <!-- Address Cluster -->
                        <div class="space-y-6">
                            <div class="space-y-2">
                                <label class="text-xs font-bold uppercase tracking-widest text-white/70 ml-1"
                                    for="{{ $fields['address']->field_name }}">{{ $fields['address']->field_label }}</label>
                                <input class="w-full glass-input rounded-xl px-4 py-4"
                                    placeholder="{{ $fields['address']->placeholder }}"
                                    name="{{ $fields['address']->field_name }}" id="{{ $fields['address']->field_name }}"
                                    value="{{ old($fields['address']->field_name) }}" type="text" />
                            </div>
                        </div>
                        <div class="space-y-2">
                            <label class="text-xs font-bold uppercase tracking-widest text-white/70 ml-1"
                                for="{{ $fields['preferred_date']->field_name }}">{{ $fields['preferred_date']->field_label }}</label>
                            <input class="w-full glass-input rounded-xl px-4 py-4 text-white/50 scheme-dark"
                                name="{{ $fields['preferred_date']->field_name }}"
                                id="{{ $fields['preferred_date']->field_name }}"
                                value="{{ old($fields['preferred_date']->field_name) }}" type="date" />
                        </div>
                    </div>
                    <!-- Best Time to Call -->
                    <div class="space-y-2 pt-1 error-container">
                        <label class="block font-headline font-bold text-xs text-white/70 uppercase tracking-widest"
                            for="{{ $fields['preferred_time']->field_name }}">{{ $fields['preferred_time']->field_label }}</label>
                        <div class="grid grid-cols-3 gap-4">
                            @foreach ($preferredTime as $value => $label)
                                <label class="flex items-center gap-2 cursor-pointer group">
                                    <input
                                        class="w-5 h-5 rounded border-white/20 text-primary focus:ring-white focus:ring-offset-0 bg-white/10 border-none transition-all"
                                        name="{{ $fields['preferred_time']->field_name }}" value="{{ $value }}"
                                        {{ old($fields['preferred_time']->field_name) == $value ? 'checked' : '' }}
                                        type="radio" />
                                    <span
                                        class="text-sm text-white/70 group-hover:text-white transition-colors">{{ $label }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>
                    <!-- Message -->
                    <div class="space-y-2">
                        <label class="text-xs font-bold uppercase tracking-widest text-white/70 ml-1"
                            for="{{ $fields['message']->field_name }}">{{ $fields['message']->field_label }}</label>
                        <textarea class="w-full glass-input rounded-xl px-4 py-4 resize-none"
                            placeholder="{{ $fields['message']->placeholder }}" name="{{ $fields['message']->field_name }}"
                            id="{{ $fields['message']->field_name }}" rows="4"></textarea>
                    </div>
                    <!-- Submit -->
                    <div class="">
                        <button
                            class="light-sweep w-full bg-white text-chagger-blue py-5 rounded-full font-headline font-bold text-lg hover:opacity-90 transition-all shadow-2xl shadow-black/20 flex items-center justify-center gap-3"
                            type="button" id="send_enquiry_form" name="send_enquiry_form">
                            <span class="btn-text">Book Appointment</span>
                            <span class="material-symbols-outlined text-xl">arrow_forward</span>
                        </button>
                        <p class="text-center text-xs text-white/50 mt-6 font-light">
                            By booking, you agree to our
                            <a class="underline hover:text-white transition-colors" href="#">Privacy Policy</a>
                            regarding your clinical data.
                        </p>
                    </div>

                    <div id="msg_id"></div>
                </form>
            </div>
        </section>
    </main>
@endsection
@include('themes.frontend.partials.book_appointment_script')