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

@section('title')
    Contact Us
@endsection

@section('seo')
@endsection

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

    <div class="mapouter position-relative">
        <div class="gmap_canvas">
            <iframe class="gmap_iframe" width="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
                src="https://maps.google.com/maps?width=600&amp;height=400&amp;hl=en&amp;q=25/F Cityland 10 Tower 1 H.V Dela Costa/Ayala Avenue, Makati City&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed">

            </iframe>
        </div>
        <style>
            .mapouter {
                position: relative;
                text-align: right;
                width: 100%;
                height: 400px;
            }

            .gmap_canvas {
                overflow: hidden;
                background: none !important;
                width: 100%;
                height: 400px;
            }

            .gmap_iframe {
                height: 400px !important;
            }
        </style>
    </div>

    <div class="container start-50 overlay-contact position-absolute translate-middle d-lg-block d-none d-sm-none">
        <div>
            <div class="container contact-content p-5">
                <div class="bg-light bg-shadow">
                    <div class="container d-flex align-items-center">
                        <div class="row">
                            <div class="col-md-5 p-5 red-side"
                                style="background-image: url('{{ asset('img/contact-img.png') }}')">
                                <p class="title "
                                    style="font-size: 30px; color: white; font-family: 'Poppins', sans-serif; font-weight: bolder !important;">
                                    Contact</p>
                                <p class="icons"><i class="fa-regular fa-envelope"></i> zmc@zenorexmarketing.com </p>
                                <p class="icons"><i class="fa-solid fa-phone"></i> (02) 8893-7610 to 12</p>
                                <div class="lh-base mb-4">
                                    <span class="icons-map"><i class="fa-solid fa-map"></i> Zenorex Marketing Corporation
                                        2510</span><br>
                                    <span class="text-white ps-3">25th floor Cityland 10 Tower 1, H.V.</span><br>
                                    <span class="text-white ps-3">Dela Costa, Ayala Ave, Makati City</span>
                                </div>
                                <div class="lh-base">
                                    <span class="icons"><i class="fa-regular fa-clock"></i> Monday - Friday</span><br>
                                    <span class="icons ps-3">7:30 am - 4:30 pm</span>
                                </div>
                                <ul class="social-icons1">
                                    <li><a class="text-decoration-none"
                                            href="https://www.facebook.com/SentrySafePhilippines"><i
                                                class="fa-brands fa-facebook-f brands"></i></a></li>
                                    <li><a href="https://mail.google.com/mail/u/0/?fs=1&to=zmc%40zenorexmarketing.com&tf=cm" class="text-decoration-none" href=""><i
                                                class="fa-brands fa-google brands"></i></i></a></li>
                                </ul>
                            </div>
                            <div class="col-md-7 rounded-end pt-5 right-info overflow-visible">
                                <p class="contact-zenorex fw-bold text-red">Contact Us</p>
                                <p class="love-here fw-bold" style="font-size: 30px !important">We'd love to hear from you
                                </p>
                                <form class="row g-3" method="POST" action={{ url('/contact') }}> @csrf
                                    <div class="col-md-12">
                                        <input type="text" required class="form-control rounded-0" id="inputEmail4"
                                            name="fullname" placeholder="Full Name *">
                                    </div>
                                    <div class="col-md-6">
                                        <input type="email" required class="form-control rounded-0" id="inputAddress"
                                            name="email" placeholder="Email Address *">
                                    </div>
                                    <div class="col-md-6">
                                        <input type="number" required class="form-control rounded-0" id="inputAddress2"
                                            name="number" placeholder="Phone No.">
                                    </div>
                                    <div class="col-md-12">
                                        <textarea class="form-control rounded-0" required id="exampleFormControlTextarea1" rows="7" name="message"
                                            placeholder="Your Message"></textarea>
                                    </div>
                                    <div class="col-md-9">

                                    </div>
                                 <div class="d-flex justify-content-end">
    <button type="submit" class="findAbout btns" style="width: 60%;">Send Message</button>
