@extends('admin.layouts.layout')

{{-- 
IMPORTANT DEVELOPMENT GUIDELINES FOR SCHEDULE MODALS:

1. URL PATTERNS:
   - Admin routes use prefix 'schedule/' NOT '/admin/schedule/'
   - Example: fetch('/schedule/123/property-details') ✓
   - NOT: fetch('/admin/schedule/123/property-details') ✗

2. MODAL STRUCTURE (Follow property-location modal pattern):
   - Outer div: class="schedule-modal-overlay" id="uniqueId"
   - Inner div: class="specific-modal-class" onclick="event.stopPropagation()"
   - This works with global click handler on line 3109

3. EXISTING WORKING EXAMPLES:
   - Property Location Modal (lines 3475+)
   - Schedule Details Modal (lines 2647+)
   - Reschedule Modal (lines 2984+)

4. COMMON MISTAKES TO AVOID:
   - Don't add custom click handlers (use global system)
   - Don't use different overlay class names
   - Don't forget event.stopPropagation() on inner modal
   - Don't use /admin/ prefix in fetch URLs
--}}

@section('content')

<div class="row">
    <!-- Left Sidebar -->
    <div class="col-lg-3 col-md-4">
        <div class="accordion" id="accordionExample">
            <!-- <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                    <button class="accordion-button greenbg_accordion" type="button"
                            data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true"
                            aria-controls="collapseOne">
                        Configurations
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
                        data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        Configurations 
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwo">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        Radon Appointment Manage
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo"
                        data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="checkDefault">
                            <label class="form-check-label" for="checkDefault">
                                Show Radon Schedule
                            </label>
                        </div>
                    </div>
                </div>
            </div> -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingThree">
                    <div class="position-relative">
                        <button class="accordion-button deepassbg_accordion" type="button"
                                data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false"
                                aria-controls="collapseThree">
                            Inspector
                        </button>
                        <i class="fas fa-search inspector-search-icon" id="inspectorSearchIcon" title="Search inspectors"></i>
                    </div>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse show"
                        aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                    <div class="accordion-body p-0">
                        <!-- Inspector Search Input (Initially Hidden) -->
                        <div class="inspector-search-container" id="inspectorSearchContainer" style="display: none;">
                            <div class="p-2 border-bottom">
                                <div class="position-relative">
                                    <input type="text" class="form-control" id="inspectorSearch" placeholder="Search inspectors..." />
                                    <a href="#" class="inspector-search-clear" id="inspectorSearchClear" style="display: none;">&times;</a>
                                </div>
                            </div>
                        </div>
                        <div class="inspector_leftlist">
                            <ul>
                                @if($show_tenant_dropdown ?? false)
                                    <!-- Super Admin: Show message to select tenant first -->
                                    @if($tenant_id)
                                        <!-- If tenant is selected, show inspectors for that tenant -->
                                        @if(isset($inspectors) && $inspectors->count() > 0)
                                            @foreach($inspectors as $inspector)
                                                <li class="inspector-item" data-inspector-id="{{ $inspector->id }}">
                                                    <div class="inspector-profile">
                                                        @php
                                                            $avatarUrl = asset('images/inspector_01.jpg'); // Default
                                                            if ($inspector->avatar && is_array($inspector->avatar) && isset($inspector->avatar['thumb'])) {
                                                                $avatarUrl = $inspector->avatar['thumb'];
                                                            } elseif ($inspector->avatar && is_string($inspector->avatar)) {
                                                                $avatarUrl = $inspector->avatar;
                                                            }
                                                        @endphp
                                                        <img src="{{ $avatarUrl }}" 
                                                                alt="{{ $inspector->full_name }}" 
                                                                class="inspector-avatar"
                                                                onerror="this.src='{{ asset("images/inspector_01.jpg") }}'" />
                                                        <span class="inspector-name">{{ $inspector->full_name }}</span>
                                                        <span class="status-indicator" style="background-color: {{ $inspector->calendar_color ?? '#007bff' }}; width: 12px; height: 12px; border-radius: 50%; display: inline-block;"></span>
                                                    </div>
                                                </li>
                                            @endforeach
                                        @else
                                            <li class="text-center py-3">
                                                <span class="text-muted">No inspectors found for selected tenant</span>
                                            </li>
                                        @endif
                                    @else
                                        <!-- No tenant selected -->
                                        <li class="text-center py-3">
                                            <span class="text-muted">Select a tenant to view inspectors</span>
                                        </li>
                                    @endif
                                @else
                                    <!-- Regular tenant user: Show inspectors as before -->
                                    @if(isset($inspectors) && $inspectors->count() > 0)
                                        @foreach($inspectors as $inspector)
                                            <li class="inspector-item" data-inspector-id="{{ $inspector->id }}">
                                                <div class="inspector-profile">
                                                    @php
                                                        $avatarUrl = asset('images/inspector_01.jpg'); // Default
                                                        if ($inspector->avatar && is_array($inspector->avatar) && isset($inspector->avatar['thumb'])) {
                                                            $avatarUrl = $inspector->avatar['thumb'];
                                                        } elseif ($inspector->avatar && is_string($inspector->avatar)) {
                                                            $avatarUrl = $inspector->avatar;
                                                        }
                                                    @endphp
                                                    <img src="{{ $avatarUrl }}" 
                                                            alt="{{ $inspector->full_name }}" 
                                                            class="inspector-avatar"
                                                            onerror="this.src='{{ asset("images/inspector_01.jpg") }}'" />
                                                    <span class="inspector-name">{{ $inspector->full_name }}</span>
                                                    <span class="status-indicator" style="background-color: {{ $inspector->calendar_color ?? '#007bff' }}; width: 12px; height: 12px; border-radius: 50%; display: inline-block;"></span>
                                                    <div class="inspector-actions">
                                                        <!-- <button class="btn-action">
                                                            <i class="fas fa-ellipsis-v"></i>
                                                        </button> -->
                                                    </div>
                                                </div>
                                            </li>
                                        @endforeach
                                    @else
                                        <li class="text-center py-3">
                                            <span class="text-muted">No inspectors found</span>
                                        </li>
                                    @endif
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingFour">
                    <button class="accordion-button serviceslefttitle_bg" type="button"
                            data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false"
                            aria-controls="collapseFour">
                        Service
                    </button>
                </h2>
                <div id="collapseFour" class="accordion-collapse collapse show"
                        aria-labelledby="headingFour" data-bs-parent="#accordionExample">
                    <div class="accordion-body p-0" id="services-list">
                        @if($show_tenant_dropdown ?? false)
                            <!-- Super Admin: Show message to select tenant first -->
                            @if($tenant_id)
                                <!-- If tenant is selected, show services for that tenant -->
                                @if(isset($services) && $services->count() > 0)
                                    @foreach($services as $service)
                                        <div class="form-check left_service_list">
                                            <input class="form-check-input service-filter" type="checkbox" value="{{ $service->id }}" id="service{{ $service->id }}">
                                            <label class="form-check-label" for="service{{ $service->id }}">
                                                {{ $service->service_name }}
                                            </label>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="text-center py-3">
                                        <span class="text-muted">No services found for selected tenant</span>
                                    </div>
                                @endif
                            @else
                                <!-- No tenant selected -->
                                <div class="text-center py-3">
                                    <span class="text-muted">Select a tenant to view services</span>
                                </div>
                            @endif
                        @else
                            <!-- Regular tenant user: Show services as normal -->
                            @if(isset($services) && $services->count() > 0)
                                @foreach($services as $service)
                                    <div class="form-check left_service_list">
                                        <input class="form-check-input service-filter" type="checkbox" value="{{ $service->id }}" id="service{{ $service->id }}">
                                        <label class="form-check-label" for="service{{ $service->id }}">
                                            {{ $service->service_name }}
                                        </label>
                                    </div>
                                @endforeach
                            @else
                                <div class="text-center py-3">
                                    <span class="text-muted">No services found</span>
                                </div>
                            @endif
                        @endif
                    </div>
                </div>
            </div>
            <!-- <div class="accordion-item">
                <h2 class="accordion-header" id="headingFive">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                        Equipment
                    </button>
                </h2>
                <div id="collapseFive" class="accordion-collapse collapse show"
                        aria-labelledby="headingFive" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <p class="text-center mb-0">
                            No Equipment Available
                        </p>
                    </div>
                </div>
            </div> -->
        </div>
    </div>

    <!-- Main Content Area -->
    <div class="col-lg-9 col-md-8">
        @if($show_tenant_dropdown ?? false)
        <!-- Super Admin Tenant Selection -->
        <div class="white_box mb-2">
            <div class="row">
                <div class="col-lg-4 col-md-6">
                    <div class="form-group mb-3">
                        <label for="tenantSelect" class="form-label">Select Tenant <span class="text-danger">*</span></label>
                        <select class="form-select" id="tenantSelect" aria-label="Tenant selection">
                            <option value="">Select Tenant</option>
                            @foreach($tenant_list as $id => $name)
                                <option value="{{ $id }}" {{ $tenant_id == $id ? 'selected' : '' }}>
                                    {{ $name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>
        @endif
        
        <!-- Top Search Filters -->
        <div class="white_box mb-2">
            <div class="row">
                <div class="col-lg-3 col-md-6">
                    <div class="form-group mb-3">
                        <label for="typeFilter" class="form-label">Type</label>
                        <select class="form-select" id="typeFilter" aria-label="Type filter">
                            <option value="">All contacts</option>
                            <option value="customers">Customers</option>
                            <option value="agents">Agents</option>
                        </select>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6">
                    <div class="form-group mb-3">
                        <label for="customerAgentSearch" class="form-label">Prior customer/Agent Search</label>
                        <div class="customer-agent-search-container">
                            <input type="text" class="form-control" id="customerAgentSearch" placeholder="Search customer/agent..." />
                            <button type="button" class="customer-agent-search-clear" id="customerAgentSearchClear">&times;</button>
                            <div class="customer-agent-suggestions" id="customerAgentSuggestions"></div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-3 col-md-6">
                    <div class="form-group mb-3">
                        <label for="addressSearch" class="form-label">Search Inspection (Address)</label>
                        <div class="address-search-container">
                            <input type="text" class="form-control" id="addressSearch" placeholder="Search by address..." />
                            <button type="button" class="address-search-clear" id="addressSearchClear">&times;</button>
                            <div class="address-suggestions" id="addressSuggestions"></div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="form-group mb-3">
                        <label for="statusFilter" class="form-label">Status</label>
                        <select class="form-select" id="statusFilter" aria-label="Status filter">
                            <option value="">Select</option>
                            <option value="filter_by_cancelled">Filter by cancelled</option>
                            <option value="filter_by_deleted">Filter by deleted</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="d-flex align-items-center justify-content-between mob-top">
                <div class="contact_btns d-flex align-items-center gap-3">
                    <!-- <a href="javascript:void(0);" class="inow we again start work on calendar month and week view. please fix time off add issue from available action modal. when i add time off for 9:00 slot and then add for 14:00 then it is working fine but if i added 14:00 slot time off first then try to add 9:00 then showing warning "This employee already has time off scheduled for the selected date range. Please choose different dates."mport_exportbtn btn">Quick Quotes</a> -->
                    <a href="javascript:void(0);" class="add_btn btn" onclick="showEmployeeTimeOffModal()">Employee Time OFF</a>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="showAvailabilitySlots">
                        <label class="form-check-label" for="showAvailabilitySlots">
                            Show Available Slots
                        </label>
                    </div>
                    <!-- <a href="javascript:void(0);" class="filter_btn btn w-auto">Incomplete Inspections</a> -->
                </div>
                <!-- <div class="contact_btns schudle_downloadtxt">
                    <a href="javascript:void(0);" class="delete_btn btn">
                        <img src="{{ asset('images/download.svg') }}" alt="Download" /> Download
                    </a>
                </div> -->
                <div class="contact_btns schudle_downloadtxt">
                    <a href="javascript:void(0);" class="delete_btn btn" onclick="location.reload();">
                        <i class="fas fa-undo-alt"></i> Reset
                    </a>
                </div>
            </div>
        </div>

        <!-- Calendar Section -->
        <div class="mb-2">
<div class="servicestitle company_schudletitlebg">
    <div class="d-flex align-items-center">
        <h3 class="d-flex align-items-center gap-2">
            <img src="{{ asset('images/calendar.svg') }}" alt="Calendar" />
            <span id="calendar-title">{{ \Carbon\Carbon::now()->format('F Y') }}</span>
        </h3>
        <div class="monthle_weeklybtn">            
            <a href="javascript:void(0);" id="week-view-btn" class="active">
                <span class="circel_icon"></span> Week
            </a>
            <a href="javascript:void(0);" id="month-view-btn">
                <span class="circel_icon"></span> Month
            </a>
        </div>
    </div>
    <div class="prev_nxt_week">
        <a href="javascript:void(0);" class="prev_week" id="prev-period">
            <img src="{{ asset('images/prev.svg') }}" alt="Previous" /> <span id="prev-text">Previous Month</span>
        </a>
        <span class="present_week" id="current-period">{{ \Carbon\Carbon::now()->format('F Y') }}</span>
        <a href="javascript:void(0);" class="next_week" id="next-period">
            <span id="next-text">Next Month</span> <img src="{{ asset('images/next.svg') }}" alt="Next" />
        </a>
    </div>
    
    <!-- <div class="contact_btns pe-2">
        <a href="javascript:void(0);" class="view-toggle" data-view="grid">
            <img src="{{ asset('images/grid_viewactive.svg') }}" alt="Grid View" />
        </a>
        <a href="javascript:void(0);" class="view-toggle" data-view="list">
            <img src="{{ asset('images/list_view.svg') }}" alt="List View" />
        </a>
        <a href="javascript:void(0);">
            <img src="{{ asset('images/vertical_menu.svg') }}" alt="Menu" />
        </a>
    </div> -->
</div>

<!-- Calendar Content -->
<div class="calendar-container">
    <div class="calendar-loading-overlay" id="calendar-loading" style="display: none;">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
    
    <!-- Monthly Calendar View -->
    <div id="monthly-calendar" class="monthly_calendar" style="display: none;">
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">Sunday</th>
                        <th scope="col">Monday</th>
                        <th scope="col">Tuesday</th>
                        <th scope="col">Wednesday</th>
                        <th scope="col">Thursday</th>
                        <th scope="col">Friday</th>
                        <th scope="col">Saturday</th>
                    </tr>
                </thead>
                <tbody id="monthly-calendar-body">
                    <tr>
                        <td>
                            <div class="calendar-date">1</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date">2</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date">3</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date">4</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date">5</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date">6</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date">7</div>
                            <div class="calendar-events"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="calendar-date">8</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date">9</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date">10</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date">11</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date">12</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date">13</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date">14</div>
                            <div class="calendar-events"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="calendar-date">15</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date">16</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date">17</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date">18</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date">19</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date">20</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date">21</div>
                            <div class="calendar-events"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="calendar-date">22</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date today">23</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date">24</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date">25</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date">26</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date">27</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date">28</div>
                            <div class="calendar-events"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="calendar-date">29</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date">30</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date other-month">1</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date other-month">2</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date other-month">3</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date other-month">4</div>
                            <div class="calendar-events"></div>
                        </td>
                        <td>
                            <div class="calendar-date other-month">5</div>
                            <div class="calendar-events"></div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Weekly Calendar View -->
    <div id="weekly-calendar" class="weekly_calendar">
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">&nbsp;</th>
                        <th scope="col" id="day-1">Mon 04</th>
                        <th scope="col" id="day-2">Tue 05</th>
                        <th scope="col" id="day-3">Wed 06</th>
                        <th scope="col" id="day-4">Thu 07</th>
                        <th scope="col" id="day-5">Fri 08</th>
                        <th scope="col" id="day-6">Sat 09</th>
                        <th scope="col" id="day-7">Sun 10</th>
                    </tr>
                </thead>
                <tbody id="weekly-calendar-body">
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="position-relative">
                            <span class="time_event">8:00 AM</span>
                        </td>
                        <td>
                            <div class="lightbluebg_calendartd user_event">
                                <div class="upser_pic">
                                    <img src="{{ asset('images/inspector_01.jpg') }}" alt="Inspector" />
                                </div>
                                <h5>Ivan J Miranda</h5>
                                <p>8:00 AM - 9:00 AM</p>
                            </div>
                        </td>
                        <td>
                            <div class="lightskybg_calendartd user_event">
                                <div class="upser_pic">
                                    <img src="{{ asset('images/inspector_02.jpg') }}" alt="Inspector" />
                                </div>
                                <h5>Luis Barrera</h5>
                                <p>8:00 AM - 5:00 AM</p>
                            </div>
                        </td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>
                            <div class="lightgreenbg_calendartd user_event">
                                <div class="upser_pic">
                                    <img src="{{ asset('images/inspector_03.jpg') }}" alt="Inspector" />
                                </div>
                                <h5>Steve Montalvo</h5>
                                <p>8:00 AM - 9:00 AM</p>
                            </div>
                        </td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="position-relative">
                            <span class="time_event">9:00 AM</span>
                        </td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="position-relative">
                            <span class="time_event">10:00 AM</span>
                        </td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="position-relative">
                            <span class="time_event">11:00 AM</span>
                        </td>
                        <td>
                            <div class="lightgreenbg_calendartd user_event">
                                <div class="upser_pic">
                                    <img src="{{ asset('images/inspector_01.jpg') }}" alt="Inspector" />
                                </div>
                                <h5>Steve Montalvo</h5>
                                <p>11:00 AM - 12:00 PM</p>
                            </div>
                        </td>
                        <td>
                            <div class="lightskybg_calendartd user_event">
                                <div class="upser_pic">
                                    <img src="{{ asset('images/inspector_02.jpg') }}" alt="Inspector" />
                                </div>
                                <h5>Luis Barrera</h5>
                                <p>11:00 AM - 12:00 PM</p>
                            </div>
                        </td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>
                            <div class="unscheduled">
                                <h6>Unscheduled</h6>
                                <p>12:00 PM - 1:00 PM</p>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="position-relative">
                            <span class="time_event">12:00 PM</span>
                        </td>
                        <td>
                            <div class="lightgreenbg_calendartd user_event">
                                <div class="upser_pic">
                                    <img src="{{ asset('images/inspector_02.jpg') }}" alt="Inspector" />
                                </div>
                                <h5>Luis Barrera</h5>
                                <p>12:00 PM - 1:00 PM</p>
                            </div>
                        </td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="position-relative">
                            <span class="time_event">1:00 PM</span>
                        </td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>
                            <div class="lightreadbg_calendartd user_event">
                                <div class="upser_pic">
                                    <img src="{{ asset('images/inspector_03.jpg') }}" alt="Inspector" />
                                </div>
                                <h5>Rodrigo Miranda</h5>
                                <p class="timeoff_text"><img src="{{ asset('images/time_off.svg') }}" /> Time Off</p>
                            </div>
                        </td>
                        <td>
                            <div class="lightbluebg_calendartd user_event">
                                <div class="upser_pic">
                                    <img src="{{ asset('images/inspector_01.jpg') }}" alt="Inspector" />
                                </div>
                                <h5>Ivan J Miranda</h5>
                                <p>9:00 AM - 9:00 AM</p>
                            </div>
                        </td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="position-relative">
                            <span class="time_event">2:00 PM</span>
                        </td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="position-relative">
                            <span class="time_event">3:00 PM</span>
                        </td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="position-relative">
                            <span class="time_event">4:00 PM</span>
                        </td>
                        <td>
                            <div class="lightbluebg_calendartd user_event">
                                <div class="upser_pic">
                                    <img src="{{ asset('images/inspector_01.jpg') }}" alt="Inspector" />
                                </div>
                                <h5>Ivan J Miranda</h5>
                                <p>3:00 PM - 5:00 PM</p>
                            </div>
                        </td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>
                            <div class="lightgreenbg_calendartd user_event">
                                <div class="upser_pic">
                                    <img src="{{ asset('images/inspector_02.jpg') }}" alt="Inspector" />
                                </div>
                                <h5>Luis Barrera</h5>
                                <p>4:00 PM - 5:00 PM</p>
                            </div>
                        </td>
                        <td>&nbsp;</td>
                        <td>
                            <div class="lightbluebg_calendartd user_event">
                                <div class="upser_pic">
                                    <img src="{{ asset('images/inspector_01.jpg') }}" alt="Inspector" />
                                </div>
                                <h5>Ivan J Miranda</h5>
                                <p>4:00 PM - 5:00 PM</p>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="position-relative">
                            <span class="time_event">5:00 PM</span>
                        </td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
        </div>
    </div>
</div>


@endsection

@push('page_script')
@php($placeApiKey = \Config::get('settings.address_auto_populate_key'))

{{-- Include Schedule Details Modal Component --}}
@include('admin.components.schedule-details-modal-script')

<style>
.schedule-slot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin: 4px 0;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    background-color: #f8f9fa;
    transition: background-color 0.2s ease;
}

.schedule-slot:hover {
    background-color: #e9ecef;
}

.schedule-slot .detail-text {
    flex: 1;
    margin-right: 8px;
}

.schedule-slot .btn-xs {
    padding: 2px 6px;
    font-size: 10px;
    border-width: 1px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.schedule-slot:hover .btn-xs {
    opacity: 1;
}

.schedule-slot .fas.fa-times {
    font-size: 8px;
}

.timeoff-card .detail-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.timeoff-card .detail-item i {
    margin-right: 8px;
    width: 16px;
}

/* Tooltip separator for time-off details */
.tooltip-separator {
    margin: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Time-off specific tooltip styles */
.tooltip-time-off-title {
    font-weight: 600;
    color: #ffc107; /* Golden color to highlight */
}

.tooltip-time-off-description {
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
}
</style>

<script>
// Global variables for calendar functionality
let schedules = [];
// timeOffs variable no longer needed - time-off is handled via schedule.is_time_off
let currentView = 'week';
let currentDate = new Date();

// Global utility functions - defined early so they're available everywhere
window.getWeekStart = function(date) {
    const d = new Date(date);
    const day = d.getDay();
    const diff = d.getDate() - day + (day === 0 ? -6 : 1); // Adjust for Monday start
    // Create a new date object instead of mutating the original
    return new Date(d.getFullYear(), d.getMonth(), diff);
};

// Global convertTo12Hour function
window.convertTo12Hour = function(time24) {
    if (!time24) return 'No time';
    
    // Handle different time formats (HH:MM, HH:MM:SS)
    const timeParts = time24.split(':');
    if (timeParts.length < 2) return time24; // Return as-is if not in expected format
    
    let hour = parseInt(timeParts[0]);
    const minute = timeParts[1];
    
    if (isNaN(hour)) return time24; // Return as-is if hour is not a number
    
    const period = hour >= 12 ? 'PM' : 'AM';
    
    // Convert hour to 12-hour format
    if (hour === 0) {
        hour = 12; // Midnight
    } else if (hour > 12) {
        hour = hour - 12; // Convert PM hours
    }
    
    return `${hour}:${minute} ${period}`;
};

// Helper function to format date to MM-DD-YYYY
window.formatDateToMMDDYYYY = function(dateString) {
    if (!dateString) return 'No date';
    
    // Handle different date string formats
    let cleanDateString = dateString;
    
    // If the string contains 'T', extract only the date part
    if (typeof dateString === 'string' && dateString.includes('T')) {
        cleanDateString = dateString.split('T')[0];
    }
    
    const date = new Date(cleanDateString);
    if (isNaN(date.getTime())) return dateString; // Return as-is if invalid date
    
    const month = String(date.getMonth() + 1).padStart(2, '0'); // Month is 0-indexed
    const day = String(date.getDate()).padStart(2, '0');
    const year = date.getFullYear();
    
    return `${month}-${day}-${year}`;
};

// Helper function to convert 24-hour time to simple HH:MM format
window.formatTimeTo24Hour = function(time24) {
    if (!time24) return 'No time';
    
    // Handle datetime string (e.g., "2025-10-30T09:00")
    if (time24.includes('T')) {
        time24 = time24.split('T')[1];
    }
    
    // Handle different time formats (HH:MM, HH:MM:SS)
    const timeParts = time24.split(':');
    if (timeParts.length < 2) return time24; // Return as-is if not in expected format
    
    const hour = timeParts[0].padStart(2, '0');
    const minute = timeParts[1].padStart(2, '0');
    
    return `${hour}:${minute}`;
};

// Global updateNavigationText function
window.updateNavigationText = function() {
    const prevText = document.getElementById('prev-text');
    const nextText = document.getElementById('next-text');
    const currentPeriod = document.getElementById('current-period');
    
    if (currentView === 'month') {
        if (prevText) prevText.textContent = 'Previous Month';
        if (nextText) nextText.textContent = 'Next Month';
        if (currentPeriod) {
            currentPeriod.textContent = currentDate.toLocaleDateString('en-US', {
                month: 'long',
                year: 'numeric'
            });
        }
    } else {
        if (prevText) prevText.textContent = 'Previous Week';
        if (nextText) nextText.textContent = 'Next Week';
        const weekStart = window.getWeekStart(currentDate);
        const weekEnd = new Date(weekStart);
        weekEnd.setDate(weekEnd.getDate() + 6);
        if (currentPeriod) {
            currentPeriod.textContent = `${weekStart.toLocaleDateString('en-US', {
                day: '2-digit',
                month: 'long',
                year: 'numeric'
            })} - ${weekEnd.toLocaleDateString('en-US', {
                day: '2-digit',
                month: 'long',
                year: 'numeric'
            })}`;
        }
    }
};

document.addEventListener('DOMContentLoaded', function() {
    let selectedInspectors = []; // Track selected inspectors for filtering
    let selectedServices = []; // Track selected services for filtering
    let inspectorColors = {}; // Store inspector colors mapping
    let selectedAddress = ''; // Track selected address for filtering
    let selectedCustomerAgent = ''; // Track selected customer/agent for filtering
    let selectedStatusFilter = ''; // Track selected status filter
    let showAvailabilitySlots = false; // Track availability slots visibility
    let addressSuggestionsTimeout; // Debounce timeout for address search
    let customerAgentSuggestionsTimeout; // Debounce timeout for customer/agent search
    
    // Initialize calendar
    window.updateNavigationText();
    
    @if($show_tenant_dropdown ?? false)
    // Super Admin: Don't load schedule data initially - wait for tenant selection
    @else
    // Regular Admin: Load inspectors first, then schedule data
    loadInspectorsWithColors().then(() => {
        loadScheduleData();
    });
    @endif
    
    loadInspectorsList(); // Load initial inspectors
    
    // Initialize service event listeners (for regular users with server-side rendered services)
    @if(!($show_tenant_dropdown ?? false))
    // Ensure selectedServices starts empty
    selectedServices = [];
    
    setTimeout(() => {
        attachServiceEventListeners();
    }, 100); // Small delay to ensure DOM is fully ready
    @endif
    
    // Initialize address search
    initializeAddressSearch();
    
    // Initialize customer/agent search
    initializeCustomerAgentSearch();
    
    // Initialize inspector search
    initializeInspectorSearch();
    
    // Tenant selection handler for Super Admin
    const tenantSelect = document.getElementById('tenantSelect');
    if (tenantSelect) {
        tenantSelect.addEventListener('change', function() {
            const selectedTenantId = this.value;
            
            if (selectedTenantId) {
                // Clear address search when tenant changes
                const addressInput = document.getElementById('addressSearch');
                const container = document.querySelector('.address-search-container');
                if (addressInput) {
                    addressInput.value = '';
                    selectedAddress = '';
                    container.classList.remove('has-value');
                }
                
                // Clear customer/agent search when tenant changes
                const customerAgentInput = document.getElementById('customerAgentSearch');
                const customerAgentContainer = document.querySelector('.customer-agent-search-container');
                if (customerAgentInput) {
                    customerAgentInput.value = '';
                    selectedCustomerAgent = '';
                    customerAgentContainer.classList.remove('has-value');
                }
                
                // Clear status filter when tenant changes
                const statusFilterSelect = document.getElementById('statusFilter');
                if (statusFilterSelect) {
                    statusFilterSelect.value = '';
                    selectedStatusFilter = '';
                }
                
                // Clear inspector search when tenant changes
                const inspectorSearchInput = document.getElementById('inspectorSearch');
                const inspectorSearchContainer = document.getElementById('inspectorSearchContainer');
                const inspectorSearchIcon = document.getElementById('inspectorSearchIcon');
                const inspectorClearBtn = document.getElementById('inspectorSearchClear');
                

                
                if (inspectorSearchInput && inspectorSearchContainer && inspectorSearchIcon) {
                    inspectorSearchInput.value = '';
                    inspectorSearchContainer.style.display = 'none';
                    inspectorSearchIcon.classList.remove('active');

                    if (inspectorClearBtn) {
                        inspectorClearBtn.style.display = 'none';
                    }
                }
                
                // Load inspectors for the selected tenant
                loadInspectorsByTenant(selectedTenantId);
                // Load services for the selected tenant
                loadServicesByTenant(selectedTenantId);
                // Reload calendar with new tenant
                loadScheduleData();
            } else {
                // Clear inspectors and services list if no tenant selected
                clearInspectorsList();
                clearServicesList();
            }
        });
    }
     
    // Type filter change handler
    const typeFilter = document.getElementById('typeFilter');
    if (typeFilter) {
        typeFilter.addEventListener('change', function() {
            const selectedType = this.value;
            
            // Clear customer/agent search when type changes
            const customerAgentInput = document.getElementById('customerAgentSearch');
            const customerAgentContainer = document.querySelector('.customer-agent-search-container');
            if (customerAgentInput && customerAgentInput.value) {
                customerAgentInput.value = '';
                selectedCustomerAgent = '';
                if (customerAgentContainer) {
                    customerAgentContainer.classList.remove('has-value');
                }
                hideCustomerAgentSuggestions();
            }
            
            // Reload calendar with new type filter
            loadScheduleData();
        });
    }
    
    // Status filter change handler
    const statusFilterDropdown = document.getElementById('statusFilter');
    if (statusFilterDropdown) {
        statusFilterDropdown.addEventListener('change', function() {
            const selectedStatus = this.value;
            
            selectedStatusFilter = selectedStatus;
            
            console.log('🔄 Status Filter Changed:', selectedStatus);
            
            // Reload calendar with new status filter
            loadScheduleData();
        });
    }
    
    // Function to toggle filter elements based on "Show Available Slots" state
    function toggleFilterElements(disabled) {
        // Disable/Enable service checkboxes and section
        const serviceCheckboxes = document.querySelectorAll('.service-filter');
        const servicesList = document.getElementById('services-list');
        const serviceAccordionButton = document.querySelector('[data-bs-target="#collapseFour"]');
        
        serviceCheckboxes.forEach(checkbox => {
            checkbox.disabled = disabled;
            checkbox.style.opacity = disabled ? '0.5' : '1';
        });
        
        if (servicesList) {
            servicesList.style.opacity = disabled ? '0.5' : '1';
            servicesList.style.pointerEvents = disabled ? 'none' : 'auto';
        }
        
        if (serviceAccordionButton) {
            serviceAccordionButton.style.opacity = disabled ? '0.7' : '1';
            if (disabled) {
                serviceAccordionButton.style.cursor = 'not-allowed';
                serviceAccordionButton.title = 'Service filtering is disabled when showing available slots';
            } else {
                serviceAccordionButton.style.cursor = 'pointer';
                serviceAccordionButton.title = '';
            }
        }
        
        // Disable/Enable customer/agent search
        const customerAgentSearch = document.getElementById('customerAgentSearch');
        if (customerAgentSearch) {
            customerAgentSearch.disabled = disabled;
            customerAgentSearch.style.opacity = disabled ? '0.5' : '1';
            if (disabled) {
                customerAgentSearch.placeholder = 'Disabled when showing available slots';
            } else {
                customerAgentSearch.placeholder = 'Search customer/agent...';
            }
        }
        
        // Disable/Enable type filter
        const typeFilter = document.getElementById('typeFilter');
        if (typeFilter) {
            typeFilter.disabled = disabled;
            typeFilter.style.opacity = disabled ? '0.5' : '1';
        }
        
        // Disable/Enable address search
        const addressSearch = document.getElementById('addressSearch');
        if (addressSearch) {
            addressSearch.disabled = disabled;
            addressSearch.style.opacity = disabled ? '0.5' : '1';
            if (disabled) {
                addressSearch.placeholder = 'Disabled when showing available slots';
            } else {
                addressSearch.placeholder = 'Search by address...';
            }
        }
        
        // Disable/Enable status filter
        const statusFilter = document.getElementById('statusFilter');
        if (statusFilter) {
            statusFilter.disabled = disabled;
            statusFilter.style.opacity = disabled ? '0.5' : '1';
        }
        
        // Add visual feedback to the entire filter section
        const filterRows = document.querySelectorAll('.white_box .row');
        filterRows.forEach(row => {
            if (row.querySelector('#customerAgentSearch, #typeFilter, #addressSearch, #statusFilter')) {
                row.style.opacity = disabled ? '0.6' : '1';
                row.style.pointerEvents = disabled ? 'none' : 'auto';
            }
        });
        
        // Add/remove filter disabled message
        let filterMessage = document.getElementById('filter-disabled-message');
        if (disabled) {
            if (!filterMessage) {
                filterMessage = document.createElement('div');
                filterMessage.id = 'filter-disabled-message';
                filterMessage.className = 'alert alert-info mb-2';
                filterMessage.innerHTML = '<i class="fas fa-info-circle"></i> Other filters are disabled when "Show Available Slots" is active. Only inspector filtering is available.';
                
                // Insert the message before the calendar section
                const calendarSection = document.querySelector('.mb-2');
                if (calendarSection) {
                    calendarSection.parentNode.insertBefore(filterMessage, calendarSection);
                }
            }
        } else {
            if (filterMessage) {
                filterMessage.remove();
            }
        }
        
        // Clear filters when disabling them
        if (disabled) {
            // Clear service selections
            serviceCheckboxes.forEach(checkbox => {
                checkbox.checked = false;
            });
            selectedServices = [];
            
            // Clear customer/agent search
            if (customerAgentSearch) {
                customerAgentSearch.value = '';
            }
            selectedCustomerAgent = '';
            
            // Clear type filter
            if (typeFilter) {
                typeFilter.value = '';
            }
            
            // Clear address search  
            if (addressSearch) {
                addressSearch.value = '';
            }
            selectedAddress = '';
            
            // Clear status filter
            if (statusFilter) {
                statusFilter.value = '';
            }
            selectedStatusFilter = '';
        }
    }

    // Availability slots checkbox handler
    const availabilitySlotsCheckbox = document.getElementById('showAvailabilitySlots');
    if (availabilitySlotsCheckbox) {
        availabilitySlotsCheckbox.addEventListener('change', function() {
            showAvailabilitySlots = this.checked;
            
            // Toggle filter elements based on checkbox state
            toggleFilterElements(this.checked);
            
            // Re-render calendar with current data using new filter
            if (currentView === 'month') {
                renderMonthlyCalendar();
            } else {
                renderWeeklyCalendar();
            }
        });
    }
    
    // Inspector filtering is now handled by attachInspectorEventListeners() function
    
    // View toggle buttons
    const monthViewBtn = document.getElementById('month-view-btn');
    const weekViewBtn = document.getElementById('week-view-btn');
    
    if (monthViewBtn) {
        monthViewBtn.addEventListener('click', function(e) {
            e.preventDefault();
            window.switchView('month');
        });
    }
    
    if (weekViewBtn) {
        weekViewBtn.addEventListener('click', function(e) {
            e.preventDefault();
            window.switchView('week');
        });
    }
    
    // Navigation buttons
    document.getElementById('prev-period').addEventListener('click', function() {
        navigatePrevious();
    });
    
    document.getElementById('next-period').addEventListener('click', function() {
        navigateNext();
    });
    

    
    function navigatePrevious() {
        if (currentView === 'month') {
            currentDate.setMonth(currentDate.getMonth() - 1);
        } else {
            currentDate.setDate(currentDate.getDate() - 7);
        }
        window.updateNavigationText();
        updateCalendarTitle();
        loadScheduleData();
    }
    
    function navigateNext() {
        if (currentView === 'month') {
            currentDate.setMonth(currentDate.getMonth() + 1);
        } else {
            currentDate.setDate(currentDate.getDate() + 7);
        }
        window.updateNavigationText();
        updateCalendarTitle();
        loadScheduleData();
    }
    

    
    function updateCalendarTitle() {
        const titleElement = document.getElementById('calendar-title');
        if (titleElement) {
            titleElement.textContent = currentDate.toLocaleDateString('en-US', {
                month: 'long',
                year: 'numeric'
            });
        }
    }
    
    function loadInspectorsList() {
        // For regular tenant users, inspectors are already loaded server-side
        // This function is mainly for initial setup
        attachInspectorEventListeners();
    }
    
    function loadInspectorsWithColors() {
        // Load inspectors with color data for regular admin users
        const params = new URLSearchParams({
            format: 'json',
            load_inspectors_only: '1'
        });

        @if(session('tenant_id'))
        params.append('tenant_id', '{{ session('tenant_id') }}');
        @endif
        
        return fetch(`{{ route('admin.schedule.calendar') }}?${params}`, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success && data.inspectors) {
                // Store inspector colors from server data
                data.inspectors.forEach(inspector => {
                    const fullName = inspector.full_name || trim((inspector.first_name || '') + ' ' + (inspector.last_name || ''));
                    inspectorColors[fullName] = inspector.calendar_color || '#7F1C1C';
                });
                return data.inspectors;
            }
            return [];
        })
        .catch(error => {
            return [];
        });
    }
    
    function loadInspectorsByTenant(tenantId) {
        if (!tenantId) {
            clearInspectorsList();
            return;
        }
        

        
        // Show loading state
        const inspectorsList = document.querySelector('.inspector_leftlist ul');
        if (inspectorsList) {
            inspectorsList.innerHTML = '<li class="text-center py-3"><span class="text-muted">Loading inspectors...</span></li>';
        }
        
        // Use Schedule model's getInspectorsList method through calendar endpoint
        const params = new URLSearchParams({
            format: 'json',
            tenant_id: tenantId,
            load_inspectors_only: '1'
        });
        
        fetch(`{{ route('admin.schedule.calendar') }}?${params}`, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.success && data.inspectors) {

                renderInspectorsList(data.inspectors);
                // Inspector search functionality is already initialized on page load
            } else {

                showInspectorsError('Failed to load inspectors');
            }
        })
        .catch(error => {

            showInspectorsError('Error loading inspectors');
        });
    }
    
    function renderInspectorsList(inspectors) {
        const inspectorsList = document.querySelector('.inspector_leftlist ul');
        if (!inspectorsList) return;
        
        // Clear current inspectors and colors mapping
        selectedInspectors = [];
        inspectorColors = {};
        
        if (inspectors.length === 0) {
            inspectorsList.innerHTML = '<li class="text-center py-3"><span class="text-muted">No inspectors found</span></li>';
            return;
        }
        
        const inspectorsHtml = inspectors.map(inspector => {
            // Handle both formats: from User model (with avatar) and Schedule model (without avatar)
            const avatarUrl = inspector.avatar && inspector.avatar.thumb 
                ? inspector.avatar.thumb 
                : '{{ asset("images/inspector_01.jpg") }}';
            
            const fullName = inspector.full_name || trim((inspector.first_name || '') + ' ' + (inspector.last_name || ''));
            const calendarColor = inspector.calendar_color || '#7F1C1C';
            
            // Store inspector color mapping
            inspectorColors[fullName] = calendarColor;
            
            return `
                <li class="inspector-item" data-inspector-id="${inspector.id}">
                    <div class="inspector-profile">
                        <img src="${avatarUrl}" 
                             alt="${fullName}" 
                             class="inspector-avatar"
                             onerror="this.src='{{ asset("images/inspector_01.jpg") }}'">
                        <span class="inspector-name">${fullName}</span>
                        <span class="status-indicator" style="background-color: ${calendarColor}; width: 12px; height: 12px; border-radius: 50%; display: inline-block;"></span>
                    </div>
                </li>
            `;
        }).join('');
        
        inspectorsList.innerHTML = inspectorsHtml;
        
        // Attach event listeners to new inspector items
        attachInspectorEventListeners();
        
        // Clear inspector search after loading new inspectors
        const inspectorSearchInput = document.getElementById('inspectorSearch');
        const inspectorSearchContainer = document.getElementById('inspectorSearchContainer');
        const inspectorSearchIcon = document.getElementById('inspectorSearchIcon');
        const inspectorClearBtn = document.getElementById('inspectorSearchClear');
        if (inspectorSearchInput && inspectorSearchContainer && inspectorSearchIcon) {
            inspectorSearchInput.value = '';
            inspectorSearchContainer.style.display = 'none';
            inspectorSearchIcon.classList.remove('active');
            if (inspectorClearBtn) {
                inspectorClearBtn.style.display = 'none';
            }
        }
    }
    
    function attachInspectorEventListeners() {
        document.querySelectorAll('.inspector-item').forEach(item => {
            // Remove existing listeners to avoid duplicates
            item.replaceWith(item.cloneNode(true));
        });
        
        // Attach new listeners
        document.querySelectorAll('.inspector-item').forEach(item => {
            item.addEventListener('click', function() {
                const inspectorId = this.getAttribute('data-inspector-id');
                const isSelected = this.classList.contains('selected');
                

                
                if (isSelected) {
                    // Deselect inspector
                    this.classList.remove('selected');
                    selectedInspectors = selectedInspectors.filter(id => id !== inspectorId);
                } else {
                    // Select inspector
                    this.classList.add('selected');
                    selectedInspectors.push(inspectorId);
                }
                

                
                // Re-render calendar with current data using new filter
                if (currentView === 'month') {
                    renderMonthlyCalendar();
                } else {
                    renderWeeklyCalendar();
                }
            });
        });
    }
    
    function attachServiceEventListeners() {
        const checkboxes = document.querySelectorAll('.service-filter');
        
        checkboxes.forEach((checkbox) => {
            // Remove existing listeners to prevent duplicates
            checkbox.removeEventListener('change', handleServiceChange);
            
            // Add change handler
            checkbox.addEventListener('change', handleServiceChange);
        });
    }
    

    
    function handleServiceChange(event) {
        const serviceId = parseInt(event.target.value);
        const isChecked = event.target.checked;
        
        if (isChecked) {
            if (!selectedServices.includes(serviceId)) {
                selectedServices.push(serviceId);
            }
        } else {
            selectedServices = selectedServices.filter(id => id !== serviceId);
        }
        
        // Re-render calendar with current data using new filter
        if (currentView === 'month') {
            renderMonthlyCalendar();
        } else {
            renderWeeklyCalendar();
        }
    }
    
    function clearInspectorsList() {
        const inspectorsList = document.querySelector('.inspector_leftlist ul');
        if (inspectorsList) {
            inspectorsList.innerHTML = '<li class="text-center py-3"><span class="text-muted">Select a tenant to view inspectors</span></li>';
        }
        selectedInspectors = [];
    }
    
    function showInspectorsError(message) {
        const inspectorsList = document.querySelector('.inspector_leftlist ul');
        if (inspectorsList) {
            inspectorsList.innerHTML = `<li class="text-center py-3"><span class="text-danger">${message}</span></li>`;
        }
    }

    function loadServicesByTenant(tenantId) {
        if (!tenantId) {
            clearServicesList();
            return;
        }
        

        
        // Show loading state
        const servicesList = document.getElementById('services-list');
        if (servicesList) {
            servicesList.innerHTML = '<div class="text-center py-3"><span class="text-muted">Loading services...</span></div>';
        }
        
        fetch(`{{ route('admin.schedule.services-by-tenant') }}?tenant_id=${tenantId}`, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.status && data.services) {
                renderServicesList(data.services);
            } else {

                showServicesError('Failed to load services');
            }
        })
        .catch(error => {

            showServicesError('Error loading services');
        });
    }
    
    function renderServicesList(services) {
        const servicesList = document.getElementById('services-list');
        
        if (!servicesList) {
            return;
        }
        
        if (services.length === 0) {
            servicesList.innerHTML = '<div class="text-center py-3"><span class="text-muted">No services found for selected tenant</span></div>';
            return;
        }
        
        const servicesHtml = services.map(service => {
            return `
                <div class="form-check left_service_list">
                    <input class="form-check-input service-filter" type="checkbox" value="${service.id}" id="service${service.id}">
                    <label class="form-check-label" for="service${service.id}">
                        ${service.service_name}
                    </label>
                </div>
            `;
        }).join('');
        
        servicesList.innerHTML = servicesHtml;
        
        // Attach event listeners to service checkboxes
        attachServiceEventListeners();
    }
    
    function clearServicesList() {
        const servicesList = document.getElementById('services-list');
        if (servicesList) {
            servicesList.innerHTML = '<div class="text-center py-3"><span class="text-muted">Select a tenant to view services</span></div>';
        }
        selectedServices = [];
    }
    
    function showServicesError(message) {
        const servicesList = document.getElementById('services-list');
        if (servicesList) {
            servicesList.innerHTML = `<div class="text-center py-3"><span class="text-danger">${message}</span></div>`;
        }
    }
    
    window.loadScheduleData = function() {
        // Check if Super Admin hasn't selected a tenant yet
        const tenantSelect = document.getElementById('tenantSelect');
        if (tenantSelect && !tenantSelect.value) {
            // Clear the calendar displays
            schedules = [];
            if (currentView === 'month') {
                renderMonthlyCalendar();
            } else {
                renderWeeklyCalendar();
            }
            return;
        }
        
        let startDate, endDate;
        
        if (currentView === 'month') {
            // Get first and last day of the month
            startDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
            endDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
        } else {
            // Get week start and end
            startDate = window.getWeekStart(currentDate);
            endDate = new Date(startDate);
            endDate.setDate(endDate.getDate() + 6);
        }
        
        // Format dates without timezone conversion issues
        const startDateStr = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')}`;
        const endDateStr = `${endDate.getFullYear()}-${String(endDate.getMonth() + 1).padStart(2, '0')}-${String(endDate.getDate()).padStart(2, '0')}`;
        
        const params = new URLSearchParams({
            format: 'json',
            start_date: startDateStr,
            end_date: endDateStr
        });
        
        // Add tenant filtering for Super Admin or regular users
        if (tenantSelect && tenantSelect.value) {
            // Super Admin: Use selected tenant
            params.append('tenant_id', tenantSelect.value);
        } else {
            // Regular users: Use session tenant_id if available
            @if(session('tenant_id'))
            params.append('tenant_id', '{{ session('tenant_id') }}');
            @endif
        }
        
        // Add address filtering if selected
        if (selectedAddress) {
            params.append('address', selectedAddress);
        }
        
        // Add status filtering if selected
        if (selectedStatusFilter) {
            params.append('status_filter', selectedStatusFilter);
            console.log('📤 Sending status_filter:', selectedStatusFilter);
        }
        
        // Note: Inspector filtering is now done client-side in the render functions
        
        // Show loading indicator
        const loadingEl = document.getElementById('calendar-loading');
        if (loadingEl) loadingEl.style.display = 'flex';
        
        fetch(`{{ route('admin.schedule.calendar') }}?${params}`, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                schedules = data.schedules;
                // timeOffs no longer needed - time-off is handled via schedule.is_time_off

                // Debug: Check for time-off schedules and status filter results
                const timeOffSchedules = schedules ? schedules.filter(s => s.is_time_off) : [];
                const cancelledSchedules = schedules ? schedules.filter(s => s.is_cancelled == 1) : [];
                const deletedSchedules = schedules ? schedules.filter(s => s.deleted_at) : [];
                
                console.log('📅 Schedule data loaded:', { 
                    schedules_count: schedules ? schedules.length : 0, 
                    time_off_count: timeOffSchedules.length,
                    cancelled_count: cancelledSchedules.length,
                    deleted_count: deletedSchedules.length,
                    current_status_filter: selectedStatusFilter,
                    time_off_schedules: timeOffSchedules.map(s => ({ id: s.id, date: s.scheduled_date, time: s.start_time, inspectors: s.inspectors }))
                });
                
                if (currentView === 'month') {
                    renderMonthlyCalendar();
                } else {
                    renderWeeklyCalendar();
                }
            } else {
                showNotification('error', 'Failed to load schedule data. Please try again.');
            }
        })
        .catch(error => {
            console.error('Error loading schedule data:', error);
            showNotification('error', 'Error loading schedule data. Please try again.');
        })
        .finally(() => {
            // Hide loading indicator
            if (loadingEl) loadingEl.style.display = 'none';
        });
    }
    
    window.renderMonthlyCalendar = function() {
        const tbody = document.getElementById('monthly-calendar-body');
        tbody.innerHTML = '';
        

        
        const firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
        const lastDay = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
        const startDate = new Date(firstDay);
        startDate.setDate(startDate.getDate() - firstDay.getDay());
        
        const today = new Date();
        today.setHours(0, 0, 0, 0);
        
        for (let week = 0; week < 6; week++) {
            const row = document.createElement('tr');
            
            for (let day = 0; day < 7; day++) {
                // Create a proper date without mutations that could cause off-by-one errors
                const currentDay = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + (week * 7) + day);
                
                const cell = document.createElement('td');
                const isCurrentMonth = currentDay.getMonth() === currentDate.getMonth();
                const isToday = currentDay.getTime() === today.getTime();
                
                const dateDiv = document.createElement('div');
                dateDiv.className = `calendar-date ${isToday ? 'today' : ''} ${!isCurrentMonth ? 'other-month' : ''}`;
                dateDiv.textContent = currentDay.getDate();
                
                const eventsDiv = document.createElement('div');
                eventsDiv.className = 'calendar-events';
                
                // Find schedules for this day
                const daySchedules = schedules.filter(schedule => {
                    const scheduleDate = new Date(schedule.scheduled_date);
                    return scheduleDate.toDateString() === currentDay.toDateString();
                });
                
                // Collect all events to display for this day
                let eventsToShow = [];
                
                daySchedules.forEach(schedule => {
                    // Apply all filters in sequence
                    if (!shouldShowService(schedule)) {
                        return; // Skip this schedule if it doesn't match service filter
                    }
                    if (!shouldShowCustomerAgent(schedule)) {
                        return; // Skip this schedule if it doesn't match customer/agent filter
                    }
                    if (!shouldShowAvailability(schedule)) {
                        return; // Skip this schedule if it doesn't match availability filter
                    }
                    
                    // Create separate event box for each inspector
                    if (schedule.inspectors && schedule.inspectors.length > 0) {
                        schedule.inspectors.forEach(inspectorName => {
                            // Check if this inspector should be shown based on current filter
                            if (shouldShowInspector(inspectorName, schedule)) {
                                eventsToShow.push({
                                    type: 'assigned',
                                    schedule: schedule,
                                    inspectorName: inspectorName
                                });
                            }
                        });
                    } else if (selectedInspectors.length === 0) {
                        // Only show unassigned schedules when no specific inspectors are selected
                        eventsToShow.push({
                            type: 'unassigned',
                            schedule: schedule
                        });
                    }
                });
                
                // Time-off is now handled directly from schedule data with is_time_off flag
                // No need for separate time-off processing
                
                // Display up to 1 event, then show "+ X more" if there are more
                const maxEventsToShow = 1;
                const totalEvents = eventsToShow.length;
                
                // Debug logging for dates with multiple events
                if (totalEvents > 1) {
                    console.log(`📅 Date ${currentDay.toLocaleDateString()} has ${totalEvents} events:`, eventsToShow.map(e => {
                        if (e.type === 'assigned') {
                            return `${e.inspectorName || 'Unknown'} - ${e.schedule?.id || 'No ID'}${e.schedule?.is_time_off ? ' (TIME OFF)' : ''}`;
                        } else {
                            return 'Unknown Event Type';
                        }
                    }));
                }
                
                // Show first 1 event
                eventsToShow.slice(0, maxEventsToShow).forEach(eventData => {
                    const eventDiv = document.createElement('div');
                    
                    if (eventData.type === 'assigned') {
                        eventDiv.className = `event-item ${getStatusClass(eventData.schedule.status)}`;
                        eventDiv.setAttribute('data-schedule-id', eventData.schedule.id);
                        eventDiv.setAttribute('data-status', eventData.schedule.status);
                        eventDiv.setAttribute('data-inspector', eventData.inspectorName);
                        
                        // Check if this is an empty slot first
                        const isEmptySlot = eventData.schedule.status == 4;
                        
                        // Get inspector color from mapping
                        const inspectorColor = inspectorColors[eventData.inspectorName] || '#7F1C1C';
                        
                        // Apply different styling for empty slots and hold status
                        if (isEmptySlot) {
                            if (eventData.schedule.is_on_hold) {
                                // Hold schedules: gray background like unassigned
                                eventDiv.style.setProperty('background-color', '#6c757d', 'important');
                                eventDiv.style.setProperty('border', `2px solid ${inspectorColor}`, 'important');
                                eventDiv.style.setProperty('color', '#ffffff', 'important');
                            } else {
                                // Available schedules: white background
                                eventDiv.style.setProperty('background-color', '#ffffff', 'important');
                                eventDiv.style.setProperty('border', `2px solid ${inspectorColor}`, 'important');
                                eventDiv.style.setProperty('color', '#000000', 'important');
                            }
                        } else {
                            eventDiv.style.backgroundColor = inspectorColor;
                        }
                        
                        // Truncate long inspector names for monthly view
                        const displayName = eventData.inspectorName.length > 25 
                            ? eventData.inspectorName.substring(0, 22) + '...' 
                            : eventData.inspectorName;
                        const titleText = isEmptySlot ? `${eventData.inspectorName} - Available Slot` : eventData.inspectorName;
                        const displayText = displayName; // Show inspector name for both regular and empty slots
                        
                        // Get inspector avatar URL
                        let avatarUrl = '{{ asset("images/inspector_01.jpg") }}'; // Default
                        
                        // Try to get avatar from schedule data first
                        if (eventData.schedule && eventData.schedule.inspectors && Array.isArray(eventData.schedule.inspectors)) {
                            const inspector = eventData.schedule.inspectors.find(insp => 
                                `${insp.first_name} ${insp.last_name}` === eventData.inspectorName
                            );
                            if (inspector && inspector.avatar) {
                                if (typeof inspector.avatar === 'object' && inspector.avatar.thumb) {
                                    avatarUrl = inspector.avatar.thumb;
                                } else if (typeof inspector.avatar === 'string') {
                                    avatarUrl = inspector.avatar;
                                }
                            }
                        }
                        
                        // If not found in schedule data, try to get from sidebar inspector list
                        if (avatarUrl === '{{ asset("images/inspector_01.jpg") }}' && eventData.inspectorName) {
                            const inspectorItems = document.querySelectorAll('.inspector-item .inspector-name');
                            inspectorItems.forEach(nameElement => {
                                if (nameElement.textContent.trim() === eventData.inspectorName) {
                                    const avatarImg = nameElement.closest('.inspector-item').querySelector('.inspector-avatar');
                                    if (avatarImg && avatarImg.src && !avatarImg.src.includes('inspector_01.jpg')) {
                                        avatarUrl = avatarImg.src;
                                    }
                                }
                            });
                        }
                        
                        // Check if this is a time-off schedule
                        const isTimeOff = eventData.schedule.is_time_off;
                        
                        if (isTimeOff) {
                            // Time-off schedules: red background with "OFF" text (use !important to override CSS classes)
                            eventDiv.style.setProperty('background-color', '#dc3545', 'important'); // Bootstrap danger red
                            eventDiv.style.setProperty('color', '#ffffff', 'important');
                            
                            const displayName = eventData.inspectorName && eventData.inspectorName.length > 20 
                                ? eventData.inspectorName.substring(0, 17) + '...' 
                                : eventData.inspectorName;
                            
                            eventDiv.innerHTML = `
                                <div class="inspector-avatar-container">
                                    <img src="${avatarUrl}" alt="Inspector" class="inspector-avatar-img"
                                         onerror="this.src='{{ asset("images/inspector_01.jpg") }}'" />
                                </div>
                                <span class="event-title" title="${eventData.inspectorName} - Time Off" style="color: #ffffff !important;">${displayName} (OFF)</span>
                                <span class="event-time" style="color: #ffffff !important;">${convertTo12Hour(eventData.schedule.effective_time || eventData.schedule.start_time)}</span>
                            `;
                            
                            // Ensure all text elements have white color for better contrast on red background
                            const timeOffTitle = eventDiv.querySelector('.event-title');
                            const timeOffTime = eventDiv.querySelector('.event-time');
                            if (timeOffTitle) timeOffTitle.style.setProperty('color', '#ffffff', 'important');
                            if (timeOffTime) timeOffTime.style.setProperty('color', '#ffffff', 'important');
                        } else {
                            eventDiv.innerHTML = `
                                <div class="inspector-avatar-container">
                                    <img src="${avatarUrl}" alt="Inspector" class="inspector-avatar-img"
                                         onerror="this.src='{{ asset("images/inspector_01.jpg") }}'" />
                                </div>
                                <span class="event-title" title="${titleText}">${displayText}</span>
                                <span class="event-time">${convertTo12Hour(eventData.schedule.effective_time || eventData.schedule.start_time)}${isEmptySlot ? (eventData.schedule.is_on_hold ? ` - <span class="hold-status" ${eventData.schedule.hold_reason ? `title="Hold Reason: ${eventData.schedule.hold_reason.reason}\\nHeld by: ${eventData.schedule.hold_reason.created_by}\\nHeld on: ${new Date(eventData.schedule.hold_reason.held_at).toLocaleString()}"` : ''}>Hold</span>` : ' - Available') : ''}${eventData.schedule.adjusted_time ? ' *' : ''}</span>
                            `;
                        }
                        
                        // Override nested element text colors for Hold boxes to ensure white text visibility
                        if (isEmptySlot && eventData.schedule.is_on_hold) {
                            const eventTitle = eventDiv.querySelector('.event-title');
                            const eventTime = eventDiv.querySelector('.event-time');
                            const holdStatus = eventDiv.querySelector('.hold-status');
                            
                            if (eventTitle) eventTitle.style.setProperty('color', '#ffffff', 'important');
                            if (eventTime) eventTime.style.setProperty('color', '#ffffff', 'important');
                            if (holdStatus) holdStatus.style.setProperty('color', '#ffffff', 'important');
                        }
                        
                        // Add tooltip event listeners with better hover handling
                        eventDiv.addEventListener('mouseenter', (e) => {
                            cancelTooltipHide(); // Cancel any pending hide
                            if (isTimeOff) {
                                showScheduleTimeOffTooltip(e, eventData.schedule, eventData.inspectorName);
                            } else {
                                showScheduleTooltip(e, eventData.schedule.id, eventData.inspectorName, eventData.schedule);
                            }
                        });
                        eventDiv.addEventListener('mouseleave', (e) => {
                            // Only hide if not moving to tooltip itself
                            if (isTimeOff) {
                                hideTimeOffTooltip();
                            } else {
                                hideScheduleTooltip();
                            }
                        });
                        // Keep tooltip visible if mouse moves within the element
                        eventDiv.addEventListener('mousemove', (e) => {
                            cancelTooltipHide();
                        });
                        
                    // Time-off events are now handled as regular schedule items with is_time_off flag
                        
                    } else {
                        eventDiv.className = `event-item ${getStatusClass(eventData.schedule.status)} unassigned`;
                        eventDiv.setAttribute('data-schedule-id', eventData.schedule.id);
                        eventDiv.setAttribute('data-status', eventData.schedule.status);
                        
                        const isEmptySlot = eventData.schedule.status == 4;
                        const isOnHold = eventData.schedule.is_on_hold;
                        const unassignedText = isEmptySlot ? (isOnHold ? 'Hold' : 'Available') : 'Unassigned';
                        
                        // Apply styling for empty slots and hold status
                        if (isEmptySlot) {
                            if (isOnHold) {
                                // Hold schedules: gray background like unassigned
                                eventDiv.style.setProperty('background-color', '#6c757d', 'important');
                                eventDiv.style.setProperty('border', '2px solid #6c757d', 'important');
                                eventDiv.style.setProperty('color', '#ffffff', 'important');
                            } else {
                                // Available schedules: white background
                                eventDiv.style.setProperty('background-color', '#ffffff', 'important');
                                eventDiv.style.setProperty('border', '2px solid #6c757d', 'important');
                                eventDiv.style.setProperty('color', '#000000', 'important');
                            }
                        }
                        
                        eventDiv.innerHTML = `
                            <span class="event-title">${unassignedText}</span>
                            <span class="event-time">${convertTo12Hour(eventData.schedule.effective_time || eventData.schedule.start_time)}${isEmptySlot ? (isOnHold ? ' - Hold' : ' - Available') : ''}${eventData.schedule.adjusted_time ? ' *' : ''}</span>
                        `;
                        
                        // Override nested element text colors for Hold boxes to ensure white text visibility
                        if (isEmptySlot && isOnHold) {
                            const eventTitle = eventDiv.querySelector('.event-title');
                            const eventTime = eventDiv.querySelector('.event-time');
                            
                            if (eventTitle) eventTitle.style.setProperty('color', '#ffffff', 'important');
                            if (eventTime) eventTime.style.setProperty('color', '#ffffff', 'important');
                        }
                        
                        // Add tooltip event listeners for unassigned schedules
                        eventDiv.addEventListener('mouseenter', (e) => {
                            cancelTooltipHide(); // Cancel any pending hide
                            showScheduleTooltip(e, eventData.schedule.id, null, eventData.schedule);
                        });
                        eventDiv.addEventListener('mouseleave', (e) => {
                            hideScheduleTooltip();
                        });
                        // Keep tooltip visible if mouse moves within the element
                        eventDiv.addEventListener('mousemove', (e) => {
                            cancelTooltipHide();
                        });
                    }
                    
                    eventsDiv.appendChild(eventDiv);
                });
                
                // Show "+ X more" if there are more than maxEventsToShow events
                if (totalEvents > maxEventsToShow) {
                    const moreCount = totalEvents - maxEventsToShow;
                    console.log(`🔍 Creating "see more" button for ${currentDay.toLocaleDateString()}: showing ${moreCount} more out of ${totalEvents} total events`);
                    
                    const moreDiv = document.createElement('div');
                    moreDiv.className = 'event-more';
                    moreDiv.innerHTML = `<span class="more-text">+ ${moreCount} more</span>`;
                    
                    // Add inline styles to ensure visibility
                    moreDiv.style.backgroundColor = '#17a2b8';
                    moreDiv.style.color = 'white';
                    moreDiv.style.padding = '4px 8px';
                    moreDiv.style.margin = '2px 0';
                    moreDiv.style.borderRadius = '4px';
                    moreDiv.style.textAlign = 'center';
                    moreDiv.style.fontSize = '11px';
                    moreDiv.style.fontWeight = '600';
                    moreDiv.style.cursor = 'pointer';
                    moreDiv.style.display = 'block';
                    moreDiv.style.width = '100%';
                    moreDiv.style.boxSizing = 'border-box';
                    
                    moreDiv.setAttribute('title', `Click to view all ${totalEvents} appointments`);
                    
                    // Add click handler to expand and show all events
                    moreDiv.addEventListener('click', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        console.log(`🖱️ "See more" clicked for ${currentDay.toLocaleDateString()}`);
                        expandDateCell(cell, eventsDiv, eventsToShow, maxEventsToShow);
                    });
                    
                    eventsDiv.appendChild(moreDiv);
                    console.log(`✅ "See more" button added to DOM for ${currentDay.toLocaleDateString()}`);
                    
                    // Debug: Check if button is actually visible
                    setTimeout(() => {
                        const rect = moreDiv.getBoundingClientRect();
                        console.log(`📏 Button dimensions for ${currentDay.toLocaleDateString()}:`, {
                            width: rect.width,
                            height: rect.height,
                            top: rect.top,
                            left: rect.left,
                            visible: rect.width > 0 && rect.height > 0,
                            computedStyle: window.getComputedStyle(moreDiv).display
                        });
                    }, 100);
                } else {
                    console.log(`ℹ️ ${currentDay.toLocaleDateString()}: ${totalEvents} events (no "see more" needed)`);
                }
                
                cell.appendChild(dateDiv);
                cell.appendChild(eventsDiv);
                row.appendChild(cell);
            }
            
            tbody.appendChild(row);
            
            // Break if we've covered the whole month and next week starts in next month
            if (week >= 4 && new Date(startDate.getTime() + ((week + 1) * 7 * 24 * 60 * 60 * 1000)).getMonth() !== currentDate.getMonth()) {
                break;
            }
        }
    }
    
    window.renderWeeklyCalendar = function() {
        const weekStart = window.getWeekStart(currentDate);
        const hours = ['9:00 AM', '2:00 PM'];
        

        
        // Update day headers
        for (let i = 1; i <= 7; i++) {
            // Create date at noon to avoid timezone issues
            const dayDate = new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + i - 1, 12, 0, 0);
            const dayHeader = document.getElementById(`day-${i}`);
            if (dayHeader) {
                const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
                dayHeader.textContent = `${dayNames[dayDate.getDay()]} ${dayDate.getDate().toString().padStart(2, '0')}`;
            }
        }
        
        const tbody = document.getElementById('weekly-calendar-body');
        tbody.innerHTML = '';
        
        // Add empty header row
        const headerRow = document.createElement('tr');
        for (let i = 0; i < 8; i++) {
            const cell = document.createElement('td');
            cell.innerHTML = '&nbsp;';
            headerRow.appendChild(cell);
        }
        tbody.appendChild(headerRow);
        
        // Add hourly rows
        hours.forEach((hour, hourIndex) => {
            const row = document.createElement('tr');
            
            // Time column
            const timeCell = document.createElement('td');
            timeCell.className = 'position-relative';
            timeCell.innerHTML = `<span class="time_event">${hour}</span>`;
            row.appendChild(timeCell);
            
            // Day columns
            for (let day = 0; day < 7; day++) {
                // Create date at noon to avoid timezone boundary issues
                const dayDate = new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + day, 12, 0, 0);
                
                // Debug the week day generation
                if (hour === '9:00 AM') { // Only log once per day
                    console.log(`Day ${day}: ${dayDate.toISOString().split('T')[0]} (${dayDate.toDateString()})`);
                }
                
                // Special debug for Day 5 (should be Saturday Oct 11)
                if (day === 5) {
                    const debugDateStr = `${dayDate.getFullYear()}-${String(dayDate.getMonth() + 1).padStart(2, '0')}-${String(dayDate.getDate()).padStart(2, '0')}`;
                    console.log(`📅 Day 5 Processing (${hour}):`, {
                        date: dayDate.toISOString().split('T')[0],
                        calculatedDateStr: debugDateStr,
                        hour: hour,
                        isExpectedCell: debugDateStr === '2025-10-11' && hour === '9:00 AM'
                    });
                }
                
                const cell = document.createElement('td');
                
                // Find schedules for this day and hour
                const daySchedules = schedules.filter(schedule => {
                    const scheduleDate = new Date(schedule.scheduled_date);
                    
                    // Use start_time for slot placement (determines which time slot to show in)
                    let scheduleSlot = schedule.start_time;
                    
                    // Debug time-off schedules
                    if (schedule.is_time_off) {
                        console.log('� Found time-off schedule:', { 
                            id: schedule.id, 
                            date: schedule.scheduled_date, 
                            time: scheduleSlot, 
                            dayMatches: scheduleDate.toDateString() === dayDate.toDateString(),
                            currentCell: dayDate.toDateString() + ' ' + hour
                        });
                    }
                    
                    // Check if we have a valid time and date matches
                    if (!scheduleSlot || scheduleDate.toDateString() !== dayDate.toDateString()) {
                        return false;
                    }
                    
                    // Convert schedule slot time to hour for comparison
                    const timeStr = scheduleSlot.includes(':') ? scheduleSlot : scheduleSlot;
                    const scheduleHour = parseInt(timeStr.split(':')[0]);
                    const targetHour = convertTo24Hour(hour);
                    
                    return scheduleHour === targetHour;
                });
                
                // Debug: Uncomment below to see schedule counts per day
                // if (day === 0) console.log(`🎯 Day schedules for ${dayDate.toDateString()} ${hour}:`, daySchedules.length);
                
                // Prepare HTML content for this cell
                let schedulesHtml = '';
                
                if (daySchedules.length > 0) {
                    // Show separate event box for each inspector in each schedule
                    daySchedules.forEach(schedule => {
                        // Debug time-off schedule processing
                        if (schedule.is_time_off) {
                            console.log('🚀 Processing time-off schedule:', { 
                                id: schedule.id, 
                                date: schedule.scheduled_date,
                                inspectors: schedule.inspectors,
                                passedServiceFilter: shouldShowService(schedule),
                                passedCustomerAgentFilter: shouldShowCustomerAgent(schedule),
                                passedAvailabilityFilter: shouldShowAvailability(schedule)
                            });
                        }
                        
                        // Apply all filters in sequence
                        if (!shouldShowService(schedule)) {
                            return; // Skip this schedule if it doesn't match service filter
                        }
                        if (!shouldShowCustomerAgent(schedule)) {
                            return; // Skip this schedule if it doesn't match customer/agent filter
                        }
                        if (!shouldShowAvailability(schedule)) {
                            return; // Skip this schedule if it doesn't match availability filter
                        }
                        
                        const bgClass = getWeeklyBgClass(schedule.status);
                        
                        if (schedule.inspectors && schedule.inspectors.length > 0) {
                            // Create separate event for each inspector
                            schedule.inspectors.forEach(inspectorName => {
                                // Debug time-off schedule inspector processing
                                if (schedule.is_time_off) {
                                    console.log('🎯 Time-off schedule inspector processing:', { 
                                        id: schedule.id, 
                                        inspector: inspectorName,
                                        shouldShow: shouldShowInspector(inspectorName, schedule)
                                    });
                                }
                                
                                // Check if this inspector should be shown based on current filter
                                if (shouldShowInspector(inspectorName, schedule)) {
                                    // Truncate long inspector names for weekly view  
                                    const displayName = inspectorName.length > 40 
                                        ? inspectorName.substring(0, 37) + '...' 
                                        : inspectorName;
                                    
                                    // Get inspector color from mapping
                                    const inspectorColor = inspectorColors[inspectorName] || '#7F1C1C';
                                    
                                    // Get inspector avatar from schedule data
                                    let avatarUrl = '{{ asset("images/inspector_01.jpg") }}'; // Default
                                    if (schedule.inspector_data && schedule.inspector_data[inspectorName] && schedule.inspector_data[inspectorName].avatar) {
                                        const avatar = schedule.inspector_data[inspectorName].avatar;
                                        if (avatar && avatar.thumb) {
                                            avatarUrl = avatar.thumb;
                                        } else if (avatar && typeof avatar === 'string') {
                                            avatarUrl = avatar;
                                        }
                                    }
                                    
                                    // Check schedule type for styling
                                    const isEmptySlot = schedule.status == 4;
                                    const isTimeOff = schedule.is_time_off;
                                    let eventStyle;
                                    
                                    if (isTimeOff) {
                                        // Time-off schedules: red background with white text (matching monthly view)
                                        eventStyle = `margin-bottom: 5px; background-color: #dc3545 !important; color: #ffffff !important;`;
                                    } else if (isEmptySlot) {
                                        if (schedule.is_on_hold) {
                                            // Hold schedules: gray background like unassigned
                                            eventStyle = `margin-bottom: 5px; background-color: #6c757d; border: 2px solid ${inspectorColor}; color: #ffffff;`;
                                        } else {
                                            // Available schedules: white background
                                            eventStyle = `margin-bottom: 5px; background-color: #ffffff; border: 2px solid ${inspectorColor}; color: #000000;`;
                                        }
                                    } else {
                                        eventStyle = `margin-bottom: 5px; background-color: ${inspectorColor};`;
                                    }
                                    
                                    schedulesHtml += `
                                        <div class="user_event" style="${eventStyle}" 
                                             data-schedule-id="${schedule.id}" data-status="${schedule.status}" data-inspector="${inspectorName}">
                                            <div class="upser_pic">
                                                <img src="${avatarUrl}" alt="Inspector" 
                                                     onerror="this.src='{{ asset("images/inspector_01.jpg") }}'" />
                                            </div>
                                            <h5 title="${isTimeOff ? inspectorName + ' - Time Off' : inspectorName}" style="${isEmptySlot ? (schedule.is_on_hold ? 'color: #ffffff;' : 'color: #000000;') : (isTimeOff ? 'color: #ffffff;' : '')}">${isTimeOff ? displayName + ' (OFF)' : displayName}</h5>
                                            <p style="${isEmptySlot ? (schedule.is_on_hold ? 'color: #ffffff;' : 'color: #000000;') : (isTimeOff ? 'color: #ffffff;' : '')}">${convertTo12Hour(schedule.effective_time || schedule.start_time)}${isTimeOff ? '' : (schedule.status == 4 ? (schedule.is_on_hold ? ' - Hold' : ' - Available') : ' - #' + schedule.appointment_id)}</p>
                                        </div>
                                    `;
                                }
                            });
                        } else if (selectedInspectors.length === 0) {
                            // Only show unassigned schedules when no specific inspectors are selected
                            const isEmptySlot = schedule.status == 4;
                            let unassignedStyle;
                            if (isEmptySlot) {
                                if (schedule.is_on_hold) {
                                    // Hold schedules: gray background like unassigned
                                    unassignedStyle = `margin-bottom: 5px; background-color: #6c757d; border: 2px solid #6c757d; color: #ffffff;`;
                                } else {
                                    // Available schedules: white background
                                    unassignedStyle = `margin-bottom: 5px; background-color: #ffffff; border: 2px solid #6c757d; color: #000000;`;
                                }
                            } else {
                                unassignedStyle = `margin-bottom: 5px; background-color: #6c757d;`;
                            }
                            
                            schedulesHtml += `
                                <div class="user_event unassigned" style="${unassignedStyle}" 
                                     data-schedule-id="${schedule.id}" data-status="${schedule.status}">
                                    <div class="upser_pic">
                                        <img src="{{ asset('images/inspector_01.jpg') }}" alt="Inspector" />
                                    </div>
                                    <h5 style="${isEmptySlot ? (schedule.is_on_hold ? 'color: #ffffff;' : 'color: #000000;') : ''}">Unassigned</h5>
                                    <p style="${isEmptySlot ? (schedule.is_on_hold ? 'color: #ffffff;' : 'color: #000000;') : ''}">${convertTo12Hour(schedule.effective_time || schedule.start_time)}${schedule.status == 4 ? (schedule.is_on_hold ? ' - <span class="hold-status">Hold</span>' : ' - Available') : ' - #' + schedule.appointment_id}</p>
                                </div>
                            `;
                        }
                    });
                    
                    // Add tooltip event listeners to the inserted events
                    const eventElements = cell.querySelectorAll('.user_event[data-schedule-id]');
                    eventElements.forEach(eventEl => {
                        const scheduleId = eventEl.getAttribute('data-schedule-id');
                        const inspectorName = eventEl.getAttribute('data-inspector');
                        const schedule = daySchedules.find(s => s.id == scheduleId);
                        
                        eventEl.addEventListener('mouseenter', (e) => {
                            cancelTooltipHide(); // Cancel any pending hide
                            // Use same logic as monthly view
                            if (schedule && schedule.is_time_off) {
                                showScheduleTimeOffTooltip(e, schedule, inspectorName);
                            } else {
                                showScheduleTooltip(e, scheduleId, inspectorName, schedule);
                            }
                        });
                        eventEl.addEventListener('mouseleave', (e) => {
                            // Hide appropriate tooltip based on schedule type
                            if (schedule && schedule.is_time_off) {
                                hideTimeOffTooltip();
                            } else {
                                hideScheduleTooltip();
                            }
                        });
                        // Keep tooltip visible if mouse moves within the element
                        eventEl.addEventListener('mousemove', (e) => {
                            cancelTooltipHide();
                        });
                    });
                    
                    // Time-off tooltips now handled via regular schedule tooltips since is_time_off schedules use the same system
                }
                
                // Process time off events (outside of schedule condition)
                const currentDateStr = `${dayDate.getFullYear()}-${String(dayDate.getMonth() + 1).padStart(2, '0')}-${String(dayDate.getDate()).padStart(2, '0')}`;
                
                // Debug: Simplified check for Alpha Sub
                if (currentDateStr === '2025-10-11' && hour === '9:00 AM') {
                    console.log(`✅ Processing Alpha Sub expected cell: ${currentDateStr} at ${hour}`);
                }
                
                // Time-off is now handled directly from schedule data with is_time_off flag
                // No need for separate time-off processing
                
                // Set cell content
                cell.innerHTML = schedulesHtml || '&nbsp;';
                
                // Add tooltip event listeners for schedule events
                const scheduleElements = cell.querySelectorAll('.user_event[data-schedule-id]');
                scheduleElements.forEach(eventEl => {
                    const scheduleId = eventEl.getAttribute('data-schedule-id');
                    const inspectorName = eventEl.getAttribute('data-inspector');
                    const schedule = daySchedules.find(s => s.id == scheduleId);
                    
                    if (schedule) {
                        eventEl.addEventListener('mouseenter', (e) => {
                            cancelTooltipHide(); // Cancel any pending hide
                            // Use same logic as monthly view
                            if (schedule.is_time_off) {
                                showScheduleTimeOffTooltip(e, schedule, inspectorName);
                            } else {
                                showScheduleTooltip(e, schedule.id, inspectorName, schedule);
                            }
                        });
                        eventEl.addEventListener('mouseleave', (e) => {
                            // Hide appropriate tooltip based on schedule type
                            if (schedule.is_time_off) {
                                hideTimeOffTooltip();
                            } else {
                                hideScheduleTooltip();
                            }
                        });
                        // Keep tooltip visible if mouse moves within the element
                        eventEl.addEventListener('mousemove', (e) => {
                            cancelTooltipHide();
                        });
                    }
                });
                
                // Time-off tooltip event listeners no longer needed - handled via schedule tooltips
                
                row.appendChild(cell);
            }
            
            tbody.appendChild(row);
        });
    }
    
    function convertTo24Hour(timeStr) {
        const [time, period] = timeStr.split(' ');
        let [hour, minute] = time.split(':').map(Number);
        
        if (period === 'PM' && hour !== 12) {
            hour += 12;
        } else if (period === 'AM' && hour === 12) {
            hour = 0;
        }
        
        return hour;
    }
    
    // Format date to MM-DD-YYYY format
    function formatDateToMMDDYYYY(dateString) {
        if (!dateString) return 'N/A';
        
        const date = new Date(dateString);
        if (isNaN(date.getTime())) return 'Invalid Date';
        
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const year = date.getFullYear();
        
        return `${month}-${day}-${year}`;
    }
    
    // Initialize address search autocomplete functionality
    function initializeAddressSearch() {
        const addressInput = document.getElementById('addressSearch');
        const clearButton = document.getElementById('addressSearchClear');
        const suggestionsDiv = document.getElementById('addressSuggestions');
        const container = document.querySelector('.address-search-container');
        
        if (!addressInput || !suggestionsDiv || !clearButton) return;
        
        // Handle input changes with debouncing
        addressInput.addEventListener('input', function() {
            const query = this.value.trim();
            
            // Update clear button visibility
            if (query.length > 0) {
                container.classList.add('has-value');
            } else {
                container.classList.remove('has-value');
                selectedAddress = '';
                hideSuggestions();
                loadScheduleData(); // Reload without address filter
                return;
            }
            
            // Debounce the search
            clearTimeout(addressSuggestionsTimeout);
            addressSuggestionsTimeout = setTimeout(() => {
                if (query.length >= 2) {
                    searchAddresses(query);
                } else {
                    hideSuggestions();
                }
            }, 300);
        });
        
        // Handle clear button click
        clearButton.addEventListener('click', function() {
            addressInput.value = '';
            selectedAddress = '';
            container.classList.remove('has-value');
            hideSuggestions();
            loadScheduleData(); // Reload without address filter
        });
        
        // Handle clicks outside to close suggestions
        document.addEventListener('click', function(e) {
            if (!container.contains(e.target)) {
                hideSuggestions();
            }
        });
        
        // Handle keyboard navigation
        addressInput.addEventListener('keydown', function(e) {
            const suggestions = suggestionsDiv.querySelectorAll('.address-suggestion-item');
            const activeSuggestion = suggestionsDiv.querySelector('.address-suggestion-item.active');
            
            if (suggestions.length === 0) return;
            
            switch(e.key) {
                case 'ArrowDown':
                    e.preventDefault();
                    if (activeSuggestion) {
                        activeSuggestion.classList.remove('active');
                        const next = activeSuggestion.nextElementSibling;
                        if (next) {
                            next.classList.add('active');
                        } else {
                            suggestions[0].classList.add('active');
                        }
                    } else {
                        suggestions[0].classList.add('active');
                    }
                    break;
                    
                case 'ArrowUp':
                    e.preventDefault();
                    if (activeSuggestion) {
                        activeSuggestion.classList.remove('active');
                        const prev = activeSuggestion.previousElementSibling;
                        if (prev) {
                            prev.classList.add('active');
                        } else {
                            suggestions[suggestions.length - 1].classList.add('active');
                        }
                    } else {
                        suggestions[suggestions.length - 1].classList.add('active');
                    }
                    break;
                    
                case 'Enter':
                    e.preventDefault();
                    if (activeSuggestion) {
                        selectAddress(activeSuggestion.textContent.trim());
                    }
                    break;
                    
                case 'Escape':
                    hideSuggestions();
                    break;
            }
        });
    }
    
    // Search for addresses via AJAX
    function searchAddresses(query) {
        const params = new URLSearchParams({
            q: query
        });
        
        // Add tenant parameter for Super Admin
        const tenantSelect = document.getElementById('tenantSelect');
        if (tenantSelect && tenantSelect.value) {
            params.append('tenant_id', tenantSelect.value);
        }
        
        fetch(`{{ route('admin.schedule.search-addresses') }}?${params}`, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success && data.data) {
                showSuggestions(data.data);
            } else {
                hideSuggestions();
            }
        })
        .catch(error => {

            hideSuggestions();
        });
    }
    
    // Display address suggestions
    function showSuggestions(addresses) {
        const suggestionsDiv = document.getElementById('addressSuggestions');
        if (!suggestionsDiv) return;
        
        if (addresses.length === 0) {
            hideSuggestions();
            return;
        }
        
        const suggestionsHtml = addresses.map(address => 
            `<div class="address-suggestion-item" data-address="${address}">${address}</div>`
        ).join('');
        
        suggestionsDiv.innerHTML = suggestionsHtml;
        suggestionsDiv.style.display = 'block';
        
        // Add click handlers to suggestions
        suggestionsDiv.querySelectorAll('.address-suggestion-item').forEach(item => {
            item.addEventListener('click', function() {
                selectAddress(this.dataset.address);
            });
        });
    }
    
    // Hide address suggestions
    function hideSuggestions() {
        const suggestionsDiv = document.getElementById('addressSuggestions');
        if (suggestionsDiv) {
            suggestionsDiv.style.display = 'none';
            suggestionsDiv.innerHTML = '';
        }
    }
    
    // Select an address and apply filter
    function selectAddress(address) {
        const addressInput = document.getElementById('addressSearch');
        const container = document.querySelector('.address-search-container');
        
        if (addressInput) {
            addressInput.value = address;
            container.classList.add('has-value');
        }
        
        selectedAddress = address;
        hideSuggestions();
        loadScheduleData(); // Reload calendar with address filter
    }
    
    // Initialize customer/agent search autocomplete functionality
    function initializeCustomerAgentSearch() {
        const customerAgentInput = document.getElementById('customerAgentSearch');
        const clearButton = document.getElementById('customerAgentSearchClear');
        const suggestionsDiv = document.getElementById('customerAgentSuggestions');
        const container = document.querySelector('.customer-agent-search-container');
        const typeFilter = document.getElementById('typeFilter');
        
        if (!customerAgentInput || !suggestionsDiv || !clearButton) return;
        
        // Handle input changes with debouncing
        customerAgentInput.addEventListener('input', function() {
            const query = this.value.trim();
            
            // Update clear button visibility
            if (query.length > 0) {
                container.classList.add('has-value');
            } else {
                container.classList.remove('has-value');
                selectedCustomerAgent = '';
                hideCustomerAgentSuggestions();
                loadScheduleData(); // Auto-reload without filter
                return;
            }
            
            // Debounce the search
            clearTimeout(customerAgentSuggestionsTimeout);
            customerAgentSuggestionsTimeout = setTimeout(() => {
                if (query.length >= 2) {
                    searchCustomerAgent(query);
                } else {
                    hideCustomerAgentSuggestions();
                }
            }, 300);
        });
        
        // Handle clear button click
        clearButton.addEventListener('click', function() {
            customerAgentInput.value = '';
            selectedCustomerAgent = '';
            container.classList.remove('has-value');
            hideCustomerAgentSuggestions();
            loadScheduleData(); // Reload without filter
        });
        
        // Handle clicks outside to close suggestions
        document.addEventListener('click', function(e) {
            if (!container.contains(e.target)) {
                hideCustomerAgentSuggestions();
            }
        });
        
        // Handle keyboard navigation
        customerAgentInput.addEventListener('keydown', function(e) {
            const suggestions = suggestionsDiv.querySelectorAll('.customer-agent-suggestion-item');
            const currentActive = suggestionsDiv.querySelector('.customer-agent-suggestion-item.active');
            
            if (e.key === 'ArrowDown') {
                e.preventDefault();
                if (currentActive) {
                    currentActive.classList.remove('active');
                    const next = currentActive.nextElementSibling;
                    if (next) {
                        next.classList.add('active');
                    } else {
                        suggestions[0]?.classList.add('active');
                    }
                } else {
                    suggestions[0]?.classList.add('active');
                }
            } else if (e.key === 'ArrowUp') {
                e.preventDefault();
                if (currentActive) {
                    currentActive.classList.remove('active');
                    const prev = currentActive.previousElementSibling;
                    if (prev) {
                        prev.classList.add('active');
                    } else {
                        suggestions[suggestions.length - 1]?.classList.add('active');
                    }
                } else {
                    suggestions[suggestions.length - 1]?.classList.add('active');
                }
            } else if (e.key === 'Enter') {
                e.preventDefault();
                if (currentActive) {
                    selectCustomerAgent(currentActive.dataset.name, currentActive.dataset.type);
                }
            }
        });
    }
    
    // Search customer/agent via AJAX
    function searchCustomerAgent(query) {
        const typeFilter = document.getElementById('typeFilter');
        const tenantSelect = document.getElementById('tenantSelect');
        
        const typeValue = typeFilter ? typeFilter.value : '';

        
        const params = new URLSearchParams({
            q: query,
            type: typeValue
        });
        
        // Add tenant filtering for Super Admin
        if (tenantSelect && tenantSelect.value) {
            params.append('tenant_id', tenantSelect.value);
        }
        

        
        fetch(`{{ route('admin.schedule.search-customer-agent') }}?${params}`, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showCustomerAgentSuggestions(data.data);
            }
        })
        .catch(error => {
            // Handle error silently
        });
    }
    
    // Show customer/agent suggestions
    function showCustomerAgentSuggestions(results) {
        const suggestionsDiv = document.getElementById('customerAgentSuggestions');
        if (!suggestionsDiv) return;
        
        if (results.length === 0) {
            suggestionsDiv.innerHTML = '<div class="customer-agent-suggestion-item no-results">No results found</div>';
        } else {
            const suggestionsHtml = results.map(result => {
                const typeLabel = result.type === 'customer' ? 'Customer' : 'Agent';
                const displayInfo = result.email ? `${result.email}` : (result.phone || '');
                return `
                    <div class="customer-agent-suggestion-item" 
                         data-name="${result.full_name}" 
                         data-type="${result.type}"
                         data-id="${result.id}">
                        <div class="suggestion-main">
                            <strong>${result.full_name}</strong>
                            <span class="type-badge ${result.type}">${typeLabel}</span>
                        </div>
                        ${displayInfo ? `<div class="suggestion-info">${displayInfo}</div>` : ''}
                    </div>
                `;
            }).join('');
            suggestionsDiv.innerHTML = suggestionsHtml;
        }
        
        suggestionsDiv.style.display = 'block';
        
        // Add click handlers to suggestions
        suggestionsDiv.querySelectorAll('.customer-agent-suggestion-item').forEach(item => {
            if (!item.classList.contains('no-results')) {
                item.addEventListener('click', function() {
                    selectCustomerAgent(this.dataset.name, this.dataset.type);
                });
            }
        });
    }
    
    // Hide customer/agent suggestions
    function hideCustomerAgentSuggestions() {
        const suggestionsDiv = document.getElementById('customerAgentSuggestions');
        if (suggestionsDiv) {
            suggestionsDiv.style.display = 'none';
            suggestionsDiv.innerHTML = '';
        }
    }
    
    // Select a customer/agent and apply filter
    function selectCustomerAgent(name, type) {
        const customerAgentInput = document.getElementById('customerAgentSearch');
        const container = document.querySelector('.customer-agent-search-container');
        
        if (customerAgentInput) {
            customerAgentInput.value = name;
            container.classList.add('has-value');
        }
        
        selectedCustomerAgent = name;

        hideCustomerAgentSuggestions();
        loadScheduleData(); // Reload calendar with customer/agent filter
    }
    
    function getStatusClass(status) {
        switch(status) {
            case 1: return 'in-progress';
            case 2: return 'in-progress';
            case 3: return 'completed';
            case 4: return 'empty-slot';
            default: return 'scheduled';
        }
    }
    
    function getWeeklyBgClass(status) {
        switch(status) {
            case 1: return 'lightbluebg_calendartd';
            case 2: return 'lightskybg_calendartd';
            case 3: return 'lightgreenbg_calendartd';
            case 4: return 'lightgraybg_calendartd';
            default: return 'lightbluebg_calendartd';
        }
    }
    
    function shouldShowInspector(inspectorName, schedule) {
        // If no inspectors are selected, show all
        if (selectedInspectors.length === 0) {
            return true;
        }
        
        // Check if this inspector is in the selected list
        // We need to match by inspector name since we don't have inspector IDs in the schedule data
        // This is a simplified approach - ideally we'd match by ID
        const selectedInspectorElements = document.querySelectorAll('.inspector-item.selected');
        const selectedNames = Array.from(selectedInspectorElements).map(el => 
            el.querySelector('.inspector-name').textContent.trim()
        );
        
        return selectedNames.includes(inspectorName);
    }
    
    function shouldShowTimeOffInspector(employeeName) {
        // If "Show Available Slots" filter is checked, hide all time off events
        if (showAvailabilitySlots) {
            return false;
        }
        
        // Check if any non-inspector filters are active
        const hasServiceFilter = selectedServices.length > 0;
        const hasAddressFilter = selectedAddress && selectedAddress.trim() !== '';
        const hasCustomerAgentFilter = selectedCustomerAgent && selectedCustomerAgent.trim() !== '';
        // Note: Status filters should NOT hide time-off events - they apply to regular schedules only
        
        // If any non-inspector filters are active, hide time-off data
        if (hasServiceFilter || hasAddressFilter || hasCustomerAgentFilter) {
            return false;
        }
        
        // Get currently selected inspectors from the sidebar
        const selectedInspectorElements = document.querySelectorAll('.inspector-item.selected');
        
        // If no inspectors are selected, show all time off events (only when no other filters are active)
        if (selectedInspectorElements.length === 0) {
            return true;
        }
        
        // Check if this employee is in the selected inspector list
        const selectedNames = Array.from(selectedInspectorElements).map(el => 
            el.querySelector('.inspector-name').textContent.trim()
        );
        
        return selectedNames.includes(employeeName);
    }
    
    function shouldShowService(schedule) {
        // If no services are selected, show all
        if (selectedServices.length === 0) {
            return true;
        }
        
        // Check if this schedule has any of the selected services
        if (!schedule.service_ids || schedule.service_ids.length === 0) {
            return false; // Schedule has no services, don't show if specific services are selected
        }
        
        // Check if any of the schedule's services match the selected services
        // Convert both to numbers for consistent comparison
        return schedule.service_ids.some(serviceId => {
            const numericServiceId = parseInt(serviceId);
            return selectedServices.includes(numericServiceId);
        });
    }
    
    // Check if a schedule should be shown based on selected customer/agent
    function shouldShowCustomerAgent(schedule) {
        if (!selectedCustomerAgent) return true;
        
        // Check customers
        if (schedule.customers && Array.isArray(schedule.customers)) {
            for (let customer of schedule.customers) {
                if (customer.full_name && customer.full_name.toLowerCase().includes(selectedCustomerAgent.toLowerCase())) {
                    return true;
                }
            }
        }
        
        // Check agents
        if (schedule.agents && Array.isArray(schedule.agents)) {
            for (let agent of schedule.agents) {
                if (agent.full_name && agent.full_name.toLowerCase().includes(selectedCustomerAgent.toLowerCase())) {
                    return true;
                }
            }
        }
        
        return false;
    }
    
    // Check if a schedule should be shown based on availability filter
    function shouldShowAvailability(schedule) {
        // If availability filter is not checked, exclude status 4 (empty slots) but show time-off and held slots
        if (!showAvailabilitySlots && schedule.status == 4) {
            // Show time-off schedules and Available Slots that are on hold, hide regular Available Slots
            if (schedule.is_time_off || schedule.is_on_hold) {
                console.log('✅ Availability filter is OFF - showing slot:', schedule.id, 'status:', schedule.status, 'is_time_off:', schedule.is_time_off, 'is_on_hold:', schedule.is_on_hold);
                return true;
            } else {
                console.log('🚫 Availability filter is OFF - hiding regular Available Slot:', schedule.id, 'status:', schedule.status);
                return false;
            }
        }
        
        // If availability filter is checked, ONLY show truly available slots (status 4, not on hold, not time-off)
        if (showAvailabilitySlots) {
            console.log('🔍 Availability filter is ON - checking schedule:', schedule.id, 'status:', schedule.status, 'is_time_off:', schedule.is_time_off, 'is_on_hold:', schedule.is_on_hold);
            
            // Only show empty slots (status 4)
            if (schedule.status != 4) {
                console.log('🚫 Availability filter is ON - hiding non-available schedule:', schedule.id, 'status:', schedule.status);
                return false;
            }
            
            // Exclude slots that are on hold, time-off, or cancelled
            if (schedule.is_on_hold || schedule.is_time_off || schedule.is_cancelled) {
                console.log('🚫 Filtering out unavailable slot:', schedule.id, 'is_on_hold:', schedule.is_on_hold, 'is_time_off:', schedule.is_time_off, 'is_cancelled:', schedule.is_cancelled);
                return false;
            }
            
            // Only show upcoming/future dates (including today)
            if (schedule.scheduled_date) {
                const scheduleDate = new Date(schedule.scheduled_date);
                const today = new Date();
                
                // Set today's time to start of day for proper comparison
                today.setHours(0, 0, 0, 0);
                scheduleDate.setHours(0, 0, 0, 0);
                
                // Only show slots that are today or in the future
                if (scheduleDate < today) {
                    console.log('🚫 Filtering out past available slot:', schedule.scheduled_date);
                    return false;
                }
                
                console.log('✅ Showing truly available slot:', schedule.scheduled_date, 'Status:', schedule.status);
                return true;
            }
            
            console.log('✅ Showing available slot (no date check):', schedule.id);
            return true;
        }
        
        // Default: show all non-empty-slot schedules when availability filter is off
        return true;
    }
    
    // Function to expand date cell and show all events
    function expandDateCell(cell, eventsDiv, allEvents, maxEventsToShow) {
        // Check if already expanded
        if (cell.classList.contains('expanded')) {
            // Collapse back to showing limited events
            collapseeDateCell(cell, eventsDiv, allEvents, maxEventsToShow);
            return;
        }
        
        // Mark as expanded
        cell.classList.add('expanded');
        
        // Clear current events
        eventsDiv.innerHTML = '';
        
        // Show all events
        allEvents.forEach(eventData => {
            const eventDiv = document.createElement('div');
            
            if (eventData.type === 'assigned') {
                eventDiv.className = `event-item ${getStatusClass(eventData.schedule.status)}`;
                eventDiv.setAttribute('data-schedule-id', eventData.schedule.id);
                eventDiv.setAttribute('data-status', eventData.schedule.status);
                eventDiv.setAttribute('data-inspector', eventData.inspectorName);
                
                // Check if this is an empty slot first
                const isEmptySlot = eventData.schedule.status == 4;
                
                // Get inspector color from mapping
                const inspectorColor = inspectorColors[eventData.inspectorName] || '#7F1C1C';
                
                // Apply different styling for empty slots and hold status
                if (isEmptySlot) {
                    if (eventData.schedule.is_on_hold) {
                        // Hold schedules: gray background like unassigned
                        eventDiv.style.backgroundColor = '#6c757d';
                        eventDiv.style.borderColor = inspectorColor;
                        eventDiv.style.color = '#ffffff';
                    } else {
                        // Available schedules: white background
                        eventDiv.style.backgroundColor = '#ffffff';
                        eventDiv.style.borderColor = inspectorColor;
                        eventDiv.style.color = '#000000';
                    }
                } else {
                    eventDiv.style.backgroundColor = inspectorColor;
                }
                
                // Truncate long inspector names for monthly view
                const displayName = eventData.inspectorName.length > 25 
                    ? eventData.inspectorName.substring(0, 22) + '...' 
                    : eventData.inspectorName;
                const titleText = isEmptySlot ? `${eventData.inspectorName} - Available Slot` : eventData.inspectorName;
                const displayText = displayName; // Show inspector name for both regular and empty slots
                
                // Get inspector avatar URL
                let avatarUrl = '{{ asset("images/inspector_01.jpg") }}'; // Default
                
                // Try to get avatar from schedule data first
                if (eventData.schedule && eventData.schedule.inspectors && Array.isArray(eventData.schedule.inspectors)) {
                    const inspector = eventData.schedule.inspectors.find(insp => 
                        `${insp.first_name} ${insp.last_name}` === eventData.inspectorName
                    );
                    if (inspector && inspector.avatar) {
                        if (typeof inspector.avatar === 'object' && inspector.avatar.thumb) {
                            avatarUrl = inspector.avatar.thumb;
                        } else if (typeof inspector.avatar === 'string') {
                            avatarUrl = inspector.avatar;
                        }
                    }
                }
                
                // If not found in schedule data, try to get from sidebar inspector list
                if (avatarUrl === '{{ asset("images/inspector_01.jpg") }}' && eventData.inspectorName) {
                    const inspectorItems = document.querySelectorAll('.inspector-item .inspector-name');
                    inspectorItems.forEach(nameElement => {
                        if (nameElement.textContent.trim() === eventData.inspectorName) {
                            const avatarImg = nameElement.closest('.inspector-item').querySelector('.inspector-avatar');
                            if (avatarImg && avatarImg.src && !avatarImg.src.includes('inspector_01.jpg')) {
                                avatarUrl = avatarImg.src;
                            }
                        }
                    });
                }
                
                // Check if this is a time-off schedule
                const isTimeOff = eventData.schedule.is_time_off;
                
                if (isTimeOff) {
                    // Time-off schedules: red background with "OFF" text (use !important to override CSS classes)
                    eventDiv.style.setProperty('background-color', '#dc3545', 'important'); // Bootstrap danger red
                    eventDiv.style.setProperty('color', '#ffffff', 'important');
                    
                    const displayName = eventData.inspectorName && eventData.inspectorName.length > 25 
                        ? eventData.inspectorName.substring(0, 22) + '...' 
                        : eventData.inspectorName;
                    
                    eventDiv.innerHTML = `
                        <div class="inspector-avatar-container">
                            <img src="${avatarUrl}" alt="Inspector" class="inspector-avatar-img"
                                 onerror="this.src='{{ asset("images/inspector_01.jpg") }}'" />
                        </div>
                        <span class="event-title" title="${eventData.inspectorName} - Time Off" style="color: #ffffff !important;">${displayName} (OFF)</span>
                        <span class="event-time" style="color: #ffffff !important;">${convertTo12Hour(eventData.schedule.effective_time || eventData.schedule.start_time)}</span>
                    `;
                    
                    // Ensure all text elements have white color for better contrast on red background
                    const timeOffTitle = eventDiv.querySelector('.event-title');
                    const timeOffTime = eventDiv.querySelector('.event-time');
                    if (timeOffTitle) timeOffTitle.style.setProperty('color', '#ffffff', 'important');
                    if (timeOffTime) timeOffTime.style.setProperty('color', '#ffffff', 'important');
                } else {
                    eventDiv.innerHTML = `
                        <div class="inspector-avatar-container">
                            <img src="${avatarUrl}" alt="Inspector" class="inspector-avatar-img"
                                 onerror="this.src='{{ asset("images/inspector_01.jpg") }}'" />
                        </div>
                        <span class="event-title" title="${titleText}">${displayText}</span>
                        <span class="event-time">${convertTo12Hour(eventData.schedule.effective_time || eventData.schedule.start_time)}${isEmptySlot ? (eventData.schedule.is_on_hold ? ` - <span class="hold-status" ${eventData.schedule.hold_reason ? `title="Hold Reason: ${eventData.schedule.hold_reason.reason}\\nHeld by: ${eventData.schedule.hold_reason.created_by}\\nHeld on: ${new Date(eventData.schedule.hold_reason.held_at).toLocaleString()}"` : ''}>Hold</span>` : ' - Available') : ''}</span>
                    `;
                }
                
                // Add tooltip event listeners
                eventDiv.addEventListener('mouseenter', (e) => {
                    cancelTooltipHide(); // Cancel any pending hide
                    if (isTimeOff) {
                        showScheduleTimeOffTooltip(e, eventData.schedule, eventData.inspectorName);
                    } else {
                        showScheduleTooltip(e, eventData.schedule.id, eventData.inspectorName, eventData.schedule);
                    }
                });
                eventDiv.addEventListener('mouseleave', (e) => {
                    if (isTimeOff) {
                        hideTimeOffTooltip();
                    } else {
                        hideScheduleTooltip();
                    }
                });
                // Keep tooltip visible if mouse moves within the element
                eventDiv.addEventListener('mousemove', (e) => {
                    cancelTooltipHide();
                });
                
            // Time-off events are now handled as regular schedule items with is_time_off flag
                
            } else {
                eventDiv.className = `event-item ${getStatusClass(eventData.schedule.status)} unassigned`;
                eventDiv.setAttribute('data-schedule-id', eventData.schedule.id);
                eventDiv.setAttribute('data-status', eventData.schedule.status);
                
                eventDiv.innerHTML = `
                    <span class="event-title">Unassigned</span>
                    <span class="event-time">${convertTo12Hour(eventData.schedule.effective_time || eventData.schedule.start_time) || 'No time'}</span>
                `;
                
                // Add tooltip event listeners for unassigned schedules
                eventDiv.addEventListener('mouseenter', (e) => {
                    cancelTooltipHide(); // Cancel any pending hide
                    showScheduleTooltip(e, eventData.schedule.id, null, eventData.schedule);
                });
                eventDiv.addEventListener('mouseleave', (e) => {
                    hideScheduleTooltip();
                });
                // Keep tooltip visible if mouse moves within the element
                eventDiv.addEventListener('mousemove', (e) => {
                    cancelTooltipHide();
                });
            }
            
            eventsDiv.appendChild(eventDiv);
        });
        
        // Add collapse button
        const collapseDiv = document.createElement('div');
        collapseDiv.className = 'event-collapse';
        collapseDiv.innerHTML = `<span class="collapse-text">- Show less</span>`;
        collapseDiv.style.cursor = 'pointer';
        collapseDiv.setAttribute('title', 'Click to show less');
        
        collapseDiv.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            collapseeDateCell(cell, eventsDiv, allEvents, maxEventsToShow);
        });
        
        eventsDiv.appendChild(collapseDiv);
        
        // Expand the cell height and remove overflow hidden
        cell.style.height = 'auto';
        cell.style.minHeight = '150px';
        eventsDiv.style.maxHeight = 'none';
        eventsDiv.style.overflow = 'visible';
    }
    
    // Function to collapse date cell back to limited view
    function collapseeDateCell(cell, eventsDiv, allEvents, maxEventsToShow) {
        // Remove expanded class
        cell.classList.remove('expanded');
        
        // Reset cell height and overflow
        cell.style.height = '120px';
        cell.style.minHeight = 'auto';
        eventsDiv.style.maxHeight = '60px';
        eventsDiv.style.overflow = 'hidden';
        
        // Clear current events
        eventsDiv.innerHTML = '';
        
        // Show limited events again
        allEvents.slice(0, maxEventsToShow).forEach(eventData => {
            const eventDiv = document.createElement('div');
            
            if (eventData.type === 'assigned') {
                eventDiv.className = `event-item ${getStatusClass(eventData.schedule.status)}`;
                eventDiv.setAttribute('data-schedule-id', eventData.schedule.id);
                eventDiv.setAttribute('data-status', eventData.schedule.status);
                eventDiv.setAttribute('data-inspector', eventData.inspectorName);
                
                // Check if this is an empty slot first
                const isEmptySlot = eventData.schedule.status == 4;
                
                // Get inspector color from mapping
                const inspectorColor = inspectorColors[eventData.inspectorName] || '#7F1C1C';
                
                // Apply different styling for empty slots and hold status
                if (isEmptySlot) {
                    if (eventData.schedule.is_on_hold) {
                        // Hold schedules: gray background like unassigned
                        eventDiv.style.backgroundColor = '#6c757d';
                        eventDiv.style.borderColor = inspectorColor;
                        eventDiv.style.color = '#ffffff';
                    } else {
                        // Available schedules: white background
                        eventDiv.style.backgroundColor = '#ffffff';
                        eventDiv.style.borderColor = inspectorColor;
                        eventDiv.style.color = '#000000';
                    }
                } else {
                    eventDiv.style.backgroundColor = inspectorColor;
                }
                
                // Truncate long inspector names for monthly view
                const displayName = eventData.inspectorName.length > 25 
                    ? eventData.inspectorName.substring(0, 22) + '...' 
                    : eventData.inspectorName;
                const titleText = isEmptySlot ? `${eventData.inspectorName} - Available Slot` : eventData.inspectorName;
                const displayText = displayName; // Show inspector name for both regular and empty slots
                
                // Get inspector avatar URL
                let avatarUrl = '{{ asset("images/inspector_01.jpg") }}'; // Default
                
                // Try to get avatar from schedule data first
                if (eventData.schedule && eventData.schedule.inspectors && Array.isArray(eventData.schedule.inspectors)) {
                    const inspector = eventData.schedule.inspectors.find(insp => 
                        `${insp.first_name} ${insp.last_name}` === eventData.inspectorName
                    );
                    if (inspector && inspector.avatar) {
                        if (typeof inspector.avatar === 'object' && inspector.avatar.thumb) {
                            avatarUrl = inspector.avatar.thumb;
                        } else if (typeof inspector.avatar === 'string') {
                            avatarUrl = inspector.avatar;
                        }
                    }
                }
                
                // If not found in schedule data, try to get from sidebar inspector list
                if (avatarUrl === '{{ asset("images/inspector_01.jpg") }}' && eventData.inspectorName) {
                    const inspectorItems = document.querySelectorAll('.inspector-item .inspector-name');
                    inspectorItems.forEach(nameElement => {
                        if (nameElement.textContent.trim() === eventData.inspectorName) {
                            const avatarImg = nameElement.closest('.inspector-item').querySelector('.inspector-avatar');
                            if (avatarImg && avatarImg.src && !avatarImg.src.includes('inspector_01.jpg')) {
                                avatarUrl = avatarImg.src;
                            }
                        }
                    });
                }
                
                eventDiv.innerHTML = `
                    <div class="inspector-avatar-container">
                        <img src="${avatarUrl}" alt="Inspector" class="inspector-avatar-img"
                             onerror="this.src='{{ asset("images/inspector_01.jpg") }}'" />
                    </div>
                    <span class="event-title" title="${titleText}">${displayText}</span>
                    <span class="event-time">${convertTo12Hour(eventData.schedule.effective_time || eventData.schedule.start_time)}${isEmptySlot ? (eventData.schedule.is_on_hold ? ` - <span class="hold-status" ${eventData.schedule.hold_reason ? `title="Hold Reason: ${eventData.schedule.hold_reason.reason}\\nHeld by: ${eventData.schedule.hold_reason.created_by}\\nHeld on: ${new Date(eventData.schedule.hold_reason.held_at).toLocaleString()}"` : ''}>Hold</span>` : ' - Available') : ''}</span>
                `;
            } else if (eventData.type === 'timeoff') {
                eventDiv.className = 'event-item timeoff-event';
                eventDiv.setAttribute('data-timeoff-id', eventData.timeOff.id);
                
                // Format time display for time off
                let timeDisplay = '';
                if (eventData.timeOff.time_off_first || eventData.timeOff.time_off_second) {
                    const times = [];
                    if (eventData.timeOff.time_off_first) {
                        times.push(convertTo12Hour(eventData.timeOff.time_off_first));
                    }
                    if (eventData.timeOff.time_off_second) {
                        times.push(convertTo12Hour(eventData.timeOff.time_off_second));
                    }
                    timeDisplay = times.join(' - ');
                } else {
                    timeDisplay = 'All Day';
                }
                
                // Truncate long employee names for monthly view
                const displayName = eventData.timeOff.employee_name.length > 20 
                    ? eventData.timeOff.employee_name.substring(0, 17) + '...' 
                    : eventData.timeOff.employee_name;
                
                eventDiv.innerHTML = `
                    <span class="event-title" title="${eventData.timeOff.employee_name} - Time Off">${displayName} (OFF)</span>
                    <span class="event-time">${timeDisplay}</span>
                `;
                
            } else {
                eventDiv.className = `event-item ${getStatusClass(eventData.schedule.status)} unassigned`;
                eventDiv.setAttribute('data-schedule-id', eventData.schedule.id);
                eventDiv.setAttribute('data-status', eventData.schedule.status);
                
                const isEmptySlot = eventData.schedule.status == 4;
                const isOnHold = eventData.schedule.is_on_hold;
                const unassignedText = isEmptySlot ? (isOnHold ? 'Hold' : 'Available') : 'Unassigned';
                
                // Apply styling for empty slots
                if (isEmptySlot) {
                    eventDiv.style.backgroundColor = '#ffffff';
                    eventDiv.style.borderColor = '#6c757d';
                    eventDiv.style.color = '#000000';
                } else {
                    eventDiv.style.backgroundColor = '#6c757d';
                }
                
                eventDiv.innerHTML = `
                    <div class="inspector-avatar-container">
                        <img src="{{ asset('images/inspector_01.jpg') }}" alt="Inspector" class="inspector-avatar-img" />
                    </div>
                    <span class="event-title">${unassignedText}</span>
                    <span class="event-time">${convertTo12Hour(eventData.schedule.effective_time || eventData.schedule.start_time)}</span>
                `;
            }
            
            eventsDiv.appendChild(eventDiv);
        });
        
        // Add "+ X more" button back if needed
        if (allEvents.length > maxEventsToShow) {
            const moreCount = allEvents.length - maxEventsToShow;
            const moreDiv = document.createElement('div');
            moreDiv.className = 'event-more';
            moreDiv.innerHTML = `<span class="more-text">+ ${moreCount} more</span>`;
            moreDiv.style.cursor = 'pointer';
            moreDiv.setAttribute('title', `Click to view all ${allEvents.length} appointments`);
            
            // Add click handler to expand again
            moreDiv.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                expandDateCell(cell, eventsDiv, allEvents, maxEventsToShow);
            });
            
            eventsDiv.appendChild(moreDiv);
        }
    }
    
    // Schedule Tooltip Functionality
    let scheduleTooltip = null;
    let tooltipTimeout = null;
    
    // Create tooltip element
    function createScheduleTooltip() {
        if (scheduleTooltip) return scheduleTooltip;
        
        scheduleTooltip = document.createElement('div');
        scheduleTooltip.className = 'schedule-tooltip';
        scheduleTooltip.id = 'scheduleTooltip';
        document.body.appendChild(scheduleTooltip);
        return scheduleTooltip;
    }
    
    // Show tooltip with schedule information
    function showScheduleTooltip(event, scheduleId, inspectorName = null, scheduleData = null) {
        // Cancel any pending hide operation
        clearTimeout(tooltipTimeout);
        
        const tooltip = createScheduleTooltip();
        
        // Find schedule data if not provided
        let schedule = scheduleData;
        if (!schedule && schedules) {
            schedule = schedules.find(s => s.id == scheduleId);
        }
        
        if (!schedule) {
            console.log('Schedule not found for tooltip:', scheduleId);
            return;
        }
        
        // Debug: Log time-off data if present
        if (schedule.is_time_off && schedule.time_off_data) {
            console.log('🕐 Time-off tooltip data:', {
                title: schedule.time_off_data.title,
                description: schedule.time_off_data.description,
                created_by: schedule.time_off_data.created_by_name
            });
        }
        
        // Get inspector color for border
        let inspectorColor = '#7F1C1C';
        if (inspectorName && inspectorColors[inspectorName]) {
            inspectorColor = inspectorColors[inspectorName];
        }
        
        // Format the tooltip content
        const tooltipContent = formatTooltipContent(schedule, inspectorName);
        tooltip.innerHTML = tooltipContent;
        
        // Apply inspector color as border and background
        tooltip.style.background = `linear-gradient(135deg, ${inspectorColor}, ${inspectorColor}dd)`;
        tooltip.style.borderLeftColor = inspectorColor;
        
        // Position tooltip
        positionTooltip(tooltip, event);
        
        // Show tooltip with animation
        setTimeout(() => {
            tooltip.classList.add('show');
        }, 10);
    }
    
    // Hide tooltip with delay to allow for smooth transitions
    function hideScheduleTooltip() {
        // Clear any existing timeout first
        clearTimeout(tooltipTimeout);
        
        // Set a small delay before hiding to prevent flicker during quick mouse movements
        tooltipTimeout = setTimeout(() => {
            if (scheduleTooltip) {
                scheduleTooltip.classList.remove('show');
                // Give time for fade out animation before removing from DOM
                setTimeout(() => {
                    if (scheduleTooltip && scheduleTooltip.parentNode) {
                        scheduleTooltip.parentNode.removeChild(scheduleTooltip);
                        scheduleTooltip = null;
                    }
                }, 200);
            }
        }, 150); // Small delay to prevent tooltip from disappearing during quick mouse movements
    }
    
    // Cancel tooltip hiding (for when mouse re-enters quickly)
    function cancelTooltipHide() {
        clearTimeout(tooltipTimeout);
    }
    
    // Format tooltip content based on schedule data
    function formatTooltipContent(schedule, inspectorName) {
        // Debug: Log schedule data for time-off detection
        if (schedule.status == 4) {
            console.log('🔍 Status 4 Schedule Debug:', {
                id: schedule.id,
                status: schedule.status,
                is_time_off: schedule.is_time_off,
                has_time_off_data: !!schedule.time_off_data,
                time_off_data: schedule.time_off_data
            });
        }
        
        // Handle time-off slots first (they also have status 4 but are different)
        if (schedule.status == 4 && schedule.is_time_off) {
            const effectiveTime = schedule.effective_time || schedule.start_time;
            const time = effectiveTime ? convertTo12Hour(effectiveTime) : 'N/A';
            const timeDisplay = schedule.adjusted_time ? `${time}` : time;
            
            // Format date only as MM-DD-YYYY
            let scheduleDate = 'N/A';
            if (schedule.scheduled_date) {
                try {
                    const scheduledDate = new Date(schedule.scheduled_date);
                    if (!isNaN(scheduledDate.getTime())) {
                        const month = String(scheduledDate.getMonth() + 1).padStart(2, '0');
                        const day = String(scheduledDate.getDate()).padStart(2, '0');
                        const year = scheduledDate.getFullYear();
                        scheduleDate = `${month}-${day}-${year}`;
                    }
                } catch (e) {
                    scheduleDate = schedule.scheduled_date;
                }
            }
            
            return `
                <div class="tooltip-header">
                    Time Off Slot
                </div>
                <div class="tooltip-row">
                    <span class="tooltip-label">Date:</span>
                    <span class="tooltip-value">${scheduleDate}</span>
                </div>
                <div class="tooltip-row">
                    <span class="tooltip-label">Time:</span>
                    <span class="tooltip-value">${timeDisplay}</span>
                </div>
                ${inspectorName ? `<div class="tooltip-row">
                    <span class="tooltip-label">Inspector:</span>
                    <span class="tooltip-value">${inspectorName}</span>
                </div>` : ''}
                <div class="tooltip-row">
                    <span class="tooltip-label">Status:</span>
                    <span class="tooltip-value">Time Off</span>
                </div>
                ${schedule.time_off_data ? `
                    <div class="tooltip-separator"></div>
                    <div class="tooltip-row">
                        <span class="tooltip-label">Title:</span>
                        <span class="tooltip-value tooltip-time-off-title">${schedule.time_off_data.title}</span>
                    </div>
                    ${schedule.time_off_data.description ? `<div class="tooltip-row">
                        <span class="tooltip-label">Description:</span>
                        <span class="tooltip-value tooltip-time-off-description">${schedule.time_off_data.description}</span>
                    </div>` : ''}
                    <div class="tooltip-row">
                        <span class="tooltip-label">Created By:</span>
                        <span class="tooltip-value">${schedule.time_off_data.created_by_name}</span>
                    </div>
                ` : ''}
            `;
        }
        
        // Handle regular available slots (status 4) 
        if (schedule.status == 4) {
            const effectiveTime = schedule.effective_time || schedule.start_time;
            const time = effectiveTime ? convertTo12Hour(effectiveTime) : 'N/A';
            const timeDisplay = schedule.adjusted_time ? `${time}` : time;
            
            // Format date only as MM-DD-YYYY
            let scheduleDate = 'N/A';
            if (schedule.scheduled_date) {
                try {
                    const scheduledDate = new Date(schedule.scheduled_date);
                    if (!isNaN(scheduledDate.getTime())) {
                        const month = String(scheduledDate.getMonth() + 1).padStart(2, '0');
                        const day = String(scheduledDate.getDate()).padStart(2, '0');
                        const year = scheduledDate.getFullYear();
                        scheduleDate = `${month}-${day}-${year}`;
                    }
                } catch (e) {
                    scheduleDate = schedule.scheduled_date;
                }
            }
            
            return `
                <div class="tooltip-header">
                    Available Time Slot
                </div>
                <div class="tooltip-row">
                    <span class="tooltip-label">Date:</span>
                    <span class="tooltip-value">${scheduleDate}</span>
                </div>
                <div class="tooltip-row">
                    <span class="tooltip-label">Time:</span>
                    <span class="tooltip-value">${timeDisplay}</span>
                </div>
                ${inspectorName ? `<div class="tooltip-row">
                    <span class="tooltip-label">Inspector:</span>
                    <span class="tooltip-value">${inspectorName}</span>
                </div>` : ''}
                <div class="tooltip-row">
                    <span class="tooltip-label">Status:</span>
                    <span class="tooltip-value">${schedule.is_on_hold ? 'On Hold' : 'Available for booking'}</span>
                </div>
                ${schedule.is_on_hold && schedule.hold_reason ? `
                    <div class="tooltip-row">
                        <span class="tooltip-label">Hold Reason:</span>
                        <span class="tooltip-value tooltip-hold-reason">${schedule.hold_reason.reason}</span>
                    </div>
                    <div class="tooltip-row">
                        <span class="tooltip-label">Held By:</span>
                        <span class="tooltip-value">${schedule.hold_reason.created_by}</span>
                    </div>
                    <div class="tooltip-row">
                        <span class="tooltip-label">Held On:</span>
                        <span class="tooltip-value">${new Date(schedule.hold_reason.held_at).toLocaleString()}</span>
                    </div>
                ` : ''}
            `;
        }

        // Regular schedule tooltip content
        const appointmentId = schedule.appointment_id || 'N/A';
        const invoiceId = schedule.invoice_id || 'N/A';
        const effectiveTime = schedule.effective_time || schedule.start_time;
        const time = effectiveTime ? convertTo12Hour(effectiveTime) : 'N/A';
        const timeDisplay = schedule.adjusted_time ? `${time} (adjusted)` : time;
        
        // Format date only as MM-DD-YYYY (time is shown separately)
        let scheduleDate = 'N/A';
        if (schedule.scheduled_date) {
            try {
                // Parse the scheduled_date
                const scheduledDate = new Date(schedule.scheduled_date);
                if (!isNaN(scheduledDate.getTime())) {
                    // Format date as MM-DD-YYYY only
                    const month = String(scheduledDate.getMonth() + 1).padStart(2, '0');
                    const day = String(scheduledDate.getDate()).padStart(2, '0');
                    const year = scheduledDate.getFullYear();
                    scheduleDate = `${month}-${day}-${year}`;
                }
            } catch (e) {
                scheduleDate = schedule.scheduled_date;
            }
        }
        
        // Build address from property data
        let address = 'No address provided';
        if (schedule.property) {
            const addressParts = [];
            if (schedule.property.address_line1) addressParts.push(schedule.property.address_line1);
            if (schedule.property.city) addressParts.push(schedule.property.city);
            if (schedule.property.state) addressParts.push(schedule.property.state);
            if (addressParts.length > 0) {
                address = addressParts.join(', ');
            }
        }
        
        // Get customer name from customer data
        const customerName = schedule.customer_names && schedule.customer_names.length > 0 
            ? schedule.customer_names[0] 
            : 'N/A';
            
        // Get agent name from agent data  
        const agentName = schedule.agent_names && schedule.agent_names.length > 0 
            ? schedule.agent_names[0] 
            : 'N/A';
            
        // Get services - show first service or all services if short enough
        let serviceName = 'N/A';
        if (schedule.services && schedule.services.length > 0) {
            if (schedule.services.length === 1) {
                serviceName = schedule.services[0];
            } else {
                serviceName = schedule.services.join(', ');
                // If too long, show first service + count
                if (serviceName.length > 45) {
                    serviceName = schedule.services[0] + ` (+${schedule.services.length - 1} more)`;
                }
            }
        }
        
        return `
            <div class="tooltip-header">
                Inspection No: ${appointmentId}
            </div>
            <div class="tooltip-row">
                <span class="tooltip-label">Invoice No:</span>
                <span class="tooltip-value">${invoiceId}</span>
            </div>
            <div class="tooltip-row">
                <span class="tooltip-label">Date:</span>
                <span class="tooltip-value">${scheduleDate}</span>
            </div>
            <div class="tooltip-row">
                <span class="tooltip-label">Time:</span>
                <span class="tooltip-value">${timeDisplay}</span>
            </div>
            <div class="tooltip-row">
                <span class="tooltip-label">Address:</span>
                <span class="tooltip-value tooltip-address">${address}</span>
            </div>
            <div class="tooltip-row">
                <span class="tooltip-label">Client:</span>
                <span class="tooltip-value">${customerName}</span>
            </div>
            <div class="tooltip-row">
                <span class="tooltip-label">Agent:</span>
                <span class="tooltip-value">${agentName}</span>
            </div>
            ${inspectorName ? `<div class="tooltip-row">
                <span class="tooltip-label">Inspector:</span>
                <span class="tooltip-value">${inspectorName}</span>
            </div>` : ''}
            <div class="tooltip-row">
                <span class="tooltip-label">Services:</span>
                <span class="tooltip-value tooltip-services">${serviceName}</span>
            </div>
            ${schedule.status == 3 && schedule.language ? `<div class="tooltip-row">
                <span class="tooltip-label">Language:</span>
                <span class="tooltip-value">${schedule.language.name}</span>
            </div>` : ''}
        `;
    }
    
    // Position tooltip relative to mouse
    function positionTooltip(tooltip, event) {
        // Get target element's position relative to viewport
        const targetRect = event.target.getBoundingClientRect();
        const tooltipRect = tooltip.getBoundingClientRect();
        const viewportWidth = window.innerWidth;
        const viewportHeight = window.innerHeight;
        
        // Calculate initial position relative to target element
        let left = targetRect.left + window.scrollX + 15;
        let top = targetRect.bottom + window.scrollY + 5;
        
        // Adjust if tooltip would go off screen horizontally
        if (left + tooltipRect.width > viewportWidth) {
            left = targetRect.right + window.scrollX - tooltipRect.width - 15;
        }
        
        // Adjust if tooltip would go off screen vertically
        if (top + tooltipRect.height > viewportHeight + window.scrollY) {
            top = targetRect.top + window.scrollY - tooltipRect.height - 5;
        }
        
        // Ensure tooltip stays within viewport with margins
        left = Math.max(10, Math.min(left, viewportWidth + window.scrollX - tooltipRect.width - 10));
        top = Math.max(10, Math.min(top, viewportHeight + window.scrollY - tooltipRect.height - 10));
        
        tooltip.style.left = left + 'px';
        tooltip.style.top = top + 'px';
    }
    
    // ================================================
    // CALENDAR-SPECIFIC FUNCTIONS  
    // ================================================
    
    
    // ====================================================================
    // IMAGE SLIDER FUNCTIONS MOVED TO schedule-modals-crud.js
    // ====================================================================
    // The following functions have been moved to the centralized file:
    // - window.scheduleImages = {} (global images array)
    // - window.scheduleImageIndex = {} (global index tracker)
    // - window.getImageUrl(imageData) (image URL helper)
    // - window.previousImage(scheduleId) (navigation function)
    // - window.nextImage(scheduleId) (navigation function)
    // - window.resetImageSlider(scheduleId) (reset helper)
    // ====================================================================
    
    // Image upload modal functions moved to schedule-modals-crud.js for centralized management
    // Functions available: uploadPropertyImages(), closeImageUploadModal(), refreshScheduleImagesAndSlider()
    
    // Map functions moved to schedule-modals-crud.js for centralized management

    
    // Event handlers for calendar events
    document.addEventListener('click', function(e) {
        // Close modal only if clicking directly on the overlay (not its children)
        if (e.target.classList.contains('schedule-modal-overlay')) {
            // Check if the click is on the overlay itself, not its children
            const rect = e.target.getBoundingClientRect();
            const isDirectOverlayClick = (
                e.clientX < rect.left + 50 || 
                e.clientX > rect.right - 50 || 
                e.clientY < rect.top + 50 || 
                e.clientY > rect.bottom - 50
            );
            
            if (isDirectOverlayClick) {
                closeScheduleModal();
                return;
            }
        }
        
        // Handle schedule box clicks - look for multiple possible selectors
        const eventItem = e.target.closest('.user_event') || 
                         e.target.closest('.event-item') || 
                         e.target.closest('[data-schedule-id]');
        
        if (eventItem && eventItem.hasAttribute('data-schedule-id')) {
            e.preventDefault();
            e.stopPropagation();
            
            const scheduleId = eventItem.getAttribute('data-schedule-id');
            const scheduleStatus = eventItem.getAttribute('data-status');
            
            if (scheduleId) {
                console.log('Opening modal for schedule ID:', scheduleId, 'Status:', scheduleStatus);
                
                // Add a small delay to prevent immediate closing
                setTimeout(() => {
                    // Check if this is an empty schedule (status = 4)
                    if (scheduleStatus == '4') {
                        // Show "Add New" modal for empty schedules
                        console.log('🔍 Looking for schedule data with ID:', scheduleId, 'in schedules array of length:', schedules.length);
                        
                        // Need to extract date and time from the schedule data
                        const scheduleData = schedules.find(s => s.id == scheduleId);
                        console.log('📋 Found schedule data:', scheduleData);
                        
                        if (scheduleData) {
                            // Create date object from schedule date
                            const scheduleDate = new Date(scheduleData.scheduled_date);
                            console.log('📅 Schedule date parsed:', scheduleDate);
                            
                            if (isNaN(scheduleDate.getTime())) {
                                console.error('❌ Invalid date:', scheduleData.scheduled_date);
                                return;
                            }
                            
                            const dayName = scheduleDate.toLocaleDateString('en-US', { weekday: 'long' });
                            const formattedDate = formatDateToMMDDYYYY(scheduleData.scheduled_date);
                            const dateString = `${dayName}, ${formattedDate}`;
                            const timeString = scheduleData.effective_time || scheduleData.start_time || scheduleData.slot || '09:00:00';
                            
                            console.log('🎯 Calling showCalendarActionModal with:', { scheduleDate, dateString, timeString, scheduleId });
                            showCalendarActionModal(scheduleDate, dateString, timeString, scheduleId, scheduleData);
                        } else {
                            console.error('❌ Schedule data not found for ID:', scheduleId);
                        }
                    } else {
                        // Show details modal for regular schedules
                        showScheduleDetailsModal(scheduleId);
                    }
                }, 100);
            } else {
                console.log('No schedule ID found on event item');
            }
        }
    });
    
    // Initialize inspector search functionality
    function initializeInspectorSearch() {
        const inspectorInput = document.getElementById('inspectorSearch');
        const inspectorClearBtn = document.getElementById('inspectorSearchClear');
        const inspectorSearchIcon = document.getElementById('inspectorSearchIcon');
        const inspectorSearchContainer = document.getElementById('inspectorSearchContainer');
        let inspectorSearchTimeout;
        
        if (!inspectorInput || !inspectorSearchIcon || !inspectorSearchContainer) {
            return;
        }
        
        // Remove existing event listeners by cloning and replacing the icon
        const newInspectorSearchIcon = inspectorSearchIcon.cloneNode(true);
        inspectorSearchIcon.parentNode.replaceChild(newInspectorSearchIcon, inspectorSearchIcon);
        
        // Handle search icon click to show/hide search input
        newInspectorSearchIcon.addEventListener('click', function(e) {
            e.preventDefault();
            
            // Check if container is hidden (either inline style or computed style)
            const isHidden = inspectorSearchContainer.style.display === 'none' || 
                           window.getComputedStyle(inspectorSearchContainer).display === 'none';
            
            if (isHidden) {
                // Show search container
                inspectorSearchContainer.style.display = 'block';
                inspectorSearchContainer.classList.add('highlighted');
                newInspectorSearchIcon.classList.add('active');
                
                // Focus on input after animation
                setTimeout(() => {
                    inspectorInput.focus();
                    inspectorSearchContainer.classList.remove('highlighted');
                }, 300);
            } else {
                // Hide search container
                hideInspectorSearch();
            }
        });
        
        // Function to hide search container
        function hideInspectorSearch() {
            inspectorSearchContainer.style.display = 'none';
            newInspectorSearchIcon.classList.remove('active');
            inspectorInput.value = '';
            if (inspectorClearBtn) {
                inspectorClearBtn.style.display = 'none';
            }
            
            // Remove any "no results" message and show all inspectors
            const inspectorsList = document.querySelector('.inspector_leftlist ul');
            const noResultsMsg = inspectorsList?.querySelector('.no-search-results');
            if (noResultsMsg) {
                noResultsMsg.remove();
            }
            filterInspectors('');
        }
        
        // Handle input events with debouncing
        inspectorInput.addEventListener('input', function(e) {
            // Prevent accordion toggle when typing in search
            e.stopPropagation();
            
            const query = this.value.trim();
            
            // Show/hide clear button
            if (query.length > 0 && inspectorClearBtn) {
                inspectorClearBtn.style.display = 'flex';
            } else if (inspectorClearBtn) {
                inspectorClearBtn.style.display = 'none';
                filterInspectors(''); // Show all inspectors when search is empty
                return;
            }
            
            // Debounce search
            clearTimeout(inspectorSearchTimeout);
            inspectorSearchTimeout = setTimeout(() => {
                filterInspectors(query);
            }, 300);
        });
        
        // Handle search input events to prevent accordion collapse
        inspectorInput.addEventListener('focus', function(e) {
            e.stopPropagation();
        });
        
        inspectorInput.addEventListener('blur', function(e) {
            e.stopPropagation();
        });
        
        inspectorInput.addEventListener('keydown', function(e) {
            e.stopPropagation();
            if (e.key === 'Escape') {
                hideInspectorSearch();
            }
        });
        
        inspectorInput.addEventListener('keyup', function(e) {
            e.stopPropagation();
        });
        
        inspectorInput.addEventListener('click', function(e) {
            e.stopPropagation();
        });
        
        inspectorInput.addEventListener('mousedown', function(e) {
            e.stopPropagation();
        });
        
        inspectorInput.addEventListener('mouseup', function(e) {
            e.stopPropagation();
        });
        
        // Handle click outside to hide search
        document.addEventListener('click', function(e) {
            if (!inspectorSearchContainer.contains(e.target) && 
                !newInspectorSearchIcon.contains(e.target) && 
                inspectorSearchContainer.style.display !== 'none') {
                hideInspectorSearch();
            }
        });
        
        // Handle clear button events to prevent accordion collapse
        if (inspectorClearBtn) {
            inspectorClearBtn.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                
                inspectorInput.value = '';
                inspectorClearBtn.style.display = 'none';
                
                // Remove any "no results" message
                const inspectorsList = document.querySelector('.inspector_leftlist ul');
                const noResultsMsg = inspectorsList?.querySelector('.no-search-results');
                if (noResultsMsg) {
                    noResultsMsg.remove();
                }
                
                filterInspectors(''); // Show all inspectors
            });
            
            inspectorClearBtn.addEventListener('mousedown', function(e) {
                e.preventDefault();
                e.stopPropagation();
            });
            
            inspectorClearBtn.addEventListener('mouseup', function(e) {
                e.preventDefault();
                e.stopPropagation();
            });
        }
    }
    
    // Filter inspectors based on search query
    function filterInspectors(query) {
        const inspectorItems = document.querySelectorAll('.inspector-item');
        const searchQuery = query.toLowerCase();
        
        // If no inspector items found (e.g., placeholder text is showing), don't filter
        if (inspectorItems.length === 0) {
            return;
        }
        
        let visibleCount = 0;
        
        inspectorItems.forEach(item => {
            const inspectorName = item.querySelector('.inspector-name');
            if (!inspectorName) return;
            
            const name = inspectorName.textContent.toLowerCase();
            
            if (searchQuery === '' || name.includes(searchQuery)) {
                item.style.display = 'flex';
                visibleCount++;
            } else {
                item.style.display = 'none';
            }
        });
        
        // Show "No results" message if no inspectors match
        const inspectorsList = document.querySelector('.inspector_leftlist ul');
        const noResultsMsg = inspectorsList.querySelector('.no-search-results');
        
        if (visibleCount === 0 && query !== '') {
            if (!noResultsMsg) {
                const noResultsItem = document.createElement('li');
                noResultsItem.className = 'no-search-results text-center py-3';
                noResultsItem.innerHTML = '<span class="text-muted">No inspectors found matching "' + query + '"</span>';
                inspectorsList.appendChild(noResultsItem);
            }
        } else {
            if (noResultsMsg) {
                noResultsMsg.remove();
            }
        }
    }
    
    // Confirm global functions are available
    console.log('✅ Calendar functions initialized. Map function available:', typeof window.initializeScheduleMap === 'function');
});

