273 lines
10 KiB
PHP
273 lines
10 KiB
PHP
@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
|
|
|