@extends('frontend.theme_2.app')

@section('title', 'Customer Booking Upcoming')

@push('styles')
    <link rel="stylesheet" href=" {{ asset('frontend/assets/plugins/daterangepicker/daterangepicker.css') }}">
    <link rel="stylesheet" href=" {{ asset('frontend/assets/plugins/datatables/datatables.min.css') }}">
    
    <!-- Bootstrap DateTimePicker CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
    
    <style>
    /* Reschedule Modal Styles */
    #rescheduleModal .bootstrap-datetimepicker-widget {
        z-index: 1060 !important;
        display: block !important;
        width: 100% !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        inset: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #rescheduleModal .bookingDatepic {
        min-height: 350px;
        position: relative;
        width: 100%;
    }

    #rescheduleModal .bookingDatepic .bootstrap-datetimepicker-widget {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #rescheduleModal .bootstrap-datetimepicker-widget table {
        width: 100%;
    }

    #rescheduleModal .bootstrap-datetimepicker-widget .picker-switch {
        text-align: center;
        padding: 8px 5px;
        font-weight: 600;
        background: #f8f9fa;
        border-radius: 4px;
        margin-bottom: 5px;
    }

    #rescheduleModal .bootstrap-datetimepicker-widget .table-condensed {
        margin-bottom: 0;
        border-collapse: collapse;
    }

    #rescheduleModal .bootstrap-datetimepicker-widget td,
    #rescheduleModal .bootstrap-datetimepicker-widget th {
        text-align: center;
        padding: 8px 5px;
        border: 1px solid #dee2e6;
    }

    #rescheduleModal .bootstrap-datetimepicker-widget th {
        background: #f8f9fa;
        font-weight: 600;
        color: #495057;
    }

    #rescheduleModal .bootstrap-datetimepicker-widget td.day:hover,
    #rescheduleModal .bootstrap-datetimepicker-widget td.hour:hover,
    #rescheduleModal .bootstrap-datetimepicker-widget td.minute:hover,
    #rescheduleModal .bootstrap-datetimepicker-widget td.second:hover {
        background: #e9ecef;
        cursor: pointer;
        color: #212529;
    }

    #rescheduleModal .bootstrap-datetimepicker-widget td.active,
    #rescheduleModal .bootstrap-datetimepicker-widget td.active:hover {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
    }

    /* Remove box shadow from selected date */
    #rescheduleModal .bootstrap-datetimepicker-widget td.active {
        box-shadow: none !important;
    }

    /* Ensure the date picker container is visible */
    #rescheduleModal .datepic .bootstrap-datetimepicker-widget {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        inset: auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 300px;
    }

    /* Hide the input element but keep the widget visible */
    #rescheduleModal .datepic input {
        display: none !important;
    }

    /* Remove card border around date picker */
    #rescheduleModal .card.border {
        border: none !important;
        box-shadow: none !important;
    }

    /* Calendar specific styling */
    #rescheduleModal .bootstrap-datetimepicker-widget .datepicker {
        width: 100%;
    }

    #rescheduleModal .bootstrap-datetimepicker-widget .datepicker-months,
    #rescheduleModal .bootstrap-datetimepicker-widget .datepicker-years,
    #rescheduleModal .bootstrap-datetimepicker-widget .datepicker-decades {
        width: 100%;
    }

    #rescheduleModal .bootstrap-datetimepicker-widget .month,
    #rescheduleModal .bootstrap-datetimepicker-widget .year,
    #rescheduleModal .bootstrap-datetimepicker-widget .decade {
        display: inline-block;
        width: 30%;
        margin: 1%;
        padding: 10px 0;
        text-align: center;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        cursor: pointer;
    }

    #rescheduleModal .bootstrap-datetimepicker-widget .month:hover,
    #rescheduleModal .bootstrap-datetimepicker-widget .year:hover,
    #rescheduleModal .bootstrap-datetimepicker-widget .decade:hover {
        background: #e9ecef;
        color: #212529;
    }

    #rescheduleModal .bootstrap-datetimepicker-widget .month.active,
    #rescheduleModal .bootstrap-datetimepicker-widget .year.active,
    #rescheduleModal .bootstrap-datetimepicker-widget .decade.active {
        background: #007bff;
        color: white;
        border-color: #007bff;
    }

    /* Time slot styling */
    #rescheduleModal .btn-check:checked + .btn-outline-primary {
        background-color: #007bff;
        border-color: #007bff;
        color: white !important;
    }

    #rescheduleModal .btn-outline-primary:hover {
        background-color: #007bff;
        border-color: #007bff;
        color: white;
    }

    /* Future date button styling */
    .future-date-btn:hover {
        background-color: #007bff !important;
        color: white !important;
        transform: scale(1.05);
        transition: all 0.2s ease;
    }

    .future-date-btn {
        transition: all 0.2s ease;
    }

    /* Payment option styling */
    #rescheduleModal .payment-item {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        transition: all 0.3s ease;
        cursor: pointer;
        background: white;
    }

    #rescheduleModal .payment-item:hover {
        border-color: #007bff;
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
        transform: translateY(-1px);
    }

    #rescheduleModal .payment-item input[type="radio"]:checked + .form-check-label {
        color: #007bff;
        font-weight: 600;
    }

    #rescheduleModal .payment-item input[type="radio"]:checked ~ .payment-radio:checked {
        background-color: #007bff;
        border-color: #007bff;
    }

    #rescheduleModal .payment-item:has(input[type="radio"]:checked) {
        border-color: #007bff;
        background-color: #f8f9ff;
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
    }

    #rescheduleModal .payment-item img {
        max-width: 60px;
        height: auto;
        object-fit: contain;
    }

    #rescheduleModal .payment-radio {
        accent-color: #007bff;
    }

    #rescheduleModal .form-check-label {
        font-weight: 500;
        color: #333;
        margin-bottom: 0;
        cursor: pointer;
    }

    #rescheduleModal .payment-methods {
        margin-top: 1rem;
    }

    #rescheduleModal .payment-methods h6 {
        font-weight: 600;
        color: #333;
    }

    /* Payment option styling */
    .payment-option {
        position: relative;
    }

    .payment-option input[type="radio"] {
        position: absolute;
        opacity: 0;
    }

    .payment-option input[type="radio"]:checked + label .card {
        border-color: #007bff;
        background-color: #f8f9ff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .payment-option input[type="radio"]:checked + label .card i {
        color: #007bff !important;
    }

    .payment-option .card {
        cursor: pointer;
        transition: all 0.3s ease;
        border: 2px solid #dee2e6;
    }

    .payment-option .card:hover {
        border-color: #007bff;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .payment-option label {
        margin-bottom: 0;
        cursor: pointer;
    }

    /* Center align radio buttons with payment cards */
    #rescheduleStep2 .form-check {
        display: flex;
        align-items: center;
        padding-left: 0;
    }

    #rescheduleStep2 .form-check-input {
        position: relative;
        margin-left: 0;
        margin-right: 12px;
        opacity: 1;
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    #rescheduleStep2 .form-check-label {
        display: flex;
        align-items: stretch;
        width: 100%;
        margin-bottom: 0;
    }

    #rescheduleStep2 .form-check-label .card {
        flex: 1;
        margin: 0;
    }

    /* Payment summary styling */
    .payment-summary .d-flex {
        padding: 0.25rem 0;
    }

    .payment-summary hr {
        margin: 0.5rem 0;
        border-color: #dee2e6;
    }
    
    /* Ensure reschedule buttons are hidden until API response */
    .reschedule-hidden {
        display: none !important;
        visibility: hidden !important;
    }
     /* Ensure cancel buttons are hidden until API response */
    .cancel-hidden {
        display: none !important;
        visibility: hidden !important;
    }
    </style>
@endpush

@section('content')

<div class="breadcrumb-bar">
    <div class="container">
        <div class="breadcrumb-item">
            <nav aria-label="breadcrumb" class="page-breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-items"><a href="{{ url('/') }}">{{ __('Home') }}</a></li>
                    <li class="breadcrumb-items"><span><i class="isax isax-arrow-right-3"></i></span></li>
                    <li class="breadcrumb-items active" aria-current="page">{{ __('my_bookings') }}</li>
                </ol>
            </nav>
            <h1 class="breadcrumb-title">{{ __('my_bookings') }}</h1>
        </div>
    </div>
    <img src="/frontend/assets/img/elements/element-01.svg" alt="elements" class="img-fluid element-one position-absolute d-none d-lg-block">
    <img src="/frontend/assets/img/elements/element-02.svg" alt="elements" class="img-fluid element-two position-absolute d-none d-lg-block">
    <img src="/frontend/assets/img/elements/element-03.svg" alt="elements" class="img-fluid element-three position-absolute d-none d-lg-block">
    <img src="/frontend/assets/img/elements/element-04.svg" alt="elements" class="img-fluid element-four position-absolute d-none d-lg-block">
    <img src="/frontend/assets/img/elements/element-05.svg" alt="elements" class="img-fluid element-five position-absolute d-none d-lg-block">