// Global switchView function - accessible from anywhere
window.switchView = function(view) {
    currentView = view;
    
    // Update button states
    const monthBtn = document.getElementById('month-view-btn');
    const weekBtn = document.getElementById('week-view-btn');
    
    if (monthBtn) monthBtn.classList.toggle('active', view === 'month');
    if (weekBtn) weekBtn.classList.toggle('active', view === 'week');
    
    // Show/hide calendar views
    const monthlyCalendar = document.getElementById('monthly-calendar');
    const weeklyCalendar = document.getElementById('weekly-calendar');
    
    if (monthlyCalendar) {
        monthlyCalendar.style.display = view === 'month' ? 'block' : 'none';
    }
    if (weeklyCalendar) {
        weeklyCalendar.style.display = view === 'week' ? 'block' : 'none';
    }
    
    // Update navigation text and reload data
    window.updateNavigationText();
    loadScheduleData();
};



// Schedule Details Modal Action Functions

window.reschedule = function(scheduleId) {
    console.log('Opening reschedule modal for schedule ID:', scheduleId);
    
    // Find the current schedule data
    let schedule = null;
    if (schedules) {
        schedule = schedules.find(s => s.id == scheduleId);
    }
    
    window.showRescheduleModal(scheduleId, schedule);
};

    // ====================================================================
    // EDIT NOTE FUNCTIONS MOVED TO schedule-modals-crud.js
    // ====================================================================
    // The following functions have been moved to the centralized file:
    // - window.editScheduleNote(scheduleId) (main edit function)
    // - window.continueEditNote(scheduleId) (continue edit process)
    // - window.createEditNoteModal() (modal creation)
    // - window.showEditNoteModal() (modal display)
    // - window.saveScheduleNote() (save note content)
    // - window.initTinyMCEForNote(content) (TinyMCE initialization)
    // - window.initTinyMCEEditor(content) (TinyMCE editor setup)
    // ====================================================================

