<section id="share_with_friend" class="">
    <div class="py-32 container">
        <div class="w-[80%] md:w-[75%] mx-auto space-y-12">
            <h2 class="animation-fade-in text-3xl lg:text-5xl font-bold mb-0 text-[#5278ad] text-center">
                Share us to your friend
            </h2>
            <form id="share_with_friend_form" action="{{ route('share-with-friend') }}" class="flex animation-fade-in" method="POST">
                @csrf
                <input required id="email" type="email" placeholder="Enter your friend Email" name="email" autocomplete="off"
                    class="px-4 py-2 transition duration-300 w-[85%] border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-blue-200" />
                <button type="submit" id="btn_share_with_friend"
                class=" rounded-full py-2 ml-2 px-4 rounded-md text-neutral-50 bg-blue-500 text-center hover:opacity-80">
                <div class="flex items-center">
                    <span class="text-white">Share Now</span>
                    <div id="animation_spin_share_with_friend" class="ms-2 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>
            </form>
        </div>
    </div>
</section>

<script>
    window.addEventListener("load", () => {
        $("#share_with_friend_form").submit(function(event) {
            if (!isLoggedIn()) {
                window.location.href = "{{ route('login') }}";
                return;
            }
            $('#btn_share_with_friend').prop('disabled', true);
            $('#animation_spin_share_with_friend').css('display', 'flex');
            event.preventDefault();
            $.ajax({
                type: "POST",
                url: $('#share_with_friend_form').attr('action'),
                data: $("#share_with_friend_form").serialize(),
                success: function(response) {

                    if (typeof toastr !== "undefined")
                        toastr.success(response.message);
                        $('#animation_spin_share_with_friend').css('display', 'none');
                        $('#btn_share_with_friend').prop('disabled', false);
                        $('#email').val('');
                },
                error: function(xhr, status, error) {
                    $('#animation_spin_share_with_friend').css('display', 'none');
                    $('#btn_share_with_friend').prop('disabled', false);
                    $('#share_with_friend_form').prop('disabled', false);
                    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);
                    });
                },
            });
        });
    });

    function isLoggedIn() {
        return {{ auth()->check() ? 'true' : 'false' }};
    }
</script>
