@extends('front.layout.app')
@section('beforeHeadClose')
    <link href="{{ asset_storage('') . 'module/blog/front/css/blog.css' }}" rel="stylesheet" type="text/css" />
   <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <style>
        .swal2-confirm {
            background-color: #29abe2 !important;
        }
        .contact-info-wrapper a:hover{color:#47acc6 !important;}
        </style>
@endsection
@section('content')
    @php $settingArr = settingArr(); @endphp
   <!-- Page Title Section -->
		<section class="page-title-section position-relative d-flex align-items-center">
			<div class="page-title-overlay"></div>
			<div class="container position-relative z-1 text-center">
				<h1 class="page-title-heading text-white fw-bold mb-3" data-aos="fade-up" data-aos-duration="900">
					  {!! $data->heading !!}</h1>
				 {!! $data->excerpt !!}
			</div>
		</section>

		<!-- Contact Form Section -->
		<section class="contact-section py-5 my-md-4">
			<div class="container">
				<div class="row g-5">
					<!-- Contact Info -->
					<div class="col-lg-5" data-aos="fade-right" data-aos-duration="1000">
						<div class="contact-info-wrapper glassmorphism-card p-4 p-md-5 rounded-4 h-100">
						  {!! $data->content !!}

							<div class="contact-detail-box d-flex align-items-start mb-4">
								<div
									class="contact-icon-box shadow-sm me-4 d-flex align-items-center justify-content-center text-white rounded-circle">
									<i class="fa-solid fa-location-dot fs-5"></i>
								</div>
								<div>
									<h5 class="fw-bold mb-1 text-dark">Location</h5>
									<p class="text-muted locationWrp mb-0"> <a href="https://maps.app.goo.gl/HfYX6tW9JgErbAL27" target="_blank" style="
    color: #212529BF;"> @php echo str_replace(chr(13), '<br/>', $settingArr->address); @endphp </a></p>
								</div>
							</div>

							<div class="contact-detail-box d-flex align-items-start mb-4">
								<div
									class="contact-icon-box shadow-sm me-4 d-flex align-items-center justify-content-center text-white rounded-circle">
									<i class="fa-solid fa-phone fs-5"></i>
								</div>
								<div>
									<h5 class="fw-bold mb-1 text-dark">Phone</h5>
									<p class="text-muted mb-0"><a href="  tel:    {{ strip_tags($settingArr->mobile) }}"
											class="text-decoration-none text-muted hover-primary">      {{ strip_tags($settingArr->mobile) }}</a></p>
								</div>
							</div>

							<div class="contact-detail-box d-flex align-items-start">
								<div
									class="contact-icon-box shadow-sm me-4 d-flex align-items-center justify-content-center text-white rounded-circle">
									<i class="fa-solid fa-envelope fs-5"></i>
								</div>
								<div>
									<h5 class="fw-bold mb-1 text-dark">Email</h5>
									<p class="text-muted mb-0"><a href="mailto:  {{ strip_tags($settingArr->email) }}"
											class="text-decoration-none text-muted hover-primary">  {{ strip_tags($settingArr->email) }}</a>
									</p>
								</div>
							</div>
						</div>
					</div>
					

					<!-- Contact Form -->
					<div class="col-lg-7" data-aos="fade-left" data-aos-duration="1000">
						<div
							class="contact-form-wrapper bg-white shadow-lg p-4 p-md-5 rounded-4 position-relative border-top border-4 border-info">
							<h3 class="mb-4 fw-bold about-headline">Send a Message</h3>
				<form action="#" method="POST" name="frm_process" id="contactForm" class="contact-form">

    @csrf

   

    <div id="formMessage"></div>

    <div class="row g-4">

        <div class="col-md-6">
            <div class="form-floating">
                <input
                    type="text"
                    class="form-control"
                    id="name"
                    name="name"
                    value="{{ old('name') }}"
                    required>
                <label>First Name</label>
            </div>
            <div id="name-error" class="error"></div>
        </div>

        <div class="col-md-6">
            <div class="form-floating">
                <input
                    type="text"
                    class="form-control"
                    id="lname"
                    name="lname"
                    value="{{ old('lname') }}">
                <label>Last Name</label>
            </div>
            <div id="lname-error" class="error"></div>
        </div>

        <div class="col-12">
            <div class="form-floating">
                <input
                    type="email"
                    class="form-control"
                    id="email"
                    name="email"
                    value="{{ old('email') }}"
                    required>
                <label>Email Address</label>
            </div>
            <div id="email-error" class="error"></div>
        </div>

        <div class="col-12">
            <div class="form-floating">
                <input
                    type="text"
                    class="form-control"
                    id="phone"
                    name="phone"
                    value="{{ old('phone') }}"
                    maxlength="12"
                  
                    required>
                <label>Phone Number</label>
            </div>
            <div id="phone-error" class="error"></div>
        </div>

        <div class="col-12">
            <div class="form-floating">
                <input
                    type="text"
                    class="form-control"
                    id="subject"
                    name="subject"
                    value="{{ old('subject') }}">
                <label>Subject</label>
            </div>
            <div id="subject-error" class="error"></div>
        </div>

        <div class="col-12">
            <div class="form-floating">
                <textarea
                    class="form-control"
                    id="comments"
                    name="comments"
                    style="height:150px">{{ old('comments') }}</textarea>
                <label>Message</label>
            </div>
            <div id="comments-error" class="error"></div>
        </div>

      <div class="col-lg-12">
                                <div class="form-floating">
                                    <div class="g-recaptcha" data-sitekey="{{ config('recaptcha.siteKey') }}"></div>
                                <span class="alert-error"></span>
                                </div>
                            </div> 

        <div class="col-12">
            <button
                type="button"
                onclick="submitContactFormAjax();"
                id="submitBtn"
                class="btn-book-now contactbook w-100 py-3 border-0 rounded-3 fw-bold">
                SEND MESSAGE
            </button>
        </div>

    </div>

</form>

						</div>
					</div>
				</div>



			</div>
		</section>

		<div class="mt-4"><iframe
				src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3378.542818546393!2d-80.76857962490527!3d32.13564701648739!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88fc78e1d9306ab3%3A0xf062a35817789425!2s1%20Sea%20Oak%20Ln%2C%20Hilton%20Head%20Island%2C%20SC%2029928%2C%20USA!5e0!3m2!1sen!2s!4v1783254266329!5m2!1sen!2s"
				width="100%" height="400" style="border:0;" allowfullscreen="" loading="lazy"
				referrerpolicy="strict-origin-when-cross-origin" class="w-100 map-iframe"></iframe>
		</div>
      
@endsection
@section('beforeBodyClose')

<script>
document.getElementById('phone').addEventListener('input', function (e) {
    let value = e.target.value.replace(/\D/g, ''); // Remove non-digits

    if (value.length > 10) {
        value = value.substring(0, 10);
    }

    if (value.length > 6) {
        value = value.replace(/(\d{3})(\d{3})(\d+)/, '$1-$2-$3');
    } else if (value.length > 3) {
        value = value.replace(/(\d{3})(\d+)/, '$1-$2');
    }

    e.target.value = value;
});
</script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#contactForm").validate({
                rules: {
                    name: {
                        required: true
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    phone: {
                        required: true,
                        phoneUS: true
                    },
                    'g-recaptcha-response': {
                        required: true
                    }
                },
                messages: {
                    name: {
                        required: "Please enter your name"
                    },
                    email: {
                        required: "Please provide email",
                        email: "Please provide valid email"
                    },
                    phone: {
                        required: "Please provide phone",
                        phoneUS: "Valid phone number required"
                    },
                    'g-recaptcha-response': {
                        required: "Please prove you are not a robot"
                    }
                },
                invalidHandler: function(event, validator) {
                    var errors = validator.numberOfInvalids();
                    if (errors) {
                        var message = "Please fill the following fields:";
                        var errorList = '<div class="text-start ps-3">';
                        // Loop through the errorList to get individual error messages
                        $.each(validator.errorList, function(index, error) {
                            errorList += '<span class="text text-danger" >*</span>' + error
                                .message + '<br/>';
                        });
                        errorList += '</div>';
                        Swal.fire({
                            title: message,
                            html: errorList
                        });
                    }
                },
                // Optionally, prevent displaying errors inline if you only want alerts
                errorPlacement: function(error, element) {
                    return false; // This prevents the plugin from placing error labels next to fields
                },
              submitHandler: function(form) {
    submitContactFormAjax();
}
            });
        });
        $('#contactForm').find('#phone').inputmask("999-999-9999");
    </script>
    <script>
        function submitContactFormAjax() {
            url = "{{ base_url() }}contact-us";
            method = 'POST';
            header = '';
            let formData = new FormData($('#contactForm')[0]);
            console.log(formData);
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: url,
                type: method,
                data: formData,
                headers: header,
                async: true,
                cache: false,
                contentType: false,
                processData: false,
                success: function(data) {
                    data = JSON.parse(data);
                    if (data.status) {
                        $("#contactForm").trigger('reset');
                        Swal.fire({
                            title: 'Thank you!',
                            html: 'Your message has been sent.',
                            timer: 2000,
                            timerProgressBar: false
                        })
                    } else {
                        Swal.fire({
                            title: 'Sorry!',
                            html: data.error,
                            timer: 2000,
                            timerProgressBar: true
                        })
                    }
                },
                error: function(data) {
                    if (data.status === 422) {
                        var responseText = $.parseJSON(data.responseText);
                        var message = "Please fill the following fields:";
                        var errorList = '<div class="text-start ps-3">';
                        // Loop through the errorList to get individual error messages                                                
                        $.each(responseText.errors, function(index, value) {
                            errorList += '<span class="text text-danger" >*</span>' + value + '<br/>';
                        });
                        errorList += '</div>';
                        Swal.fire({
                            title: message,
                            html: errorList
                        });

                    }
                }
            });
        }
    </script>
@endsection