@extends('frontend.layouts.master')
@section('content')
    <section class="section border-0 m-0 py-2">
        <div class="container-xl">

            <div class="row">
                <div class="col-12 text-center">
                    <h2 class="text-12 mb-0">
                        {{ $offer->title }}
                    </h2>
                    <div id="countdown" class="text-4 text-gray-700 mb-5"></div>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12 col-12 order-1 order-lg-2">


                    <div class="masonry-loader masonry-loader-showing">
                        <div class="row products product-thumb-info-list" data-plugin-masonry
                             data-plugin-options="{'layoutMode': 'fitRows'}">
                            @foreach ($products as $key => $product)
                                <div class="col-lg-2 col-md-4 col-sm-6 col-6 mb-3">
                                    @livewire('frontend.product-card', ['product' => $product], key($product->id))
                                </div>
                            @endforeach
                        </div>
                        <div class="row mt-4">
                            <div class="col">
                                {{ $products->links() }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('script')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const endDate = new Date("{{ \Carbon\Carbon::parse($offer->end_date)->toISOString() }}");

            function updateCountdown() {
                const now = new Date().getTime();
                const distance = endDate - now;

                if (distance < 0) {
                    document.getElementById("countdown").innerHTML = "The offer has ended";
                    clearInterval(interval);
                    return;
                }

                const days = Math.floor(distance / (1000 * 60 * 60 * 24));
                const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((distance % (1000 * 60)) / 1000);

                document.getElementById("countdown").innerHTML =
                    `🔥${days} Days ${hours} Hours ${minutes} Minutes ${seconds} Seconds🔥`;
            }

            const interval = setInterval(updateCountdown, 1000);
            updateCountdown();
        });
    </script>
@endsection