@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'></script>
    <style>
        .error-bg {
            background-color: #e6cfcf;
        }

        .error {
            color: #FF0000;
        }
    </style>
@endsection
@section('content')
    @php $settingArr = settingArr(); @endphp

    @php echo cms_edit_page('cms',$data->id);@endphp
    <div class="about-wrap">
        <!-- Start Breadcrumb
                                                                                        
        <!-- Start Contact Area
                                                                                        ============================================= -->
     		<section class="breadcrumb-section">
			<div class="container-auto">
				<div class="row">
					<div class="col-md-6 col-sm-6 col-12">
						<div class="page-title">
							<h1>Contact Us</h1>
						</div>
					</div>
					<div class="col-md-6 col-sm-6 col-12">
						<nav aria-label="breadcrumb" class="theme-breadcrumb">
							<ol class="breadcrumb">
								<li class="breadcrumb-item"><a href="{{ base_url() }}">Home</a></li>
								<li class="breadcrumb-item active" aria-current="page">Contact Us</li>
							</ol>
						</nav>
					</div>
				</div>
			</div>
		</section>
<main id="main"> 
<!--Collection Start-->
<div class="pagecontent contact-page pt-0">
  <div class="container">
  	<div class="contact__wrapper">
       <div class="row"> 
			<div class="col-lg-7">
				<form action="" method="POST" class="form--contact" id="contactmainForm"> 
				@csrf
					<div class="row gx-20">
                        <div class="col-12 col-lg-12">
                            <h2 class="sec-title">SEND US A MESSAGE</h2>
                            <p class="sec-text"></p>
							<p>Let's start a conversation. <a title="Contact Us" href="https://surfacestatement.nativeathletics.com/contact-us" target="_blank" rel="noopener">Email Us!</a></p>
                        </div>
                    </div>
					<div class="row gx-20">
						<div class="col-12 col-lg-12 form-group">
							<input name="name" type="text" placeholder="Name" pattern="[A-Za-z\s]+" title="Only alphabets and spaces are allowed"
                                    onkeypress="return /^[a-zA-Z\s]+$/.test(event.key)" value="" class="form-control" id="name">
							<div class="form-icon">
								<img src="{{ asset_storage('front/images/user.png') }}" alt="ct icon 1">
							</div>
							<div id="name-error" class="error"></div>
						</div>
						<div class="col-12 col-lg-12 form-group">
							<input name="email" type="email" placeholder="Email" value="" class="form-control" id="email">
							<div class="form-icon">
								<img src="{{ asset_storage('front/images/email.png') }}" alt="ct icon 1">
							</div>
							<div id="email-error" class="error"></div>
						</div>
						<div class="col-12 col-lg-12 form-group">
							<input name="phone" type="tel" placeholder="Phone" id="phone" value="" class="form-control" id="phone"  inputmode="text">
							<div class="form-icon">
								<img src="{{ asset_storage('front/images/phone.png') }}" alt="ct icon 1">
							</div>
							<div id="phone-error" class="error"></div>
						</div>
						<div class="col-12 col-lg-12 form-group">
							<input name="company_name" type="text" placeholder="Company Name" id="company_name" value="" class="form-control" id="company_name"  inputmode="text">
							<div class="form-icon">
								<img src="{{ asset_storage('front/images/company.png') }}" alt="ct icon 1">
							</div>
							<div id="company_name-error" class="error"></div>
						</div>
						<div class="col-12 col-lg-12 form-group">
							<textarea name="message" placeholder="Message" class="form-control valid" id="comments" aria-invalid="false"></textarea>
							<div class="form-icon">
								<img src="{{ asset_storage('front/images/comment.png') }}" alt="ct icon 1">
							</div>
						</div>
						<div class="col-12 col-lg-12 form-group">
							<div class="g-recaptcha" data-sitekey="{{ $siteKey }}"></div>
							<div id="g-recaptcha-response-error" class="error"></div>
						</div>
						<div class="col-12 form-group">
							<button type="button" onclick="submitContactMainFormAjax();" class="sb-btn">
								Submit
							</button>
						</div>
					</div>
				</form>
				<p class="form-messages mb-0 mt-3"></p>
			</div>
			<div class="col-lg-5">
				<div class="contact__info">
					<h4 class="text-white mb-4">INFORMATION</h4>
					<div>
						<div class="footer-info--style5">
							<div class="footer-info_icon">
								<i>
									<img src="{{ asset_storage('front/images/mobile.png') }}" alt="phone-info">
								</i>
							</div>
							<div class="media-body">
								<span class="footer-info_label">Phone No:</span>
								<div class="footer-info_link">
									<a href="tel:@php echo FindInsettingArr('telephone'); @endphp" class="">@php echo FindInsettingArr('telephone'); @endphp</a>
								</div>
							</div>
						</div>
						<div class="footer-info--style5">
							<div class="footer-info_icon">
								<i>
									<img src="{{ asset_storage('front/images/email-white.png') }}" alt="open-email-info">
								</i>
							</div>
							<div class="media-body">
								<span class="footer-info_label">Email Address:</span>
								<div class="footer-info_link">
									<a href="mailto:@php echo FindInsettingArr('email'); @endphp" class="">@php echo FindInsettingArr('email'); @endphp</a>
								</div>
							</div>
						</div>
						<div class="footer-info--style5">
							<div class="footer-info_icon">
								<i>
									<img src="{{ asset_storage('front/images/map.png') }}" alt="location info">
								</i>
							</div>
							<div class="media-body">
								<div class="footer-info_link">
									<a href="@php echo FindInsettingArr('address'); @endphp" target="_blank"> @php echo FindInsettingArr('address'); @endphp </a>
								</div>
							</div>
						</div>
					</div>
					<div class="social-style">
						<ul>
						@php echo social_media(); @endphp
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!--Collection End-->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Ask Any Question</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
      	<div class="productForm popform">
        <div class="row">
							<div class="col-lg-6 col-md-6">
								<div class="input-group">
									<input type="text" class="form-control" placeholder="Name">
								</div>
							</div>
							<div class="col-lg-6 col-md-6">
								<div class="input-group">
									<input type="email" class="form-control" placeholder="Email">
								</div>
							</div>
							<div class="col-lg-6 col-md-6">
								<div class="input-group">
									<input type="phone" class="form-control" placeholder="Phone">
								</div>
							</div>

							<div class="col-lg-6 col-md-6">
								<div class="input-group">
									<input type="text" class="form-control" placeholder="Tile Name">
								</div>
							</div>
							<div class="col-lg-12 col-md-12">
								<div class="input-group">
									<select class="form-control">
										<option>Select Category</option>
										<option value="01">Wall Tile</option>
										<option value="02">American Made</option>
										<option value="03">Natural Stone Visuals</option>
										<option value="04">Wood Visuals</option>
										<option value="05">Concrete</option>
										<option value="06">Metallic Visuals</option>
										<option value="07">Color Visuals</option>
										<option value="08">All lines</option>
									</select>
								</div>
							</div> 

							<div class="col-lg-12">
								<div class="input-group">
									<textarea class="form-control" placeholder="Message"></textarea>
								</div>
							</div>

							<div class="col-lg-12">
								<div class="input-group d-block m-0 text-center">
									<button type="button" onclick="submitContactMainFormAjax();" class="submit-btn"><span>Submit Now</span></button>
								</div>
							</div>
 </div>
					</div>
      </div>
       
    </div>
  </div>
