@extends('pages_landing.index')

@section('content')
    <div>
        <section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-400 text-white"
            data-image-src="{{ asset('landingAssets/img/photos/b8.jpg') }}">
            <div class="container pt-17 pb-20 pt-md-19 pb-md-21 text-center">
                <div class="row">
                    <div class="col-lg-8 mx-auto">
                        <h1 class="display-1 mb-3 text-white">Get in Touch</h1>
                        {{-- <nav class="d-inline-block" aria-label="breadcrumb">
                            <ol class="breadcrumb text-white">
                                <li class="breadcrumb-item"><a href="{{ route('landing') }}">Home</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Contact</li>
                            </ol>
                        </nav> --}}
                    </div>
                </div>
            </div>
        </section>

        <section class="wrapper bg-light angled upper-end">
            <div class="container pb-11">
                <div class="row mb-14 mb-md-16">
                    <div class="col-xl-10 mx-auto mt-n19">
                        <div class="card">
                            <div class="row gx-0">
                                <div class="col-lg-6 align-self-stretch">
                                    <div class="map map-full rounded-top rounded-lg-start">
                                        <iframe
                                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3683.6560637623474!2d72.63398907525056!3d23.215635909407804!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x395c2b6a94f0e67b%3A0xb5d6a3f4fd4d2a89!2sGandhinagar%2C%20Gujarat%2C%20India!5e0!3m2!1sen!2sin!4v1711456789102!5m2!1sen!2sin"
                                            style="width:100%; height: 100%; border:0" allowfullscreen="">
                                        </iframe>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="p-10 p-md-11 p-lg-14">
                                        <div class="d-flex flex-row">
                                            <div>
                                                <div class="icon text-primary fs-28 me-4 mt-n1"> <i class="fa fa-map-marker"
                                                        aria-hidden="true"></i> </div>
                                            </div>
                                            <div class="align-self-start justify-content-start">
                                                <h5 class="mb-1">Address</h5>
                                                <address>Synergy Space Rd, BUILDING, Sargasan,<br
                                                        class="d-none d-md-block">Gandhinagar, Gujarat, India</address>
                                            </div>
                                        </div>
                                        <!--/div -->
                                        <div class="d-flex flex-row">
                                            <div>
                                                <div class="icon text-primary fs-28 me-4 mt-n1"> <i class="fa fa-phone"></i>
                                                </div>
                                            </div>
                                            <div>
                                                <h5 class="mb-1">Phone</h5>
                                                {{-- <p>00 (123) 456 78 90 <br>00 (987) 654 32 10</p> --}}
                                                <a href="tel:+919054543093" class="link-body">+91 90545 43093</a><br>
                                            </div>
                                        </div>
                                        <!--/div -->
                                        <div class="d-flex flex-row">
                                            <div>
                                                <div class="icon text-primary fs-28 me-4 mt-n1"> <i
                                                        class="fa fa-envelope"></i> </div>
                                            </div>
                                            <div>
                                                <h5 class="mb-1">E-mail</h5>
                                                <p class="mb-0"><a href="mailto:marketing@quantumcals.com"
                                                        class="link-body">marketing@quantumcals.com</a></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <section class="row pt-13" id="contactUs">
                    <div class="row">
                        <div class="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
                            <div class="">
                                @include('components.alert')
                            </div>
                            <h2 class="display-4 mb-3 text-center">Get in Touch with Us</h2>
                            <p class="lead text-center mb-10">We’re here to assist you! Whether you have questions about our
                                product, need
                                a demo, or are seeking support, feel free to connect with us. Fill out the form below, and
                                we’ll
                                respond as
                                soon as possible.</p>
                            <form id="contactForm" action="{{ route('contactUs.store') }}" method="POST"
                                enctype="multipart/form-data" class="needs-validation" novalidate>
                                @csrf
                                <div class="messages"></div>
                                <div class="row gx-4">
                                    <div>
                                        <input type="hidden" name="whereWillRedirect"
                                            value="pages_landing/pages/contactUs">
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-floating mb-4">
                                            <input id="form_name" type="text" name="name"
                                                class="form-control text-dark" placeholder="John Doe" required>
                                            <label for="form_name" class="text-dark">Name *</label>
                                            <div class="invalid-feedback">Name is required.</div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-floating mb-4">
                                            <input id="form_email" type="email" name="email"
                                                class="form-control text-dark" placeholder="example@example.com" required>
                                            <label for="form_email" class="text-dark">Email *</label>
                                            <div class="invalid-feedback">Valid email is required.</div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-floating mb-4">
                                            <input id="form_contact" type="text" name="contact_number"
                                                class="form-control text-dark" placeholder="123-456-7890" required>
                                            <label for="form_contact" class="text-dark">Contact Number *</label>
                                            <div class="invalid-feedback">Contact number is required.</div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-floating mb-4">
                                            <input id="form_company" type="text" name="company_name"
                                                class="form-control text-dark" placeholder="Your Company" required>
                                            <label for="form_company" class="text-dark">Company Name *</label>
                                            <div class="invalid-feedback">Company name is required.</div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-4">
                                        <div class="form-select-wrapper">
                                            <select class="form-select text-dark" id="form_subject" name="subject"
                                                required>
                                                <option selected="" disabled="" value="">Select a subject
                                                </option>
                                                <option value="request_a_demo">Request a Demo</option>
                                                <option value="technical_support">Technical Support</option>
                                                <option value="general_inquiry">General Inquiry</option>
                                                <option value="pricing_information">Pricing Information</option>
                                                <option value="feedback">Feedback/Suggestions</option>
                                            </select>
                                            <div class="invalid-feedback">Please select a subject.</div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-4">
                                        <div class="form-select-wrapper">
                                            <select class="form-select text-dark" id="hear_about_us"
                                                name="hear_about_us">
                                                <option selected="" disabled="" value="">How Did you hear
                                                    about
                                                    Us?</option>
                                                <option value="online_search">Online Search</option>
                                                <option value="referral">Referral</option>
                                                <option value="advertisement">Advertisement</option>
                                                <option value="other">Other</option>
                                            </select>
                                            <div class="invalid-feedback">Please select an option.</div>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-floating mb-4">
                                            <textarea id="form_message" name="message" class="form-control text-dark" placeholder="Your message"
                                                style="height: 150px" required></textarea>
                                            <label for="form_message" class="text-dark">Message *</label>
                                            <div class="invalid-feedback">Message is required.</div>
                                        </div>
                                    </div>
                                    <!-- CAPTCHA Question Section -->
                                    {{-- <div class="col-12 mb-4">
                                        <label id="captcha_label" for="captcha_question" class="text-dark">What is ?
                                            *</label>
                                        <input id="captcha_question" type="text" name="captcha_answer"
                                            class="form-control text-dark" required>
                                        <div class="invalid-feedback">Please answer the CAPTCHA question.</div>
                                    </div> --}}
                                    <input type="hidden" name="recaptcha_token" id="recaptcha_token">
                                    <div class="col-12 text-center">
                                        <button type="submit"
                                            id="submitBtn" class="btn btn-primary rounded-pill mb-3">Send
                                            Message</button>
                                        <p class="text-danger"><strong>*</strong> These fields are required.</p>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <script>
                        function generateCaptcha() {
                            var num1 = Math.floor(Math.random() * 10) + 1;
                            var num2 = Math.floor(Math.random() * 10) + 1;
                            var operators = ['+', '-', '*'];
                            var operator = operators[Math.floor(Math.random() * operators.length)];
                            var question = 'What is ' + num1 + ' ' + operator + ' ' + num2 + ' ?';
                            document.getElementById('captcha_label').textContent = question;

                            var correctAnswer = eval(num1 + operator + num2);
                            document.getElementById('captcha_question').setAttribute('data-correct-answer', correctAnswer);
                        }
                        generateCaptcha();
                    </script>
                    <script src="https://www.google.com/recaptcha/api.js?render={{ env('GOOGLE_RECAPTCHA_SITE_KEY') }}"></script>
                    <script>
                        document.getElementById("contactForm").addEventListener("submit", function(e) {
                            e.preventDefault();
                            grecaptcha.ready(function() {
                                grecaptcha.execute('{{ env('GOOGLE_RECAPTCHA_SITE_KEY') }}', {
                                    action: 'contact_us_form'
                                }).then(function(token) {
                                    document.getElementById('recaptcha_token').value = token;
                                    document.getElementById("contactForm").submit();
                                });
                            });
                        });
                    </script>
                </section>
            </div>
        </section>
    </div>
@endsection