<section id="feature" class="py-16 bg-[#e3e3e3]">
    <div class="container mx-auto">
        <h2 class="animation-fade-in mb-10 text-3xl lg:text-5xl font-bold text-[#5278ad] text-center">
            Features coming soon
        </h2>
        <div class="grid grid-cols-2 lg:grid-cols-3 gap-6 mb-4">
            <div
                class="animation-fade-in mx-auto group shadow-md md:shadow-none rounded-md hover:shadow-xl duration-300 p-2 md:px-4 md:py-8 h-[250px] md:h-[350px] w-full overflow-hidden">
                <div class="rounded-lg w-[100px] h-[100px] md:w-[250px] md:h-[250px] mx-auto  group-hover:md:w-[150px] group-hover:md:h-[150px] duration-500"
                    style="
            background: url('https://picsum.photos/id/400/300/200');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
          ">
                </div>
                <h3 class="text-center my-2 font-bold text-xl md:text-2xl">
                    Features 1
                </h3>
                <p class="md:hidden text-center group-hover:block mb-0 text-xs md:text-base">
                    Lorem placeat rerum quia delectus fugiat consectetur in eveniet
                    suscipit quibusdam laborum corrupti et architecto iusto veritatis,
                    vero dolor.
                </p>
            </div>

            <div
                class="animation-fade-in mx-auto group shadow-md md:shadow-none rounded-md hover:shadow-xl duration-300 p-2 md:px-4 md:py-8 h-[250px] md:h-[350px] w-full overflow-hidden">
                <div class="rounded-lg w-[100px] h-[100px] md:w-[250px] md:h-[250px] mx-auto  group-hover:md:w-[150px] group-hover:md:h-[150px] duration-500"
                    style="
            background: url('https://picsum.photos/id/401/300/200');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
          ">
                </div>
                <h3 class="text-center my-2 font-bold text-xl md:text-2xl">
                    Features 2
                </h3>
                <p class="md:hidden text-center group-hover:block mb-0 text-xs md:text-base">
                    Lorem placeat rerum quia delectus fugiat consectetur in eveniet
                    suscipit quibusdam laborum corrupti et architecto iusto veritatis,
                    vero dolor.
                </p>
            </div>
            <div
                class="animation-fade-in mx-auto group shadow-md md:shadow-none rounded-md hover:shadow-xl duration-300 p-2 md:px-4 md:py-8 h-[250px] md:h-[350px] w-full overflow-hidden">
                <div class="rounded-lg w-[100px] h-[100px] md:w-[250px] md:h-[250px] mx-auto  group-hover:md:w-[150px] group-hover:md:h-[150px] duration-500"
                    style="
            background: url('https://picsum.photos/id/402/300/200');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
          ">
                </div>
                <h3 class="text-center my-2 font-bold text-xl md:text-2xl">
                    Features 3
                </h3>
                <p class="md:hidden text-center group-hover:block mb-0 text-xs md:text-base">
                    Lorem placeat rerum quia delectus fugiat consectetur in eveniet
                    suscipit quibusdam laborum corrupti et architecto iusto veritatis,
                    vero dolor.
                </p>
            </div>
        </div>
        @if (!auth()->check() || (auth()->user() && auth()->user()->subscribe !== 1))
            <form id="subcriber_form" action="{{ route('subscriber') }}" method="post" class="flex justify-center">
                @csrf
                <div class="text-center space-y-6">
                    <h4>
                        Stay tuned, notifications about our updates
                    </h4>
                    <button type="submit" id="btn_subscribe"
                        class="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">Subscribe</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>
        @endif
    </div>
</section>

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

                    if (typeof toastr !== "undefined")
                        toastr.success(response.message);
                    $("#btn_subscribe").hide();
                    $('#animation_spin').css('display', 'none');
                },
                error: function(xhr, status, error) {
                    $('#subcriber_form').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);
                    });
                },
            });
        });
    });

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