</div>

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

    <div class="container d-lg-none d-block d-sm-block">
        <div>
            <div class="container contact-content p-5">
                <div class="">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-5 p-5 red-side rounded shadow"
                                style="background-image: url('{{ asset('img/contact-img.png') }}')">
                                <p class="title"
                                    style="font-size: 30px; color: white; font-family: 'Poppins', sans-serif;">Contact</p>
                                <p class="icons"><i class="fa-regular fa-envelope"></i> zmc@zenorexmarketing.com </p>
                                <p class="icons"><i class="fa-solid fa-phone"></i> (02) 8893-7610 to 12</p>
                                <div class="lh-base mb-4">
                                    <span class="icons-map"><i class="fa-regular fa-map"></i> 25/F Cityland 10 Tower 1
                                        H.V.</span><br>
                                    <span class="text-white ps-3">Dela Costa, Ayala Ave, Makati</span>
                                    <span class="text-white ps-3">City</span>
                                </div>
                                <div class="lh-base">
                                    <span class="icons"><i class="fa-regular fa-clock"></i> Monday - Friday</span><br>
                                    <span class="icons ps-3">7:30 am - 4:30 pm</span>
                                </div>
                                <ul class="social-icons1">
                                    <li><a class="text-decoration-none"
                                            href="https://www.facebook.com/SentrySafePhilippines"><i
                                                class="fa-brands fa-facebook-f brands"></i></a></li>
                                    <li><a href="https://mail.google.com/mail/u/0/?fs=1&to=zmc%40zenorexmarketing.com&tf=cm" class="text-decoration-none" href=""><i
                                                class="fa-brands fa-google brands"></i></i></a></li>
                                </ul>
                            </div>
                            <div class="col-md-7 rounded pt-5 contact-placer shadow mt-3 pb-3">
                                <p class="contact-zenorex fw-bold text-red">Contact Us</p>
                                <p class="love-here">We'd love to hear from you</p>
                                <form class="row g-3" method="POST" action={{ url('/contact') }}> @csrf
                                    <div class="col-md-12">
                                        <input type="email" class="form-control" id="inputEmail4" name="fullname"
                                            placeholder="Full Name *">
                                    </div>
                                    <div class="col-md-6">
                                        <input type="text" class="form-control" id="inputAddress" name="email"
                                            placeholder="Email Address *">
                                    </div>
                                    <div class="col-md-6">
                                        <input type="text" class="form-control" id="inputAddress2" name="number"
                                            placeholder="Phone No.">
                                    </div>
                                    <div class="col-md-12">
                                        <textarea class="form-control" id="exampleFormControlTextarea1" name="message" rows="7"
                                            placeholder="Your Message"></textarea>
                                    </div>
                                    <div class="col-md-9">

                                    </div>
                                     <div class="">
                                        <button type="submit" class="findAbout btns w-100" style="">Send
                                            Message</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <br><br>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="d-md-block d-none" style="margin-top: 35rem;">
    </div>


    <div class="d-lg-none d-block d-block">
        <br>
    </div>

    <div class="container text-center mb-5">
        <div>
            <div class="container">
                <div class="row g-2">
                    <div class="col-md-4">
                        <a href="{{ url('/lost') }}" class="text-decoration-none">
                            <div class="p-3 border combi-code" style=""><i class="fa-solid fa-user-lock"></i> |
                                Lost a Combination Code</div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="{{ url('/duplicate') }}" class="text-decoration-none">
                            <div class="p-3 border combi-code" style=""><i class="fa-solid fa-key"></i> | Need a
                                Duplicate key</div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="{{ url('/technicalService') }}" class="text-decoration-none">
                            <div class="p-3 border combi-code" style=""><i class="fa-solid fa-gear"></i> | Need
                                Technical Service</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- <div class="d-lg-block d-none d-sm-none">
            <br>
          </div>
           --}}
    <div class="d-lg-none d-block d-sm-block">
        <br><br>
    </div>

    @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="d-flex justify-content-center"> --}}
                        {{-- <img src="{{ asset('img/checked.png') }}" class="d-block w-25 " alt="..."> --}}
                        <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> --}}
                        <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>
        </div>
        {{ Session::get('success') }}
    @endif
    <script>
        $(window).on('load', function() {
            $('#myModal').modal('show');
            // alert('test');
        });
    </script>

    <style>
        .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;
            }
        }

        .bg-shadow {
            -webkit-box-shadow: 0 7.5px 10px 8.5px #dddddd;
            -moz-box-shadow: 0 7.5px 10px 8.5px #dddddd;
            box-shadow: 0 7.5px 10px 8.5px #dddddd;
        }

        /* Chrome, Safari, Edge, Opera */
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield;
        }
    </style>
@endsection