@extends('admin.templates.layout')

@section('head')
<style>
    :root {
        --ink-900: #0f172a;
        --ink-700: #334155;
        --ink-500: #64748b;
        --ink-400: #94a3b8;
        --line:    #e9edf2;
    }
    .report-intro { margin-bottom: 20px; }
    .report-intro h2 { font-size: 22px; font-weight: 700; color: var(--ink-900); letter-spacing: -.02em; margin: 0 0 4px; }
    .report-intro p { font-size: 13.5px; color: var(--ink-500); margin: 0; }

    .filter-bar { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-bottom: 20px; }
    .filter-bar .form-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-500); margin-bottom: 6px; }
    .filter-bar .form-control { border: 1px solid #e2e8f0; border-radius: 9px; padding: 9px 12px; font-size: 13.5px; height: auto; }
    .filter-bar .form-control:focus { border-color: #93b4f7; box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
    .btn-apply { background: #1e40af; border: 1px solid #1e40af; color: #fff; font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: 9px; display: inline-flex; align-items: center; gap: 6px; transition: background .15s ease; }
    .btn-apply:hover { background: #1e3a8a; color: #fff; }
    .date-preset { font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 7px; background: #f1f5f9; color: #64748b; border: none; text-decoration: none; margin-right: 4px; transition: background .15s ease; }
    .date-preset:hover { background: #e2e8f0; color: #334155; }
    .date-preset.active { background: #1e40af; color: #fff; }

    .section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; flex-wrap: wrap; }
    .section-head h5 { font-size: 15px; font-weight: 700; color: var(--ink-900); margin: 0; }
    .section-head .period { font-size: 12px; color: var(--ink-500); font-weight: 500; background: #f1f5f9; padding: 4px 11px; border-radius: 999px; }

    .stat { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; height: 100%; display: flex; align-items: center; gap: 14px; transition: border-color .15s ease, box-shadow .15s ease; }
    .stat:hover { border-color: #d5dde7; box-shadow: 0 8px 20px -14px rgba(15,23,42,.18); }
    .stat .icon { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 21px; flex-shrink: 0; }
    .stat .icon.blue { background: #e0e9ff; color: #1d4ed8; }
    .stat .icon.cyan { background: #d7f0f9; color: #0891b2; }
    .stat .icon.amber { background: #fef3d0; color: #b45309; }
    .stat .icon.green { background: #d8f3e6; color: #047857; }
    .stat .icon.gray { background: #e6eaf0; color: #475569; }
    .stat .icon.red { background: #fde1e1; color: #b91c1c; }
    .stat .info { min-width: 0; flex: 1; }
    .stat .label { font-size: 11.5px; font-weight: 600; color: var(--ink-500); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; line-height: 1; }
    .stat .value { font-size: 24px; font-weight: 700; color: var(--ink-900); line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

    .panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; height: 100%; }
    .panel .panel-body { padding: 22px; }
    .panel .panel-header { padding: 16px 22px; border-bottom: 1px solid #f1f4f9; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
    .panel .panel-header h5 { font-size: 14.5px; font-weight: 700; color: var(--ink-900); margin: 0; }
    .panel .panel-header .panel-sub { font-size: 12px; color: var(--ink-400); margin: 2px 0 0; }

    .status-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f1f4f9; }
    .status-item:last-child { border-bottom: none; }
    .status-item:first-child { padding-top: 0; }
    .status-item .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .status-item .name { flex: 1; font-size: 13.5px; color: var(--ink-700); font-weight: 500; }
    .status-item .count { font-size: 14px; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }

    .top-list { padding: 0; margin: 0; list-style: none; }
    .top-list li { display: flex; align-items: center; gap: 12px; padding: 13px 22px; border-bottom: 1px solid #f1f4f9; transition: background .15s ease; }
    .top-list li:last-child { border-bottom: none; }
    .top-list li:hover { background: #fafbfd; }
    .top-list .rank { width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
    .top-list .rank.r1 { background: #fef3c7; color: #b45309; }
    .top-list .rank.r2 { background: #e6eaf0; color: #475569; }
    .top-list .rank.r3 { background: #fde2d0; color: #c2410c; }
    .top-list .rank.rN { background: #f1f5f9; color: #94a3b8; }
    .top-list .name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; color: var(--ink-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .top-list .count { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
    .top-list .count.primary { background: #e0e9ff; color: #1d4ed8; }
    .top-list .count.info { background: #d7f0f9; color: #0891b2; }
    .top-list .count.success { background: #d8f3e6; color: #047857; }

    .empty { text-align: center; padding: 36px 20px; color: var(--ink-400); }
    .empty i { font-size: 28px; display: block; margin-bottom: 6px; opacity: .5; }
    .empty small { font-size: 12.5px; }
</style>
@endsection

@section('content')

<div class="report-intro">
    <h2>Reports &amp; Analytics</h2>
    <p>Operational snapshot across orders, merchants, cargo, and transporters.</p>
</div>

<form method="GET" class="filter-bar">
    <div class="row g-3 align-items-end">
        <div class="col-lg-3 col-md-4">
            <label class="form-label">From Date</label>
            <input type="date" name="from" class="form-control" value="{{ $from }}">
        </div>
        <div class="col-lg-3 col-md-4">
            <label class="form-label">To Date</label>
            <input type="date" name="to" class="form-control" value="{{ $to }}">
        </div>
        <div class="col-lg-3 col-md-4">
            <label class="form-label d-block">Quick Range</label>
            <div class="d-flex flex-wrap gap-1">
                <a href="{{ route('admin.reports.index', ['from' => now()->subDays(7)->toDateString(), 'to' => now()->toDateString()]) }}"
                   class="date-preset {{ $from === now()->subDays(7)->toDateString() ? 'active' : '' }}">7d</a>
                <a href="{{ route('admin.reports.index', ['from' => now()->subDays(30)->toDateString(), 'to' => now()->toDateString()]) }}"
                   class="date-preset {{ $from === now()->subDays(30)->toDateString() ? 'active' : '' }}">30d</a>
                <a href="{{ route('admin.reports.index', ['from' => now()->subDays(90)->toDateString(), 'to' => now()->toDateString()]) }}"
                   class="date-preset {{ $from === now()->subDays(90)->toDateString() ? 'active' : '' }}">90d</a>
                <a href="{{ route('admin.reports.index', ['from' => now()->startOfYear()->toDateString(), 'to' => now()->toDateString()]) }}"
                   class="date-preset {{ $from === now()->startOfYear()->toDateString() ? 'active' : '' }}">YTD</a>
            </div>
        </div>
        <div class="col-lg-3 col-md-12 text-lg-end">
            <button class="btn-apply w-100 w-lg-auto">
                <i class="ri-filter-3-line"></i> Apply Filter
            </button>
        </div>
    </div>
</form>

<div class="section-head">
    <h5>Summary</h5>
    <span class="period">
        <i class="ri-calendar-line align-bottom me-1"></i>
        {{ \Carbon\Carbon::parse($from)->format('M d, Y') }} — {{ \Carbon\Carbon::parse($to)->format('M d, Y') }}
    </span>
</div>

<div class="row g-3 mb-4">
    @php
        $summaryCards = [
            ['Total Orders',   'total_orders',     'ri-shopping-bag-3-line',  'blue',   $summary['total_orders']],
            ['Completed',      'completed_orders', 'ri-checkbox-circle-line', 'green',  $summary['completed_orders']],
            ['Cancelled',      'cancelled_orders', 'ri-close-circle-line',    'red',    $summary['cancelled_orders']],
            ['In Transit',     'in_transit',       'ri-truck-line',           'amber',  $summary['in_transit']],
            ['Total SKUs',     'total_products',   'ri-qr-code-line',         'cyan',   $summary['total_products']],
            ['Invoices',       'total_invoices',   'ri-file-list-3-line',     'gray',   $summary['total_invoices'] ?? 0],
        ];
    @endphp

    @foreach($summaryCards as [$label, $key, $icon, $color, $value])
        <div class="col-xl-2 col-md-4 col-6">
            <div class="stat">
                <div class="icon {{ $color }}"><i class="{{ $icon }}"></i></div>
                <div class="info">
                    <div class="label">{{ $label }}</div>
                    <div class="value">{{ number_format($value) }}</div>
                </div>
            </div>
        </div>
    @endforeach
</div>

<div class="section-head">
    <h5>Top Performers</h5>
</div>

<div class="row g-3 mb-4">
    <div class="col-lg-4">
        <div class="panel">
            <div class="panel-header">
                <div>
                    <h5>Top Merchants</h5>
                    <p class="panel-sub">By orders created in the period</p>
                </div>
            </div>
            <ul class="top-list">
                @forelse($topMerchants as $i => $m)
                    <li>
                        <div class="rank {{ $i === 0 ? 'r1' : ($i === 1 ? 'r2' : ($i === 2 ? 'r3' : 'rN')) }}">{{ $i + 1 }}</div>
                        <div class="name">{{ $m->company_name ?: $m->name }}</div>
                        <span class="count primary">{{ $m->orders_count }}</span>
                    </li>
                @empty
                    <li style="display:block;"><div class="empty"><i class="ri-store-2-line"></i><small>No merchant activity</small></div></li>
                @endforelse
            </ul>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="panel">
            <div class="panel-header">
                <div>
                    <h5>Top Cargo Companies</h5>
                    <p class="panel-sub">By orders handled in the period</p>
                </div>
            </div>
            <ul class="top-list">
                @forelse($topCargo as $i => $c)
                    <li>
                        <div class="rank {{ $i === 0 ? 'r1' : ($i === 1 ? 'r2' : ($i === 2 ? 'r3' : 'rN')) }}">{{ $i + 1 }}</div>
                        <div class="name">{{ $c->company_name ?: $c->name }}</div>
                        <span class="count info">{{ $c->orders_count }}</span>
                    </li>
                @empty
                    <li style="display:block;"><div class="empty"><i class="ri-truck-line"></i><small>No cargo activity</small></div></li>
                @endforelse
            </ul>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="panel">
            <div class="panel-header">
                <div>
                    <h5>Top Transporters</h5>
                    <p class="panel-sub">By deliveries in the period</p>
                </div>
            </div>
            <ul class="top-list">
                @forelse($topTransporters as $i => $t)
                    <li>
                        <div class="rank {{ $i === 0 ? 'r1' : ($i === 1 ? 'r2' : ($i === 2 ? 'r3' : 'rN')) }}">{{ $i + 1 }}</div>
                        <div class="name">{{ $t->company_name ?: $t->name }}</div>
                        <span class="count success">{{ $t->deliveries_count }}</span>
                    </li>
                @empty
                    <li style="display:block;"><div class="empty"><i class="ri-roadster-line"></i><small>No transporter activity</small></div></li>
                @endforelse
            </ul>
        </div>
    </div>
</div>

<div class="section-head">
    <h5>Order Status Breakdown</h5>
</div>

<div class="row g-3">
    <div class="col-lg-6">
        <div class="panel">
            <div class="panel-header">
                <div>
                    <h5>Status Distribution</h5>
                    <p class="panel-sub">Total orders in each lifecycle stage</p>
                </div>
            </div>
            <div class="panel-body">
                @php
                    $colorMap = [
                        'warning' => '#f59e0b', 'info' => '#06b6d4', 'primary' => '#3b82f6',
                        'success' => '#10b981', 'danger' => '#ef4444', 'secondary' => '#64748b',
                    ];
                @endphp
                @foreach($statusBreakdown as $status => $info)
                    <div class="status-item">
                        <span class="dot" style="background:{{ $colorMap[$info['class']] ?? '#64748b' }};"></span>
                        <span class="name">{{ $info['text'] }}</span>
                        <span class="count">{{ $info['total'] }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="panel">
            <div class="panel-header">
                <div>
                    <h5>Operational Insights</h5>
                    <p class="panel-sub">Quick highlights for the selected period</p>
                </div>
            </div>
            <div class="panel-body">
                @php
                    $totalOrders    = max(1, $summary['total_orders']);
                    $completionRate = round(($summary['completed_orders'] / $totalOrders) * 100);
                    $cancelRate     = round(($summary['cancelled_orders'] / $totalOrders) * 100);
                    $transitRate    = round(($summary['in_transit'] / $totalOrders) * 100);
                @endphp

                <div class="mb-4">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span style="font-size:13px;font-weight:600;color:#334155;">Completion Rate</span>
                        <span style="font-size:13px;font-weight:700;color:#047857;">{{ $completionRate }}%</span>
                    </div>
                    <div style="height:6px;background:#f1f5f9;border-radius:999px;overflow:hidden;">
                        <div style="width:{{ $completionRate }}%;height:100%;background:#10b981;border-radius:999px;"></div>
                    </div>
                </div>

                <div class="mb-4">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span style="font-size:13px;font-weight:600;color:#334155;">In Transit Rate</span>
                        <span style="font-size:13px;font-weight:700;color:#b45309;">{{ $transitRate }}%</span>
                    </div>
                    <div style="height:6px;background:#f1f5f9;border-radius:999px;overflow:hidden;">
                        <div style="width:{{ $transitRate }}%;height:100%;background:#f59e0b;border-radius:999px;"></div>
                    </div>
                </div>

                <div class="mb-4">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span style="font-size:13px;font-weight:600;color:#334155;">Cancellation Rate</span>
                        <span style="font-size:13px;font-weight:700;color:#b91c1c;">{{ $cancelRate }}%</span>
                    </div>
                    <div style="height:6px;background:#f1f5f9;border-radius:999px;overflow:hidden;">
                        <div style="width:{{ $cancelRate }}%;height:100%;background:#ef4444;border-radius:999px;"></div>
                    </div>
                </div>

                <hr class="my-3">

                <div class="row g-3">
                    <div class="col-6">
                        <div style="font-size:11.5px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;">Avg. Orders / Day</div>
                        <div style="font-size:20px;font-weight:700;color:#0f172a;">
                            @php
                                $days = max(1, \Carbon\Carbon::parse($from)->diffInDays(\Carbon\Carbon::parse($to)) + 1);
                                echo round($summary['total_orders'] / $days, 1);
                            @endphp
                        </div>
                    </div>
                    <div class="col-6">
                        <div style="font-size:11.5px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;">Active Period</div>
                        <div style="font-size:20px;font-weight:700;color:#0f172a;">{{ $days }} {{ \Illuminate\Support\Str::plural('day', $days) }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection