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

@section('title')
    Products
@endsection

@section('seo')
@endsection

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

    <div class="bg-product" style="background-image: url('{{ asset('img/product-main-bg.jpg') }}')">
        <br>

        <div class="container">
            <div>
                <p class="text-white product-title">Product Guide</p>
                <img src="{{ asset('img/bar-line.png') }}" class="img-fluid" alt="images"
                    style="max-width: 95% !important; margin-left: 30px">
            </div>
            <div class="container px-4 mt-5">
                <div class="row gx-2 gy-2">
                    <div class="col-md-6">
                        <a href="{{ url('/guidedQuestion') }}" class="text-decoration-none">
                            <div class="p-5 border boxed bg-light overflow-hidden product-cat rounded-4">
                                <p class="product-cat ">Guided Product Selection</p>
                                <div class="d-flex justify-content-end position-relative">
                                    <img src="{{ asset('img/icon-3.png') }}"
                                        class="img-fluid position-absolute img-product translate-middle" alt="images">
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-6">
                        <a href="{{ url('/guidedComparison') }}" class="text-decoration-none">
                            <div class="p-5 border boxed bg-light overflow-hidden rounded-4">
                                <p class="product-cat">Product Comparison</p>
                                <div class="d-flex justify-content-end position-relative">
                                    <img src="{{ asset('img/icon-4.png') }}"
                                        class="img-fluid position-absolute img-product translate-middle" alt="images">
                                </div>
                            </div>
                        </a>
                    </div>

                </div>
            </div>
        </div>

        <br><br>
        <div class="container">
            <div>
                <p class="text-white product-title">Our Brands</p>
                <img src="{{ asset('img/bar-line.png') }}" class="img-fluid" alt="images"
                    style="max-width: 95% !important; margin-left: 30px">
            </div>
            <div class="container px-5 text-center mt-5">
                <div class="row gx-2 gy-4">
                    <style></style>

                    <div class="col-md">
                        <a href="{{ url('/sentrySafe') }}">
                            <div class="p-5 border boxed bg-light rounded-4">
                                <img class="ourbrand-sentrySafe safe img-fluid" src="img/new-buttons/SentryLogo.png"
                                    alt="">
                            </div>
                        </a>
                    </div>

                    <style>
                        .safe {
                            height: 60px;
                        }

                        @media screen and (max-width:600px) {
                            .safe {
                                height: 30px;
                            }
                        }
                    </style>
                    <div class="col-md">
                        <a href="{{ url('/titanSafe') }}">
                            <div class="p-5 border boxed bg-light rounded-4">
                                <img class="ourbrand-sentrySafe ourbrand img-fluid"
                                    src="img/new-buttons/Titan Safes logo R 1.png" alt="">
                            </div>
                        </a>
                    </div>
                </div>
                <br>
                <div class="row gx-2 gy-4">
                    <div class="col-md">
                        <a href="{{ url('/titanElite') }}">
                            <div class="p-5 border boxed bg-light rounded-4">
                                <img class="ourbrand-titanElite ourbrand img-fluid"
                                    src="img/new-buttons/Titan Elite Logo.png" alt="">
                            </div>
                        </a>
                    </div>
                    {{-- <div class="col-md">
                    <a href="{{ url('/X-Sense')}}">
                      <div class="p-4 border boxed bg-light rounded-4">
                        <img class="ourbrand-xSense ourbrand img-fluid" src="img/new-buttons/x-safe-logo.png" style="height: 108px;" alt="">
                      </div>
                    </a>
                </div> --}}
                    <div class="col-md">
                        <a href="{{ url('/X-Sense') }}">
                            <div class="p-5 border boxed bg-light rounded-4">
                                <img class="ourbrand-xSense ourbrand img-fluid" src="img/home-image/x-sense-logo.png"
                                    alt="">
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <br><br>
        <div class="container">
            <div>
                <p class="text-white product-title" style="font-size: 30px; font-weight: bold;">Quick Guides</p>
                <img src="{{ asset('img/bar-line.png') }}" class="img-fluid" alt="images"
                    style="max-width: 95% !important; margin-left: 30px">
            </div>
            <div class="container px-4 mt-5 mb-5">
                <div class="row gx-2 gy-2">
                    <div class="col">
                        <a href="{{ url('/safe101') }}" class="text-decoration-none">
                            <div class="p-5 border boxed bg-light overflow-hidden rounded-4">
                                <p class="product-cat">Safes 101</p>
                                <div class="d-flex justify-content-end position-relative">
                                    <img src="{{ asset('img/p-icon-5.png') }}"
                                        class="img-fluid position-absolute img-product translate-middle img-size-mb"
                                        alt="images">
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col">
                        <a href="{{ url('/testimonies') }}" class="text-decoration-none">
                            <div class="p-5 border boxed bg-light overflow-hidden rounded-4">
                                <p class="product-cat">Testimonials</p>
                                <div class="d-flex justify-content-end position-relative">
                                    <img src="{{ asset('img/p-icon-6.png') }}"
                                        class="img-fluid position-absolute img-product translate-middle img-size-mb"
                                        alt="images">
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <br>
        </div>

        <style>
            .site-footer {
                margin-top: 0 !important;
                padding-top: 3rem !important;
            }

            .footer-mt {
                margin-top: 0
            }

            @media only screen and (max-width: 600px) {
                .img-size-mb {
                    width: 20% !important;
                }
            }

            .success-animation {
                margin: 10px 80px 40px 80px;
            }

            .checkmark {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                display: block;
                stroke-width: 2;
                stroke: #4bb71b;
                stroke-miterlimit: 10;
                box-shadow: inset 0px 0px 0px #4bb71b;
                animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
                position: relative;
                top: 5px;
                right: 5px;
                margin: 0 auto;
            }

            .checkmark__circle {
                stroke-dasharray: 166;
                stroke-dashoffset: 166;
                stroke-width: 2;
                stroke-miterlimit: 10;
                stroke: #4bb71b;
                fill: #fff;
                animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;

            }

            .checkmark__check {
                transform-origin: 50% 50%;
                stroke-dasharray: 48;
                stroke-dashoffset: 48;
                animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
            }


            @keyframes stroke {
                100% {
                    stroke-dashoffset: 0;
                }
            }

            @keyframes scale {

                0%,
                100% {
                    transform: none;
                }

                50% {
                    transform: scale3d(1.1, 1.1, 1);
                }
            }

            @keyframes fill {
                100% {
                    box-shadow: inset 0px 0px 0px 30px #4bb71b;
                }
            }
        </style>

        @if (Session::has('success'))
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header border-0">

                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="success-animation">
                                <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
                                    <circle class="checkmark__circle" cx="26" cy="26" r="25"
                                        fill="none" />
                                    <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
                                </svg>
                            </div>
                            <div class="mt-3 d-flex justify-content-center">
                                <h1>Thank You!</h1>
                            </div>
                            <div class="d-flex justify-content-center">
                                <p>Your message has been sent.</p>
                            </div>
                        </div>
                    </div>
                </div>
                {{ Session::get('success') }}
            </div>
        @endif
        <script>
            $(window).on('load', function() {
                $('#myModal').modal('show');
                // alert('test');
            });
        </script>
    @endsection