@extends('layouts.admin')
@section('content')

<main>
    <div class="col-9 main-dash-left">


<section class="detail-show-all  roof-box-main">

    <div class="col-md-6 inner-main-input">
        <label>Booking Request ID</label>
        <select class="form-select" id="bookingID" >
            <option selected disabled>Select</option>
            @foreach($bookingRequestIds as $manufacturer)
                <option value="{{ $manufacturer }}">{{ $manufacturer }}</option>
            @endforeach
        </select>
    </div>
    
        <div class="select-product">
            <div class="heading-select-prod">
                <h3>{{ __('messages.select_the_product') }}</h3>
                <p>{{ __('messages.select_product_description') }}</p>
            </div>
            
            <div class="cards-select-product">
                <div class="row">
                    @foreach($categories as $category)
                 
                        @foreach($category->products as $product)
                            <div class="col-md-2">
                                <div class="first-check-box">
                                    <input class="form-check-input product-radio" 
                                           type="radio" 
                                           name="product" 
                                           id="product-{{ $product->id }}" 
                                           value="{{ $product->id }}"
                                           {{ $loop->first && $loop->parent->first ? 'checked' : '' }}>
                                    <label class="form-check-label" for="product-{{ $product->id }}">
                                        <div class="inner-img-select-heading">
                                            <div class="inner-image-roof">
                                                <figure>
                                                   
                                                    @if($product->images->where('type', 'home')->first())
                                                        <img src="{{ asset('storage/' . $product->images->where('type', 'home')->first()->image_path) }}" alt="{{ $product->name }}">
                                                    @else
                                                        <img src="{{ asset('frontend/images/placeholder.png') }}" alt="No image">
                                                    @endif
                                                </figure>
                                            </div>
                                            <h4 class="productName">{{ $product->name }}</h4>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        @endforeach
                    @endforeach
                </div>
            </div>
        </div>



        {{-- <div id="product-details-container">
            @include('frontend.pages.product.partials.product_details', [
                'product' => $firstProduct,
                'priceRecord' => $priceRecord,
                'colors' => $colors,
                'sizes' => $sizes,
                'variations' => $variations,
                'roofTypes' => $roofTypes,
                'dailyPrices' => $dailyPrices,
                'roofRackPrices' => $roofRackPrices,
                'manufacturers' => $manufacturers
            ])
        </div> --}}

        <div id="product-details-container">
            @include('admin.booking.partials.dynamic_product', [
                'product' => $firstProduct,
                'productType' => $productType,
                'manufacturers' => $manufacturers,
               
                'colors' => $colors,
                'sizes' => $sizes,
                'variations' => $variations,
                'roofTypes' => $roofTypes,
                'dailyPrices' => $dailyPrices,
                'roofRackPrices' => $roofRackPrices,
                'nonworkingDays' => $nonworkingDays,
                'holidays' => $holidays,
            
                
                
            ])
        </div>
   
</section>
<input type="hidden" id="selectedRecommendation">
</div>
</main>

<div id="modal-container">
    @include('admin.booking.partials.modals', ['dailyPrices' => $dailyPrices])
</div>


<script>
function parseDMY(dateStr) {
    const [day, month, year] = dateStr.split('.');
    const fullYear = parseInt(year) < 100 ? 2000 + parseInt(year) : parseInt(year);
    return new Date(fullYear, parseInt(month) - 1, parseInt(day));
}
var baseUrl = "{{ rtrim(config('app.url'), '/') }}";
$(document).ready(function() {

    let bookingData = {};


    $('#bookingID').change(function() {
        
        let bookingID = $(this).val();

        $.get(`${baseUrl}/bookingRequest/`, { bookingID }, function(data) {
            if (data && data.product_name) {

                bookingData = data;
                $('.product-radio').each(function() {
                    let labelText = $(this).siblings('label').find('.productName').text().trim();

                    if (labelText === data.product_name) {
                        $(this).prop('checked', true).trigger('change');

                        const waitForOption = (selector, value) => {
                        return new Promise(resolve => {
                            const interval = setInterval(() => {
                                const $option = $(`${selector} option`).filter(function () {
                                    return $(this).val().trim() === value.trim();
                                });
                                if ($option.length) {
                                    $(selector).val($option.val()).trigger('change');
                                    clearInterval(interval);
                                    resolve();
                                }
                            }, 100);
                        });
                    };

                        const waitForDatepicker = (selector, dateStr) => {
                            return new Promise(resolve => {
                                const date = $.datepicker.parseDate("yy-mm-dd", dateStr);
                                const interval = setInterval(() => {
                                    if ($(selector).hasClass("hasDatepicker")) {
                                        $(selector)
                                            .datepicker("setDate", date)
                                            .trigger("change")
                                            .datepicker("option", "minDate", 0);

                                        $(selector).datepicker("option", "onSelect")
                                            .call($(selector), $.datepicker.formatDate("dd.mm.yy", date), $(selector)[0]);

                                        clearInterval(interval);
                                        resolve();
                                    }
                                }, 100);
                            });
                        };

                        const waitForRoofType = (roofType) => {
                            return new Promise(resolve => {
                                $('#roof-types-container').show();
                                $('#roof-types-container .roof-name-detail').hide();
                                const slug = roofType.toLowerCase().replace(/\s+/g, '-');
                                const $roof = $(`#roof-type-${slug}`);
                                if ($roof.length) {
                                    const interval = setInterval(() => {
                                        $roof.show().trigger('click');
                                        if ($roof.hasClass('active') || $roof.is(':visible')) {
                                            clearInterval(interval);
                                            resolve();
                                        }
                                    }, 100);
                                } else {
                                    resolve();
                                }
                            });
                        };

                        const waitForColor = (colorName) => {
                            return new Promise(resolve => {
                                const interval = setInterval(() => {
                                    const $option = $(`#color-select option`).filter(function() {
                                        return $(this).data("color-name")?.toLowerCase() === colorName.toLowerCase();
                                    });
                                    if ($option.length) {
                                        $("#color-select").val($option.val()).trigger("change");
                                        clearInterval(interval);
                                        resolve();
                                    }
                                }, 100);
                            });
                        };
                        const waitForAddress = (selector, addressText) => {
                            return new Promise(resolve => {
                                const interval = setInterval(() => {
                                    const $option = $(`${selector} option`).filter(function () {
                                        return $(this).text().trim().toLowerCase() === addressText.trim().toLowerCase();
                                    });
                                    if ($option.length) {
                                        $(selector).val($option.val()).trigger('change');
                                        clearInterval(interval);
                                        resolve();
                                    }
                                }, 100);
                            });
                        };

                        const waitForSizeOrVariation = (name) => {
                            return new Promise(resolve => {
                                const interval = setInterval(() => {
                                    const $card = $(".inner-size-card").filter(function () {
                                        return $(this).data("size-name")?.toLowerCase() === name.toLowerCase();
                                    });
                                    if ($card.length) {
                                        $card.trigger("click");

                                        if ($card.hasClass("selected")) {
                                            if($card.hasClass("available") || $card.hasClass('unavailable')){
                                                clearInterval(interval);
                                                resolve();
                                            }
                                        }
                                    }
                                }, 100);
                            });
                        };

                        const waitForClick = (selector, text) => {
                            return new Promise(resolve => {
                                const interval = setInterval(() => {
                                    $(selector).val(text);
                                    clearInterval(interval);
                                    resolve();
                                }, 100);
                            });
                        }
                        

                        (async () => {
                            if (data.manufacturer) {
                                await waitForOption("#manufacturer", data.manufacturer);
                            }
                            if (data.pickup_location) {
                                await waitForAddress('#vendor_select',data.pickup_location);
                            }
                            if (data.car_model) {
                                await waitForOption("#model", data.car_model);
                            }
                            if (data.car_year) {
                                await waitForOption("#year", data.car_year);
                            }
                            if (data.trailer_hitch) {
                                await waitForOption("#trailer_hitch", data.trailer_hitch.toLowerCase());
                            }
                            if (data.roof_type) {
                                await waitForRoofType(data.roof_type);
                            }
                            if (data.rental_from) {
                                await waitForDatepicker("#rental_from", data.rental_from);
                            }
                            if (data.rental_to) {
                                await waitForDatepicker("#rental_to", data.rental_to);
                            }
                            if(data.color_name){
                                await waitForColor(data.color_name);
                            }
                            if (bookingData.size_or_variation) {
                                await waitForSizeOrVariation(bookingData.size_or_variation);
                            }
                            if (bookingData.customer_name) {
                                let parts = bookingData.customer_name.trim().split(" ");
                                let firstName = parts.slice(0, -1).join(" ");  // everything except last word
                                let lastName  = parts.slice(-1)[0];            // last word only

                                if (firstName) {
                                    await waitForClick('#firstname', firstName);
                                }
                                if (lastName) {
                                    await waitForClick('#surname', lastName);
                                }
                            }
                            if (bookingData.customer_email) {
                                await waitForClick('#firstemail',bookingData.customer_email);
                            }
                            
                        })();
                    }
                });
            }
    });
    });



    let product_id = $('.product-radio').val();
    $('.product-radio').change(function() {
        const productId = $(this).val();
        product_id = productId;
        
        $.ajax({
            url: "{{ route('admin.product.get-details') }}",
            method: 'GET',
            data: { product_id: productId },
            success: function(response) {
                
                window.currentSizes = response.sizes;
                window.currentVariations = response.variations;
                window.dailyPrices = response.dailyPrices;
                window.roofRackPrices = response.roofRackPrices;
                window.holidays = response.holidays;
                window.nonworkingDays = response.nonworkingDays;

               
               $('#modal-container').html(response.modalHtml); 
               $('#product-details-container').html(response.view);
               initializeProductJS(response.productType , product_id);


            },
            error: function(xhr) {
                console.error('Error loading product details');
            }
        });
    });
    initStandardProduct(product_id);
});

function initializeProductJS(productType, product_id) {
    switch(productType) {
        case 'roof_rack':
            initRoofRack(product_id);
            break;
        case 'carrier_foot':
            initCarrierFoot(product_id);
            break;
        default:
            initStandardProduct(product_id);
    }
}

