@include(FilamentCms::getViewPrefix() . '.partials.header')
@include(FilamentCms::getViewPrefix() . '.partials.navigation')

{{-- Contact Section --}}
<section id="contact" class="bg-gray-900/60 min-h-screen h-full flex items-center justify-center pt-26 px-4 pb-42">
    <div class="container mx-auto max-w-4xl">

        <h1 class="text-3xl md:text-5xl font-bold text-center mb-6 md:mb-9 glow-text">
            <span class="hidden md:block">{!! fcms__('content-contact.title') !!}</span>
            <span class="md:hidden">{{ fcms__('content-contact.mobile-title') }}</span>
        </h1>

        @session('success')
        {{--        <div class="alert alert-success alert-dismissible fade show" role="alert">--}}
        <div id="sent-message" class="mb-3 p-3 rounded-sm border text-green-500 bg-green-900/65">
            {!! $value !!}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        @endsession

        @session('error')
        {{--        <div class="alert alert-success alert-dismissible fade show" role="alert">--}}
        <div id="sent-message" class="mb-3 p-3 rounded-sm border text-red-500 bg-red-900/65">
            {!! $value !!}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        @endsession

        <div class="bg-gray-800/50 backdrop-blur-sm p-8 cyber-border rounded-sm">

            <noscript>
                <div id="sent-message" class="mb-3 p-3 rounded-sm border text-red-500 bg-red-900/65">
                    {!! fcms__('global.javascript.no-script') !!}<br>
                    {!! fcms__('content-contact.javascript.no-script') !!}<br>
                </div>
            </noscript>

            <form method="POST" action="{{ droute('contact') }}" class="space-y-6" id="contact-form">
                @csrf
                <div>
                    <label class="block text-gray-300 mb-2">{{ fcms__('content-contact.name.label') }}*</label>
                    <input type="text" name="name" required
                           placeholder="{{ fcms__('content-contact.name.placeholder') }}" value="{{ old('name') }}"
                           class="w-full bg-gray-700/50 border border-blue-500/30 rounded-lg px-4 py-3 text-gray-100 focus:outline-none focus:border-blue-500 transition">
                    @if ($errors->has('name'))
                        @include(FilamentCms::getViewPrefix() . '.partials.contact-form-error', ['fieldErrors' => $errors->get('name')])
                    @endif
                </div>

                {{-- no visible output, only for bots --}}
                @honeypot

                <div>
                    <label class="block text-gray-300 mb-2">{{ fcms__('content-contact.email.label') }}*</label>
                    <input type="email" name="email" required
                           placeholder="{{ fcms__('content-contact.email.placeholder') }}" value="{{ old('email') }}"
                           class="w-full bg-gray-700/50 border border-blue-500/30 rounded-lg px-4 py-3 text-gray-100 focus:outline-none focus:border-blue-500 transition">
                    @if ($errors->has('email'))
                        @include(FilamentCms::getViewPrefix() . '.partials.contact-form-error', ['fieldErrors' => $errors->get('email')])
                    @endif
                </div>
                <div>
                    <label class="block text-gray-300 mb-2">{{ fcms__('content-contact.request') }}*</label>
                    <select name="request" required
                            class="w-full bg-gray-700/50 border border-blue-500/30 rounded-lg px-4 py-3 text-gray-100 focus:outline-none focus:border-blue-500 transition">
                        @foreach (fcms__('content-contact.request_options') as $value => $translation)
                            <option value="{{ $value }}"
                                    @if($value === old('request')) selected @endif>{{ $translation }}</option>
                        @endforeach
                    </select>
                    @if ($errors->has('request'))
                        @include(FilamentCms::getViewPrefix() . '.partials.contact-form-error', ['fieldErrors' => $errors->get('request')])
                    @endif
                </div>
                <div class="mb-1">
                    <label class="block text-gray-300 mb-2">{{ fcms__('content-contact.message.label') }}*</label>
                    <textarea name="message" required placeholder="{{ fcms__('content-contact.message.placeholder') }}"
                              rows="5"
                              minlength="10"
                              class="w-full bg-gray-700/50 border border-blue-500/30 rounded-lg px-4 py-3 text-gray-100 focus:outline-none focus:border-blue-500 transition">{{ old('message') }}</textarea>
                    @if ($errors->has('message'))
                        @include(FilamentCms::getViewPrefix() . '.partials.contact-form-error', ['fieldErrors' => $errors->get('message')])
                    @endif
                </div>

                {{--                <div class="mb-0 pb-0">--}}
                {{--                    <div class="w-full">--}}
                {{--                        <label class="block text-gray-300 mb-2">{{ fcms__('content-contact.captcha.label') }}*</label>--}}
                {{--                    </div>--}}
                {{--                    <div class="flex">--}}
                {{--                        <div class="w-1/3 bg-gray-700/50 border border-blue-500/30 rounded-lg px-4 py-3 text-gray-100 flex items-center justify-center mr-3">--}}
                {{--                            <div class="mr-3">--}}
                {{--                                @php echo MathCaptcha::getQuestion(); @endphp--}}
                {{--                            </div>--}}
                {{--                        </div>--}}
                {{--                        <div class="ml-4">--}}
                {{--                            <input name="_answer" type="number" required--}}
                {{--                                   class="bg-gray-700/50 border border-blue-500/30 rounded-lg px-4 py-3 text-gray-100 focus:outline-none focus:border-blue-500 transition">--}}
                {{--                        </div>--}}
                {{--                    </div>--}}

                {{--                    @if ($errors->has('_answer'))--}}
                {{--                        @include(FilamentCms::getViewPrefix() . '.partials.contact-form-error', ['fieldErrors' => $errors->get('_answer')])--}}
                {{--                    @endif--}}
                {{--                </div>--}}

                <div class="flex items-start mt-5 pb-0 pb-0">
                    <div class="mr-2">
                        <input type="hidden" name="consent" value="0"/>
                        <input type="checkbox" id="consent_checkbox" name="consent" value="1"/>
                    </div>
                    <label class="block text-gray-300 mb-2">{!! fcms__('content-contact.consent') !!}*</label>
                    @if ($errors->has('consent'))
                        @include(FilamentCms::getViewPrefix() . '.partials.contact-form-error', ['fieldErrors' => $errors->get('consent')])
                    @endif
                </div>

                <div class="mt-0 pt-0 text-xs text-gray-400">
                    * {{ fcms__('content-contact.mandatory') }}
                </div>

                <button id="contact_submit" type="submit" disabled
                        title="{{ fcms__('content-contact.send_message_disabled') }}"
                        class="w-full bg-blue-500 hover:bg-blue-600 text-gray-900 font-bold py-3 px-8 rounded-lg hover-glow transition cursor-not-allowed disabled:bg-gray-600 disabled:text-gray-400 disabled:opacity-60 disabled:cursor-not-allowed">
                    {{ fcms__('content-contact.send_message') }}
                </button>

                <script defer>
                    let pleaseWaitText = '{{ fcms__('content-contact.submit_please_wait') }}';
                    let removeClasses = ['bg-blue-500', 'hover:bg-blue-600'];
                    let pleaseWaitColor = 'text-gray-900';
                    let pleaseWaitBg = 'bg-gray-500';
                </script>
            </form>

            <div class="mt-1 md:mt-5 grid md:grid-cols-3 gap-6 text-center">
                <div>
                    <div class="text-blue-400 text-3xl md:mb-2">
                        <a href="mailto:{{ fcms__('content-bio.booking.mail') }}?subject={{ fcms__('content-bio.subject') }}"
                           class=""
                           title="Techno Artisan Booking Mail Icon"
                        >📧</a>
                    </div>
                    <p class="text-gray-400 text-sm md:text-base">
                        <a href="mailto:{{ fcms__('content-bio.booking.mail') }}?subject={{ fcms__('content-bio.subject') }}"
                           class="hover:underline"
                           title="{{ fcms__('content-bio.booking-title') }}"
                        >{{ fcms__('content-bio.booking.mail') }}</a>
                    </p>
                </div>
                <div>
                    <div class="text-blue-400 text-3xl md:mb-2">
                        <a href="tel:{{ fcms__('content-contact.footer.mobile.number') }}"
                           class=""
                           title="{{ fcms__('content-contact.footer.mobile.title') }} (Icon)"
                        >📱</a>
                    </div>
                    <p class="text-gray-400 text-sm md:text-base">
                        <a href="tel:{{ fcms__('content-contact.footer.mobile.number') }}"
                           class="hover:underline"
                           title="{{ fcms__('content-contact.footer.mobile.title') }}"
                        > {{ fcms__('content-contact.footer.mobile.text') }}</a>
                    </p>
                </div>
                <div>
                    <div class="text-blue-400 text-3xl md:mb-2" title="Norderstedt (Hamburg)">📍</div>
                    <p class="text-gray-400 text-sm md:text-base" title="Norderstedt (Hamburg)">
                        {!! fcms__('content-contact.footer.location') !!}
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

@include(FilamentCms::getViewPrefix() . '.partials.footer')
