@extends('layouts.admin')

@section('title', 'Dashboard')
@section('page_title', 'Dashboard')

@section('content')

{{-- ============================================================
     ROW 1: SMALL-BOX KPI — HARI INI
     ============================================================ --}}
<div class="row">
    <div class="col-lg-2 col-md-4 col-sm-6 m-b-3">
        <div class="small-box bg-primary">
            <div class="inner">
                <div class="text-left">
                    <h6 style="color:rgba(255,255,255,0.75);">Hauling Ditutup</h6>
                    <h2 style="color:#fff;">{{ $statsToday['hauling_paid_today'] }}</h2>
                </div>
                <div class="text-right" style="position:absolute; top:12px; right:16px; opacity:0.4;">
                    <i class="ti-reload" style="font-size:32px;"></i>
                </div>
            </div>
            <div style="padding: 0 16px 10px;">
                <span style="font-size:11px; color:rgba(255,255,255,0.7);">Hari ini</span>
            </div>
        </div>
    </div>

    <div class="col-lg-2 col-md-4 col-sm-6 m-b-3">
        <div class="small-box" style="background:#27ae60; color:#fff;">
            <div class="inner">
                <div class="text-left">
                    <h6 style="color:rgba(255,255,255,0.75);">Bonus Fuel</h6>
                    <h2 style="color:#fff; font-size:18px;">
                        Rp {{ number_format($statsToday['total_bonus_fuel_today'], 0, ',', '.') }}
                    </h2>
                </div>
                <div class="text-right" style="position:absolute; top:12px; right:16px; opacity:0.4;">
                    <i class="ti-arrow-up" style="font-size:32px;"></i>
                </div>
            </div>
            <div style="padding: 0 16px 10px;">
                <span style="font-size:11px; color:rgba(255,255,255,0.7);">Hari ini (+)</span>
            </div>
        </div>
    </div>

    <div class="col-lg-2 col-md-4 col-sm-6 m-b-3">
        <div class="small-box" style="background:#e74c3c; color:#fff;">
            <div class="inner">
                <div class="text-left">
                    <h6 style="color:rgba(255,255,255,0.75);">Potongan Fuel</h6>
                    <h2 style="color:#fff; font-size:18px;">
                        Rp {{ number_format(abs($statsToday['total_potongan_fuel_today']), 0, ',', '.') }}
                    </h2>
                </div>
                <div class="text-right" style="position:absolute; top:12px; right:16px; opacity:0.4;">
                    <i class="ti-arrow-down" style="font-size:32px;"></i>
                </div>
            </div>
            <div style="padding: 0 16px 10px;">
                <span style="font-size:11px; color:rgba(255,255,255,0.7);">Hari ini (-)</span>
            </div>
        </div>
    </div>

    <div class="col-lg-2 col-md-6 col-sm-6 m-b-3">
        <div class="small-box" style="background:#1abc9c; color:#fff;">
            <div class="inner">
                <div class="text-left">
                    <h6 style="color:rgba(255,255,255,0.75);">Total Dibayarkan</h6>
                    <h2 style="color:#fff; font-size:20px;">
                        Rp {{ number_format($statsToday['total_dibayar_today'], 0, ',', '.') }}
                    </h2>
                </div>
                <div class="text-right" style="position:absolute; top:12px; right:16px; opacity:0.4;">
                    <i class="ti-wallet" style="font-size:32px;"></i>
                </div>
            </div>
            <div style="padding: 0 16px 10px;">
                <span style="font-size:11px; color:rgba(255,255,255,0.7);">Hari ini</span>
            </div>
        </div>
    </div>

    <div class="col-lg-2 col-md-6 col-sm-6 m-b-3">
        <div class="small-box bg-yellow">
            <div class="inner">
                <div class="text-left">
                    <h6 style="color:rgba(0,0,0,0.6);">Fuel Diisi</h6>
                    <h2 style="color:#333;">
                        {{ number_format($statsToday['total_fuel_liter_today'], 0, ',', '.') }}
                        <span style="font-size:13px; font-weight:400;">L</span>
                    </h2>
                </div>
                <div class="text-right" style="position:absolute; top:12px; right:16px; opacity:0.4;">
                    <i class="ti-tint" style="font-size:32px;"></i>
                </div>
            </div>
            <div style="padding: 0 16px 10px;">
                <span style="font-size:11px; color:rgba(0,0,0,0.5);">Hari ini</span>
            </div>
        </div>
    </div>

    <div class="col-lg-2 col-md-6 col-sm-6 m-b-3">
        <div class="small-box bg-light">
            <div class="inner">
                <div class="text-left">
                    <h6 style="color:rgba(0,0,0,0.6);">Harga Fuel</h6>

                    {{-- <div style="font-size:18px; font-weight:700; color:#333; line-height:1.2;">
                        Rp {{ number_format($statsToday['avg_harga_per_liter_today'], 0, ',', '.') }}
                    </div> --}}
                     <div style="font-size:18px; font-weight:700; color:#333; line-height:1.2;">
                        Rp {{ number_format($hargaFuelStd, 0, ',', '.') }}
                    </div>
                    {{-- <div style="font-size:9px; color:#888; text-transform:uppercase; letter-spacing:0.3px; margin-top:4px;">Per Liter</div> --}}
                    {{-- <div style="font-size:9px; color:#aaa; margin-top:2px;">Std: Rp {{ number_format($hargaFuelStd, 0, ',', '.') }}</div> --}}
                </div>
                <div style="padding: 0 16px 10px;">
                    <span style="font-size:11px; color:rgba(0,0,0,0.5);">Per Liter</span>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ============================================================
     ROW 2: AKTIF SEKARANG + BULAN INI
     ============================================================ --}}
