@include('htmlpage.frontent.layout.app')
<main class="main">
    <section class="section-box">
        <div class="breacrumb-cover">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <h2 class="mb-10">Contact</h2>
                        <p class="font-lg color-text-paragraph-2">Get Update With Us</p>
                    </div>
                    <div class="col-lg-6 text-end">
                        <ul class="breadcrumbs mt-40">
                            <li><a class="home-icon" href="/">Home</a></li>
                            <li>Contact</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="section-box mt-80">
        <div class="container">
            <div class="box-info-contact">
                <div class="row">
                    <div class="col-lg-3 col-md-6 col-sm-12 mb-30"><a href="#"><img src="images/zillion-logo.png"
                                alt="Zillion"></a>
                        <div class="font-sm color-text-paragraph">
                            Thondayad, Calicut, Kerala, India
<br> Phone: +91 9061 24 7 365<br> Email: mail@zillionit.com</div><a
                            class="text-uppercase color-brand-2 link-map" href="https://www.google.com/maps/place/Zillion+IT+Solutions/@11.2640789,75.8101184,17z/data=!4m6!3m5!1s0x3ba65c224c4de57b:0x280715fbbaab0be6!8m2!3d11.264067!4d75.809957!16s%2Fg%2F1w6r6qb7?entry=ttu&g_ep=EgoyMDI1MTIwOS4wIKXMDSoASAFQAw%3D%3D" target="_blank">View map</a>
                    </div>

                      <div class="col-lg-3 col-md-6 col-sm-12 mb-30">
                         <h6>Kannur</h6>
                        <p class="font-sm color-text-paragraph mb-20">Madathil, Iritty, Kannur, Kerala, India.<br
                                class="d-none d-lg-block"> +91 7736 24 7 365</p>
                        <h6>Cochin</h6>
                        <p class="font-sm color-text-paragraph mb-20">Padamugal, Cochin, Kerala, India<br
                                class="d-none d-lg-block"> +91 8943 24 7 365</p>
                       
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-12 mb-30">
                        
                        <h6>Bangalore</h6>
                        <p class="font-sm color-text-paragraph mb-20">Koramangala, Bangalore, Karnataka, India<br class="d-none d-lg-block">
                            +91 6235 24 7 365</p>
                            <h6>Mumbai</h6>
                        <p class="font-sm color-text-paragraph mb-20">
Mira Road, Mumbai<br
                                class="d-none d-lg-block"> +91 7909 24 7 365</p>

                        
                        
                        
              
                    </div>
                  
                    <div class="col-lg-3 col-md-6 col-sm-12 mb-30">
                        <h6>Delhi</h6>
                        <p class="font-sm color-text-paragraph mb-20">Sector 9, Dwarka, New Delhi, India <br
                                class="d-none d-lg-block"> +91 7909 24 7 365</p>

                                <h6>Hyderabad</h6>
                        <p class="font-sm color-text-paragraph mb-20">Ameerpet, Hyderabad <br
                                class="d-none d-lg-block"> +91 6235 24 7 365</p>
                        
                    </div>
                   
                </div>
            </div>
        </div>
    </section>
    <section class="section-box mt-70">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mb-40"><span class="font-md color-brand-2 mt-20 d-inline-block">Contact us</span>
                    <h2 class="mt-5 mb-10">Get in touch</h2>
                    <p class="font-md color-text-paragraph-2">The right move at the right time saves your investment.
                        live<br class="d-none d-lg-block"> the dream of expanding your business.</p>
       {{--              <div id="notification" class="mb-20"></div> --}}
                 <form class="contact-form-style mt-30" id="contact-form" action="{{ route('contact.contactStore') }}" method="POST">
    @csrf
    <div class="row g-3">

        <!-- Name -->
        <div class="col-md-6">
            <input class="form-control" name="name" value="{{ old('name') }}" placeholder="Enter your name" type="text" required>
            @error('name')
                <small class="text-danger">{{ $message }}</small>
            @enderror
        </div>

        <!-- Email -->
        <div class="col-md-6">
            <div class="d-flex">
                <input type="email" id="email" name="email" class="form-control me-2" placeholder="Email Here *" value="{{ old('email') }}" required>
                <button type="button" id="sendOtp" class="btn btn-secondary">Send OTP</button>
            </div>
            @error('email')
                <small class="text-danger">{{ $message }}</small>
            @enderror
        </div>

        <!-- OTP Field -->
        <div class="col-md-6" id="otpField" style="display:none;">
            <div class="d-flex">
                <input type="text" id="otp" class="form-control me-2" placeholder="Enter OTP *">
                <button type="button" id="verifyOtp" class="btn btn-success">Verify OTP</button>
            </div>
            <small id="otpMessage" class="text-danger"></small>
        </div>

        <!-- Phone -->
        <div class="col-md-6">
            <input class="form-control" name="phone_number" value="{{ old('phone_number') }}" placeholder="Phone number" type="tel" required>
            @error('phone_number')
                <small class="text-danger">{{ $message }}</small>
            @enderror
        </div>

        <!-- Subject -->
        <div class="col-md-6">
            <input class="form-control" name="subject" value="{{ old('subject') }}" placeholder="Subject (optional)" type="text">
        </div>

        <!-- Message -->
        <div class="col-12">
            <textarea class="form-control" name="message" placeholder="Tell us about yourself">{{ old('message') }}</textarea>
            @error('message')
                <small class="text-danger">{{ $message }}</small>
            @enderror
        </div>
 <!-- Honeypot (hidden) --> <input type="text" name="website" style="display:none;">
        <!-- Google reCAPTCHA -->
        <div class="col-12">
            <div class="g-recaptcha" data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}"></div>
            @error('g-recaptcha-response')
                <small class="text-danger">{{ $message }}</small>
            @enderror
        </div>

        <!-- Submit -->
        <div class="col-12 d-flex align-items-center">
            <button class="btn btn-primary me-3" id="submitBtn" type="submit" disabled>Send Message</button>
            <label class="mb-0">
                <input type="checkbox" required class="me-2">By clicking contact us button, you agree to our terms and policy
            </label>
        </div>

    </div>
