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

@section('title')
    Titan 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="">
                        <img class="img-fluid titan-safe" src="{{ asset('img/new-buttons/Titan Safes logo white.png') }}"
                            alt="">

                        <a href="{{ asset('pdf/Titan-Brochure.pdf') }}" target="_blank"><img
                                class="img-fluid banner-button-sentry button-img d-none d-lg-block"
                                src="{{ asset('/img/titansafe_dlbt_v2.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/Titan_Safe.jpg') }}" alt="">
          <img class="img-fluid titan-safe" src="{{ asset('img/logo-titan_safes.png') }}" alt="">
          <img class="d-block d-lg-none w-100" src="{{ asset('img/mobile-banners/mb-prod1.jpg') }}" alt="">
          <a href="{{asset('pdf/Titan-Brochure.pdf')}}" target="_blank"><img class="img-fluid banner-button-sentry button-img" src="{{ asset('img/titansafe_dlbt_v2.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">
                    <style>
                        .titan1-image::after {
                            content: "";
                            position: absolute;
                            height: 100%;
                            width: 100px;
                            right: 0;
                            top: 0;
                            background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
                        }
                    </style>
                    <div class="titan1-image position-relative">
                        <img src="{{ asset('img/asian.jpg') }}" class="w-100" alt="" class="img-fluid">
                    </div>
                </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 TITAN SAFES</p>
                        <p class="fw-bold fs-3">
                            TITAN Safes <br>Exceptional protection, outstanding value
                        </p>
                        <br>
                        <div class="ps-md-5">
                            <div class="ps-md-2 text-justify lh-lg">
                                <p class="fs-6">
                                    Titan Safes was established in 2015 to allow Zenorex to offer
                                    a full range of high-quality high-value safes to the Philippine
                                    market.
                                    <br><br>
                                    TITAN Safes currently carries Long Gun Safes. These
                                    safes are built to international standards, meeting California
                                    Department of Justice standards for firearm safety as well as
                                    the requirements of the Philippine Comprehensive Firearms
                                    and Ammunition Regulation Act (RA 10591). TITAN carries a
                                    full line of long gun safes to meet our customers’ needs;

                                    choices range from 5-gun to 36-gun models and include fire-rated safes and safes keylock, digital

                                    lock, or biometric lock. These long gun safes carry a 3-year
                                    limited warranty, and all TITAN fire-rated safes offer a
                                            lifetime after-fire replacement guarantee.
                                    <br><br>
                                   The larger TITAN Safe models can also be configured as
                                    Executive Safes. The configuration options allow for
                                    maximizing document and other storage by adding more
                                    shelf space.
                                </p>
                            </div>
                            <a href="{{ asset('pdf/Titan-Brochure.pdf') }}" target="_blank"><img
                                    class="button-img img-fluid mt-3" src="{{ asset('img/titansafe_dlbt_v2.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">TITAN SAFES</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 TITAN SAFES
                                                    </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-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 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 TITAN SAFES
                                                    </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={{ 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">TITAN SAFES</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 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="">
                            <div class="p-3 shadow item"><a class="text-decoration-none"
                                    href="{{ url('/filter?category[]=' . $categories->category) }}"
                                    style="color: #c61b1f">{{ $categories->category }}</a></div>
                        </a>
                    </div>
                @endforeach
                {{-- <div class="col-md-3">
          <a href="">
            <div class="p-3 shadow item"><a class="text-decoration-none" href="{{url('/filter?category[]=LongGun')}}" style="color: #c61b1f">Long Gun/Executive Safes</a></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 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 mb-5">
            <div class="px-lg-5 mb-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 text-red">Contact uS</p> --}}
                        <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