// Custom address autocomplete initialization for modal
window.initModalAddressAutocomplete = function() {
    console.log('Initializing modal address autocomplete');
    
    const input = document.getElementById("address_auto_complete");
    if (!input) {
        console.log('Address input not found');
        return;
    }

    // Wait for Google Maps API to be ready
    const initAutocomplete = () => {
        if (typeof google === 'undefined' || !google.maps || !google.maps.places) {
            console.log('Google Maps or Places API not ready, waiting...');
            console.log('Google:', typeof google !== 'undefined');
            console.log('Google Maps:', typeof google !== 'undefined' && !!google.maps);
            console.log('Google Places:', typeof google !== 'undefined' && !!google.maps && !!google.maps.places);
            setTimeout(initAutocomplete, 500);
            return;
        }

        console.log('Google Maps ready, setting up autocomplete');
        console.log('Google Places Autocomplete available?', typeof google.maps.places.Autocomplete !== 'undefined');
        console.log('Input element:', input);
        console.log('Input element type:', input.type);
        console.log('Input element id:', input.id);
        console.log('Input element value:', input.value);

        // Initialize map for modal
        let map = null;
        let marker = null;
        const mapEl = document.getElementById('property-map');
        if (mapEl) {
            console.log('Initializing map');
            map = new google.maps.Map(mapEl, {
                center: { lat: 37.0902, lng: -95.7129 },
                zoom: 4,
                mapTypeControl: false,
                streetViewControl: false,
                fullscreenControl: false
            });
            console.log('Map initialized successfully');
        } else {
            console.log('Map element not found');
        }

        // Initialize autocomplete
        console.log('Creating autocomplete for input:', input);
        let autocomplete;
        try {
            autocomplete = new google.maps.places.Autocomplete(input, {
                types: ["geocode"],
                fields: ["address_components", "geometry", "formatted_address"]
            });
            console.log('Autocomplete created successfully:', autocomplete);
            
            // Fix positioning and CSS issues for modal
            setTimeout(() => {
                const pacContainers = document.querySelectorAll('.pac-container');
                pacContainers.forEach(container => {
                    container.style.zIndex = '20000'; // Higher than modal z-index
                    container.style.position = 'absolute';
                    console.log('Fixed pac-container z-index:', container);
                });
            }, 100);
            
        } catch (error) {
            console.error('Error creating autocomplete:', error);
            return;
        }

        autocomplete.addListener("place_changed", () => {
            const place = autocomplete.getPlace();
            if (!place || !place.address_components) {
                console.log('No place data received');
                return;
            }

            console.log('Place selected:', place);

            // Get DOM elements
            const cityEl = document.getElementById("city_auto_complete");
            const stateEl = document.getElementById("state_auto_complete");
            const countryEl = document.getElementById("country_auto_complete");
            const zipEl = document.getElementById("zip_auto_complete");
            const latEl = document.getElementById("lat_hidden");
            const lngEl = document.getElementById("lng_hidden");
            const addressLine1El = document.getElementById("address-line-1");

            // Helper function to extract address components
            function getAddressComponent(place, type, key) {
                const c = (place.address_components || []).find(x => (x.types || []).includes(type));
                return c ? c[key] : "";
            }

            // Extract components
            const city = getAddressComponent(place, "locality", "long_name") || 
                         getAddressComponent(place, "administrative_area_level_3", "long_name") || "";
            const stateFull = getAddressComponent(place, "administrative_area_level_1", "long_name");
            const country = getAddressComponent(place, "country", "long_name");
            const countryCode = getAddressComponent(place, "country", "short_name");
            const postalCode = getAddressComponent(place, "postal_code", "short_name");
            const postalSuffix = getAddressComponent(place, "postal_code_suffix", "short_name");
            
            // Extract street address components for Address Line #1
            const streetNumber = getAddressComponent(place, "street_number", "long_name");
            const route = getAddressComponent(place, "route", "long_name");
            const streetAddress = [streetNumber, route].filter(Boolean).join(" ");
            
            // Set full address from formatted_address
            input.value = place.formatted_address || input.value;

            // Fill Address Line #1 with street address
            if (addressLine1El && streetAddress) {
                addressLine1El.value = streetAddress;
            }

            // Fill city, state, country
            if (cityEl) cityEl.value = city;
            if (stateEl) stateEl.value = stateFull || "";
            if (countryEl) countryEl.value = country || "";

            // Fill ZIP
            if (zipEl) {
                zipEl.value = (countryCode === "US" && postalSuffix) ?
                    `${postalCode}-${postalSuffix}` :
                    (postalCode || "");
            }

            // Fill lat/lng and update map/marker
            if (place.geometry && place.geometry.location) {
                const lat = place.geometry.location.lat();
                const lng = place.geometry.location.lng();
                
                console.log('Setting coordinates:', lat, lng);
                
                if (latEl) latEl.value = lat;
                if (lngEl) lngEl.value = lng;

                if (map) {
                    const position = { lat, lng };
                    map.setCenter(position);
                    map.setZoom(15);
                    
                    if (!marker) {
                        marker = new google.maps.Marker({
                            position,
                            map,
                            draggable: true
                        });

                        marker.addListener('dragend', (e) => {
                            const newPos = e.latLng;
                            if (latEl) latEl.value = newPos.lat();
                            if (lngEl) lngEl.value = newPos.lng();
                        });
                    } else {
                        marker.setPosition(position);
                    }
                }
            } else {
                if (latEl) latEl.value = "";
                if (lngEl) lngEl.value = "";
            }

            console.log('Address autocomplete completed');
        });

        // Initial restore if lat/lng already filled
        const initLatEl = document.getElementById('lat_hidden');
        const initLngEl = document.getElementById('lng_hidden');
        if (map && initLatEl && initLngEl && initLatEl.value && initLngEl.value) {
            const initPos = { lat: parseFloat(initLatEl.value), lng: parseFloat(initLngEl.value) };
            if (!isNaN(initPos.lat) && !isNaN(initPos.lng)) {
                map.setCenter(initPos);
                map.setZoom(15);
                if (!marker) {
                    marker = new google.maps.Marker({ 
                        position: initPos, 
                        map, 
                        draggable: true 
                    });
                    marker.addListener('dragend', (e) => {
                        const newPos = e.latLng;
                        initLatEl.value = newPos.lat();
                        initLngEl.value = newPos.lng();
                    });
                } else {
                    marker.setPosition(initPos);
                }
            }
        }
    };

    // Start initialization
    initAutocomplete();
};



