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

@section('title')
    Sentry Safe
@endsection

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

@section('seo')
@endsection

@section('content')
    <style>
        .site-footer {
            margin-top: 0px !important;
        }
    </style>
    <section class="banner">
        <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="">
                        <div class="img-logo-cover"></div>
                        <img class="img-fluid titan-safe" src="{{ asset('img/home-image/logo-sentry-safe.png') }}"
                            alt="">

                        <a href="{{ asset('pdf/Sentry-safe-brochure.pdf') }}" target="_blank"><img
                                class="img-fluid banner-button-sentry button-img d-none d-lg-block"
                                src="{{ asset('img/new-buttons/sentrysafe_dlbt.png') }}" 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/SentrySafe-single/banner-sentrysafe.jpg') }}" alt="">
          <div class="img-logo-cover"></div>
          <img class="img-fluid titan-safe" src="{{ asset('img/logo-sentry_safe.png') }}" alt="">
          <img class="d-block d-lg-none w-100" src="{{ asset('img/mobile-banners/mb-prod1.jpg') }}" alt="">
          <a href="{{asset('pdf/Sentry-safe-brochure.pdf')}}" target="_blank"><img class="img-fluid banner-button-sentry button-img" src="{{ asset('img/Buttons/sentrysafe_dlbt.png') }}" alt=""></a>
        </div>
      </div> --}}

        </div>
    </section>

    <section class="about">
        <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-3.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 SENTRYSAFE</p>
                        <p class="fw-bold fs-3">
                            Sentry<span style="position: relative; top: .3em;"><sub
                                    style="font-size: 1.5em;">®</sub></span>Safe
                            <br>Proven top-of-the-line protection
                        </p>
                        <br>
                        <div class="ps-md-5">
                            <div class="ps-md-2 text-justify lh-lg">
                                <p class="fs-6">
                                    Founded in 1930, Sentry<span style="position: relative; top:  .3em;"><sub
                                            style="font-size: 1.5em;">®</sub></span>Safe is the world leader in
                                    fire-resistant and security storage solutions for important documents and valuables. A
                                    global presence, Sentry<span style="position: relative; top:  .3em;"><sub
                                            style="font-size: 1.5em;">®</sub></span>Safe produces more fire-resistant
                                    chests, files, safes and security storage containers than any other company in the
                                    world. Sentry<span style="position: relative; top:  .3em;"><sub
                                            style="font-size: 1.5em;">®</sub></span>Safe is headquartered in the USA and its
                                    products are available in more than 65 countries worldwide.
                                    <br><br>
                                    Sentry<span style="position: relative; top:  .3em;"><sub
                                            style="font-size: 1.5em;">®</sub></span>Safe started manufacturing safes in
                                    1935,
                                    and even though we pioneered the field, complacency has never tempted us. Since our very
                                    first model, we have continued to make impressive and ground-breaking improvements,
                                    such as the first UL classified fire-resistant safe in 1995, setting new standards of
                                    fire resistance. Sentry<span style="position: relative; top:  .3em;"><sub
                                            style="font-size: 1.5em;">®</sub></span>Safe also is the first manufacturer to
                                    have ETL-verified safes protecting digital media products (e.g. CDs, DVDs and USBs)
                                    against fires.
                                    <br><br>
                                    {{-- The larger Titan Safe models can also be configured as Executive Safes. The configurations allow for maximizing documents and other storage by adding more shelf space. --}}
                                </p>
                            </div>
                            <a href="{{ asset('pdf/Sentry-safe-brochure.pdf') }}" target="_blank"><img
                                    class="button-img img-fluid" src="{{ asset('img/new-buttons/sentrysafe_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">SENTRYSAFE</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 class="text-decoration-none" 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 SENTRYSAFE
                                                    </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>
                                                        <p class="btn btn-first big d-inline-block" data-bs-toggle="modal"
                                                            data-bs-target="#exampleModal{{ $offers->id }}">
                                                            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-md-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('productView/' . $featured->id) }}"><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('productView/' . $featured->id) }}"><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 SENTRYSAFE
                                                    </p>
                                                    <h1 class="product-name">{{ $offers->model }}</h1>

                                                    <p class="product-price">
                                                        @if (isset($featured->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={{ url('productView/' . $offers->id) }}>
                                                        <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('productView/' . $featured->id) }}"><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('productView/' . $featured->id) }}"><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">SENTRYSAFE</div>
                <div class="d-flex justify-content-between">
                    <p class="pt-0 fw-bold fs-3">Categories</p>
                    <a class="text-decoration-none" 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">
            <div class="row g-2 justify-content-center mb-5">
                @foreach ($categorie as $categories)
                    <div class="col-md-3">
                        <div class="p-3 shadow text-font cat-text"><a class="text-decoration-none text-red"
                                href="{{ url('/filter?category[]=' . $categories->category) }}"
                                style="color:#c61b1f">{{ $categories->category }}</a></div>
                    </div>
                @endforeach
                {{-- <div class="col-md-3">
          <div class="p-3 shadow text-font cat-text"><a class="text-decoration-none text-red" href="{{url('/filter?category[]=FireSafe%2FHomeOffice')}}" style="color:#c61b1f">Fire Safes - Home/Office</a></div>
        </div> --}}
                {{-- <div class="col-md-3">
          <div class="p-3 shadow text-font cat-text"><a class="text-decoration-none text-red" href="{{url('/filter?category[]=CommercialFireSafes')}}" style="color:#c61b1f">Fire Safes - Commercial</a></div>
        </div> --}}
                {{-- <div class="col-md-3">
          <div class="p-3 shadow text-font cat-text"><a class="text-decoration-none text-red" href="{{url('/filter?category[]=FireFilingCabinet')}}" style="color:#c61b1f">Fire Filling Cabinets</a></div>
        </div> --}}
                {{-- <div class="col-md-3">
          <div class="p-3 shadow text-font cat-text"><a class="text-decoration-none text-red" href="{{url('/filter?category[]=FireDataSafes')}}" style="color:#c61b1f">Fire Data Safes</a></div>
        </div> --}}
                {{-- <div class="col-md-3">
          <div class="p-3 shadow text-font cat-text"><a class="text-decoration-none text-red" href="{{url('/filter?category[]=FireChests')}}" style="color:#c61b1f">Fire Chests & Files</a></div>
        </div> --}}
                {{-- <div class="col-md-3">
          <div class="p-3 shadow text-font cat-text"><a class="text-decoration-none text-red" href="{{url('/filter?category[]=SecuritySafe')}}" style="color:#c61b1f">Security Safes</a></div>
        </div> --}}
                {{-- <div class="col-md-3">
          <div class="p-3 shadow text-font cat-text"><a class="text-decoration-none text-red" href="{{url('/filter?category[]=DepositorySafes')}}" style="color:#c61b1f">Cash Deposit Safes</a></div>
        </div> --}}
                {{-- <div class="col-md-3">
          <div class="p-3 shadow text-font cat-text"><a class="text-decoration-none text-red" href="{{url('/shop')}}" style="color:#c61b1f">Hotel Safes</a></div>
        </div> --}}
                {{-- <div class="col-md-3">
          <div class="p-3 border bg-light">Custom column padding</div>
        </div> --}}
                {{-- <div class="col-md-3">
          <div class="p-3 shadow text-font cat-text"><a class="text-decoration-none text-red" href="{{url('/filter?category[]=FireDataSafes')}}" style="color:#c61b1f">Pistol Safes</a></div>
        </div> --}}
                {{-- <div class="col-md-3">
          <div class="p-3 shadow text-font cat-text"><a class="text-decoration-none text-red" href="{{url('/filter?category[]=Accessories')}}" style="color:#c61b1f">Accessories</a></div>
        </div> --}}

            </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 mb-5 pb-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 fw-bold m-0"
                            style="color:red !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;
                                                } */

        .contact-us {
            padding-bottom: 0;
        }
    </style>

    <style>
        .footer-mt {
            margin-top: 20rem;
        }
    </style>
@endsection