@extends('layouts.new-layout')
@push('head')
    <style>
        [name="name"] {
            scroll-margin-top: 150px;
        }
    </style>
@endpush
@section('content')
<style>
    input[type="date"] {
        height: 2rem;
    }

    input[type="date"].ios-detected::before{
        color: #000;
        opacity: .6;
        content: attr(placeholder);
    }

    input[type="date"].ios-detected.not-empty::before{
        width: 0;
        display: none;
    }

    option:disabled {
        color: rgb(0 0 0 / 60%);
    }

    .form-control-r.is-invalid{
        border: 1px solid red;
    }

    /* Fix field overlap on focus */
    .form-control-r:focus {
        outline: none;
        box-shadow: none;
        border-bottom: 2px solid #000;
        position: relative;
        z-index: 1;
    }

    #info-form .row.g-3 > [class*="col"] {
        padding-bottom: 4px;
    }

    /* Hide Google Places dropdown when not needed */
    #afirststep3 ~ .pac-container,
    .pac-container { z-index: 9999; }

    .form-check.is-invalid input[type=checkbox]{
        border: 1px solid red;
    }

    .form-check input[type=checkbox].is-invalid {
        border: 2px solid #dc3545 !important;
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
    }

    .form-check input[type=checkbox].is-invalid ~ label {
        color: inherit !important;
    }

    .form-control-r.is-invalid {
        border-bottom: 2px solid #dc3545 !important;
    }

    .select2-container .select2-selection.is-invalid {
        border: 1px solid #dc3545 !important;
    }

.product-image {
    width: 100%;
    max-width: 220px;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
#parallaxSlider .carousel-item {
    background-size: cover !important;
    background-position: center;
    background-repeat: no-repeat;
}
.carousel-caption {
    bottom: 50%;
    transform: translateY(50%);
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.7);
    color: #212121;
}
.carousel-caption h1 {
    font-size: 4rem;
}
.carousel-caption p {
    font-size: 1.5rem;
}
#Carouselimage .carousel-control-next,
#Carouselimage .carousel-control-prev,
#testimonialCarousel .carousel-control-prev {
    width: 35px !important;
}
.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 buttons per row */
    gap: 10px;
    /* Spacing between buttons */
}
/* Calendar container ka size set karna */
.flatpickr-calendar {
    width: 250px !important; /* Adjust width */
}

/* Weekday (Sun, Mon, Tue, etc.) */
.flatpickr-weekdays {
    display: flex;
    justify-content: space-between; /* Equal spacing */
    font-size: 12px;
    text-align: center;
    padding: 5px 0;
}

/* Individual day names (S, M, T, W, etc.) */
.flatpickr-weekday {
    flex: 1;
    text-align: center;
    font-size: 12px !important;
}

/* Dates (1, 2, 3, etc.) */
.flatpickr-day {
    /* width: 30px !important;
    height: 30px !important; */
    /* line-height: 30px !important;
    text-align: center; */
    font-size: 12px !important;
    /* margin: 2px; */
}
/* Sunday ko disabled dikhane ke liye */
.disabled-sunday {
    position: relative;
    /* background: #f8d7da !important;
    color: #721c24 !important;  */
    cursor: not-allowed !important;
}

/* Tooltip Styling */
.disabled-sunday:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: black;
    color: white;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
}
/* .time-slot {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.time-slot button {
    width: 80%;
    padding: 10px;
    font-size: 16px;
} */
@media (max-width: 767px) {
    form {
        margin-bottom: 150px !important;
    }
    #parallaxSlider .carousel-item {
        background-size: cover !important;
        /* For iOS, keep background-size as cover */
        background-position: center center !important;
        /* Keep background centered */
        background-attachment: scroll !important;
        /* Prevent background attachment scrolling */
        -webkit-background-size: cover;
        /* iOS-specific handling */
        -webkit-transform: translate3d(0, 0, 0);
        /* Force GPU rendering for smoother animation */
        -webkit-backface-visibility: hidden;
    }
}

::placeholder{
    opacity: .6;
}

option:disabled {
    opacity: .6;
}

select:required:invalid {
    color: gray;
}
option[value=""][disabled] {
    /*display: none;*/
}
option {
    color: black;
}
</style>
@include('partials.parallaxSlider', ['title' => 'Book Appointment'])
<section class="padding-top" style="padding: 0">
    <div class="container-fluid">
        <div class="">
            <h2 class="pt-4 text-white pb-5">Book <span class="yellow">Appointment</span></h2>
        </div>
    </div>