function saveFormDataAndRedirect(redirectUrl) {

    let rentalFromStr = $('#rental_from').val();
    let rentalToStr = $('#rental_to').val();
    let selectedRecommendation = $('#selectedRecommendation').val();

    let rentalFrom = parseDMY(rentalFromStr);
    let rentalTo = parseDMY(rentalToStr);

    let timeDiff = rentalTo.getTime() - rentalFrom.getTime();
    let days = Math.ceil(timeDiff / (1000 * 60 * 60 * 24)) + 1;

    let formData = {
        product_id: $('#product_id').val(),
        product_name: $('#product_name').val(),
        manufacturer: $('#manufacturer').val(),
        car_year: $('#year').val(),
        model: $('#model').val(),
        trailer_hitch: $('#trailer_hitch').val(),
        roof_type: selectedRecommendation?.rooftype_eng || '',
        carrier_length: selectedRecommendation?.carrier_length || '',
        foot_sku: selectedRecommendation?.foot_sku || '',
        footkit_sku: selectedRecommendation?.footkit_sku || '',
        bundle_name: selectedRecommendation?.bundle_name || '',
        color_id: $('#color-select').val(),
        color_name: $('#color-select option:selected').data('color-name'),
        size_id: $('.inner-size-card.selected').data('size-id') || $('.inner-size-card.selected').data('variation-id'),
        size_name: $('.inner-size-card.selected').data('size-name'),
        booking_item_id: $('.inner-size-card.selected').data('booking-item-ids') || '',
        booking_item_ids: $('#booking_item_ids').val() || '',
        rental_from: $('#rental_from').val(),
        rental_to: $('#rental_to').val(),
        days: days,
        calculated_rent: $('.inner-number-days span:last').text().replace(' €', '').replace(',', '.'),
        is_carrier_included: $('#roof_rack_checkbox').is(':checked') ? 1 : 0,
        is_insured: $('#insurance_checkbox').is(':checked') ? 1 : 0,
        vendor_id : $('#vendor_select').val() == 'admin' ? '' : $('#vendor_select').val()
    };
    formData._token = $('meta[name="csrf-token"]').attr('content');


    $.post(`${baseUrl}/store-rental-form`, formData, function() {
        window.location.href = redirectUrl; 
    });
}


function saveFormDataAndRedirectRoofRack(redirectUrl) {

let rentalFromStr = $('#rental_from').val();
let rentalToStr = $('#rental_to').val();
let selectedRecommendation = $('#selectedRecommendation').val();

let rentalFrom = parseDMY(rentalFromStr);
let rentalTo = parseDMY(rentalToStr);

let timeDiff = rentalTo.getTime() - rentalFrom.getTime();
let days = Math.ceil(timeDiff / (1000 * 60 * 60 * 24)) + 1;
let formData = {
    product_id: $('#product_id').val(),
    product_name: $('#product_name').val(),
    manufacturer: $('#manufacturer').val(),
    car_year: $('#year').val(),
    model: $('#model').val(),
    trailer_hitch: $('#trailer_hitch').val(),
    roof_type: selectedRecommendation?.rooftype_eng || '',
    carrier_length: selectedRecommendation?.carrier_length || '',
    foot_sku: selectedRecommendation?.foot_sku || '',
    footkit_sku: selectedRecommendation?.footkit_sku || '',
    booking_item_ids: $('#booking_item_ids').val() || '',
    bundle_name: selectedRecommendation?.bundle_name || '',
    rental_from: $('#rental_from').val(),
    rental_to: $('#rental_to').val(),
    days: days,
    calculated_rent: $('.inner-number-days span:last').text().replace(' €', '').replace(',', '.'),
    is_insured: $('#insurance_checkbox').is(':checked') ? 1 : 0,
    vendor_id : $('#vendor_select').val() == 'admin' ? '' : $('#vendor_select').val()
};
formData._token = $('meta[name="csrf-token"]').attr('content');


$.post(`${baseUrl}/store-rental-form`, formData, function() {
    window.location.href = redirectUrl; 
});
}


function saveFormDataAndRedirectCarrier(redirectUrl) {

let rentalFromStr = $('#rental_from').val();
let rentalToStr = $('#rental_to').val();
let selectedRecommendation = $('#selectedRecommendation').val();

let rentalFrom = parseDMY(rentalFromStr);
let rentalTo = parseDMY(rentalToStr);

let timeDiff = rentalTo.getTime() - rentalFrom.getTime();
let days = Math.ceil(timeDiff / (1000 * 60 * 60 * 24)) + 1;
let formData = {
    product_id: $('#product_id').val(),
    product_name: $('#product_name').val(),
    manufacturer: $('#manufacturer').val(),
    car_year: $('#year').val(),
    model: $('#model').val(),
    trailer_hitch: $('#trailer_hitch').val(),
    roof_type: selectedRecommendation?.rooftype_eng || '',
    carrier_length: selectedRecommendation?.carrier_length || '',
    foot_sku: selectedRecommendation?.foot_sku || '',
    footkit_sku: selectedRecommendation?.footkit_sku || '',
    bundle_name: selectedRecommendation?.bundle_name || '',
    color_id: $('#color-select').val(),
    color_name: $('#color-select option:selected').data('color-name'),
    size_id: $('.inner-size-card.selected').data('size-id') || $('.inner-size-card.selected').data('variation-id'),
    size_name: $('.inner-size-card.selected').data('size-name'),
    booking_item_id: $('.inner-size-card.selected').data('booking-item-ids') || '',
    booking_item_ids: $('#booking_item_ids').val() || '',
    rental_from: $('#rental_from').val(),
    rental_to: $('#rental_to').val(),
    days: days,
    calculated_rent: $('.inner-number-days span:last').text().replace(' €', '').replace(',', '.'),
    is_carrier_included: $('#roof_rack_checkbox').is(':checked') ? 1 : 0,
    is_insured: $('#insurance_checkbox').is(':checked') ? 1 : 0,
    vendor_id : $('#vendor_select').val() == 'admin' ? '' : $('#vendor_select').val()
};
formData._token = $('meta[name="csrf-token"]').attr('content');


$.post(`${baseUrl}/store-rental-form`, formData, function() {
    window.location.href = redirectUrl; 
});
}