<div class="row">

    {{-- AKTIF SEKARANG --}}
    <div class="col-lg-3 col-md-6 m-b-3">
        <div class="info-box">
            <div class="card-body">
                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
                    <h5 class="mb-0" style="font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;">
                        <i class="fa fa-circle text-success" style="font-size:10px;"></i> Aktif Sekarang
                    </h5>
                </div>
                <div style="display:flex; gap:0;">
                    <div style="flex:1; text-align:center; padding:10px 8px; border-right:1px solid #eee;">
                        <div style="font-size:28px; font-weight:700; color:#3498db; line-height:1;">{{ $statsAktif['checkout_aktif'] }}</div>
                        <div style="font-size:11px; color:#888; margin-top:4px;">Checkout<br>Aktif</div>
                    </div>
                    <div style="flex:1; text-align:center; padding:10px 8px; border-right:1px solid #eee;">
                        <div style="font-size:28px; font-weight:700; color:#e67e22; line-height:1;">{{ $statsAktif['hauling_belum_bayar'] }}</div>
                        <div style="font-size:11px; color:#888; margin-top:4px;">Belum<br>Bayar</div>
                    </div>
                    <div style="flex:1; text-align:center; padding:10px 8px;">
                        <div style="font-size:28px; font-weight:700; color:#27ae60; line-height:1;">{{ $statsAktif['supir_aktif'] }}</div>
                        <div style="font-size:11px; color:#888; margin-top:4px;">Sopir<br>Aktif</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- SUMMARY BULAN INI --}}
    <div class="col-lg-3 col-md-6 m-b-3">
        <div class="info-box">
            <div class="card-body">
                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
                    <h5 class="mb-0" style="font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;">
                        <i class="fa fa-calendar" style="font-size:12px;"></i> Bulan {{ now()->translatedFormat('F Y') }}
                    </h5>
                    <span class="badge badge-secondary" style="font-size:11px;">{{ $statsMonth['hauling_paid_month'] }} hauling</span>
                </div>
                <div style="display:flex; gap:0;">
                    <div style="flex:1; text-align:center; padding:10px 8px; border-right:1px solid #eee;">
                        <div style="font-size:22px; font-weight:700; color:#333; line-height:1;">
                            {{ number_format($statsMonth['total_tonase_month'], 1, ',', '.') }}
                        </div>
                        <div style="font-size:11px; color:#888; margin-top:4px;">Total Tonase<br>(ton)</div>
                    </div>
                    <!--<div style="flex:1; text-align:center; padding:10px 8px;">-->
                    <!--    <div style="font-size:22px; font-weight:700; color:#333; line-height:1;">-->
                    <!--        {{ number_format($statsMonth['total_fuel_liter_month']/1000, 1, ',', '.') }}-->
                    <!--    </div>-->
                    <!--    <div style="font-size:11px; color:#888; margin-top:4px;">Total Fuel<br>(kL)</div>-->
                    <!--</div>-->
                </div>
            </div>
        </div>
    </div>

    {{-- UANG BULAN INI --}}
    {{-- <div class="col-lg-3 col-md-6 m-b-3">
        <div class="info-box">
            <div class="card-body">
                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
                    <h5 class="mb-0" style="font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;">
                        <i class="fa fa-money" style="font-size:12px;"></i> Uang Bulan Ini
                    </h5>
                </div>
                <div style="font-size:20px; font-weight:700; color:#1c2b3a; margin-bottom:8px;">
                    Rp {{ number_format($statsMonth['total_dibayar_month'], 0, ',', '.') }}
                </div>
                <div style="display:flex; flex-direction:column; gap:4px;">
                    <div style="font-size:12px; color:#555;">
                        <span style="color:#888;">Ongkos:</span>
                        <strong>Rp {{ number_format($statsMonth['total_ongkos_month'], 0, ',', '.') }}</strong>
                    </div>
                    <div style="font-size:12px; color:#27ae60;">
                        <i class="fa fa-arrow-up"></i>
                        <strong>+Rp {{ number_format($statsMonth['total_bonus_fuel_month'], 0, ',', '.') }}</strong>
                        <span style="color:#aaa; font-size:11px;">bonus</span>
                    </div>
                    <div style="font-size:12px; color:#e74c3c;">
                        <i class="fa fa-arrow-down"></i>
                        <strong>-Rp {{ number_format(abs($statsMonth['total_potongan_fuel_month']), 0, ',', '.') }}</strong>
                        <span style="color:#aaa; font-size:11px;">potongan</span>
                    </div>
                </div>
            </div>
        </div>
    </div> --}}

    {{-- FUEL COST BULAN INI --}}
    <div class="col-lg-3 col-md-6 m-b-3">
        <div class="info-box">
            <div class="card-body">
                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
                    <h5 class="mb-0" style="font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;">
                        <i class="ti-tint" style="font-size:12px;"></i> Biaya Fuel Bulan Ini
                    </h5>
                </div>
                <div style="font-size:20px; font-weight:700; color:#e67e22; margin-bottom:6px;">
                    Rp {{ number_format($statsMonth['total_fuel_rp_month'], 0, ',', '.') }}
                </div>
                <div style="font-size:12px; color:#888;">
                    {{ number_format($statsMonth['total_fuel_liter_month'], 0, ',', '.') }} Liter
                    &nbsp;|&nbsp;
                    @if($statsMonth['total_fuel_liter_month'] > 0)
                        Rp {{ number_format($statsMonth['total_fuel_rp_month'] / $statsMonth['total_fuel_liter_month'], 0, ',', '.') }}/L
                    @else
                        Rp 0/L
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ============================================================
     ROW 3: TOP PERFORMANCE + TREND 7 HARI
     ============================================================ --}}
