@extends('client.rohini.layouts.app')
@section('content')
@include('client.rohini.pages.partials.breadcrumb')
  <!--Contact Page Start-->
  <section class="contact-page">
    <div class="container">
      <div class="row">
        <div class="col-xl-4 col-lg-5">
          <div class="contact-page__left">
            <div class="section-title-two text-left">
              <div class="section-title-two__tagline-box">
                <p class="section-title-two__tagline">{{ $page->short_description }}</p>
                <div class="section-title-two__shape"> <img src="rohini/assets/images/shapes/section-title-two-shape.png" alt=""> </div>
              </div>
              <h2 class="section-title-two__title">{{ $page->title }} !! </h2>
            </div>
            <div class="contact-page__contact-info">
              <ul class="list-unstyled contact-page__contact-info-list">
                <li>
                  <div class="icon"> <i class="fa fa-phone"></i> </div>
                  <div class="text">
                    <p><a href="tel:{{ setting('phone') }}">{{ setting('phone') }}</a></p>
                  </div>
                </li>
                <li>
                  <div class="icon"> <i class="fa fa-mobile"></i> </div>
                  <div class="text">
                    <p><a href="tel:{{ setting('mobile') }}">{{ setting('mobile') }}</a></p>
                  </div>
                </li>
                <li>
                  <div class="icon"> <i class="fa fa-map-marker"></i> </div>
                  <div class="text">
                    <p>{{ setting('location') }}</p>
                  </div>
                </li>
                <li>
                  <div class="icon"> <i class="fa fa-envelope"></i> </div>
                  <div class="text">
                    <p><a href="mailto:{{ setting('email') }}">{{ setting('email') }}</a></p>
                  </div>
                </li>
              </ul>
              {{-- <div class="contact-page__live-chat"> <a href="contact.html#"><span class="icon-comments"></span>Live Chat</a> </div> --}}
            </div>
          </div>
        </div>
        <div class="col-xl-8 col-lg-7">
          <div class="contact-page__right">
            <div class="contact-page__form-box">
              <h5 class="contact-page__form-title">Get in Touch</h5>
              <form id="enquiry_form" class="">
                @csrf
                <div class="row">
                  <div class="col-xl-12">
                    <div class="comment-form__input-box text-message-box">
                      <div class="comment-form__input-box-name">
                        <p>Comments</p>
                      </div>
                      <textarea name="message" id="message2" placeholder="Comments"></textarea>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-xl-6">
                    <div class="comment-form__input-box">
                      <div class="comment-form__input-box-name">
                        <p>Full Name</p>
                      </div>
                      <input type="text" placeholder="Full name" id="name2" name="name">
                    </div>
                  </div>
                  <div class="col-xl-6">
                    <div class="comment-form__input-box">
                      <div class="comment-form__input-box-name">
                        <p>Your email</p>
                      </div>
                      <input type="email" placeholder="Your email" id="email2" name="email">
                    </div>
                  </div>
                  <div class="col-xl-6">
                    <div class="comment-form__input-box">
                      <div class="comment-form__input-box-name">
                        <p>Phone</p>
                      </div>
                      <input type="text" placeholder="Phone" id="mobile2" name="phone">
                    </div>
                  </div>
                  <div class="col-xl-6">
                    <div class="comment-form__input-box">
                      <div class="comment-form__input-box-name">
                        <p>Subject</p>
                      </div>
                      <input type="text" id="subject2" placeholder="Subject" name="subject">
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-xl-12">
                    <div class="comment-form__btn-box">
                      <button id="contact-submit" type="submit" class="thm-btn"><span
                       class="icon-right-arrow"></span>Send Message</button>
                    </div>
                  </div>
                </div>
              </form>
              <div class="result"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--Contact Page End-->
  <!--Google Map Start-->
  <section class="contact-page-google-map">
    <div class="container">
        {!!setting('map') !!}
    </div>
  </section>
  <!--Google Map End-->
@endsection


