@extends('template.main-template')

@push('preload')
    @if($sliders->count())
        <link rel="preload" as="image" href="{{ asset('storage/' . $sliders->first()->image) }}" fetchpriority="high">
    @endif
@endpush

@section('content')
    <!--======= HOME MAIN SLIDER =========-->
    <section class="home-slider">

        <!-- SLIDE Start -->
        <div class="tp-banner-container">
            <div class="tp-banner">
                <ul>
                    @forelse($sliders as $slider)
                        <!-- SLIDE  -->
                        <li data-transition="random" data-slotamount="7" data-masterspeed="300" data-saveperformance="off">
                            <!-- MAIN IMAGE -->
                            <img src="{{ asset('storage/' . $slider->image) }}" @if ($loop->first) fetchpriority="high" loading="eager" @else loading="lazy" @endif data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" alt="slider">
                            <!-- LAYERS -->

                            <!-- LAYER NR. 1 - Small Text -->
                            @if($slider->small_text)
                                <div class="tp-caption font-playfair sfb tp-resizeme" data-x="left" data-hoffset="0"
                                    data-y="center" data-voffset="-200" data-speed="800" data-start="500"
                                    data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1"
                                    data-endelementdelay="0.1" data-endspeed="300"
                                    style="z-index: 7; font-size:18px; color:#fff; max-width: auto; max-height: auto; white-space: nowrap;">
                                    {{ $slider->small_text }}
                                </div>
                            @endif

                            <!-- LAYER NR. 2 - Big Text -->
                            @if($slider->big_text)
                                <div class="tp-caption sfr font-extra-bold tp-resizeme" data-x="left" data-hoffset="0"
                                    data-y="center" data-voffset="0" data-speed="800" data-start="800"
                                    data-easing="Power3.easeInOut" data-splitin="chars" data-splitout="none"
                                    data-elementdelay="0.07" data-endelementdelay="0.1" data-endspeed="300"
                                    style="z-index: 6; font-size:110px; color:#fff; text-transform:uppercase;" id="mp-tp-caption-main-text">
                                    {{ $slider->big_text }}
                                </div>
                            @endif

                            <!-- LAYER NR. 3 - Action Button -->
                            @if($slider->action)
                                <div class="tp-caption lfb tp-resizeme" data-x="left" data-hoffset="0" data-y="center"
                                    data-voffset="240" data-speed="800" data-start="2200" data-easing="Power3.easeInOut"
                                    data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300" data-scrolloffset="0"
                                    style="z-index: 8;">
                                    <a href="{{ $slider->action }}" class="btn" target="{{ $slider->target }}"
                                        style="background-color: #1b1f49;">
                                        {{ $slider->button_text ?: 'See More' }}
                                    </a>
                                </div>
                            @endif
                        </li>
                    @empty
                        <!-- SLIDE PADRÃO (quando não há sliders cadastrados) -->
                        <li data-transition="random" data-slotamount="7" data-masterspeed="300" data-saveperformance="off">
                            <!-- MAIN IMAGE -->
                            <img src="{{ asset('template/images/banners/pismo-banner.png') }}" alt="slider"
                                data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" loading="lazy">
                            <!-- LAYERS -->

                            <!-- LAYER NR. 1 -->
                            <div class="tp-caption font-playfair sfb tp-resizeme" data-x="left" data-hoffset="0"
                                data-y="center" data-voffset="-200" data-speed="800" data-start="500"
                                data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1"
                                data-endelementdelay="0.1" data-endspeed="300"
                                style="z-index: 7; font-size:18px; color:#fff; max-width: auto; max-height: auto; white-space: nowrap;">
                                WATERPROOF. KID PROOF. PET PROOF.</div>

                            <!-- LAYER NR. 2 -->
                            <div class="tp-caption sfr font-extra-bold tp-resizeme" data-x="left" data-hoffset="0"
                                data-y="center" data-voffset="0" data-speed="800" data-start="800"
                                data-easing="Power3.easeInOut" data-splitin="chars" data-splitout="none"
                                data-elementdelay="0.07" data-endelementdelay="0.1" data-endspeed="300"
                                style="z-index: 6; font-size:110px; color:#fff; text-transform:uppercase;" id="mp-tp-caption-main-text">
                                Meet Permshield</div>

                            <!-- LAYER NR. 4 -->
                            <div class="tp-caption lfb tp-resizeme" data-x="left" data-hoffset="0" data-y="center"
                                data-voffset="240" data-speed="800" data-start="2200" data-easing="Power3.easeInOut"
                                data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300" data-scrolloffset="0"
                                style="z-index: 8;"><a href="{{ route('product.all') }}" class="btn"
                                    style="background-color: #1b1f49;">All Products</a> </div>
                        </li>
                    @endforelse
                </ul>
            </div>
        </div>
    </section>

    <div id="content">

        <section class="cultur-block" style="margin-bottom: 50px;">
            <ul>
                <li> <img src="{{ asset('template/images/subslider/subslider-1-red.jpg') }}" alt="" loading="lazy"> </li>
                <li> <img src="{{ asset('template/images/subslider/subslider-2-red.jpg') }}" alt="" loading="lazy"> </li>
                <li> <img src="{{ asset('template/images/subslider/subslider-3-red.jpg') }}" alt="" loading="lazy"> </li>
            </ul>

            <!-- Culture Text -->
            <div class="position-center-center">
                <div class="container">
                    <div class="col-sm-6 center-block">
                        <!-- <h4>New Arrival</h4>
                          <p>Phasellus lacinia fermentutm bibendum. Interdum et malante ipuctus non. Nulla lacinia,
                            eros vel fermentum consectetur, ris dolor in ex. </p> -->
                    </div>
                </div>
            </div>
        </section>

        <!-- Top Shop Feature  -->
        <div class="top-shop-feature">
            <div class="container">
                <div class="heading text-center">
                    <h4>UNIQUE COMBINATION OF DESIGN, DURABILITY, AND SIMPLICITY</h4>
                    <span>Permshield carries 100% waterproof, kid-proof, pet-proof luxury vinyl planks that fit
                        beautifully in your home. Our products are designed to show off your style while maintaining
                        all sustainability standards that promote the planet’s well-being and your own.</span>
                </div>

                <div class="row" style="margin-top: -50px;">
                    <div class="col-sm-4">
                        <div style="display: flex; flex-direction: column; align-items: center;">
                            <a href="{{ route('product.all') }}?category=lite-collection">
                                <img src="{{ asset('template/images/collections/lite.jpg') }}" style="width: 100%;"
                                    alt="" loading="lazy">
                            </a>
                            <h5><a href="{{ route('product.all') }}?category=lite-collection">LITE COLLECTION</a></h5>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div style="display: flex; flex-direction: column; align-items: center;">
                            <a href="{{ route('product.all') }}?category=one-plus-collection">
                                <img src="{{ asset('template/images/collections/one-plus.jpg') }}" style="width: 100%;"
                                    alt="" loading="lazy">
                            </a>
                            <h5><a href="{{ route('product.all') }}?category=one-plus-collection">ONE PLUS COLLECTION</a>
                            </h5>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div style="display: flex; flex-direction: column; align-items: center;">
                            <a href="{{ route('product.all') }}?category=xl-collection">
                                <img src="{{ asset('template/images/collections/xl.jpg') }}" style="width: 100%;"
                                    alt="" loading="lazy">
                            </a>
                            <h5><a href="{{ route('product.all') }}?category=xl-collection">XL COLLECTION</a></h5>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <!-- Popular Products -->
        <section class="padding-top-150 light-gray-bg padding-bottom-150">
            <div class="container">

                <!-- Main Heading -->
                <div class="heading text-center">
                    <h4>Shop By Color</h4>
                    <span>Browse styles by popular colorways to find floors that complement your furniture and
                        decor.</span>
                </div>

                <!-- Popular Item Slide -->
                <div class="arrival-block">
                    <div class="item">
                        <img class="img-1" src="{{ asset('template/images/store-images/White-red.jpg') }}" alt="" loading="lazy">
                        <img class="img-2" src="{{ asset('template/images/store-images/White-red.jpg') }}" alt="" loading="lazy">
                        <div class="overlay">

                        </div>
                        <div class="item-name">
                            <a href="{{ route('product.all') }}?color=White">White</a>
                        </div>
                    </div>

                    <div class="item">
                        <img class="img-1" src="{{ asset('template/images/store-images/Tan-red.jpg') }}" alt="" loading="lazy">
                        <img class="img-2" src="{{ asset('template/images/store-images/Tan-red.jpg') }}" alt="" loading="lazy">
                        <div class="overlay">

                        </div>
                        <div class="item-name">
                            <a href="{{ route('product.all') }}?color=BEIGE / TAN">Tan</a>
                        </div>
                    </div>

                    <div class="item">
                        <img class="img-1" src="{{ asset('template/images/store-images/Grey-red.jpg') }}" alt="" loading="lazy">
                        <img class="img-2" src="{{ asset('template/images/store-images/Grey-red.jpg') }}" alt="" loading="lazy">
                        <div class="overlay">

                        </div>
                        <div class="item-name">
                            <a href="{{ route('product.all') }}?color=Grey">Grey </a>
                        </div>
                    </div>

                    <div class="item">
                        <img class="img-1" src="{{ asset('template/images/store-images/Brown-red.jpg') }}" alt="" loading="lazy">
                        <img class="img-2" src="{{ asset('template/images/store-images/Brown-red.jpg') }}" alt="" loading="lazy">
                        <div class="overlay">

                        </div>
                        <div class="item-name">
                            <a href="{{ route('product.all') }}?color=Brown">Brown </a>
                        </div>
                    </div>

                    <div class="item">
                        <img class="img-1" src="{{ asset('template/images/store-images/Black-red.jpg') }}" alt="" loading="lazy">
                        <img class="img-2" src="{{ asset('template/images/store-images/Black-red.jpg') }}" alt="" loading="lazy">
                        <div class="overlay">

                        </div>
                        <div class="item-name">
                            <a href="{{ route('product.all') }}?color=Black">Black </a>
                        </div>
                    </div>
                </div>
        </section>

        <!-- Popular Products -->
        <section class="padding-top-50 padding-bottom-150">
            <div class="container">

                <!-- Main Heading -->
                <div class="heading text-center">
                    <h4 class="">TRENDING COLORS</h4>
                    <span>&nbsp;</span>
                </div>

                <!-- Popular Item Slide -->
                <div class="papular-block block-slide">
                    @foreach ($products as $product)
                        @component('template.components.products.product_loop', ['product' => $product, 'size'])
                        @endcomponent
                    @endforeach
                </div>
            </div>
        </section>

        <!-- Knowledge Share -->
        <section class="light-gray-bg padding-top-150 padding-bottom-150">
            <div class="container">

                <!-- Main Heading -->
                <div class="heading text-center">
                    <h4>FEATURES THAT MATTER</h4>
                    <span>Permshield features a rigid SPC core, a thick wear layer, a ceramic bead scratch resistant
                        coating, a pre-attached IXPE underlayment, and so much more. Also, all of our flooring have
                        key certifications like FloorScore and GreenGuard Gold to guarantee clean air that's safe
                        for everyone wherever they are installed.</span>
                </div>
                <div class="row" style="display: flex; align-items: center; justify-content: center;">
                    <a href="{{ route('pages.all', 'technical-documents') }}" class="btn"
                        style="background-color: rgb(27, 31, 73); transition: all 0.4s ease-in-out 0s; min-height: 0px; min-width: 0px; line-height: 46px; border-width: 0px; margin-top: -15px; padding: 5px 50px; letter-spacing: 1px; font-size: 18px;">
                        Technical Documents
                    </a>
                </div>
            </div>
        </section>

        <section class="padding-top-50 padding-bottom-50">
            <div class="container">
                <div class="row">
                    <div class="col-sm-4">
                        <div style="display: flex; flex-direction: column; align-items: center;">
                            <a target="_blank" href="{{ route('pages.all', 'visualizer') }}">
                                <img src="{{ asset('template/images/view-in-my-room-red.jpg') }}" style="width: 100%;"
                                    alt="" loading="lazy">
                            </a>
                            <h5><a target="_blank" href="{{ route('pages.all', 'visualizer') }}">View In My Room</a></h5>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div style="display: flex; flex-direction: column; align-items: center;">
                            <a href="{{ route('product.all') }}">
                                <img src="{{ asset('template/images/order-my-samples-red.jpg') }}" style="width: 100%;"
                                    alt="">
                            </a>
                            <h5><a href="{{ route('product.all') }}">Order My Samples</a></h5>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div style="display: flex; flex-direction: column; align-items: center;">
                            <a href="{{ route('product.all') }}?category=stairs">
                                <img src="{{ asset('template/images/stair-renewal-red.jpg') }}" style="width: 100%;"
                                    alt="">
                            </a>
                            <h5><a href="{{ route('product.all') }}?category=stairs">Stair Renewal</a></h5>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- About -->
        <section class="small-about padding-top-150 padding-bottom-150">
            <div class="container">

                <!-- Main Heading -->
                <div class="heading text-center">
                    <h4>about permshield</h4>
                    <p>We started with a simple mission: to make floor shopping easy. Our goal is to improve the way you
                        shop for, install, clean and live on your new floors. Now's the time to update your floors!</p>
                </div>

                <!-- Social Icons -->
                <ul class="social_icons">
                    <li><a target="_blank" href="https://www.facebook.com/permshield"><i style=""
                                class="icon-social-facebook"></i></a></li>
                    <li><a target="_blank" href="https://www.instagram.com/permshield"><i style=""
                                class="fa-brands fa-instagram"></i></a></li>
                    <li><a target="_blank" href="https://www.pinterest.com/permshield/"><i style=""
                                class="fa-brands fa-pinterest-p"></i></a></li>
                </ul>
            </div>
        </section>
    </div>
@endsection