@extends('frontend.layouts.brands-app')

@section('title')
    X-Sense
@endsection

@section('css')
    <link rel="stylesheet" href="{{ asset('css/brands.css') }}">
@endsection

@section('seo')
@endsection

@section('content')
    <section class="banner overflow-hidden">
        <div class="slider">
            @foreach ($banners as $banner)
                <div class="slider-item">
                    <div class="position-relative">
                        <img class=" d-lg-block w-100 " src="{{ asset('uploads/bans/' . $banner->image) }}" alt="">
                        <img class="img-fluid x-sense" src="{{ asset('img/home-image/x-sense-logo.png') }}" alt="">

                        <a href="{{ asset('pdf/X-Sense-brochure.pdf') }}" target="_blank"><img
                                class="img-fluid banner-button-sentry button-img d-none d-lg-block "
                                src="{{ asset('/img/xsense_dlbt.png') }}" width="25%" alt=""></a>
                    </div>
                </div>
            @endforeach
            {{-- <div class="slider-item">
        <div class="position-relative">
          <img class="d-none d-lg-block w-100 " src="{{ asset('img/X-Sense.jpg') }}" alt="">
          <img class="img-fluid x-sense" src="{{ asset('img/logo-x_sense.png') }}" alt="">
          <img class="d-block d-lg-none w-100 " src="{{ asset('img/mobile-banners/mb-prod1.jpg') }}" alt="">
          <a href="{{asset('pdf/X-Sense-brochure.pdf')}}" target="_blank"><img class="img-fluid banner-button-sentry button-img" src="{{ asset('img/xsense_dlbt.png') }}" alt=""></a>
        </div>
      </div> --}}
        </div>
    </section>

    <section class="about overflow-hidden">
        <div class="container-fluid p-0 overflow-hidden">
            <div class="row mt-5">
                <div class="col-12 col-md-4">
                    <img src="{{ asset('img/img-4.jpg') }}" alt="" class="img-fluid">
                </div>
                <div class="col-12 col-md-8 p-4">
                    <div class="text-box">
                        <p class="font-cinzel color-red fw-bold" style="color:#c61b1f !important;">ABOUT X-SENSE</p>
                        <p class="fw-bold fs-3">
                            X-SENSE<br>Premium smoke alarms
                        </p>
                        <br>
                        <div class="ps-md-5">
                            <div class="ps-md-2 text-justify lh-lg">
                                <p class="fs-6">
                                    Founded in 2014, X-SENSE is a global leader in home safety products, including smoke
                                    alarms. All alarms are tested and calibrated to meet the highest quality standards,
                                    backed by third parties, including TÜV Rheinland. The brand’s drive to innovate has
                                    resulted in incorporating the most recent wireless technologies in products such as RF
                                    interlinked alarms and smart Wi-Fi alarms. X-SENSE also emphasizes visual aesthetics in
                                    product design.
                                    X-SENSE provides a variety of smoke alarms that are equipped with advanced photoelectric
                                    sensors to quickly detect dangerous smoke levels and reduce false alarms. The wire-free
                                    design makes X-SENSE products easy to install anywhere.
                                    The X-SENSE product line includes standalone, 10-year sealed smoke alarms with built-in
                                    lithium batteries and smoke alarms with connection options like RF interconnection and
                                    Wi-Fi connection.
                                </p>
                            </div>
                            <a href="{{ asset('pdf/X-Sense-brochure.pdf') }}" target="_blank"><img
                                    class="button-img img-fluid mt-3" src="{{ asset('img/xsense_dlbt.png') }}"
                                    alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="featured-products overflow-hidden">
        <div class="container mt-5">
            <div>
                <div class="font-cinzel color-red fw-bold">X-SENSE</div>
                <div class="d-flex justify-content-between">
                    <div class="d-flex align-items-center">
                        <p class="pt-0 fw-bold fs-3 featured-title">Featured Products</p>
                    </div>
                    <a href="{{ url('/shop') }}">
                        <p class="btn btn-first padding">SEE ALL PRODUCTS</p>
                    </a>
                </div>
                <img src="{{ asset('img/bar-line.png') }}" alt="" width="100%">
            </div>
        </div>
        <div class="container mb-5 pb-5 px-5">
            <div id="featured" class="carousel slide" data-bs-ride="false">
                <div class="carousel-inner">
                    <div class="carousel-item active">

                        <div class="row">
                            @foreach ($offer as $offers)
                                <div class="col-12 col-lg-5 d-flex align-items-center mb-5 mb-lg-0">
                                    <div class="special-offer position-relative w-100">
                                        <img src="{{ asset('uploads/product/' . $offers->thumbnail_image) }}"
                                            alt="" class="img-fluid w-100"
                                            style="object-fit: contain; object-position: center; aspect-ratio: 1 / 1;">
                                        <div class="position-absolute top-0 w-100 h-100 bg-transparent-black p-4">
                                            <div class="main-featured-box px-2">
                                                <div class="item-status-label status-label-yellow mb-2 mb-sm-5">
                                                    <p class="text-white">SPECIAL OFFER</p>
                                                </div>
                                                <div class="text-box">
                                                    <p class="title">
                                                        FEATURED X-SENSE
                                                    </p>
                                                    <h1 class="product-name">{{ $offers->model }}</h1>

                                                    <p class="product-price">
                                                        @if (isset($offers->sellPrice))
                                                            <span class="product-price-no-discount">P
                                                                {{ $offers->price }}</span>
                                                            <span class="product-price">P {{ $offers->sellPrice }}</span>
                                                        @else
                                                            <span class="product-price-no-discount d-none">P
                                                                25,120.00</span>
                                                            <span class="product-price">P
                                                                {{ number_format($offers->price) }}</span>
                                                        @endif
                                                    </p>
                                                </div>
                                                <div>
                                                    <a data-bs-toggle="modal"
                                                        data-bs-target="#exampleModal{{ $offers->id }}">
                                                        <p class="btn btn-first big d-inline-block">
                                                            REQUEST A QUOTE</p>
                                                    </a>
                                                </div>
                                                <div class="modal fade" id="exampleModal{{ $offers->id }}" tabindex="-1"
                                                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                    <div class="modal-dialog modal-dialog-centered">
                                                        <div class="modal-content">
                                                            <div class="modal-header border-bottom-0">
                                                                <button type="button" class="btn-close"
                                                                    data-bs-dismiss="modal" aria-label="Close"></button>
                                                            </div>
                                                            <div class="modal-body text-center">
                                                                <h1>Continue to Quote?</h1>
                                                            </div>
                                                            <div
                                                                class="modal-footer border-top-0 d-flex justify-content-center">
                                                                <a href="{{ url('cart/' . $offers->id) }}"><button
                                                                        type="button"
                                                                        class="p-2 btns bg-white btn-confirm rounded-5">Add
                                                                        to Quote</button></a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <script>
                                                    $(document).ready(function() {
                                                        $('#item'
                                                            {{ $offers->id }} '').hover(function() {
                                                            $('#btn-item'
                                                                {{ $offers->id }} '').toggle();
                                                        });
                                                    });
                                                </script>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            <div class="col-12 col-lg-7 d-flex align-items-center">
                                <div class="container text-center">
                                    <div class="d-md-block d-none">
                                        <div class="row" style="row-gap: 40px;">
                                            @foreach ($feature as $featured)
                                                <div class="col-6 col-sm-4 product-item mb-4">
                                                    <div class="position-relative">
                                                        <a href="{{ url('/shop') }}"><img
                                                                src="{{ asset('uploads/product/' . $featured->thumbnail_image) }}"
                                                                alt="" class="img-fluid w-100"></a>
                                                        <div>
                                                            <p class="product-name">{{ $featured->model }}</p>
                                                            <p class="product-price m-0">
                                                                @if (isset($featured->sellPrice))
                                                                    <span class="product-price-no-discount">P
                                                                        {{ $featured->price }}</span>
                                                                    <span class="product-price">P
                                                                        {{ $featured->sellPrice }}</span>
                                                                @else
                                                                    <span class="product-price-no-discount d-none">P
                                                                        25,120.00</span>
                                                                    <span class="product-price">P
                                                                        {{ number_format($featured->price) }}</span>
                                                                @endif
                                                            </p>
                                                        </div>
                                                        @if ($featured->sellPrice != null && $featured->backStock == 'yes')
                                                            <div class="item-status-label pos-absolute">
                                                                <p class="text-white m-0">SALE</p>
                                                            </div>
                                                        @elseif($featured->backStock === 'yes')
                                                            <div class="item-status-label pos-absolute">
                                                                <p class="text-white m-0">BACK IN STOCK</p>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="d-md-none d-block">
                                        <div class="row">
                                            @foreach ($feature->take(2) as $featured)
                                                <div class="col-6 product-item mb-4">
                                                    <div class="position-relative">
                                                        <a href="{{ url('/shop') }}"><img
                                                                src="{{ asset('uploads/product/' . $featured->thumbnail_image) }}"
                                                                alt="" class="img-fluid w-100"></a>
                                                        <div>
                                                            <p class="product-name">{{ $featured->model }}</p>
                                                            <p class="product-price m-0">
                                                                @if (isset($featured->sellPrice))
                                                                    <span class="product-price-no-discount">P
                                                                        {{ $featured->price }}</span>
                                                                    <span class="product-price">P
                                                                        {{ $featured->sellPrice }}</span>
                                                                @else
                                                                    <span class="product-price-no-discount d-none">P
                                                                        25,120.00</span>
                                                                    <span class="product-price">P
                                                                        {{ number_format($featured->price) }}</span>
                                                                @endif
                                                            </p>
                                                        </div>
                                                        @if ($featured->sellPrice != null && $featured->backStock == 'yes')
                                                            <div class="item-status-label pos-absolute">
                                                                <p class="text-white m-0">SALE</p>
                                                            </div>
                                                        @elseif($featured->backStock === 'yes')
                                                            <div class="item-status-label pos-absolute">
                                                                <p class="text-white m-0">BACK IN STOCK</p>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="carousel-item">

                        <div class="row">
                            @foreach ($offer as $offers)
                                <div class="col-12 col-lg-5 d-flex align-items-center mb-5 mb-lg-0">
                                    <div class="special-offer position-relative w-100">
                                        <img src="{{ asset('uploads/product/' . $offers->thumbnail_image) }}"
                                            alt="" class="img-fluid w-100"
                                            style="object-fit: contain; object-position: center; aspect-ratio: 1 / 1;">
                                        <div class="position-absolute top-0 w-100 h-100 bg-transparent-black p-4">
                                            <div class="main-featured-box px-2">
                                                <div class="item-status-label status-label-yellow mb-2 mb-sm-5">
                                                    <p class="text-white">SPECIAL OFFER</p>
                                                </div>
                                                <div class="text-box">
                                                    <p class="title">
                                                        FEATURED X-SENSE
                                                    </p>
                                                    <h1 class="product-name">{{ $offers->model }}</h1>

                                                    <p class="product-price">
                                                        @if (isset($offers->sellPrice))
                                                            <span class="product-price-no-discount">P
                                                                {{ $offers->price }}</span>
                                                            <span class="product-price">P {{ $offers->sellPrice }}</span>
                                                        @else
                                                            <span class="product-price-no-discount d-none">P
                                                                25,120.00</span>
                                                            <span class="product-price">P
                                                                {{ number_format($offers->price) }}</span>
                                                        @endif
                                                    </p>
                                                </div>
                                                <div>
                                                    <a href={{ '/shop' }}>
                                                        <p class="btn btn-first big d-inline-block">
                                                            REQUEST A QUOTE</p>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            <div class="col-12 col-lg-7 d-flex align-items-center">
                                <div class="container text-center">
                                    <div class="d-md-block d-none">
                                        <div class="row" style="row-gap: 40px;">
                                            @foreach ($feature as $featured)
                                                <div class="col-6 col-sm-4 product-item mb-4">
                                                    <div class="position-relative">
                                                        <a href="{{ url('/shop') }}"><img
                                                                src="{{ asset('uploads/product/' . $featured->thumbnail_image) }}"
                                                                alt="" class="img-fluid w-100"></a>
                                                        <div>
                                                            <p class="product-name">{{ $featured->model }}</p>
                                                            <p class="product-price m-0">
                                                                @if (isset($featured->sellPrice))
                                                                    <span class="product-price-no-discount">P
                                                                        {{ $featured->price }}</span>
                                                                    <span class="product-price">P
                                                                        {{ $featured->sellPrice }}</span>
                                                                @else
                                                                    <span class="product-price-no-discount d-none">P
                                                                        25,120.00</span>
                                                                    <span class="product-price">P
                                                                        {{ number_format($featured->price) }}</span>
                                                                @endif
                                                            </p>
                                                        </div>
                                                        @if ($featured->sellPrice != null && $featured->backStock == 'yes')
                                                            <div class="item-status-label pos-absolute">
                                                                <p class="text-white m-0">SALE</p>
                                                            </div>
                                                        @elseif($featured->backStock === 'yes')
                                                            <div class="item-status-label pos-absolute">
                                                                <p class="text-white m-0">BACK IN STOCK</p>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="d-md-none d-block">
                                        <div class="row">
                                            @foreach ($feature->take(2) as $featured)
                                                <div class="col-6 product-item mb-4">
                                                    <div class="position-relative">
                                                        <a href="{{ url('/shop') }}"><img
                                                                src="{{ asset('uploads/product/' . $featured->thumbnail_image) }}"
                                                                alt="" class="img-fluid w-100"></a>
                                                        <div>
                                                            <p class="product-name">{{ $featured->model }}</p>
                                                            <p class="product-price m-0">
                                                                @if (isset($featured->sellPrice))
                                                                    <span class="product-price-no-discount">P
                                                                        {{ $featured->price }}</span>
                                                                    <span class="product-price">P
                                                                        {{ $featured->sellPrice }}</span>
                                                                @else
                                                                    <span class="product-price-no-discount d-none">P
                                                                        25,120.00</span>
                                                                    <span class="product-price">P
                                                                        {{ number_format($featured->price) }}</span>
                                                                @endif
                                                            </p>
                                                        </div>
                                                        @if ($featured->sellPrice != null && $featured->backStock == 'yes')
                                                            <div class="item-status-label pos-absolute">
                                                                <p class="text-white m-0">SALE</p>
                                                            </div>
                                                        @elseif($featured->backStock === 'yes')
                                                            <div class="item-status-label pos-absolute">
                                                                <p class="text-white m-0">BACK IN STOCK</p>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#featured" data-bs-slide="prev">
                    <div class="">
                        <div class="icon-box" style="margin-right: 30px; padding: 20px;">
                            <i class="fa-solid fa-angle-left color-red"></i>
                        </div>
                    </div>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#featured" data-bs-slide="next">
                    <div class="">
                        <div class="icon-box" style="margin-left: 30px; padding: 20px;">
                            <i class="fa-solid fa-angle-right color-red"></i>
                        </div>
                    </div>
                </button>
            </div>
        </div>
    </section>


    <section class="categories">
        <div class="container">
            <div>
                <div class="font-cinzel color-red fw-bold">X-SENSE</div>
                <div class="d-flex justify-content-between">
                    <p class="pt-0 fw-bold fs-3">Categories</p>
                    <a href="{{ url('/shop') }}">
                        <p class="btn btn-first padding">SEE ALL PRODUCTS</p>
                    </a>
                </div>
                <img src="{{ asset('img/bar-line.png') }}" alt="" width="100%">
            </div>
        </div>
        <br>
        <div class="container text-center pb-5">
            <div class="row g-2 justify-content-center mb-5">
                {{-- Remove mx-auto if even, add if odd --}}
                @foreach ($categorie as $categories)
                    <div class="col-md-3">
                        <a href="{{ url('/filter?category[]=' . $categories->category) }}">
                            <div class="p-3 shadow item">{{ $categories->category }}</div>
                        </a>
                    </div>
                @endforeach
                {{-- <div class="col-md-3">
          <a href="{{url('/filter?category%5B%5D=StandaloneSmokeAl')}}">
            <div class="p-3 shadow item">Standalone Smoke Alarm</div>
          </a>
        </div>
        <div class="col-md-3">
          <a href="{{url('/filter?category%5B%5D=InterconnectedSmokeAlarm')}}">
            <div class="p-3 shadow item">Interconnected Smoke Alarm</div>
          </a>
        </div>
        <div class="col-md-3">
          <a href="{{url('/filter?category%5B%5D=SmartWifiSmokeAlarms')}}">
            <div class="p-3 shadow item">Smart WIFI Smoke Alarm</div>
          </a>
        </div> --}}
                {{-- Add More --}}
            </div>
        </div>
    </section>

    <section class="more-information" style="background-color: #dee2e6;">
        <div class="pb-5">
            <div class="container-fluid pb-5">
                <center>
                    <p class="font-cinzel font-size-14px fw-bold color-red pt-5 mb-0" style="color:#c61b1f !important;">
                        Quick Guide</p>
                    <h4 class="pt-0 fw-bold fs-3 mb-5 pb-4">More Information</h4>
                </center>
                <div class="container pb-5 mb-5">
                    <div class="row g-2 text-center mb-5">
                        <div class="col-md-3">
                            <a href="{{ url('/safe101') }}" class="text-decoration-none">
                                <div class="p-3 item border rounded">Safes 101<i class="fa-solid fa-arrow-right ms-3"></i>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="{{ url('/testimonies') }}" class="text-decoration-none">
                                <div class="p-3 item border rounded">Testimonials<i
                                        class="fa-solid fa-arrow-right ms-3"></i>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="{{ url('/customer-care') }}" class="text-decoration-none">
                                <div class="p-3 item border rounded">Customer Care<i
                                        class="fa-solid fa-arrow-right ms-3"></i>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="{{ url('/guidedQuestion') }}" class="text-decoration-none">
                                <div class="p-3 item border rounded">Guided Product Selection<i
                                        class="fa-solid fa-arrow-right ms-3"></i></div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="contact-us bg-light d-md-none d-block">
        <div class="container px-lg-5">
            <div class="px-lg-5">
                <div class="p-5 bg-white position-relative">
                    <div class="px-lg-5">
                        <p class="color-red font-cinzel font-size-14px m-0"
                            style="color:#c61b1f !important; letter-spacing: 1px !important;">CONTACT US</p>
                        <p class="fs-3 fw-bold">We'd Love To Hear From You</p>
                        <div class="containers">
                            <div class="row align-items-start">
                                <div class="col-md-4">
                                    <input class="form-control rounded-0 font-size-12px px-4 py-3"
                                        placeholder="Name *" type="text" required="">
                                </div>
                                <div class="col-md-4">
                                    <input class="form-control rounded-0 font-size-12px px-4 py-3"
                                        placeholder="Phone No. *" type="text" required="">
                                </div>
                                <div class="col-md-4">
                                    <input class="form-control rounded-0 font-size-12px px-4 py-3"
                                        placeholder="Email Address *" type="text" required="">
                                </div>
                            </div>
                            <br>
                            <textarea class="form-control textarea rounded-0 font-size-12px px-4 py-3" style="height: 150px"
                                placeholder="Write a Message"></textarea>
                            <br>
                            <button class="btn btn-first btn-send">
                                SEND MESSAGE
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>



    <style>
        /* .req{
                          border: 2px solid #c61b1f !important;
                          padding: 6px 12px;
                          width: 100% !important;
                          border-radius: 20px;
                          color:#c61b1f;
                          text-align: center;
                          font-family: 'Poppins', sans-serif;
                          font-size: 14px !important;
                          font-size: 12px !important;
                          margin-left: 0 !important;
                          width: 40%;
                          background-color: white;
                        }
                        .site-footer{
                          margin-top: 0px !important;
                        } */
    </style>
    <style>
        .footer-mt {
            margin-top: 20rem;
        }
    </style>
@endsection