function initStandardProduct(product_id) {

    let selectedRecommendation = null;
    let carrier_length = null;

    let foot_sku = null;

    let footkit_sku = null;

    let notAvailable = 1;

    $(document).on('click', '.clickable-roof', function () {
        $('.clickable-roof').removeClass('selected');
        $(this).addClass('selected');

        const slug = $(this).data('rooftype-slug');
        selectedRecommendation = window.currentRecommendationMap[slug];
        $('#selectedRecommendation').val(selectedRecommendation);
        carrier_length = selectedRecommendation.carrier_length;

        foot_sku = selectedRecommendation.foot_sku;

        footkit_sku = selectedRecommendation.footkit_sku;

        $('#roof-types-container .invalid-feedback').remove();
    });



    

    $('#manufacturer').change(function() {
        $('#model').prop('disabled', true).html('<option>Loading...</option>');
        $('#year').prop('disabled', true).html('<option>Select</option>');
        
        let manufacturer = $(this).val();

        $.get(`${baseUrl}/car/models`, {manufacturer}, function(data) {
            $('#model').prop('disabled', false).html('<option selected disabled>Select</option>');
            data.forEach(model => {
                $('#model').append(`<option value="${model}">${model}</option>`);
            });
        });
    });

    $('#model').change(function() {
        $('#year').prop('disabled', true).html('<option>Loading...</option>');
        
        let manufacturer = $('#manufacturer').val();
        let model = $(this).val();

        $.get(`${baseUrl}/car/years`, {manufacturer, model}, function(data) {
            $('#year').prop('disabled', false).html('<option selected disabled>Select</option>');
            data.forEach(year => {
                $('#year').append(`<option value="${year}">${year}</option>`);
            });
        });
    });


    function checkAvailability(colorId,colorName) {
    const fromDate = $('#rental_from').val();
    const toDate = $('#rental_to').val();
    const vendor_id = $('#vendor_select').val();
    
    const params = {
        color_id: colorId,
        from_date: fromDate,
        to_date: toDate,
        color_name : colorName,
        vendor_id: vendor_id,

        carrier_length : carrier_length,

        foot_sku : foot_sku,

        footkit_sku : footkit_sku
    };

    if(!fromDate || !toDate ||  !colorId || !vendor_id){
        return; 
    }
    
    $.get(`${baseUrl}/product/${product_id}/availability`, params, function(availability) {
        $('.inner-size-card').each(function() {
            const $card = $(this);
            const sizeName = $card.data('size-name');
            const sizeId = $card.data('size-id') || $card.data('variation-id');
            // const isAvailable = availability[sizeId] > 0;
            const sizeData = availability[sizeId] || { available_units: 0, booking_item_ids: [] };
            const isAvailable = availability[sizeId].available_units > 0;
            if (isAvailable && sizeData.booking_item_ids.length > 0) {
                $card.attr(
                    'data-booking-item-ids',
                    sizeData.booking_item_ids && sizeData.booking_item_ids.length > 0
                        ? sizeData.booking_item_ids[0] // only the first ID
                        : ''
                );
            } else {
                $card.removeAttr('data-booking-item-ids');
            }
            
            
            $card.toggleClass('available', isAvailable)
                 .toggleClass('unavailable', !isAvailable);
                 
            const $badge = $card.find('.badge');
            $badge.removeClass('bg-secondary bg-success bg-danger')
                  .addClass(isAvailable ? 'bg-success' : 'bg-danger')
                  .text(isAvailable ? '' : 'Unavailable');
        });
        if($('#roof_rack_checkbox').is(':checked')){

            const bookingItemIds = {};



            if (availability.roof_rack.carrier && availability.roof_rack.carrier.booking_item_ids.length > 0) {

                bookingItemIds.carrier = availability.roof_rack.carrier.booking_item_ids[0];

            }



            if (availability.roof_rack.foot && availability.roof_rack.foot.booking_item_ids.length > 0) {

                bookingItemIds.foot = availability.roof_rack.foot.booking_item_ids[0];

            }



            if (availability.roof_rack.footkit && availability.roof_rack.footkit.booking_item_ids.length > 0) {

                bookingItemIds.footkit = availability.roof_rack.footkit.booking_item_ids[0];

            }



            window.bookingItemIds = JSON.stringify(bookingItemIds);





            const isCarrierAvailable = availability.roof_rack.carrier && availability.roof_rack.carrier.available_units > 0;

            const isFootAvailable = availability.roof_rack.foot && availability.roof_rack.foot.available_units > 0;

            const isFootkitAvailable = availability.roof_rack.footkit && availability.roof_rack.footkit.available_units > 0;



            console.log(availability.roof_rack)

            notAvailable = isCarrierAvailable && isFootAvailable && isFootkitAvailable;



            $('#booking_item_ids').val(window.bookingItemIds);

            if (!notAvailable) {

                let errorMessage = '';

                const unavailableComponents = [];

                
                
                if (!isCarrierAvailable) unavailableComponents.push('traverse');

                if (!isFootAvailable) unavailableComponents.push('Fuß');

                if (!isFootkitAvailable) unavailableComponents.push('Fußkit');

                

                errorMessage += unavailableComponents.join(', ');

                

                $('#errorMessage').html(`

                    

                    <div class="size-unavailable-message text-danger mt-2">

                        The ${errorMessage} you have selected is currently unavailable, but you can send a request and we will let you know when it is available.

                    </div>

                `);

            } else {

                $('#errorMessage').empty();

            }

            }
        
        if (window.currentRecommendation) {
            highlightRecommendedSizes(window.currentRecommendation);
        }
    });
    }

    $('#vendor_select').on('change',function(){
        const colorId = $('#color-select').val();
        const colorName = $('#color-select option:selected').data('color-name');
        const fromDate = $('#rental_from').val();
        const toDate = $('#rental_to').val();
        if (colorId && colorId !== 'Select' && fromDate && toDate) {
            checkAvailability(colorId,colorName);
        }
    })

    $('#rental_from, #rental_to').on('change', function() {

        const colorId = $('#color-select').val();
        const colorName = $('#color-select option:selected').data('color-name');
        console.log(colorId)
        if (colorId && colorId !== 'Select') {
            checkAvailability(colorId,colorName);
        }
    });

    $('#color-select').on('change', function() {
        const colorId = $(this).val();
        const colorName = $('#color-select option:selected').data('color-name');
        console.log(colorName)
        const fromDate = $('#rental_from').val();
        const toDate = $('#rental_to').val();
        $('#errorMessage').empty();
        if (colorId && colorId !== 'Select' && fromDate && toDate) {
            checkAvailability(colorId,colorName);
        }
    });






    function highlightRecommendedSizes(recommendation) {
            $('.inner-size-card').removeClass('recommended-size');
            $('.recommended').addClass('d-none')
        recommendation.forEach(item => {
            const $card = $(`.inner-size-card[data-size-name="${item.recommended_roofbox_size}"]`);
            $card.addClass('recommended-size');
            console.log(item)
            $card.find('.recommended').removeClass('d-none');
                $card.find('.recommended').text('EMPFOHLEN');
        });
    }
    var railing_type = $('#railing_type').val();
        $('#year, #trailer_hitch').change(function() {
            let manufacturer = $('#manufacturer').val();
            let year = $('#year').val();
            let model = $('#model').val();
            let trailer_hitch = $('#trailer_hitch').val();


            const productName = $('#trailer_hitch').data('product-name');
            const selectedValue = $('#trailer_hitch').val();
            const hitchRequired = !(productName === 'Roof Box' || productName === 'Roof Bike Carrier'  || productName ==='Dachbox' || productName ==='Dachfahrradträger');
            if (selectedValue === 'no' && hitchRequired) {
                $('#trailer_hitch').val('');

                const modal = new bootstrap.Modal(document.getElementById('notBookableModal'));
                modal.show();
                return ;
            }


            if (manufacturer && year && model && trailer_hitch) {
                $.get(`${baseUrl}/car/recommendation`, {manufacturer, year, model, trailer_hitch}, function(data) {
                    window.currentRecommendation = data;
                    window.currentRecommendationMap = {};

                    if (data.length === 0) {
                        $('#result').html('<p>No recommendations found.</p>');
                        return;
                    }

                    $('.roof-name-detail').hide();
                    $('#roof-types-container').show();

                    

                    data.forEach((item, index) => {
                        const roofTypeSlug = item.rooftype_eng.toLowerCase().replace(/ /g, '-');

                    
                        if(railing_type){
                            $(`#roof-type-${roofTypeSlug}`).show();

                            window.currentRecommendationMap[roofTypeSlug] = item;
                            $(`#roof-type-${roofTypeSlug}`)
                                .addClass('clickable-roof')
                                .attr('data-rooftype-slug', roofTypeSlug);
                        }
                    });

                   
                    highlightRecommendedSizes(data);
                });
            }
        });




    $(document).on('click', '.inner-size-card', function () {

        const colorId = $('#color-select').val();
        const colorName = $('#color-select').find('option:selected').data('color-name');
        if (!colorName) {
            $('#errorMessage').html(`
                <div class="text-danger mt-2">
                    Please select a color first.
                </div>
            `);
            return;
        }


        const $card = $(this);
        const isAvailable = $card.hasClass('available');
        const isUnavailable = $card.hasClass('unavailable');

        $('.inner-size-card').removeClass('selected');
        $('#errorMessage').empty();

        $card.addClass('selected');

        
        if (isUnavailable || !notAvailable) {
            const message = `
                <div class="size-unavailable-message text-danger mt-2">
                    The product you have selected is currently unavailable, but you can send a request and we will let you know when it is available.
                </div>
            `;
            $('#errorMessage').html(message);
        }
    });

    $('.roof-name-detail').hide();
    $('#roof-types-container').hide();

    const dailyPrices = window.dailyPrices || @json($dailyPrices);
    const roofRackPrices = window.roofRackPrices || @json($roofRackPrices); 
    console.log(roofRackPrices, dailyPrices);
    const insuranceFlatFee = 25.00;

    function calculateRent() {


        const from = parseDMY($('#rental_from').val());
        const to = parseDMY($('#rental_to').val());

        if (isNaN(from) || isNaN(to) || to < from) return;

        const days = Math.ceil((to - from) / (1000 * 60 * 60 * 24)) + 1;

        let totalRent = 0;

        for (let i = 0; i < days && i < dailyPrices.length; i++) {
            totalRent += dailyPrices[i];

            if ($('#roof_rack_checkbox').is(':checked') && i < roofRackPrices.length) {
                console.log('totalRent', totalRent)
                totalRent += roofRackPrices[i];
            }
        }

        if ($('#insurance_checkbox').is(':checked')) {
            totalRent += insuranceFlatFee;
            $('#withinsurance').removeClass('d-none');
            $('#withoutinsurance').addClass('d-none');
        }else{
            $('#withoutinsurance').removeClass('d-none');
            $('#withinsurance').addClass('d-none');
        }

        $('.inner-number-days span:first').text(days);
        $('.inner-number-days span:last').text(totalRent.toFixed(2).replace('.', ',') + ' €');
    }

    $('#rental_from, #rental_to').on('change', calculateRent);



    $('#insurance_checkbox').on('change', function () {
        $('#insurance_selected').val(this.checked ? 1 : 0);
    });

    $('#roof_rack_checkbox').on('change', function () {
        $('#roof_rack_selected').val(this.checked ? 1 : 0);
    });



    $(document).ready(function() {
        $('#roof_rack_checkbox').change(function() {
            if (!this.checked) {
                const modal = new bootstrap.Modal(document.getElementById('notCarrier'));
                modal.show();
            }else{
                calculateRent();
            }
        });

        $('#insurance_checkbox').change(function() {
            if (!this.checked) {
                const modal = new bootstrap.Modal(document.getElementById('notInsurance'));
                modal.show();
            }else{
                calculateRent();
            }
        });

        $('#rentCarrierBtn').click(function() {
            $('#roof_rack_checkbox').prop('checked', true).trigger('change');
            $('#notCarrier').modal('hide');
        });

        $('#bringOwnCarrierBtn').click(function() {
            $('#roof_rack_checkbox').prop('checked', false);
            $('#notCarrier').modal('hide');
            calculateRent(); 
        });

        $('#wantInsuranceBtn').click(function() {
            $('#insurance_checkbox').prop('checked', true).trigger('change');
            $('#notInsurance').modal('hide');
        });

        $('#noInsuranceBtn').click(function() {
            $('#insurance_checkbox').prop('checked', false);
            $('#notInsurance').modal('hide');
            calculateRent(); 
        });
    function validateForm() {
        let isValid = true;

        $('.is-invalid').removeClass('is-invalid');
        $('.invalid-feedback').remove();

        if (!$('#manufacturer').val()) {
            showError($('#manufacturer'), 'Please enter Manufacturer ');
            isValid = false;
        }
        
        if (!$('#year').val()) {
            showError($('#year'), 'Please enter Year ');
            isValid = false;
        }
        
        if (!$('#model').val()) {
            showError($('#model'), 'Please enter Model ');
            isValid = false;
        }
        
        const productName = $('#trailer_hitch').data('product-name');
        const hitchRequired = !(productName === 'Roof Box' || productName === 'Roof Bike Carrier'  || productName ==='Dachbox' || productName ==='Dachfahrradträger');
        if (hitchRequired && !$('#trailer_hitch').val()) {
            showError($('#trailer_hitch'), 'Trailer hitch selection is required for this product');
            isValid = false;
        }
        
        // Color validation
        if (!$('#color-select').val()) {
            showError($('#color-select'), 'Please enter Color ');
            isValid = false;
        }
        
        // Size validation
        if (!$('.inner-size-card.selected').length) {
            $('#size-container').after('<div class="invalid-feedback d-block">Please enter Size </div>');
            isValid = false;
        }
        
        // Rental dates validation
        if (!$('#rental_from').val()) {
            showError($('#rental_from'), 'Please enter Start date ');
            isValid = false;
        }
        
        if (!$('#rental_to').val()) {
            showError($('#rental_to'), 'Please enter End date ');
            isValid = false;
        } 
        
        if ($('#rental_from').val() && $('#rental_to').val()) {

            // const from = new Date($('#rental_from').val());
            // const to = new Date($('#rental_to').val());

            const from = parseDMY($('#rental_from').val());
            const to = parseDMY($('#rental_to').val());
            if (to < from) {
                showError($('#rental_to'), 'End date must be after start date');
                isValid = false;
            }
        }
        if($('#errorMessage').text()){
            isValid = false;
            }
        
        return isValid;
    }

    function showError(element, message) {
        element.addClass('is-invalid');
        if (element.is('select')) {
            element.parent().append(`<div class="invalid-feedback">${message}</div>`);
        } else {
            element.after(`<div class="invalid-feedback">${message}</div>`);
        }
    }

    $('#manufacturer, #year, #model, #trailer_hitch, #color-select, #rental_from, #rental_to').on('input change', function() {
        $(this).removeClass('is-invalid');
        $(this).next('.invalid-feedback').remove();
        $(this).parent().find('.invalid-feedback').remove();
    });
    $('.inner-size-card').on('click', function() {
        $('.invalid-feedback.d-block').remove();
    });

    $('#bookingForm').on('submit', function(e) {
        e.preventDefault(); // Prevent default form submission

            if(validateForm()){
                e.preventDefault();
                $('#guestOptionsModal').modal('show');

            }
       
    });

    $('#continueAsGuest').click(function() {
        const name = $('#firstname').val().trim();
        const surname = $('#surname').val().trim();
        const email = $('#firstemail').val().trim();
     

      let isValid = true;

      $('#name, #surname, #email').removeClass('is-invalid');

      if (name === '') {
        $('#firstname').addClass('is-invalid');
        isValid = false;
      }

      
      if (surname === '') {
        $('#surname').addClass('is-invalid');
        isValid = false;
      }

      

      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (email === '' || !emailPattern.test(email)) {
        $('#firstemail').addClass('is-invalid');
        isValid = false;
      }

      if (isValid) {
      
        // $('#guestModal').modal('hide');

      }
        // $('#guestModal').modal('hide');
        let rentalFromStr = $('#rental_from').val();
            let rentalToStr = $('#rental_to').val();

            let rentalFrom = parseDMY(rentalFromStr);
            let rentalTo = parseDMY(rentalToStr);

            let timeDiff = rentalTo.getTime() - rentalFrom.getTime();
            let days = Math.ceil(timeDiff / (1000 * 60 * 60 * 24)) + 1;
        let formData = {
                is_guest: 1,
                name: $('#firstname').val(),
                surname: $('#surname').val(),
                email: $('#firstemail').val(),
                
                product_id: $('#product_id').val(),
                product_name: $('#product_name').val(),
                manufacturer: $('#manufacturer').val(),
                car_year: $('#year').val(),
                model: $('#model').val(),
                trailer_hitch: $('#trailer_hitch').val(),
                roof_type: selectedRecommendation?.rooftype_eng || '',
                carrier_length: selectedRecommendation?.carrier_length || '',
                foot_sku: selectedRecommendation?.foot_sku || '',
                footkit_sku: selectedRecommendation?.footkit_sku || '',
                bundle_name: selectedRecommendation?.bundle_name || '',
                color_id: $('#color-select').val(),
                color_name: $('#color-select option:selected').data('color-name'),
                size_id: $('.inner-size-card.selected').data('size-id') || $('.inner-size-card.selected').data('variation-id'),
                size_name: $('.inner-size-card.selected').data('size-name'),
                booking_item_id: $('.inner-size-card.selected').data('booking-item-ids') || '',
                booking_item_ids: $('#booking_item_ids').val() || '',
                rental_from: $('#rental_from').val(),
                rental_to: $('#rental_to').val(),
                days: days,
                calculated_rent: $('.inner-number-days span:last').text().replace(' €', '').replace(',', '.'),
                is_carrier_included: $('#roof_rack_checkbox').is(':checked') ? 1 : 0,
                is_insured: $('#insurance_checkbox').is(':checked') ? 1 : 0,
                vendor_id : $('#vendor_select').val() == 'admin' ? '' : $('#vendor_select').val(),
                booking_request_id : $('#bookingID').val()
            };
        $.ajax({
            url: "{{route('admin.cart.add')}}",
            method: 'POST',
            data: formData,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if(response.status ==  false){
                    $('#guestError')
                .removeClass('d-none')
                .text(response.message || 'Something went wrong. Please try again.');
                }else{
                    $('#guestModal').modal('hide');
                    $('#guestError').addClass('d-none');
                    if (response.redirect) {
                        window.location.href = response.redirect;
                    }
                }
             
                // window.location.href = '{{ route("cart.guest_time-selection") }}';
            }
        });
    });
});


