@extends('layout.master')

@section('content')
<div class="container-fluid px-3">
    <h3 class="mb-3">Lifting Equipment Availability (LEA)</h3>
    
    <!-- Loading Indicator -->
    <div id="loading-indicator" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; background: rgba(255,255,255,0.9); padding: 30px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
        <div class="text-center">
            <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-3 mb-0 fs-5">Loading data...</p>
        </div>
    </div>
    
    <!-- Global Filter Section -->
    <div class="card mb-3">
        <div class="card-header bg-secondary text-white py-2">
            <h6 class="mb-0 fs-6">Filters</h6>
        </div>
        <div class="card-body p-2">
            <div class="row g-2 align-items-end">
                <!-- Year Filter -->
                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
                    <label for="yearFilter" class="form-label small fw-bold mb-1">Year</label>
                    <select class="form-select form-select-sm" id="yearFilter">
                        @php
                            $currentYear = date('Y');
                            $startYear = $currentYear - 5;
                        @endphp
                        @for($year = $currentYear; $year >= $startYear; $year--)
                            <option value="{{ $year }}" {{ $year == $currentYear ? 'selected' : '' }}>{{ $year }}</option>
                        @endfor
                    </select>
                </div>
                
                <!-- Month Filter -->
                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
                    <label for="monthFilter" class="form-label small fw-bold mb-1">Month</label>
                    <select class="form-select form-select-sm" id="monthFilter">
                        @php
                            $months = [
                                1 => 'Jan', 2 => 'Feb', 3 => 'Mar', 4 => 'Apr',
                                5 => 'May', 6 => 'Jun', 7 => 'Jul', 8 => 'Aug',
                                9 => 'Sep', 10 => 'Oct', 11 => 'Nov', 12 => 'Dec'
                            ];
                            $currentMonth = date('n');
                        @endphp
                        @foreach($months as $num => $name)
                            <option value="{{ $num }}" {{ $num == $currentMonth ? 'selected' : '' }}>{{ $name }}</option>
                        @endforeach
                    </select>
                </div>
                
                <!-- Status Filter -->
                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
                    <label for="statusFilter" class="form-label small fw-bold mb-1">Crane Status</label>
                    <select class="form-select form-select-sm" id="statusFilter">
                        <option value="all">All Statuses</option>
                        <option value="Active">Active</option>
                        <option value="Inactive">Inactive</option>
                    </select>
                </div>
                
                <!-- Platform Filter -->
                <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
                    <label for="platformFilter" class="form-label small fw-bold mb-1">Platform</label>
                    <select class="form-select form-select-sm" id="platformFilter">
                        <option value="all">All Platforms</option>
                        @foreach($platforms as $platform)
                            <option value="{{ $platform }}" {{ $selectedPlatform == $platform ? 'selected' : '' }}>{{ $platform }}</option>
                        @endforeach
                    </select>
                </div>

                <!-- Quick Actions -->
                <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12">
                    <label class="form-label small fw-bold mb-1">Quick Actions</label>
                    <div class="d-flex gap-1">
                        <button class="btn btn-sm btn-outline-primary flex-fill" onclick="resetFilters()">
                            <i class="fas fa-refresh"></i> Reset
                        </button>
                        <button class="btn btn-sm btn-outline-secondary flex-fill" onclick="exportData()">
                            <i class="fas fa-download"></i> Export
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Tabs for Yearly/Monthly View -->
    <ul class="nav nav-tabs mb-2" id="calendarTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active fs-6 px-3 py-1" id="yearly-tab" data-bs-toggle="tab" data-bs-target="#yearly" type="button" role="tab" aria-controls="yearly" aria-selected="true">
                <i class="fas fa-calendar-alt me-1"></i>Yearly
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link fs-6 px-3 py-1" id="monthly-tab" data-bs-toggle="tab" data-bs-target="#monthly" type="button" role="tab" aria-controls="monthly" aria-selected="false">
                <i class="fas fa-calendar-day me-1"></i>Monthly
            </button>
        </li>
    </ul>
    
    <div class="tab-content" id="calendarTabContent">
        <!-- Yearly View Tab -->
        <div class="tab-pane fade show active" id="yearly" role="tabpanel" aria-labelledby="yearly-tab">
            <!-- Yearly Overview Table -->
            <div class="table-responsive" style="max-height: 65vh; font-size: 0.85rem;">
                <table class="table table-bordered table-hover table-sm" id="yearly-calendar">
                    <thead class="thead-dark sticky-top">
                        <tr>
                            <th class="bg-dark text-white py-1 px-2 fs-6" style="min-width: 180px; width: 180px;">Crane Information</th>
                            @php
                                $months = ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'];
                            @endphp
                            @foreach($months as $month)
                                <th class="bg-dark text-white py-1 px-0 text-center" style="min-width: 35px; width: 35px;">
                                    <small class="fw-bold">{{ $month }}</small>
                                </th>
                            @endforeach
                            <th class="bg-dark text-white py-1 px-1 text-center" style="min-width: 50px; width: 50px;">
                                <small class="fw-bold">Avg</small>
                            </th>
                        </tr>
                    </thead>
                    <tbody id="yearly-data">
                        @foreach($cranes as $crane)
                            @php
                                $yearlyTotal = 0;
                                $yearlyCount = 0;
                                $craneStatus = $crane->status_crane ?? 'Inactive';
                                
                                // SAFE ACCESS: Check if data exists for this crane
                                $craneYearlyData = $yearlyData[$crane->id] ?? [];
                            @endphp
                            <tr class="bg-white" data-platform="{{ $crane->platform ?? '' }}" data-crane-status="{{ $craneStatus }}">
                                <td class="bg-light py-1 px-2" style="min-width: 180px; width: 180px;">
                                    <div class="fw-bold small">{{ $crane->tag_no ?? 'N/A' }}</div>
                                    <div class="x-small text-muted">
                                        {{ $crane->platform ?? 'N/A' }}
                                        @if($craneStatus === 'Active')
                                            <span class="badge bg-success ms-1">A</span>
                                        @else
                                            <span class="badge bg-secondary ms-1">I</span>
                                        @endif
                                    </div>
                                </td>
                                
                                @for($month = 1; $month <= 12; $month++)
                                    @php
                                        // SAFE ACCESS: Check if month data exists
                                        $availabilityPercentage = 0;
                                        $monthTitle = 'No data';
                                        
                                        if (isset($craneYearlyData[$month])) {
                                            $monthData = $craneYearlyData[$month];
                                            $availabilityPercentage = $monthData['percentage'] ?? 0;
                                            $monthTitle = ($monthData['operational_days'] ?? 0) . ' operational days out of ' . ($monthData['total_days'] ?? 0);
                                        }
                                        
                                        // Determine color based on percentage
                                        $bgColor = 'bg-secondary';
                                        $statusClass = 'no_data';
                                        if ($availabilityPercentage > 0) {
                                            if ($availabilityPercentage >= 90) {
                                                $bgColor = 'bg-success';
                                                $statusClass = 'excellent';
                                            } elseif ($availabilityPercentage >= 70) {
                                                $bgColor = 'bg-warning';
                                                $statusClass = 'good';
                                            } else {
                                                $bgColor = 'bg-danger';
                                                $statusClass = 'needs_attention';
                                            }
                                        }
                                        
                                        // Add to yearly total
                                        if ($availabilityPercentage > 0) {
                                            $yearlyTotal += $availabilityPercentage;
                                            $yearlyCount++;
                                        }
                                    @endphp
                                    <td class="{{ $bgColor }} text-white py-1 px-0 text-center calendar-month {{ $statusClass }}" 
                                        title="{{ $monthTitle }}" data-percentage="{{ $availabilityPercentage }}" data-status="{{ $statusClass }}"
                                        style="min-width: 35px; width: 35px; cursor: help;">
                                        <small class="fw-bold">{{ $availabilityPercentage > 0 ? $availabilityPercentage . '%' : '-' }}</small>
                                    </td>
                                @endfor
                                
                                @php
                                    // Calculate yearly average
                                    $yearlyAverage = $yearlyCount > 0 ? round($yearlyTotal / $yearlyCount, 1) : 0;
                                    
                                    // Determine color for yearly average
                                    $yearlyBgColor = 'bg-secondary';
                                    $yearlyStatusClass = 'no_data';
                                    if ($yearlyAverage > 0) {
                                        if ($yearlyAverage >= 90) {
                                            $yearlyBgColor = 'bg-success';
                                            $yearlyStatusClass = 'excellent';
                                        } elseif ($yearlyAverage >= 70) {
                                            $yearlyBgColor = 'bg-warning';
                                            $yearlyStatusClass = 'good';
                                        } else {
                                            $yearlyBgColor = 'bg-danger';
                                            $yearlyStatusClass = 'needs_attention';
                                        }
                                    }
                                @endphp
                                <td class="{{ $yearlyBgColor }} text-white py-1 px-0 text-center calendar-month {{ $yearlyStatusClass }}" 
                                    title="Yearly Average: {{ $yearlyAverage }}%" data-percentage="{{ $yearlyAverage }}" data-status="{{ $yearlyStatusClass }}"
                                    style="min-width: 50px; width: 50px; cursor: help;">
                                    <small class="fw-bold">{{ $yearlyAverage > 0 ? $yearlyAverage . '%' : '-' }}</small>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            
            <!-- Results Count and Summary -->
            <div class="d-flex justify-content-between align-items-center mt-2">
                <div id="yearly-results-count" class="text-muted small">
                    Showing all {{ count($cranes) }} results
                </div>
                <div class="text-end">
                    <small class="text-muted">Hover for details</small>
                </div>
            </div>
        </div>
        
        <!-- Monthly View Tab -->
        <div class="tab-pane fade" id="monthly" role="tabpanel" aria-labelledby="monthly-tab">
            <!-- Calendar View - Ultra Compact -->
            <div class="table-responsive" style="max-height: 65vh; font-size: 0.75rem;">
                <table class="table table-bordered table-hover table-sm mb-1" id="maintenance-calendar">
                    <thead class="thead-dark sticky-top">
                        <tr>
                            <th class="bg-dark text-white py-1 px-2" style="min-width: 160px; width: 160px;">
                                <small class="fw-bold">Crane Info</small>
                            </th>
                            @php
                                $daysInMonth = cal_days_in_month(CAL_GREGORIAN, $currentMonth, $currentYear);
                                $firstDayOfWeek = date('w', strtotime("$currentYear-$currentMonth-01"));
                                $dayNames = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
                            @endphp
                            
                            @for($day = 1; $day <= $daysInMonth; $day++)
                                @php
                                    $dayOfWeek = ($firstDayOfWeek + $day - 1) % 7;
                                    $isWeekend = $dayOfWeek === 0 || $dayOfWeek === 6;
                                @endphp
                                <th class="bg-dark text-white py-0 px-0 text-center {{ $isWeekend ? 'bg-info' : '' }}" 
                                    style="min-width: 22px; width: 22px; font-size: 0.65rem;">
                                    <div class="fw-bold">{{ $day }}</div>
                                    <div class="x-small">{{ $dayNames[$dayOfWeek] }}</div>
                                </th>
                            @endfor
                            <th class="bg-dark text-white py-1 px-0 text-center" style="min-width: 40px; width: 40px;">
                                <small class="fw-bold">%</small>
                            </th>
                        </tr>
                    </thead>
                    <tbody id="monthly-data">
                        @foreach($cranes as $crane)
                            @php
                                // Get maintenance data safely
                                $craneMaintenance = isset($maintenanceData[$crane->id]) ? $maintenanceData[$crane->id] : [];
                                $operationalDays = 0;
                                $craneStatus = $crane->status_crane ?? 'Inactive';
                            @endphp
                            <tr class="bg-white" data-platform="{{ $crane->platform ?? '' }}" data-crane-status="{{ $craneStatus }}">
                                <td class="bg-light py-1 px-2" style="min-width: 160px; width: 160px;">
                                    <div class="fw-bold small">{{ $crane->tag_no ?? 'N/A' }}</div>
                                    <div class="x-small text-muted">
                                        {{ $crane->platform ?? 'N/A' }}
                                        @if($craneStatus === 'Active')
                                            <span class="badge bg-success ms-1">A</span>
                                        @else
                                            <span class="badge bg-secondary ms-1">I</span>
                                        @endif
                                    </div>
                                </td>
                                
                                @for($day = 1; $day <= $daysInMonth; $day++)
                                    @php
                                        $status = null;
                                        $hasData = false;
                                        $statusText = '•';
                                        $title = 'No data';
                                        $bgColor = 'bg-secondary';
                                        $statusClass = 'no_data';
                                        
                                        // Check if maintenance data exists for this day
                                        if (isset($craneMaintenance[$day])) {
                                            $dayData = $craneMaintenance[$day];
                                            $status = $dayData->maintenance_status_id ?? null;
                                            $hasData = true;
                                            
                                            // Determine status display
                                            if ($hasData && $status !== null) {
                                                if ($status == 1) {
                                                    $bgColor = 'bg-danger';
                                                    $title = 'Maintenance Required - Day ' . $day;
                                                    $statusText = 'M';
                                                    $statusClass = 'maintenance';
                                                } elseif ($status == 5) {
                                                    $bgColor = 'bg-success';
                                                    $title = 'Operational - Day ' . $day;
                                                    $statusText = 'O';
                                                    $statusClass = 'operational';
                                                    $operationalDays++;
                                                } else {
                                                    $bgColor = 'bg-warning';
                                                    $title = 'Other Status (ID: ' . $status . ') - Day ' . $day;
                                                    $statusText = 'X';
                                                    $statusClass = 'other';
                                                }
                                            }
                                        }
                                    @endphp
                                    <td class="{{ $bgColor }} text-white py-0 px-0 text-center calendar-day {{ $statusClass }}" 
                                        title="{{ $title }}" data-status="{{ $statusClass }}"
                                        style="min-width: 22px; width: 22px; height: 22px; cursor: help; font-size: 0.7rem;">
                                        <span class="fw-bold">{{ $statusText }}</span>
                                    </td>
                                @endfor
                                
                                @php
                                    // Calculate monthly availability percentage
                                    $availabilityPercentage = $daysInMonth > 0 ? round(($operationalDays / $daysInMonth) * 100, 1) : 0;
                                    
                                    // Determine color for percentage
                                    $percentageBgColor = 'bg-secondary';
                                    $percentageStatusClass = 'no_data';
                                    if ($availabilityPercentage > 0) {
                                        if ($availabilityPercentage >= 90) {
                                            $percentageBgColor = 'bg-success';
                                            $percentageStatusClass = 'excellent';
                                        } elseif ($availabilityPercentage >= 70) {
                                            $percentageBgColor = 'bg-warning';
                                            $percentageStatusClass = 'good';
                                        } else {
                                            $percentageBgColor = 'bg-danger';
                                            $percentageStatusClass = 'needs_attention';
                                        }
                                    }
                                @endphp
                                <td class="{{ $percentageBgColor }} text-white py-1 px-0 text-center {{ $percentageStatusClass }}" 
                                    title="Monthly Availability: {{ $availabilityPercentage }}%" data-percentage="{{ $availabilityPercentage }}" data-status="{{ $percentageStatusClass }}"
                                    style="min-width: 40px; width: 40px; cursor: help;">
                                    <small class="fw-bold">{{ $availabilityPercentage }}%</small>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            
            <!-- Results Count -->
            <div class="d-flex justify-content-between align-items-center mt-2">
                <div id="monthly-results-count" class="text-muted small">
                    Showing all {{ count($cranes) }} results
                </div>
                <div class="text-end">
                    <small class="text-muted">Hover for details • O=Operational, M=Maintenance, X=Other, •=No Data</small>
                </div>
            </div>
            
            <!-- Compact Legend -->
            <div class="mt-2">
                <div class="card">
                    <div class="card-header bg-secondary text-white py-1">
                        <small class="fw-bold">Legend</small>
                    </div>
                    <div class="card-body p-2">
                        <div class="row g-2">
                            <div class="col-auto">
                                <div class="d-flex align-items-center">
                                    <span class="bg-success me-1" style="width: 16px; height: 16px; display: inline-block; border-radius: 2px;"></span>
                                    <small>Operational (O)</small>
                                </div>
                            </div>
                            <div class="col-auto">
                                <div class="d-flex align-items-center">
                                    <span class="bg-danger me-1" style="width: 16px; height: 16px; display: inline-block; border-radius: 2px;"></span>
                                    <small>Maintenance (M)</small>
                                </div>
                            </div>
                            <div class="col-auto">
                                <div class="d-flex align-items-center">
                                    <span class="bg-warning me-1" style="width: 16px; height: 16px; display: inline-block; border-radius: 2px;"></span>
                                    <small>Other (X)</small>
                                </div>
                            </div>
                            <div class="col-auto">
                                <div class="d-flex align-items-center">
                                    <span class="bg-secondary me-1" style="width: 16px; height: 16px; display: inline-block; border-radius: 2px;"></span>
                                    <small>No Data (•)</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Ultra compact styling */