</div>

			 
		</main>
@endsection

@section('beforeBodyClose')
<script src="{{ asset_storage('lib/sweetalert2.js') }}"></script>
<script>
    function submitContactMainFormAjax() {
      
        url = "{{ route('contact-us-save') }}";
        method = 'POST';
        header = '';
        let formData = new FormData($('#contactmainForm')[0]);
        
        $.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);
                //console.log(data.error);
                if (data.status) {
                    $("#contactmainForm").trigger('reset');
                    Swal.fire({
                        title: 'Thank you!',
                        html: 'Your message has been sent.',
                        timer: 2000,
                        timerProgressBar: false
                    })
                } else {
                    swal(

                            'Sorry!',
                            data.error,
                            'error'

                        );
                }
            },
            error: function(data) {
                if (data.status === 422) {
                    var responseText = $.parseJSON(data.responseText);
                    $.each(responseText.errors, function(key, value) {
                        $('#' + key + '-error').html(value);
                        $('#' + key + '-error').addClass('formValidationErrors');
                        $('#' + key + '-error').show();
                        scrollToErrors('.formValidationErrors');
                    });
                }
            }
        });
    }
</script>
<script>
    function formatPhoneNumber(value) {
        // Remove non-numeric characters
        value = value.replace(/\D/g, '');

        // Add space after every 3 digits
        if (value.length > 6) {
            value = value.substring(0, 3) + ' ' + value.substring(3, 6) + ' ' + value.substring(6, 10);
        } else if (value.length > 3) {
            value = value.substring(0, 3) + ' ' + value.substring(3);
        }

        return value;
    }

    document.addEventListener('DOMContentLoaded', function() {
        const phoneInput = document.getElementById('phone');

        phoneInput.addEventListener('input', function() {
            this.value = formatPhoneNumber(this.value);
        });
    });
</script>
@endsection