</section>
<section class="py-5" style="background: #fff;">
    <div class="container-fluid">
        @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif
        <div class="progress-steps">
            <div class="d-flex justify-content-center">
                <div class="top">
                    <div class="progress"><span></span></div>
                    <div class="steps">
                        <div class="step active" id="firststep1" data-step="1"><span>1</span></div>
                        <div class="step" id="firststep2" data-step="2"><span>2</span></div>
                        <div class="step" id="firststep3" data-step="3"><span>3</span></div>
                    </div>
                </div>
            </div>
            <div id="afirststep1">
              <form method="POST">
                @csrf
                <input type="hidden" name="item_id" id="selectedItemId" value="">
                <input type="hidden" name="product_id" id="selectedProductId" value="">
                <input type="hidden" name="product_ids" id="selectedProductIds" value="[]">
                <input type="hidden" name="price" id="selectedItemPrice" value="0">

                <div class="booking-container row">
                    <div class="col-md-6">
                        <!-- Calendar Section -->
                        <div class="calendar-container">
                            <label for="datePicker" class="form-label">Select a Date:</label>
                            <input type="text" id="datePicker" name="date" class="form-control" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <!-- Time Slots Section -->
                        <h5>Available Time Slots:</h5>
                        <p class="small badge bg-dark text-white">
                            <small>PST (Pacific Standard Time) - UTC/GMT -8 hours</small>
                        </p>
                        <div class="time-slot mb-6" id="timeSlots">
                            <p>No Slot Available</p>
                            <!-- Time Slots will be loaded here dynamically -->
                        </div>
                        <input type="hidden" name="time" id="time" class="form-control" placeholder="Select Time" required>
                    </div>
                </div>
            </div>
            <div id="afirststep2" class="d-none">
                <div class="booking-container row p-4">
                    <!-- Date/Time summary bar at top -->
                    <div class="col-12 mb-3">
                        <div class="d-flex align-items-center flex-wrap gap-2 p-3 bg-light rounded" style="font-weight:600;">
                            <span id="selected-date" style="font-size:0.95rem; white-space:nowrap;">📅 Schedule Date: <span>Not Selected</span></span>
                            <span class="text-muted d-none d-sm-inline">|</span>
                            <span id="selected-time" style="font-size:0.95rem; white-space:nowrap;">🕐 Schedule Time: <span>Not Selected</span></span>
                            <a style="font-size:13px;cursor:pointer;" id="dateButton" class="ms-auto text-secondary" title="Edit date & time"><i class="fas fa-pencil-alt"></i> Edit</a>
                        </div>
                    </div>
                    <!-- Full width form -->
                    <div class="col-12">
                        <h5 class="my-3">Add Your Details</h5>

                        {{-- Service / Item multi-select dropdown --}}
                        @if(isset($products) && $products->count() > 0 && $appSetting->fieldVisible('product_ids'))
                        <div class="mb-3" id="productSelectWrap">
                            <label class="form-label fw-bold" style="font-size:14px;">Select Service(s) / Item(s) @if($appSetting->fieldRequired('product_ids'))<span style="color:red;">*</span>@endif</label>
                            <select id="productSelectStep2" name="product_ids_select[]" multiple
                                    style="width:100%;max-width:480px;">
                                @foreach($products as $prod)
                                    <option value="{{ $prod->id }}" data-rate="{{ $prod->rate }}">
                                        {{ $prod->name }}
                                    </option>
                                @endforeach
                            </select>
                            <div id="productSelectError" class="field-error" style="display:none;color:#dc3545;font-size:12px;margin-top:4px;"></div>
                        </div>
                        @endif

                        <div id="info-form">
                            @include('partials.includes.common', [
                                'formFields' => $appSetting->formFields(),
                                'customFormFields' => $appSetting->customFormFields(),
                            ])
                        </div>
                    </div>

                    @php $bookingTerms = $appSetting->terms(); @endphp

                    @if(!empty($bookingTerms['consent']['visible']))
                    <div class="col-md-12">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="save-info" name="consent" @if(!empty($bookingTerms['consent']['required'])) required @endif>
                            <label class="form-check-label" style="font-size: 12px;" for="save-info">
                                {{ $bookingTerms['consent']['text'] }}
                            </label>
                        </div>
                    </div>
                    @endif
                    @if(!empty($bookingTerms['cancellation_fee']['visible']))
                    <div class="col-md-12">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="cancellation_fee_consent" name="cancellation_fee_consent" @if(!empty($bookingTerms['cancellation_fee']['required'])) required @endif>
                            <label class="form-check-label" style="font-size: 12px;" for="cancellation_fee_consent">
                                {{ $bookingTerms['cancellation_fee']['text'] }}
                            </label>
                        </div>
                    </div>
                    @endif
                    <div class="col-md-12" style="display:none;">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="sms_consent" name="sms_consent" checked>
                            <label class="form-check-label" style="font-size: 12px;" for="sms_consent">
                                You agree to receive automated Transactional messages. Terms and Privacy Policy can be found at
                                <a target="_blank" class="text-primary" href="{{ url('privacy-policy') }}">studioontheridge.ca/privacy-policy</a>. Message frequency may vary. Standard message and data rates may apply. Reply STOP to opt out. Reply HELP for assistance. Your mobile information will not be sold or shared with third parties for promotional or marketing purposes.
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div id="afirststep3" class="d-none">
                <div class="booking-container row">
                    <div class="col-md-12 text-center">
                        <h1 class="mb-3">Thank You!</h1>
                        <h5 class="mb-3">Your Appointment Has Been Successfully Booked.</h5>
                       
                        <p><strong>Booking Reference:</strong> <span id="booking-id">#123456</span></p>
                        <p><strong>Requested Date:</strong> <span id="requested-date">#123456</span></p>
                        <p><strong>Requested Time:</strong> <span id="requested-time">#123456</span></p>
                        <p>We appreciate you choosing <strong>MJ VAC Services</strong> for your duct and vent cleaning needs. Your appointment request has been received, and our team will review and confirm it shortly.</p>
                        <p>You will receive a confirmation email with full details in your inbox soon.</p>
                        <p>If you have any questions or need to make changes to your appointment, feel free to contact us via email - <a href="mailto:info@mjvacservices.ca">info@mjvacservices.ca</a></p>
                        <!-- <p>
                            <strong>MJ VAC Services</strong><br>
                            Address: 7195 Gladstone Drive, V2N 3A3<br>
                            Phone: <a href="tel:+17786751861">+1 (778) 675 1861</a><br>
                            Email: <a href="mailto:info@mjvacservices.ca">info@mjvacservices.ca</a>
                        </p> -->
                    </div>

                    <!-- Follow Us Section -->
                    <div class="follow-us mt-4 text-center">
                        <!-- <h4><strong>Stay Connected with Us!</strong></h4>
                        <p>Follow us on Instagram and Facebook to get updates on our services, seasonal offers, and helpful tips to keep your home's air clean and healthy.</p> -->
                        <p>Thank you for trusting <strong>MJ VAC Services</strong>!</p>
                        <!-- <a href="https://www.facebook.com/mjvacservices" target="_blank" title="Follow on Facebook">
                            <span class="me-3" data-feather="facebook">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-facebook">
                                    <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
                                </svg>
                            </span>
                        </a> |
                        <a href="https://www.instagram.com/mjvacservices" target="_blank" title="Follow on Instagram">
                            <span class="me-3" data-feather="instagram">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram">
                                    <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                                    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                                    <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
                                </svg>
                            </span>
                        </a> -->
                    </div>
                </div>
            </div>
            <div class="buttons mb-4">
                <!-- <a class="btn btn-prev d-none" id="prevButton">Prev</a> -->
                <!-- Next Button -->
                <!-- <a class="btn btn-next d-none" id="nextButton">Next</a> -->
                @if($item->category->name == 'Prom Dress')
                <button class="btn btn-submit d-none" id="submitButton">Request for Appointment</button>
                @elseif($item->category->name == 'Alterations')
                <button class="btn btn-submit d-none" id="submitButton">Request for Appointment</button>
                @else
                    <button class="btn btn-submit d-none" id="submitButton"> {{ ($appSetting ?? null)?->isFree() ? 'Request for Appointment' : ($item->category->price == '0' ? 'Request for Appointment' : 'Proceed to Payment') }}</button>
                @endif
                <a class="btn btn-home d-none" href="{{ route('welcome') }}">Go To Home</a>
                </form>
            </div>
        </div>
    </div>
