@extends('front.layout.app')
@section('beforeHeadClose')

   <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 -->
		

	<div class="secr-slider_wrapper pagetitle" style="background: url({{ asset_storage('front/images/contact-page-bg.jpg') }}) no-repeat top;">
			<div class="slider-wrap slider-wrap-custom">
				<div class="container h-100 position-relative d-flex flex-column justify-content-center">
					<div class="row">
						<div class="col-lg-10 slider-text-col" data-aos="fade-up" data-aos-duration="1000">
						 
							<h1 class="fw-bold text-white mb-4 hero-title">Get in Touch
							</h1>
                            {!! $data->excerpt !!}
							
							 
						</div>
					</div> 
				</div>
			</div> 
		</div>


		<!-- Page title end -->

		<main id="main">
			<!-- Contact Page Content -->
			<section class="contact-page-section pagecontent">
				<div class="container">

					<!-- Section Heading -->
					<div class="section-title text-center mb-5" data-aos="fade-up">
						<div class="section-title">
                            	 {!! $data->content !!}
						
					</div>
					</div>

					<!-- 3 Clickable Contact Cards -->
					<div class="row g-4 mb-5">
						<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
							<a href="tel:4045006500" class="contact-card-link-wrap text-decoration-none d-block h-100">
								<div class="cp-card h-100">
									<div class="cp-card-icon">
										<i class="fas fa-phone"></i>
									</div>
									<h3 class="cp-card-title">Call or Text</h3>
									<p class="cp-card-value">{{ $settingArr->mobile }}</p>
									<span class="cp-card-cta">Tap to call <i class="fas fa-arrow-right ms-1"></i></span>
								</div>
							</a>
						</div>
						<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
							<a href="mailto:info@secrecyclers.com" class="contact-card-link-wrap text-decoration-none d-block h-100">
								<div class="cp-card h-100">
									<div class="cp-card-icon">
										<i class="fas fa-envelope"></i>
									</div>
									<h3 class="cp-card-title">Email Us</h3>
									<p class="cp-card-value">{{ $settingArr->email }}</p>
									<span class="cp-card-cta">Send email <i class="fas fa-arrow-right ms-1"></i></span>
								</div>
							</a>
						</div>
						<div class="col-lg-4 col-md-12" data-aos="fade-up" data-aos-delay="300">
							<a href="https://maps.google.com/?q=5910+Shiloh+Road+East+Suite+117+Alpharetta+GA+30005" target="_blank" class="contact-card-link-wrap text-decoration-none d-block h-100">
								<div class="cp-card h-100">
									<div class="cp-card-icon">
										<i class="fas fa-map-marker-alt"></i>
									</div>
									<h3 class="cp-card-title">Visit Us</h3>
									<p class="cp-card-value">{!! str_replace(chr(13), '<span class="blocktext">', $settingArr->address) !!}</p>
									<span class="cp-card-cta">Get directions <i class="fas fa-arrow-right ms-1"></i></span>
								</div>
							</a>
						</div>
					</div>

					<!-- Form + Info Row -->
					<div class="row g-4 align-items-stretch">
						<!-- Form Card -->
						<div class="col-lg-8" data-aos="fade-right">
							<div class="cp-form-card h-100">
								<div class="section-title">
								<h2 class="fw-bold cp-form-title mb-1">Send Us a <span>Message</span></h2>
							</div>
								<p class="cp-form-sub mb-4">Fill out the form and our team will respond within 24 hours.</p>
								<form action="#" method="POST" id="contactForm" class="contact-form">
    @csrf

    <div class="row g-3 mb-3">
        <div class="col-md-6">
            <input
                type="text"
                class="form-control contact-input"
                name="name"
                id="name"
                placeholder="Full Name *"
                value="{{ old('name') }}">
        </div>

        <div class="col-md-6">
            <input
                type="email"
                class="form-control contact-input"
                name="email"
                id="email"
                placeholder="Email Address *"
                value="{{ old('email') }}">
        </div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-md-6">
            <input
                type="text"
                class="form-control contact-input"
                name="phone"
                id="phone"
                placeholder="Phone Number"
                value="{{ old('phone') }}">
        </div>

        <div class="col-md-6">
            <input
                type="text"
                class="form-control contact-input"
                name="company"
                id="company"
                placeholder="Company Name"
                value="{{ old('company') }}">
        </div>
    </div>

    <div class="mb-3">
        <select class="form-select contact-input" name="subject" id="subject">
            <option value="">Reason for your inquiry?</option>
            <option value="IT Asset Disposition (ITAD)">IT Asset Disposition (ITAD)</option>
            <option value="Data Destruction">Data Destruction</option>
            <option value="Electronics Recycling">Electronics Recycling</option>
            <option value="Buy-Back Program">Buy-Back Program</option>
            <option value="Other">Other</option>
        </select>
    </div>

    <div class="mb-3">
        <textarea
            class="form-control contact-input contact-textarea"
            rows="5"
            name="comments"
            id="comments"
            placeholder="Your Message">{{ old('comments') }}</textarea>
    </div>

    <div class="mb-4">
        <div class="g-recaptcha" data-sitekey="{{ config('recaptcha.siteKey') }}"></div>
    </div>

    <button
        type="button"
        id="submitBtn"
        onclick="$('#contactForm').submit();"
        class="btn contact-submit-btn fw-bold rounded-pill text-white px-5 py-3">
        Submit Message
        <i class="fa-solid fa-arrow-right ms-2"></i>
    </button>
</form>
							</div>
						</div>

						<!-- Side Info Card -->
						<div class="col-lg-4" data-aos="fade-left">
							<div class="cp-side-card h-100">
								<div class="contactimg"><img src="{{ asset_storage('front/images/contactimg.jpg') }}" alt="Contact Us" class="w-100"></div>

								<div class="cp-side-socials">
									<span class="d-block cp-side-label mb-3">Follow Us</span>
									<div class="footer-socials d-flex gap-3">
								  @php echo social_media(); @endphp
							</div>
								</div>
							</div>
						</div>
					</div>

					<!-- Google Map -->
					<div class="row mt-5 mb-4">
						<div class="col-12" data-aos="fade-up">
							<div class="contact-map-wrap rounded-4 overflow-hidden">
								<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3305.5!2d-84.1736!3d34.0769!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f59e5b7c11d5b5%3A0x1234567890abcdef!2s5910%20Shiloh%20Rd%20E%20Ste%20117%2C%20Alpharetta%2C%20GA%2030005!5e0!3m2!1sen!2sus!4v1700000000000"
									width="100%" height="400" allowfullscreen="" loading="lazy"
									referrerpolicy="no-referrer-when-downgrade" class="contact-map-iframe"></iframe>
							</div>
						</div>
					</div>
				</div>
			</section>

		</main>
      
@endsection
@section('beforeBodyClose')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>

<script>

    
document.getElementById('phone').addEventListener('input', function (e) {
    let value = e.target.value.replace(/\D/g, '');

    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({

        // Don't ignore the hidden reCAPTCHA field
        ignore: ":hidden:not([name='g-recaptcha-response'])",

        rules: {
            name: {
                required: true
            },
            email: {
                required: true,
                email: true
            },
            "g-recaptcha-response": {
                required: true
            }
        },

        messages: {
            name: {
                required: "Please enter your full name"
            },
            email: {
                required: "Please provide your email",
                email: "Please provide a valid email"
            },
            "g-recaptcha-response": {
                required: "Please verify that you are not a robot."
            }
        },

        invalidHandler: function (event, validator) {

            if (validator.numberOfInvalids()) {

                var message = "Please fill the following fields:";
                var errorList = '<div class="text-start ps-3">';

                $.each(validator.errorList, function (index, error) {
                    errorList += '<span class="text-danger">*</span> ' + error.message + '<br>';
                });

                errorList += '</div>';

                Swal.fire({
                    title: message,
                    html: errorList
                });
            }
        },

        errorPlacement: function (error, element) {

            if (element.attr("name") === "g-recaptcha-response") {
                // Hide inline error because SweetAlert is showing it
                return false;
            }

            return false;
        },

        submitHandler: function (form) {
            submitContactFormAjax();
        }

    });

    // Phone formatting
    $('#phone').inputmask("999-999-9999");

});

// Revalidate captcha after it is checked
function captchaVerified() {
    $("#contactForm").validate().element("[name='g-recaptcha-response']");
}
</script>

<script>
function submitContactFormAjax() {

    let url = "{{ base_url() }}contact-us";
    let method = "POST";
    let formData = new FormData($('#contactForm')[0]);

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax({

        url: url,
        type: method,
        data: formData,
        async: true,
        cache: false,
        contentType: false,
        processData: false,

        success: function (data) {

            data = JSON.parse(data);

            if (data.status) {

                $("#contactForm").trigger("reset");

                if (typeof grecaptcha !== "undefined") {
                    grecaptcha.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 errorList = '<div class="text-start ps-3">';

                $.each(responseText.errors, function (index, value) {
                    errorList += '<span class="text-danger">*</span> ' + value + '<br>';
                });

                errorList += '</div>';

                Swal.fire({
                    title: "Please fill the following fields:",
                    html: errorList
                });

            } else {

                Swal.fire({
                    title: "Error!",
                    text: "Something went wrong. Please try again."
                });

            }

        }

    });

}
</script>
@endsection