@extends('layouts.app')

@section('title', 'Contact | ' . config('app.name'))

@push('styles')
    @vite('resources/css/pages/contact.css')
@endpush

@section('content')
 
<style>
@media(max-width:991px){
    .location-card {
        padding-top: 40px !important;
    }
    .location-card h1 {
        padding-top: 30px !important;
    }
    
}
</style>
 <section class="contact-hero">

    <div class="contact-bg">

        <video
            class="contact-video-desktop"
            autoplay
            muted
            loop
            playsinline
            preload="auto">

            <source src="https://campaign.securelinkme.net/securex360/header/new/contact_video.mp4?time=1" type="video/mp4">

        </video>

        <video
            class="contact-video-mobile"
            autoplay
            muted
            loop
            playsinline
            preload="auto">

            <source src="https://campaign.securelinkme.net/securex360/header/new/contact_video.mp4?time=1" type="video/mp4">

        </video>

    </div>

    <!-- <div class="hero-overlay"></div> -->

    <!-- <div class="hex-overlay"></div> -->

    <div class="mesh-sphere"></div>

    <div class="hero-particles"></div>

    <div class="container">

        <div class="contact-heading">
            <h1 style="color:#64d741">Contact Us</h1>
        </div>

        <div class="contact-card">
             <div class="contact-title">

                <span>FEEL FREE TO GET IN TOUCH!</span>

                <h2 >How we can help you?</h2>

            </div>
            @if(session('success'))

                    <div class="alert alert-success mb-4">
                        {{ session('success') }}
                    </div>

                    @endif
            <form class="contact-form" method="POST"
                            action="{{ route('contact.submit') }}">
@csrf
                <div class="row">

                    <div class="col-md-6 mb-4">
                        <input type="text" name="name"
                               class="form-control"
                               placeholder="Your name*">
                    </div>

                    <div class="col-md-6 mb-4">
                        <input type="email" name="email"
                               class="form-control"
                               placeholder="Your email address*">
                    </div>

                    <div class="col-md-6 mb-4">
                        <input type="text" name="phone"
                               class="form-control"
                               placeholder="Your phone*">
                    </div>

                    <div class="col-md-6 mb-4">
                        <input type="text" name="subject"
                               class="form-control"
                               placeholder="Subject*">
                    </div>

                    <div class="col-12 mb-4">

                        <textarea class="form-control"
                                  rows="6" name = "comment"
                                  placeholder="Your message"></textarea>

                    </div>

                </div>

                <div class="text-center">
                    <button class="btn-demo sx-flap" data-sx-type="hover">Send Message</button>
                </div>

            </form>
        </div>

        <div class="location-wrapper">
             <div class="row justify-content-center">

             {{-- UK --}}
                <div class="col-lg-3 col-md-6 office-location-sec">

                    <div class="location-card">

                        <div class="location-icon">
                            <img src="{{ asset('images/icons/uk.svg') }}">
                        </div>

                        <h4>United Kingdom</h4>

                        <!-- <p>
                            7th Floor, Uncommon, 34-37<br>Liverpool St, London EC2M 7PP
                        </p> -->

                    </div>

                </div>

            {{-- USA --}}
                <div class="col-lg-3 col-md-6 office-location-sec">

                    <div class="location-card">

                        <div class="location-icon">
                            <img src="{{ asset('images/icons/us.svg') }}">
                        </div>

                        <h4>United States</h4>

                        <!-- <p>
                            Suite 444, 320 E Clayton Street,<br> Athens, Georgia 30601
                        </p> -->

                    </div>

                </div>

             {{-- Saudi --}}
                <div class="col-lg-3 col-md-6 office-location-sec">

                    <div class="location-card">

                        <div class="location-icon">
                            <img src="{{ asset('images/icons/saudi.svg') }}">
                        </div>

                        <h4>Saudi Arabia</h4>

                        <!-- <p>
                            8th Floor, Baljushi Tura Hotel,<br>Al Olaya, Riyadh
                        </p> -->

                    </div>

                </div>

                {{-- UAE --}}
                <div class="col-lg-3 col-md-6 office-location-sec">

                    <div class="location-card">

                        <div class="location-icon">
                            <img src="{{ asset('images/icons/uae.svg') }}">
                        </div>

                        <h4>United Arab Emirates</h4>

                        <!-- <p>
                            Mazaya Business Avenue<br>
                            Office 1605, BB2, JLT Dubai
                        </p> -->

                    </div>

                </div>

                

                

            </div>
        </div>

    </div>

</section>

{{-- Bottom Contact Bar --}}

<section class="contact-bottom d-none">

    <div class="container">

        <div class="contact-bottom-box">

            <div class="contact-phone-icon">

                <i class="bi bi-telephone-fill"></i>

            </div>

            <div>

                <h5>Email us directly</h5>

                <p>
                    <!-- Phone: +971 4 279 4002
                    | -->
                    info@securex360.ai
                </p>

            </div>

        </div>

    </div>

</section>

@endsection


@push('scripts')
    @vite('resources/js/contact.js')
@endpush