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

@push('header_script')
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .nav-tabs .nav-link { color: #6c757d; font-weight: 500; border: none; border-bottom: 2px solid transparent; padding: 1rem 1.5rem; }
        .nav-tabs .nav-link:hover { border-color: transparent; color: #1B2A4A; }
        .nav-tabs .nav-link.active { color: #1B2A4A; border-bottom: 2px solid #1B2A4A; background: none; }
        .table-custom th { font-weight: 600; color: #6c757d; font-size: 12px; text-transform: uppercase; border-bottom: 1px solid #e9ecef; }
        .table-custom td { vertical-align: middle; border-bottom: 1px solid #f8f9fa; }
        .metric-card { background: #fff; border: 1px solid #e9ecef; border-radius: 6px; padding: 1.25rem; }
        .metric-title { font-size: 12px; color: #6c757d; margin-bottom: 0.5rem; }
        .metric-value { font-size: 20px; font-weight: 600; color: #1B2A4A; margin: 0; }
        .chart-legend-item { display: flex; align-items: center; margin-bottom: 8px; font-size: 14px; }
        .chart-legend-color { width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; flex-shrink:0; }
        .status-badge-rpt { padding: 4px 10px; border-radius: 50px; font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; }
        .status-dot-rpt { width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; }
        .progress-bg { background-color: #f1f5f9; border-radius: 4px; height: 16px; overflow: hidden; display: flex; }
        .progress-bar-custom { background-color: #eab308; border-radius: 4px; transition: width 0.5s; }
        .loading-overlay { display: flex; align-items: center; justify-content: center; padding: 40px; color: #94a3b8; }
        /* Status colors */
        .bg-rpt-Available  { background-color:#f0f7ff; color:#007bff; }
        .dot-rpt-Available { background-color:#007bff; }
        .bg-rpt-Assigned   { background-color:#eafaf1; color:#28a745; }
        .dot-rpt-Assigned  { background-color:#28a745; }
        .bg-rpt-Reusable   { background-color:#e8faf8; color:#20c997; }
        .dot-rpt-Reusable  { background-color:#20c997; }
        .bg-rpt-Claimable  { background-color:#fff8e6; color:#ffc107; }
        .dot-rpt-Claimable { background-color:#ffc107; }
        .bg-rpt-Repairing  { background-color:#f4f0ff; color:#6f42c1; }
        .dot-rpt-Repairing { background-color:#6f42c1; }
        .bg-rpt-Scrap      { background-color:#ffeef0; color:#dc3545; }
        .dot-rpt-Scrap     { background-color:#dc3545; }
    </style>
@endpush

@section('content')
    <div class="app-body pt-4">
        <div class="mb-4">
            <h3 class="mb-1 fw-bold text-dark">Reports Dashboard</h3>
            <p class="text-muted">Truck-wise cost, brand performance, and inventory status in one place.</p>
        </div>

        <!-- Nav Tabs -->
        <ul class="nav nav-tabs mb-4 border-bottom" 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">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">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">Inventory Reports</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">Part History Report</button>
            </li>
        </ul>

        <div class="tab-content" id="reportTabsContent">

            <!-- ============================================================ -->
            <!-- Tab 1: Truck-wise Report                                      -->
            <!-- ============================================================ -->
            <div class="tab-pane fade show active" id="truck-wise" role="tabpanel">
                <div class="mb-4" style="max-width:420px;">
                    <label class="text-muted font-size-12 mb-1">Select Truck</label>
                    <select id="truckSelect" class="form-select">
                        <option value="">Loading trucks...</option>
                    </select>
                </div>

                <div id="truckReportContent">
                    <div class="loading-overlay"><i class="ri-truck-line me-2"></i> Select a truck to view report</div>
                </div>
            </div>

            <!-- ============================================================ -->
            <!-- Tab 2: Brand Comparison                                       -->
            <!-- ============================================================ -->
            <div class="tab-pane fade" id="brand-comparison" role="tabpanel">
                <div class="mb-4" style="max-width:300px;">
                    <label class="text-muted font-size-12 mb-1">Category</label>
                    <select id="categorySelect" class="form-select">
                        <option value="">All Categories</option>
                    </select>
                </div>
                <div id="brandReportContent">
                    <div class="loading-overlay"><i class="ri-loader-4-line me-2"></i> Loading brand data...</div>
                </div>
            </div>

            <!-- ============================================================ -->
            <!-- Tab 3: Inventory Reports                                      -->
            <!-- ============================================================ -->
            <div class="tab-pane fade" id="inventory-reports" role="tabpanel">
                <div id="inventoryReportContent">
                    <div class="loading-overlay"><i class="ri-loader-4-line me-2"></i> Loading inventory data...</div>
                </div>
            </div>

            <!-- ============================================================ -->
            <!-- Tab 4: Part History Report                                    -->
            <!-- ============================================================ -->
            <div class="tab-pane fade" id="part-history" role="tabpanel">
                <div id="partHistoryReportContent">
                    <div class="loading-overlay"><i class="ri-loader-4-line me-2"></i> Loading parts...</div>
                </div>
            </div>

        </div>
    </div>
@endsection

@push('footer_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_COLORS = {
    Available: '#007bff', Assigned: '#28a745', Reusable: '#20c997',
    Claimable: '#ffc107', Repairing: '#6f42c1', Scrap: '#dc3545',
};

let inventoryChart = null;

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

    // Tab click → load that tab's data
    $('#brand-comparison-tab').on('click', function() { loadBrandReport(); });
    $('#inventory-reports-tab').on('click', function() { loadInventoryReport(); });
    $('#part-history-tab').on('click', function() { loadPartHistoryReport(); });

    // Truck dropdown change
    $('#truckSelect').on('change', function() {
        const id = $(this).val();
        if (id) loadTruckWise(id);
        else $('#truckReportContent').html('<div class="loading-overlay"><i class="ri-truck-line me-2"></i> Select a truck to view report</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 truck...</option>';
            res.trucks.forEach(t => html += `<option value="${t.id}">${t.label}</option>`);
            $('#truckSelect').html(html);
        } else {
            $('#truckSelect').html('<option value="">No trucks found</option>');
        }
    }).fail(function() {
        $('#truckSelect').html('<option value="">Error loading trucks</option>');
    });
}

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

// ─── Tab 1: Truck-wise ───────────────────────────────────────────────────────
function loadTruckWise(vehicleId) {
    $('#truckReportContent').html('<div class="loading-overlay"><div class="spinner-border spinner-border-sm me-2" role="status"></div> Loading...</div>');
    $.get(ROUTES.truckWise, { vehicle_id: vehicleId }, function(res) {
        if (!res.success) { $('#truckReportContent').html('<div class="alert alert-danger">Failed to load data.</div>'); return; }

        let partsRows = '';
        if (res.parts && res.parts.length > 0) {
            res.parts.forEach(p => {
                partsRows += `<tr>
                    <td class="ps-3">
                        <div class="fw-bold text-dark">${p.item_name}</div>
                        <div class="text-muted font-size-12">${p.item_code}</div>
                    </td>
                    <td>${p.category}${p.position !== '—' ? ' · ' + p.position : ''}</td>
                    <td>${p.assigned_since}</td>
                    <td class="text-end pe-3">₹${p.effective_cost}</td>
                </tr>`;
            });
        } else {
            partsRows = `<tr><td colspan="4" class="text-center text-muted py-4">No active parts installed on this truck.</td></tr>`;
        }

        $('#truckReportContent').html(`
            <div class="row mb-4">
                <div class="col-md-4 mb-3">
                    <div class="metric-card"><div class="metric-title">Parts Currently Installed</div><div class="metric-value">${res.parts_count}</div></div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="metric-card"><div class="metric-title">Total Parts Cost</div><div class="metric-value">₹${res.total_cost}</div></div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="metric-card"><div class="metric-title">Last Recorded KM</div><div class="metric-value">${res.odometer > 0 ? res.odometer + ' km' : '—'}</div></div>
                </div>
            </div>
            <div class="card border border-light shadow-sm">
                <div class="card-body p-0">
                    <h6 class="p-3 mb-0 fw-bold border-bottom">Currently Installed Parts</h6>
                    <div class="table-responsive">
                        <table class="table table-hover table-custom mb-0">
                            <thead class="bg-light">
                                <tr>
                                    <th class="ps-3">ITEM</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>
            </div>
        `);
    }).fail(function() {
        $('#truckReportContent').html('<div class="alert alert-danger">Error fetching truck data.</div>');
    });
}

// ─── Tab 2: Brand Comparison ──────────────────────────────────────────────────
function loadBrandReport() {
    const catId = $('#categorySelect').val();
    $('#brandReportContent').html('<div class="loading-overlay"><div class="spinner-border spinner-border-sm me-2" role="status"></div> Loading brands...</div>');
    $.get(ROUTES.brand, { category_id: catId }, function(res) {
        if (!res.success) { $('#brandReportContent').html('<div class="alert alert-danger">Failed to load.</div>'); return; }

        if (!res.brands || res.brands.length === 0) {
            $('#brandReportContent').html('<div class="loading-overlay text-muted">No brand data available yet. Assign and unassign parts to see comparison.</div>');
            return;
        }

        // Find max costPerKm for bar scaling
        const maxCost = Math.max(...res.brands.map(b => b.cost_per_km)) || 1;

        let bars = '';
        res.brands.forEach(b => {
            const pct = maxCost > 0 ? Math.round((b.cost_per_km / maxCost) * 100) : 0;
            bars += `<div class="d-flex align-items-center mb-3">
                <div style="width:90px;" class="fw-bold text-dark">${b.brand}</div>
                <div class="flex-grow-1 mx-3">
                    <div class="progress-bg w-100">
                        <div class="progress-bar-custom" style="width:${pct}%; min-width:4px;"></div>
                    </div>
                </div>
                <div style="width:60px;" class="text-end fw-bold">₹${b.cost_per_km}</div>
            </div>`;
        });

        let tableRows = '';
        res.brands.forEach(b => {
            tableRows += `<tr>
                <td class="fw-bold text-dark ps-3">${b.brand}</td>
                <td class="text-center">${b.purchased}</td>
                <td class="text-center">${b.installed}</td>
                <td class="text-center">${b.avg_life}</td>
                <td class="text-end">${b.avg_km}</td>
                <td class="text-end pe-3">${b.repair_cost !== undefined ? '₹' + b.repair_cost : '—'}</td>
                <td class="text-end pe-3">${b.scrap_pct}%</td>
            </tr>`;
        });

        $('#brandReportContent').html(`
            <div class="card border border-light shadow-sm mb-4">
                <div class="card-body">
                    <h6 class="fw-bold mb-4">Repair Cost per KM by Brand <small class="text-muted fw-normal">(lower is better)</small></h6>
                    ${bars}
                </div>
            </div>
            <div class="card border border-light shadow-sm">
                <div class="table-responsive">
                    <table class="table table-hover table-custom mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th class="ps-3">BRAND</th>
                                <th class="text-center">PURCHASED</th>
                                <th class="text-center">ACTIVE</th>
                                <th class="text-center">AVG LIFE</th>
                                <th class="text-end">AVG KM</th>
                                <th class="text-end">REPAIR COST</th>
                                <th class="text-end pe-3">SCRAP %</th>
                            </tr>
                        </thead>
                        <tbody>${tableRows}</tbody>
                    </table>
                </div>
            </div>
        `);
    }).fail(function() {
        $('#brandReportContent').html('<div class="alert alert-danger">Error fetching brand data.</div>');
    });
}

// ─── Tab 3: Inventory Report ──────────────────────────────────────────────────
function loadInventoryReport() {
    $.get(ROUTES.inventory, function(res) {
        if (!res.success) { $('#inventoryReportContent').html('<div class="alert alert-danger">Failed to load.</div>'); return; }

        // Destroy existing chart
        if (inventoryChart) { inventoryChart.destroy(); inventoryChart = null; }

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

        let legendHtml = '';
        statuses.forEach(s => {
            legendHtml += `<div class="col-sm-6 mb-2">
                <div class="chart-legend-item">
                    <div class="chart-legend-color" style="background:${STATUS_COLORS[s.status] || '#94a3b8'}"></div>
                    <span class="text-muted me-auto">${s.status}</span>
                    <span class="fw-bold ms-2">${s.count}</span>
                </div>
            </div>`;
        });

        let cardsHtml = '';
        statuses.forEach(s => {
            cardsHtml += `<div class="col-md-4 mb-3">
                <div class="metric-card">
                    <div class="metric-title d-flex align-items-center gap-2">
                        <div style="width:8px;height:8px;border-radius:50%;background:${STATUS_COLORS[s.status] || '#94a3b8'}"></div>
                        ${s.status} Inventory
                    </div>
                    <div class="metric-value">${s.count}</div>
                </div>
            </div>`;
        });

        $('#inventoryReportContent').html(`
            <div class="card border border-light shadow-sm mb-4">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-4 text-center">
                            <div style="position:relative;width:200px;height:200px;margin:0 auto;">
                                <canvas id="inventoryDonut"></canvas>
                                <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;">
                                    <div style="font-size:22px;font-weight:700;color:#1B2A4A;">${total}</div>
                                    <div class="text-muted font-size-12">Total Parts</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="row">${legendHtml}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">${cardsHtml}</div>
        `);

        // Draw chart
        const ctx = document.getElementById('inventoryDonut').getContext('2d');
        inventoryChart = new Chart(ctx, {
            type: 'doughnut',
            data: { labels: labels, datasets: [{ data: data, backgroundColor: colors, borderWidth: 0, cutout: '75%' }] },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }
        });
    }).fail(function() {
        $('#inventoryReportContent').html('<div class="alert alert-danger">Error fetching inventory data.</div>');
    });
}

// ─── Tab 4: Part History List ─────────────────────────────────────────────────
function loadPartHistoryReport() {
    $('#partHistoryReportContent').html('<div class="loading-overlay"><div class="spinner-border spinner-border-sm me-2" role="status"></div> Loading parts...</div>');
    $.get(ROUTES.partHistory, function(res) {
        if (!res.success) { $('#partHistoryReportContent').html('<div class="alert alert-danger">Failed to load.</div>'); return; }

        if (!res.parts || res.parts.length === 0) {
            $('#partHistoryReportContent').html('<div class="loading-overlay text-muted">No parts found. Assign a part to generate lifecycle data.</div>');
            return;
        }

        let rows = '';
        res.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">${p.name}</div>
                    <div class="text-muted font-size-12">${p.code}</div>
                </td>
                <td class="text-muted">${p.category}</td>
                <td class="text-muted">${p.brand}</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="text-decoration-none text-muted font-size-12">View Lifecycle &rsaquo;</a>
                </td>
            </tr>`;
        });

        $('#partHistoryReportContent').html(`
            <div class="card border border-light shadow-sm">
                <div class="table-responsive">
                    <table class="table table-hover table-custom mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th class="ps-3">ITEM</th>
                                <th>CATEGORY</th>
                                <th>BRAND</th>
                                <th>STATUS</th>
                                <th class="text-end pe-3">ACTION</th>
                            </tr>
                        </thead>
                        <tbody>${rows}</tbody>
                    </table>
                </div>
            </div>
        `);
    }).fail(function() {
        $('#partHistoryReportContent').html('<div class="alert alert-danger">Error fetching parts list.</div>');
    });
}
</script>
@endpush