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

@section('title')
    Titan Elite
@endsection

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

@section('seo')AF
@endsection

@section('content')
    <style>
        .site-footer {Fs
            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-elite" src="{{ asset('/img/new-buttons/Titan%20Elite%20Logo.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/titanelite_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/Titan_Elite.jpg') }}" alt="">
          <img class="img-fluid titan-elite" src="{{ asset('img/logo-titan_elite.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/titanelite_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-2.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 TITAN ELITE</p>
                        <p class="fw-bold fs-3">
                            TITAN ELITE <br> Certified security-rated and fire-rated safes for the discerning customer
                        </p>
                        <br>
                        <div class="ps-md-5">
                            <div class="ps-md-2 text-justify lh-lg">
                                <p class="fs-6">
                                    In 2017, Zenorex launched TITAN ELITE under the Titan brand to provide the Philippine
                                    market with an extensive range of top-of-the-line safes that offer both exceptional
                                    quality and value.
                                    Currently, TITAN ELITE offers two main categories of safes - Luxury (LUX) Series and PRO
                                    Series. LUX and PRO safes are constructed to meet international standards. PRO safes are
                                    rigorously tested under ECB-S EN14450 (S1) standards for optimal security. In
                                    addition, all TITAN ELITE safes are rated for fire protection.
                                    <br><br>
                                    TITAN ELITE LUX and PRO safes come with a 3-year limited warranty and after-fire
                                    replacement guarantee.
                                </p>
                            </div>
                            <a href="{{ asset('pdf/Titan-Brochure.pdf') }}" target="_blank"><img
                                    class="button-img img-fluid mt-3" src="{{ asset('img/titanelite_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">TITAN ELITE</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 ELITE
                                                    </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 TITAN ELITE
                                                    </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('/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">TITAN ELITE</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[]=LuxurySafe')}}">
            <div class="p-3 shadow item">Luxury Safes</div>
          </a>
        </div>
        <div class="col-md-3">
          <a href="{{url('/filter?category[]=ProfessionalSafe')}}">
            <div class="p-3 shadow item">Professional Safes</div>
          </a>
        </div> --}}
                {{-- Add More --}}
            </div>
        </div>
    </section>

    <section class="more-information pb-5" 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">
                    <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 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;
                                                        } */
    </style>
    <style>
        .footer-mt {
            margin-top: 20rem;
        }
    </style>
@endsection