$(function () {
            const holidays = window.holidays || @json($holidays);
            const nonworkingDays = window.nonworkingDays || @json($nonworkingDays); 
            console.log(nonworkingDays)
            const dayMap = {
                sunday: 0,
                monday: 1,
                tuesday: 2,
                wednesday: 3,
                thursday: 4,
                friday: 5,
                saturday: 6,
            };

        const closedDays = nonworkingDays.map(day => dayMap[day]);

            function disableWeekendsAndHolidays(date) {
                const day = date.getDay();
                const formattedDate = $.datepicker.formatDate('yy-mm-dd', date);

                const isWeekend = closedDays.includes(day);
                const isHoliday = holidays.includes(formattedDate);

                if (isWeekend || isHoliday) {
                    return [false, ''];
                }
                return [true, ''];
            }

            $("#rental_from").datepicker({
                dateFormat: 'dd.mm.yy',
                minDate: 0,
                firstDay: 1,
                beforeShowDay: disableWeekendsAndHolidays,
                onSelect: function (selectedDate) {
                    const startDate = $(this).datepicker('getDate');
                    // Set minDate of end date to startDate
                    $("#rental_to").datepicker("option", "minDate", startDate);

                    var colorId = $('#color-select').val();
                    var colorName = $('#color-select option:selected').data('color-name');
                    if (colorId && colorId !== 'Select') {
                        checkAvailability(colorId, colorName);
                    }
                    calculateRent();
                }
            });

            $("#rental_to").datepicker({
                dateFormat: 'dd.mm.yy',
                minDate: 0,
                firstDay: 1,
                beforeShowDay: disableWeekendsAndHolidays,
                onSelect: function () {
                    var colorId = $('#color-select').val();
                    var colorName = $('#color-select option:selected').data('color-name');
                    if (colorId && colorId !== 'Select') {
                        checkAvailability(colorId, colorName);
                    }
                    calculateRent();
                }
            });
        });
}

