<form id="contact_form" action="{{ route('sendContact') }}" method="post" class="grid gap-6 grid-cols-2 md:w-2/3 mx-auto">
    @csrf
    <div>
        <label for="name" class="block mb-2 text-base font-medium text-gray-900">Your Name<span class="text-red-500">
                *</span></label>
        <input required type="text" id="name" name="name" placeholder="Name"
            class="px-4 py-2 transition duration-300 w-full border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-blue-200" />
    </div>
    <div>
        <label for="email" class="block mb-2 text-base font-medium text-gray-900">Your Email <span
                class="text-red-500">*</span></label>

        <input required type="email" id="email" placeholder="Email" name="email"
            class="px-4 py-2 transition duration-300 w-full border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-blue-200" />
    </div>
    <div>
        <label for="company" class="block mb-2 text-base font-medium text-gray-900">Your Company</label>
        <input type="text" id="company" placeholder="Company" name="company"
            class="px-4 py-2 transition duration-300 w-full border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-blue-200" />
    </div>
    <div>
        <label for="phone" class="block mb-2 text-base font-medium text-gray-900">Your Phone</label>
        <input type="text" id="phone" placeholder="Phone" name="phone"
            class="px-4 py-2 transition duration-300 w-full border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-blue-200" />
    </div>
    <div class="col-span-2 ">
        <label for="message" class="block mb-2 text-base font-medium text-gray-900">Your Message<span
                class="text-red-500"> *</span></label>
        <textarea required rows="3" id="message" placeholder="Message" name="message"
            class="px-4 py-2 transition duration-300 w-full border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-blue-200"></textarea>
    </div>
    <div class=" col-span-2 flex justify-center">
        {{-- <button type="submit" id="btn_contact"
            class="rounded-full bg-blue-500 px-16 py-3 text-neutral-50 hover:opacity-80">
            Send
        </button> --}}

        <button type="submit" id="btn_contact"
            class="flex justify-center rounded-full px-16 py-3 text-neutral-50 bg-blue-500 text-center hover:opacity-80">
            <div class="flex items-center">
                <span class=" text-white">Send</span>
                <div id="animation_spin" class="ms-3 hidden flex-row space-x-4 ">
                    <div
                        class="w-4 h-4 rounded-full animate-spin
border-4 border-solid border-neutral-50 border-t-transparent">
                    </div>
                </div>
            </div>
        </button>
    </div>
</form>

<script>
    window.addEventListener("load", () => {
        $("#contact_form").submit(function(event) {
            $('#btn_contact').prop('disabled', true);
            $('#animation_spin').css('display', 'flex');


            event.preventDefault();
            $.ajax({
                type: "POST",
                url: $('#contact_form').attr('action'),
                data: $("#contact_form").serialize(),
                success: function(response) {

                    if (typeof toastr !== "undefined")
                        toastr.success(response.message);
                    $("#contact_form")[0].reset();
                    $('#btn_contact').prop('disabled', false);
                    $('#animation_spin').css('display', 'none');
                },
                error: function(xhr, status, error) {
                    $('#btn_contact').prop('disabled', false);
                    $('#animation_spin').css('display', 'none');
                    if (xhr.status === 429) {
                        toastr.error("Resend after 5 minutes ");
                        return;
                    }
                    const response = JSON.parse(xhr.responseText);
                    const messageArr = Object.keys(response.error).reduce(
                        (prevResult, item) => {
                            prevResult.push(response.error[item]);
                            return prevResult.flat();
                        },
                        []
                    );
                    messageArr.forEach((message) => {
                        if (typeof toastr !== "undefined")
                            toastr.error(message);
                    });
                },
            });
        });
    });
</script>