<div class="row">

    {{-- TOP BONUS --}}
    <div class="col-lg-4 col-md-6 m-b-3">
        <div class="card">
            <div class="card-header" style="background:#d4edda; border-bottom:1px solid #c3e6cb; padding:10px 16px;">
                <h5 class="mb-0" style="font-size:13px; font-weight:700; color:#155724;">
                    <i class="ti-cup" style="font-size:14px;"></i>&nbsp; Top Bonus Fuel Supir
                </h5>
            </div>
            <div class="card-body" style="padding:0;">
                <div class="table-responsive">
                    <table class="table table-sm mb-0" style="font-size:12px;">
                        <thead>
                            <tr style="background:#f8f9fa;">
                                <th style="padding:8px 12px; font-size:11px; text-transform:uppercase; letter-spacing:0.3px;">#</th>
                                <th style="padding:8px 12px; font-size:11px; text-transform:uppercase; letter-spacing:0.3px;">No. Hauling</th>
                                <th style="padding:8px 12px; font-size:11px; text-transform:uppercase; letter-spacing:0.3px;">Sopir</th>
                                <th style="padding:8px 12px; font-size:11px; text-transform:uppercase; letter-spacing:0.3px;" class="text-right">Bonus</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($topBonus as $i => $row)
                            <tr>
                                <td style="padding:8px 12px; text-align:center;">
                                    @if($i === 0)
                                        <span style="background:#ffd700; color:#333; font-size:10px; padding:1px 5px; border-radius:3px; font-weight:700;">1</span>
                                    @else
                                        <span style="color:#aaa; font-size:11px;">{{ $i + 1 }}</span>
                                    @endif
                                </td>
                                <td style="padding:8px 12px;">
                                    <code style="font-size:11px; background:#f0f0f0; padding:1px 5px; border-radius:3px;">{{ $row['nomor'] ?? '-' }}</code>
                                </td>
                                <td style="padding:8px 12px;">{{ $row['supir'] }}</td>
                                <td style="padding:8px 12px; text-align:right; font-weight:700; color:#27ae60;">
                                    +Rp {{ number_format($row['bonus_fuel_rp'], 0, ',', '.') }}
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" style="padding:16px 12px; text-align:center; color:#aaa; font-size:12px;">
                                    Belum ada data bulan ini
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- TOP POTONGAN --}}
    <div class="col-lg-4 col-md-6 m-b-3">
        <div class="card">
            <div class="card-header" style="background:#f8d7da; border-bottom:1px solid #f5c6cb; padding:10px 16px;">
                <h5 class="mb-0" style="font-size:13px; font-weight:700; color:#721c24;">
                    <i class="ti-alert" style="font-size:14px;"></i> Top Potongan Fuel Supir
                </h5>
            </div>
            <div class="card-body" style="padding:0;">
                <div class="table-responsive">
                    <table class="table table-sm mb-0" style="font-size:12px;">
                        <thead>
                            <tr style="background:#f8f9fa;">
                                <th style="padding:8px 12px; font-size:11px; text-transform:uppercase; letter-spacing:0.3px;">#</th>
                                <th style="padding:8px 12px; font-size:11px; text-transform:uppercase; letter-spacing:0.3px;">No. Hauling</th>
                                <th style="padding:8px 12px; font-size:11px; text-transform:uppercase; letter-spacing:0.3px;">Sopir</th>
                                <th style="padding:8px 12px; font-size:11px; text-transform:uppercase; letter-spacing:0.3px;" class="text-right">Potongan</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($topPotongan as $i => $row)
                            <tr>
                                <td style="padding:8px 12px; text-align:center;">
                                    @if($i === 0)
                                        <span style="background:#e74c3c; color:#fff; font-size:10px; padding:1px 5px; border-radius:3px; font-weight:700;">!</span>
                                    @else
                                        <span style="color:#aaa; font-size:11px;">{{ $i + 1 }}</span>
                                    @endif
                                </td>
                                <td style="padding:8px 12px;">
                                    <code style="font-size:11px; background:#f0f0f0; padding:1px 5px; border-radius:3px;">{{ $row['nomor'] ?? '-' }}</code>
                                </td>
                                <td style="padding:8px 12px;">{{ $row['supir'] }}</td>
                                <td style="padding:8px 12px; text-align:right; font-weight:700; color:#e74c3c;">
                                    -Rp {{ number_format(abs($row['bonus_fuel_rp']), 0, ',', '.') }}
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" style="padding:16px 12px; text-align:center; color:#aaa; font-size:12px;">
                                    Tidak ada potongan bulan ini
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- TREND 7 HARI --}}
    {{-- <div class="col-lg-4 col-md-12 m-b-3">
        <div class="card">
            <div class="card-header" style="padding:10px 16px;">
                <h5 class="mb-0" style="font-size:13px; font-weight:700; color:#333;">
                    <i class="ti-bar-chart" style="font-size:14px;"></i> Trend 7 Hari Terakhir
                </h5>
            </div>
            <div class="card-body" style="padding:12px 16px;">
                @forelse($trend as $date => $row)
                <div style="margin-bottom:12px;">
                    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
                        <span style="font-size:12px; font-weight:600; color:#333; min-width:40px;">{{ $row['date'] }}</span>
                        <span style="font-size:11px; color:#888; text-align:center; min-width:50px;">{{ $row['count'] }} hauling</span>
                        <span style="font-size:11px; color:#27ae60; min-width:90px; text-align:right;">
                            <strong>+Rp {{ number_format($row['bonus'], 0, ',', '.') }}</strong>
                        </span>
                        <span style="font-size:11px; color:#e74c3c; min-width:90px; text-align:right;">
                            <strong>-Rp {{ number_format(abs($row['potongan']), 0, ',', '.') }}</strong>
                        </span>
                    </div>
                    <div style="display:flex; height:6px; border-radius:3px; background:#eee; overflow:hidden;">
                        @php
                            $total = $row['ongkos'] + abs($row['bonus']) + abs($row['potongan']);
                            $bonusPct = $total > 0 ? max(0, ($row['ongkos'] / $total) * 100) : 0;
                            $potonganPct = $total > 0 ? max(0, (abs($row['potongan']) / $total) * 100) : 0;
                        @endphp
                        <div style="width:{{ max(1, $bonusPct) }}%; background:#3498db; height:100%;"></div>
                        <div style="width:{{ max(0, $potonganPct) }}%; background:#e74c3c; height:100%;"></div>
                    </div>
                </div>
                @empty
                <p class="text-center text-muted" style="font-size:12px; padding:20px 0;">Belum ada data trend</p>
                @endforelse
                <div style="display:flex; gap:16px; font-size:10px; color:#888; margin-top:4px; padding-top:4px; border-top:1px solid #f0f0f0;">
                    <span>
                        <span style="display:inline-block; width:10px; height:6px; background:#3498db; border-radius:2px; margin-right:3px; vertical-align:middle;"></span>
                        Ongkos
                    </span>
                    <span>
                        <span style="display:inline-block; width:10px; height:6px; background:#e74c3c; border-radius:2px; margin-right:3px; vertical-align:middle;"></span>
                        Potongan
                    </span>
                </div>
            </div>
        </div>
    </div> --}}