</div>

<div class="content">
    <div class="container">

        <div class="row">
            @include('frontend.pages.customer.sidemenu')

            <div class="col-xl-9 col-lg-8">

                <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 border-bottom pb-4 mb-4">
                    <h4 class="mb-0">{{ __('my_upcoming_bookings') }}</h4>
                    {{-- Filters can be implemented later if needed --}}
                </div>
                <div id="booking-list-container">
                    <div class="spinner-loader"></div>
                </div>

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

<div id="cancel_booking" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <form id="cancelBookingForm">
                    @csrf
                    <input type="hidden" id="booking_id_to_cancel" name="booking_id">
                    <input type="hidden" id="refund_amount_to_save" name="refund_amount" value="0">
                    <div class="text-center mb-3">
                        <span class="avatar avatar-lg avatar-rounded bg-soft-danger text-danger fs-16 mb-3">
                            <i class="isax isax-close-circle"></i>
                        </span>
                        <h6 class="mb-1">{{ __('cancel_booking') }}</h6>
                        <p class="mb-0">{{__('cancel_booking_confirmation')}}</p>
                    </div>
                    
                    <!-- Refund Information Section -->
                    <div id="refund-info" class="alert alert-info mb-3" style="display: none;">
                        <h6 class="alert-heading mb-2">{{ __('refund_information') }}</h6>
                        <div id="refund-details">
                            <!-- Refund details will be populated here -->
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label" for="cancellation_reason">{{__('reason_for_cancellation')}}</label>
                        <textarea class="form-control" id="cancellation_reason" name="reason" rows="3" required></textarea>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <button type="button" class="btn btn-light w-100" data-bs-dismiss="modal">{{__('Cancel')}}</button>
                        <button type="submit" class="btn btn-danger w-100">{{__('Yes, Cancel')}}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div id="view_details" class="modal fade">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header d-flex align-items-center justify-content-between">
                <h5 class="modal-title mb-0">{{ __('booking_summary') }}<span class="badge badge-sm badge-soft-purple ms-2" id="order_id"></span></h5>
                <button type="button" class="btn-close custom-btn-close opacity-100 bg-transparent" data-bs-dismiss="modal" aria-label="Close"><i class="isax isax-close-circle"></i></button>
            </div>

            <div class="modal-body">
            </div>
        </div>
    </div>
</div>

