@extends('frontend::layouts.master')

@section('content')
    <div class="flashsale-page-banner">
        <a href="#" class="container block h-full">
            <div class="w-full lg:w-2/5 h-full flex flex-col justify-center">
                <h1 class="font-bold text-white">Flash Sale</h1>
                <h2 class="text-white">Get the 50%  extra off!</h2>
                <p class="text-white text-14">Lorem ipsum dolor sit amet consectetur. Laoreet tincidunt semper feugiat odio. 
                    Volutpat urna ultrices vitae viverra mi sem. Congue aliquet cras dignissim sed aliquam 
                    at libero mi scelerisque. Scelerisque iaculis sapien massa neque et fringilla sed ante at.</p>
            </div>
        </a>
    </div>
    <div class="bg-top-sub-gradient pt-12">

        <div class="lg:container px-4">
            <div class="flex -mx-3 gap-y-6 flex-wrap">
                <div class="w-full md:w-3/4 lg:w-1/3 2xl:w-1/4 px-3 mx-auto">
                    <div class="relative lg:aspect-[61/91] h-full w-full bg-flashsale flex items-end justify-center">
                        <img src="{{ Module::asset('frontend:img/flash-top.png') }}" class="flash-top">
                        <img src="{{ Module::asset('frontend:img/flash-text.png') }}"  class="flash-text">
                        <div>
                            <p class="text-18 text-center text-primary">End in</p>
                            <div class="flex items-baseline justify-center gap-x-2">
                                <h2 class="flex flex-col items-center text-primary">
                                    <span class="font-bold leading-[1.1]">
                                        00
                                    </span>
                                    <span class="text-18">
                                        Hrs
                                    </span>
                                </h2>
                                <h2 class="font-bold text-primary">
                                    :
                                </h2>
                                <h2 class="flex flex-col items-center text-primary">
                                    <span class="font-bold leading-[1.1]">
                                        00
                                    </span>
                                    <span class="text-18">
                                        Mins
                                    </span>
                                </h2>
                                <h2 class="font-bold text-primary">
                                    :
                                </h2>
                                <h2 class="flex flex-col items-center text-primary">
                                    <span class="font-bold leading-[1.1]">
                                        00
                                    </span>
                                    <span class="text-18">
                                        Secs
                                    </span>
                                </h2>
                            </div>
                        </div>
                    </div>
                </div>
                @for ($example = 1; $example < 3; $example++)
                    @for ($i = 1; $i < 5; $i++)
                        <div class="w-full xtn:w-1/2 md:w-1/3 2xl:w-1/4 px-3">
                            <x-frontend::card.product-card.template link="product-detail"
                                productImage="{{ Module::asset('frontend:img/product' . $i . '.jpg') }}"
                                productName="IMOU Smart IP Camera 3.6mm (REX 2D) GK2DP-3C0W ประกัน 2 ปี"
                                productSubtitle="Lens : 3.6mm / IR Distance : 10m Audio Communication : Two-Way"
                                brandImage="{{ Module::asset('frontend:img/brand.png') }}"
                                brandName="EZVIZ" :badges="[
                                    [
                                        'name' => 'new',
                                        'title' => 'New',
                                    ],
                                    [
                                        'name' => 'Best price',
                                        'title' => 'New',
                                    ],
                                    [
                                        'name' => 'flash',
                                        'title' => 'Flash sale',
                                    ],
                                ]" tag="Free special gift"
                                price="2,500" discountPrice="2,690" :flashSale=true
                                progressPercentage="25" progressText="1 sold" warranty="2 years warranty"
                                addToCartLink="#">
                            </x-frontend>
                        </div>
                    @endfor
                    @endfor
                    @for ($i = 1; $i < 4; $i++)
                        <div class="w-full xtn:w-1/2 md:w-1/3 2xl:w-1/4 px-3">
                            <x-frontend::card.product-card.template link="product-detail"
                                productImage="{{ Module::asset('frontend:img/product' . $i . '.jpg') }}"
                                productName="IMOU Smart IP Camera 3.6mm (REX 2D) GK2DP-3C0W ประกัน 2 ปี"
                                productSubtitle="Lens : 3.6mm / IR Distance : 10m Audio Communication : Two-Way"
                                brandImage="{{ Module::asset('frontend:img/brand.png') }}"
                                brandName="EZVIZ" :badges="[
                                    [
                                        'name' => 'new',
                                        'title' => 'New',
                                    ],
                                    [
                                        'name' => 'Best price',
                                        'title' => 'New',
                                    ],
                                    [
                                        'name' => 'flash',
                                        'title' => 'Flash sale',
                                    ],
                                ]" tag="Free special gift"
                                price="2,500" discountPrice="2,690" :flashSale=true
                                progressPercentage="25" progressText="1 sold" warranty="2 years warranty"
                                addToCartLink="#">
                            </x-frontend>
                        </div>
                    @endfor
                <div class="w-full pb-8 pt-2 text-center">
                    <x-frontend::navigation.pagination.template></x-frontend::navigation.pagination.template>
                </div>
            </div>
    </div>
@endsection