</div>

{{-- ============================================================
     ROW 4: DUMPING TERBARU + CHECKOUT TERBARU
     ============================================================ --}}
<div class="row">

    {{-- DUMPING TERBARU --}}
    <div class="col-lg-6 m-b-3">
        <div class="card">
            <div class="card-header" style="padding:10px 16px;">
                <div style="display:flex; justify-content:space-between; align-items:center;">
                    <h5 class="mb-0" style="font-size:13px; font-weight:700; color:#333;">
                        <i class="ti-package" style="font-size:14px;"></i> Dumping Terbaru
                    </h5>
                    <a href="{{ route('admin.hauling.index') }}" class="btn btn-xs btn-default">Lihat Semua</a>
                </div>
            </div>
            <div class="card-body" style="padding:0;">
                <div class="table-responsive">
                    <table class="table table-sm mb-0" style="font-size:12px;">
                        <thead>
                            <tr style="background:#f8f9fa;">
                                <th style="padding:8px 12px; font-size:11px; text-transform:uppercase; letter-spacing:0.3px;">Tanggal</th>
                                <th style="padding:8px 12px; font-size:11px; text-transform:uppercase; letter-spacing:0.3px;">No. Hauling</th>
                                <th style="padding:8px 12px; font-size:11px; text-transform:uppercase; letter-spacing:0.3px;">Sopir</th>
                                <th style="padding:8px 12px; font-size:11px; text-transform:uppercase; letter-spacing:0.3px;" class="text-right">Tonase</th>
                                <th style="padding:8px 12px; font-size:11px; text-transform:uppercase; letter-spacing:0.3px;" class="text-right">Bonus Fuel</th>
                                <th style="padding:8px 12px; font-size:11px; text-transform:uppercase; letter-spacing:0.3px;">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentHaulings as $h)
                            <tr>
                                <td style="padding:7px 12px;">{{ $h->hauling_date?->format('d/m') ?? '-' }}</td>
                                <td style="padding:7px 12px;">
                                    <code style="font-size:11px; background:#f0f0f0; padding:1px 5px; border-radius:3px;">
                                        {{ $h->nomor_hauling_kiba ?? $h->hauling_number ?? '-' }}
                                    </code>
                                </td>
                                <td style="padding:7px 12px;">{{ $h->checkout?->supir?->nama_supir ?? '-' }}</td>
                                <td style="padding:7px 12px; text-align:right;">{{ number_format($h->net_weight ?? 0, 1, ',', '.') }} t</td>
                                <td style="padding:7px 12px; text-align:right; font-weight:700;">
                                    @if(($h->bonus_fuel_rp ?? 0) > 0)
                                        <span style="color:#27ae60;">+Rp {{ number_format($h->bonus_fuel_rp, 0, ',', '.') }}</span>
                                    @elseif(($h->bonus_fuel_rp ?? 0) < 0)
                                        <span style="color:#e74c3c;">-Rp {{ number_format(abs($h->bonus_fuel_rp), 0, ',', '.') }}</span>
                                    @else
                                        <span style="color:#aaa;">-</span>
                                    @endif
                                </td>
                                <td style="padding:7px 12px;">
                                    @if($h->is_paid)
                                        <span class="badge badge-success" style="font-size:10px;">LUNAS</span>
                                    @elseif($h->status === 'CLOSED')
                                        <span class="badge badge-secondary" style="font-size:10px;">CLOSED</span>
                                    @else
                                        <span class="badge badge-warning" style="font-size:10px;">{{ $h->status }}</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" style="padding:16px 12px; text-align:center; color:#aaa; font-size:12px;">Belum ada data</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- CHECKOUT TERBARU --}}
    <div class="col-lg-6 m-b-3">
        <div class="card">
            <div class="card-header" style="padding:10px 16px;">
                <div style="display:flex; justify-content:space-between; align-items:center;">
                    <h5 class="mb-0" style="font-size:13px; font-weight:700; color:#333;">
                        <i class="ti-truck" style="font-size:14px;"></i> Checkout Terbaru
                    </h5>
                    <a href="{{ route('admin.checkout.index') }}" class="btn btn-xs btn-default">Lihat Semua</a>
                </div>
            </div>
            <div class="card-body" style="padding:0;">
                <div class="table-responsive">
                    <table class="table table-sm mb-0" style="font-size:12px;">
                        <thead>
                            <tr style="background:#f8f9fa;">
                                <th style="padding:8px 12px; font-size:11px; text-transform:uppercase; letter-spacing:0.3px;">Tanggal</th>
                                <th style="padding:8px 12px; font-size:11px; text-transform:uppercase; letter-spacing:0.3px;">Sopir</th>
                                <th style="padding:8px 12px; font-size:11px; text-transform:uppercase; letter-spacing:0.3px;">No. Lambung</th>
                                <th style="padding:8px 12px; font-size:11px; text-transform:uppercase; letter-spacing:0.3px;">Plat</th>
                                <th style="padding:8px 12px; font-size:11px; text-transform:uppercase; letter-spacing:0.3px;">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentCheckouts as $co)
                            <tr>
                                <td style="padding:7px 12px;">{{ $co->checkout_date?->format('d/m') ?? '-' }}</td>
                                <td style="padding:7px 12px;">{{ $co->supir?->nama_supir ?? '-' }}</td>
                                <td style="padding:7px 12px;">{{ $co->kendaraan?->no_lambung ?? '-' }}</td>
                                <td style="padding:7px 12px;">{{ $co->kendaraan?->plat_nomor ?? '-' }}</td>
                                <td style="padding:7px 12px;">
                                    @if($co->status === 'ACTIVE')
                                        <span class="badge badge-info" style="font-size:10px;">AKTIF</span>
                                    @elseif($co->status === 'FINISHED')
                                        <span class="badge badge-secondary" style="font-size:10px;">SELESAI</span>
                                    @else
                                        <span class="badge badge-default" style="font-size:10px;">{{ $co->status }}</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" style="padding:16px 12px; text-align:center; color:#aaa; font-size:12px;">Belum ada data</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection