@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')
   

   
			<div class="secr-slider_wrapper pagetitle"
			style="background: url({{ asset_storage('front/images/whitepaper-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">@php echo adjustUrl($whitepaper->heading) @endphp
							</h1>
							 @php echo adjustUrl($whitepaper->excerpt) @endphp

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


		<!-- Page title end -->

		<main id="main">
			<!-- Whitepapers Content -->
			<section class="whitepaper-page-section pagecontent">
				<div class="container">

					<!-- Section Heading -->
					@php echo adjustUrl($whitepaper->content) @endphp

					<!-- Form Container -->
					<div class="row justify-content-center">
						<div class="col-lg-7 mb-5 text-center" data-aos="fade-up" data-aos-delay="100">
							<div class="coverimg"><img src="{{ asset_uploads('module/cms/' . $whitepaper->featured_img) }}" alt="Main Cover Page"></div>
						</div>

						<div class="col-lg-5" data-aos="fade-up" data-aos-delay="200">
							<div class="cp-form-card">
								<h3 class="fw-bold cp-form-title mb-2 text-center">Download Whitepaper</h3>
								<p class="cp-form-sub mb-4 text-center">Fill out the form below to access our expert
									insights.</p>
										<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>

								<!-- <form>
									<div class="row g-3 mb-3">
										<div class="col-md-12">
											<input type="text" class="form-control contact-input"
												placeholder="First Name *" required>
										</div>
										<div class="col-md-12">
											<input type="text" class="form-control contact-input"
												placeholder="Last Name *" required>
										</div>
									</div>
									<div class="row g-3 mb-3">
										<div class="col-md-12">
											<input type="email" class="form-control contact-input"
												placeholder="Email Address *" required>
										</div>
										<div class="col-md-12">
											<input type="tel" class="form-control contact-input"
												placeholder="Phone Number">
										</div>
									</div>
									<div class="mb-4">
										<input type="text" class="form-control contact-input"
											placeholder="Company Name *" required>
									</div>

									<div class="text-center mt-2">
										<button type="submit"
											class="btn contact-submit-btn fw-bold rounded-pill text-white px-5 py-3">
											Download Now <i class="fas fa-download ms-2"></i>
										</button>
									</div>
								</form> -->
							</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('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");

});

// Called when reCAPTCHA is successfully completed
function captchaVerified() {
    $("#valuationForm").validate().element("[name='g-recaptcha-response']");
}


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