.container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.calendar-month, .calendar-day {
    transition: all 0.2s ease;
}

.calendar-month:hover, .calendar-day:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    z-index: 5;
    position: relative;
}

.table th {
    position: sticky;
    top: 0;
    z-index: 10;
}

.nav-tabs .nav-link {
    font-weight: 600;
    border-radius: 6px 6px 0 0;
    font-size: 0.85rem;
}

.card-header {
    font-weight: 600;
}

.table-responsive {
    border-radius: 6px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}

.x-small {
    font-size: 0.7rem;
}

/* Custom scrollbar for compact design */
.table-responsive::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Ensure 30 days fit in one frame */
#maintenance-calendar {
    table-layout: fixed;
    width: 100%;
}

#maintenance-calendar th,
#maintenance-calendar td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Responsive adjustments for ultra compact */
@media (max-width: 1400px) {
    .container-fluid {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
}

@media (max-width: 768px) {
    .nav-tabs .nav-link {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
    
    .card-body {
        padding: 0.75rem;
    }
}

/* Print optimization */
@media print {
    .container-fluid {
        padding: 0;
    }
    
    .card, .nav-tabs {
        display: none;
    }
    
    .table-responsive {
        box-shadow: none;
        max-height: none;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Get filter elements
    const yearFilter = document.getElementById('yearFilter');
    const monthFilter = document.getElementById('monthFilter');
    const statusFilter = document.getElementById('statusFilter');
    const platformFilter = document.getElementById('platformFilter');
    
    // Set initial values from URL parameters
    const urlParams = new URLSearchParams(window.location.search);
    const urlYear = urlParams.get('year');
    const urlMonth = urlParams.get('month');
    const urlStatus = urlParams.get('status');
    const urlPlatform = urlParams.get('platform');
    
    if (urlYear) yearFilter.value = urlYear;
    if (urlMonth) monthFilter.value = urlMonth;
    if (urlStatus) statusFilter.value = urlStatus;
    if (urlPlatform) platformFilter.value = urlPlatform;
    
    // Function to show loading indicator
    function showLoading() {
        document.getElementById('loading-indicator').style.display = 'block';
    }
    
    // Function to hide loading indicator
    function hideLoading() {
        document.getElementById('loading-indicator').style.display = 'none';
    }
    
    // Function to reload data when month/year changes
    function reloadData() {
        const selectedYear = yearFilter.value;
        const selectedMonth = monthFilter.value;
        const selectedStatus = statusFilter.value;
        const selectedPlatform = platformFilter.value;
        
        // Build URL with all parameters
        let url = window.location.pathname + '?';
        url += 'year=' + selectedYear;
        url += '&month=' + selectedMonth;
        if (selectedStatus !== 'all') url += '&status=' + selectedStatus;
        if (selectedPlatform !== 'all') url += '&platform=' + selectedPlatform;
        
        // Show loading indicator
        showLoading();
        
        // Reload the page with new parameters
        window.location.href = url;
    }
    
    // Function to filter data based on selected criteria (client-side filtering)
    function filterData() {
        const selectedStatus = statusFilter.value;
        const selectedPlatform = platformFilter.value;
        const activeTab = document.querySelector('.nav-tabs .nav-link.active').id;
        
        let rows, countElement;
        
        if (activeTab === 'yearly-tab') {
            rows = document.querySelectorAll('#yearly-data tr');
            countElement = document.getElementById('yearly-results-count');
        } else {
            rows = document.querySelectorAll('#monthly-data tr');
            countElement = document.getElementById('monthly-results-count');
        }
        
        let visibleCount = 0;
        
        rows.forEach(row => {
            let showRow = true;
            
            // Filter by platform
            if (selectedPlatform !== 'all') {
                const platform = row.getAttribute('data-platform');
                if (platform !== selectedPlatform) {
                    showRow = false;
                }
            }
            
            // Filter by status (crane status - Active/Inactive)
            if (selectedStatus !== 'all' && showRow) {
                // Get the crane status from the data-crane-status attribute
                const craneStatus = row.getAttribute('data-crane-status');
                
                // Match with selected status filter
                if (craneStatus !== selectedStatus) {
                    showRow = false;
                }
            }
            
            // Show or hide the row
            row.style.display = showRow ? '' : 'none';
            if (showRow) visibleCount++;
        });
        
        // Update results count
        if (countElement) {
            countElement.textContent = `Showing ${visibleCount} of ${rows.length} results`;
        }
    }
    
    // Add event listeners to month/year filters
    yearFilter.addEventListener('change', reloadData);
    monthFilter.addEventListener('change', reloadData);
    
    // Add event listeners to status/platform filters (client-side only)
    statusFilter.addEventListener('change', filterData);
    platformFilter.addEventListener('change', filterData);
    
    // Add event listeners to tabs to reapply filters when switching tabs
    document.getElementById('yearly-tab').addEventListener('click', function() {
        setTimeout(filterData, 100);
    });
    
    document.getElementById('monthly-tab').addEventListener('click', function() {
        setTimeout(filterData, 100);
    });
    
    // Quick action functions
    window.resetFilters = function() {
        yearFilter.value = new Date().getFullYear();
        monthFilter.value = new Date().getMonth() + 1;
        statusFilter.value = 'all';
        platformFilter.value = 'all';
        reloadData();
    };
    
    window.exportData = function() {
        // Simple export functionality
        const activeTab = document.querySelector('.nav-tabs .nav-link.active').id;
        const table = activeTab === 'yearly-tab' ? 'yearly-calendar' : 'maintenance-calendar';
        alert(`Export functionality for ${table} would be implemented here`);
    };
    
    // Initialize filters
    filterData();
    
    // Add tooltip functionality
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[title]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    
    // Auto-fit columns on window resize
    window.addEventListener('resize', function() {
        // This ensures the table maintains its compact layout
        const monthlyTable = document.getElementById('maintenance-calendar');
        if (monthlyTable) {
            monthlyTable.style.width = '100%';
        }
    });
});
</script>
@endsection