</section>
<dialog id="paymentModal">
    <h1>Please complete the payment</h1>
    <div class="modal-body" id="modalContent">
        <p>Loading...</p>
    </div>
</dialog>
<!-- Flatpickr JS -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<!-- Select2 -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
const appointmentFormFieldConfig = @json($appSetting->formFields());
const appointmentCustomFields = @json($appSetting->customFormFields());
const appointmentTermsConfig = @json($appSetting->terms());

function apptFieldVisible(key) {
    return !!(appointmentFormFieldConfig[key] && appointmentFormFieldConfig[key].visible);
}

function apptFieldRequired(key) {
    return apptFieldVisible(key) && !!(appointmentFormFieldConfig[key] && appointmentFormFieldConfig[key].required);
}

function apptTermVisible(key) {
    return !!(appointmentTermsConfig[key] && appointmentTermsConfig[key].visible);
}

function apptTermRequired(key) {
    return apptTermVisible(key) && !!(appointmentTermsConfig[key] && appointmentTermsConfig[key].required);
}

function syncSelectedProducts() {
    const select = $('#productSelectStep2');
    if (!select.length) return;
    const selected = select.select2('data');
    const ids = selected.map(s => s.id);
    document.getElementById('selectedProductId').value  = ids[0] || '';
    document.getElementById('selectedProductIds').value = JSON.stringify(ids);
}

