HOME

@extends('frontend.layouts.app')



@section('content')

    <div class="position-relative">

        <div class="position-absolute" id="particles-js"></div>

        <div class="position-relative container">

            <!-- Breadcrumb -->

            <section class="pt-4 mb-4">

                    <div class="row">

                        <div class="col-lg-6 text-center text-lg-left">

                            <h1 class="fw-700 fs-20 fs-md-24 text-dark">{{ translate('Flash Deals')}}</h1>

                        </div>

                        <div class="col-lg-6">

                            <ul class="breadcrumb bg-transparent p-0 justify-content-center justify-content-lg-end">

                                <li class="breadcrumb-item has-transition opacity-60 hov-opacity-100">

                                    <a class="text-reset" href="{{ route('home') }}">

                                        {{ translate('Home')}}

                                    </a>

                                </li>

                                <li class="text-dark fw-600 breadcrumb-item">

                                    "{{ translate('Flash Deals') }}"

                                </li>

                            </ul>

                        </div>

                    </div>

            </section>

            <!-- Banner -->

            @if (get_setting('flash_deal_banner') != null || get_setting('flash_deal_banner_small') != null)

                <div class="mb-3 overflow-hidden hov-scale-img d-none d-md-block">

                    <img src="{{ static_asset('assets/img/placeholder-rect.jpg') }}" 

                        data-src="{{ uploaded_asset(get_setting('flash_deal_banner')) }}" 

                        alt="{{ env('APP_NAME') }} promo" class="lazyload img-fit h-100 has-transition" 

                        onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder-rect.jpg') }}';">

                </div>

                <div class="mb-3 overflow-hidden hov-scale-img d-md-none">

                    <img src="{{ static_asset('assets/img/placeholder-rect.jpg') }}" 

                        data-src="{{ get_setting('flash_deal_banner_small') != null ? uploaded_asset(get_setting('flash_deal_banner_small')) : uploaded_asset(get_setting('flash_deal_banner')) }}" 

                        alt="{{ env('APP_NAME') }} promo" class="lazyload img-fit h-100 has-transition" 

                        onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder-rect.jpg') }}';">

                </div>

            @endif

            <!-- All flash deals -->

            <section class="mb-4">

                <div class="row row-cols-1 row-cols-lg-2 row-cols-xl-3 gutters-16">

                    @foreach($all_flash_deals as $single)

                    <div class="col py-3 h-400px h-xl-475px">

                        <a href="{{ route('flash-deal-details', $single->slug) }}" target="_blank" rel="noopener noreferrer">

                            <div class="h-100 w-100 position-relative hov-scale-img">

                                <div class="position-absolute overflow-hidden h-100 w-100">

                                    <img src="{{ uploaded_asset($single->banner) }}" class="img-fit h-100 has-transition"  

                                                        onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';">

                                </div>

                                <div class="py-5 px-2 px-lg-3 px-xl-5 absolute-top-left w-100">

                                    <div class="bg-white">

                                        <div class="aiz-count-down-circle" end-date="{{ date('Y/m/d H:i:s', $single->end_date) }}"></div>

                                    </div>

                                </div>

                            </div>

                        </a>

                    </div>

                    @endforeach

                </div>

            </section>

        </div>

    </div>

@endsection



@section('script')

    <script>

        AIZ.plugins.particles();

    </script>

@endsection