@extends('layout.app')
@section('title', 'Reports & Analytics Dashboard')

@push('header_script')
    <style>
        /* Modern Segmented Navigation */
        .segmented-nav {
            display: inline-flex;
            background: #f1f5f9;
            padding: 5px;
            border-radius: 12px;
            border: 1px solid #e2e8f0;
            gap: 6px;
            flex-wrap: wrap;
        }
        .segmented-nav .nav-link {
            border: none !important;
            background: transparent !important;
            color: #64748b;
            font-size: 13.5px;
            font-weight: 600;
            padding: 9px 18px;
            border-radius: 9px;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .segmented-nav .nav-link:hover {
            color: #0f172a;
            background: rgba(255, 255, 255, 0.6) !important;
        }
        .segmented-nav .nav-link.active {
            background: #ffffff !important;
            color: #f97316 !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        }

        /* Content & Stat Cards */
        .content-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
            overflow: hidden;
        }
        .stat-card-modern {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            padding: 20px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .stat-card-modern:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
        }
        .stat-card-modern .stat-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            flex-shrink: 0;
        }
        .stat-card-modern .stat-val {
            font-size: 1.65rem;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.2;
            letter-spacing: -0.02em;
        }
        .stat-card-modern .stat-label {
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #64748b;
        }

        /* Filter Toolbar Card */
        .filter-toolbar {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            padding: 16px 20px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        }

        /* Action Buttons */
        .btn-action-primary {
            background: linear-gradient(135deg, #1e293b, #0f172a);
            color: #ffffff;
            font-weight: 600;
            border-radius: 8px;
            border: none;
            transition: all 0.2s;
        }
        .btn-action-primary:hover {
            background: #020617;
            color: #ffffff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        /* Custom Table Styling */
        .reports-table thead th {
            background: #0f172a !important;
            color: #ffffff !important;
            font-size: 11.5px !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.06em !important;
            padding: 13px 16px !important;
            border: none !important;
            vertical-align: middle !important;
        }
        .reports-table tbody td {
            padding: 13px 16px !important;
            vertical-align: middle !important;
            font-size: 13.5px !important;
            color: #334155 !important;
            border-bottom: 1px solid #f1f5f9 !important;
        }
        .reports-table tbody tr:hover td {
            background-color: #f8fafc !important;
        }

        /* Brand Avatar */
        .brand-avatar {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
            color: #1e293b;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 14px;
            border: 1px solid #cbd5e1;
            flex-shrink: 0;
        }

        /* Benchmark Bar Card */
        .brand-benchmark-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 12px;
            transition: all 0.2s ease;
        }
        .brand-benchmark-card:hover {
            border-color: #cbd5e1;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
        }
        .benchmark-progress-bg {
            background: #f1f5f9;
            border-radius: 6px;
            height: 10px;
            overflow: hidden;
            position: relative;
        }
        .benchmark-progress-fill {
            height: 100%;
            border-radius: 6px;
            transition: width 0.6s ease;
        }

        /* Status Badges */
        .status-badge-rpt {
            padding: 5px 12px;
            border-radius: 50px;
            font-size: 12px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .status-dot-rpt {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            display: inline-block;
        }
        .bg-rpt-Available  { background-color:#eff6ff; color:#2563eb; border: 1px solid #bfdbfe; }
        .dot-rpt-Available { background-color:#2563eb; }
        .bg-rpt-Assigned   { background-color:#f0fdf4; color:#16a34a; border: 1px solid #bbf7d0; }
        .dot-rpt-Assigned  { background-color:#16a34a; }
        .bg-rpt-Reusable   { background-color:#f0fdfa; color:#0d9488; border: 1px solid #99f6e4; }
        .dot-rpt-Reusable  { background-color:#0d9488; }
        .bg-rpt-Claimable  { background-color:#fffbeb; color:#d97706; border: 1px solid #fde68a; }
        .dot-rpt-Claimable { background-color:#d97706; }
        .bg-rpt-Repairing  { background-color:#faf5ff; color:#9333ea; border: 1px solid #e9d5ff; }
        .dot-rpt-Repairing { background-color:#9333ea; }
        .bg-rpt-Scrap      { background-color:#fef2f2; color:#dc2626; border: 1px solid #fecaca; }
        .dot-rpt-Scrap     { background-color:#dc2626; }

        /* Empty & Loading States */
        .state-container {
            text-align: center;
            padding: 48px 24px;
        }
        .state-icon-box {
            width: 64px;
            height: 64px;
            border-radius: 16px;
            background: #f1f5f9;
            color: #64748b;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            margin-bottom: 16px;
        }
        .state-title {
            font-size: 16px;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 6px;
        }
        .state-desc {
            font-size: 13.5px;
            color: #64748b;
            max-width: 420px;
            margin: 0 auto;
        }
    </style>
@endpush

@section('content')
    <!-- Breadcrumb & Top Bar -->
    <div class="app-hero-header d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="javascript:void(0);">Fleet Management</a></li>
            <li class="breadcrumb-item"><a href="{{ route('parts-inventory.assign-page') }}">Truck Parts & Inventory</a></li>
            <li class="breadcrumb-item active" aria-current="page">Reports & Analytics</li>
        </ol>
        
        <div class="d-flex align-items-center gap-2">
            <button type="button" class="btn btn-outline-secondary btn-sm px-3 py-2 d-flex align-items-center gap-2" id="btnRefreshTab" title="Refresh current report">
                <i class="ri-refresh-line" id="refreshTabIcon"></i> Refresh Data
            </button>
            <a href="{{ route('parts-inventory.history-page') }}" class="btn btn-action-primary btn-sm px-3 py-2 d-flex align-items-center gap-2">
                <i class="ri-history-line"></i> Full Lifecycle Audit
            </a>
        </div>
    </div>

    <div class="app-body">
        <!-- Header Banner Section -->
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">
            <div>
                <div class="d-flex align-items-center gap-2 mb-1">
                    <span class="badge bg-warning-subtle text-warning-emphasis px-2 py-1 rounded-pill font-size-12 fw-semibold">
                        <i class="ri-bar-chart-2-fill me-1"></i> Analytics Engine
                    </span>
                </div>
                <h3 class="mb-1 fw-bold text-dark" style="letter-spacing: -0.02em;">Reports & Analytics Dashboard</h3>
                <p class="text-muted mb-0 font-size-14">Truck-wise lifecycle cost, brand performance benchmarking, and real-time inventory lifecycle metrics.</p>
            </div>
        </div>

        <!-- Modern Segmented Pill Navigation Tabs -->
        <div class="mb-4">
            <ul class="nav segmented-nav" id="reportTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="truck-wise-tab" data-bs-toggle="tab" data-bs-target="#truck-wise" type="button" role="tab">
                        <i class="ri-truck-line"></i> Truck-wise Report
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="brand-comparison-tab" data-bs-toggle="tab" data-bs-target="#brand-comparison" type="button" role="tab">
                        <i class="ri-scales-3-line"></i> Brand Comparison
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="inventory-reports-tab" data-bs-toggle="tab" data-bs-target="#inventory-reports" type="button" role="tab">
                        <i class="ri-pie-chart-2-line"></i> Inventory Distribution
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="part-history-tab" data-bs-toggle="tab" data-bs-target="#part-history" type="button" role="tab">
                        <i class="ri-history-line"></i> Part Lifecycle History
                    </button>
                </li>
            </ul>
        </div>

        <!-- Tab Contents -->
        <div class="tab-content" id="reportTabsContent">

            <!-- ============================================================ -->
            <!-- Tab 1: Truck-wise Report                                      -->
            <!-- ============================================================ -->
            <div class="tab-pane fade show active" id="truck-wise" role="tabpanel">
                <!-- Selector Toolbar -->
                <div class="filter-toolbar mb-4">
                    <div class="row align-items-center g-3">
                        <div class="col-md-5 col-lg-4">
                            <label class="form-label text-muted fw-semibold font-size-12 text-uppercase mb-1">
                                <i class="ri-truck-line text-primary me-1"></i> Select Vehicle to Inspect
                            </label>
                            <select id="truckSelect" class="form-select select2">
                                <option value="">Loading trucks...</option>
                            </select>
                        </div>
                        <div class="col-md-7 col-lg-8 d-flex align-items-center justify-content-md-end text-muted font-size-13 pt-md-3">
                            <span><i class="ri-information-line me-1 text-primary"></i> Choose a truck to inspect all active components, cost valuation, and odometer history.</span>
                        </div>
                    </div>
                </div>

                <div id="truckReportContent">
                    <div class="content-card">
                        <div class="state-container">
                            <div class="state-icon-box">
                                <i class="ri-truck-line"></i>
                            </div>
                            <div class="state-title">No Vehicle Selected</div>
                            <div class="state-desc">Select a truck from the dropdown above to view currently installed parts, investment valuation, and distance metrics.</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ============================================================ -->
            <!-- Tab 2: Brand Comparison                                       -->
            <!-- ============================================================ -->
            <div class="tab-pane fade" id="brand-comparison" role="tabpanel">
                <!-- Filter Toolbar -->
                <div class="filter-toolbar mb-4">
                    <div class="row align-items-center justify-content-between g-3">
                        <div class="col-md-5 col-lg-4">
                            <label class="form-label text-muted fw-semibold font-size-12 text-uppercase mb-1">
                                <i class="ri-filter-3-line text-primary me-1"></i> Filter by Category
                            </label>
                            <select id="categorySelect" class="form-select">
                                <option value="">All Categories (Fleet Wide)</option>
                            </select>
                        </div>
                        <div class="col-md-7 col-lg-7 d-flex flex-wrap align-items-center justify-content-md-end gap-2 pt-md-3">
                            <div class="badge bg-light text-secondary border px-3 py-2 font-size-13 fw-normal" id="brandQuickSummary">
                                <i class="ri-speed-up-line text-primary me-1"></i> Lower Cost per KM indicates superior durability & value
                            </div>
                        </div>
                    </div>
                </div>

                <div id="brandReportContent">
                    <div class="content-card">
                        <div class="state-container">
                            <div class="spinner-border text-primary" role="status" style="width: 2.2rem; height: 2.2rem;"></div>
                            <div class="state-title mt-3">Loading Brand Benchmarks...</div>
                            <div class="state-desc">Aggregating distance, lifecycle days, and repair expenditures by manufacturer.</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ============================================================ -->
            <!-- Tab 3: Inventory Reports                                      -->
            <!-- ============================================================ -->
            <div class="tab-pane fade" id="inventory-reports" role="tabpanel">
                <div id="inventoryReportContent">
                    <div class="content-card">
                        <div class="state-container">
                            <div class="spinner-border text-primary" role="status" style="width: 2.2rem; height: 2.2rem;"></div>
                            <div class="state-title mt-3">Loading Inventory Data...</div>
                            <div class="state-desc">Fetching real-time status breakdown across warehouse stock and assigned truck parts.</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ============================================================ -->
            <!-- Tab 4: Part History Report                                    -->
            <!-- ============================================================ -->
            <div class="tab-pane fade" id="part-history" role="tabpanel">
                <div id="partHistoryReportContent">
                    <div class="content-card">
                        <div class="state-container">
                            <div class="spinner-border text-primary" role="status" style="width: 2.2rem; height: 2.2rem;"></div>
                            <div class="state-title mt-3">Loading Parts Registry...</div>
                            <div class="state-desc">Retrieving active inventory items, barcodes, and assignment histories.</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@push('footer_script')
<script src="{{ asset('theme/assets/vendor/apex/apexcharts.min.js') }}"></script>
<script>
// ─── Route URLs ────────────────────────────────────────────────────────────────
const ROUTES = {
    trucks:      '{{ route("parts-inventory.reports.trucks") }}',
    categories:  '{{ route("parts-inventory.reports.categories") }}',
    truckWise:   '{{ route("parts-inventory.reports.truck-wise") }}',
    brand:       '{{ route("parts-inventory.reports.brand-comparison") }}',
    inventory:   '{{ route("parts-inventory.reports.inventory") }}',
    partHistory: '{{ route("parts-inventory.reports.part-history-list") }}',
    historyPage: '{{ route("parts-inventory.history-page") }}',
};

const STATUS_THEMES = {
    Available: { color: '#2563eb', bg: '#eff6ff', border: '#bfdbfe', icon: 'ri-checkbox-circle-line', label: 'Warehouse Ready' },
    Assigned:  { color: '#16a34a', bg: '#f0fdf4', border: '#bbf7d0', icon: 'ri-truck-line', label: 'Fitted on Vehicle' },
    Reusable:  { color: '#0d9488', bg: '#f0fdfa', border: '#99f6e4', icon: 'ri-restart-line', label: 'Inspected / Reusable' },
    Claimable: { color: '#d97706', bg: '#fffbeb', border: '#fde68a', icon: 'ri-shield-star-line', label: 'Warranty Claim' },
    Repairing: { color: '#9333ea', bg: '#faf5ff', border: '#e9d5ff', icon: 'ri-tools-line', label: 'Under Workshop Repair' },
    Scrap:     { color: '#dc2626', bg: '#fef2f2', border: '#fecaca', icon: 'ri-delete-bin-line', label: 'Decommissioned' },
};

let inventoryChart = null;
let allHistoryParts = [];

// ─── Init ──────────────────────────────────────────────────────────────────────
$(document).ready(function() {
    loadTrucks();
    loadCategories();

    // Activate tab from URL hash if present (e.g. #brand-comparison)
    const hash = window.location.hash;
    if (hash && $(`button[data-bs-target="${hash}"]`).length) {
        const tabEl = document.querySelector(`button[data-bs-target="${hash}"]`);
        const tabTrigger = new bootstrap.Tab(tabEl);
        tabTrigger.show();
    }

    // Tab change events via Bootstrap 5 shown event
    $('button[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
        const targetId = $(e.target).attr('data-bs-target');
        window.location.hash = targetId;
        if (targetId === '#brand-comparison') {
            loadBrandReport();
        } else if (targetId === '#inventory-reports') {
            loadInventoryReport();
        } else if (targetId === '#part-history') {
            loadPartHistoryReport();
        }
    });

    // Refresh Current Active Tab
    $('#btnRefreshTab').on('click', function() {
        const $icon = $('#refreshTabIcon');
        $icon.addClass('ri-spin');
        
        const activeTab = $('.segmented-nav .nav-link.active').attr('data-bs-target');
        if (activeTab === '#truck-wise') {
            const id = $('#truckSelect').val();
            if (id) loadTruckWise(id);
            else loadTrucks();
        } else if (activeTab === '#brand-comparison') {
            loadBrandReport();
        } else if (activeTab === '#inventory-reports') {
            loadInventoryReport();
        } else if (activeTab === '#part-history') {
            loadPartHistoryReport();
        }

        setTimeout(() => $icon.removeClass('ri-spin'), 600);
    });

    // Truck dropdown change
    $('#truckSelect').on('change', function() {
        const id = $(this).val();
        if (id) {
            loadTruckWise(id);
        } else {
            $('#truckReportContent').html(`
                <div class="content-card">
                    <div class="state-container">
                        <div class="state-icon-box"><i class="ri-truck-line"></i></div>
                        <div class="state-title">No Vehicle Selected</div>
                        <div class="state-desc">Select a truck from the dropdown above to view currently installed parts, investment valuation, and distance metrics.</div>
                    </div>
                </div>
            `);
        }
    });

    // Category dropdown change
    $('#categorySelect').on('change', function() {
        loadBrandReport();
    });
});

// ─── Load Trucks Dropdown ─────────────────────────────────────────────────────
function loadTrucks() {
    $.get(ROUTES.trucks, function(res) {
        if (res.success && res.trucks.length > 0) {
            let html = '<option value="">Select a vehicle to inspect...</option>';
            res.trucks.forEach(t => {
                html += `<option value="${t.id}">${t.label}</option>`;
            });
            $('#truckSelect').html(html).trigger('change.select2');
        } else {
            $('#truckSelect').html('<option value="">No trucks found</option>').trigger('change.select2');
        }
    }).fail(function() {
        $('#truckSelect').html('<option value="">Error loading trucks</option>').trigger('change.select2');
    });
}

// ─── Load Categories Dropdown ─────────────────────────────────────────────────
function loadCategories() {
    $.get(ROUTES.categories, function(res) {
        if (res.success) {
            let html = '<option value="">All Categories (Fleet Wide)</option>';
            res.categories.forEach(c => {
                html += `<option value="${c.id}">${c.category_name}</option>`;
            });
            $('#categorySelect').html(html);
        }
    });
}

// ─── Tab 1: Truck-wise Report ─────────────────────────────────────────────────
function loadTruckWise(vehicleId) {
    $('#truckReportContent').html(`
        <div class="content-card">
            <div class="state-container">
                <div class="spinner-border text-primary" role="status" style="width: 2.2rem; height: 2.2rem;"></div>
                <div class="state-title mt-3">Fetching Truck Data...</div>
                <div class="state-desc">Compiling assigned component records, active investments, and distance logs.</div>
            </div>
        </div>
    `);

    $.get(ROUTES.truckWise, { vehicle_id: vehicleId }, function(res) {
        if (!res.success) {
            $('#truckReportContent').html(`
                <div class="alert alert-danger d-flex align-items-center gap-2">
                    <i class="ri-error-warning-line"></i> Failed to retrieve truck details.
                </div>
            `);
            return;
        }

        let partsRows = '';
        if (res.parts && res.parts.length > 0) {
            res.parts.forEach((p, idx) => {
                partsRows += `
                <tr>
                    <td class="ps-3">
                        <div class="d-flex align-items-center gap-2">
                            <div class="brand-avatar" style="width: 32px; height: 32px; font-size: 12px; background: #f8fafc;">
                                #${idx + 1}
                            </div>
                            <div>
                                <div class="fw-bold text-dark">${p.item_name}</div>
                                <span class="badge bg-light text-secondary border font-size-11">${p.item_code}</span>
                            </div>
                        </div>
                    </td>
                    <td>
                        <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-2 py-1 font-size-12 fw-medium">
                            ${p.category}
                        </span>
                        ${p.position !== '—' ? `<span class="badge bg-secondary-subtle text-secondary px-2 py-1 font-size-12 ms-1">${p.position}</span>` : ''}
                    </td>
                    <td>
                        <span class="text-secondary font-size-13 d-inline-flex align-items-center gap-1">
                            <i class="ri-calendar-line text-muted"></i> ${p.assigned_since}
                        </span>
                    </td>
                    <td class="text-end pe-3">
                        <span class="fw-bold text-dark font-size-14">₹${p.effective_cost}</span>
                    </td>
                </tr>`;
            });
        } else {
            partsRows = `
            <tr>
                <td colspan="4" class="text-center py-5">
                    <div class="state-icon-box mb-2" style="width:48px;height:48px;font-size:24px;">
                        <i class="ri-archive-line"></i>
                    </div>
                    <div class="fw-bold text-dark">No Active Parts Installed</div>
                    <div class="text-muted font-size-13 mt-1">There are currently no active parts assigned to this vehicle.</div>
                </td>
            </tr>`;
        }

        $('#truckReportContent').html(`
            <!-- Top KPI Cards -->
            <div class="row g-3 mb-4">
                <div class="col-md-4 col-sm-6">
                    <div class="stat-card-modern">
                        <div>
                            <div class="stat-label">Active Parts Installed</div>
                            <div class="stat-val mt-1 text-primary">${res.parts_count}</div>
                            <div class="small text-muted mt-1"><i class="ri-check-line text-success"></i> Currently fitted on vehicle</div>
                        </div>
                        <div class="stat-icon" style="background:#eff6ff; color:#2563eb;">
                            <i class="ri-tools-line"></i>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="stat-card-modern">
                        <div>
                            <div class="stat-label">Total Investment Cost</div>
                            <div class="stat-val mt-1 text-success">₹${res.total_cost}</div>
                            <div class="small text-muted mt-1"><i class="ri-coin-line text-success"></i> Effective asset valuation</div>
                        </div>
                        <div class="stat-icon" style="background:#f0fdf4; color:#16a34a;">
                            <i class="ri-money-rupee-circle-line"></i>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-12">
                    <div class="stat-card-modern">
                        <div>
                            <div class="stat-label">Last Recorded Distance</div>
                            <div class="stat-val mt-1 text-indigo" style="color:#6366f1;">
                                ${res.odometer > 0 ? res.odometer + ' <span class="font-size-14 fw-normal text-muted">KM</span>' : '—'}
                            </div>
                            <div class="small text-muted mt-1"><i class="ri-speed-line text-primary"></i> Truck odometer milestone</div>
                        </div>
                        <div class="stat-icon" style="background:#eef2ff; color:#6366f1;">
                            <i class="ri-dashboard-3-line"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Installed Parts Table Card -->
            <div class="content-card">
                <div class="p-3 border-bottom d-flex flex-wrap align-items-center justify-content-between gap-2">
                    <div>
                        <h6 class="mb-0 fw-bold text-dark d-flex align-items-center gap-2">
                            <i class="ri-list-check-2 text-primary font-size-18"></i> Currently Fitted Components
                        </h6>
                    </div>
                    <span class="badge bg-secondary-subtle text-secondary px-2 py-1 font-size-12">
                        ${res.parts_count} ${res.parts_count === 1 ? 'Component' : 'Components'}
                    </span>
                </div>
                <div class="table-responsive">
                    <table class="table reports-table mb-0">
                        <thead>
                            <tr>
                                <th class="ps-3">PART / ITEM DETAILS</th>
                                <th>CATEGORY & POSITION</th>
                                <th>INSTALLED SINCE</th>
                                <th class="text-end pe-3">EFFECTIVE COST</th>
                            </tr>
                        </thead>
                        <tbody>${partsRows}</tbody>
                    </table>
                </div>
            </div>
        `);
    }).fail(function() {
        $('#truckReportContent').html(`
            <div class="alert alert-danger d-flex align-items-center gap-2">
                <i class="ri-error-warning-line"></i> Error connecting to server. Please try again.
            </div>
        `);
    });
}

// ─── Tab 2: Brand Comparison ──────────────────────────────────────────────────
function loadBrandReport() {
    const catId = $('#categorySelect').val();
    $('#brandReportContent').html(`
        <div class="content-card">
            <div class="state-container">
                <div class="spinner-border text-primary" role="status" style="width: 2.2rem; height: 2.2rem;"></div>
                <div class="state-title mt-3">Evaluating Brand Reliability...</div>
                <div class="state-desc">Aggregating distance run, lifespan, and maintenance expenditure per manufacturer.</div>
            </div>
        </div>
    `);

    $.get(ROUTES.brand, { category_id: catId }, function(res) {
        if (!res.success) {
            $('#brandReportContent').html(`
                <div class="alert alert-danger d-flex align-items-center gap-2">
                    <i class="ri-error-warning-line"></i> Failed to compile brand analytics.
                </div>
            `);
            return;
        }

        if (!res.brands || res.brands.length === 0) {
            $('#brandReportContent').html(`
                <div class="content-card">
                    <div class="state-container">
                        <div class="state-icon-box"><i class="ri-scales-3-line"></i></div>
                        <div class="state-title">No Brand Records Available</div>
                        <div class="state-desc">No parts found under this category. As parts are assigned and unassigned from vehicles, benchmark insights will populate here automatically.</div>
                    </div>
                </div>
            `);
            return;
        }

        // Metrics calculations
        const maxCost = Math.max(...res.brands.map(b => b.cost_per_km)) || 1;
        const totalPurchased = res.brands.reduce((acc, b) => acc + b.purchased, 0);
        const bestBrand = res.brands[0]; // sorted asc by cost_per_km in controller

        if (bestBrand) {
            $('#brandQuickSummary').html(`
                <i class="ri-award-line text-success me-1"></i> Top Value Brand: <strong class="text-dark">${bestBrand.brand}</strong> (₹${bestBrand.cost_per_km}/km · ${bestBrand.avg_life} avg life)
            `);
        }

        // Visual Benchmark Cards
        let benchmarkCards = '';
        res.brands.forEach((b, idx) => {
            const initial = b.brand ? b.brand.charAt(0).toUpperCase() : '?';
            const costVal = parseFloat(b.cost_per_km) || 0;
            
            // Percentage width for the progress bar
            let pct = 0;
            let barColor = 'linear-gradient(90deg, #10b981, #059669)'; // default green
            
            if (maxCost > 0 && costVal > 0) {
                pct = Math.min(100, Math.max(8, Math.round((costVal / maxCost) * 100)));
                if (pct > 60) {
                    barColor = 'linear-gradient(90deg, #f59e0b, #ef4444)';
                } else if (pct > 30) {
                    barColor = 'linear-gradient(90deg, #10b981, #f59e0b)';
                }
            } else {
                pct = 100; // full clean bar indicating optimal 0 repair cost
                barColor = 'linear-gradient(90deg, #10b981, #34d399)';
            }

            const rankBadge = idx === 0
                ? `<span class="badge bg-success-subtle text-success border border-success-subtle px-2 py-1 font-size-11 fw-semibold"><i class="ri-award-fill me-1"></i> #1 Best Value</span>`
                : `<span class="badge bg-light text-secondary border px-2 py-1 font-size-11">#${idx + 1} Rank</span>`;

            benchmarkCards += `
            <div class="brand-benchmark-card">
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-2">
                    <div class="d-flex align-items-center gap-2">
                        <div class="brand-avatar">${initial}</div>
                        <div>
                            <div class="d-flex align-items-center gap-2">
                                <span class="fw-bold text-dark font-size-15">${b.brand}</span>
                                ${rankBadge}
                            </div>
                            <div class="text-muted font-size-12 mt-0.5">
                                ${b.purchased} Total Units · ${b.installed} Active on Road · Avg Life: ${b.avg_life}
                            </div>
                        </div>
                    </div>

                    <div class="text-md-end">
                        ${costVal === 0 ? `
                            <span class="badge bg-success-subtle text-success border border-success-subtle px-3 py-2 font-size-13 fw-semibold">
                                <i class="ri-shield-check-line me-1"></i> ₹0.00 / km <span class="fw-normal text-muted font-size-11">(Zero Maintenance)</span>
                            </span>
                        ` : `
                            <span class="badge bg-light text-dark border px-3 py-2 font-size-13 fw-bold">
                                ₹${costVal.toFixed(2)} <span class="fw-normal text-muted font-size-11">/ km</span>
                            </span>
                        `}
                    </div>
                </div>

                <div class="d-flex align-items-center gap-3">
                    <div class="benchmark-progress-bg flex-grow-1">
                        <div class="benchmark-progress-fill" style="width:${pct}%; background:${barColor};"></div>
                    </div>
                    <div class="text-muted font-size-12 fw-medium text-nowrap" style="min-width: 140px; text-align: right;">
                        ${costVal === 0 ? 'Optimal Efficiency' : `₹${b.repair_cost} repair spend`}
                    </div>
                </div>
            </div>`;
        });

        // Table Rows
        let tableRows = '';
        res.brands.forEach((b, idx) => {
            const initial = b.brand ? b.brand.charAt(0).toUpperCase() : '?';
            
            // Scrap styling
            let scrapBadge = '';
            if (b.scrap_pct <= 10) {
                scrapBadge = `<span class="badge bg-success-subtle text-success border border-success-subtle px-2 py-1">${b.scrap_pct}%</span>`;
            } else if (b.scrap_pct <= 25) {
                scrapBadge = `<span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle px-2 py-1">${b.scrap_pct}%</span>`;
            } else {
                scrapBadge = `<span class="badge bg-danger-subtle text-danger border border-danger-subtle px-2 py-1">${b.scrap_pct}%</span>`;
            }

            tableRows += `
            <tr>
                <td class="ps-3">
                    <div class="d-flex align-items-center gap-2">
                        <div class="brand-avatar">${initial}</div>
                        <div>
                            <div class="fw-bold text-dark">${b.brand}</div>
                            <div class="font-size-11 text-muted">Manufacturer #${idx + 1}</div>
                        </div>
                    </div>
                </td>
                <td class="text-center">
                    <span class="badge bg-light text-dark border font-size-12 px-2 py-1 fw-semibold">${b.purchased}</span>
                </td>
                <td class="text-center">
                    ${b.installed > 0 
                        ? `<span class="badge bg-primary-subtle text-primary border border-primary-subtle font-size-12 px-2 py-1 fw-semibold">${b.installed}</span>`
                        : `<span class="text-muted font-size-13">0</span>`
                    }
                </td>
                <td class="text-center">
                    <span class="badge bg-light text-secondary border font-size-12 px-2 py-1 d-inline-flex align-items-center gap-1">
                        <i class="ri-time-line text-muted"></i> ${b.avg_life}
                    </span>
                </td>
                <td class="text-end">
                    <span class="fw-semibold text-dark font-size-13">${b.avg_km}</span> <span class="text-muted font-size-11">KM</span>
                </td>
                <td class="text-end">
                    <span class="fw-bold ${parseFloat(b.repair_cost) > 0 ? 'text-danger' : 'text-success'}">
                        ₹${b.repair_cost}
                    </span>
                </td>
                <td class="text-end pe-3">
                    ${scrapBadge}
                </td>
            </tr>`;
        });

        $('#brandReportContent').html(`
            <!-- Top Summary Cards -->
            <div class="row g-3 mb-4">
                <div class="col-md-4 col-sm-6">
                    <div class="stat-card-modern">
                        <div>
                            <div class="stat-label">Brands Evaluated</div>
                            <div class="stat-val mt-1 text-primary">${res.brands.length}</div>
                            <div class="small text-muted mt-1"><i class="ri-bar-chart-fill text-primary"></i> In active tracking</div>
                        </div>
                        <div class="stat-icon" style="background:#eff6ff; color:#2563eb;">
                            <i class="ri-building-line"></i>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="stat-card-modern">
                        <div>
                            <div class="stat-label">Total Fleet Components</div>
                            <div class="stat-val mt-1 text-indigo" style="color:#6366f1;">${totalPurchased}</div>
                            <div class="small text-muted mt-1"><i class="ri-stack-line text-indigo"></i> Total parts purchased</div>
                        </div>
                        <div class="stat-icon" style="background:#eef2ff; color:#6366f1;">
                            <i class="ri-archive-line"></i>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-12">
                    <div class="stat-card-modern">
                        <div>
                            <div class="stat-label">Top Efficient Brand</div>
                            <div class="stat-val mt-1 text-success font-size-20 text-truncate" style="max-width: 180px;">
                                ${bestBrand ? bestBrand.brand : '—'}
                            </div>
                            <div class="small text-muted mt-1">
                                <i class="ri-award-line text-success"></i> ${bestBrand ? '₹' + bestBrand.cost_per_km + ' per KM' : 'Optimal'}
                            </div>
                        </div>
                        <div class="stat-icon" style="background:#f0fdf4; color:#16a34a;">
                            <i class="ri-trophy-line"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Visual Benchmark Progress Bars Card -->
            <div class="content-card mb-4">
                <div class="p-3 border-bottom d-flex flex-wrap align-items-center justify-content-between gap-2">
                    <div>
                        <h6 class="mb-1 fw-bold text-dark d-flex align-items-center gap-2">
                            <i class="ri-speed-up-line text-warning font-size-18"></i> Repair Cost per KM Benchmark
                        </h6>
                        <div class="text-muted font-size-12">
                            Measures total maintenance and repair expenditure relative to distance run (Lower cost indicates superior brand ROI).
                        </div>
                    </div>
                </div>
                <div class="p-3">
                    ${benchmarkCards}
                </div>
            </div>

            <!-- Benchmark Matrix Data Table Card -->
            <div class="content-card">
                <div class="p-3 border-bottom d-flex flex-wrap align-items-center justify-content-between gap-2">
                    <div>
                        <h6 class="mb-0 fw-bold text-dark d-flex align-items-center gap-2">
                            <i class="ri-table-line text-primary font-size-18"></i> Comprehensive Brand Performance Matrix
                        </h6>
                    </div>
                    <span class="badge bg-secondary-subtle text-secondary px-2 py-1 font-size-12">
                        ${res.brands.length} ${res.brands.length === 1 ? 'Manufacturer' : 'Manufacturers'}
                    </span>
                </div>
                <div class="table-responsive">
                    <table class="table reports-table mb-0">
                        <thead>
                            <tr>
                                <th class="ps-3">BRAND / MANUFACTURER</th>
                                <th class="text-center">PURCHASED</th>
                                <th class="text-center">ACTIVE FITTED</th>
                                <th class="text-center">AVG LIFESPAN</th>
                                <th class="text-end">AVG RUN (KM)</th>
                                <th class="text-end">REPAIR EXPENSES</th>
                                <th class="text-end pe-3">SCRAP RATE</th>
                            </tr>
                        </thead>
                        <tbody>${tableRows}</tbody>
                    </table>
                </div>
            </div>
        `);
    }).fail(function() {
        $('#brandReportContent').html(`
            <div class="alert alert-danger d-flex align-items-center gap-2">
                <i class="ri-error-warning-line"></i> Error connecting to server. Please try again.
            </div>
        `);
    });
}

// ─── Tab 3: Inventory Report ──────────────────────────────────────────────────
function loadInventoryReport() {
    $('#inventoryReportContent').html(`
        <div class="content-card">
            <div class="state-container">
                <div class="spinner-border text-primary" role="status" style="width: 2.2rem; height: 2.2rem;"></div>
                <div class="state-title mt-3">Compiling Warehouse Distribution...</div>
                <div class="state-desc">Calculating real-time status quantities across all registered inventory assets.</div>
            </div>
        </div>
    `);

    $.get(ROUTES.inventory, function(res) {
        if (!res.success) {
            $('#inventoryReportContent').html(`
                <div class="alert alert-danger d-flex align-items-center gap-2">
                    <i class="ri-error-warning-line"></i> Failed to retrieve inventory statistics.
                </div>
            `);
            return;
        }

        if (inventoryChart) {
            inventoryChart.destroy();
            inventoryChart = null;
        }

        const statuses = res.statuses;
        const total    = res.total || 0;
        const labels   = statuses.map(s => s.status);
        const data     = statuses.map(s => s.count);
        const colors   = labels.map(l => (STATUS_THEMES[l] ? STATUS_THEMES[l].color : '#94a3b8'));

        // Interactive Status Cards Grid
        let cardsHtml = '';
        statuses.forEach(s => {
            const theme = STATUS_THEMES[s.status] || { color: '#64748b', bg: '#f1f5f9', icon: 'ri-checkbox-blank-circle-line', label: s.status };
            const pct = total > 0 ? Math.round((s.count / total) * 100) : 0;

            cardsHtml += `
            <div class="col-xl-4 col-md-6">
                <div class="stat-card-modern" style="border-left: 4px solid ${theme.color};">
                    <div>
                        <div class="stat-label d-flex align-items-center gap-1.5" style="color: ${theme.color};">
                            <span class="status-dot-rpt" style="background:${theme.color};"></span>
                            ${s.status} Inventory
                        </div>
                        <div class="stat-val mt-1">${s.count}</div>
                        <div class="small text-muted mt-1">
                            <span class="fw-semibold text-dark">${pct}%</span> of total stock · ${theme.label}
                        </div>
                    </div>
                    <div class="stat-icon" style="background:${theme.bg}; color:${theme.color};">
                        <i class="${theme.icon}"></i>
                    </div>
                </div>
            </div>`;
        });

        // Legend Items
        let legendHtml = '';
        statuses.forEach(s => {
            const theme = STATUS_THEMES[s.status] || { color: '#64748b', label: s.status };
            const pct = total > 0 ? Math.round((s.count / total) * 100) : 0;
            legendHtml += `
            <div class="col-sm-6 mb-3">
                <div class="d-flex align-items-center justify-content-between p-2 rounded border bg-light">
                    <div class="d-flex align-items-center gap-2">
                        <span style="width: 12px; height: 12px; border-radius: 4px; background:${theme.color}; display:inline-block;"></span>
                        <span class="font-size-13 fw-medium text-dark">${s.status}</span>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <span class="fw-bold font-size-14 text-dark">${s.count}</span>
                        <span class="badge bg-white text-secondary border font-size-11">${pct}%</span>
                    </div>
                </div>
            </div>`;
        });

        $('#inventoryReportContent').html(`
            <!-- Donut Chart & Breakdown Card -->
            <div class="content-card mb-4">
                <div class="p-3 border-bottom">
                    <h6 class="mb-0 fw-bold text-dark d-flex align-items-center gap-2">
                        <i class="ri-pie-chart-2-line text-primary font-size-18"></i> Warehouse & Vehicle Part Status Distribution
                    </h6>
                </div>
                <div class="p-4">
                    <div class="row align-items-center g-4">
                        <div class="col-lg-5 col-md-6 text-center">
                            <div style="width: 250px; margin: 0 auto;">
                                <div id="inventoryDonut"></div>
                            </div>
                        </div>
                        <div class="col-lg-7 col-md-6">
                            <div class="row g-2">
                                ${legendHtml}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Status Metric Cards Grid -->
            <div class="row g-3">
                ${cardsHtml}
            </div>
        `);

        // Render Theme's ApexCharts Donut
        const chartElem = document.querySelector('#inventoryDonut');
        if (chartElem && typeof ApexCharts !== 'undefined') {
            const chartOptions = {
                chart: {
                    type: 'donut',
                    height: 250,
                    toolbar: { show: false }
                },
                series: data,
                labels: labels,
                colors: colors,
                stroke: {
                    width: 2,
                    colors: ['#ffffff']
                },
                legend: {
                    show: false
                },
                dataLabels: {
                    enabled: false
                },
                plotOptions: {
                    pie: {
                        donut: {
                            size: '76%',
                            labels: {
                                show: true,
                                name: {
                                    show: true,
                                    fontSize: '12px',
                                    fontWeight: 600,
                                    color: '#64748b',
                                    offsetY: -4
                                },
                                value: {
                                    show: true,
                                    fontSize: '22px',
                                    fontWeight: 800,
                                    color: '#0f172a',
                                    offsetY: 4,
                                    formatter: function(val) {
                                        return val;
                                    }
                                },
                                total: {
                                    show: true,
                                    label: 'Total Parts',
                                    fontSize: '12px',
                                    fontWeight: 600,
                                    color: '#64748b',
                                    formatter: function(w) {
                                        return total;
                                    }
                                }
                            }
                        }
                    }
                },
                tooltip: {
                    y: {
                        formatter: function(val) {
                            const pct = total > 0 ? Math.round((val / total) * 100) : 0;
                            return `${val} units (${pct}%)`;
                        }
                    }
                }
            };
            inventoryChart = new ApexCharts(chartElem, chartOptions);
            inventoryChart.render();
        }
    }).fail(function() {
        $('#inventoryReportContent').html(`
            <div class="alert alert-danger d-flex align-items-center gap-2">
                <i class="ri-error-warning-line"></i> Error connecting to server. Please try again.
            </div>
        `);
    });
}

// ─── Tab 4: Part History List ─────────────────────────────────────────────────
function loadPartHistoryReport() {
    $('#partHistoryReportContent').html(`
        <div class="content-card">
            <div class="state-container">
                <div class="spinner-border text-primary" role="status" style="width: 2.2rem; height: 2.2rem;"></div>
                <div class="state-title mt-3">Loading Parts Registry...</div>
                <div class="state-desc">Retrieving active inventory items, barcodes, and assignment histories.</div>
            </div>
        </div>
    `);

    $.get(ROUTES.partHistory, function(res) {
        if (!res.success) {
            $('#partHistoryReportContent').html(`
                <div class="alert alert-danger d-flex align-items-center gap-2">
                    <i class="ri-error-warning-line"></i> Failed to retrieve parts list.
                </div>
            `);
            return;
        }

        allHistoryParts = res.parts || [];

        if (allHistoryParts.length === 0) {
            $('#partHistoryReportContent').html(`
                <div class="content-card">
                    <div class="state-container">
                        <div class="state-icon-box"><i class="ri-history-line"></i></div>
                        <div class="state-title">No Parts Registered</div>
                        <div class="state-desc">No parts found in the inventory registry. Once stock is inwarded and parts are registered, they will appear here.</div>
                    </div>
                </div>
            `);
            return;
        }

        renderPartHistoryTable(allHistoryParts);
    }).fail(function() {
        $('#partHistoryReportContent').html(`
            <div class="alert alert-danger d-flex align-items-center gap-2">
                <i class="ri-error-warning-line"></i> Error connecting to server. Please try again.
            </div>
        `);
    });
}

function renderPartHistoryTable(parts) {
    let rows = '';
    parts.forEach(p => {
        const bg  = `bg-rpt-${p.status}`;
        const dot = `dot-rpt-${p.status}`;

        rows += `
        <tr>
            <td class="ps-3">
                <div class="fw-bold text-dark font-size-14">${p.name}</div>
                <span class="badge bg-light text-secondary border font-size-11">${p.code}</span>
            </td>
            <td>
                <span class="badge bg-light text-dark border px-2 py-1 font-size-12">${p.category}</span>
            </td>
            <td>
                <span class="fw-semibold text-secondary font-size-13">${p.brand}</span>
            </td>
            <td>
                <span class="status-badge-rpt ${bg}">
                    <span class="status-dot-rpt ${dot}"></span>${p.status}
                </span>
            </td>
            <td class="text-end pe-3">
                <a href="${ROUTES.historyPage}?part_id=${p.id}" class="btn btn-sm btn-outline-secondary px-3 py-1 font-size-12 d-inline-flex align-items-center gap-1">
                    <span>Audit Trail</span> <i class="ri-arrow-right-line"></i>
                </a>
            </td>
        </tr>`;
    });

    $('#partHistoryReportContent').html(`
        <div class="filter-toolbar mb-4">
            <div class="row align-items-center justify-content-between g-3">
                <div class="col-md-6 col-lg-5">
                    <div class="input-group">
                        <span class="input-group-text bg-light border-end-0 text-muted"><i class="ri-search-line"></i></span>
                        <input type="text" id="partSearchInput" class="form-control border-start-0" placeholder="Search by item name, serial code, category, brand...">
                    </div>
                </div>
                <div class="col-md-6 col-lg-5 text-md-end">
                    <span class="badge bg-light text-secondary border px-3 py-2 font-size-12">
                        Total Registered: <strong class="text-dark">${parts.length}</strong> items
                    </span>
                </div>
            </div>
        </div>

        <div class="content-card">
            <div class="p-3 border-bottom d-flex align-items-center justify-content-between">
                <h6 class="mb-0 fw-bold text-dark d-flex align-items-center gap-2">
                    <i class="ri-history-line text-primary font-size-18"></i> Individual Part Lifecycle Registry
                </h6>
            </div>
            <div class="table-responsive">
                <table class="table reports-table mb-0">
                    <thead>
                        <tr>
                            <th class="ps-3">PART / ITEM DETAILS</th>
                            <th>CATEGORY</th>
                            <th>BRAND</th>
                            <th>STATUS</th>
                            <th class="text-end pe-3">LIFECYCLE AUDIT</th>
                        </tr>
                    </thead>
                    <tbody id="partHistoryTbody">${rows}</tbody>
                </table>
            </div>
        </div>
    `);

    // Live search filter on part history
    $('#partSearchInput').on('keyup', function() {
        const query = $(this).val().toLowerCase().trim();
        if (!query) {
            renderPartHistoryRows(allHistoryParts);
            return;
        }
        const filtered = allHistoryParts.filter(p => 
            (p.name && p.name.toLowerCase().includes(query)) ||
            (p.code && p.code.toLowerCase().includes(query)) ||
            (p.category && p.category.toLowerCase().includes(query)) ||
            (p.brand && p.brand.toLowerCase().includes(query)) ||
            (p.status && p.status.toLowerCase().includes(query))
        );
        renderPartHistoryRows(filtered);
    });
}

function renderPartHistoryRows(parts) {
    if (!parts || parts.length === 0) {
        $('#partHistoryTbody').html(`
            <tr>
                <td colspan="5" class="text-center py-5">
                    <div class="state-icon-box mb-2" style="width:48px;height:48px;font-size:24px;">
                        <i class="ri-search-line"></i>
                    </div>
                    <div class="fw-bold text-dark">No Matching Parts Found</div>
                    <div class="text-muted font-size-13 mt-1">Try adjusting your search query.</div>
                </td>
            </tr>
        `);
        return;
    }

    let rows = '';
    parts.forEach(p => {
        const bg  = `bg-rpt-${p.status}`;
        const dot = `dot-rpt-${p.status}`;

        rows += `
        <tr>
            <td class="ps-3">
                <div class="fw-bold text-dark font-size-14">${p.name}</div>
                <span class="badge bg-light text-secondary border font-size-11">${p.code}</span>
            </td>
            <td>
                <span class="badge bg-light text-dark border px-2 py-1 font-size-12">${p.category}</span>
            </td>
            <td>
                <span class="fw-semibold text-secondary font-size-13">${p.brand}</span>
            </td>
            <td>
                <span class="status-badge-rpt ${bg}">
                    <span class="status-dot-rpt ${dot}"></span>${p.status}
                </span>
            </td>
            <td class="text-end pe-3">
                <a href="${ROUTES.historyPage}?part_id=${p.id}" class="btn btn-sm btn-outline-secondary px-3 py-1 font-size-12 d-inline-flex align-items-center gap-1">
                    <span>Audit Trail</span> <i class="ri-arrow-right-line"></i>
                </a>
            </td>
        </tr>`;
    });
    $('#partHistoryTbody').html(rows);
}
</script>
@endpush