<section>
    <header>
        <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
            <i class="fa-solid fa-message"></i> {{ __('Contact Form') }}
        </h2>
    </header>

    <form method="post" action="{{ route('contact.store') }}" class="mt-6 space-y-6">
        @csrf
        <p class="text-red-600">You won't get a reply here. Please contact us on Discord instead if a answer is required.</p>
        <p class="text-red-600">Don't request hentai here!</p>
        <div>
            <x-input-label for="name" :value="__('Name')" />
            <x-text-input id="name" name="name" type="text" class="mt-1 block w-full" required autocomplete="name" />
            <x-input-error class="mt-2" :messages="$errors->get('name')" />
        </div>

        <div>
            <x-input-label for="email" :value="__('Email')" />
            <x-text-input id="email" name="email" type="email" class="mt-1 block w-full" required autocomplete="email" />
            <x-input-error class="mt-2" :messages="$errors->get('email')" />
        </div>

        <div>
            <x-input-label for="subject" :value="__('Subject')" />
            <x-text-input id="subject" name="subject" type="text" class="mt-1 block w-full" required />
            <x-input-error class="mt-2" :messages="$errors->get('subject')" />
        </div>

        <div>
            <x-input-label for="message" :value="__('Message')" />
            <x-textarea-input id="message" name="message" class="mt-1 block w-full" required />
            <x-input-error class="mt-2" :messages="$errors->get('message')" />
        </div>

        <div>
            <x-input-label for="message" :value="__('Captcha')" />
            <div class="flex pt-2">
                <div id="captchaImg">
                    {!! captcha_img() !!}
                </div>
                <button type="button" class="inline-flex items-center ml-2 px-2 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-500 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-300 uppercase tracking-widest shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-25 transition ease-in-out duration-150" id="reloadcaptcha">
                    <i class="fa-solid fa-rotate-right"></i>
                </button>
            </div>
            <br>
            <x-text-input id="captcha" class="block " type="text" name="captcha" required />
        </div>

        <div class="flex items-center gap-4">
            <x-primary-button>{{ __('Submit') }}</x-primary-button>

            @if ($errors->any())
            @foreach ($errors->all() as $error)
            @if ($error == 'validation.captcha')
            <p x-data="{ show: true }" x-show="show" x-transition x-init="setTimeout(() => show = false, 3000)" class="text-sm text-red-600 dark:text-red-400">Captcha Incorrect!</p>
            @else
            <p x-data="{ show: true }" x-show="show" x-transition x-init="setTimeout(() => show = false, 3000)" class="text-sm text-red-600 dark:text-red-400">{{ $error }}</p>
            @endif
            @endforeach
            @endif

            @if (session('status') === 'contact-submitted')
            <p x-data="{ show: true }" x-show="show" x-transition x-init="setTimeout(() => show = false, 3000)" class="text-sm text-green-600 dark:text-green-400">{{ __('Your message was submitted.') }}</p>
            @endif
        </div>
    </form>

    <script>
        function reloadCaptcha() {
            window.axios.get('/reload-captcha').then(function(response) {
                if (response.status == 200) {
                    document.querySelector("#captchaImg").innerHTML = response.data.captcha;
                }
            }).catch(function(error) {
                console.log(error);
            });
        }

        document.querySelector("#reloadcaptcha").addEventListener("click", reloadCaptcha);
    </script>
</section>