function setProductSelectError(message) {
    const err = document.getElementById('productSelectError');
    const select = document.getElementById('productSelectStep2');
    if (!err || !select) return;

    if (message) {
        err.textContent = '⚠ ' + message;
        err.style.display = 'block';
        $(select).next('.select2-container').find('.select2-selection').addClass('is-invalid');
    } else {
        err.textContent = '';
        err.style.display = 'none';
        $(select).next('.select2-container').find('.select2-selection').removeClass('is-invalid');
    }
}

function validateProductSelection() {
    const select = document.getElementById('productSelectStep2');
    if (!select || !apptFieldVisible('product_ids')) return true;
    if (!apptFieldRequired('product_ids')) return true;

    syncSelectedProducts();
    let ids = [];
    try {
        ids = JSON.parse(document.getElementById('selectedProductIds').value || '[]');
    } catch (e) {
        ids = [];
    }

    if (!ids.length) {
        setProductSelectError('Please select at least one service/item.');
        return false;
    }

    setProductSelectError('');
    return true;
}

$(document).ready(function() {
    if ($('#productSelectStep2').length) {
        $('#productSelectStep2').select2({
            placeholder: '-- Select Service(s) --',
            allowClear: true,
            width: '100%'
        });
        $('#productSelectStep2').on('change', function() {
            syncSelectedProducts();
            setProductSelectError('');
            if (typeof checkFields === 'function') {
                checkFields();
            }
        });
    }
});
</script>

<script>
// Item/Service multi-select — handled by Select2 above
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);

        console.table({
            isIOS : isIOS,
            'browser': navigator.userAgent
        })

        document.querySelectorAll('[data-date-input]').forEach(input => {
            if(isIOS){
                input.classList.add('ios-detected');
                input.addEventListener('input', ()=>{
                   input.classList.add('not-empty');
                });

                return;
            }
            input.type = 'text';

            input.addEventListener('focus', function() {
                input.type = 'date';
                setTimeout(() => input.showPicker(), 200);
            });

            input.addEventListener('blur', function() {
                // if (!input.value) input.type = 'text';
                input.type = 'text';
            });
        });
    });

    function handleDateSelected(){
        const datePicker =  document.getElementById('datePicker');
        if(!datePicker ){
            console.warn("Date picker not found.");
            return;
        }

        const selectedDate = datePicker.value?.trim();

        if(!selectedDate || selectedDate === '') {
            console.warn("Date has invalid value.");
            return;
        }

        const eventDate = document.querySelector('[name="event_date"]');
        if(eventDate){
            eventDate.setAttribute('min', selectedDate);
            // eventDate.setAttribute('value', selectedDate);
        }

        const selectedDateElement = document.getElementById("selected-date");
        selectedDateElement.innerHTML = "Schedule Date: " + selectedDate;

        const selectedTimeInput = document.getElementById("selected-time");
        const selectedTime = selectedTimeInput.getAttribute('data-time');

        let category = "{{ $item->category->name }}";
        $.ajax({
            url: "/appointments/available-times",
            type: "GET",
            data: { date: selectedDate, category: category },
            success: function (response) {
                let slotsHtml = '';
                let bookedSlots = response.bookedSlots;
                const availableSlots = response.availableSlots;

                availableSlots.forEach(availableSlot => {
                    let displayTime = availableSlot;
                    const isSelected = selectedTime && selectedTime === displayTime;
                    slotsHtml += `<button type="button" class="time-btn ${isSelected? 'selected' : null}" data-time="${displayTime}">${displayTime}</button>`;

                });

                // if slowHtml is empty
                if(slotsHtml === ''){
                    slotsHtml = '<p>No Slot Available</p>';
                }
                $('#timeSlots').html(slotsHtml);
            }
        });
    }

    document.addEventListener('DOMContentLoaded', ()=> {
        handleDateSelected();
    });
