@extends('crm.layouts.app')

@section('title', 'Equipment Maintenance Analytics')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <!-- Page Header -->
    <div class="sm:flex sm:items-center sm:justify-between">
        <div class="min-w-0 flex-1">
            <nav class="flex mb-4" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-3">
                    <li class="inline-flex items-center">
                        <a href="{{ route('crm.equipment-maintenance.index') }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-indigo-600">
                            <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z" clip-rule="evenodd"></path>
                            </svg>
                            Equipment Maintenance
                        </a>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="ml-1 text-sm font-medium text-gray-500 md:ml-2">Analytics</span>
                        </div>
                    </li>
                </ol>
            </nav>
            <h1 class="text-2xl font-semibold text-gray-900">Equipment Maintenance Analytics</h1>
            <p class="mt-2 text-sm text-gray-700">Analyze equipment maintenance performance and costs</p>
        </div>
        <div class="mt-4 sm:ml-16 sm:mt-0 flex gap-x-3" x-data="{ showExportModal: false }">
            <a href="{{ route('crm.equipment-maintenance.schedule') }}" class="inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                <svg viewBox="0 0 20 20" fill="currentColor" class="-ml-0.5 size-5 text-gray-400">
                    <path d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75V12ZM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75H6ZM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75V12ZM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75H8ZM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75V10ZM10 11.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75H10ZM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75V14ZM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75H12ZM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75V12ZM12 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75H12ZM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75V10ZM14 11.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75H14Z" />
                    <path fill-rule="evenodd" d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2Zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75Z" clip-rule="evenodd" />
                </svg>
                Schedule
            </a>
            <button @click="showExportModal = true" type="button" class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500">
                <svg viewBox="0 0 20 20" fill="currentColor" class="-ml-0.5 size-5">
                    <path d="M10.75 2.75a.75.75 0 0 0-1.5 0v8.614L6.295 8.235a.75.75 0 1 0-1.09 1.03l4.25 4.5a.75.75 0 0 0 1.09 0l4.25-4.5a.75.75 0 0 0-1.09-1.03l-2.955 3.129V2.75Z" />
                    <path d="M3.5 12.75a.75.75 0 0 0-1.5 0v2.5A2.75 2.75 0 0 0 4.75 18h10.5A2.75 2.75 0 0 0 18 15.25v-2.5a.75.75 0 0 0-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5Z" />
                </svg>
                Export Report
            </button>

            <!-- Export Modal -->
            <div x-show="showExportModal" x-cloak class="relative z-50" aria-labelledby="modal-title" role="dialog" aria-modal="true">
                <div x-show="showExportModal"
                     x-transition:enter="ease-out duration-300"
                     x-transition:enter-start="opacity-0"
                     x-transition:enter-end="opacity-100"
                     class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>

                <div class="fixed inset-0 z-50 w-screen overflow-y-auto">
                    <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
                        <div x-show="showExportModal"
                             x-transition:enter="ease-out duration-300"
                             x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                             x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                             @click.away="showExportModal = false"
                             class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
                            <div>
                                <div class="flex items-center justify-between mb-6">
                                    <h3 class="text-base font-semibold text-gray-900">Export Maintenance Report</h3>
                                    <button @click="showExportModal = false" type="button" class="text-gray-400 hover:text-gray-500">
                                        <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                                        </svg>
                                    </button>
                                </div>

                                <form action="{{ route('crm.equipment-maintenance.export') }}" method="POST">
                                    @csrf
                                    <div class="space-y-4">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-900 mb-2">Start Date</label>
                                            <input type="date" name="start_date" required class="block w-full rounded-md bg-white px-3 py-2 text-base text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 placeholder:text-gray-400 focus:inset-ring-2 focus:inset-ring-indigo-600">
                                        </div>

                                        <div>
                                            <label class="block text-sm font-medium text-gray-900 mb-2">End Date</label>
                                            <input type="date" name="end_date" required class="block w-full rounded-md bg-white px-3 py-2 text-base text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 placeholder:text-gray-400 focus:inset-ring-2 focus:inset-ring-indigo-600">
                                        </div>

                                        <div>
                                            <label class="block text-sm font-medium text-gray-900 mb-2">Format</label>
                                            <select name="format" required class="block w-full rounded-md bg-white px-3 py-2 text-base text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 focus:inset-ring-2 focus:inset-ring-indigo-600">
                                                <option value="csv">CSV</option>
                                                <option value="pdf">PDF</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="flex gap-x-3 mt-6">
                                        <button @click="showExportModal = false" type="button" class="flex-1 inline-flex justify-center items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50">Cancel</button>
                                        <button type="submit" class="flex-1 inline-flex justify-center items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500">
                                            <svg viewBox="0 0 20 20" fill="currentColor" class="-ml-0.5 size-5">
                                                <path d="M10.75 2.75a.75.75 0 0 0-1.5 0v8.614L6.295 8.235a.75.75 0 1 0-1.09 1.03l4.25 4.5a.75.75 0 0 0 1.09 0l4.25-4.5a.75.75 0 0 0-1.09-1.03l-2.955 3.129V2.75Z" />
                                                <path d="M3.5 12.75a.75.75 0 0 0-1.5 0v2.5A2.75 2.75 0 0 0 4.75 18h10.5A2.75 2.75 0 0 0 18 15.25v-2.5a.75.75 0 0 0-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5Z" />
                                            </svg>
                                            Export
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if(session('success'))
        <div class="mt-8 rounded-lg bg-green-50 p-4 border border-green-200">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-green-800">{{ session('success') }}</p>
                </div>
            </div>
        </div>
    @endif

    @if(session('info'))
        <div class="mt-8 rounded-lg bg-blue-50 p-4 border border-blue-200">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-blue-800">{{ session('info') }}</p>
                </div>
            </div>
        </div>
    @endif

    <!-- Overview Statistics -->
    <div class="mt-8 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
        <div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow-sm ring-1 ring-gray-900/5 sm:p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="size-8 text-gray-400">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437 1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008Z" />
                    </svg>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="truncate text-sm font-medium text-gray-500">Total Equipment</dt>
                        <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{{ $totalEquipment }}</dd>
                    </dl>
                </div>
            </div>
        </div>

        <div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow-sm ring-1 ring-gray-900/5 sm:p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="size-8 text-gray-400">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                    </svg>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="truncate text-sm font-medium text-gray-500">Active Equipment</dt>
                        <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{{ $activeEquipment }}</dd>
                    </dl>
                </div>
            </div>
        </div>

        <div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow-sm ring-1 ring-gray-900/5 sm:p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="size-8 text-gray-400">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
                    </svg>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="truncate text-sm font-medium text-gray-500">Overdue Maintenance</dt>
                        <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{{ $overdueCount }}</dd>
                    </dl>
                </div>
            </div>
        </div>

        <div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow-sm ring-1 ring-gray-900/5 sm:p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="size-8 text-gray-400">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75a4.5 4.5 0 0 1-4.884 4.484c-1.076-.091-2.264.071-2.95.904l-7.152 8.684a2.548 2.548 0 1 1-3.586-3.586l8.684-7.152c.833-.686.995-1.874.904-2.95a4.5 4.5 0 0 1 6.336-4.486l-3.276 3.276a3.004 3.004 0 0 0 2.25 2.25l3.276-3.276c.256.565.398 1.192.398 1.852Z" />
                    </svg>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="truncate text-sm font-medium text-gray-500">Completed This Month</dt>
                        <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{{ $completedThisMonth }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

    <!-- Equipment Status Distribution -->
    <div class="mt-8 overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-gray-900/5">
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-base font-semibold text-gray-900 mb-6">Equipment Status Distribution</h3>

            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div class="bg-gray-50 p-4 rounded-lg text-center ring-1 ring-gray-900/5">
                    <div class="text-2xl font-bold text-green-600">{{ $activeEquipment }}</div>
                    <div class="text-sm text-gray-500">Active</div>
                    <div class="text-xs text-gray-400 mt-1">{{ $totalEquipment > 0 ? round(($activeEquipment / $totalEquipment) * 100, 1) : 0 }}%</div>
                </div>
                <div class="bg-gray-50 p-4 rounded-lg text-center ring-1 ring-gray-900/5">
                    <div class="text-2xl font-bold text-yellow-600">{{ $maintenanceEquipment }}</div>
                    <div class="text-sm text-gray-500">In Maintenance</div>
                    <div class="text-xs text-gray-400 mt-1">{{ $totalEquipment > 0 ? round(($maintenanceEquipment / $totalEquipment) * 100, 1) : 0 }}%</div>
                </div>
                <div class="bg-gray-50 p-4 rounded-lg text-center ring-1 ring-gray-900/5">
                    <div class="text-2xl font-bold text-red-600">{{ $brokenEquipment }}</div>
                    <div class="text-sm text-gray-500">Broken</div>
                    <div class="text-xs text-gray-400 mt-1">{{ $totalEquipment > 0 ? round(($brokenEquipment / $totalEquipment) * 100, 1) : 0 }}%</div>
                </div>
                <div class="bg-gray-50 p-4 rounded-lg text-center ring-1 ring-gray-900/5">
                    <div class="text-2xl font-bold text-gray-600">{{ $totalEquipment - $activeEquipment - $maintenanceEquipment - $brokenEquipment }}</div>
                    <div class="text-sm text-gray-500">Retired</div>
                    <div class="text-xs text-gray-400 mt-1">{{ $totalEquipment > 0 ? round((($totalEquipment - $activeEquipment - $maintenanceEquipment - $brokenEquipment) / $totalEquipment) * 100, 1) : 0 }}%</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Cost Analysis -->
    <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-gray-900/5">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-base font-semibold text-gray-900 mb-6">Cost Analysis</h3>

                <div class="space-y-4">
                    <div class="bg-gray-50 p-4 rounded-lg ring-1 ring-gray-900/5">
                        <div class="text-sm font-medium text-gray-500">Total Maintenance Cost</div>
                        <div class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">${{ number_format($totalMaintenanceCost, 2) }}</div>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg ring-1 ring-gray-900/5">
                        <div class="text-sm font-medium text-gray-500">This Month</div>
                        <div class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">${{ number_format($monthlyMaintenanceCost, 2) }}</div>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg ring-1 ring-gray-900/5">
                        <div class="text-sm font-medium text-gray-500">Average per Equipment</div>
                        <div class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">${{ $totalEquipment > 0 ? number_format($totalMaintenanceCost / $totalEquipment, 2) : '0.00' }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-gray-900/5">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-base font-semibold text-gray-900 mb-6">Equipment Categories</h3>

                <div class="space-y-3">
                    @foreach($categoryDistribution as $category => $count)
                    <div class="flex items-center justify-between bg-gray-50 p-3 rounded-lg ring-1 ring-gray-900/5">
                        <div class="text-sm font-medium text-gray-700">{{ ucfirst(str_replace('_', ' ', $category)) }}</div>
                        <div class="flex items-center space-x-3">
                            <div class="text-sm font-semibold text-gray-900">{{ $count }}</div>
                            <div class="w-20 bg-gray-200 rounded-full h-2">
                                <div class="bg-indigo-600 h-2 rounded-full" style="width: {{ $totalEquipment > 0 ? ($count / $totalEquipment) * 100 : 0 }}%"></div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <!-- Monthly Trends -->
    <div class="mt-8 overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-gray-900/5">
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-base font-semibold text-gray-900 mb-6">Monthly Maintenance Trends ({{ now()->year }})</h3>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h4 class="text-sm font-medium text-gray-700 mb-4">Completed Maintenance</h4>
                    <div class="space-y-2">
                        @for($month = 1; $month <= 12; $month++)
                            @php
                                $monthName = date('M', mktime(0, 0, 0, $month, 1));
                                $count = $maintenanceByMonth->get($month, 0);
                                $maxCount = $maintenanceByMonth->max() ?: 1;
                            @endphp
                            <div class="flex items-center space-x-3">
                                <div class="w-8 text-gray-500 text-sm">{{ $monthName }}</div>
                                <div class="flex-1 bg-gray-200 rounded-full h-3">
                                    <div class="bg-indigo-600 h-3 rounded-full" style="width: {{ ($count / $maxCount) * 100 }}%"></div>
                                </div>
                                <div class="w-8 text-gray-900 text-sm font-semibold">{{ $count }}</div>
                            </div>
                        @endfor
                    </div>
                </div>

                <div>
                    <h4 class="text-sm font-medium text-gray-700 mb-4">Monthly Costs</h4>
                    <div class="space-y-2">
                        @for($month = 1; $month <= 12; $month++)
                            @php
                                $monthName = date('M', mktime(0, 0, 0, $month, 1));
                                $cost = $costByMonth->get($month, 0);
                                $maxCost = $costByMonth->max() ?: 1;
                            @endphp
                            <div class="flex items-center space-x-3">
                                <div class="w-8 text-gray-500 text-sm">{{ $monthName }}</div>
                                <div class="flex-1 bg-gray-200 rounded-full h-3">
                                    <div class="bg-green-600 h-3 rounded-full" style="width: {{ ($cost / $maxCost) * 100 }}%"></div>
                                </div>
                                <div class="w-16 text-gray-900 text-sm font-semibold">${{ number_format($cost, 0) }}</div>
                            </div>
                        @endfor
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Top Equipment by Cost -->
    <div class="mt-8 overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-gray-900/5">
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-base font-semibold text-gray-900 mb-6">Top Equipment by Maintenance Cost</h3>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-300">
                    <thead>
                        <tr>
                            <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0">Rank</th>
                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Equipment</th>
                            <th scope="col" class="px-3 py-3.5 text-center text-sm font-semibold text-gray-900">Category</th>
                            <th scope="col" class="px-3 py-3.5 text-center text-sm font-semibold text-gray-900">Total Cost</th>
                            <th scope="col" class="px-3 py-3.5 text-center text-sm font-semibold text-gray-900">Maintenance Count</th>
                            <th scope="col" class="px-3 py-3.5 text-center text-sm font-semibold text-gray-900">Avg Cost</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @forelse($topEquipmentByCost as $index => $equipment)
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-0">
                                <div class="flex items-center">
                                    @if($index == 0)
                                        <svg viewBox="0 0 24 24" fill="currentColor" class="size-5 text-yellow-400">
                                            <path fill-rule="evenodd" d="M5.166 2.621v.858c-1.035.148-2.059.33-3.071.543a.75.75 0 0 0-.584.859 6.753 6.753 0 0 0 6.138 5.6 6.73 6.73 0 0 0 2.743 1.346A6.707 6.707 0 0 1 9.279 15H8.54c-1.036 0-1.875.84-1.875 1.875V19.5h-.75a2.25 2.25 0 0 0-2.25 2.25c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-2.25-2.25h-.75v-2.625c0-1.036-.84-1.875-1.875-1.875h-.739a6.706 6.706 0 0 1-1.112-3.173 6.73 6.73 0 0 0 2.743-1.347 6.753 6.753 0 0 0 6.139-5.6.75.75 0 0 0-.585-.858 47.077 47.077 0 0 0-3.07-.543V2.62a.75.75 0 0 0-.658-.744 49.22 49.22 0 0 0-6.093-.377c-2.063 0-4.096.128-6.093.377a.75.75 0 0 0-.657.744Zm0 2.629c0 1.196.312 2.32.857 3.294A5.266 5.266 0 0 1 3.16 5.337a45.6 45.6 0 0 1 2.006-.343v.256Zm13.5 0v-.256c.674.1 1.343.214 2.006.343a5.265 5.265 0 0 1-2.863 3.207 6.72 6.72 0 0 0 .857-3.294Z" clip-rule="evenodd" />
                                        </svg>
                                    @elseif($index == 1)
                                        <svg viewBox="0 0 24 24" fill="currentColor" class="size-5 text-gray-400">
                                            <path fill-rule="evenodd" d="M5.166 2.621v.858c-1.035.148-2.059.33-3.071.543a.75.75 0 0 0-.584.859 6.753 6.753 0 0 0 6.138 5.6 6.73 6.73 0 0 0 2.743 1.346A6.707 6.707 0 0 1 9.279 15H8.54c-1.036 0-1.875.84-1.875 1.875V19.5h-.75a2.25 2.25 0 0 0-2.25 2.25c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-2.25-2.25h-.75v-2.625c0-1.036-.84-1.875-1.875-1.875h-.739a6.706 6.706 0 0 1-1.112-3.173 6.73 6.73 0 0 0 2.743-1.347 6.753 6.753 0 0 0 6.139-5.6.75.75 0 0 0-.585-.858 47.077 47.077 0 0 0-3.07-.543V2.62a.75.75 0 0 0-.658-.744 49.22 49.22 0 0 0-6.093-.377c-2.063 0-4.096.128-6.093.377a.75.75 0 0 0-.657.744Zm0 2.629c0 1.196.312 2.32.857 3.294A5.266 5.266 0 0 1 3.16 5.337a45.6 45.6 0 0 1 2.006-.343v.256Zm13.5 0v-.256c.674.1 1.343.214 2.006.343a5.265 5.265 0 0 1-2.863 3.207 6.72 6.72 0 0 0 .857-3.294Z" clip-rule="evenodd" />
                                        </svg>
                                    @elseif($index == 2)
                                        <svg viewBox="0 0 24 24" fill="currentColor" class="size-5 text-yellow-600">
                                            <path fill-rule="evenodd" d="M5.166 2.621v.858c-1.035.148-2.059.33-3.071.543a.75.75 0 0 0-.584.859 6.753 6.753 0 0 0 6.138 5.6 6.73 6.73 0 0 0 2.743 1.346A6.707 6.707 0 0 1 9.279 15H8.54c-1.036 0-1.875.84-1.875 1.875V19.5h-.75a2.25 2.25 0 0 0-2.25 2.25c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-2.25-2.25h-.75v-2.625c0-1.036-.84-1.875-1.875-1.875h-.739a6.706 6.706 0 0 1-1.112-3.173 6.73 6.73 0 0 0 2.743-1.347 6.753 6.753 0 0 0 6.139-5.6.75.75 0 0 0-.585-.858 47.077 47.077 0 0 0-3.07-.543V2.62a.75.75 0 0 0-.658-.744 49.22 49.22 0 0 0-6.093-.377c-2.063 0-4.096.128-6.093.377a.75.75 0 0 0-.657.744Zm0 2.629c0 1.196.312 2.32.857 3.294A5.266 5.266 0 0 1 3.16 5.337a45.6 45.6 0 0 1 2.006-.343v.256Zm13.5 0v-.256c.674.1 1.343.214 2.006.343a5.265 5.265 0 0 1-2.863 3.207 6.72 6.72 0 0 0 .857-3.294Z" clip-rule="evenodd" />
                                        </svg>
                                    @else
                                        <span class="w-5 text-center text-sm font-medium text-gray-700">{{ $index + 1 }}</span>
                                    @endif
                                </div>
                            </td>
                            <td class="whitespace-nowrap px-3 py-4 text-sm font-medium text-gray-900">{{ $equipment['name'] }}</td>
                            <td class="whitespace-nowrap px-3 py-4 text-center text-sm">
                                <span class="inline-flex items-center rounded-md bg-indigo-50 px-2 py-1 text-xs font-medium text-indigo-700 ring-1 ring-inset ring-indigo-700/10">
                                    {{ ucfirst(str_replace('_', ' ', $equipment['category'])) }}
                                </span>
                            </td>
                            <td class="whitespace-nowrap px-3 py-4 text-center text-sm font-semibold text-gray-900">
                                ${{ number_format($equipment['total_cost'], 2) }}
                            </td>
                            <td class="whitespace-nowrap px-3 py-4 text-center text-sm">
                                <span class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">
                                    {{ $equipment['maintenance_count'] }}
                                </span>
                            </td>
                            <td class="whitespace-nowrap px-3 py-4 text-center text-sm text-gray-700">
                                ${{ $equipment['maintenance_count'] > 0 ? number_format($equipment['total_cost'] / $equipment['maintenance_count'], 2) : '0.00' }}
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="py-12">
                                <div class="text-center">
                                    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
                                    </svg>
                                    <h3 class="mt-2 text-sm font-semibold text-gray-900">No maintenance data available</h3>
                                    <p class="mt-1 text-sm text-gray-500">Start logging maintenance to see analytics</p>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection