@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

  
				<div class="secr-slider_wrapper pagetitle detalpage"
			style="background: url({{ asset_storage('front/images/servicearea-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 aos-init aos-animate" data-aos="fade-up"
							data-aos-duration="1000">

							<h1 class="fw-bold text-white mb-4 hero-title">@php echo adjustUrl($serviceareas->heading) @endphp
							</h1>

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


		<!-- Page title end -->

		<main id="main">
			<!-- service area Content -->
			@php echo adjustUrl($serviceareas->excerpt) @endphp

<!-- We Serve -->
			@php echo adjustUrl($serviceareas->content) @endphp

  <!-- CTA Section -->
        <section class="cta-section my-5">
				<div class="container">
					<div class="cta-wrap" data-aos="fade-up">
						<div class="row align-items-center">
							<div class="col-lg-6">
								<div class="section-title cta-title mb-4" data-aos="fade-up">
									<h3 class="fw-bold mb-0 text-white">Contact us for <span>more information</span> or
										to arrange a pickup.</h3>
								</div>

								<div class="cta-info-list mb-5">
									<div class="cta-info-item d-flex align-items-center mb-4">
										<div class="cta-icon">
											<i class="fa-solid fa-phone-volume"></i>
										</div>
										<div class="cta-text ms-4">
											<span class="d-block mb-1">Call or Text</span>
											<a href="tel:{{ $settingArr->mobile }}" class="text-white text-decoration-none"><strong
													class="h5 mb-0">{{ $settingArr->mobile }}</strong></a>
										</div>
									</div>

									<div class="cta-info-item d-flex align-items-center mb-4">
										<div class="cta-icon">
											<i class="fa-solid fa-envelope"></i>
										</div>
										<div class="cta-text emailbx ms-4">
											<span class="d-block mb-1">Email Us At</span>
											<a href="mailto:{{ $settingArr->email }}"
												class="text-white text-decoration-none"><strong
													class="h5 mb-0">{{ $settingArr->email }}</strong></a>
										</div>
									</div>

									<div class="cta-info-item d-flex align-items-center">
										<div class="cta-icon">
											<i class="fa-solid fa-location-dot"></i>
										</div>
										<div class="cta-text addressbx ms-4">
											<span class="d-block mb-1">Find Us</span>
											<a href="https://maps.google.com/?q=5910+Shiloh+Road+East,+Suite+117+Alpharetta,+GA+30005"
												target="_blank" class="text-white text-decoration-none"><strong
													class="h6 mb-0">{!! str_replace(chr(13), '<span class="blocktext">', $settingArr->address) !!}</strong></a>
										</div>
									</div>
								</div>

								
							</div>
						</div>
					</div>
				</div>
			</section>
			<!-- Contact Form Start -->
			<section class="quote-form">
				<div class="container">
					<div class="row">
						<div class="col-lg-5 mb-5 mb-lg-0" data-aos="fade-right">
							<div
								class="valuation-form-wrapper p-4 p-md-5 h-100 d-flex flex-column justify-content-center">
									<div class="section-title" data-aos="fade-up">
									<h3 class="fw-bold text-white mb-4">Send Us a <span class="blocktext">Message
											</span></h3>
								</div>
		<form action="#" method="POST" id="valuationForm" class="valuation-form">
    @csrf
    <input type="hidden" name="form_type" value="valuation">

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

        <div class="col-md-6">
            <input
                type="email"
                class="form-control valuation-input"
                name="email"
                id="v_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 valuation-input"
                name="phone"
                id="v_phone"
                placeholder="Phone Number"
                value="{{ old('phone') }}">
        </div>

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

    <div class="mb-3">
        <select
            class="form-select valuation-input"
            name="subject"
            id="v_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-4">
        <textarea
            class="form-control valuation-input"
            rows="4"
            name="comments"
            id="v_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"
        onclick="$('#valuationForm').submit();"
        class="btn valuation-submit-btn fw-bold w-100 py-3 rounded-pill text-white">
        Send
        <i class="fas fa-arrow-right ms-2"></i>
    </button>
</form>
							</div>
						</div>

						<div class="col-lg-7" data-aos="fade-left">
							<div class="calendly-inline-widget"
								data-url="https://calendly.com/secrecycler/secr-introduction-to-itad"
								style="position: relative;min-width:320px;height:700px;" data-processed="true">
								<div class="calendly-spinner">
									<div class="calendly-bounce1"></div>
									<div class="calendly-bounce2"></div>
									<div class="calendly-bounce3"></div>
								</div><iframe
									src="https://calendly.com/secrecycler/secr-introduction-to-itad?embed_domain=secrecyclers.com&amp;embed_type=Inline"
									width="100%" height="100%" frameborder="0"
									title="Select a Date &amp; Time - Calendly"></iframe>
							</div>
						</div>


					</div>
				</div>
			</section>
			<!-- Contact Form Start -->
			<!-- Certifications 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('v_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>
$(document).ready(function () {

    $("#valuationForm").validate({

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

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

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

        invalidHandler: function (event, validator) {

            if (validator.numberOfInvalids()) {

                let 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: "Please fill the following fields:",
                    html: errorList
                });
            }
        },

        errorPlacement: function (error, element) {

            if (element.attr("name") === "g-recaptcha-response") {
                return false;
            }

            return false;
        },

        submitHandler: function () {
            submitValuationAjax();
        }

    });

    $('#v_phone').inputmask("999-999-9999");

});

function submitValuationAjax() {

    let url = "{{ base_url() }}contact-us";

    let formData = new FormData($('#valuationForm')[0]);

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

    $.ajax({

        url: url,
        type: "POST",
        data: formData,
        cache: false,
        contentType: false,
        processData: false,

        success: function (data) {

            data = JSON.parse(data);

            if (data.status) {

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

                if (typeof grecaptcha !== "undefined") {
                    grecaptcha.reset();
                }

                Swal.fire({
                    title: "Thank you!",
                    html: "Your Message has been submitted successfully.",
                    timer: 2000,
                    timerProgressBar: false
                });

            } else {

                Swal.fire({
                    title: "Sorry!",
                    html: data.error,
                    timer: 2000,
                    timerProgressBar: true
                });

            }

        },

        error: function (data) {

            if (data.status == 422) {

                let responseText = $.parseJSON(data.responseText);

                let 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