@extends('layouts.admin')
@section('title', 'Checkout History')
@section('page_title', 'Checkout History')
@section('breadcrumb')
    <li><a href="{{ route('admin.checkout.index') }}">Checkout Armada</a></li>
    <li class="active">Riwayat</li>
@endsection

@push('css')
<style>
    .filter-bar {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-bottom: 16px;
        align-items: center;
    }
    .filter-btn {
        padding: 5px 14px;
        border-radius: 4px;
        border: 1px solid #ddd;
        background: #fff;
        color: #333;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.15s;
    }
    .filter-btn:hover { border-color: #28a745; color: #28a745; }
    .filter-btn.active { background: #28a745; border-color: #28a745; color: #fff; }
    .search-sm input {
        border-radius: 4px;
        padding: 5px 12px;
        border: 1px solid #ddd;
        font-size: 13px;
        width: 200px;
        outline: none;
    }
    .search-sm input:focus { border-color: #28a745; }
</style>
@endpush

@section('content')
<div class="row">
    <div class="col-xl-12 m-b-3">
        <div class="card">
            <div class="card-header">
                <h4 class="text-black pull-left">Checkout History</h4>
                {{-- <a href="{{ route('admin.checkout.index') }}" class="btn btn-default btn-sm pull-right">
                    <i class="fa fa-truck"></i> Checkout Aktif
                </a> --}}
            </div>
            <div class="card-body">

                {{-- Filter Bar --}}
                <div class="filter-bar">
                    <a href="{{ route('admin.checkout.history') }}"
                       class="filter-btn {{ (($filter ?? 'all') === 'all' || $filter === '') ? 'active' : '' }}">
                        Semua
                    </a>
                    <a href="{{ route('admin.checkout.history', ['filter' => 'finished']) }}"
                       class="filter-btn {{ ($filter ?? '') === 'finished' ? 'active' : '' }}">
                        Finished
                    </a>

                    <form method="GET" action="{{ route('admin.checkout.history') }}" class="search-sm" style="margin-left:auto">
                        @if($filter && $filter !== 'all')
                            <input type="hidden" name="filter" value="{{ $filter }}">
                        @endif
                        <input type="text" name="search" placeholder="Cari kendaraan / sopir..."
                            value="{{ request('search') }}">
                    </form>
                </div>

                {{-- Table --}}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>No. Kendaraan</th>
                                <th>Sopir</th>
                                <th>Jenis Kendaraan</th>
                                <th>Tgl &amp; Jam Checkout</th>
                                <th>Tgl &amp; Jam Berangkat</th>
                                <th>Frontman</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($checkouts as $co)
                            <tr>
                                <td>
                                    <strong>{{ $co->kendaraan->no_lambung ?? '-' }}</strong>
                                    @if($co->kendaraan?->plat_nomor)
                                        <br><small class="text-muted">{{ $co->kendaraan->plat_nomor }}</small>
                                    @endif
                                </td>
                                <td>{{ $co->supir->nama_supir ?? '-' }}</td>
                                <td>{{ $co->kendaraan->jenisKendaraan->nama_jenis_kendaraan ?? '-' }}</td>
                                <td>
                                    {{ $co->checkout_date?->format('d-m-Y') ?? '-' }}
                                    @if($co->checkout_time)
                                        <br><strong>{{ $co->checkout_time }}</strong>
                                    @endif
                                </td>
                                <td>
                                    @if($co->leave_date)
                                        {{ $co->leave_date->format('d-m-Y') }}
                                        @if($co->leave_time)
                                            <br><strong>{{ $co->leave_time }}</strong>
                                        @endif
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td>{{ $co->frontman->nama_user ?? '-' }}</td>
                                <td>
                                    @if($co->status === App\Models\CheckoutKendaraan::STATUS_ACTIVE)
                                        <span class="badge badge-info">Aktif</span>
                                    @elseif($co->status === App\Models\CheckoutKendaraan::STATUS_FINISHED)
                                        <span class="badge badge-success">Selesai</span>
                                    @else
                                        <span class="badge badge-default">{{ $co->status }}</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="text-center text-muted">Tidak ada data checkout</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                {{ $checkouts->withQueryString()->links('pagination::bootstrap-4') }}
            </div>
        </div>
    </div>
</div>
@endsection