function initRoofRack(product_id){
    let carrier_length = null;

    let foot_sku = null;

    let footkit_sku = null;

    let notAvailable = 1;
    $('#manufacturer').change(function() {
        $('#model').prop('disabled', true).html('<option>Loading...</option>');
        $('#year').prop('disabled', true).html('<option>Select</option>');
        
        let manufacturer = $(this).val();

        $.get(`${baseUrl}/car/models`, {manufacturer}, function(data) {
            $('#model').prop('disabled', false).html('<option selected disabled>Select</option>');
            data.forEach(model => {
                $('#model').append(`<option value="${model}">${model}</option>`);
            });
        });
    });

    $('#model').change(function() {
        $('#year').prop('disabled', true).html('<option>Loading...</option>');
        
        let manufacturer = $('#manufacturer').val();
        let model = $(this).val();

        $.get(`${baseUrl}/car/years`, {manufacturer, model}, function(data) {
            $('#year').prop('disabled', false).html('<option selected disabled>Select</option>');
            data.forEach(year => {
                $('#year').append(`<option value="${year}">${year}</option>`);
            });
        });
    });



    function checkAvailabilityRoofRack() {
        const fromDate = $('#rental_from').val();
        const toDate = $('#rental_to').val();
        const vendor_id = $('#vendor_select').val();

    
        
        const params = {
            from_date: fromDate,
            to_date: toDate,
            vendor_id : vendor_id,
            carrier_length : carrier_length,
            foot_sku : foot_sku,
            footkit_sku : footkit_sku

        };

        if(!fromDate || !toDate || !vendor_id){
            return; 
        }
        
        $.get(`${baseUrl}/product/${product_id}/roofRack/availability`, params, function(availability) {
            $('.inner-size-card').each(function() {
                const $card = $(this);
                const sizeName = $card.data('size-name');
                const sizeId = $card.data('size-id') || $card.data('variation-id');
                const isAvailable = availability[sizeId] > 0;
                
                $card.toggleClass('available', isAvailable)
                    .toggleClass('unavailable', !isAvailable);
                    
                const $badge = $card.find('.badge');
                $badge.removeClass('bg-secondary bg-success bg-danger')
                    .addClass(isAvailable ? 'bg-success' : 'bg-danger')
                    .text(isAvailable ? '' : 'Unavailable');
            });
            const bookingItemIds = {};

        

if (availability.carrier && availability.carrier.booking_item_ids.length > 0) {

    bookingItemIds.carrier = availability.carrier.booking_item_ids[0];

}



if (availability.foot && availability.foot.booking_item_ids.length > 0) {

    bookingItemIds.foot = availability.foot.booking_item_ids[0];

}



if (availability.footkit && availability.footkit.booking_item_ids.length > 0) {

    bookingItemIds.footkit = availability.footkit.booking_item_ids[0];

}



// Store the dictionary as JSON string

window.bookingItemIds = JSON.stringify(bookingItemIds);



// Check availability

const isCarrierAvailable = availability.carrier && availability.carrier.available_units > 0;

const isFootAvailable = availability.foot && availability.foot.available_units > 0;

const isFootkitAvailable = availability.footkit && availability.footkit.available_units > 0;

const isAvailable = isCarrierAvailable && isFootAvailable && isFootkitAvailable;



$('#booking_item_ids').val(window.bookingItemIds);

if (!isAvailable) {

    let errorMessage = '';

    const unavailableComponents = [];

    

    if (!isCarrierAvailable) unavailableComponents.push('traverse');

    if (!isFootAvailable) unavailableComponents.push('foot');

    if (!isFootkitAvailable) unavailableComponents.push('footkit');

    

    errorMessage += unavailableComponents.join(', ');

    

    $('#errorMessage').html(`

        

        <div class="size-unavailable-message text-danger mt-2">

            The ${errorMessage} you have selected is currently unavailable, but you can send a request and we will let you know when it is available.

        </div>

    `);

} else {

    $('#errorMessage').empty();

}
            
            if (window.currentRecommendation) {
                highlightRecommendedSizesRoofRack(window.currentRecommendation);
            }
        });
    }

    $('#vendor_select').on('change',function(){
        const fromDate = $('#rental_from').val();
        const toDate = $('#rental_to').val();
        if ( fromDate && toDate) {
            checkAvailabilityRoofRack();
        }
    })


    $('#rental_from, #rental_to').on('change', function() {

        checkAvailabilityRoofRack();
    
    });



    // function highlightRecommendedSizes(recommendation) {
    //     $('.inner-size-card').removeClass('recommended-size');
        
    //     recommendation.forEach(item => {
    //         $(`.inner-size-card[data-size-name="${item.recommended_roofbox_size}"]`)
    //             .addClass('recommended-size');
    //     });
    // }



    function highlightRecommendedSizesRoofRack(recommendation) {
            $('.inner-size-card').removeClass('recommended-size');
            $('.recommended').addClass('d-none')
        recommendation.forEach(item => {
            const $card = $(`.inner-size-card[data-size-name="${item.recommended_roofbox_size}"]`);
            $card.addClass('recommended-size');
            console.log(item)
            $card.find('.recommended').removeClass('d-none');
                $card.find('.recommended').text('EMPFOHLEN');
        });
    }

    var railing_type = $('#railing_type').val();
    console.log('railing_type',railing_type)
    $('#year, #trailer_hitch').change(function() {
        let manufacturer = $('#manufacturer').val();
        let year = $('#year').val();
        let model = $('#model').val();
        let trailer_hitch = $('#trailer_hitch').val();


        const productName = $('#trailer_hitch').data('product-name');
        const selectedValue = $('#trailer_hitch').val();
        const hitchRequired = !(productName === 'Roof Box' || productName === 'Roof Bike Carrier' || productName === 'Roof Rack'  || productName ==='Dachbox' || productName ==='Dachfahrradträger' || productName ==='Dachträger');
        if (selectedValue === 'no' && hitchRequired) {
            $('#trailer_hitch').val('');

            const modal = new bootstrap.Modal(document.getElementById('notBookableModal'));
            modal.show();
            return ;
        }


        if (manufacturer && year && model && trailer_hitch) {
            $.get(`${baseUrl}/car/recommendation`, {manufacturer, year, model, trailer_hitch}, function(data) {
                window.currentRecommendation = data;
                window.currentRecommendationMap = {};

                if (data.length === 0) {
                    $('#result').html('<p>No recommendations found.</p>');
                    return;
                }

                $('.roof-name-detail').hide();
                $('#roof-types-container').show();

                

                data.forEach((item, index) => {
                    const roofTypeSlug = item.rooftype_eng.toLowerCase().replace(/ /g, '-');

                console.log('roofTypeSlug',roofTypeSlug)
                    if(railing_type){
                        $(`#roof-type-${roofTypeSlug}`).show();
        
                        window.currentRecommendationMap[roofTypeSlug] = item;
                        $(`#roof-type-${roofTypeSlug}`)
                            .addClass('clickable-roof')
                            .attr('data-rooftype-slug', roofTypeSlug);
                    }
                });

            
                highlightRecommendedSizesRoofRack(data);
            });
        }
    });

    let selectedRecommendation = null;


    $(document).on('click', '.clickable-roof', function () {
        $('.clickable-roof').removeClass('selected');
        $(this).addClass('selected');

        const slug = $(this).data('rooftype-slug');
        selectedRecommendation = window.currentRecommendationMap[slug];
        $('#selectedRecommendation').val(selectedRecommendation);


        console.log(selectedRecommendation);

        $('#roof-types-container .invalid-feedback').remove();

        if (selectedRecommendation) {
            const html = `
                <div class="roof-info-card" style="padding: 15px; border: 1px solid #ccc; border-radius: 8px; background: #f9f9f9;">
                    <h4>Bundle Name : ${selectedRecommendation.bundle_name}</h4>
                    <ul style="list-style: none; padding-left: 0;">
                        <li><strong>Carrier Length:</strong> ${selectedRecommendation.carrier_length || 'N/A'}</li>
                        <li><strong>Foot SKU:</strong> ${selectedRecommendation.foot_sku || 'N/A'}</li>
                        <li><strong>Foot Kit SKU:</strong> ${selectedRecommendation.footkit_sku || 'N/A'}</li>
                        <li><strong>Recommended Roofbox Size:</strong> ${selectedRecommendation.recommended_roofbox_size || 'N/A'}</li>
                        <li><strong>Roof Type:</strong> ${selectedRecommendation.rooftype_eng || 'N/A'}</li>
                    </ul>
                </div>
            `;
            carrier_length = selectedRecommendation.carrier_length;
            foot_sku = selectedRecommendation.foot_sku;
            footkit_sku = selectedRecommendation.footkit_sku;
            $('#roof-details-box').html(html).fadeIn();
        } else {
            $('#roof-details-box').hide();
        }
    });



    $(document).on('click', '.inner-size-card', function () {

        const colorId = $('#color-select').val();
        const colorName = $('#color-select').find('option:selected').data('color-name');
        if (!colorName) {
            $('#errorMessage').html(`
                <div class="text-danger mt-2">
                    Please select a color first.
                </div>
            `);
            return;
        }


        const $card = $(this);
        const isAvailable = $card.hasClass('available');
        const isUnavailable = $card.hasClass('unavailable');

        $('.inner-size-card').removeClass('selected');
        $('#errorMessage').empty();

        $card.addClass('selected');

        if (isUnavailable || !notAvailable) {
            const message = `
                <div class="size-unavailable-message text-danger mt-2">
                    The product you have selected is currently unavailable, but you can send a request and we will let you know when it is available.
                </div>
            `;
            $('#errorMessage').html(message);
        }

        const sizeId = $(this).data('size-id');
        const variationId = $(this).data('variation-id');
        const sizeName = $(this).data('size-name');

        $.get(`${baseUrl}/product/{{ $product->id }}/size-details`, {
            size_id: sizeId,
            variation_id: variationId
        }, function(data) {
            if (data) {
                if (data.length && data.width && data.height) {
                    $('#dimensionsText').hide();
                    $('#dimensionsList').show();
                    $('#dimensionLength').text(data.length);
                    $('#dimensionWidth').text(data.width);
                    $('#dimensionHeight').text(data.height);
                } else {
                    $('#dimensionsText').show().text('Dimensions not available for this size');
                    $('#dimensionsList').hide();
                }

                if (data.weight) {
                    $('#weightText').hide();
                    $('#weightList').show();
                    $('#weightValue').text(data.weight);
                } else {
                    $('#weightText').show().text('Weight not available for this size');
                    $('#weightList').hide();
                }

                if (data.volume) {
                    $('#volumeText').hide();
                    $('#volumeList').show();
                    $('#volumeValue').text(data.volume);
                } else {
                    $('#volumeText').show().text('Volume not available for this size');
                    $('#volumeList').hide();
                }

                if (data.max_load) {
                    $('#maxLoadText').hide();
                    $('#maxLoadList').show();
                    $('#maxLoadValue').text(data.max_load);
                } else {
                    $('#maxLoadText').show().text('Max load not available for this size');
                    $('#maxLoadList').hide();
                }
            } else {
                $('#dimensionsText').show().text('Product details not available for this size');
                $('#dimensionsList').hide();
                $('#weightText').show().text('Product details not available for this size');
                $('#weightList').hide();
                $('#volumeText').show().text('Product details not available for this size');
                $('#volumeList').hide();
                $('#maxLoadText').show().text('Product details not available for this size');
                $('#maxLoadList').hide();
            }
        }).fail(function() {
            $('#dimensionsText').show().text('Error loading product details');
            $('#weightText').show().text('Error loading product details');
            $('#volumeText').show().text('Error loading product details');
            $('#maxLoadText').show().text('Error loading product details');
        });

    });

    $('.roof-name-detail').hide();
    $('#roof-types-container').hide();
        const dailyPrices = window.dailyPrices ;
        const roofRackPrices = window.roofRackPrices; 
        const insuranceFlatFee = 25.00;
    

        function calculateRentRoofRack() {
            // const from = new Date($('#rental_from').val());
            // const to = new Date($('#rental_to').val());


            const from = parseDMY($('#rental_from').val());
            const to = parseDMY($('#rental_to').val());

            if (isNaN(from) || isNaN(to) || to < from) return;

            const days = Math.ceil((to - from) / (1000 * 60 * 60 * 24)) + 1;

            let totalRent = 0;

            for (let i = 0; i < days && i < dailyPrices.length; i++) {
                totalRent += dailyPrices[i];

                if ($('#roof_rack_checkbox').is(':checked') && i < roofRackPrices.length) {
                    console.log('totalRent', totalRent)
                    totalRent += roofRackPrices[i];
                }
            }

            if ($('#insurance_checkbox').is(':checked')) {
                totalRent += insuranceFlatFee;
                $('#withinsurance').removeClass('d-none');
                $('#withoutinsurance').addClass('d-none');
            }else{
                $('#withoutinsurance').removeClass('d-none');
                $('#withinsurance').addClass('d-none');
            }

            $('.inner-number-days span:first').text(days);
            $('.inner-number-days span:last').text(totalRent.toFixed(2).replace('.', ',') + ' €');
        }

        $('#rental_from, #rental_to').on('change', calculateRentRoofRack);



        $('#insurance_checkbox').on('change', function () {
            $('#insurance_selected').val(this.checked ? 1 : 0);
        });

        $('#roof_rack_checkbox').on('change', function () {
            $('#roof_rack_selected').val(this.checked ? 1 : 0);
        });



        $(document).ready(function() {

            $('#roof_rack_checkbox').change(function() {
                if (!this.checked) {
                    const modal = new bootstrap.Modal(document.getElementById('notCarrier'));
                    modal.show();
                }else{
                    calculateRentRoofRack();
                }
            });

            $('#insurance_checkbox').change(function() {
                if (!this.checked) {
                    const modal = new bootstrap.Modal(document.getElementById('notInsurance'));
                    modal.show();
                }else{
                    calculateRentRoofRack();
                }
            });

            $('#rentCarrierBtn').click(function() {
                $('#roof_rack_checkbox').prop('checked', true).trigger('change');
                $('#notCarrier').modal('hide');
            });

            $('#bringOwnCarrierBtn').click(function() {
                $('#roof_rack_checkbox').prop('checked', false);
                $('#notCarrier').modal('hide');
                calculateRentRoofRack(); 
            });

            $('#wantInsuranceBtn').click(function() {
                $('#insurance_checkbox').prop('checked', true).trigger('change');
                $('#notInsurance').modal('hide');
            });

            $('#noInsuranceBtn').click(function() {
                $('#insurance_checkbox').prop('checked', false);
                $('#notInsurance').modal('hide');
                calculateRentRoofRack(); 
            });
        function validateForm() {
            let isValid = true;

            // Reset all error states
            $('.is-invalid').removeClass('is-invalid');
            $('.invalid-feedback').remove();

            // Validate required fields
            if (!$('#manufacturer').val()) {
                showError($('#manufacturer'), 'Please enter Manufacturer');
                isValid = false;
            }
            
            if (!$('#year').val()) {
                showError($('#year'), 'Please enter Year ');
                isValid = false;
            }
            
            if (!$('#model').val()) {
                showError($('#model'), 'Please enter Model ');
                isValid = false;
            }
            
            // Trailer hitch validation
            const productName = $('#trailer_hitch').data('product-name');
            const hitchRequired = !(productName === 'Roof Box' || productName === 'Roof Bike Carrier' || productName === 'Roof Rack'  || productName ==='Dachbox' || productName ==='Dachfahrradträger' || productName =='Dachträger');
            if (hitchRequired && !$('#trailer_hitch').val()) {
                showError($('#trailer_hitch'), 'Trailer hitch selection is required for this product');
                isValid = false;
            }
            
        
            
        
            
            // Rental dates validation
            if (!$('#rental_from').val()) {
                showError($('#rental_from'), 'Please enter Start date ');
                isValid = false;
            }
            
            if (!$('#rental_to').val()) {
                showError($('#rental_to'), 'Please enter End date ');
                isValid = false;
            } 
            
            if ($('#rental_from').val() && $('#rental_to').val()) {
                

                const from = parseDMY($('#rental_from').val());
                const to = parseDMY($('#rental_to').val());
                if (to < from) {
                    showError($('#rental_to'), 'End date must be after start date');
                    isValid = false;
                }
            }

            if($('#errorMessage').text()){
                isValid = false;
            }
            
            return isValid;
        }

        function showError(element, message) {
            element.addClass('is-invalid');
            if (element.is('select')) {
                element.parent().append(`<div class="invalid-feedback">${message}</div>`);
            } else {
                element.after(`<div class="invalid-feedback">${message}</div>`);
            }
        }

        $('#manufacturer, #year, #model, #trailer_hitch, #rental_from, #rental_to').on('input change', function() {
            $(this).removeClass('is-invalid');
            $(this).next('.invalid-feedback').remove();
            $(this).parent().find('.invalid-feedback').remove();
        });
        $('.inner-size-card').on('click', function() {
            $('.invalid-feedback.d-block').remove();
        });

        $('#bookingForm').on('submit', function(e) {
            e.preventDefault(); // Prevent default form submission
          
                if(validateForm()){
                    e.preventDefault();
                    $('#guestOptionsModal').modal('show');

                }
            
        });

        $('#continueAsGuest').click(function() {
            const name = $('#firstname').val().trim();
            const surname = $('#surname').val().trim();
            const email = $('#firstemail').val().trim();
            

        let isValid = true;

        $('#firstname, #surname, #firstemail,#number').removeClass('is-invalid');

        if (name === '') {
            $('#firstname').addClass('is-invalid');
            isValid = false;
        }

        
        if (surname === '') {
            $('#surname').addClass('is-invalid');
            isValid = false;
        }

       

        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (email === '' || !emailPattern.test(email)) {
            $('#firstemail').addClass('is-invalid');
            isValid = false;
        }

        if (isValid) {
        
            // $('#guestModal').modal('hide');

        }
            // $('#guestModal').modal('hide');
            let rentalFromStr = $('#rental_from').val();
            let rentalToStr = $('#rental_to').val();

            let rentalFrom = parseDMY(rentalFromStr);
            let rentalTo = parseDMY(rentalToStr);

            let timeDiff = rentalTo.getTime() - rentalFrom.getTime();
            let days = Math.ceil(timeDiff / (1000 * 60 * 60 * 24)) + 1;
            let formData = {
                    is_guest: 1,
                    name: $('#firstname').val(),
                    surname: $('#surname').val(),
                    email: $('#firstemail').val(),
                   
                    product_id: $('#product_id').val(),
                    product_name: $('#product_name').val(),
                    manufacturer: $('#manufacturer').val(),
                    car_year: $('#year').val(),
                    model: $('#model').val(),
                    trailer_hitch: $('#trailer_hitch').val(),
                    roof_type: selectedRecommendation?.rooftype_eng || '',
                    carrier_length: selectedRecommendation?.carrier_length || '',
                    foot_sku: selectedRecommendation?.foot_sku || '',
                    footkit_sku: selectedRecommendation?.footkit_sku || '',
                    bundle_name: selectedRecommendation?.bundle_name || '',   
                    booking_item_ids: $('#booking_item_ids').val() || '',             
                    rental_from: $('#rental_from').val(),
                    rental_to: $('#rental_to').val(),
                    days: days,
                    calculated_rent: $('.inner-number-days span:last').text().replace(' €', '').replace(',', '.'),
                    is_insured: $('#insurance_checkbox').is(':checked') ? 1 : 0,
                    vendor_id : $('#vendor_select').val() == 'admin' ? '' : $('#vendor_select').val(),
                    booking_request_id : $('#bookingID').val()

                };
            $.ajax({
                url: "{{route('admin.cart.add')}}",
                method: 'POST',
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if(response.status ==  false){
                        $('#guestError')
                    .removeClass('d-none')
                    .text(response.message || 'Something went wrong. Please try again.');
                    }else{
                        $('#guestModal').modal('hide');
                        $('#guestError').addClass('d-none');
                        if (response.redirect) {
                            window.location.href = response.redirect;
                        }
                    }
                
                }
            });
        });
    });

    $(function () {
        const holidays = window.holidays;
        const nonworkingDays = window.nonworkingDays; 
        const dayMap = {
            sunday: 0,
            monday: 1,
            tuesday: 2,
            wednesday: 3,
            thursday: 4,
            friday: 5,
            saturday: 6,
        };

    const closedDays = nonworkingDays.map(day => dayMap[day]);
        function disableWeekendsAndHolidays(date) {
            const day = date.getDay();
            const formattedDate = $.datepicker.formatDate('yy-mm-dd', date);

            const isWeekend = closedDays.includes(day);
            const isHoliday = holidays.includes(formattedDate);

            if (isWeekend || isHoliday) {
                return [false, ''];
            }
            return [true, ''];
        }

        $("#rental_from").datepicker({
            dateFormat: 'dd.mm.yy',
            minDate: 0,
            firstDay: 1,
            beforeShowDay: disableWeekendsAndHolidays,
            onSelect: function (selectedDate) {
                const startDate = $(this).datepicker('getDate');
                // Set minDate of end date to startDate
                $("#rental_to").datepicker("option", "minDate", startDate);


             
                checkAvailabilityRoofRack();
               
                    calculateRentRoofRack();
            }
        });

        $("#rental_to").datepicker({
            dateFormat: 'dd.mm.yy',
            minDate: 0,
            firstDay: 1,
            beforeShowDay: disableWeekendsAndHolidays,
            onSelect: function () {
        
                checkAvailabilityRoofRack( );
               
                    calculateRentRoofRack();
            }
        });
    });

}