// initClientAddressAutocomplete function moved to schedule-modals-crud.js



// ========================================
// CALENDAR ACTION MODAL FUNCTION
// ========================================

// Show Calendar Action Modal (Create Appointment / Employee Time Off)
window.showCalendarActionModal = function(clickedDate, dateString, timeString, scheduleId = null, scheduleData = null) {
    console.log('📅 Opening Calendar Action Modal for:', dateString, timeString, 'Schedule ID:', scheduleId, 'Is On Hold:', scheduleData ? scheduleData.is_on_hold : 'N/A');
    
    // Store schedule data globally for access in onclick handlers
    window.currentScheduleData = scheduleData;
    
    // Create proper date string without timezone issues
    const properDateString = `${clickedDate.getFullYear()}-${String(clickedDate.getMonth() + 1).padStart(2, '0')}-${String(clickedDate.getDate()).padStart(2, '0')}`;
    console.log('🔧 Date conversion:', { clickedDate: clickedDate.toDateString(), properDateString });
    
    // Format the time for display (remove seconds if present)
    let displayTime = timeString;
    if (timeString.includes(':')) {
        const timeParts = timeString.split(':');
        if (timeParts.length >= 2) {
            displayTime = `${timeParts[0]}:${timeParts[1]}`;
            // Convert 24-hour to 12-hour for display if it's in 24-hour format
            if (!timeString.includes('AM') && !timeString.includes('PM')) {
                displayTime = convertTo12Hour(displayTime + ':00');
            }
        }
    }
    
    // Extract inspector information from scheduleData
    let inspectorDisplay = '';
    if (scheduleData && scheduleData.inspectors && scheduleData.inspectors.length > 0) {
        const inspectorNames = scheduleData.inspectors.join(', ');
        inspectorDisplay = `
            <div class="inspector-info">
                <strong>Inspector:</strong> ${inspectorNames}
            </div>`;
    }
    
    const modalHtml = `
        <div class="schedule-modal-overlay" id="calendarActionModal">
            <div class="calendar-action-modal" onclick="event.stopPropagation()">
                <div class="modal-header">
                    <h3>Add New</h3>
                    <button class="schedule-modal-close" onclick="closeCalendarActionModal()">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="date-time-info">
                        ${inspectorDisplay}
                        <div class="date-time-display">
                            <strong>Date & Time:</strong> ${dateString} ${displayTime}
                        </div>
                    </div>
                    <div class="action-buttons">
                        <button type="button" class="btn btn-primary action-btn" onclick="createAppointment('${clickedDate.getFullYear()}-${String(clickedDate.getMonth() + 1).padStart(2, '0')}-${String(clickedDate.getDate()).padStart(2, '0')}', '${timeString}', ${scheduleId || 'null'})">
                            <i class="fas fa-calendar-plus"></i>
                            ${scheduleId ? 'CREATE APPOINTMENT' : 'CREATE APPOINTMENT'}
                        </button>
                        ${scheduleData && scheduleData.is_time_off ? 
                            `<button type="button" class="btn btn-danger action-btn" onclick="removeTimeOffSchedule(${scheduleId}, '${scheduleData.inspectors ? scheduleData.inspectors[0] : 'Employee'}')">
                                <i class="fas fa-trash-alt"></i>
                                REMOVE TIME OFF
                            </button>` :
                            `<button type="button" class="btn btn-warning action-btn" onclick="createEmployeeTimeOff('${clickedDate.getFullYear()}-${String(clickedDate.getMonth() + 1).padStart(2, '0')}-${String(clickedDate.getDate()).padStart(2, '0')}', '${timeString}', ${scheduleId || 'null'}, ${scheduleId ? 'currentScheduleData' : 'null'})">
                                <i class="fas fa-user-clock"></i>
                                EMPLOYEE TIME OFF
                            </button>`
                        }
                        ${scheduleId ? (scheduleData && scheduleData.is_on_hold ? 
                            `<button type="button" class="btn btn-secondary action-btn" onclick="removeHoldTimeSlot(${scheduleId})" style="background-color: #6c757d; border-color: #6c757d;">
                                <i class="fas fa-play"></i>
                                REMOVE HOLD
                            </button>` :
                            `<button type="button" class="btn btn-info action-btn" onclick="showHoldTimeModal(${scheduleId})">
                                <i class="fas fa-pause"></i>
                                HOLD TIME
                            </button>`
                        ) : ''}
                        ${scheduleId ? 
                            `<button type="button" class="btn btn-success action-btn" onclick="showAdjustStartTimeModal(${scheduleId}, '${dateString}', '${timeString}')">
                                <i class="fas fa-clock"></i>
                                ADJUST START TIME
                            </button>` : ''}
                        <button type="button" class="btn btn-secondary action-btn" onclick="closeCalendarActionModal()">
                            <i class="fas fa-times"></i>
                            CANCEL
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', modalHtml);
    
    // Add click handler to close modal when clicking overlay
    document.getElementById('calendarActionModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeCalendarActionModal();
        }
    });
};

// Close Calendar Action Modal
window.closeCalendarActionModal = function() {
    const modal = document.getElementById('calendarActionModal');
    if (modal) {
        modal.remove();
    }
};

// Hold Time Slot Function
window.holdTimeSlot = function(scheduleId) {
    console.log('🔒 Holding time slot for schedule ID:', scheduleId);
    
    // Show loading state
    const button = event.target.closest('.btn');
    const originalText = button.innerHTML;
    button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> HOLDING...';
    button.disabled = true;
    
    // Make AJAX request to update is_on_hold status
    fetch('{{ route("admin.schedule.hold-timeslot") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            schedule_id: scheduleId,
            is_on_hold: 1
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 200) {
            console.log('✅ Time slot held successfully');
            
            // Close modal
            closeCalendarActionModal();
            
            // Reload calendar to show updated status
            loadScheduleData();
            
            // Show success message
            showNotification('success', data.message || 'Time slot put on hold successfully');
        } else {
            console.error('❌ Failed to hold time slot:', data.message);
            
            // Restore button state
            button.innerHTML = originalText;
            button.disabled = false;
            
            // Show error message
            showNotification('error', data.message || 'Failed to hold time slot');
        }
    })
    .catch(error => {
        console.error('❌ Error holding time slot:', error);
        
        // Restore button state
        button.innerHTML = originalText;
        button.disabled = false;
        
        // Show error message
        showNotification('error', 'Error holding time slot: ' + error.message);
    });
};

// Remove Hold Time Slot Function
window.removeHoldTimeSlot = function(scheduleId) {
    console.log('🔓 Removing hold from time slot for schedule ID:', scheduleId);
    
    // Show loading state
    const button = event.target.closest('.btn');
    const originalText = button.innerHTML;
    button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> REMOVING HOLD...';
    button.disabled = true;
    
    // Make AJAX request to remove hold with proper cleanup
    fetch('{{ route("admin.schedule.remove-hold-timeslot") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            schedule_id: scheduleId
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 200) {
            console.log('✅ Hold removed successfully');
            
            // Close modal
            closeCalendarActionModal();
            
            // Reload calendar to show updated status
            loadScheduleData();
            
            // Show success message
            showNotification('success', data.message || 'Hold removed successfully');
        } else {
            console.error('❌ Failed to remove hold:', data.message);
            
            // Restore button state
            button.innerHTML = originalText;
            button.disabled = false;
            
            // Show error message
            showNotification('error', data.message || 'Failed to remove hold');
        }
    })
    .catch(error => {
        console.error('❌ Error removing hold:', error);
        
        // Restore button state
        button.innerHTML = originalText;
        button.disabled = false;
        
        // Show error message
        showNotification('error', 'Error removing hold: ' + error.message);
    });
};

// Create Appointment Handler
window.createAppointment = function(date, time, scheduleId = null) {
    closeCalendarActionModal();
    
    // If we have a schedule ID (existing empty slot), redirect to edit mode
    if (scheduleId) {
        console.log('📝 Opening existing schedule in edit mode:', scheduleId);
        window.location.href = `/schedule/step1/${scheduleId}`;
        return;
    }
    
    // Convert time to 24-hour format if it's in 12-hour format
    let timeParam = time;
    if (time.includes('AM') || time.includes('PM')) {
        // Convert from "9:00 AM" to "09:00" format
        const [timePart, period] = time.split(' ');
        let [hour, minute] = timePart.split(':').map(Number);
        
        if (period === 'PM' && hour !== 12) {
            hour += 12;
        } else if (period === 'AM' && hour === 12) {
            hour = 0;
        }
        
        timeParam = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
    }
    
    // Redirect to schedule step1 page with pre-filled date and time (new appointment)
    window.location.href = `/schedule/step1?scheduled_date=${date}&start_time=${timeParam}`;
};

// Create Employee Time Off Handler  
window.createEmployeeTimeOff = function(date, time, scheduleId = null, scheduleData = null) {
    closeCalendarActionModal();
    
    // Convert date to proper YYYY-MM-DD format without timezone issues
    let dateString = '';
    if (date instanceof Date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        dateString = `${year}-${month}-${day}`;
    } else {
        dateString = date;
    }
    
    // Handle schedule data parameter - if it's a string reference, get from global
    if (scheduleData === 'currentScheduleData') {
        scheduleData = window.currentScheduleData;
    }
    
    // Handle null string parameters
    if (scheduleData === 'null') {
        scheduleData = null;
    }
    if (scheduleId === 'null') {
        scheduleId = null;
    }
    
    console.log('🔍 Parameters resolved:', { scheduleId, scheduleData });
    
    // Extract inspector information from schedule data
    let inspectorId = null;
    if (scheduleData && scheduleData.inspector_data) {
        // Get first inspector's ID from inspector_data
        const inspectorNames = Object.keys(scheduleData.inspector_data);
        if (inspectorNames.length > 0) {
            const firstInspectorName = inspectorNames[0];
            inspectorId = scheduleData.inspector_data[firstInspectorName].id;
            console.log('🔍 Found inspector from schedule:', firstInspectorName, 'ID:', inspectorId);
        }
    }
    
    console.log('🕒 Creating Employee Time Off:', { originalDate: date, dateString, time, scheduleId, inspectorId });
    
    // Show the add time off modal with pre-filled date, time, inspector, and scheduleId
    showAddTimeOffModalDirect(dateString, time, inspectorId, scheduleId);
};

// ========================================
// ADJUST START TIME MODAL FUNCTIONS
// ========================================

// Show Adjust Start Time Modal
window.showAdjustStartTimeModal = function(scheduleId, dateString, currentTime) {
    console.log('🕒 Opening Adjust Start Time Modal for Schedule ID:', scheduleId, 'Date:', dateString, 'Current Time:', currentTime);
    
    // Find the schedule to check if it has adjusted time
    const schedule = schedules ? schedules.find(s => s.id == scheduleId) : null;
    const hasAdjustedTime = schedule && schedule.adjusted_time;
    const originalTime = schedule ? schedule.start_time : 'N/A';
    
    // Format date to MM-DD-YYYY format
    const formattedDate = formatDateToMMDDYYYY(dateString);
    
    // Generate time options based on original slot time (different ranges for AM/PM slots)
    const timeOptions = generateAdjustTimeOptions(currentTime, originalTime);
    
    const modalHtml = `
        <div class="schedule-modal-overlay" id="adjustStartTimeModal">
            <div class="adjust-start-time-modal" onclick="event.stopPropagation()">
                <div class="modal-header">
                    <h3>Adjust Start Time</h3>
                    <button class="schedule-modal-close" onclick="closeAdjustStartTimeModal()">&times;</button>
                </div>
                <div class="modal-body">
                    <form id="adjustStartTimeForm">
                        <div class="form-group mb-3">
                            <label for="adjustDate" class="form-label">Date</label>
                            <input type="text" id="adjustDate" class="form-control" value="${formattedDate}" readonly style="background-color: #f8f9fa;">
                        </div>
                        <div class="form-group mb-4">
                            <label for="adjustStartTime" class="form-label">${hasAdjustedTime ? 'Adjust Start Time' : 'Adjust Start Time'}</label>
                            <select id="adjustStartTime" class="form-select" required>
                                ${timeOptions}
                            </select>
                        </div>
                        <div class="modal-actions">
                            <button type="button" class="btn btn-success" onclick="saveAdjustedStartTime(${scheduleId})">
                                <i class="fas fa-save"></i> Save Changes
                            </button>
                            <button type="button" class="btn btn-secondary" onclick="closeAdjustStartTimeModal()">
                                <i class="fas fa-times"></i> Cancel
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    `;
    
    // Close the calendar action modal first
    closeCalendarActionModal();
    
    // Add the adjust start time modal
    document.body.insertAdjacentHTML('beforeend', modalHtml);
    
    // Add click handler to close modal when clicking overlay
    document.getElementById('adjustStartTimeModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeAdjustStartTimeModal();
        }
    });
};

// Generate time options for adjust start time modal
function generateAdjustTimeOptions(currentTime, originalTime = null) {
    const options = [];
    
    // Convert current time to 24-hour format for comparison
    let currentTime24 = currentTime;
    if (currentTime.includes('AM') || currentTime.includes('PM')) {
        const [timePart, period] = currentTime.split(' ');
        let [hour, minute] = timePart.split(':').map(Number);
        
        if (period === 'PM' && hour !== 12) {
            hour += 12;
        } else if (period === 'AM' && hour === 12) {
            hour = 0;
        }
        
        currentTime24 = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
    }
    
    // Determine time range based on original slot time
    let startHour, endHour;
    
    if (originalTime) {
        // Extract hour from original time to determine slot type
        let originalHour;
        if (originalTime.includes(':')) {
            originalHour = parseInt(originalTime.split(':')[0]);
            // Handle 24-hour format times like "14:00"
            if (originalTime.length <= 5) {
                // Already in 24-hour format
            } else if (originalTime.includes('AM') || originalTime.includes('PM')) {
                // Convert from 12-hour format
                const [timePart, period] = originalTime.split(' ');
                originalHour = parseInt(timePart.split(':')[0]);
                if (period === 'PM' && originalHour !== 12) {
                    originalHour += 12;
                } else if (period === 'AM' && originalHour === 12) {
                    originalHour = 0;
                }
            }
        } else {
            originalHour = 9; // Default fallback
        }
        
        // Determine slot type and set appropriate range
        if (originalHour >= 6 && originalHour <= 12) {
            // Morning slot (9:00 AM) -> Range: 6:00 to 13:00
            startHour = 6;
            endHour = 13;
        } else {
            // Afternoon slot (2:00 PM) -> Range: 11:00 to 20:00
            startHour = 11;
            endHour = 20;
        }
    } else {
        // Fallback to original range if no original time provided
        startHour = 8;
        endHour = 18;
    }
    
    // Generate options with 15-minute intervals (24-hour format)
    for (let hour = startHour; hour <= endHour; hour++) {
        for (let minute = 0; minute < 60; minute += 15) {
            // Stop exactly at the end time (don't generate times beyond endHour:00)
            if (hour === endHour && minute > 0) {
                break;
            }
            
            const timeValue = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
            const displayTime = timeValue; // Display in 24-hour format
            const isSelected = timeValue === currentTime24 ? 'selected' : '';
            
            options.push(`<option value="${timeValue}" ${isSelected}>${displayTime}</option>`);
        }
    }
    
    return options.join('');
}

// Close Adjust Start Time Modal
window.closeAdjustStartTimeModal = function() {
    const modal = document.getElementById('adjustStartTimeModal');
    if (modal) {
        modal.remove();
    }
};

// Save Adjusted Start Time
window.saveAdjustedStartTime = function(scheduleId) {
    console.log('💾 Saving adjusted start time for Schedule ID:', scheduleId);
    
    const startTimeSelect = document.getElementById('adjustStartTime');
    const newStartTime = startTimeSelect.value;
    
    if (!newStartTime) {
        alert('Please select a start time.');
        return;
    }
    
    // Show loading state
    const saveButton = event.target;
    const originalText = saveButton.innerHTML;
    saveButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Saving...';
    saveButton.disabled = true;
    
    // Make AJAX request to adjust start time using web route
    fetch('{{ route("admin.schedule.adjust-start-time") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            schedule_id: scheduleId,
            start_time: newStartTime
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 200) {
            console.log('✅ Start time adjusted successfully:', data);
            
            // Show success notification
            showNotification('success', 'Start time adjusted successfully!');
            
            // Close the modal
            closeAdjustStartTimeModal();
            
            // Reload calendar data to reflect changes
            loadScheduleData();
        } else {
            console.error('❌ Error adjusting start time:', data);
            showNotification('error', data.message || 'Error adjusting start time');
            
            // Restore button state
            saveButton.innerHTML = originalText;
            saveButton.disabled = false;
        }
    })
    .catch(error => {
        console.error('❌ Network error adjusting start time:', error);
        showNotification('error', 'Network error adjusting start time: ' + error.message);
        
        // Restore button state
        saveButton.innerHTML = originalText;
        saveButton.disabled = false;
    });
};

// ========================================
// HOLD TIME MANAGEMENT FUNCTIONS  
// ========================================

// Show Hold Time Modal
window.showHoldTimeModal = function(scheduleId) {
    console.log('🔒 Opening Hold Time Modal for schedule ID:', scheduleId);
    
    const modalHtml = `
        <div class="schedule-modal-overlay" id="holdTimeModal">
            <div class="hold-time-modal" onclick="event.stopPropagation()">
                <div class="modal-header">
                    <h3>Hold Time Slot</h3>
                    <button class="schedule-modal-close" onclick="closeHoldTimeModal()">&times;</button>
                </div>
                <div class="modal-body">
                    <form id="holdTimeForm">
                        <div class="form-group mb-3">
                            <label for="holdReason" class="form-label">Reason for Hold <span class="text-danger">*</span></label>
                            <textarea id="holdReason" class="form-control" rows="4" placeholder="Please provide a reason for putting this time slot on hold..." required maxlength="500"></textarea>
                            <small class="form-text text-muted">Maximum 500 characters</small>
                        </div>
                        <div class="modal-actions">
                            <button type="button" class="btn btn-success" onclick="submitHoldTimeSlot(${scheduleId})">
                                <i class="fas fa-pause"></i> Hold Time Slot
                            </button>
                            <button type="button" class="btn btn-secondary" onclick="closeHoldTimeModal()">
                                <i class="fas fa-times"></i> Cancel
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    `;
    
    // Close the calendar action modal first
    closeCalendarActionModal();
    
    // Add the hold time modal
    document.body.insertAdjacentHTML('beforeend', modalHtml);
    
    // Add click handler to close modal when clicking overlay
    document.getElementById('holdTimeModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeHoldTimeModal();
        }
    });
    
    // Focus on the textarea
    setTimeout(() => {
        document.getElementById('holdReason').focus();
    }, 100);
};

// Close Hold Time Modal
window.closeHoldTimeModal = function() {
    const modal = document.getElementById('holdTimeModal');
    if (modal) {
        modal.remove();
    }
};

// Submit Hold Time Slot with Reason
window.submitHoldTimeSlot = function(scheduleId) {
    console.log('🔒 Submitting hold time slot for schedule ID:', scheduleId);
    
    const reasonTextarea = document.getElementById('holdReason');
    const reason = reasonTextarea.value.trim();
    
    // Validate reason
    if (!reason) {
        showNotification('error', 'Please provide a reason for holding this time slot');
        reasonTextarea.focus();
        return;
    }
    
    if (reason.length > 500) {
        showNotification('error', 'Reason cannot exceed 500 characters');
        reasonTextarea.focus();
        return;
    }
    
    // Show loading state
    const submitButton = document.querySelector('#holdTimeModal .btn-success');
    const originalText = submitButton.innerHTML;
    submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Holding...';
    submitButton.disabled = true;
    
    // Get tenant ID for Super Admin or use session tenant
    const tenantSelect = document.getElementById('tenantSelect');
    let tenantId = null;
    
    @if($show_tenant_dropdown ?? false)
    // Super Admin: get tenant from dropdown
    if (tenantSelect && tenantSelect.value) {
        tenantId = tenantSelect.value;
    } else {
        showNotification('error', 'Please select a tenant first');
        submitButton.innerHTML = originalText;
        submitButton.disabled = false;
        return;
    }
    @else
    // Regular Admin: tenant from session (handled by backend)
    tenantId = null;
    @endif

    // Make AJAX request to hold time slot with reason
    fetch('{{ route("admin.schedule.hold-timeslot-with-reason") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            schedule_id: scheduleId,
            reason: reason,
            tenant_id: tenantId
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 200) {
            console.log('✅ Time slot held successfully with reason');
            
            // Close modal
            closeHoldTimeModal();
            
            // Reload calendar to show updated status
            loadScheduleData();
            
            // Show success message
            showNotification('success', data.message || 'Time slot put on hold successfully');
        } else {
            console.error('❌ Failed to hold time slot:', data.message);
            
            // Restore button state
            submitButton.innerHTML = originalText;
            submitButton.disabled = false;
            
            // Show error message
            showNotification('error', data.message || 'Failed to hold time slot');
        }
    })
    .catch(error => {
        console.error('❌ Error holding time slot:', error);
        
        // Restore button state
        submitButton.innerHTML = originalText;
        submitButton.disabled = false;
        
        // Show error message
        showNotification('error', 'Network error: ' + error.message);
    });
};

// ========================================
// EMPLOYEE TIME OFF MANAGEMENT FUNCTIONS
// ========================================

// Show Employee Time Off Modal
window.showEmployeeTimeOffModal = function(prefilledDate = null) {
    console.log('🕒 Opening Employee Time Off Modal');
    
    // Get current tenant ID
    let tenantId = '';
    const tenantSelect = document.getElementById('tenantSelect');
    if (tenantSelect) {
        tenantId = tenantSelect.value;
        if (!tenantId) {
            alert('Please select a tenant first.');
            return;
        }
    } else {
        // Regular user - tenant is in session
        tenantId = '{{ session("tenant_id") }}';
    }
    
    // Show custom loading modal for time off
    showTimeOffLoadingModal();
    
    // Fetch time off data
    fetch(`{{ route('admin.schedule.time-off.index') }}?tenant_id=${tenantId}`, {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        console.log('📋 Time off data received:', data);
        if (data.status === 200) {
            renderEmployeeTimeOffModal(data.data, prefilledDate);
        } else {
            showErrorModal(data.message || 'Failed to load time off data. Please try again.');
        }
    })
    .catch(error => {
        console.error('Fetch error:', error);
        showErrorModal('Error loading time off data. Please try again.');
    });
};

// Show loading modal specifically for time off
function showTimeOffLoadingModal() {
    const loadingHtml = `
        <div class="modal fade show" id="timeOffLoadingModal" tabindex="-1" role="dialog" style="display: block; z-index: 1040;">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #007bff; color: white;">
                        <h5 class="modal-title">Loading Time Off Data...</h5>
                    </div>
                    <div class="modal-body text-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-3">Please wait while we fetch the time off records...</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-backdrop fade show" style="z-index: 1030;"></div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', loadingHtml);
}

// Render Employee Time Off Modal
function renderEmployeeTimeOffModal(timeOffData, prefilledDate = null) {
    // Store data globally for filtering
    window.timeOffData = timeOffData;
    console.log('💾 Stored timeOffData globally:', window.timeOffData ? window.timeOffData.length : 'No data');
    
    // Close time off loading modal first
    const loadingModal = document.getElementById('timeOffLoadingModal');
    const loadingBackdrop = document.querySelector('.modal-backdrop');
    if (loadingModal) {
        loadingModal.remove();
    }
    if (loadingBackdrop) {
        loadingBackdrop.remove();
    }
    
    const modalHtml = `
        <div class="schedule-modal-overlay" id="employeeTimeOffModal" style="z-index: 1050;">
            <div class="reschedule-modal" style="max-width: 1200px;">
                <div class="modal-header">
                    <h3><i class="fas fa-calendar-week"></i> Employee Time Off</h3>
                    <button class="modal-close" onclick="closeEmployeeTimeOffModal()">&times;</button>
                </div>
                <div class="modal-content">
                    <div class="form-section">
                        <h4><i class="fas fa-search"></i> Search Time Off Records</h4>
                        <div class="form-row">
                            <div class="form-group full-width">
                                <label for="timeOffSearchInput">Search by employee name, dates, or time</label>
                                <div class="search-input-container">
                                    <input type="text" 
                                           id="timeOffSearchInput" 
                                           class="form-control" 
                                           placeholder="Type to search time off records..."
                                           oninput="filterTimeOffRecords(this.value)">
                                    <i class="fas fa-search search-icon"></i>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <small class="text-muted">
                                <i class="fas fa-info-circle"></i> Showing upcoming time off records only
                            </small>
                            <button type="button" class="btn btn-primary" onclick="showAddTimeOffModal()">
                                <i class="fas fa-plus"></i> ADD EMPLOYEE TIME OFF
                            </button>
                        </div>
                    </div>
                    
                    <div class="form-section">
                        <h4><i class="fas fa-calendar-alt"></i> Time Off Records</h4>
                        <div class="time-off-list-container" style="max-height: 500px; overflow-y: auto;">
                            <div class="time-off-grid" id="timeOffGrid">
                                ${generateTimeOffCards(timeOffData)}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', modalHtml);
    
    // Store time off data globally for filtering
    window.currentTimeOffData = timeOffData;
    
    // Focus on search input
    setTimeout(() => {
        const searchInput = document.getElementById('timeOffSearchInput');
        if (searchInput) {
            searchInput.focus();
        }
    }, 100);
}

// Generate Time Off Cards
function generateTimeOffCards(timeOffData) {
    if (!timeOffData || timeOffData.length === 0) {
        return `
            <div class="no-timeoff-message text-center p-4">
                <i class="fas fa-calendar-alt fa-3x text-muted mb-3"></i>
                <p class="text-muted">No upcoming time off records found</p>
                <small class="text-muted">Only future and current time off records are shown</small>
            </div>
        `;
    }
    
    return timeOffData.map(timeOff => {
        const startDate = new Date(timeOff.start_date);
        const endDate = new Date(timeOff.end_date);
        const startDateFormatted = formatDateToMMDDYYYY(timeOff.start_date);
        const endDateFormatted = formatDateToMMDDYYYY(timeOff.end_date);
        const dateStr = startDateFormatted + (startDate.getTime() !== endDate.getTime() ? ' To ' + endDateFormatted : '');
        
        // Time Off First - Show 24-hour format if selected, otherwise '-'
        const timeOffFirst = timeOff.time_off_first && timeOff.time_off_first !== 'null' ? timeOff.time_off_first.substring(0, 5) : null;
        
        // Time Off Second - Show 24-hour format if selected, otherwise '-'  
        const timeOffSecond = timeOff.time_off_second && timeOff.time_off_second !== 'null' ? timeOff.time_off_second.substring(0, 5) : null;
        
        // Determine the badge color based on proximity to start date
        const now = new Date();
        const daysUntilStart = Math.ceil((startDate - now) / (1000 * 60 * 60 * 24));
        let statusBadge = '';
        // if (daysUntilStart <= 0) {
        //     statusBadge = '<span class="badge badge-success">Current</span>';
        // } else if (daysUntilStart <= 7) {
        //     statusBadge = '<span class="badge badge-warning">This Week</span>';
        // } else if (daysUntilStart <= 30) {
        //     statusBadge = '<span class="badge badge-info">This Month</span>';
        // } else {
        //     statusBadge = '<span class="badge badge-secondary">Future</span>';
        // }
        
        return `
            <div class="timeoff-card" 
                 data-timeoff-id="${timeOff.id}" 
                 data-employee-name="${timeOff.employee_name.toLowerCase()}" 
                 data-date-range="${dateStr.toLowerCase()}"
                 data-time-first="${timeOffFirst || ''}"
                 data-time-second="${timeOffSecond || ''}">
                <div class="timeoff-card-header">
                    <div class="timeoff-avatar">
                        <div class="avatar-placeholder">
                            <i class="fas fa-user-clock"></i>
                        </div>
                    </div>
                    <div class="timeoff-info">
                        <h5 class="timeoff-employee">${timeOff.employee_name}</h5>
                        <div class="timeoff-status">${statusBadge}</div>
                    </div>
                    <div class="timeoff-actions">
                        <div class="btn-group" role="group">
                            <button type="button" 
                                    class="btn btn-outline-primary btn-sm" 
                                    onclick="console.log('🔍 View button clicked for ID:', ${timeOff.id}); viewTimeOff(${timeOff.id})" 
                                    title="View">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button type="button" 
                                    class="btn btn-outline-danger btn-sm" 
                                    onclick="deleteTimeOff(${timeOff.id}, '${timeOff.employee_name}')" 
                                    title="Delete Time Off">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="timeoff-card-body">
                    <div class="timeoff-details">
                        <div class="detail-item">
                            <i class="fas fa-calendar text-primary"></i>
                            <span class="detail-text">${dateStr}</span>
                        </div>
                        ${timeOff.mapped_schedules && timeOff.mapped_schedules.length > 0 ? 
                            timeOff.mapped_schedules.map(schedule => `
                                <div class="detail-item schedule-slot" data-mapping-id="${schedule.mapping_id}">
                                    <i class="fas fa-clock ${schedule.start_time === '09:00:00' ? 'text-success' : 'text-info'}"></i>
                                    <span class="detail-text">
                                        ${formatDateToMMDDYYYY(schedule.scheduled_date)} ${formatTimeTo24Hour(schedule.start_time)}
                                    </span>
                                    <button type="button" 
                                            class="btn btn-outline-danger btn-xs ms-2" 
                                            onclick="removeScheduleMapping(${schedule.mapping_id}, '${timeOff.employee_name}')" 
                                            title="Remove this time slot">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            `).join('') :
                            `<div class="detail-item">
                                <i class="fas fa-calendar-day text-warning"></i>
                                <span class="detail-text">No specific time slots mapped</span>
                            </div>`
                        }
                    </div>
                </div>
            </div>
        `;
    }).join('');
}

// Filter Time Off Records Function
window.filterTimeOffRecords = function(searchTerm) {
    const timeOffCards = document.querySelectorAll('.timeoff-card');
    const searchQuery = searchTerm.toLowerCase().trim();
    
    let visibleCount = 0;
    
    timeOffCards.forEach(card => {
        const employeeName = card.getAttribute('data-employee-name') || '';
        const dateRange = card.getAttribute('data-date-range') || '';
        const timeFirst = card.getAttribute('data-time-first') || '';
        const timeSecond = card.getAttribute('data-time-second') || '';
        
        const shouldShow = !searchQuery || 
            employeeName.includes(searchQuery) || 
            dateRange.includes(searchQuery) || 
            timeFirst.includes(searchQuery) || 
            timeSecond.includes(searchQuery);
        
        if (shouldShow) {
            card.style.display = 'block';
            visibleCount++;
        } else {
            card.style.display = 'none';
        }
    });
    
    // Show/hide no results message
    const container = document.querySelector('.time-off-grid');
    const noResultsMsg = container?.querySelector('.no-search-results');
    
    if (visibleCount === 0 && searchQuery) {
        if (!noResultsMsg) {
            const noResultsDiv = document.createElement('div');
            noResultsDiv.className = 'no-search-results text-center p-4';
            noResultsDiv.innerHTML = `
                <i class="fas fa-search fa-3x text-muted mb-3"></i>
                <p class="text-muted">No time off records found matching "${searchQuery}"</p>
                <small class="text-muted">Try searching by employee name, date, or time</small>
            `;
            container?.appendChild(noResultsDiv);
        }
    } else if (noResultsMsg) {
        noResultsMsg.remove();
    }
};

// Close Employee Time Off Modal
window.closeEmployeeTimeOffModal = function() {
    const modal = document.getElementById('employeeTimeOffModal');
    if (modal) {
        modal.remove();
    }
    // Clean up global variables
    window.currentTimeOffData = null;
};

// Show Add Time Off Modal
window.showAddTimeOffModal = function() {
    console.log('📝 Opening Add Time Off Modal');
    
    // Get current tenant ID
    let tenantId = '';
    const tenantSelect = document.getElementById('tenantSelect');
    if (tenantSelect) {
        tenantId = tenantSelect.value;
    } else {
        tenantId = '{{ session("tenant_id") }}';
    }
    
    // Fetch form data
    fetch(`{{ route('admin.schedule.time-off.create') }}?tenant_id=${tenantId}`, {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 200) {
            renderAddTimeOffModal(data.data.employees, null);
        } else {
            showNotification('error', 'Failed to load employee list');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error loading form data');
    });
};

// Show Add Time Off Modal Direct (from calendar clicks)
window.showAddTimeOffModalDirect = function(date, time, inspectorId = null, scheduleId = null) {
    console.log('📝 Opening Add Time Off Modal Direct with date:', date, 'time:', time, 'inspector ID:', inspectorId, 'schedule ID:', scheduleId);
    
    // Get current tenant ID
    let tenantId = '';
    const tenantSelect = document.getElementById('tenantSelect');
    if (tenantSelect) {
        tenantId = tenantSelect.value;
    } else {
        tenantId = '{{ session("tenant_id") }}';
    }
    
    // Fetch form data
    fetch(`{{ route('admin.schedule.time-off.create') }}?tenant_id=${tenantId}`, {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 200) {
            renderAddTimeOffModalDirect(data.data.employees, date, time, inspectorId, scheduleId);
        } else {
            showNotification('error', 'Failed to load employee list');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error loading form data');
    });
};

// Unified Add Time Off Modal - handles both general and schedule-specific time off
function renderAddTimeOffModal(employees, prefilledDate = null, options = {}) {
    // Extract options for schedule-specific mode
    const {
        isScheduleSpecific = false,
        inspectorId = null,
        scheduleId = null,
        selectedTime = null,
        selectTimeOffFirst = false,
        selectTimeOffSecond = false
    } = options;
    
    console.log('📝 Rendering unified Add Time Off Modal:', {
        isScheduleSpecific,
        inspectorId,
        scheduleId,
        selectedTime,
        selectTimeOffFirst,
        selectTimeOffSecond
    });
    
    // Determine field states based on mode
    const fieldDisabled = isScheduleSpecific;
    const disabledStyle = fieldDisabled ? 'background-color: #f8f9fa; pointer-events: none;' : '';
    const readonlyAttr = fieldDisabled ? 'readonly' : '';
    const disabledAttr = fieldDisabled ? 'disabled' : '';
    
    const modalHtml = `
        <div class="schedule-modal-overlay" id="addTimeOffModal" style="z-index: 1070;">
            <div class="reschedule-modal" style="max-width: 800px;" onclick="event.stopPropagation()">
                <div class="modal-header">
                    <h3><i class="fas fa-plus"></i> Add Time Off ${isScheduleSpecific ? '(Schedule Specific)' : ''}</h3>
                    <button class="modal-close" onclick="closeAddTimeOffModal()">&times;</button>
                </div>
                <div class="modal-content">
                    <form id="addTimeOffForm">
                        <!-- Hidden fields for schedule-specific mode -->
                        ${isScheduleSpecific ? `
                            <input type="hidden" name="schedule_id" value="${scheduleId || ''}">
                            <input type="hidden" name="is_schedule_specific" value="1">
                            <input type="hidden" name="inspector_user_id" value="${inspectorId || ''}">
                            <input type="hidden" id="hiddenStartDate" name="start_date" value="">
                            <input type="hidden" id="hiddenEndDate" name="end_date" value="">
                            <input type="hidden" id="hiddenTimeOffFirst" name="time_off_first" value="${selectTimeOffFirst ? '09:00' : ''}">
                            <input type="hidden" id="hiddenTimeOffSecond" name="time_off_second" value="${selectTimeOffSecond ? '14:00' : ''}">
                        ` : ''}
                        
                        <div class="form-section">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label for="employeeName" class="form-label">Employee Name <span class="text-danger">*</span></label>
                                        <select class="form-select" id="employeeName" ${!isScheduleSpecific ? 'name="inspector_user_id" required' : ''} ${disabledAttr} style="${disabledStyle}">
                                            <option value="">Select Employee</option>
                                            ${employees.map(emp => `
                                                <option value="${emp.id}" ${inspectorId && emp.id == inspectorId ? 'selected' : ''}>
                                                    ${emp.full_name}
                                                </option>
                                            `).join('')}
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label for="timeOffTitle" class="form-label">Title <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="timeOffTitle" name="title" required>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-group mb-3">
                                <label for="timeOffDescription" class="form-label">Description</label>
                                <textarea class="form-control" id="timeOffDescription" name="description" rows="3"></textarea>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group mb-3">
                                        <label for="startDate" class="form-label">Start Date</label>
                                        <input type="date" class="form-control" id="startDate" ${!isScheduleSpecific ? 'name="start_date" required' : ''} ${readonlyAttr} style="${disabledStyle}">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group mb-3">
                                        <label for="endDate" class="form-label">End Date</label>
                                        <input type="date" class="form-control" id="endDate" ${!isScheduleSpecific ? 'name="end_date" required' : ''} ${readonlyAttr} style="${disabledStyle}">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group mb-3">
                                        <label for="timeOffFirst" class="form-label">Time Off First</label>
                                        <select class="form-select" id="timeOffFirst" ${!isScheduleSpecific ? 'name="time_off_first"' : ''} ${disabledAttr} style="${disabledStyle}">
                                            <option value="">Select Time</option>
                                            <option value="09:00" ${selectTimeOffFirst ? 'selected' : ''}>09:00 AM</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group mb-3">
                                        <label for="timeOffSecond" class="form-label">Time Off Second</label>
                                        <select class="form-select" id="timeOffSecond" ${!isScheduleSpecific ? 'name="time_off_second"' : ''} ${disabledAttr} style="${disabledStyle}">
                                            <option value="">Select Time</option>
                                            <option value="14:00" ${selectTimeOffSecond ? 'selected' : ''}>02:00 PM</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </form>
                    
                    <div class="form-actions">
                        <button type="button" class="btn btn-secondary" onclick="closeAddTimeOffModal()">
                            <i class="fas fa-times"></i> Cancel
                        </button>
                        <button type="button" class="btn btn-primary" onclick="saveTimeOff()">
                            <i class="fas fa-save"></i> Save Time Off
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', modalHtml);
    
    // Set default dates - use prefilled date if provided, otherwise use today
    const defaultDate = prefilledDate ? prefilledDate : new Date().toISOString().split('T')[0];
    document.getElementById('startDate').value = defaultDate;
    document.getElementById('endDate').value = defaultDate;
    
    // For schedule-specific mode, also update hidden fields
    if (isScheduleSpecific) {
        const hiddenStartDate = document.getElementById('hiddenStartDate');
        const hiddenEndDate = document.getElementById('hiddenEndDate');
        if (hiddenStartDate) hiddenStartDate.value = defaultDate;
        if (hiddenEndDate) hiddenEndDate.value = defaultDate;
    }
    
    console.log('✅ Unified Time Off Modal rendered successfully');
}

// Render Add Time Off Modal Direct (from calendar clicks with time) - now uses unified modal
function renderAddTimeOffModalDirect(employees, date, time, inspectorId = null, scheduleId = null) {
    console.log('📝 Rendering Add Time Off Modal Direct with date:', date, 'time:', time, 'inspector ID:', inspectorId, 'schedule ID:', scheduleId);
    
    // Convert time to 24-hour format if needed
    let selectedTime = '';
    if (time.includes('AM') || time.includes('PM')) {
        const [timePart, period] = time.split(' ');
        let [hour, minute] = timePart.split(':').map(Number);
        
        if (period === 'PM' && hour !== 12) {
            hour += 12;
        } else if (period === 'AM' && hour === 12) {
            hour = 0;
        }
        
        selectedTime = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
    } else {
        selectedTime = time;
    }
    
    // Determine which field to select based on time slot
    const selectedHour = parseInt(selectedTime.split(':')[0]);
    
    // Time Off First is for morning slot (6:00-12:59), Time Off Second is for afternoon slot (13:00-20:59)
    let selectTimeOffFirst = (selectedHour >= 6 && selectedHour < 13);
    let selectTimeOffSecond = (selectedHour >= 13 && selectedHour <= 20);
    
    console.log('🕒 Time analysis:', {
        originalTime: time,
        selectedTime: selectedTime,
        selectedHour: selectedHour,
        selectTimeOffFirst: selectTimeOffFirst,
        selectTimeOffSecond: selectTimeOffSecond,
        inspectorId: inspectorId,
        scheduleId: scheduleId
    });
    
    // Use the unified modal with schedule-specific options
    renderAddTimeOffModal(employees, date, {
        isScheduleSpecific: true,
        inspectorId: inspectorId,
        scheduleId: scheduleId,
        selectedTime: selectedTime,
        selectTimeOffFirst: selectTimeOffFirst,
        selectTimeOffSecond: selectTimeOffSecond
    });
}

