@extends('layouts.dashboard')

@section('page_title', 'STATISTICS')

@php
    $rows = [
        ['key' => 'loads', 'label' => 'Loads', 'color' => '#ffe14d', 'type' => 'int'],
        ['key' => 'miles', 'label' => 'Miles', 'color' => '#9ec5ff', 'type' => 'num'],
        ['key' => 'gross_rev', 'label' => 'Gross Rev.', 'color' => '#f4a6b0', 'type' => 'money'],
        ['key' => 'sales_comm', 'label' => 'Sales Comm.', 'color' => '#86e58b', 'type' => 'money'],
        ['key' => 'carrier_fee', 'label' => 'Carrier Fee', 'color' => '#e2a3e6', 'type' => 'money'],
        ['key' => 'driver_fee', 'label' => 'Driver Fee', 'color' => '#c9ccd1', 'type' => 'money'],
        ['key' => 'net_profit', 'label' => 'Net Profit', 'color' => '#9aa0a6', 'type' => 'money'],
        ['key' => 'percent', 'label' => 'Percent', 'color' => '#ffe14d', 'type' => 'pct'],
    ];

    $fmt = function ($value, $type) {
        if ($type === 'pct') {
            return $value == 0 ? '-' : round($value).'%';
        }
        if ($type === 'int') {
            return $value == 0 ? '-' : number_format($value);
        }
        if ($value == 0) {
            return '-';
        }
        if (abs($value) >= 1000) {
            return number_format($value / 1000, 1).'K';
        }

        return number_format($value);
    };

    $pct = fn ($net, $gross) => $gross != 0 ? round($net / $gross * 100) : 0;
@endphp

@section('content')
<div class="ff-toolbar d-flex justify-content-between align-items-center mb-3">
    <div class="d-flex align-items-center gap-3">
        <a href="{{ route('home') }}" class="btn btn-outline-secondary btn-sm"><i class="fa fa-arrow-left"></i> Back</a>
        <h5 class="m-0 fw-bold border-start ps-3 border-color"><i class="fa-solid fa-chart-column text-accent me-2"></i>Advanced Statistics</h5>
    </div>
    <a href="{{ route('reports.index') }}" class="btn btn-outline-warning btn-sm"><i class="fa-solid fa-file-export me-1"></i> Manage Reports</a>
</div>

<div class="ff-stat-card">
    <form method="GET" action="{{ route('reports.statistics') }}" id="statForm" class="ff-stat-filters">
        <input type="hidden" name="end" id="statEnd" value="{{ $currentEnd }}">
        <div class="d-flex flex-wrap align-items-center gap-3">
            <div class="d-flex align-items-center gap-2">
                <span class="small fw-bold text-muted">Report:</span>
                <select name="category" id="statCategory" class="form-select form-select-sm ff-input" style="min-width:170px" onchange="document.getElementById('statForm').submit()">
                    @foreach ($categories as $value => $label)
                        <option value="{{ $value }}" @selected($selectedCategory === $value)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="d-flex align-items-center gap-2">
                <span class="small fw-bold text-muted">Show:</span>
                <select class="form-select form-select-sm ff-input ff-entity" data-cat="customer" name="entity_id" style="min-width:200px" onchange="document.getElementById('statForm').submit()">
                    <option value="">All Customers</option>
                    @foreach ($customers as $c)
                        <option value="{{ $c->id }}" @selected($selectedEntityId === $c->id)>{{ $c->display_name }}</option>
                    @endforeach
                </select>
                <select class="form-select form-select-sm ff-input ff-entity d-none" data-cat="carrier" name="entity_id" style="min-width:200px" disabled onchange="document.getElementById('statForm').submit()">
                    <option value="">All Carriers</option>
                    @foreach ($carriers as $c)
                        <option value="{{ $c->id }}" @selected($selectedEntityId === $c->id)>{{ $c->display_name }}</option>
                    @endforeach
                </select>
                <select class="form-select form-select-sm ff-input ff-entity d-none" data-cat="driver driver_pay" name="entity_id" style="min-width:200px" disabled onchange="document.getElementById('statForm').submit()">
                    <option value="">All Drivers</option>
                    @foreach ($drivers as $d)
                        <option value="{{ $d->id }}" @selected($selectedEntityId === $d->id)>{{ $d->full_name }}</option>
                    @endforeach
                </select>
                <select class="form-select form-select-sm ff-input ff-entity d-none" data-cat="sales_rep" name="entity_id" style="min-width:200px" disabled onchange="document.getElementById('statForm').submit()">
                    <option value="">All Sales Reps</option>
                    @foreach ($salesReps as $u)
                        <option value="{{ $u->id }}" @selected($selectedEntityId === $u->id)>{{ $u->name }}</option>
                    @endforeach
                </select>
                <select class="form-select form-select-sm ff-input ff-entity d-none" data-cat="dispatcher" name="entity_id" style="min-width:200px" disabled onchange="document.getElementById('statForm').submit()">
                    <option value="">All Dispatchers</option>
                    @foreach ($dispatchers as $u)
                        <option value="{{ $u->id }}" @selected($selectedEntityId === $u->id)>{{ $u->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="d-flex align-items-center gap-2">
                <span class="small fw-bold text-muted">Filter By:</span>
                <select name="filter_by" class="form-select form-select-sm ff-input" style="min-width:150px" onchange="document.getElementById('statForm').submit()">
                    <option value="ship_date" @selected($selectedFilterBy === 'ship_date')>Ship Date</option>
                    <option value="delivery_date" @selected($selectedFilterBy === 'delivery_date')>Delivery Date</option>
                    <option value="invoice_date" @selected($selectedFilterBy === 'invoice_date')>Invoice Date</option>
                </select>
            </div>
        </div>
    </form>

    <div class="ff-stat-chart-row">
        <a href="{{ route('reports.statistics', ['category' => $selectedCategory, 'entity_id' => $selectedEntityId, 'filter_by' => $selectedFilterBy, 'end' => $prevEnd]) }}" class="ff-stat-nav" aria-label="Previous">
            <i class="fa-solid fa-chevron-left"></i>
        </a>
        <div class="ff-stat-canvas-wrap" style="height: 320px;">
            <canvas id="statChart"></canvas>
        </div>
        <a href="{{ route('reports.statistics', ['category' => $selectedCategory, 'entity_id' => $selectedEntityId, 'filter_by' => $selectedFilterBy, 'end' => $nextEnd]) }}" class="ff-stat-nav" aria-label="Next">
            <i class="fa-solid fa-chevron-right"></i>
        </a>
    </div>

    <div class="table-responsive ff-stat-table-wrap">
        <table class="ff-stat-table">
            <thead>
                <tr>
                    <th class="text-start">Breakdown</th>
                    <th></th>
                    @foreach ($months as $label)
                        <th>{{ $label }}</th>
                    @endforeach
                    <th class="ff-stat-total">Totals</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($rows as $row)
                    <tr>
                        <td class="text-start fw-bold">{{ $row['label'] }}</td>
                        <td><span class="ff-stat-swatch" style="background: {{ $row['color'] }}"></span></td>
                        @foreach ($months as $key => $label)
                            @php
                                $value = $row['type'] === 'pct'
                                    ? $pct($buckets[$key]['net_profit'], $buckets[$key]['gross_rev'])
                                    : $buckets[$key][$row['key']];
                            @endphp
                            <td class="{{ $value < 0 ? 'text-danger' : '' }}">{{ $fmt($value, $row['type']) }}</td>
                        @endforeach
                        @php
                            $totalValue = $row['type'] === 'pct'
                                ? $pct($totals['net_profit'], $totals['gross_rev'])
                                : $totals[$row['key']];
                        @endphp
                        <td class="ff-stat-total {{ $totalValue < 0 ? 'text-danger' : '' }}">{{ $fmt($totalValue, $row['type']) }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<style>
    .ff-stat-filters { padding-bottom: 14px; border-bottom: 1px solid var(--border-color); margin-bottom: 10px; }
    .ff-stat-chart-row { display: flex; align-items: center; gap: 10px; }
    .ff-stat-canvas-wrap { flex: 1; min-width: 0; }
    .ff-stat-nav { flex: 0 0 auto; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
        border-radius: 50%; color: var(--bs-secondary-color, #6c757d); font-size: 22px; text-decoration: none; transition: all .15s; }
    .ff-stat-nav:hover { background: rgba(255,193,7,.15); color: var(--accent-color, #f0b429); }
    .ff-stat-table { width: 100%; border-collapse: collapse; font-size: 12px; color: var(--text-main); }
    .ff-stat-table th, .ff-stat-table td { text-align: right; padding: 5px 8px; white-space: nowrap; border-bottom: 1px solid var(--border-color); color: var(--text-main); }
    .ff-stat-table thead th { font-weight: 700; color: var(--text-muted); border-bottom: 2px solid var(--border-color); }
    .ff-stat-table .ff-stat-total { font-weight: 700; background: rgba(var(--accent-rgb), 0.08); }
    .ff-stat-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; border: 1px solid rgba(0,0,0,.15); }
</style>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Entity dropdown swap based on selected report category.
    const category = document.getElementById('statCategory');
    const entities = Array.from(document.querySelectorAll('.ff-entity'));
    function syncEntity() {
        const cat = category.value;
        entities.forEach((sel) => {
            const active = (sel.dataset.cat || '').split(' ').includes(cat);
            sel.classList.toggle('d-none', !active);
            sel.disabled = !active;
        });
    }
    category.addEventListener('change', syncEntity);
    syncEntity();

    const labels = @json(array_values($months));
    const grossRev = @json(collect($buckets)->map(fn ($b) => round($b['gross_rev'], 2))->values());
    const carrierFee = @json(collect($buckets)->map(fn ($b) => round($b['carrier_fee'], 2))->values());
    const netProfit = @json(collect($buckets)->map(fn ($b) => round($b['net_profit'], 2))->values());

    const ctx = document.getElementById('statChart');
    if (ctx) {
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [
                    { label: 'Gross Rev.', data: grossRev, backgroundColor: '#f4a6b0' },
                    { label: 'Carrier Fee', data: carrierFee, backgroundColor: '#e2a3e6' },
                    { label: 'Net Profit', data: netProfit, backgroundColor: '#9aa0a6' },
                ],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'top' },
                    tooltip: {
                        callbacks: {
                            label: (c) => c.dataset.label + ': $' + Number(c.raw).toLocaleString(),
                        },
                    },
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: { callback: (v) => Math.abs(v) >= 1000 ? (v / 1000) + 'K' : v },
                    },
                },
            },
        });
    }
});
</script>
@endpush
@endsection