function initCarrierFoot(product_id){
    let notAvailable = 1;
    $('#manufacturer').change(function() {
    $('#model').prop('disabled', true).html('<option>Loading...</option>');
    $('#year').prop('disabled', true).html('<option>Select</option>');
    
    let manufacturer = $(this).val();

    $.get(`${baseUrl}/car/models`, {manufacturer}, function(data) {
        $('#model').prop('disabled', false).html('<option selected disabled>Select</option>');
        data.forEach(model => {
            $('#model').append(`<option value="${model}">${model}</option>`);
            });
        });
    });

    $('#model').change(function() {
        $('#year').prop('disabled', true).html('<option>Loading...</option>');
        
        let manufacturer = $('#manufacturer').val();
        let model = $(this).val();

        $.get(`${baseUrl}/car/years`, {manufacturer, model}, function(data) {
            $('#year').prop('disabled', false).html('<option selected disabled>Select</option>');
            data.forEach(year => {
                $('#year').append(`<option value="${year}">${year}</option>`);
            });
        });
    });



    function checkAvailability(colorId,colorName) {
        const fromDate = $('#rental_from').val();
        const toDate = $('#rental_to').val();
        const vendor_id = $('#vendor_select').val();

    
        
        const params = {
            color_id: colorId,
            from_date: fromDate,
            to_date: toDate,
            color_name : colorName,
            vendor_id : vendor_id,
        };

    if(!fromDate || !toDate ||  !colorId || !vendor_id){
        return; 
    }
    
    $.get(`${baseUrl}/product/${product_id}/availability`, params, function(availability) {
        $('.inner-size-card').each(function() {
            const $card = $(this);
            const sizeName = $card.data('size-name');
            const sizeId = $card.data('size-id') || $card.data('variation-id');
            // const isAvailable = availability[sizeId] > 0;
            const sizeData = availability[sizeId] || { available_units: 0, booking_item_ids: [] };
            const isAvailable = availability[sizeId].available_units > 0;
            if (isAvailable && sizeData.booking_item_ids.length > 0) {
                $card.attr(
                    'data-booking-item-ids',
                    sizeData.booking_item_ids && sizeData.booking_item_ids.length > 0
                        ? sizeData.booking_item_ids[0] // only the first ID
                        : ''
                );
            } else {
                $card.removeAttr('data-booking-item-ids');
            }
            
            $card.toggleClass('available', isAvailable)
                 .toggleClass('unavailable', !isAvailable);
                 
            const $badge = $card.find('.badge');
            $badge.removeClass('bg-secondary bg-success bg-danger')
                  .addClass(isAvailable ? 'bg-success' : 'bg-danger')
                  .text(isAvailable ? '' : 'Unavailable');
        });
        if($('#roof_rack_checkbox').is(':checked')){

const bookingItemIds = {};



if (availability.roof_rack.carrier && availability.roof_rack.carrier.booking_item_ids.length > 0) {

    bookingItemIds.carrier = availability.roof_rack.carrier.booking_item_ids[0];

}



if (availability.roof_rack.foot && availability.roof_rack.foot.booking_item_ids.length > 0) {

    bookingItemIds.foot = availability.roof_rack.foot.booking_item_ids[0];

}



if (availability.roof_rack.footkit && availability.roof_rack.footkit.booking_item_ids.length > 0) {

    bookingItemIds.footkit = availability.roof_rack.footkit.booking_item_ids[0];

}



window.bookingItemIds = JSON.stringify(bookingItemIds);





const isCarrierAvailable = availability.roof_rack.carrier && availability.roof_rack.carrier.available_units > 0;

const isFootAvailable = availability.roof_rack.foot && availability.roof_rack.foot.available_units > 0;

const isFootkitAvailable = availability.roof_rack.footkit && availability.roof_rack.footkit.available_units > 0;



console.log(availability.roof_rack)

notAvailable = isCarrierAvailable && isFootAvailable && isFootkitAvailable;



$('#booking_item_ids').val(window.bookingItemIds);

if (!notAvailable) {

    let errorMessage = '';

    const unavailableComponents = [];

    

    if (!isCarrierAvailable) unavailableComponents.push('carrier');

    if (!isFootAvailable) unavailableComponents.push('foot');

    if (!isFootkitAvailable) unavailableComponents.push('footkit');

    

    errorMessage += unavailableComponents.join(', ');

    

    $('#errorMessage').html(`

        

        <div class="size-unavailable-message text-danger mt-2">

            The ${errorMessage} you have selected is currently unavailable, but you can send a request and we will let you know when it is available.

        </div>

    `);

} else {

    $('#errorMessage').empty();

}

}
        
        if (window.currentRecommendation) {
            highlightRecommendedSizes(window.currentRecommendation);
        }
        });
    }

    $('#vendor_select').on('change',function(){
        const colorId = $('#color-select').val();
        const colorName = $('#color-select option:selected').data('color-name');
        const fromDate = $('#rental_from').val();
        const toDate = $('#rental_to').val();
        if (colorId && colorId !== 'Select' && fromDate && toDate) {
            checkAvailability(colorId,colorName);
        }
    })


    $('#rental_from, #rental_to').on('change', function() {

        const colorId = $('#color-select').val();
        const colorName = $('#color-select option:selected').data('color-name');
        console.log(colorId)
        if (colorId && colorId !== 'Select') {
            checkAvailability(colorId,colorName);
        }
    });

    // Update color select change handler
    $('#color-select').on('change', function() {
        const colorId = $(this).val();
        const colorName = $('#color-select option:selected').data('color-name');
        console.log(colorName)
        const fromDate = $('#rental_from').val();
        const toDate = $('#rental_to').val();
        $('#errorMessage').empty();
        if (colorId && colorId !== 'Select' && fromDate && toDate) {
            checkAvailability(colorId,colorName);
        }
    });





    function highlightRecommendedSizes(recommendation) {
            $('.inner-size-card').removeClass('recommended-size');
            $('.recommended').addClass('d-none')
        recommendation.forEach(item => {
            const $card = $(`.inner-size-card[data-size-name="${item.recommended_roofbox_size}"]`);
            $card.addClass('recommended-size');
            console.log(item)
            $card.find('.recommended').removeClass('d-none');
                $card.find('.recommended').text('EMPFOHLEN');
        });
    }

    var railing_type = $('#railing_type').val();
    console.log('railing_type',railing_type)
    $('#year, #trailer_hitch').change(function() {
        let manufacturer = $('#manufacturer').val();
        let year = $('#year').val();
        let model = $('#model').val();
        let trailer_hitch = $('#trailer_hitch').val();


        const productName = $('#trailer_hitch').data('product-name');
        const selectedValue = $('#trailer_hitch').val();
        const hitchRequired = !(productName === 'Roof Box' || productName === 'Roof Bike Carrier' || productName ==='Dachbox' || productName ==='Dachfahrradträger');
        if (selectedValue === 'no' && hitchRequired) {
            $('#trailer_hitch').val('');

            const modal = new bootstrap.Modal(document.getElementById('notBookableModal'));
            modal.show();
            return ;
    }


    if (manufacturer && year && model && trailer_hitch) {
            $.get(`${baseUrl}/car/recommendation`, {manufacturer, year, model, trailer_hitch}, function(data) {
                window.currentRecommendation = data;
                window.currentRecommendationMap = {};

                if (data.length === 0) {
                    $('#result').html('<p>No recommendations found.</p>');
                    return;
                }

                $('.roof-name-detail').hide();
                $('#roof-types-container').show();

                

                data.forEach((item, index) => {
                    const roofTypeSlug = item.rooftype_eng.toLowerCase().replace(/ /g, '-');

                console.log('roofTypeSlug',roofTypeSlug)
                    if(railing_type){
                        $(`#roof-type-${roofTypeSlug}`).show();
        
                        window.currentRecommendationMap[roofTypeSlug] = item;
                        $(`#roof-type-${roofTypeSlug}`)
                            .addClass('clickable-roof')
                            .attr('data-rooftype-slug', roofTypeSlug);
                    }
                });

                updateSizeCards(data);
            });
        }
    });

    let selectedRecommendation = null;

    $(document).on('click', '.clickable-roof', function () {
        $('.clickable-roof').removeClass('selected');
        $(this).addClass('selected');

        const slug = $(this).data('rooftype-slug');
        selectedRecommendation = window.currentRecommendationMap[slug];
        $('#selectedRecommendation').val(selectedRecommendation);

        if (window.currentRecommendation) {
            updateSizeCards(selectedRecommendation);
        }



        $('#roof-types-container .invalid-feedback').remove();
    });



    $(document).on('click', '.inner-size-card', function () {

        const colorId = $('#color-select').val();
        const colorName = $('#color-select').find('option:selected').data('color-name');
        if (!colorName) {
            $('#errorMessage').html(`
                <div class="text-danger mt-2">
                    Please select a color first.
                </div>
            `);
            return;
        }


        const $card = $(this);
        const isAvailable = $card.hasClass('available');
        const isUnavailable = $card.hasClass('unavailable');

        $('.inner-size-card').removeClass('selected');
        $('#errorMessage').empty();

        $card.addClass('selected');

        if (isUnavailable || !notAvailable) {
            const message = `
                <div class="size-unavailable-message text-danger mt-2">
                    The product you have selected is currently unavailable, but you can send a request and we will let you know when it is available.
                </div>
            `;
            $('#errorMessage').html(message);
        }

        const sizeId = $(this).data('size-id');
        const variationId = $(this).data('variation-id');
        const sizeName = $(this).data('size-name');

        $.get(`${baseUrl}/product/{{ $product->id }}/size-details`, {
            size_id: sizeId,
            variation_id: variationId
        }, function(data) {
            if (data) {
                if (data.length && data.width && data.height) {
                    $('#dimensionsText').hide();
                    $('#dimensionsList').show();
                    $('#dimensionLength').text(data.length);
                    $('#dimensionWidth').text(data.width);
                    $('#dimensionHeight').text(data.height);
                } else {
                    $('#dimensionsText').show().text('Dimensions not available for this size');
                    $('#dimensionsList').hide();
                }

                if (data.weight) {
                    $('#weightText').hide();
                    $('#weightList').show();
                    $('#weightValue').text(data.weight);
                } else {
                    $('#weightText').show().text('Weight not available for this size');
                    $('#weightList').hide();
                }

                if (data.volume) {
                    $('#volumeText').hide();
                    $('#volumeList').show();
                    $('#volumeValue').text(data.volume);
                } else {
                    $('#volumeText').show().text('Volume not available for this size');
                    $('#volumeList').hide();
                }

                if (data.max_load) {
                    $('#maxLoadText').hide();
                    $('#maxLoadList').show();
                    $('#maxLoadValue').text(data.max_load);
                } else {
                    $('#maxLoadText').show().text('Max load not available for this size');
                    $('#maxLoadList').hide();
                }
            } else {
                $('#dimensionsText').show().text('Product details not available for this size');
                $('#dimensionsList').hide();
                $('#weightText').show().text('Product details not available for this size');
                $('#weightList').hide();
                $('#volumeText').show().text('Product details not available for this size');
                $('#volumeList').hide();
                $('#maxLoadText').show().text('Product details not available for this size');
                $('#maxLoadList').hide();
            }
        }).fail(function() {
            $('#dimensionsText').show().text('Error loading product details');
            $('#weightText').show().text('Error loading product details');
            $('#volumeText').show().text('Error loading product details');
            $('#maxLoadText').show().text('Error loading product details');
        });

    });

    $('.roof-name-detail').hide();
    $('#roof-types-container').hide();
        const dailyPrices =window.dailyPrices;
        const roofRackPrices = window.roofRackPrices; 
        const insuranceFlatFee = 25.00;
    

        function calculateRent() {
            // const from = new Date($('#rental_from').val());
            // const to = new Date($('#rental_to').val());


            const from = parseDMY($('#rental_from').val());
            const to = parseDMY($('#rental_to').val());

            if (isNaN(from) || isNaN(to) || to < from) return;

            const days = Math.ceil((to - from) / (1000 * 60 * 60 * 24)) + 1;

            let totalRent = 0;

            for (let i = 0; i < days && i < dailyPrices.length; i++) {
                totalRent += dailyPrices[i];

                if ($('#roof_rack_checkbox').is(':checked') && i < roofRackPrices.length) {
                    console.log('totalRent', totalRent)
                    totalRent += roofRackPrices[i];
                }
            }

            if ($('#insurance_checkbox').is(':checked')) {
                totalRent += insuranceFlatFee;
                $('#withinsurance').removeClass('d-none');
                $('#withoutinsurance').addClass('d-none');
            }else{
                $('#withoutinsurance').removeClass('d-none');
                $('#withinsurance').addClass('d-none');
            }

            $('.inner-number-days span:first').text(days);
            $('.inner-number-days span:last').text(totalRent.toFixed(2).replace('.', ',') + ' €');
        }

        $('#rental_from, #rental_to').on('change', calculateRent);



        $('#insurance_checkbox').on('change', function () {
            $('#insurance_selected').val(this.checked ? 1 : 0);
        });

        $('#roof_rack_checkbox').on('change', function () {
            $('#roof_rack_selected').val(this.checked ? 1 : 0);
        });



        $(document).ready(function() {
            $('#size-container').html('<p class="vehicleFirst">Please select your vehicle details first.</p>');


            $('#roof_rack_checkbox').change(function() {
                if (!this.checked) {
                    const modal = new bootstrap.Modal(document.getElementById('notCarrier'));
                    modal.show();
                }else{
                    calculateRent();
                }
            });

            $('#insurance_checkbox').change(function() {
                if (!this.checked) {
                    const modal = new bootstrap.Modal(document.getElementById('notInsurance'));
                    modal.show();
                }else{
                    calculateRent();
                }
            });

            $('#rentCarrierBtn').click(function() {
                $('#roof_rack_checkbox').prop('checked', true).trigger('change');
                $('#notCarrier').modal('hide');
            });

            $('#bringOwnCarrierBtn').click(function() {
                $('#roof_rack_checkbox').prop('checked', false);
                $('#notCarrier').modal('hide');
                calculateRent(); 
            });

            $('#wantInsuranceBtn').click(function() {
                $('#insurance_checkbox').prop('checked', true).trigger('change');
                $('#notInsurance').modal('hide');
            });

            $('#noInsuranceBtn').click(function() {
                $('#insurance_checkbox').prop('checked', false);
                $('#notInsurance').modal('hide');
                calculateRent(); 
            });
        function validateForm() {
            let isValid = true;

            // Reset all error states
            $('.is-invalid').removeClass('is-invalid');
            $('.invalid-feedback').remove();

            // Validate required fields
            if (!$('#manufacturer').val()) {
                showError($('#manufacturer'), 'Please enter Manufacturer');
                isValid = false;
            }
            
            if (!$('#year').val()) {
                showError($('#year'), 'Please enter Year ');
                isValid = false;
            }
            
            if (!$('#model').val()) {
                showError($('#model'), 'Please enter Model ');
                isValid = false;
            }
            
            // Trailer hitch validation
            const productName = $('#trailer_hitch').data('product-name');
            const hitchRequired = !(productName === 'Roof Box' || productName === 'Roof Bike Carrier' || productName ==='Dachbox' || productName ==='Dachfahrradträger');
            if (hitchRequired && !$('#trailer_hitch').val()) {
                showError($('#trailer_hitch'), 'Trailer hitch selection is required for this product');
                isValid = false;
            }
            
            // Color validation
            if (!$('#color-select').val()) {
                showError($('#color-select'), 'Please enter Color ');
                isValid = false;
            }
            
            // Size validation
            if (!$('.inner-size-card.selected').length) {
                $('#size-container').after('<div class="invalid-feedback d-block">Please enter Size </div>');
                isValid = false;
            }
            
            // Rental dates validation
            if (!$('#rental_from').val()) {
                showError($('#rental_from'), 'Please enter Start date ');
                isValid = false;
            }
            
            if (!$('#rental_to').val()) {
                showError($('#rental_to'), 'Please enter End date ');
                isValid = false;
            } 
            
            if ($('#rental_from').val() && $('#rental_to').val()) {
                // const from = new Date($('#rental_from').val());
                // const to = new Date($('#rental_to').val());

                const from = parseDMY($('#rental_from').val());
                const to = parseDMY($('#rental_to').val());
                if (to < from) {
                    showError($('#rental_to'), 'End date must be after start date');
                    isValid = false;
                }
            }

            if($('#errorMessage').text()){
                isValid = false;
            }
            
            return isValid;
        }

        function showError(element, message) {
            element.addClass('is-invalid');
            if (element.is('select')) {
                element.parent().append(`<div class="invalid-feedback">${message}</div>`);
            } else {
                element.after(`<div class="invalid-feedback">${message}</div>`);
            }
        }

        $('#manufacturer, #year, #model, #trailer_hitch, #color-select, #rental_from, #rental_to').on('input change', function() {
            $(this).removeClass('is-invalid');
            $(this).next('.invalid-feedback').remove();
            $(this).parent().find('.invalid-feedback').remove();
        });
        $('.inner-size-card').on('click', function() {
            $('.invalid-feedback.d-block').remove();
        });

        $('#bookingForm').on('submit', function(e) {
            e.preventDefault(); // Prevent default form submission
           
                if(validateForm()){
                    e.preventDefault();
                    $('#guestOptionsModal').modal('show');

                }
           
        });

        $('#continueAsGuest').click(function() {
            const name = $('#firstname').val().trim();
            const surname = $('#surname').val().trim();
            const email = $('#firstemail').val().trim();
           

        let isValid = true;

        $('#firstname, #surname, #firstemail,#number').removeClass('is-invalid');

        if (name === '') {
            $('#firstname').addClass('is-invalid');
            isValid = false;
        }

        
        if (surname === '') {
            $('#surname').addClass('is-invalid');
            isValid = false;
        }

     

        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (email === '' || !emailPattern.test(email)) {
            $('#firstemail').addClass('is-invalid');
            isValid = false;
        }

        if (isValid) {
        
            // $('#guestModal').modal('hide');

        }
            // $('#guestModal').modal('hide');
            let rentalFromStr = $('#rental_from').val();
            let rentalToStr = $('#rental_to').val();

            let rentalFrom = parseDMY(rentalFromStr);
            let rentalTo = parseDMY(rentalToStr);

            let timeDiff = rentalTo.getTime() - rentalFrom.getTime();
            let days = Math.ceil(timeDiff / (1000 * 60 * 60 * 24)) + 1;
            let formData = {
                    is_guest: 1,
                    name: $('#firstname').val(),
                    surname: $('#surname').val(),
                    email: $('#firstemail').val(),
                    product_id: $('#product_id').val(),
                    product_name: $('#product_name').val(),
                    manufacturer: $('#manufacturer').val(),
                    car_year: $('#year').val(),
                    model: $('#model').val(),
                    trailer_hitch: $('#trailer_hitch').val(),
                    roof_type: selectedRecommendation?.rooftype_eng || '',
                    carrier_length: selectedRecommendation?.carrier_length || '',
                    foot_sku: selectedRecommendation?.foot_sku || '',
                    footkit_sku: selectedRecommendation?.footkit_sku || '',
                    bundle_name: selectedRecommendation?.bundle_name || '',
                    color_id: $('#color-select').val(),
                    color_name: $('#color-select option:selected').data('color-name'),
                    size_id: $('.inner-size-card.selected').data('size-id') || $('.inner-size-card.selected').data('variation-id'),
                    booking_item_id: $('.inner-size-card.selected').data('booking-item-ids') || '',
                    booking_item_ids: $('#booking_item_ids').val() || '',
                    size_name: $('.inner-size-card.selected').data('size-name'),
                    rental_from: $('#rental_from').val(),
                    rental_to: $('#rental_to').val(),
                    days: days,
                    calculated_rent: $('.inner-number-days span:last').text().replace(' €', '').replace(',', '.'),
                    is_carrier_included: $('#roof_rack_checkbox').is(':checked') ? 1 : 0,
                    is_insured: $('#insurance_checkbox').is(':checked') ? 1 : 0,
                    vendor_id : $('#vendor_select').val() == 'admin' ? '' : $('#vendor_select').val(),
                    booking_request_id : $('#bookingID').val()
                };
            $.ajax({
                url: "{{route('admin.cart.add')}}",
                method: 'POST',
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if(response.status ==  false){
                        $('#guestError')
                    .removeClass('d-none')
                    .text(response.message || 'Something went wrong. Please try again.');
                    }else{
                        $('#guestModal').modal('hide');
                        $('#guestError').addClass('d-none');
                        if (response.redirect) {
                            window.location.href = response.redirect;
                        }
                    }
                
                    // window.location.href = '{{ route("cart.guest_time-selection") }}';
                }
            });
        });
    });

    
      

        $(function () {
            const holidays = window.holidays;
            const nonworkingDays = window.nonworkingDays; 
            const dayMap = {
                sunday: 0,
                monday: 1,
                tuesday: 2,
                wednesday: 3,
                thursday: 4,
                friday: 5,
                saturday: 6,
            };

        const closedDays = nonworkingDays.map(day => dayMap[day]);
            function disableWeekendsAndHolidays(date) {
                const day = date.getDay();
                const formattedDate = $.datepicker.formatDate('yy-mm-dd', date);

                const isWeekend = closedDays.includes(day);
                const isHoliday = holidays.includes(formattedDate);

                if (isWeekend || isHoliday) {
                    return [false, ''];
                }
                return [true, ''];
            }

            $("#rental_from").datepicker({
                dateFormat: 'dd.mm.yy',
                minDate: 0,
                firstDay: 1,
                beforeShowDay: disableWeekendsAndHolidays,
                onSelect: function (selectedDate) {
                    const startDate = $(this).datepicker('getDate');
                    // Set minDate of end date to startDate
                    $("#rental_to").datepicker("option", "minDate", startDate);

                    var colorId = $('#color-select').val();
                    var colorName = $('#color-select option:selected').data('color-name');
                    if (colorId && colorId !== 'Select') {
                        checkAvailability(colorId, colorName);
                    }
                    calculateRent();
                }
            });

            $("#rental_to").datepicker({
                dateFormat: 'dd.mm.yy',
                minDate: 0,
                firstDay: 1,
                beforeShowDay: disableWeekendsAndHolidays,
                onSelect: function () {
                    var colorId = $('#color-select').val();
                    var colorName = $('#color-select option:selected').data('color-name');
                    if (colorId && colorId !== 'Select') {
                        checkAvailability(colorId, colorName);
                    }
                    calculateRent();
                }
            });
        });

        function updateSizeCards(recommendation) {
        const $sizeContainer = $('#size-container');
        $sizeContainer.empty(); // Clear existing cards
        
        recommendation = Array.isArray(recommendation) ? recommendation : [recommendation];
        if (!recommendation || recommendation.length === 0) {
            $sizeContainer.append('<p>No matching sizes available for this configuration.</p>');
            return;
        }

        const productName = $('#product_name').val();
        
        let matchingSizes = [];
        let matchingVariations = [];
        console.log(productName,recommendation)
        recommendation.forEach(item => {
            if (productName.includes('Carrier')) {
               
                matchingSizes = matchingSizes.concat(
                    window.currentSizes.filter(size => 
                    parseInt(size.name) * 10 === parseInt(item.carrier_length)
                        
                    )
                );
                matchingVariations = matchingVariations.concat(
                    window.currentVariations.filter(variation => 
                        variation.name === item.carrier_length
                    )
                );
            } 
            else if (productName.includes('Foot Kit') || productName.includes('Footkit')) {
                matchingVariations = matchingVariations.concat(
                    window.currentVariations.filter(variation => 
                        variation.name === item.footkit_sku
                    )
                );
            }
            else if (productName.includes('Foot')) {
                matchingVariations = matchingVariations.concat(
                    window.currentVariations.filter(variation => 
                        variation.name === item.foot_sku
                    )
                );
            }
        
            else {
                matchingSizes = matchingSizes.concat(
                    window.currentSizes.filter(size => 
                        size.name === item.recommended_roofbox_size
                    )
                );
                matchingVariations = matchingVariations.concat(
                    window.currentVariations.filter(variation => 
                        variation.name === item.recommended_roofbox_size
                    )
                );
            }
        });

        // Remove duplicates
        matchingSizes = [...new Map(matchingSizes.map(item => [item.id, item]))].map(([_, item]) => item);
        matchingVariations = [...new Map(matchingVariations.map(item => [item.id, item]))].map(([_, item]) => item);

        if (matchingSizes.length === 0 && matchingVariations.length === 0) {
            $sizeContainer.append('<p>No matching sizes available for this configuration.</p>');
            return;
        }

        // Generate HTML for matching sizes
        matchingSizes.forEach(size => {
            const text = getSizeText(size.name);
            $sizeContainer.append(`
                <div class="col-md-4">
                    <div class="inner-size-card" 
                        data-size-id="${size.id}"
                        data-size-name="${size.name}"
                        data-carrier-length="${size.carrier_length || ''}">
                        <div class="upper-img-sunroof">
                            @if($product->name == 'Roof Box' || $product->name == 'Dachbox')
                            <figure>
                                <img src="{{ asset('frontend/images/${size.name}.png') }}" alt="">
                            </figure>
                            @elseif($product->name == 'Rear Box' || $product->name == 'Heckbox')
                            <figure>
                                <img src="{{ asset('frontend/images/rear-box.png') }}" alt="">
                            </figure>
                            @endif
                        </div>
                        <div class="size-sunreef">
                            <p>${text}</p>
                            ${size.carrier_length ? `<p>Carrier Length: ${size.carrier_length} mm</p>` : ''}
                            <span class="badge bg-secondary">{{ __('messages.select_color_first') }}</span>
                            <span class="recommended bg-secondary d-none"></span>
                        </div>
                    </div>
                </div>
            `);
        });

        // Generate HTML for matching variations
        matchingVariations.forEach(variation => {
            $sizeContainer.append(`
                <div class="col-md-4">
                    <div class="inner-size-card" 
                        data-variation-id="${variation.id}"
                        data-size-name="${variation.name}"
                        data-sku="${variation.sku || ''}">
                        <div class="upper-img-sunroof">
                            @if($product->name == 'Roof Bike Carrier')
                            <figure>
                                <img src="{{ asset('frontend/images/roof-bike.png') }}" alt="">
                            </figure>
                            @elseif($product->name == 'Clutch Bike Carrier')
                            <figure>
                                <img src="{{ asset('frontend/images/${variation.name}.png') }}" alt="">
                            </figure>
                            @endif
                        </div>
                        <div class="size-sunreef">
                            <p>${variation.name}</p>
                            ${variation.sku ? `<p>SKU: ${variation.sku}</p>` : ''}
                            <span class="badge bg-secondary">{{ __('messages.select_color_first') }}</span>
                            <span class="recommended bg-secondary d-none"></span>
                        </div>
                    </div>
                </div>
            `);
        });

        // Highlight recommended sizes
        highlightRecommendedSizes(recommendation);
        
        // If color is already selected, check availability
        const colorId = $('#color-select').val();
        const colorName = $('#color-select option:selected').data('color-name');
        const fromDate = $('#rental_from').val();
        const toDate = $('#rental_to').val();
        
        if (colorId && colorId !== 'Select' && fromDate && toDate) {
            checkAvailability(colorId, colorName);
        }
    }
    // Helper function to get size text
    function getSizeText(sizeName) {
        if (sizeName === 'S') return ' >400l';
        if (sizeName === 'M') return ' 400l - 420l';
        if (sizeName === 'L') return ' 450l - 480l';
        if (sizeName === 'XL') return ' 500l - 524l';
        if (sizeName === 'XXL') return ' 600l';
        return parseInt(sizeName) * 10 + ' mm';
    }



}

    
        
   
</script>
<style>

    .clickable-roof {
        border: 2px solid transparent;
        cursor: pointer;
        transition: 0.2s;
    }
    .clickable-roof:hover {
        border-color: #007bff;
    }
    .clickable-roof.selected {
        border-color: #007bff;
        background-color: #e9f5ff;
    }
    
    </style>



@endsection