// Generate Custom Time Options for Add Time Off Modal
function generateCustomTimeOptions(selectedTime = '', fieldType = '') {
    const customTimes = [
        '08:00', '08:30', '09:30', '10:00', '10:30', '11:00', '11:30', 
        '12:00', '12:30', '13:00', '13:30', '14:30', '15:00', 
        '15:30', '16:00', '16:30', '17:00', '17:30', '18:00'
    ];
    
    // Filter out times that are already shown as main options
    let filteredTimes = customTimes;
    if (fieldType === 'first') {
        // Exclude 09:00 as it's already shown as main option
        filteredTimes = customTimes.filter(time => time !== '09:00');
    } else if (fieldType === 'second') {
        // Exclude 14:00 as it's already shown as main option
        filteredTimes = customTimes.filter(time => time !== '14:00');
    }
    
    return filteredTimes.map(time => {
        const isSelected = (time === selectedTime && 
                           ((fieldType === 'first' && selectedTime !== '14:00') || 
                            (fieldType === 'second' && selectedTime !== '09:00'))) ? 'selected' : '';
        return `<option value="${time}" ${isSelected}>${time}</option>`;
    }).join('');
}

// Generate Time Options for Select
function generateTimeOptions() {
    const options = [];
    for (let hour = 0; hour < 24; hour++) {
        for (let minute = 0; minute < 60; minute += 30) {
            const timeStr = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
            const displayStr = window.convertTo12Hour(timeStr);
            options.push(`<option value="${timeStr}">${displayStr}</option>`);
        }
    }
    return options.join('');
}

// Close Add Time Off Modal
window.closeAddTimeOffModal = function() {
    const modal = document.getElementById('addTimeOffModal');
    
    if (modal) {
        modal.remove();
    }
    // No need to restore main modal since we keep it open
};

// Save Time Off - Enhanced to handle schedule mapping
window.saveTimeOff = function() {
    const form = document.getElementById('addTimeOffForm');
    const formData = new FormData(form);
    
    // Get form values for validation and logging
    const employeeId = formData.get('inspector_user_id');
    const startDate = formData.get('start_date');
    const endDate = formData.get('end_date');
    const timeOffFirst = formData.get('time_off_first');
    const timeOffSecond = formData.get('time_off_second');
    const scheduleId = formData.get('schedule_id');
    const isScheduleSpecific = formData.get('is_schedule_specific');
    
    console.log('💾 Saving time off with data:', {
        employeeId, startDate, endDate, timeOffFirst, timeOffSecond, 
        scheduleId, isScheduleSpecific: !!isScheduleSpecific
    });
    
    // Log all form data being sent
    console.log('📋 Complete form data being sent:');
    for (let pair of formData.entries()) {
        console.log('  ' + pair[0] + ': ' + pair[1]);
    }
    
    // Debug: Check what data we have for validation
    console.log('🔍 Current window.timeOffData:', window.timeOffData ? window.timeOffData.length + ' records' : 'No data');
    if (window.timeOffData && window.timeOffData.length > 0) {
        console.log('📋 Sample existing time-off record:', window.timeOffData[0]);
    }
    
    // Enhanced validation for schedule-specific mode
    if (isScheduleSpecific && scheduleId) {
        console.log('🔗 Schedule-specific time off detected - will create mapping in inspector_time_off_schedules table');
        console.log('🔍 Employee ID from form:', employeeId);
        console.log('🔍 Schedule ID from form:', scheduleId);
        
        // Additional validation for schedule-specific time off
        if (!employeeId) {
            console.log('❌ Employee ID is missing or empty');
            showNotification('error', 'Employee selection is required for schedule-specific time off');
            return;
        }
        
        if (!startDate || !endDate) {
            showNotification('error', 'Start and end dates are required');
            return;
        }
        
        if (!timeOffFirst && !timeOffSecond) {
            showNotification('error', 'At least one time period (First or Second) must be selected');
            return;
        }
    }
    
    // Validate time off dates with partial day support
    if (employeeId && startDate && endDate) {
        const validation = validateTimeOffDates(employeeId, startDate, endDate, null, timeOffFirst, timeOffSecond);
        if (!validation.valid) {
            console.log('❌ Validation failed:', validation.message);
            showNotification('error', validation.message);
            return;
        }
        console.log('✅ Validation passed - proceeding with save');
    }
    
    // Get current tenant ID
    let tenantId = '';
    const tenantSelect = document.getElementById('tenantSelect');
    if (tenantSelect) {
        tenantId = tenantSelect.value;
    } else {
        tenantId = '{{ session("tenant_id") }}';
    }
    formData.append('tenant_id', tenantId);
    
    // Show loading state
    const saveButton = document.querySelector('#addTimeOffModal .btn-primary');
    const originalButtonText = saveButton.innerHTML;
    saveButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Saving...';
    saveButton.disabled = true;
    
    fetch('{{ route('admin.schedule.time-off.store') }}', {
        method: 'POST',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: formData
    })
    .then(response => {
        console.log('📡 Backend response status:', response.status);
        return response.json();
    })
    .then(data => {
        console.log('📡 Backend response data:', data);
        
        // Reset button state
        saveButton.innerHTML = originalButtonText;
        saveButton.disabled = false;
        
        if (data.status === 200 || data.status === 201) {
            closeAddTimeOffModal();
            
            // Show success message with schedule mapping info if applicable
            let successMessage = 'Time off added successfully!';
            if (isScheduleSpecific && scheduleId) {
                successMessage += ' Schedule slot has been updated to reflect time off.';
            }
            
            // Refresh the time off list
            refreshTimeOffList();
            
            // Refresh the calendar to show the new time off (with small delay)
            if (typeof loadScheduleData === 'function') {
                setTimeout(() => {
                    loadScheduleData();
                }, 300);
            }
            
            showNotification('success', successMessage);
            
            // Log schedule mapping success if applicable
            if (data.data && data.data.schedule_mapping) {
                console.log('✅ Schedule mapping created:', data.data.schedule_mapping);
            }
        } else {
            console.log('❌ Backend error:', data.message || data.errors || data);
            showNotification('error', data.message || 'Failed to save time off');
        }
    })
    .catch(error => {
        console.error('💥 Network/Parse Error:', error);
        
        // Reset button state on error
        saveButton.innerHTML = originalButtonText;
        saveButton.disabled = false;
        
        showNotification('error', 'Error saving time off: ' + error.message);
    });
};

// Edit Time Off
window.editTimeOff = function(timeOffId) {
    console.log('✏️ Editing time off:', timeOffId);
    
    // Construct URL using Laravel URL helper with route path
    const editUrl = `{{ url('schedule') }}/time-off/${timeOffId}/edit`;
    
    fetch(editUrl, {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => {
        console.log('📡 Edit TimeOff Response status:', response.status);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        console.log('📋 Edit TimeOff Response data:', data);
        if (data.status === 200 && data.data && data.data.timeOff) {
            renderEditTimeOffModal(data.data.timeOff, data.data.employees);
        } else {
            console.error('❌ Invalid response structure:', data);
            showNotification('error', data.message || 'Failed to load time off data');
        }
    })
    .catch(error => {
        console.error('💥 Error loading time off data:', error);
        showNotification('error', 'Error loading time off data: ' + error.message);
    });
};

// Render Edit Time Off Modal
function renderEditTimeOffModal(timeOff, employees) {
    // Keep the main modal open - just add child modal on top
    
    const modalHtml = `
        <div class="schedule-modal-overlay" id="editTimeOffModal" style="z-index: 1070;">
            <div class="reschedule-modal" style="max-width: 800px;" onclick="event.stopPropagation()">
                <div class="modal-header">
                    <h3><i class="fas fa-edit"></i> Edit Time Off</h3>
                    <button class="modal-close" onclick="closeEditTimeOffModal()">&times;</button>
                </div>
                <div class="modal-content">
                    <form id="editTimeOffForm">
                        <div class="form-section">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label for="editEmployeeName" class="form-label">Employee Name</label>
                                        <select class="form-select" id="editEmployeeName" name="inspector_user_id" required>
                                            <option value="">Select Employee</option>
                                            ${employees.map(emp => `<option value="${emp.id}" ${emp.id == timeOff.inspector_user_id ? 'selected' : ''}>${emp.full_name}</option>`).join('')}
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label for="editTimeOffTitle" class="form-label">Title</label>
                                        <input type="text" class="form-control" id="editTimeOffTitle" name="title" value="${timeOff.title || ''}" required>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-group mb-3">
                                <label for="editTimeOffDescription" class="form-label">Description</label>
                                <textarea class="form-control" id="editTimeOffDescription" name="description" rows="3">${timeOff.description || ''}</textarea>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group mb-3">
                                        <label for="editStartDate" class="form-label">Start Date</label>
                                        <input type="date" class="form-control" id="editStartDate" name="start_date" value="${timeOff.start_date}" required>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group mb-3">
                                        <label for="editEndDate" class="form-label">End Date</label>
                                        <input type="date" class="form-control" id="editEndDate" name="end_date" value="${timeOff.end_date}" required>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group mb-3">
                                        <label for="editTimeOffFirst" class="form-label">Time Off First</label>
                                        <select class="form-select" id="editTimeOffFirst" name="time_off_first">
                                            <option value="">Select Time</option>
                                            <option value="09:00" ${(timeOff.time_off_first === '09:00' || timeOff.time_off_first === '09:00:00') ? 'selected' : ''}>09:00</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group mb-3">
                                        <label for="editTimeOffSecond" class="form-label">Time Off Second</label>
                                        <select class="form-select" id="editTimeOffSecond" name="time_off_second">
                                            <option value="">Select Time</option>
                                            <option value="14:00" ${(timeOff.time_off_second === '14:00' || timeOff.time_off_second === '14:00:00') ? 'selected' : ''}>14:00</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="form-actions">
                        <button type="button" class="btn btn-secondary" onclick="closeEditTimeOffModal()">
                            <i class="fas fa-times"></i> Cancel
                        </button>
                        <button type="button" class="btn btn-primary" onclick="updateTimeOff(${timeOff.id})">
                            <i class="fas fa-save"></i> Update Time Off
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', modalHtml);
}

// Generate Time Options with Selected Value
// Format time for HTML5 time input (converts HH:MM:SS to HH:MM)
function formatTimeForInput(timeValue) {
    if (!timeValue) return '';
    // Handle both HH:MM and HH:MM:SS formats
    if (timeValue.includes(':')) {
        const timeParts = timeValue.split(':');
        if (timeParts.length >= 2) {
            return `${timeParts[0]}:${timeParts[1]}`; // Return HH:MM format
        }
    }
    return timeValue;
}

// Close Edit Time Off Modal
window.closeEditTimeOffModal = function() {
    const modal = document.getElementById('editTimeOffModal');
    
    if (modal) {
        modal.remove();
    }
    // No need to restore main modal since we keep it open
};

// Update Time Off
window.updateTimeOff = function(timeOffId) {
    const form = document.getElementById('editTimeOffForm');
    const formData = new FormData(form);
    formData.append('_method', 'PUT');
    
    fetch(`{{ url('schedule') }}/time-off/${timeOffId}`, {
        method: 'POST',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 200) {
            closeEditTimeOffModal();
            refreshTimeOffList();
            // Refresh the calendar to show the updated time off (with small delay)
            if (typeof loadScheduleData === 'function') {
                setTimeout(() => {
                    loadScheduleData();
                }, 300);
            }
            showNotification('success', 'Time off updated successfully!');
        } else {
            showNotification('error', data.message || 'Failed to update time off');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showNotification('error', 'Error updating time off');
    });
};

// View Time Off Details
window.viewTimeOff = function(timeOffId) {
    console.log('👁️ Viewing time off:', timeOffId);
    
    // Construct URL using Laravel URL helper with route path
    const viewUrl = `{{ url('schedule') }}/time-off/${timeOffId}/edit`;
    
    fetch(viewUrl, {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => {
        console.log('📡 View TimeOff Response status:', response.status);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        console.log('📋 View TimeOff Response data:', data);
        if (data.status === 200 && data.data && data.data.timeOff) {
            showTimeOffDetailsModal(data.data.timeOff);
        } else {
            console.error('❌ Invalid response structure:', data);
            showNotification('error', data.message || 'Failed to load time off details');
        }
    })
    .catch(error => {
        console.error('💥 Error loading time off details:', error);
        showNotification('error', 'Error loading time off details: ' + error.message);
    });
};

// Delete Time Off Record
window.deleteTimeOff = function(timeOffId, employeeName) {
    console.log('🗑️ Deleting time off:', timeOffId, 'for employee:', employeeName);
    
    // Show confirmation dialog
    Swal.fire({
        title: 'Delete Time Off?',
        text: `Are you sure you want to delete time off for ${employeeName}? This will remove all associated schedule mappings and reset affected schedules.`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#dc3545',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Yes, Delete',
        cancelButtonText: 'Cancel'
    }).then((result) => {
        if (result.isConfirmed) {
            // Show loading
            Swal.fire({
                title: 'Deleting Time Off',
                text: 'Please wait while we delete the time off record.',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });
            
            // Get tenant ID for the request
            const tenantId = getTenantIdForRequest();
            
            // Make API call to delete the time off
            fetch(`{{ url('schedule') }}/time-off/${timeOffId}`, {
                method: 'DELETE',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    tenant_id: tenantId
                })
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                console.log('🗑️ Delete TimeOff Response:', data);
                
                if (data.status === 200) {
                    Swal.fire({
                        title: 'Deleted!',
                        text: data.message || 'Time off record has been deleted successfully.',
                        icon: 'success',
                        timer: 2000,
                        showConfirmButton: false
                    });
                    
                    // Remove the card from the UI
                    const timeOffCard = document.querySelector(`[data-timeoff-id="${timeOffId}"]`);
                    if (timeOffCard) {
                        timeOffCard.remove();
                    }
                    
                    // Refresh calendar data to reflect changes
                    loadScheduleData();
                    
                } else {
                    Swal.fire({
                        title: 'Error!',
                        text: data.message || 'Failed to delete time off record.',
                        icon: 'error'
                    });
                }
            })
            .catch(error => {
                console.error('💥 Error deleting time off:', error);
                Swal.fire({
                    title: 'Error!',
                    text: 'An error occurred while deleting the time off record.',
                    icon: 'error'
                });
            });
        }
    });
};

// Show Time Off Details Modal
function showTimeOffDetailsModal(timeOff) {
    // Keep the main modal open - just add child modal on top
    
    const modalHtml = `
        <div class="schedule-modal-overlay" id="timeOffDetailsModal" style="z-index: 1070;">
            <div class="reschedule-modal" style="max-width: 700px;" onclick="event.stopPropagation()">
                <div class="modal-header">
                    <h3><i class="fas fa-eye"></i> Time Off Details</h3>
                    <button class="modal-close" onclick="closeTimeOffDetailsModal()">&times;</button>
                </div>
                <div class="modal-content">
                    <div class="form-section">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <strong>Title:</strong> ${timeOff.title || 'N/A'}
                            </div>
                            <div class="col-md-6">
                                <strong>Employee Name:</strong> ${timeOff.employee_name || 'N/A'}
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <strong>Start Date:</strong> ${formatDateToMMDDYYYY(timeOff.start_date)}
                            </div>
                            <div class="col-md-6">
                                <strong>End Date:</strong> ${formatDateToMMDDYYYY(timeOff.end_date)}
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <strong>Time Off First:</strong> ${timeOff.time_off_first ? timeOff.time_off_first.substring(0, 5) : 'Not Selected'}
                            </div>
                            <div class="col-md-6">
                                <strong>Time Off Second:</strong> ${timeOff.time_off_second ? timeOff.time_off_second.substring(0, 5) : 'Not Selected'}
                            </div>
                        </div>
                        ${timeOff.description ? `
                        <div class="row mb-3">
                            <div class="col-12">
                                <strong>Description:</strong><br>
                                <p class="text-muted">${timeOff.description}</p>
                            </div>
                        </div>
                        ` : ''}
                    </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', modalHtml);
}

// Close Time Off Details Modal
window.closeTimeOffDetailsModal = function() {
    const modal = document.getElementById('timeOffDetailsModal');
    
    if (modal) {
        modal.remove();
    }
    // No need to restore main modal since we keep it open
};

// Delete Time Off
window.deleteTimeOff = function(timeOffId) {
    // Function to perform the actual deletion
    const confirmDelete = () => {
        fetch(`{{ url('schedule') }}/time-off/${timeOffId}`, {
            method: 'DELETE',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 200) {
                refreshTimeOffList();
                // Refresh the calendar to remove the deleted time off (with small delay)
                if (typeof loadScheduleData === 'function') {
                    setTimeout(() => {
                        loadScheduleData();
                    }, 300);
                }
                showNotification('success', 'Time off deleted successfully!');
            } else {
                showNotification('error', data.message || 'Failed to delete time off');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('error', 'Error deleting time off');
        });
    };
    
    // Function to trigger SweetAlert2 confirmation for time off deletion
    const triggerTimeOffDeleteSwal = () => {
        if (window.Swal && Swal.fire) {
            Swal.fire({
                title: 'Delete Time Off?',
                text: 'Are you sure you want to delete this time off record? This action cannot be undone.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'Cancel',
                customClass: {
                    container: 'swal2-high-z-index'
                },
                didOpen: () => {
                    // Ensure high z-index by setting it directly on the container
                    const swalContainer = document.querySelector('.swal2-container');
                    if (swalContainer) {
                        swalContainer.style.zIndex = '99999';
                    }
                }
            }).then(result => {
                if (result.isConfirmed) {
                    confirmDelete();
                }
            });
        } else {
            // Fallback to regular confirm if SweetAlert2 is not available
            if (confirm('Are you sure you want to delete this time off record?')) {
                confirmDelete();
            }
        }
    };
    
    // Load SweetAlert2 if not available, then trigger confirmation
    if (!window.Swal && !document.getElementById('swal2-cdn')) {
        const script = document.createElement('script');
        script.id = 'swal2-cdn';
        script.src = 'https://cdn.jsdelivr.net/npm/sweetalert2@11';
        script.onload = () => triggerTimeOffDeleteSwal();
        document.head.appendChild(script);
    } else {
        triggerTimeOffDeleteSwal();
    }
};

// Refresh Time Off List
function refreshTimeOffList() {
    // Get current tenant ID
    let tenantId = '';
    const tenantSelect = document.getElementById('tenantSelect');
    if (tenantSelect) {
        tenantId = tenantSelect.value;
    } else {
        tenantId = '{{ session("tenant_id") }}';
    }
    
    fetch(`{{ route('admin.schedule.time-off.index') }}?tenant_id=${tenantId}`, {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 200) {
            const timeOffGrid = document.getElementById('timeOffGrid');
            if (timeOffGrid) {
                // Update the grid with new data
                timeOffGrid.innerHTML = generateTimeOffCards(data.data);
                // Store the updated data globally
                window.currentTimeOffData = data.data;
                window.timeOffData = data.data; // Keep for backward compatibility
                
                // Clear any existing search
                const searchInput = document.getElementById('timeOffSearchInput');
                if (searchInput) {
                    searchInput.value = '';
                }
            }
        }
    })
    .catch(error => {
        console.error('Error refreshing time off list:', error);
    });
}