{{-- @push('js')
    <script>
        $(function() {
            toastr.options = {
                closeButton: true,
                progressBar: true,
                positionClass: "toast-top-right",
                timeOut: 3000
            };

            $('#enquiry_form').on('submit', function(e) {

                console.log('submitting the form');
                e.preventDefault();
                let btn = $('#contact-submit');
                btn.prop('disabled', true).text('Sending...');

                $.ajax({
                    url: "{{ route('storeEnquiries') }}",
                    method: 'POST',
                    data: $(this).serialize(),
                    success(response) {
                        console.log('Enquiry submitted successfully:', response);
                        toastr.success(response.message || 'Your enquiry has been submitted!');
                        $('#enquiry_form')[0].reset();
                    },
                    error(xhr) {
                        if (xhr.status === 422 && xhr.responseJSON.errors) {
                            // Show first validation error
                            let first = Object.values(xhr.responseJSON.errors)[0][0];
                            toastr.error(first);
                        } else if (xhr.status === 419) {
                            toastr.error('Session expired. Please refresh the page and try again.');
                        } else {
                            let msg = (xhr.responseJSON && xhr.responseJSON.message) ?
                                xhr.responseJSON.message :
                                'An unexpected error occurred.';
                            toastr.error(msg);
                        }
                    },
                    complete() {
                        btn.prop('disabled', false).text('Send Message');
                    }
                });
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const phoneInput = document.getElementById('phoneInput');
            const phoneError = document.getElementById('phoneError');
            phoneInput.addEventListener('input', function() {
                let val = phoneInput.value;
                // Allow digits only
                val = val.replace(/[^0-9]/g, '');
                let errorMsg = '';
                let isValid = false;
                // Block if not starting with 98 or 97
                if (val.length >= 1 && !val.startsWith('98') && !val.startsWith('97')) {
                    errorMsg = 'Number must start with 98 or 97';
                    val = val.slice(0, 2); // restrict early
                }
                // Limit to 10 digits
                if (val.length > 10) {
                    errorMsg = 'Number must be exactly 10 digits';
                    val = val.slice(0, 10);
                }
                  // Less than 10 digits
                if (val.length > 0 && val.length < 10) {
                    errorMsg = 'Number must be exactly 10 digits';
                }
                // Valid number case
                if (/^(98|97)\d{8}$/.test(val)) {
                    isValid = true;
                    errorMsg = '';
                }
                // Final updates
                phoneInput.value = val;
                phoneError.textContent = errorMsg;
            });
        });
    </script>
@endpush --}}


@push('js')
<script>
	$(document).ready(function () {
		toastr.options = {
			"closeButton": true,
			"progressBar": true,
			"positionClass": "toast-top-right",
			"timeOut": "3000"
		};

		$('#enquiry_form').submit(function (event) {
			event.preventDefault();
			var submitButton = $('#contact-submit');


			// Prepare the form data
			var formData = {
				name: $('#name2').val(),
				email: $('#email2').val(),
				mobile: $('#mobile2').val(),
				subject: $('#subject2').val(),
				message: $('#message2').val(),
				_token: $('meta[name="csrf-token"]').attr('content') // CSRF token
			};

			// Submit form via AJAX
			$.ajax({
				url: "{{ route('enquiry.submit') }}",
				method: 'POST',
				data: formData,
				beforeSend: function() {
					submitButton.prop('disabled', true);
					submitButton.text("Sending...");
				},
				success: function (response) {
					// Display success Toastr message
					toastr.success('Your enquiry has been submitted successfully!');

					// Optionally, clear the form
					$('#enquiry_form')[0].reset();
				},
				error: function (xhr) {
            if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                $.each(xhr.responseJSON.errors, function (key, messages) {
                    // messages is an array, show the first error
                    toastr.error(messages[0]);
                });
            } else if (xhr.responseJSON && xhr.responseJSON.message) {
                toastr.error(xhr.responseJSON.message);
            } else {
                toastr.error('An error occurred while submitting your enquiry.');
            }
        },
				complete: function() {
					submitButton.prop('disabled', false);
					submitButton.text("Send Message");
				}
			});
		});
	});
</script>
@endpush