</form>

<div id="notification" class="mt-3"></div>


<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
let otpVerified = false;

// 1️⃣ Send OTP
$('#sendOtp').click(function(){
    let email = $('#email').val().trim();
    if(!email){
        Swal.fire('Error','Please enter email first','error');
        return;
    }

    $.post("{{ route('appointment.sendEmailOtp') }}",
        { _token:'{{ csrf_token() }}', email: email },
        function(data){
            if(data.success){
                $('#otpField').show();
                $('#submitBtn').prop('disabled', true);
                otpVerified = false;
                $('#otpHidden').val('');
                Swal.fire('OTP Sent','Check your email for OTP','success');
            } else {
                Swal.fire('Error', data.message, 'error');
            }
        },'json'
    );
});

// 2️⃣ Verify OTP
$('#verifyOtp').click(function(){
    let email = $('#email').val().trim();
    let otp = $('#otp').val().trim();

    if(!otp){
        Swal.fire('Error','Please enter OTP','error');
        return;
    }

    $.post("{{ route('appointment.checkEmailOtp') }}",
        { _token:'{{ csrf_token() }}', email: email, otp: otp },
        function(data){
            if(data.success){
                otpVerified = true;
                $('#otpHidden').val(otp); // send OTP to server
                $('#submitBtn').prop('disabled', false);
                $('#otpMessage').text('OTP verified!').removeClass('text-danger').addClass('text-success');
                Swal.fire('Verified','OTP successfully verified','success');
            } else {
                otpVerified = false;
                $('#otpHidden').val('');
                $('#submitBtn').prop('disabled', true);
                Swal.fire('Error','Invalid or expired OTP','error');
            }
        },'json'
    );
});

// 3️⃣ Reset OTP if email changes
$('#email').on('input', function(){
    otpVerified = false;
    $('#otpHidden').val('');
    $('#submitBtn').prop('disabled', true);
    $('#otpField').hide();
});

// 4️⃣ AJAX form submit
$('#contact-form').on('submit', function(e){
    e.preventDefault();

    if(!otpVerified){
        Swal.fire('Error','Please verify your email first','error');
        return;
    }

    let form = $(this);
    let formData = form.serialize();

    $.ajax({
        url: form.attr('action'),
        type: 'POST',
        data: formData,
        dataType: 'json',
        success: function(response){
            if(response.success){
                Swal.fire('Success', response.message, 'success');
                form[0].reset();
                otpVerified = false;
                $('#otpHidden').val('');
                $('#submitBtn').prop('disabled', true);
                $('#otpField').hide();
                if(typeof grecaptcha !== 'undefined') grecaptcha.reset();
            } else {
                Swal.fire('Error', response.message, 'error');
            }
        },
        error: function(xhr){
            let message = 'Something went wrong. Please try again.';
            if(xhr.status === 422 && xhr.responseJSON.errors){
                message = Object.values(xhr.responseJSON.errors).map(e => e[0]).join('<br>');
            }
            Swal.fire('Error', message, 'error');
        }
    });
});
</script>




                </div>
                <div class="col-lg-4 text-center d-none d-lg-block"><img src="{{ asset('images/contactus.png') }}"
                        alt="Zillion">
                </div>
            </div>

        </div>
    </section>

    <section class="section-box mt-50 mb-20">
        <div class="container">
            <div class="box-newsletter">
                <div class="row">
                    <div class="col-xl-3 col-12 text-center d-none d-xl-block"><img
                            src="{{ asset('img/newsletter-left.png') }}" alt="Zillion"></div>
                    <div class="col-lg-12 col-xl-6 col-12">
                        <h2 class="text-md-newsletter text-center">New Things Will Always<br> Update Regularly</h2>
                        <div class="box-form-newsletter mt-40">
                             <form class="form-newsletter">
    <input class="input-newsletter" type="email" placeholder="Enter your email here" required>

    <button type="submit" class="btn btn-default icon-send-letter" aria-label="Subscribe">
        <!-- Send Icon SVG -->
        <svg width="30" height="30" viewBox="0 0 24 24" fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path d="M22 2L11 13" stroke="currentColor" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round" />
            <path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="currentColor"
                stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
    </button>
</form>
                        </div>
                    </div>
                    <div class="col-xl-3 col-12 text-center d-none d-xl-block"><img
                            src="{{ asset('img/newsletter-right.png') }}" alt="Zillion"></div>
                </div>
            </div>
        </div>
    </section>
</main>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

@include('htmlpage.frontent.layout.footer')