$(document).ready(function () {
    const selectedTimetext = document.getElementById("selected-time");
    const textInputs = document.querySelectorAll('#info-form input,#info-form select,#info-form textarea:not(:optional)');
    const consentCheckbox = document.querySelector("input[name='consent']");
    const cancellationConsentCheckbox = document.querySelector("input[name='cancellation_fee_consent']");
    const smsConsentCheckbox = document.querySelector("input[name='sms_consent']");
    const submitButton = document.getElementById("submitButton");
    const buttonsDiv = document.querySelector(".buttons");
    const datePicker = document.getElementById("datePicker");
    const timeInput = document.getElementById("time");
    const dateButton = document.getElementById("dateButton");
    const timeButton = document.getElementById("timeButton");
    const firstStep = document.getElementById("afirststep1");
    const secondStep = document.getElementById("afirststep2");
    const selectedDate = document.getElementById("selected-date");

    $('#datePicker').on('change', function () {
        handleDateSelected();
    });


    $(document).on('click', '.time-btn', function (event) {
        let selectedTime = $(this).data('time');
        $('#time').val(selectedTime);

       // alert(selectedTime);
        if (!this.classList.contains("selected") || true) {
            document.querySelectorAll(".time-btn").forEach(btn => btn.classList.remove("selected"));
            this.classList.add("selected");
            timeInput.value = this.innerText;
            const time = this.textContent;
            // selectedTimetext.innerHTML = "Time: " + selectedTime;
            selectedTimetext.innerHTML = ""; // Pehle clear karo
            selectedTimetext.innerHTML = "Schedule Time: " + event.target.textContent; // Fir naya time set karo

            selectedTimetext.setAttribute('data-time', selectedTime);
            checkAndMoveNextStep();
        }
    });

    // Flatpickr initialization
    flatpickr("#datePicker", {
        inline: true,
        minDate: "today",
        dateFormat: "Y-m-d",
        onReady: function(selectedDates, dateStr, instance) {
            // Default select today
            instance.setDate(new Date(), true);
        }
    });

    handleDateSelected();

    let progress = document.querySelector(".progress span");
    let steps = document.querySelectorAll(".step");
    let countSteps = steps.length;
    let step = 1;

    // Function to check if all fields are filled and checkbox is checked
    function checkFields() {
        let allFilled = true;
        // Check if all text fields are filled
        textInputs.forEach(input => {
            if (!apptFieldRequired(input.name)) {
                return;
            }
            if (input.value.trim() === "" || input.checkValidity() === false) {
                allFilled = false;
            }else{
                input.classList.remove('is-invalid')
            }
        });
        // Checkbox should be checked
        if (consentCheckbox) {
            if (apptTermRequired('consent') && !consentCheckbox.checked) {
                allFilled = false;
            } else {
                consentCheckbox.classList.remove('is-invalid');
                consentCheckbox.closest('.form-check')?.querySelector('.checkbox-error')?.remove();
            }
        }

        if (cancellationConsentCheckbox) {
            if (apptTermRequired('cancellation_fee') && !cancellationConsentCheckbox.checked) {
                allFilled = false;
            } else {
                cancellationConsentCheckbox.classList.remove('is-invalid');
                cancellationConsentCheckbox.closest('.form-check')?.querySelector('.checkbox-error')?.remove();
            }
        }

        if (!smsConsentCheckbox.checked) {
            allFilled = false;
        }else{
            smsConsentCheckbox.classList.remove('is-invalid')
        }

        const productSelect = document.getElementById('productSelectStep2');
        if (productSelect && apptFieldRequired('product_ids')) {
            let productIds = [];
            try {
                productIds = JSON.parse(document.getElementById('selectedProductIds').value || '[]');
            } catch (e) {
                productIds = [];
            }
            if (!productIds.length) {
                allFilled = false;
            }
        }

        // Always keep button clickable, just change visual style
        if(allFilled){
            submitButton.classList.remove('btn-disabled');
            submitButton.style.opacity = '1';
            submitButton.style.cursor = 'pointer';
        } else {
            submitButton.classList.add('btn-disabled');
            submitButton.style.opacity = '0.65';
            submitButton.style.cursor = 'not-allowed';
        }
        submitButton.disabled = false; // Always keep enabled so click fires
    }
    // Attach event listener to text inputs
    textInputs.forEach(input => {
        input.addEventListener("input", checkFields);
        input.addEventListener("change", checkFields);
        // Remove field error on input
        input.addEventListener("input", function() {
            if (this.value.trim()) {
                this.classList.remove('is-invalid');
                this.parentElement.querySelector('.field-error')?.remove();
            }
        });
    });
    // Attach event listener to checkbox
    consentCheckbox?.addEventListener("change", checkFields);
    cancellationConsentCheckbox?.addEventListener("change", checkFields);
    smsConsentCheckbox.addEventListener("change", checkFields);
    // Initial check (in case fields have default values)
    checkFields();
        // Check if both date and time are selected
         function checkAndMoveNextStep() {
            if (datePicker.value && timeInput.value) {
                firstStep.classList.add("d-none");
                secondStep.classList.remove("d-none");
                event.preventDefault();
                if (submitButton.classList.contains("d-none")) {
                    submitButton.classList.remove("d-none");
                }
                //  document.getElementById("firststep1").classList.remove("active");
                let firstStep2 = document.getElementById("firststep2");
                // Check if "active" class is already present
                if (!firstStep2.classList.contains("active")) {
                    firstStep2.classList.add("active");
                    let widthProgress = (step / (countSteps - 1)) * 100;
                        if (step + 1 <= countSteps) {
                            step++;
                            let newStep = document.querySelector(`[data-step="${step}"]`);
                            progress.style.width = `${widthProgress}%`;
                            newStep.classList.add("active");
                        }
                }

                document.querySelector('[name="name"]').scrollIntoView({behavior:"smooth"});
            }
        }
         // Event listeners for buttons
         if (dateButton) {
            dateButton.addEventListener("click", function () {
                secondStep.classList.add("d-none");
                firstStep.classList.remove("d-none");

                document.querySelector('[name="name"]').scrollIntoView({behavior:"smooth"});
            });
        }
        if (timeButton) {
            timeButton.addEventListener("click", function () {
                secondStep.classList.add("d-none");
                firstStep.classList.remove("d-none");

                document.querySelector('[name="name"]').scrollIntoView({behavior:"smooth"});
            });
        }

    function redirectForPayment(appointmentId) {
        window.location.href = "{{ route('redirectToClover') }}?appointment_id=" + parseInt(appointmentId);
    }

    function successAppointment(bookingId, bookingDate, bookingTime) {
        const step2Item = document.getElementById("afirststep2");
        const step3Item = document.getElementById("afirststep3");
        const homeBtn = document.querySelector(".btn-home");

        step2Item.classList.add("d-none");

        // Force close Google Places dropdown - remove from DOM entirely
        const addressInput = document.getElementById('address-input');
        if (addressInput) {
            addressInput.blur();
            addressInput.value = addressInput.value; // trigger change
        }
        // pac-container is appended to body by Google - remove it
        document.querySelectorAll('.pac-container').forEach(el => {
            el.remove();
        });
        submitButton.classList.add("d-none");
        step3Item.classList.remove("d-none");
        homeBtn.classList.remove("d-none");
        const bookingIDElement = step3Item.querySelector('#booking-id');
        bookingIDElement.textContent = bookingId;
        const bookingDateElement = step3Item.querySelector('#requested-date');
        bookingDateElement.textContent = bookingDate;
        const bookingTimeElement = step3Item.querySelector('#requested-time');
        bookingTimeElement.textContent = bookingTime;

        let widthProgress = (step / (countSteps - 1)) * 100;
        if (step + 1 <= countSteps) {
            step++;
            let newStep = document.querySelector(`[data-step="${step}"]`);
            progress.style.width = `${widthProgress}%`;
            newStep.classList.add("active");
        }
    }

    document.addEventListener("DOMContentLoaded", function () {
        // Handle time slot selection
        // Date picker change handler
        datePicker.addEventListener("change", function () {
            selectedDate.innerHTML = "Schedule Date: " + datePicker.value;
            checkAndMoveNextStep();
        });

        buttonsDiv.addEventListener('mouseover', ()=>{
            checkFields();
        });
    });

    // Email validation function
    function validateEmail(email) {
        const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return regex.test(email);
    }

    // Submit button click handler
    submitButton.addEventListener("click", function (event) {
            event.preventDefault();

            if (!validateProductSelection()) {
                document.getElementById('productSelectError')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
                return;
            }

            // --- Field validation with inline error messages ---
            let hasFieldError = false;

            const fieldLabels = {
                name: 'First Name is required.',
                last_name: 'Last Name is required.',
                email: 'Email is required.',
                phone: 'Phone is required.',
                address: 'Address is required.',
                city: 'City is required.',
                state: 'Province is required.',
                postal_code: 'Postal Code is required.',
                remarks: 'Notes is required.',
            };

            const requiredFields = Object.keys(appointmentFormFieldConfig)
                .filter(key => key !== 'product_ids' && apptFieldRequired(key))
                .map(key => ({ name: key, label: fieldLabels[key] || 'This field is required.' }));

            requiredFields.forEach(({ name, label }) => {
                const input = document.querySelector(`[name="${name}"]`);
                if (!input) return;

                // Remove existing error
                input.parentElement.querySelector('.field-error')?.remove();

                if (!input.value.trim()) {
                    hasFieldError = true;
                    input.classList.add('is-invalid');
                    const err = document.createElement('div');
                    err.className = 'field-error';
                    err.style.cssText = 'color: #dc3545; font-size: 12px; margin-top: 4px;';
                    err.textContent = '⚠ ' + label;
                    input.parentElement.appendChild(err);
                } else {
                    input.classList.remove('is-invalid');
                }
            });

            appointmentCustomFields
                .filter(field => field.visible && field.required)
                .forEach(field => {
                    const input = document.querySelector(`[name="custom_field[${field.id}]"]`);
                    if (!input) return;

                    input.parentElement.querySelector('.field-error')?.remove();

                    if (!input.value.trim()) {
                        hasFieldError = true;
                        input.classList.add('is-invalid');
                        const err = document.createElement('div');
                        err.className = 'field-error';
                        err.style.cssText = 'color: #dc3545; font-size: 12px; margin-top: 4px;';
                        err.textContent = '⚠ ' + field.label + ' is required.';
                        input.parentElement.appendChild(err);
                    } else {
                        input.classList.remove('is-invalid');
                    }
                });

            // Email format validation
            const emailInput = document.querySelector('[name="email"]');
            if (emailInput && emailInput.value.trim() && !validateEmail(emailInput.value)) {
                emailInput.parentElement.querySelector('.field-error')?.remove();
                emailInput.classList.add('is-invalid');
                const err = document.createElement('div');
                err.className = 'field-error';
                err.style.cssText = 'color: #dc3545; font-size: 12px; margin-top: 4px;';
                err.textContent = '⚠ Please enter a valid email address.';
                emailInput.parentElement.appendChild(err);
                hasFieldError = true;
            }

            if (hasFieldError) {
                document.querySelector('.field-error')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
                return;
            }

            // --- Checkbox validation with inline error messages ---
            let hasCheckboxError = false;

            // Consent checkbox
            if (consentCheckbox && apptTermRequired('consent')) {
                const consentError = consentCheckbox.closest('.form-check');
                consentError.querySelector('.checkbox-error')?.remove();
                if (!consentCheckbox.checked) {
                    hasCheckboxError = true;
                    consentCheckbox.classList.add('is-invalid');
                    const err = document.createElement('div');
                    err.className = 'checkbox-error';
                    err.style.cssText = 'color: #dc3545; font-size: 12px; margin-top: 4px;';
                    err.textContent = '⚠ Please accept this to continue.';
                    consentError.appendChild(err);
                } else {
                    consentCheckbox.classList.remove('is-invalid');
                }
            }

            // Cancellation checkbox
            if (cancellationConsentCheckbox && apptTermRequired('cancellation_fee')) {
                const cancellationError = cancellationConsentCheckbox.closest('.form-check');
                cancellationError.querySelector('.checkbox-error')?.remove();
                if (!cancellationConsentCheckbox.checked) {
                    hasCheckboxError = true;
                    cancellationConsentCheckbox.classList.add('is-invalid');
                    const err = document.createElement('div');
                    err.className = 'checkbox-error';
                    err.style.cssText = 'color: #dc3545; font-size: 12px; margin-top: 4px;';
                    err.textContent = '⚠ Please accept the cancellation policy to continue.';
                    cancellationError.appendChild(err);
                } else {
                    cancellationConsentCheckbox.classList.remove('is-invalid');
                }
            }

            if (hasCheckboxError) {
                // Scroll to first checkbox error
                document.querySelector('.checkbox-error')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
                return;
            }

            const defaultContent = submitButton.textContent;

            function resetSubmitButton() {
                submitButton.removeAttribute('disabled');
                submitButton.textContent = defaultContent;
            }

            // Serialize form data and send AJAX request
            syncSelectedProducts();
            var formData = $('form').serialize();
            submitButton.setAttribute('disabled', 'disabled');
            submitButton.textContent = "Submitting...";

            $.ajax({
                url: '{{ route("book-appointment") }}',
                type: 'POST',
                data: formData,
                dataType: 'json',
                timeout: 60000,
                success: function (response) {
                    if (!response || !response.success) {
                        alert('Booking could not be completed. Please try again.');
                        resetSubmitButton();
                        return;
                    }

                    const bookingId = response.booking_id;
                    const bookingDate = response.booking_date;
                    const bookingTime = response.booking_time;

                    if (parseFloat(response.price) !== 0) {
                        window.location.href = "{{ route('redirectToClover') }}?appointment_id=" + parseInt(response.id);
                        return;
                    }

                    successAppointment(bookingId, bookingDate, bookingTime);
                },
                error: function (xhr) {
                    if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors && xhr.responseJSON.errors.product_ids) {
                        setProductSelectError(xhr.responseJSON.errors.product_ids[0]);
                        document.getElementById('productSelectError')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
                        resetSubmitButton();
                        return;
                    }

                    let message = "An error occurred. Please try again.";
                    if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                        const errors = Object.values(xhr.responseJSON.errors).flat();
                        message = errors.join("\n");
                    } else if (xhr.responseJSON && xhr.responseJSON.message) {
                        message = xhr.responseJSON.message;
                    } else if (xhr.statusText === 'timeout') {
                        message = 'Request timed out. Please try again.';
                    }
                    alert(message);
                    resetSubmitButton();
                }
            });
        });
    });

    document.addEventListener("DOMContentLoaded", function () {
        var externalModal = document.getElementById('externalModal');

        externalModal.addEventListener('show.bs.modal', function (event) {

        });

        externalModal.addEventListener('hidden.bs.modal', function () {
            document.getElementById('modalContent').innerHTML = ""; // Clear content when closed
        });
    });