<!-- Reschedule Modal -->
<div class="modal fade custom-modal" id="rescheduleModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header d-flex align-items-center justify-content-between border-bottom">
                <h5 class="modal-title">{{__('Reschedule Booking')}}</h5>
                <a href="javascript:void(0);" data-bs-dismiss="modal" aria-label="Close"><i class="ti ti-circle-x-filled fs-20"></i></a>
            </div>
            <form id="rescheduleForm">
                <div class="modal-body">
                    <input type="hidden" id="reschedule_booking_id" name="booking_id">
                    <input type="hidden" id="reschedule_service_id" name="service_id">
                    <input type="hidden" id="reschedule_provider_id" name="provider_id">
                    <input type="hidden" id="reschedule_fee_amount" name="reschedule_fee_amount" value="0">
                    <input type="hidden" id="original_payment_type" name="original_payment_type">
                    <input type="hidden" id="total_amount" name="total_amount">
                    
                    <!-- Step 1: Date & Time Selection -->
                    <div id="rescheduleStep1">
                        <div class="booking-slot">
                            <div class="booking-header mb-3">
                                <div class="d-flex align-items-center mb-2">
                                    <h6 class="fs-16 me-2 mb-2">{{ __('Select Date & Time') }}</h6>
                                </div>
                            </div>
                            <div class="row g-3">
                                <div class="col-md-5">
                                    <h6 class="fs-13 fw-medium mb-2">{{ __('Select date') }}</h6>
                                    <div class="card border mb-0">
                                        <div class="card-body p-3">
                                            <input type="hidden" name="booking_date" id="selected_date" value="">
                                            <input type="hidden" name="from_time" id="from_time" value="">
                                            <input type="hidden" name="to_time" id="to_time" value="">
                                            <div class="bookingDatepic">
                                                <input type="text" class="form-control" id="rescheduleDatePicker" readonly>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" name="time_status" id="time_status">
                                <div class="col-md-7 time-section">
                                    <h6 class="fs-13 fw-medium mb-2">{{ __('Select time') }}</h6>
                                    <div class="slotLoader-skaliaton"></div>
                                    <div class="row g-2 text-center pt-4 fw-bold text-primary" id="slot-input">
                                        <p>{{ __('No slots available at this moment') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Reschedule Fee Information -->
                        <div id="rescheduleFeeInfo" class="alert alert-info mt-3" style="display: none;">
                            <h6 class="alert-heading">{{__('Reschedule Fee')}}</h6>
                            <div class="d-flex justify-content-between align-items-center">
                                <span>{{__('Reschedule Fee Amount')}}</span>
                                <span class="fw-bold" id="rescheduleFeeDisplay">$0.00</span>
                            </div>
                            <small class="text-muted">{{__('This fee will be charged for rescheduling your booking')}}</small>
                        </div>
                    </div>
                    
                    <!-- Step 2: Payment Selection -->
                    <div id="rescheduleStep2" style="display: none;">
                        <div class="payment-section">
                            <h6 class="fs-16 mb-3">{{__('Payment Details')}}</h6>
                            
                            <!-- Payment Methods -->
                            <div class="payment-methods mb-4">
                                <h6 class="fs-13 fw-medium mb-3">{{__('Select Payment Method')}}</h6>
                                
                                {{-- Stripe --}}
                                <div class="form-check mb-2">
                                    <input class="form-check-input"
                                           type="radio"
                                           name="payment_method"
                                           value="stripe"
                                           id="reschedule_stripe_payment">
                                    <label class="form-check-label" for="reschedule_stripe_payment">
                                        <div class="card">
                                            <div class="card-body p-3">
                                                <div class="d-flex align-items-center">
                                                    <i class="fab fa-stripe fs-20 text-primary me-3"></i>
                                                    <div>
                                                        <h6 class="mb-0">{{__('Stripe')}}</h6>
                                                        <small class="text-muted">{{__('Pay with credit card')}}</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </label>
                                </div>
                                
                                {{-- COD --}}
                                <div class="form-check mb-2 cod_payment_option">
                                    <input class="form-check-input"
                                           type="radio"
                                           name="payment_method"
                                           value="cod"
                                           id="reschedule_cod_payment">
                                    <label class="form-check-label" for="reschedule_cod_payment">
                                        <div class="card">
                                            <div class="card-body p-3">
                                                <div class="d-flex align-items-center">
                                                    <i class="ti ti-cash fs-20 text-primary me-3"></i>
                                                    <div>
                                                        <h6 class="mb-0">{{__('Cash on Delivery')}}</h6>
                                                        <small class="text-muted">{{__('Pay on service day')}}</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </label>
                                </div>

                                {{-- PayPal --}}
                                <div class="form-check mb-2">
                                    <input class="form-check-input"
                                           type="radio"
                                           name="payment_method"
                                           value="paypal"
                                           id="reschedule_paypal_payment">
                                    <label class="form-check-label" for="reschedule_paypal_payment">
                                        <div class="card">
                                            <div class="card-body p-3">
                                                <div class="d-flex align-items-center">
                                                    <i class="fab fa-paypal fs-20 text-primary me-3"></i>
                                                    <div>
                                                        <h6 class="mb-0">{{__('PayPal')}}</h6>
                                                        <small class="text-muted">{{__('Pay with PayPal')}}</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </label>
                                </div>
                            </div>
                            
                            <!-- Payment Summary at Bottom -->
                            <div class="payment-summary-card">
                                <div class="card border-primary">
                                    <div class="card-header bg-primary text-white">
                                        <h6 class="mb-0">{{__('Payment Summary')}}</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-8">
                                                <div class="payment-summary">
                                                    <div class="d-flex justify-content-between mb-2">
                                                        <span class="text-muted">{{__('Original Booking Amount')}}</span>
                                                        <span class="fw-medium" id="originalAmountDisplay">$0.00</span>
                                                    </div>
                                                    <div class="d-flex justify-content-between mb-2">
                                                        <span class="text-muted">{{__('Reschedule Fee')}}</span>
                                                        <span class="fw-medium text-warning" id="rescheduleFeeAmountDisplay">$0.00</span>
                                                    </div>
                                                    <div class="border-top pt-2 mt-2">
                                                        <div class="d-flex justify-content-between">
                                                            <span class="fw-bold">{{__('Total Payable Amount')}}</span>
                                                            <span class="fw-bold text-primary fs-4" id="totalPayableDisplay">$0.00</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4 d-flex align-items-center justify-content-center">
                                                <div class="text-center">
                                                    <i class="ti ti-receipt fs-40 text-primary mb-2"></i>
                                                    <p class="small text-muted mb-0">{{__('Secure Payment')}}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="javascript:void(0);" class="btn btn-light me-2" data-bs-dismiss="modal">{{__('Cancel')}}</a>
                    <button type="button" class="btn btn-primary" id="proceedBtn" style="display: none;">{{__('Proceed to Payment')}}</button>
                    <button type="submit" class="btn btn-primary" id="rescheduleBtn">{{__('Reschedule')}}</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
{{-- SweetAlert for better notifications --}}
<script src="{{ asset('assets/plugins/sweetalert/sweetalert2.all.min.js') }}"></script>

{{-- Bootstrap DateTimePicker JS --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<script>
$(document).ready(function() {

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

    // Function to load upcoming bookings
    function loadBookings() {
        const container = $('#booking-list-container');
        container.html('<div class="spinner-loader"></div>'); // Show loader

        $.ajax({
            url: "{{ route('customer.booking.upcoming.list') }}",
            type: 'POST',
            dataType: 'json',
            success: function(response) {
                
                
                // Store booking data globally for later use
                window.bookingData = {};
                
                container.empty(); // Clear loader
                if (response.data && response.data.length > 0) {
                    $.each(response.data, function(index, booking) {
                        
                        // Store booking data globally
                        window.bookingData[booking.booking_id] = booking;
                        
                        var bookingHtml = `
                        <div class="booking-item">
                            <div class="row row-gap-3 align-items-center">
                                <div class="col-xl-8">
                                    <div class="d-flex align-items-center flex-wrap flex-sm-nowrap gap-2 overflow-hidden">
                                        <a href="#" class="avatar avatar-xxl flex-shrink-0">
                                            <img src="${booking.image_url}" alt="service" class="img-fluid">
                                        </a>
                                        <div class="flex-grow-1 overflow-hidden">
                                            <div class="d-flex align-items-center mb-1">
                                            <a href="javascript:void(0);" class="d-block text-secondary fs-14">#${booking.order_id}</a>
                                            ${booking.booking_status == 9 ? 
                                                `<span class="badge badge-soft-warning ms-2 fs-10">{{ __('Rescheduled') }}</span>` 
                                                : ''
                                            }
                                            </div>
                                            <h6 class="fs-16 fw-semibold text-truncate mb-1"><a href="#">${booking.source_name}</a></h6>
                                            <div class="d-flex align-items-center gap-2 flex-wrap item-info">
                                                <p class="d-inline-flex align-items-center mb-0"><i class="isax isax-category-2 me-1"></i>Category : ${booking.subcategory_name || 'N/A'}</p>
                                                <p class="d-inline-flex align-items-center mb-0"><i class="isax isax-calendar-tick me-1"></i>Date : ${booking.booking_date_formatted}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-4">
                                    <div class="d-flex align-items-center justify-content-xl-end gap-2">
                                        <a href="javascript:void(0);"
                                        class="btn btn-sm btn-white d-inline-flex align-items-center view-details"
                                        data-id="${booking.booking_id}"
                                        data-bs-toggle="modal"
                                        data-bs-target="#view_details">
                                            <i class="isax isax-eye me-1"></i> {{ __('Details') }}
                                        </a>
                                        ${booking.booking_status != 9 && booking.reschedule_status != 1 ? 
                                        `<a href="javascript:void(0);" 
                                        class="btn btn-sm btn-primary d-inline-flex align-items-center reschedule_button reschedule-btn-${booking.booking_id} reschedule-hidden" 
                                        data-booking-id="${booking.booking_id}" 
                                        data-service-id="${booking.service_id}" 
                                        data-provider-id="${booking.provider_id || ''}"
                                        data-payment_type="${booking.payment_type}"
                                        style="display: none !important;">
                                            <i class="isax isax-refresh me-1"></i>{{ __('Reschedule') }}
                                        </a>`
                                        : ''}
                                        <a href="javascript:void(0);" class="btn btn-sm btn-danger d-inline-flex align-items-center cancel-btn-${booking.booking_id} cancel-booking-btn cancel-hidden" data-booking-id="${booking.booking_id}" style="display: none !important;">
                                            <i class="isax isax-close-circle me-1"></i>{{ __('Cancel') }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        `;
                        container.append(bookingHtml);
                    });
                    
                    // Check booking dates and show/hide buttons accordingly
                    checkBookingDatesAndShowButtons();
                    
                    // Check reschedule and cancellation policies for all bookings on page load
                    setTimeout(function() {
                        checkAllBookingPolicies();
                    }, 500);
                } else {
                    container.html('<div class="text-center py-5"><p>No upcoming bookings found.</p></div>');
                }
            },
            error: function() {
                container.html('<div class="text-center py-5"><p>Failed to load bookings. Please try again.</p></div>');
            }
        });
    }

    // Initial load of bookings
    loadBookings();

    $(document).on('click', '.reschedule_button', function() {
        let paymentType = $(this).data('payment_type');
        if(paymentType != 5) {
            $('.cod_payment_option').addClass('d-none');
        } else {
            $('.cod_payment_option').removeClass('d-none');
        }
    });

    // Event delegation for cancel button click
    $(document).on('click', '.cancel-booking-btn', function() {
        var bookingId = $(this).data('booking-id');
        $('#booking_id_to_cancel').val(bookingId);
        
        // Reset and hide refund info initially
        $('#refund-info').hide();
        $('#cancellation-policy').hide();
        $('#refund-details').html('');
        $('#policy-rules').html('');
        
        // Show loading state in refund info section
        $('#refund-details').html(`
            <div class="text-center py-2">
                <div class="spinner-border spinner-border-sm text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <span class="ms-2">{{ __('loading_refund_info') }}</span>
            </div>
        `);
        $('#refund-info').show();
        
        // Disable the "Yes, Cancel" button initially
        var submitButton = $('#cancelBookingForm button[type="submit"]');
        submitButton.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2"></span>{{ __('loading') }}');
        
        // Show modal first
        $('#cancel_booking').modal('show');
        
        // Then fetch cancellation policy and refund information
        $.ajax({
            url: "{{ route('user.getCancellationPolicy') }}",
            type: 'POST',
            data: { booking_id: bookingId },
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    const policy = response.data;
                    
                    // Check if cancellation is allowed based on new logic
                    const canCancel = policy.can_cancel !== false; // Default to true if not specified
                    
                    // Store the calculated refund amount
                    $('#refund_amount_to_save').val(policy.current_refund.amount);
                    
                    // Show refund information with the new structure
                    var refundHtml = `
                        <div class="booking-time-details">
                            <div class="row mb-3">
                                <div class="col-12">
                                    <div class="alert alert-light border">
                                        <strong>{{__('Total Booking Amount')}}:</strong> 
                                        <span class="float-end">${policy.formatted_total_amount}</span>
                                    </div>
                                </div>
                            </div>
                            
                            ${!canCancel ? `
                            <div class="row">
                                <div class="col-12">
                                    <div class="alert alert-danger mb-3">
                                        <i class="ti ti-alert-circle me-2"></i>
                                        <strong>{{__('Cancellation Not Allowed')}}</strong>
                                        <div>{{__('Cancellation is not allowed within the minimum time limit specified by the provider.')}}</div>
                                    </div>
                                </div>
                            </div>
                            ` : ''}
                            
                            ${policy.booking_slot ? `
                            <div class="row">
                                <div class="col-12">
                                    <div class="alert alert-success mb-0">
                                        <strong>{{__('Current Refund Amount')}}:</strong> 
                                        <span class="float-end"><strong>${policy.current_refund.formatted_amount}</strong></span>
                                    </div>
                                </div>
                            </div>
                            ` : ''}
                    `;
                    $('#refund-details').html(refundHtml);
                    $('#refund-info').show();
                    
                    // Show cancellation policy rules if they exist
                    if (policy.cancellation_rules && policy.cancellation_rules.length > 0) {
                        var policyHtml = '';
                        $.each(policy.cancellation_rules, function(index, rule) {
                            policyHtml += `
                                <div class="d-flex justify-content-between align-items-center py-1 ${index > 0 ? 'border-top' : ''}">
                                    <span>${rule.label}:</span>
                                    <strong>${rule.percentage}% (${rule.formatted_amount})</strong>
                                </div>
                            `;
                        });
                        $('#policy-rules').html(policyHtml);
                        $('#cancellation-policy').show();
                    }
                    
                    // Enable/disable the cancel button based on can_cancel flag
                    const modalCancelBtn = document.querySelector('#cancel_booking button[type="submit"]');
                    if (modalCancelBtn) {
                        if (canCancel) {
                            modalCancelBtn.disabled = false;
                            modalCancelBtn.innerHTML = '{{__('Yes, Cancel')}}';
                            modalCancelBtn.classList.remove('disabled');
                        } else {
                            modalCancelBtn.disabled = true;
                            modalCancelBtn.innerHTML = '{{__('Cancellation Not Allowed')}}';
                            modalCancelBtn.classList.add('disabled');
                        }
                    }
                } else {
                    // Show error message
                    $('#refund-details').html(`
                        <div class="alert alert-warning">
                            <i class="ti ti-alert-triangle me-2"></i>
                            ${response.message || '{{__('Unable to load cancellation policy')}}'}
                        </div>
                    `);
                    
                    // Enable the cancel button even on error
                    const modalCancelBtn = document.querySelector('#cancel_booking button[type="submit"]');
                    if (modalCancelBtn) {
                        modalCancelBtn.disabled = false;
                        modalCancelBtn.innerHTML = modalCancelBtn.dataset.yes_cancel || '{{__('Yes, Cancel')}}';
                    }
                }
            },
            error: function(xhr, status, error) {
                // Show error message
                $('#refund-details').html(`
                    <div class="alert alert-warning">
                        <i class="ti ti-alert-triangle me-2"></i>
                        {{ __('Unable to load cancellation policy') }}
                    </div>
                `);
                
                // Enable the cancel button even on error
                const modalCancelBtn = document.querySelector('#cancel_booking button[type="submit"]');
                if (modalCancelBtn) {
                    modalCancelBtn.disabled = false;
                    modalCancelBtn.innerHTML = modalCancelBtn.dataset.yes_cancel || '{{__('Yes, Cancel')}}';
                }
            },
            complete: function() {
                // Only re-enable if button is not in disabled state due to policy
                const modalCancelBtn = document.querySelector('#cancel_booking button[type="submit"]');
                if (modalCancelBtn && !modalCancelBtn.disabled) {
                    submitButton.prop('disabled', false);
                }
            }
        });
    });

    // Event delegation for reschedule button click
    $(document).on('click', '[class*="reschedule-btn-"]', function() {
        const bookingId = $(this).data('booking-id');
        const serviceId = $(this).data('service-id');
        let providerId = $(this).data('provider-id');

        // Handle undefined provider_id
        if (!providerId || providerId === 'undefined' || providerId === '') {
            
            // Try to get provider_id from the booking data by finding the booking in the current page
            const bookingData = window.bookingData || {};
            if (bookingData && bookingData[bookingId] && bookingData[bookingId].provider_id) {
                providerId = bookingData[bookingId].provider_id;
            } else {
                // Show error message and return
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Provider information not found. Please refresh the page and try again.'
                });
                return;
            }
        }

        // Set hidden fields
        $('#reschedule_booking_id').val(bookingId);
        $('#reschedule_service_id').val(serviceId);
        $('#reschedule_provider_id').val(providerId);
        
        // Reset form and show step 1
        resetRescheduleForm();
        showRescheduleStep1(true);
        
        // Check if provider has reschedule settings first
        checkProviderRescheduleSettings(providerId, bookingId);
        
        // Show modal
        $('#rescheduleModal').modal('show');
    });

    // Handle the cancellation form submission
    $('#cancelBookingForm').on('submit', function(e) {
        e.preventDefault();
        var form = $(this);
        var formData = form.serialize();
        var submitButton = form.find('button[type="submit"]');

        submitButton.prop('disabled', true).text('Cancelling...');

        $.ajax({
            url: "{{ route('customer.booking.upcoming.cancel') }}",
            type: 'POST',
            data: formData,
            dataType: 'json',
            success: function(response) {
                $('#cancel_booking').modal('hide');
                showToast("success", response.message);
                loadBookings(); // Reload the list
            },
            error: function(xhr) {
                var errorMessage = 'An error occurred. Please try again.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: errorMessage,
                });
            },
            complete: function() {
                submitButton.prop('disabled', false).text('Yes, Cancel');
                form[0].reset();
            }
        });
    });

    $(document).on('click', '.view-details', function () {
        let orderId = $(this).data('id');

        // Show loader while fetching
        $('#view_details .modal-body').html(`
            <div class="text-center py-5">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-2">Fetching order details...</p>
            </div>
        `);

        $('#view_details').modal('show');

        // Fetch details via AJAX
        $.ajax({
            url: '/customer/products/get-booking-details',   // <-- your controller route
            type: 'GET',
            data: { id: orderId },
            success: function (res) {
                // Inject HTML response into modal
                $('#order_id').html(res.order_id);
                $('#view_details .modal-body').html(res.html);
            },
            error: function () {
                $('#view_details .modal-body').html(`
                    <div class="alert alert-danger mb-0">
                        Failed to fetch details. Please try again.
                    </div>
                `);
            }
        });
    });

    // Reschedule functionality functions
    
    // Reset reschedule form
    function resetRescheduleForm() {
        $('#selected_date').val('');
        $('#from_time').val('');
        $('#to_time').val('');
        $('#time_status').val('');
        $('#slot-input').html('<p>{{ __("No slots available at this moment") }}</p>');
        $('#reschedule_fee_amount').val('0');
        $('#original_payment_type').val('');
        $('#total_amount').val('');
        
        // Hide fee info
        $('#rescheduleFeeInfo').hide();
        
        // Reset payment method selection
        $('input[name="payment_method"]').prop('checked', false);
    }

    // Show reschedule step 1
    function showRescheduleStep1(dontResetButtons = false) {
        $('#rescheduleStep1').show();
        $('#rescheduleStep2').hide();
        
        if (!dontResetButtons) {
            $('#proceedBtn').hide();
            $('#rescheduleBtn').show();
        }
    }

    // Show reschedule step 2
    function showRescheduleStep2() {
        $('#rescheduleStep1').hide();
        $('#rescheduleStep2').show();
        $('#proceedBtn').hide();
        $('#rescheduleBtn').show();
    }

    // Fetch reschedule fee
    function fetchRescheduleFee(bookingId) {
        $.ajax({
            url: '/get/reschedule-fee?' + new Date().getTime(),
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: JSON.stringify({
                booking_id: bookingId,
                _timestamp: new Date().getTime()
            }),
            success: function(data) {
                if (data.success) {
                    const feeData = data.data;
                    
                    // Update the global provider settings variable from the response
                    window.providerHasRescheduleSettings = feeData.has_settings || false;
                    
                    // Update hidden fields
                    $('#reschedule_fee_amount').val(feeData.reschedule_fee_amount);
                    $('#original_payment_type').val(feeData.original_payment_type);
                    $('#total_amount').val(feeData.original_amount);
                    
                    // Update fee display
                    if (feeData.reschedule_fee_amount > 0) {
                        $('#rescheduleFeeDisplay').text(feeData.formatted_reschedule_fee_amount);
                        $('#rescheduleFeeInfo').show();
                    } else {
                        $('#rescheduleFeeInfo').hide();
                    }
                    
                    // Update payment summary displays
                    $('#originalAmountDisplay').text(feeData.formatted_original_amount);
                    $('#rescheduleFeeAmountDisplay').text(feeData.formatted_reschedule_fee_amount);
                    $('#totalPayableDisplay').text(feeData.formatted_total_payable_amount);
                    
                    // Update button visibility based on provider settings and fee
                    const rescheduleFeeAmount = parseFloat(feeData.reschedule_fee_amount);
                    const providerHasSettings = window.providerHasRescheduleSettings || false;
                    
                    if (providerHasSettings) {
                        $('#proceedBtn').show();
                        $('#rescheduleBtn').hide();
                    } else {
                        $('#proceedBtn').hide();
                        $('#rescheduleBtn').show();
                    }
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Error calculating reschedule fee'
                    });
                }
            },
            error: function() {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Error calculating reschedule fee'
                });
            }
        });
    }

    // Check if provider has reschedule settings
    function checkProviderRescheduleSettings(providerId, bookingId) {
       
        if (!providerId || providerId === 'undefined' || providerId === '') {
            $('#proceedBtn').hide();
            $('#rescheduleBtn').show();
            return;
        }
        
        const payload = JSON.stringify({
            provider_id: providerId
        });
        
        $.ajax({
            url: '/api/check/provider-reschedule-settings',
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: payload,
            success: function(data) {
                
                if (data.success) {
                    // Store the result globally for later use
                    window.providerHasRescheduleSettings = data.has_reschedule_settings;
                    
                    if (data.has_reschedule_settings) {
                        fetchRescheduleFee(bookingId);
                    } else {
                        $('#proceedBtn').hide();
                        $('#rescheduleBtn').show();
                    }
                } else {
                    $('#proceedBtn').hide();
                    $('#rescheduleBtn').show();
                }
            },
            error: function(xhr, status, error) {
                
                $('#proceedBtn').hide();
                $('#rescheduleBtn').show();
            }
        });
    }

    // Initialize date picker when modal is shown
    $('#rescheduleModal').on('shown.bs.modal', function () {
        const serviceId = $('#reschedule_service_id').val();
        const providerId = $('#reschedule_provider_id').val();
        const bookingId = $('#reschedule_booking_id').val();
        
        // Check if provider has reschedule settings first
        checkProviderRescheduleSettings(providerId, bookingId);
        
        // Small delay to ensure modal is fully rendered and visible
        setTimeout(() => {
            initializeRescheduleDatePicker(serviceId);
        }, 200);
    });

    function initializeRescheduleDatePicker(serviceId) {
        
        const datepickerContainer = $('.bookingDatepic');
        
        if (!datepickerContainer.length) {
            return;
        }
        
        // Check if DateTimePicker library is available
        if (typeof $.fn.datetimepicker === 'undefined') {
            // Create fallback date input
            createFallbackDatePicker(serviceId);
            return;
        }
        
        // Destroy existing datetimepicker if it exists
        const existingInput = $('#rescheduleDatePicker');
        if (existingInput.length && existingInput.data('DateTimePicker')) {
            existingInput.data('DateTimePicker').destroy();
        }
        
        // Clear container and create a proper structure
        datepickerContainer.empty();
        datepickerContainer.html(`
            <div class="datepic-container" style="position: relative; width: 100%;">
                <input type="text" id="rescheduleDatePicker" style="position: absolute; visibility: hidden;">
                <div id="datepicker-widget-container" style="width: 100%; min-height: 300px;"></div>
            </div>
        `);
        
        // Try to initialize datetimepicker
        try {
            
            const datepickerInput = $('#rescheduleDatePicker');
            
            datepickerInput.datetimepicker({
                format: 'DD-MM-YYYY',
                keepOpen: true,
                inline: true,
                viewMode: 'days',
                icons: {
                    up: "fas fa-angle-up",
                    down: "fas fa-angle-down",
                    next: 'fas fa-angle-right',
                    previous: 'fas fa-angle-left',
                    today: 'fas fa-calendar-day',
                    clear: 'fas fa-trash',
                    close: 'fas fa-times'
                },
                minDate: moment(),
                maxDate: moment().add(1, 'year'),
                useCurrent: false,
                showTodayButton: true,
                showClear: false,
                showClose: false,
                widgetParent: '#datepicker-widget-container'
            });
            
            // Verify initialization
            if (datepickerInput.data('DateTimePicker')) {
                
                // Add change event handler
                datepickerInput.on('dp.change', function(e) {
                    if (e.date) {
                        const selectedDate = moment(e.date).format('DD-MM-YYYY');
                        $('#selected_date').val(selectedDate);
                        
                        
                        // Load slots for selected date
                        loadRescheduleSlots(serviceId, selectedDate);
                    }
                });
                
                // Set today's date by default
                const today = moment();
                $('#selected_date').val(today.format('DD-MM-YYYY'));
                
                // Set the date on the picker
                datepickerInput.data('DateTimePicker').date(today);
                
                
                // Force the widget to show in the correct container
                // setTimeout(() => {
                //     const widget = datepickerInput.data('DateTimePicker').widget();
                //     if (widget.length) {
                //         widget.appendTo('#datepicker-widget-container');
                //         widget.css({
                //             'display': 'block',
                //             'position': 'relative',
                //             'top': 'auto',
                //             'left': 'auto',
                //             'right': 'auto',
                //             'bottom': 'auto',
                //             'width': '100%',
                //             'margin': '0',
                //             'padding': '0',
                //             'z-index': '1'
                //         });
                //     }
                // }, 100);
                
            } else {
                createFallbackDatePicker(serviceId);
            }
            
        } catch (error) {
            createFallbackDatePicker(serviceId);
        }
    }
    
    function createFallbackDatePicker(serviceId) {
        const datepickerContainer = $('.bookingDatepic');
        
        // Create a simple calendar-like date picker
        const today = moment();
        const currentMonth = today.month();
        const currentYear = today.year();
        
        // Generate calendar HTML
        let calendarHtml = `
            <div class="simple-calendar" style="width: 100%;">
                <div class="calendar-header" style="display: flex; justify-content: space-between; align-items: center; padding: 10px; background: #f8f9fa; border: 1px solid #dee2e6; border-bottom: none;">
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="prevMonth">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <h6 id="currentMonth" style="margin: 0; font-weight: 600;">${today.format('MMMM YYYY')}</h6>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="nextMonth">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
                <div class="calendar-grid" style="border: 1px solid #dee2e6;">
                    <table class="table table-sm table-bordered mb-0">
                        <thead>
                            <tr>
                                <th class="text-center" style="font-size: 12px; padding: 5px;">Sun</th>
                                <th class="text-center" style="font-size: 12px; padding: 5px;">Mon</th>
                                <th class="text-center" style="font-size: 12px; padding: 5px;">Tue</th>
                                <th class="text-center" style="font-size: 12px; padding: 5px;">Wed</th>
                                <th class="text-center" style="font-size: 12px; padding: 5px;">Thu</th>
                                <th class="text-center" style="font-size: 12px; padding: 5px;">Fri</th>
                                <th class="text-center" style="font-size: 12px; padding: 5px;">Sat</th>
                            </tr>
                        </thead>
                        <tbody id="calendarDays">
                            <!-- Days will be generated by JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>
        `;
        
        datepickerContainer.html(calendarHtml);
        
        // Generate calendar days
        let displayMonth = currentMonth;
        let displayYear = currentYear;
        
        // Make generateCalendar accessible globally for updateCustomCalendar
        window.generateRescheduleCalendar = function(month, year) {
            const firstDay = moment([year, month]).startOf('month');
            const lastDay = moment([year, month]).endOf('month');
            const startDate = firstDay.clone().startOf('week');
            const endDate = lastDay.clone().endOf('week');
            
            const days = [];
            const current = startDate.clone();
            
            while (current <= endDate) {
                days.push(current.clone());
                current.add(1, 'day');
            }
            
            let html = '';
            let weekHtml = '';
            
            days.forEach((day, index) => {
                const isToday = day.isSame(today, 'day');
                const isCurrentMonth = day.month() === month;
                const isPast = day.isBefore(today, 'day');
                const isDisabled = isPast || day.isAfter(today.clone().add(1, 'year'));
                
                let classes = 'text-center calendar-day';
                if (isToday) classes += ' bg-primary text-white';
                else if (!isCurrentMonth) classes += ' text-muted';
                else if (isDisabled) classes += ' text-muted bg-light';
                else classes += ' clickable-day';
                
                weekHtml += `
                    <td class="${classes}" style="padding: 8px; cursor: ${isDisabled ? 'not-allowed' : 'pointer'};" 
                        data-date="${day.format('DD-MM-YYYY')}" 
                        ${isDisabled ? 'disabled' : ''}>
                        ${day.date()}
                    </td>
                `;
                
                if ((index + 1) % 7 === 0) {
                    html += `<tr>${weekHtml}</tr>`;
                    weekHtml = '';
                }
            });
            
            $('#calendarDays').html(html);
            $('#currentMonth').text(moment([year, month]).format('MMMM YYYY'));
            
            // Add click handlers for clickable days
            $('.clickable-day').on('click', function() {
                const selectedDate = $(this).data('date');
                $('#selected_date').val(selectedDate);
                
                // Remove previous selection
                $('.calendar-day').removeClass('bg-primary text-white');
                
                // Add selection to clicked day
                $(this).addClass('bg-primary text-white');
                loadRescheduleSlots(serviceId, selectedDate);
            });
        };
        
        // Initial calendar generation
        window.generateRescheduleCalendar(displayMonth, displayYear);
        
        // Month navigation
        $('#prevMonth').on('click', function() {
            displayMonth--;
            if (displayMonth < 0) {
                displayMonth = 11;
                displayYear--;
            }
            window.generateRescheduleCalendar(displayMonth, displayYear);
        });
        
        $('#nextMonth').on('click', function() {
            displayMonth++;
            if (displayMonth > 11) {
                displayMonth = 0;
                displayYear++;
            }
            window.generateRescheduleCalendar(displayMonth, displayYear);
        });
        
        // Initialize with today's date
        $('#selected_date').val(today.format('DD-MM-YYYY'));
        loadRescheduleSlots(serviceId, today.format('DD-MM-YYYY'));
    }
    
    // Function to update custom calendar with specific date
    function updateCustomCalendar(selectedDate) {
        
        const momentDate = moment(selectedDate, 'DD-MM-YYYY');
        if (!momentDate.isValid()) {
            return;
        }
        
        const targetMonth = momentDate.month();
        const targetYear = momentDate.year();
        
        // Update the calendar to show the target month/year
        if (typeof window.generateRescheduleCalendar === 'function') {
            window.generateRescheduleCalendar(targetMonth, targetYear);
            
            // Highlight the selected date
            setTimeout(() => {
                // Remove previous selection
                $('.calendar-day').removeClass('bg-primary text-white');
                
                // Add selection to the target date
                $(`.calendar-day[data-date="${selectedDate}"]`).addClass('bg-primary text-white');
                
                
            }, 100);
        }
    }

    function loadRescheduleSlots(serviceId, selectedDate) {
        if (!serviceId) {
            $('#slot-input').html('<div class="col-12"><p class="text-danger">Service ID not found. Please refresh the page.</p></div>');
            return;
        }
        
        // Show loading
        $('#slot-input').html('<div class="col-12"><div class="spinner-border spinner-border-sm me-2"></div>Loading slots...</div>');
        
        // Ensure date is in d-m-Y format for API validation
        let formattedDate = selectedDate;
        if (selectedDate && moment(selectedDate, 'DD-MM-YYYY').isValid()) {
            formattedDate = moment(selectedDate, 'DD-MM-YYYY').format('DD-MM-YYYY');
        } else if (selectedDate && moment(selectedDate, 'D-M-YYYY').isValid()) {
            formattedDate = moment(selectedDate, 'D-M-YYYY').format('DD-MM-YYYY');
        } else if (selectedDate && moment(selectedDate, 'MM/DD/YYYY').isValid()) {
            // Handle MM/DD/YYYY format and convert to DD-MM-YYYY
            formattedDate = moment(selectedDate, 'MM/DD/YYYY').format('DD-MM-YYYY');
        } else if (selectedDate && moment(selectedDate, 'MM-DD-YYYY').isValid()) {
            // Handle MM-DD-YYYY format and convert to DD-MM-YYYY
            formattedDate = moment(selectedDate, 'MM-DD-YYYY').format('DD-MM-YYYY');
        } else if (selectedDate && moment(selectedDate, 'YYYY-MM-DD').isValid()) {
            // Handle YYYY-MM-DD format and convert to DD-MM-YYYY
            formattedDate = moment(selectedDate, 'YYYY-MM-DD').format('DD-MM-YYYY');
        }
        
        // Use existing get-slots API
        const payload = `service_id=${serviceId}&selected_date=${formattedDate}`;
        
        $.ajax({
            url: '/get-slots',
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: payload,
            success: function(data) {
                const slotContainer = $('#slot-input');
                slotContainer.empty();
                
                if (data.slot && data.slot.length > 0) {
                    data.slot.forEach(slot => {
                        const slotDiv = $('<div class="col-md-4 mb-2"></div>');
                        slotDiv.html(`
                            <div class="slot-item" data-slot-id="${slot.id}" data-slot-time="${slot.source_values}">
                                <input type="radio" name="time_slot" id="reschedule_slot_${slot.id}" value="${slot.source_values}" class="btn-check">
                                <label class="btn btn-outline-primary w-100" for="reschedule_slot_${slot.id}">
                                    ${slot.source_values}
                                </label>
                            </div>
                        `);
                        slotContainer.append(slotDiv);
                    });
                    
                    // Add click handlers for slot selection
                    $('.slot-item').on('click', function() {
                        const slotTime = $(this).data('slot-time');
                        
                        // Try different parsing methods
                        let fromTime, toTime;
                        
                        if (slotTime.includes(' - ')) {
                            // Format: "09:00 - 10:00"
                            const times = slotTime.split(' - ');
                            fromTime = times[0].trim();
                            toTime = times[1].trim();
                        } else if (slotTime.includes('-')) {
                            // Format: "09:00-10:00"
                            const times = slotTime.split('-');
                            fromTime = times[0].trim();
                            toTime = times[1].trim();
                        } else if (slotTime.includes(':')) {
                            // Format: "12:00" (single time)
                            fromTime = slotTime;
                            toTime = slotTime;
                        } else {
                            // Format: "12" (hour only)
                            fromTime = slotTime + ':00';
                            toTime = slotTime + ':00';
                        }
                        
                        $('#from_time').val(fromTime);
                        $('#to_time').val(toTime);
                        $('#time_status').val('yes');
                        
                        
                        // Update datetimepicker to show selected time
                        // updateDateTimePickerWithTime(fromTime);
                    });
                    
                    // Add radio button change handler to check reschedule fee when slot is selected
                    $('input[name="time_slot"]').on('change', function() {
                        // Check if there's a fee to pay and if provider has reschedule settings
                        const rescheduleFeeAmount = parseFloat($('#reschedule_fee_amount').val());
                        const providerHasSettings = window.providerHasRescheduleSettings || false;
                        
                        if (providerHasSettings && rescheduleFeeAmount > 0) {
                            $('#proceedBtn').show();
                            $('#rescheduleBtn').hide();
                        } else {
                            $('#proceedBtn').hide();
                            $('#rescheduleBtn').show();
                        }
                    });
                } else if (data.slot_availability && data.slot_availability.length > 0) {
                    // Show future availability
                    let availabilityHtml = '<div class="col-12"><p class="text-warning mb-2">No slots available for the given date</p>';
                    availabilityHtml += '<p class="mb-2">Future availability date:</p><div class="d-flex flex-wrap gap-2">';
                    
                    data.slot_availability.forEach(date => {
                        availabilityHtml += `<span class="badge bg-light text-dark border future-date-btn" data-date="${date}" style="cursor: pointer;">${date}</span>`;
                    });
                    
                    availabilityHtml += '</div></div>';
                    slotContainer.html(availabilityHtml);
                    
                    // Add click handlers for future dates
                    $('.future-date-btn').on('click', function() {
                        const selectedDate = $(this).data('date');
                        
                        let dateForPicker;
                        
                        // Handle different date formats
                        if (selectedDate.includes('/')) {
                            // Convert from MM/DD/YYYY to DD-MM-YYYY
                            const dateParts = selectedDate.split('/');
                            const day = dateParts[0];
                            const month = dateParts[1];
                            const year = dateParts[2];
                            dateForPicker = `${day}-${month}-${year}`;
                        } else if (selectedDate.includes('-')) {
                            // Convert from MM-DD-YYYY to DD-MM-YYYY
                            const dateParts = selectedDate.split('-');
                            const day = dateParts[0];
                            const month = dateParts[1];
                            const year = dateParts[2];
                            dateForPicker = `${day}-${month}-${year}`;
                        } else {
                            // Fallback - try moment.js
                            dateForPicker = moment(selectedDate).format('DD-MM-YYYY');
                        }
                        
                        
                        // Update hidden field
                        $('#selected_date').val(dateForPicker);
                        
                        // Check if DateTimePicker is initialized and update it
                        const datepickerInput = $('#rescheduleDatePicker');
                        if (datepickerInput.length && datepickerInput.data('DateTimePicker')) {
                            
                            // Create moment object and set the date
                            const momentDate = moment(dateForPicker, 'DD-MM-YYYY');
                            
                            // Update the date picker
                            datepickerInput.data('DateTimePicker').date(momentDate);
                            
                        } else {
                            updateCustomCalendar(dateForPicker);
                        }
                        
                        // Load slots for the selected date
                        const serviceId = $('#reschedule_service_id').val();
                        loadRescheduleSlots(serviceId, dateForPicker);
                    });
                } else {
                    slotContainer.html('<div class="col-12"><p>{{ __("No slots available") }}</p></div>');
                }
            },
            error: function(xhr, status, error) {
                
                let errorMessage = 'Failed to load slots';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                } else if (xhr.responseJSON && xhr.responseJSON.errors && xhr.responseJSON.errors.selected_date) {
                    errorMessage = xhr.responseJSON.errors.selected_date[0];
                }
                
                $('#slot-input').html(`<div class="col-12"><p class="text-danger">${errorMessage}</p></div>`);
            }
        });
    }

    // Function to update datetimepicker with selected time
    function updateDateTimePickerWithTime(selectedTime) {
        
        const datepickerInput = $('#rescheduleDatePicker');
        
        if (datepickerInput.length && datepickerInput.data('DateTimePicker')) {
            
            try {
                // Get the currently selected date
                const currentDateTime = datepickerInput.data('DateTimePicker').date();
                
                if (!currentDateTime) {
                    // If no date is selected, use today
                    const today = moment();
                    datepickerInput.data('DateTimePicker').date(today);
                    return;
                }
                
                const timeMoment = moment(selectedTime, 'HH:mm');
                
                
                if (!timeMoment.isValid()) {
                    
                    // Try other formats
                    const alternativeFormats = ['H:mm', 'HH:mm:ss', 'H:mm:ss', 'h:mm A', 'h:mm:ss A'];
                    let validTime = null;
                    
                    for (const format of alternativeFormats) {
                        const testMoment = moment(selectedTime, format);
                        if (testMoment.isValid()) {
                            validTime = testMoment;
                            break;
                        }
                    }
                    
                    if (!validTime) {
                        return;
                    }
                    
                    // Create a new moment with the current date and selected time
                    const updatedDateTime = moment(currentDateTime).set({
                        hour: validTime.hour(),
                        minute: validTime.minute(),
                        second: 0,
                        millisecond: 0
                    });
                    
                    // Update the datetimepicker
                    datepickerInput.data('DateTimePicker').date(updatedDateTime);
                    
                    return;
                }
                
                // Create a new moment with the current date and selected time
                const updatedDateTime = moment(currentDateTime).set({
                    hour: timeMoment.hour(),
                    minute: timeMoment.minute(),
                    second: 0,
                    millisecond: 0
                });
                
                
                
                // Update the datetimepicker
                datepickerInput.data('DateTimePicker').date(updatedDateTime);
                
                // Verify the update
                const verifyDateTime = datepickerInput.data('DateTimePicker').date();
                
            } catch (error) {
            }
        } else {
           
            
            // Check if DateTimePicker library is available
            if (typeof $.fn.datetimepicker === 'undefined') {
                
                return;
            }
            
            // Try to reinitialize the datetimepicker only once
            if (!datepickerInput.attr('data-reinit-attempted')) {
                datepickerInput.attr('data-reinit-attempted', 'true');
                
                const serviceId = $('#reschedule_service_id').val();
                if (serviceId) {
                    
                    initializeRescheduleDatePicker(serviceId);
                    
                    // Try again after a short delay, but only once
                    setTimeout(() => {
                        if (datepickerInput.data('DateTimePicker')) {
                            updateDateTimePickerWithTime(selectedTime);
                        } else {
                            
                        }
                    }, 500);
                }
            } else {
                console.error('DateTimePicker reinitialization already attempted, skipping to prevent infinite loop');
            }
        }
    }

    // Proceed button handler - move to payment step
    $('#proceedBtn').on('click', function() {
        // Validate date and time selection
        const selectedDate = $('#selected_date').val();
        const timeSlot = $('input[name="time_slot"]:checked');
        
        if (!selectedDate || !timeSlot.length) {
            Swal.fire({
                icon: 'error',
                title: 'Validation Error',
                text: 'Please select a date and time slot first'
            });
            return;
        }
        
        // Move to payment step
        showRescheduleStep2();
    });

    // Reschedule form submission
    $('#rescheduleForm').on('submit', function(e) {
        e.preventDefault();
        
        // Check which step we're on
        const isStep2Visible = $('#rescheduleStep2').is(':visible');
        
        if (isStep2Visible) {
            // Payment step - validate payment method and process payment
            const paymentMethod = $('input[name="payment_method"]:checked');
            
            if (!paymentMethod.length) {
                Swal.fire({
                    icon: 'error',
                    title: 'Validation Error',
                    text: 'Please select a payment method'
                });
                return;
            }
            
            // Process payment based on method
            processReschedulePayment(paymentMethod.val());
            
        } else {
            // Date/time selection step - validate and show proceed button
            const bookingId = $('#reschedule_booking_id').val();
            const serviceId = $('#reschedule_service_id').val();
            const selectedDate = $('#selected_date').val();
            const timeSlot = $('input[name="time_slot"]:checked');
            
            if (!bookingId || !serviceId || !selectedDate || !timeSlot.length) {
                Swal.fire({
                    icon: 'error',
                    title: 'Validation Error',
                    text: 'Please select a date and time slot'
                });
                return;
            }
            
            // Check if there's a fee to pay
            const rescheduleFeeAmount = parseFloat($('#reschedule_fee_amount').val());
            
            if (rescheduleFeeAmount > 0) {
                // Show proceed button for payment - DON'T submit form
                $('#proceedBtn').show();
                $('#rescheduleBtn').hide();
                return false; // Prevent form submission
            } else {
                // No fee - process reschedule directly
                processRescheduleWithoutPayment();
            }
        }
    });

    // Process reschedule payment
    function processReschedulePayment(paymentMethod) {
        
        
        const bookingId = $('#reschedule_booking_id').val();
        const serviceId = $('#reschedule_service_id').val();
        let selectedDate = $('#selected_date').val();
        const timeSlot = $('input[name="time_slot"]:checked');
        const rescheduleFeeAmount = $('#reschedule_fee_amount').val();
        const originalPaymentType = $('#original_payment_type').val();
        const totalAmount = $('#total_amount').val();
        
        // Ensure date is in DD-MM-YYYY format for API validation
        let formattedDate = selectedDate;
        if (selectedDate && moment(selectedDate, 'DD-MM-YYYY').isValid()) {
            formattedDate = moment(selectedDate, 'DD-MM-YYYY').format('DD-MM-YYYY');
        } else if (selectedDate && moment(selectedDate, 'D-M-YYYY').isValid()) {
            formattedDate = moment(selectedDate, 'D-M-YYYY').format('DD-MM-YYYY');
        } else if (selectedDate && moment(selectedDate, 'MM/DD/YYYY').isValid()) {
            // Handle MM/DD/YYYY format and convert to DD-MM-YYYY
            formattedDate = moment(selectedDate, 'MM/DD/YYYY').format('DD-MM-YYYY');
        } else if (selectedDate && moment(selectedDate, 'MM-DD-YYYY').isValid()) {
            // Handle MM-DD-YYYY format and convert to DD-MM-YYYY
            formattedDate = moment(selectedDate, 'MM-DD-YYYY').format('DD-MM-YYYY');
        } else if (selectedDate && moment(selectedDate, 'YYYY-MM-DD').isValid()) {
            // Handle YYYY-MM-DD format and convert to DD-MM-YYYY
            formattedDate = moment(selectedDate, 'YYYY-MM-DD').format('DD-MM-YYYY');
        }
        
        
        // Check if all required elements exist
        if (!bookingId || !serviceId || !selectedDate || !timeSlot.length || !rescheduleFeeAmount || !originalPaymentType || !totalAmount) {
            
            Swal.fire({
                icon: 'error',
                title: 'Validation Error',
                text: 'Please fill all required fields and select a time slot.'
            });
            return;
        }
        
        const formData = new FormData();
        formData.append('booking_id', bookingId);
        formData.append('service_id', serviceId);
        formData.append('booking_date', formattedDate);
        formData.append('time_slot', timeSlot.val());
        formData.append('reschedule_fee_amount', rescheduleFeeAmount);
        formData.append('original_payment_type', originalPaymentType);
        formData.append('total_amount', totalAmount);
        formData.append('payment_method', paymentMethod);
       
        const btn = $('#rescheduleBtn');
        
        btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span> {{__("Processing Payment...")}}');
        
        $.ajax({
            url: '/user/reschedule-booking-payment',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(data) {
                
                if (data.success) {
                    if (data.payment_required && data.payment_url) {
                        
                        // Redirect to payment gateway
                        window.location.href = data.payment_url;
                    } else {
                        // Payment processed successfully
                        Swal.fire({
                            icon: 'success',
                            title: 'Success',
                            text: data.message
                        }).then(() => {
                            $('#rescheduleModal').modal('hide');
                            loadBookings(); // Reload the list
                        });
                    }
                } else {
                    
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: data.message
                    });
                }
            },
            error: function(xhr, status, error) {
                
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Error processing reschedule payment: ' + (xhr.responseJSON?.message || error)
                });
            },
            complete: function() {
                btn.prop('disabled', false).text('{{__("Reschedule")}}');
            }
        });
    }

    // Process reschedule without payment
    function processRescheduleWithoutPayment() {
        const bookingId = $('#reschedule_booking_id').val();
        const serviceId = $('#reschedule_service_id').val();
        let selectedDate = $('#selected_date').val();
        const timeSlot = $('input[name="time_slot"]:checked');
        
        // Ensure date is in DD-MM-YYYY format for API validation
        let formattedDate = selectedDate;
        if (selectedDate && moment(selectedDate, 'DD-MM-YYYY').isValid()) {
            formattedDate = moment(selectedDate, 'DD-MM-YYYY').format('DD-MM-YYYY');
        } else if (selectedDate && moment(selectedDate, 'D-M-YYYY').isValid()) {
            formattedDate = moment(selectedDate, 'D-M-YYYY').format('DD-MM-YYYY');
        } else if (selectedDate && moment(selectedDate, 'MM/DD/YYYY').isValid()) {
            // Handle MM/DD/YYYY format and convert to DD-MM-YYYY
            formattedDate = moment(selectedDate, 'MM/DD/YYYY').format('DD-MM-YYYY');
        } else if (selectedDate && moment(selectedDate, 'MM-DD-YYYY').isValid()) {
            // Handle MM-DD-YYYY format and convert to DD-MM-YYYY
            formattedDate = moment(selectedDate, 'MM-DD-YYYY').format('DD-MM-YYYY');
        } else if (selectedDate && moment(selectedDate, 'YYYY-MM-DD').isValid()) {
            // Handle YYYY-MM-DD format and convert to DD-MM-YYYY
            formattedDate = moment(selectedDate, 'YYYY-MM-DD').format('DD-MM-YYYY');
        }
        
        
        const formData = new FormData();
        formData.append('booking_id', bookingId);
        formData.append('service_id', serviceId);
        formData.append('booking_date', formattedDate);
        formData.append('time_slot', timeSlot.val());
        formData.append('reschedule_fee_amount', '0');
        
        const btn = $('#rescheduleBtn');
        
        btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span> {{__("Processing...")}}');
        
        $.ajax({
            url: '/user/reschedule-booking',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(data) {
                if (data.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: data.message
                    }).then(() => {
                        $('#rescheduleModal').modal('hide');
                        loadBookings(); // Reload the list
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: data.message
                    });
                }
            },
            error: function() {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Error rescheduling booking'
                });
            },
            complete: function() {
                btn.prop('disabled', false).text('{{__("Reschedule")}}');
            }
        });
    }

    // Function to check booking dates and show/hide buttons based on initial API response
    function checkBookingDatesAndShowButtons() {
        const bookingData = window.bookingData || {};
        
        Object.keys(bookingData).forEach(bookingId => {
            const booking = bookingData[bookingId];
            const rescheduleBtn = $(`.reschedule-btn-${bookingId}`);
            const cancelBtn = $(`.cancel-booking-btn[data-booking-id="${bookingId}"]`);
            
            // Check if booking date is in the past
            const bookingDate = booking.booking_date; // Use the full booking_date from API
            const isBookingDatePassed = isDateInPast(bookingDate);
            
            if (isBookingDatePassed) {
                // Hide both buttons if booking date is passed
                rescheduleBtn.addClass('reschedule-hidden').hide();
                cancelBtn.addClass('cancel-hidden').hide();
            } else {
                // Show both buttons if booking date is not passed
                rescheduleBtn.removeClass('reschedule-hidden').show();
                cancelBtn.removeClass('cancel-hidden').show();
            }
        });
    }

    // Function to check if a date is in the past
    function isDateInPast(bookingDate) {
        if (!bookingDate) return false;
        
        try {
            const bookingDateTime = new Date(bookingDate);
            const currentDateTime = new Date();
            
            // Set both times to midnight to compare only dates
            const bookingDateOnly = new Date(bookingDateTime.getFullYear(), bookingDateTime.getMonth(), bookingDateTime.getDate());
            const currentDateOnly = new Date(currentDateTime.getFullYear(), currentDateTime.getMonth(), currentDateTime.getDate());
            
            return bookingDateOnly < currentDateOnly;
        } catch (error) {
            return false;
        }
    }

    // Check reschedule policies for all bookings on page load
    function initializeRescheduleButtons() {
        
        // First, ensure all reschedule buttons are hidden by default
        $('[class*="reschedule-btn-"]').addClass('reschedule-hidden').hide();
        // Note: Cancel buttons are now handled by checkBookingDatesAndShowButtons function
        
        // Get all booking elements that have reschedule buttons
        const rescheduleButtons = $('[class*="reschedule-btn-"]');
        
        
        
        // Create an array of booking IDs to check
        const bookingIds = [];
        rescheduleButtons.each(function() {
            const bookingId = $(this).data('booking-id');
            
            if (bookingId && !bookingIds.includes(bookingId)) {
                bookingIds.push(bookingId);
            }
        });
        
        
        
        // Check reschedule policy for each booking
        if (bookingIds.length > 0) {
            bookingIds.forEach(bookingId => {
                // Add a small delay to ensure page is fully loaded
                setTimeout(() => {
                    checkReschedulePolicy(bookingId);
                }, 100);
            });
        }
    }

    // Check reschedule and cancellation policies for all bookings on page load
    function checkAllBookingPolicies() {
        // Get all booking elements that have reschedule buttons
        const rescheduleButtons = document.querySelectorAll('[class*="reschedule-btn-"]');
        const cancelButtons = document.querySelectorAll('.cancel-booking-btn');
        
        // Create an array of booking IDs to check
        const bookingIds = [];
        
        // Add booking IDs from reschedule buttons
        rescheduleButtons.forEach(button => {
            const bookingId = button.dataset.bookingId;
            if (bookingId && !bookingIds.includes(bookingId)) {
                bookingIds.push(bookingId);
            }
        });
        
        // Add booking IDs from cancel buttons
        cancelButtons.forEach(button => {
            const bookingId = button.dataset.bookingId;
            if (bookingId && !bookingIds.includes(bookingId)) {
                bookingIds.push(bookingId);
            }
        });
        
        // Check policies for each booking
        bookingIds.forEach(bookingId => {
            checkReschedulePolicy(bookingId);
            checkCancellationPolicy(bookingId);
        });
    }

    // Function to check cancellation policy for a specific booking
    function checkCancellationPolicy(bookingId) {
        fetch('/get/cancellation-policy?' + new Date().getTime(), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                booking_id: bookingId,
                _timestamp: new Date().getTime()
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const cancelBtn = document.querySelector('.cancel-btn-' + bookingId);
                
                if (cancelBtn) {
                    const policy = data.data;
                    const canCancel = policy.can_cancel !== false; // Default to true if not specified
                    
                    if (canCancel) {
                        // Show the cancel button
                        cancelBtn.style.display = 'inline-block';
                    } else {
                        // Hide the cancel button if cancellation not allowed
                        cancelBtn.style.display = 'none';
                    }
                }
            } else {
                // Hide cancel button on error to be safe
                const cancelBtn = document.querySelector('.cancel-btn-' + bookingId);
                if (cancelBtn) {
                    cancelBtn.style.display = 'none';
                }
            }
        })
        .catch(error => {
            // Hide cancel button on error to be safe
            const cancelBtn = document.querySelector('.cancel-btn-' + bookingId);
            if (cancelBtn) {
                cancelBtn.style.display = 'none';
            }
        });
    }

    function checkReschedulePolicy(bookingId) {
        
        $.ajax({
            url: '/get/reschedule-policy?' + new Date().getTime(),
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Accept': 'application/json'
            },
            data: JSON.stringify({
                booking_id: bookingId,
                _timestamp: new Date().getTime()
            }),
            success: function(data) {
                handleRescheduleResponse(data, bookingId);
            },
            error: function() {
                // Hide buttons on error to be safe
                $(`.reschedule-btn-${bookingId}`).hide();
            }
        });
    }

    function handleRescheduleResponse(data, bookingId) {
        
        if (data.success) {
            const rescheduleBtn = $(`.reschedule-btn-${bookingId}`);
            const cancelBtn = $(`.cancel-booking-btn[data-booking-id="${bookingId}"]`);
            
            if (rescheduleBtn.length) {
                const policy = data.data;
                
                // Check if booking date is in the past
                const bookingDate = policy.booking_slot ? policy.booking_slot.booking_date : null;
                const isBookingDatePassed = isDateInPast(bookingDate);
                
                if (isBookingDatePassed) {
                    // Hide both buttons if booking date is passed
                    rescheduleBtn.addClass('reschedule-hidden').hide();
                    cancelBtn.addClass('cancel-hidden').hide();
                } else {
                    // Show/hide reschedule button based on policy
                    if (policy.reschedule_allowed === true) {
                        // Show the reschedule button - remove the hidden class and show it
                        rescheduleBtn.removeClass('reschedule-hidden');
                        rescheduleBtn.show();
                    } else {
                        // Hide the reschedule button - add the hidden class and hide it
                        rescheduleBtn.addClass('reschedule-hidden');
                        rescheduleBtn.hide();
                    }
                    
                    // Show cancel button for future bookings
                    cancelBtn.removeClass('cancel-hidden');
                    cancelBtn.show();
                }
            }
        } else {
            
        
            // Hide buttons on error to be safe
            $(`.reschedule-btn-${bookingId}`).addClass('reschedule-hidden').hide();
        }
    }

    // Initialize reschedule buttons after loading bookings
    setTimeout(initializeRescheduleButtons, 500);

});
</script>
@endpush