// Time Off Validation Functions
function validateTimeOffDates(employeeId, startDate, endDate, excludeTimeOffId = null, timeOffFirst = null, timeOffSecond = null) {
    if (!window.timeOffData) return { valid: true }; // No data to check against
    
    const newStart = new Date(startDate);
    const newEnd = new Date(endDate);
    
    for (let timeOff of window.timeOffData) {
        // Skip if this is the same record being edited
        if (excludeTimeOffId && timeOff.id == excludeTimeOffId) continue;
        
        // Skip if different employee
        if (timeOff.inspector_user_id != employeeId) continue;
        
        const existingStart = new Date(timeOff.start_date);
        const existingEnd = new Date(timeOff.end_date);
        
        // Check for date overlaps
        if ((newStart >= existingStart && newStart <= existingEnd) ||
            (newEnd >= existingStart && newEnd <= existingEnd) ||
            (newStart <= existingStart && newEnd >= existingEnd)) {
            
            // If dates overlap, check if it's partial day time-off that doesn't conflict
            const isSameDate = newStart.toDateString() === existingStart.toDateString() && 
                              newEnd.toDateString() === existingEnd.toDateString();
            
            if (isSameDate) {
                // Check for partial day time-off conflicts
                const newHasMorning = timeOffFirst && timeOffFirst.trim() !== '';
                const newHasAfternoon = timeOffSecond && timeOffSecond.trim() !== '';
                const existingHasMorning = timeOff.time_off_first && timeOff.time_off_first.trim() !== '';
                const existingHasAfternoon = timeOff.time_off_second && timeOff.time_off_second.trim() !== '';
                
                // Check if existing time-off is full day (no specific time slots)
                const existingIsFullDay = !existingHasMorning && !existingHasAfternoon;
                const newIsFullDay = !newHasMorning && !newHasAfternoon;
                
                console.log('🔍 Time-off conflict analysis:', {
                    newHasMorning, newHasAfternoon, newIsFullDay,
                    existingHasMorning, existingHasAfternoon, existingIsFullDay,
                    timeOffFirst, timeOffSecond,
                    existing_first: timeOff.time_off_first,
                    existing_second: timeOff.time_off_second,
                    existingRecord: timeOff
                });
                
                // If either is full day, there's a conflict
                if (existingIsFullDay || newIsFullDay) {
                    return {
                        valid: false,
                        message: `This employee already has time off scheduled on ${formatDateToMMDDYYYY(timeOff.start_date)}. Full day time-off conflicts with any other time-off on the same date.`
                    };
                }
                
                // Check for actual time slot conflicts
                const morningConflict = newHasMorning && existingHasMorning;
                const afternoonConflict = newHasAfternoon && existingHasAfternoon;
                
                // If there's a specific time slot conflict, show detailed message
                if (morningConflict || afternoonConflict) {
                    let conflictType = '';
                    if (morningConflict && afternoonConflict) {
                        conflictType = 'both morning and afternoon slots';
                    } else if (morningConflict) {
                        conflictType = 'morning slot (09:00 AM)';
                    } else if (afternoonConflict) {
                        conflictType = 'afternoon slot (02:00 PM)';
                    }
                    
                    return {
                        valid: false,
                        message: `This employee already has time off scheduled for the ${conflictType} on ${formatDateToMMDDYYYY(timeOff.start_date)}. Please choose a different time slot or date.`
                    };
                }
                
                // If it's the same date but different time slots, it's allowed
                console.log('✅ Same date but different time slots - allowed');
                continue;
            } else {
                // Different date ranges that overlap - not allowed
                return {
                    valid: false,
                    message: `This employee already has time off scheduled from ${formatDateToMMDDYYYY(timeOff.start_date)} to ${formatDateToMMDDYYYY(timeOff.end_date)}. Please choose different dates.`
                };
            }
        }
    }
    
    return { valid: true };
}

// Time Off Record Management (New Card-Based Design)

// Debug function to test time off functions availability
window.testTimeOffFunctions = function() {
    console.log('🧪 Testing Time Off Functions:');
    console.log('  window.viewTimeOff:', typeof window.viewTimeOff);
    console.log('  window.editTimeOff:', typeof window.editTimeOff);  
    console.log('  window.deleteTimeOff:', typeof window.deleteTimeOff);
    console.log('  window.updateTimeOff:', typeof window.updateTimeOff);
    
    if (typeof window.viewTimeOff === 'function') {
        console.log('✅ viewTimeOff is available');
    } else {
        console.log('❌ viewTimeOff is NOT available');
    }
    
    if (typeof window.editTimeOff === 'function') {
        console.log('✅ editTimeOff is available');
    } else {
        console.log('❌ editTimeOff is NOT available');
    }
    
    return 'Time off functions test completed - check console output above';
};

// Debug function to test time-off filtering logic
window.debugTimeOffFiltering = function() {
    console.log('🔍 Time-Off Filtering Debug Info:');
    console.log('  showAvailabilitySlots:', showAvailabilitySlots);
    console.log('  selectedServices:', selectedServices);
    console.log('  selectedAddress:', selectedAddress);
    console.log('  selectedCustomerAgent:', selectedCustomerAgent); 
    console.log('  selectedStatusFilter:', selectedStatusFilter);
    
    const hasServiceFilter = selectedServices.length > 0;
    const hasAddressFilter = selectedAddress && selectedAddress.trim() !== '';
    const hasCustomerAgentFilter = selectedCustomerAgent && selectedCustomerAgent.trim() !== '';
    const hasStatusFilter = selectedStatusFilter && selectedStatusFilter.trim() !== '';
    
    console.log('  Filter Analysis:');
    console.log('    hasServiceFilter:', hasServiceFilter);
    console.log('    hasAddressFilter:', hasAddressFilter);
    console.log('    hasCustomerAgentFilter:', hasCustomerAgentFilter);
    console.log('    hasStatusFilter:', hasStatusFilter);
    
    const shouldHideTimeOff = hasServiceFilter || hasAddressFilter || hasCustomerAgentFilter || hasStatusFilter;
    console.log('  shouldHideTimeOff (non-inspector filters active):', shouldHideTimeOff);
    
    const selectedInspectorElements = document.querySelectorAll('.inspector-item.selected');
    console.log('  selectedInspectors count:', selectedInspectorElements.length);
    
    if (selectedInspectorElements.length > 0) {
        const selectedNames = Array.from(selectedInspectorElements).map(el => 
            el.querySelector('.inspector-name').textContent.trim()
        );
        console.log('  selectedInspector names:', selectedNames);
    }
    
    return 'Time-off filtering debug completed - check console output above';
};

// Test time-off filtering for a specific employee
window.testTimeOffFiltering = function(employeeName) {
    if (!employeeName) {
        console.log('❌ Usage: testTimeOffFiltering("Employee Name")');
        return;
    }
    
    console.log(`🧪 Testing time-off filtering for: "${employeeName}"`);
    const result = shouldShowTimeOffInspector(employeeName);
    console.log(`   Result: ${result ? '✅ SHOW' : '❌ HIDE'} time-off for ${employeeName}`);
    
    // Also run the debug info
    window.debugTimeOffFiltering();
    
    return result;
};

// Test unified time off modal system
window.testUnifiedTimeOffModal = function(mode = 'general') {
    console.log('🧪 Testing unified time off modal in', mode, 'mode');
    
    // Mock employee data for testing
    const mockEmployees = [
        { id: 1, full_name: 'John Doe' },
        { id: 2, full_name: 'Jane Smith' }
    ];
    
    if (mode === 'general') {
        // Test general time off modal
        console.log('📝 Testing general time off modal...');
        renderAddTimeOffModal(mockEmployees, '2025-11-01');
    } else if (mode === 'schedule-specific') {
        // Test schedule-specific time off modal
        console.log('📝 Testing schedule-specific time off modal...');
        renderAddTimeOffModal(mockEmployees, '2025-11-01', {
            isScheduleSpecific: true,
            inspectorId: 1,
            scheduleId: 123,
            selectedTime: '09:00',
            selectTimeOffFirst: true,
            selectTimeOffSecond: false
        });
    }
    
    console.log('✅ Modal test completed. Check the screen for the modal.');
};

// Test schedule mapping functionality
window.testScheduleMapping = function() {
    console.log('🧪 Testing schedule mapping functionality...');
    
    // Check if we have schedule data
    if (!window.schedules || window.schedules.length === 0) {
        console.log('⚠️ No schedule data available for testing');
        return;
    }
    
    // Find available slots (status = 4)
    const availableSlots = window.schedules.filter(s => s.status == 4);
    console.log('📋 Found available slots:', availableSlots.length);
    
    if (availableSlots.length > 0) {
        const firstSlot = availableSlots[0];
        console.log('🎯 First available slot for testing:', {
            id: firstSlot.id,
            date: firstSlot.scheduled_date,
            time: firstSlot.start_time,
            inspectors: firstSlot.inspectors
        });
        
        // You can now use this slot ID to test the time off creation
        console.log('💡 To test schedule-specific time off, use:');
        console.log(`   showAddTimeOffModalDirect('${firstSlot.scheduled_date}', '${firstSlot.start_time}', ${firstSlot.inspector_data?.[0]?.id || 'null'}, ${firstSlot.id})`);
    } else {
        console.log('⚠️ No available slots found for testing schedule mapping');
    }
};

// Debug availability filter functionality
window.debugAvailabilityFilter = function() {
    console.log('🔍 Debugging Availability Filter...');
    console.log('showAvailabilitySlots state:', showAvailabilitySlots);
    
    const checkbox = document.getElementById('showAvailabilitySlots');
    if (checkbox) {
        console.log('Checkbox element found - checked:', checkbox.checked);
    } else {
        console.log('❌ Checkbox element NOT found');
    }
    
    if (!window.schedules || window.schedules.length === 0) {
        console.log('⚠️ No schedule data available');
        return;
    }
    
    console.log('📊 Schedule Analysis:');
    const scheduleStats = {
        total: 0,
        status4: 0,
        timeOff: 0,
        onHold: 0,
        cancelled: 0,
        trulyAvailable: 0
    };
    
    window.schedules.forEach(schedule => {
        scheduleStats.total++;
        
        if (schedule.status == 4) {
            scheduleStats.status4++;
            
            if (schedule.is_time_off) scheduleStats.timeOff++;
            if (schedule.is_on_hold) scheduleStats.onHold++;
            if (schedule.is_cancelled) scheduleStats.cancelled++;
            
            // Truly available: status 4, not time-off, not on hold, not cancelled
            if (!schedule.is_time_off && !schedule.is_on_hold && !schedule.is_cancelled) {
                scheduleStats.trulyAvailable++;
            }
        }
    });
    
    console.table(scheduleStats);
    
    // Test the shouldShowAvailability function
    console.log('🧪 Testing shouldShowAvailability function:');
    const testSchedules = window.schedules.filter(s => s.status == 4).slice(0, 5);
    testSchedules.forEach(schedule => {
        const result = shouldShowAvailability(schedule);
        console.log(`Schedule ${schedule.id}:`, {
            status: schedule.status,
            is_time_off: schedule.is_time_off,
            is_on_hold: schedule.is_on_hold,
            is_cancelled: schedule.is_cancelled,
            shouldShow: result
        });
    });
    
    return scheduleStats;
};

// Debug unified time off modal form data
window.debugTimeOffForm = function() {
    const form = document.getElementById('addTimeOffForm');
    if (!form) {
        console.log('❌ No time off form found');
        return;
    }
    
    console.log('🔍 Debugging Time Off Form Data:');
    const formData = new FormData(form);
    
    console.log('📋 Form Data Entries:');
    for (let pair of formData.entries()) {
        console.log(`  ${pair[0]}: "${pair[1]}"`);
    }
    
    console.log('🎯 Specific Field Values:');
    console.log('  inspector_user_id:', formData.get('inspector_user_id'));
    console.log('  schedule_id:', formData.get('schedule_id'));
    console.log('  is_schedule_specific:', formData.get('is_schedule_specific'));
    console.log('  start_date:', formData.get('start_date'));
    console.log('  end_date:', formData.get('end_date'));
    console.log('  time_off_first:', formData.get('time_off_first'));
    console.log('  time_off_second:', formData.get('time_off_second'));
    
    // Check visible fields
    console.log('👁️ Visible Field Values:');
    const empSelect = document.getElementById('employeeName');
    const startDateField = document.getElementById('startDate');
    const endDateField = document.getElementById('endDate');
    
    if (empSelect) console.log('  Employee Select Value:', empSelect.value);
    if (startDateField) console.log('  Start Date Field Value:', startDateField.value);
    if (endDateField) console.log('  End Date Field Value:', endDateField.value);
    
    return formData;
};


</script>

<script>
// Set up global tenant context for modal operations
window.currentTenantId = '{{ session("tenant_id") }}';
@if(isset($selectedTenantId))
window.currentSelectedTenantId = '{{ $selectedTenantId }}';
@endif

// Simple callback that just sets a flag when Google Maps is ready
window.initGoogleMapsCallback = function() {
    console.log('Google Maps API loaded and ready');
    window.googleMapsApiReady = true;
    
    // If there's an address input on the page (like in create_step1), initialize it
    const existingInput = document.getElementById("address_auto_complete");
    if (existingInput && typeof initAddressAutocomplete === 'function') {
        console.log('Found existing address input, initializing autocomplete');
        initAddressAutocomplete();
    }
};
</script>
<!-- Calendar Specific CSS -->
<link rel="stylesheet" href="{{ asset('assets/css/calendar.css') }}" type="text/css">

<script src="{{ asset('assets/js/address-autocomplete.js') }}"></script>
<script src="{{ asset('assets/js/schedule-modals-crud.js') }}"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key={{ $placeApiKey }}&libraries=places&loading=async&callback=initGoogleMapsCallback"></script>

<script>
// Format date to MM-DD-YYYY format
function formatDateToMMDDYYYY(dateString) {
    if (!dateString) return 'N/A';
    
    const date = new Date(dateString);
    if (isNaN(date.getTime())) return 'Invalid Date';
    
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const year = date.getFullYear();
    
    return `${month}-${day}-${year}`;
}

// Time off tooltip functions
let timeOffTooltip = null;

function showTimeOffTooltip(event, timeOff) {
    hideTimeOffTooltip(); // Hide any existing tooltip
    
    timeOffTooltip = document.createElement('div');
    timeOffTooltip.className = 'timeoff-tooltip';
    
    let timeDisplay = 'All Day';
    if (timeOff.time_off_first || timeOff.time_off_second) {
        const times = [];
        if (timeOff.time_off_first) {
            times.push(convertTo12Hour(timeOff.time_off_first));
        }
        if (timeOff.time_off_second) {
            times.push(convertTo12Hour(timeOff.time_off_second));
        }
        timeDisplay = times.join(' - ');
    }
    
    timeOffTooltip.innerHTML = `
        <h6>${timeOff.employee_name} - Time Off</h6>
        <div><strong>Title:</strong> ${timeOff.title || 'N/A'}</div>
        <div><strong>Dates:</strong> ${formatDateToMMDDYYYY(timeOff.start_date)} to ${formatDateToMMDDYYYY(timeOff.end_date)}</div>
        <div><strong>Time:</strong> ${timeDisplay}</div>
        ${timeOff.description ? `<div><strong>Description:</strong> ${timeOff.description}</div>` : ''}
    `;
    
    document.body.appendChild(timeOffTooltip);
    
    // Position tooltip
    const rect = event.target.getBoundingClientRect();
    const tooltipRect = timeOffTooltip.getBoundingClientRect();
    
    let left = rect.left + window.scrollX;
    let top = rect.bottom + window.scrollY + 5;
    
    // Adjust if tooltip goes off screen
    if (left + tooltipRect.width > window.innerWidth) {
        left = window.innerWidth - tooltipRect.width - 10;
    }
    
    if (top + tooltipRect.height > window.innerHeight + window.scrollY) {
        top = rect.top + window.scrollY - tooltipRect.height - 5;
    }
    
    timeOffTooltip.style.left = left + 'px';
    timeOffTooltip.style.top = top + 'px';
}

function hideTimeOffTooltip() {
    if (timeOffTooltip) {
        timeOffTooltip.remove();
        timeOffTooltip = null;
    }
}

// New function for schedule-based time-off tooltips
function showScheduleTimeOffTooltip(event, schedule, inspectorName) {
    hideTimeOffTooltip(); // Hide any existing tooltip
    
    timeOffTooltip = document.createElement('div');
    timeOffTooltip.className = 'timeoff-tooltip';
    
    const scheduleDate = schedule.scheduled_date;
    const scheduleTime = convertTo12Hour(schedule.effective_time || schedule.start_time);
    
    // Build tooltip content with time-off details
    let tooltipContent = `
        <h6>${inspectorName} - Time Off</h6>
        <div><strong>Date:</strong> ${formatDateToMMDDYYYY(scheduleDate)}</div>
        <div><strong>Time:</strong> ${scheduleTime}</div>
        <div><strong>Schedule ID:</strong> ${schedule.appointment_id || schedule.id}</div>
        <div><strong>Status:</strong> Time Off</div>
    `;
    
    // Add time-off details if available
    if (schedule.time_off_data) {
        if (schedule.time_off_data.title) {
            tooltipContent += `<div><strong>Title:</strong> ${schedule.time_off_data.title}</div>`;
        }
        if (schedule.time_off_data.description) {
            tooltipContent += `<div><strong>Description:</strong> ${schedule.time_off_data.description}</div>`;
        }
        if (schedule.time_off_data.created_by_name) {
            tooltipContent += `<div><strong>Created by:</strong> ${schedule.time_off_data.created_by_name}</div>`;
        }
        if (schedule.time_off_data.created_at) {
            tooltipContent += `<div><strong>Created on:</strong> ${new Date(schedule.time_off_data.created_at).toLocaleString()}</div>`;
        }
    }
    
    timeOffTooltip.innerHTML = tooltipContent;
    document.body.appendChild(timeOffTooltip);
    
    // Position tooltip
    const rect = event.target.getBoundingClientRect();
    const tooltipRect = timeOffTooltip.getBoundingClientRect();
    
    let left = rect.left + window.scrollX;
    let top = rect.bottom + window.scrollY + 5;
    
    // Adjust if tooltip goes off screen
    if (left + tooltipRect.width > window.innerWidth) {
        left = window.innerWidth - tooltipRect.width - 10;
    }
    
    if (top + tooltipRect.height > window.innerHeight + window.scrollY) {
        top = rect.top + window.scrollY - tooltipRect.height - 5;
    }
    
    timeOffTooltip.style.left = left + 'px';
    timeOffTooltip.style.top = top + 'px';
}

// Remove Schedule Mapping Function
window.removeScheduleMapping = function(mappingId, employeeName) {
    console.log('🗑️ Remove schedule mapping clicked for mapping ID:', mappingId);
    
    // Show confirmation dialog
    Swal.fire({
        title: 'Remove Time Slot',
        text: `Are you sure you want to remove this time slot from ${employeeName}'s time off?`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Yes, remove it!',
        cancelButtonText: 'Cancel'
    }).then((result) => {
        if (result.isConfirmed) {
            performScheduleMappingRemoval(mappingId, employeeName);
        }
    });
};

// Perform the actual removal
function performScheduleMappingRemoval(mappingId, employeeName) {
    // Get current tenant ID
    let tenantId = '';
    const tenantSelect = document.getElementById('tenantSelect');
    if (tenantSelect) {
        tenantId = tenantSelect.value;
    } else {
        tenantId = '{{ session("tenant_id") }}';
    }

    // Show loading state
    Swal.fire({
        title: 'Removing Time Slot...',
        text: 'Please wait while we remove the time slot.',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });

    // Make API call to remove the mapping
    fetch(`{{ url('schedule') }}/time-off-mapping/${mappingId}`, {
        method: 'DELETE',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            tenant_id: tenantId
        })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        console.log('📋 Schedule mapping removal response:', data);
        
        if (data.status === 200) {
            // Success - show success message
            Swal.fire({
                title: 'Time Slot Removed!',
                text: `The time slot has been successfully removed from ${employeeName}'s time off.`,
                icon: 'success',
                confirmButtonText: 'OK'
            });
            
            // Remove the schedule slot from the DOM
            const scheduleSlot = document.querySelector(`[data-mapping-id="${mappingId}"]`);
            if (scheduleSlot) {
                scheduleSlot.remove();
            }
            
            // Refresh the calendar to reflect changes
            if (typeof loadScheduleData === 'function') {
                loadScheduleData();
            }
            
        } else {
            throw new Error(data.message || 'Failed to remove time slot');
        }
    })
    .catch(error => {
        console.error('Remove mapping error:', error);
        Swal.fire({
            title: 'Error!',
            text: 'Failed to remove the time slot. Please try again.',
            icon: 'error',
            confirmButtonText: 'OK'
        });
    });
}

// Remove Time Off Schedule Function (for action modal)
window.removeTimeOffSchedule = function(scheduleId, employeeName) {
    console.log('🗑️ Remove time off schedule clicked for ID:', scheduleId);
    
    // Show confirmation dialog
    Swal.fire({
        title: 'Remove Time Off',
        text: `Are you sure you want to remove this time off schedule for ${employeeName}?`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Yes, remove it!',
        cancelButtonText: 'Cancel'
    }).then((result) => {
        if (result.isConfirmed) {
            performTimeOffScheduleRemoval(scheduleId, employeeName);
        }
    });
};

// Perform the actual time off schedule removal
function performTimeOffScheduleRemoval(scheduleId, employeeName) {
    // Get current tenant ID
    let tenantId = '';
    const tenantSelect = document.getElementById('tenantSelect');
    if (tenantSelect) {
        tenantId = tenantSelect.value;
    } else {
        tenantId = '{{ session("tenant_id") }}';
    }

    // Show loading state
    Swal.fire({
        title: 'Removing Time Off...',
        text: 'Please wait while we remove the time off schedule.',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });

    // Make API call to remove the time off schedule
    fetch(`{{ url('schedule') }}/remove-time-off-schedule/${scheduleId}`, {
        method: 'DELETE',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            tenant_id: tenantId
        })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        console.log('📋 Time off schedule removal response:', data);
        
        if (data.status === 200) {
            // Success - show success message
            Swal.fire({
                title: 'Time Off Removed!',
                text: `The time off schedule has been successfully removed for ${employeeName}.`,
                icon: 'success',
                confirmButtonText: 'OK'
            });
            
            // Close the action modal
            closeCalendarActionModal();
            
            // Refresh the calendar to reflect changes
            if (typeof loadScheduleData === 'function') {
                loadScheduleData();
            }
            
        } else {
            throw new Error(data.message || 'Failed to remove time off schedule');
        }
    })
    .catch(error => {
        console.error('Remove time off schedule error:', error);
        Swal.fire({
            title: 'Error!',
            text: 'Failed to remove the time off schedule. Please try again.',
            icon: 'error',
            confirmButtonText: 'OK'
        });
    });
}
</script>

@endpush