</script>

<!-- Google Places Autocomplete -->
<script>
function initGooglePlaces() {
    const addressInput = document.getElementById('address-input');
    if (!addressInput) return;

    const autocomplete = new google.maps.places.Autocomplete(addressInput, {
        types: ['address'],
        componentRestrictions: { country: 'ca' }
    });

    autocomplete.addListener('place_changed', function () {
        const place = autocomplete.getPlace();
        if (!place.address_components) return;

        let streetNumber = '', route = '', city = '', province = '', postalCode = '';

        place.address_components.forEach(component => {
            const types = component.types;
            if (types.includes('street_number'))    streetNumber = component.long_name;
            if (types.includes('route'))            route = component.long_name;
            if (types.includes('locality'))         city = component.long_name;
            if (types.includes('administrative_area_level_1')) province = component.long_name;
            if (types.includes('postal_code'))      postalCode = component.long_name;
        });

        // Fill fields without triggering focus on address input
        addressInput.value = (streetNumber + ' ' + route).trim();

        const cityInput     = document.getElementById('city-input');
        const provinceInput = document.getElementById('province-input');
        const postalInput   = document.getElementById('postal-input');

        cityInput.value     = city;
        provinceInput.value = province;
        postalInput.value   = postalCode;

        // Blur address input immediately to prevent dropdown re-appearing
        addressInput.blur();

        // Remove pac-container from DOM
        document.querySelectorAll('.pac-container').forEach(el => el.remove());

        // Trigger checkFields by dispatching events on other fields only (not address)
        [cityInput, provinceInput, postalInput].forEach(el => {
            el.dispatchEvent(new Event('input', { bubbles: true }));
        });

        // Trigger on all form fields for validation
        setTimeout(() => {
            document.querySelectorAll('#info-form input, #info-form select, #info-form textarea').forEach(el => {
                el.dispatchEvent(new Event('input', { bubbles: true }));
            });
        }, 100);
    });
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google.maps_api_key') }}&libraries=places&callback=initGooglePlaces" async defer></script>

@endsection