@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;
    }
    .bb-valuation-section {
        background: #f8f9fa;
        padding: 60px 0;
    }
    .bb-valuation-card {
        background: #fff;
        border-radius: 16px;
        padding: 48px 48px 48px 48px;
        box-shadow: 0 4px 30px rgba(0,0,0,0.07);
        max-width: 900px;
        margin: 0 auto;
    }
    .bb-valuation-heading h2 { margin-bottom: 10px; }
    .bb-valuation-heading p  { color: #666; margin-bottom: 36px; }
    .bb-valuation-form label { font-weight: 600; color: #333; margin-bottom: 6px; display: block; }
    .bb-valuation-form label small { font-weight: 400; color: #999; }
    .bb-field-note { color: #999; font-size: 12px; margin-top: 4px; display: block; }
    @media (max-width: 768px) {
        .bb-valuation-card { padding: 28px 18px; }
    }
</style>
@endsection

@section('content')

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

    @if($buyback->featured_img)
    <div class="circular-economy mt-5 mb-2 mb-lg-5" style="text-align: center;">
        <img src="{{ asset_uploads('module/cms/' . $buyback->featured_img) }}" alt="Circular Economy" class="rounded-5">
    </div>
    @endif

    <main id="main" class="bb-page-main bb-new-v2">

        @php echo adjustUrl($buyback->content) @endphp

        <!-- Hardware Valuation Form -->
        <section class="bb-valuation-section" id="valuation-form">
            <div class="container">
                <div class="bb-valuation-card">
                    <div class="bb-valuation-heading text-center pt-3">
                        <h2 class="cp-form-title">Free <span>Hardware Valuation</span> &amp; Consultation</h2>
                        <p>Find out what your retired, used, working or non-working assets are worth. Complete the form for a free valuation of your networking, computer, telecom and consumer electronics.</p>
                    </div>

                    <form id="bb-valuation-form" enctype="multipart/form-data" novalidate>
                        @csrf

                        <div class="row g-4 align-items-center">

                            {{-- Full Name --}}
                            <div class="col-lg-3">
                                <label for="bb-first-name">Full Name <b class="text-danger">*</b></label>
                            </div>
                            <div class="col-lg-9">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <input id="bb-first-name" type="text"
                                            class="form-control contact-input"
                                            name="first_name"
                                            placeholder="First Name">
                                    </div>
                                    <div class="col-md-6">
                                        <input id="bb-last-name" type="text"
                                            class="form-control contact-input"
                                            name="last_name"
                                            placeholder="Last Name">
                                    </div>
                                </div>
                            </div>

                            {{-- Company Name --}}
                            <div class="col-lg-3">
                                <label for="bb-company">Company Name</label>
                            </div>
                            <div class="col-lg-9">
                                <input id="bb-company" type="text"
                                    class="form-control contact-input"
                                    name="company_name"
                                    placeholder="Company Name">
                            </div>

                            {{-- Email --}}
                            <div class="col-lg-3">
                                <label for="bb-email">Email <b class="text-danger">*</b></label>
                            </div>
                            <div class="col-lg-9">
                                <input id="bb-email" type="email"
                                    class="form-control contact-input"
                                    name="email"
                                    placeholder="Email Address">
                            </div>

                            {{-- Phone --}}
                            <div class="col-lg-3">
                                <label for="bb-phone">Phone <b class="text-danger">*</b></label>
                            </div>
                            <div class="col-lg-9">
                                <input id="bb-phone" type="tel"
                                    class="form-control contact-input"
                                    name="phone"
                                    placeholder="Phone Number">
                            </div>

                            {{-- Services Needed --}}
                            <div class="col-lg-3">
                                <label for="bb-service">Services Needed</label>
                            </div>
                            <div class="col-lg-9">
                                <select id="bb-service" name="service_needed" class="form-select contact-input">
                                    <option value="" selected disabled>Select a Service</option>
                                    <option value="Buy-Back Program">Buy-Back Program</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>
                                </select>
                            </div>

                            {{-- Number of Assets --}}
                            <div class="col-lg-3">
                                <label for="bb-assets">Number of Assets</label>
                            </div>
                            <div class="col-lg-9">
                                <select id="bb-assets" name="number_of_assets" class="form-select contact-input">
                                    <option value="" selected disabled>Select a Range</option>
                                    <option value="1–25">1–25</option>
                                    <option value="26–100">26–100</option>
                                    <option value="101–500">101–500</option>
                                    <option value="500+">500+</option>
                                </select>
                            </div>

                            {{-- Asset Types --}}
                            <div class="col-lg-3">
                                <label for="bb-type">Asset Types</label>
                            </div>
                            <div class="col-lg-9">
                                <select id="bb-type" name="asset_type" class="form-select contact-input">
                                    <option value="" selected disabled>Select Asset Type</option>
                                    <option value="Laptops &amp; Desktops">Laptops &amp; Desktops</option>
                                    <option value="Servers &amp; Storage">Servers &amp; Storage</option>
                                    <option value="Networking Equipment">Networking Equipment</option>
                                    <option value="Mobile Devices">Mobile Devices</option>
                                    <option value="Mixed Equipment">Mixed Equipment</option>
                                </select>
                            </div>

                            {{-- Equipment List (single file) --}}
                            <div class="col-lg-3">
                                <label for="bb-list">Upload Equipment List <small>*Optional</small></label>
                            </div>
                            <div class="col-lg-9">
                                <input id="bb-list" type="file"
                                    class="form-control contact-input bb-file-input"
                                    name="equipment_list">
                                <small class="bb-field-note">Upload an equipment list or inventory file, if available.</small>
                            </div>

                            {{-- Product Images (multiple) --}}
                            <div class="col-lg-3">
                                <label for="bb-images">Product Images <small>*Optional</small></label>
                            </div>
                            <div class="col-lg-9">
                                <input id="bb-images" type="file"
                                    accept="image/*"
                                    multiple
                                    class="form-control contact-input bb-file-input"
                                    name="product_images[]">
                                <small class="bb-field-note">Photos help our team provide a more accurate valuation.</small>
                            </div>

                            {{-- Preferred Pickup Date --}}
                            <div class="col-lg-3">
                                <label for="bb-date">Preferred Pickup Date</label>
                            </div>
                            <div class="col-lg-9">
                                <input id="bb-date" type="date"
                                    class="form-control contact-input bb-date-input"
                                    name="preferred_pickup_date">
                            </div>

                            {{-- Additional Details --}}
                            <div class="col-lg-3 align-self-start">
                                <label for="bb-details">Additional Details</label>
                            </div>
                            <div class="col-lg-9">
                                <textarea id="bb-details"
                                    class="form-control contact-input contact-textarea"
                                    rows="5"
                                    name="additional_details"
                                    placeholder="Tell us about your equipment, location, or timeline."></textarea>
                            </div>
                            
                             <div class="col-lg-9">
                              <div class="g-recaptcha"
            data-sitekey="{{ config('recaptcha.siteKey') }}"></div>
                            </div>
                            
                            

                            {{-- Submit --}}
                            <div class="col-lg-12"> 
                                <div class="request-submit_btn text-center">
                                <button type="submit" id="bb-submit-btn"
                                    class="btn contact-submit-btn fw-bold rounded-pill text-white px-5 py-3">
                                    Request My Valuation <i class="fa-solid fa-arrow-right ms-2"></i>
                                </button>
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </section>

    </main>

@endsection

@section('beforeBodyClose')

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

<script>
    // Phone formatting: 999-999-9999
    document.getElementById('bb-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 () {

    $('#bb-valuation-form').validate({

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

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

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

        invalidHandler: function (event, validator) {

            if (validator.numberOfInvalids()) {

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

        errorPlacement: function (error, element) {

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

            return false;
        },

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

    });

});

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

<script>
function submitValuationFormAjax() {

    var url      = '{{ route("valuations.save") }}';
    var formData = new FormData(document.getElementById('bb-valuation-form'));

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

    $('#bb-submit-btn').prop('disabled', true).html('Sending... <i class="fa-solid fa-spinner fa-spin ms-2"></i>');

    $.ajax({
        url:         url,
        type:        'POST',
        data:        formData,
        async:       true,
        cache:       false,
        contentType: false,
        processData: false,

        success: function (data) {
            data = JSON.parse(data);
            $('#bb-submit-btn').prop('disabled', false).html('Request My Valuation <i class="fa-solid fa-arrow-right ms-2"></i>');

            if (data.status) {
                $('#bb-valuation-form')[0].reset();
                if (typeof grecaptcha !== 'undefined') { grecaptcha.reset(); }

                Swal.fire({
                    title: 'Thank you!',
                    html:  data.message,
                    icon:  'success',
                    timer: 4000,
                    timerProgressBar: true,
                    showConfirmButton: true,
                    confirmButtonText: 'OK'
                });
            } else {
                Swal.fire({
                    title: 'Sorry!',
                    html:  data.error ?? 'Something went wrong. Please try again.',
                    icon:  'error'
                });
            }
        },

        error: function (jqXHR) {
            $('#bb-submit-btn').prop('disabled', false).html('Request My Valuation <i class="fa-solid fa-arrow-right ms-2"></i>');
            if (jqXHR.status === 422) {
                var errors    = JSON.parse(jqXHR.responseText);
                var errorList = '<div class="text-start ps-3">';
                if (errors.errors) {
                    $.each(errors.errors, function (field, messages) {
                        $.each(messages, function (i, msg) {
                            errorList += '<span class="text-danger">*</span> ' + msg + '<br>';
                        });
                    });
                }
                errorList += '</div>';
                Swal.fire({ title: 'Validation Error', html: errorList });
            } else {
                Swal.fire({ title: 'Error', html: 'Something went wrong. Please try again.', icon: 'error' });
            }
        }
    });
}
</script>

@endsection

@section('content')

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

    <div class="circular-economy mt-5 mb-2 mb-lg-5" style="text-align: center;">
        <img src="{{ asset_uploads('module/cms/' . $buyback->featured_img) }}" alt="Circular Economy" class="rounded-5">
    </div>

    <main id="main" class="bb-page-main bb-new-v2">

        @php echo adjustUrl($buyback->content) @endphp

        <!-- Hardware Valuation Form -->
        <section class="bb-valuation-section rounded-5" id="valuation-form">
            <div class="container">
                <div class="bb-valuation-card cp-form-card">
                    <div class="bb-valuation-heading text-center">
                        <h2 class="cp-form-title">Free <span>Hardware Valuation</span> &amp; Consultation</h2>
                        <p>Find out what your retired, used, working or non-working assets are worth. Complete the form for a free valuation of your networking, computer, telecom and consumer electronics.</p>
                    </div>

                    <form id="bb-valuation-form" enctype="multipart/form-data" novalidate>
                        @csrf

                        <div class="row g-4 align-items-center">

                            {{-- Full Name --}}
                            <div class="col-lg-3">
                                <label for="bb-first-name">Full Name <b>*</b></label>
                            </div>
                            <div class="col-lg-9">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <input
                                            id="bb-first-name"
                                            type="text"
                                            class="form-control contact-input"
                                            name="first_name"
                                            placeholder="First Name">
                                    </div>
                                    <div class="col-md-6">
                                        <input
                                            id="bb-last-name"
                                            type="text"
                                            class="form-control contact-input"
                                            name="last_name"
                                            placeholder="Last Name">
                                    </div>
                                </div>
                            </div>

                            {{-- Company Name --}}
                            <div class="col-lg-3">
                                <label for="bb-company">Company Name</label>
                            </div>
                            <div class="col-lg-9">
                                <input
                                    id="bb-company"
                                    type="text"
                                    class="form-control contact-input"
                                    name="company_name"
                                    placeholder="Company Name">
                            </div>

                            {{-- Email --}}
                            <div class="col-lg-3">
                                <label for="bb-email">Email <b>*</b></label>
                            </div>
                            <div class="col-lg-9">
                                <input
                                    id="bb-email"
                                    type="email"
                                    class="form-control contact-input"
                                    name="email"
                                    placeholder="Email Address">
                            </div>

                            {{-- Phone --}}
                            <div class="col-lg-3">
                                <label for="bb-phone">Phone <b>*</b></label>
                            </div>
                            <div class="col-lg-9">
                                <input
                                    id="bb-phone"
                                    type="tel"
                                    class="form-control contact-input"
                                    name="phone"
                                    placeholder="Phone Number">
                            </div>

                            {{-- Services Needed --}}
                            <div class="col-lg-3">
                                <label for="bb-service">Services Needed</label>
                            </div>
                            <div class="col-lg-9">
                                <select id="bb-service" name="service_needed" class="form-select contact-input">
                                    <option value="" selected disabled>Services Needed</option>
                                    <option value="Buy-Back Program">Buy-Back Program</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>
                                </select>
                            </div>

                            {{-- Number of Assets --}}
                            <div class="col-lg-3">
                                <label for="bb-assets">Number of Assets</label>
                            </div>
                            <div class="col-lg-9">
                                <select id="bb-assets" name="number_of_assets" class="form-select contact-input">
                                    <option value="" selected disabled>Number of Assets</option>
                                    <option value="1–25">1–25</option>
                                    <option value="26–100">26–100</option>
                                    <option value="101–500">101–500</option>
                                    <option value="500+">500+</option>
                                </select>
                            </div>

                            {{-- Asset Types --}}
                            <div class="col-lg-3">
                                <label for="bb-type">Asset Types</label>
                            </div>
                            <div class="col-lg-9">
                                <select id="bb-type" name="asset_type" class="form-select contact-input">
                                    <option value="" selected disabled>Asset Types</option>
                                    <option value="Laptops &amp; Desktops">Laptops &amp; Desktops</option>
                                    <option value="Servers &amp; Storage">Servers &amp; Storage</option>
                                    <option value="Networking Equipment">Networking Equipment</option>
                                    <option value="Mobile Devices">Mobile Devices</option>
                                    <option value="Mixed Equipment">Mixed Equipment</option>
                                </select>
                            </div>

                            {{-- Equipment List (single file) --}}
                            <div class="col-lg-3">
                                <label for="bb-list">Upload Equipment List <small>*Optional</small></label>
                            </div>
                            <div class="col-lg-9">
                                <input
                                    id="bb-list"
                                    type="file"
                                    class="form-control contact-input bb-file-input"
                                    name="equipment_list">
                                <small class="bb-field-note">Upload an equipment list or inventory file, if available.</small>
                            </div>

                            {{-- Product Images (multiple) --}}
                            <div class="col-lg-3">
                                <label for="bb-images">Product Images <small>*Optional</small></label>
                            </div>
                            <div class="col-lg-9">
                                <input
                                    id="bb-images"
                                    type="file"
                                    accept="image/*"
                                    multiple
                                    class="form-control contact-input bb-file-input"
                                    name="product_images[]">
                                <small class="bb-field-note">Photos help our team provide a more accurate valuation.</small>
                            </div>

                            {{-- Preferred Pickup Date --}}
                            <div class="col-lg-3">
                                <label for="bb-date">Preferred Pickup Date</label>
                            </div>
                            <div class="col-lg-9">
                                <input
                                    id="bb-date"
                                    type="date"
                                    class="form-control contact-input bb-date-input"
                                    name="preferred_pickup_date">
                            </div>

                            {{-- Additional Details --}}
                            <div class="col-lg-3 align-self-start">
                                <label for="bb-details">Additional Details</label>
                            </div>
                            <div class="col-lg-9">
                                <textarea
                                    id="bb-details"
                                    class="form-control contact-input contact-textarea"
                                    rows="5"
                                    name="additional_details"
                                    placeholder="Tell us about your equipment, location, or timeline."></textarea>
                            </div>

                            {{-- Submit --}}
                            <div class="col-lg-9 offset-lg-3">
                                <button type="submit" id="bb-submit-btn" class="btn contact-submit-btn fw-bold rounded-pill text-white px-5 py-3">
                                    Request My Valuation <i class="fa-solid fa-arrow-right ms-2"></i>
                                </button>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </section>

    </main>

@endsection

@section('beforeBodyClose')

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

<script>
    // Phone formatting: 999-999-9999
    document.getElementById('bb-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 () {

    $('#bb-valuation-form').validate({

        rules: {
            first_name: { required: true },
            last_name:  { required: true },
            email:      { required: true, email: true },
            phone:      { required: true }
        },

        messages: {
            first_name: { required: 'Please enter your first name' },
            last_name:  { required: 'Please enter your last name' },
            email: {
                required: 'Please provide your email',
                email:    'Please provide a valid email'
            },
            phone: { required: 'Please enter your phone number' }
        },

        invalidHandler: function (event, validator) {
            if (validator.numberOfInvalids()) {
                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: 'Please fill the following fields:',
                    html: errorList
                });
            }
        },

        errorPlacement: function () {
            return false;
        },

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

    });

});
</script>

<script>
function submitValuationFormAjax() {

    var url    = '{{ route("valuations.save") }}';
    var formData = new FormData(document.getElementById('bb-valuation-form'));

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

    $.ajax({
        url:         url,
        type:        'POST',
        data:        formData,
        async:       true,
        cache:       false,
        contentType: false,
        processData: false,

        success: function (data) {
            data = JSON.parse(data);

            if (data.status) {
                $('#bb-valuation-form')[0].reset();

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

                Swal.fire({
                    title: 'Thank you!',
                    html:  data.message,
                    timer: 3000,
                    timerProgressBar: true,
                    showConfirmButton: true,
                    confirmButtonText: 'OK'
                });

            } else {
                Swal.fire({
                    title: 'Sorry!',
                    html:  data.error ?? 'Something went wrong. Please try again.',
                    icon:  'error'
                });
            }
        },

        error: function (jqXHR) {
            // Handle Laravel validation errors (422)
            if (jqXHR.status === 422) {
                var errors = JSON.parse(jqXHR.responseText);
                var errorList = '<div class="text-start ps-3">';
                if (errors.errors) {
                    $.each(errors.errors, function (field, messages) {
                        $.each(messages, function (i, msg) {
                            errorList += '<span class="text-danger">*</span> ' + msg + '<br>';
                        });
                    });
                }
                errorList += '</div>';
                Swal.fire({ title: 'Validation Error', html: errorList });
            } else {
                Swal.fire({
                    title: 'Error',
                    html:  'Something went wrong. Please try again.',
                    icon:  'error'
                });
            }
        }
    });
}
</script>

@endsection