@extends('layouts.admin')

@section('title', 'Manajemen Pesanan')

@push('styles')
<style>
    .stat-mini {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: .85rem;
        padding: 1rem 1.25rem;
        text-align: center;
        transition: transform .2s ease, box-shadow .2s ease;
    }
    .stat-mini:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,.06);
    }
    .stat-mini .stat-val {
        font-size: 1.5rem;
        font-weight: 800;
        line-height: 1;
    }
    .stat-mini .stat-label {
        font-size: .7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--text-muted);
    }
    .badge-status {
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .03em;
        text-transform: uppercase;
        padding: .3rem .7rem;
        border-radius: 50px;
    }
    .badge-pending    { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
    .badge-processing { background: #cff4fc; color: #055160; border: 1px solid #b6effb; }
    .badge-shipped    { background: #e0cffc; color: #3d0a91; border: 1px solid #c8b6ff; }
    .badge-completed  { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
    .badge-cancelled  { background: #f8d7da; color: #842029; border: 1px solid #f5c2c7; }
    .filter-pill {
        font-size: .78rem;
        font-weight: 700;
        border-radius: 50px;
        padding: .35rem .85rem;
        border: 1.5px solid var(--border);
        color: var(--text-muted);
        background: var(--surface);
        text-decoration: none;
        transition: all .15s ease;
    }
    .filter-pill:hover {
        background: var(--red-xl);
        color: var(--red-dk);
        border-color: var(--red);
    }
    .filter-pill.active-pill {
        background: var(--red);
        color: #fff;
        border-color: var(--red);
    }
    .order-row { transition: background-color .12s ease; }
    .order-row:hover { background-color: var(--red-xl) !important; }
</style>
@endpush

@section('content')
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
    <div>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1 small text-muted">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}" class="text-decoration-none">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">Pesanan</li>
            </ol>
        </nav>
        <h2 class="h3 fw-bold text-dark m-0">📋 Manajemen Pesanan</h2>
        <p class="text-muted small m-0">Lihat, kelola, dan ubah status seluruh pesanan dari pembeli.</p>
    </div>
</div>

{{-- Statistik Ringkasan --}}
<div class="row g-2 mb-4">
    <div class="col-6 col-md-4 col-lg">
        <div class="stat-mini">
            <div class="stat-val text-dark">{{ $stats['total'] }}</div>
            <div class="stat-label mt-1">Semua Pesanan</div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-lg">
        <div class="stat-mini">
            <div class="stat-val" style="color: #856404;">{{ $stats['pending'] }}</div>
            <div class="stat-label mt-1">Pending</div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-lg">
        <div class="stat-mini">
            <div class="stat-val" style="color: #055160;">{{ $stats['processing'] }}</div>
            <div class="stat-label mt-1">Processing</div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-lg">
        <div class="stat-mini">
            <div class="stat-val" style="color: #3d0a91;">{{ $stats['shipped'] }}</div>
            <div class="stat-label mt-1">Shipped</div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-lg">
        <div class="stat-mini">
            <div class="stat-val" style="color: #155724;">{{ $stats['completed'] }}</div>
            <div class="stat-label mt-1">Completed</div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-lg">
        <div class="stat-mini">
            <div class="stat-val" style="color: #842029;">{{ $stats['cancelled'] }}</div>
            <div class="stat-label mt-1">Cancelled</div>
        </div>
    </div>
    <div class="col-12 col-lg">
        <div class="stat-mini" style="border-color: var(--red);">
            <div class="stat-val" style="color: var(--red-dk);">Rp {{ number_format($stats['revenue'], 0, ',', '.') }}</div>
            <div class="stat-label mt-1">Total Pendapatan</div>
        </div>
    </div>
</div>

{{-- Filter & Pencarian --}}
<div class="card border-0 shadow-sm mb-3">
    <div class="card-body py-3 d-flex flex-wrap justify-content-between align-items-center gap-3">
        <div class="d-flex flex-wrap gap-2">
            <a href="{{ route('admin.orders.index') }}"
               class="filter-pill {{ !request('status') ? 'active-pill' : '' }}">
                Semua
            </a>
            @foreach($allowedStatuses as $st)
                <a href="{{ route('admin.orders.index', ['status' => $st]) }}"
                   class="filter-pill {{ request('status') === $st ? 'active-pill' : '' }}">
                    {{ ucfirst($st) }}
                </a>
            @endforeach
        </div>
        <form method="GET" action="{{ route('admin.orders.index') }}" class="d-flex gap-2" style="min-width: 280px;">
            @if(request('status'))
                <input type="hidden" name="status" value="{{ request('status') }}">
            @endif
            <div class="input-group input-group-sm">
                <span class="input-group-text bg-light border-end-0"><i class="bi bi-search"></i></span>
                <input type="text" name="search" class="form-control border-start-0 ps-1"
                       placeholder="Cari ID order / nama buyer…"
                       value="{{ request('search') }}">
            </div>
            <button type="submit" class="btn btn-primary btn-sm px-3">Cari</button>
        </form>
    </div>
</div>

{{-- Tabel Pesanan --}}
<div class="card border-0 shadow-sm overflow-hidden">
    <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center border-bottom">
        <h5 class="card-title fw-bold m-0 small text-uppercase text-secondary">
            <i class="bi bi-table me-1"></i> Daftar Pesanan
        </h5>
        <span class="badge bg-primary rounded-pill">
            Menampilkan {{ $orders->count() }} dari {{ $orders->total() }} pesanan
        </span>
    </div>

    <div class="table-responsive">
        <table class="table table-hover align-middle m-0">
            <thead class="table-light text-secondary text-uppercase" style="font-size: .73rem; letter-spacing: .5px;">
                <tr>
                    <th class="text-center" style="width: 50px;">No</th>
                    <th>No. Order</th>
                    <th>Buyer</th>
                    <th>Tanggal</th>
                    <th class="text-center">Item</th>
                    <th>Total</th>
                    <th class="text-center">Status</th>
                    <th class="text-center" style="width: 100px;">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($orders as $index => $order)
                    <tr class="order-row">
                        <td class="text-center text-muted fw-semibold">{{ $orders->firstItem() + $index }}</td>
                        <td>
                            <strong class="text-dark">#ORD-{{ str_pad($order->id, 5, '0', STR_PAD_LEFT) }}</strong>
                        </td>
                        <td>
                            <div class="fw-bold text-dark" style="font-size: .88rem;">{{ $order->user->name ?? '-' }}</div>
                            <small class="text-muted" style="font-size: .72rem;">{{ $order->user->email ?? '-' }}</small>
                        </td>
                        <td>
                            <div class="text-dark" style="font-size: .88rem;">{{ $order->created_at->format('d M Y') }}</div>
                            <small class="text-muted" style="font-size: .72rem;">
                                <i class="bi bi-clock me-1"></i>{{ $order->created_at->format('H:i') }}
                            </small>
                        </td>
                        <td class="text-center">
                            <span class="badge bg-light text-dark border fw-bold">
                                {{ $order->orderItems->sum('quantity') }} unit
                            </span>
                        </td>
                        <td>
                            <strong style="color: var(--red-dk);">
                                Rp {{ number_format($order->total, 0, ',', '.') }}
                            </strong>
                        </td>
                        <td class="text-center">
                            @php $status = strtolower($order->status); @endphp
                            <span class="badge-status badge-{{ $status }}">
                                {{ ucfirst($order->status) }}
                            </span>
                        </td>
                        <td class="text-center">
                            <a href="{{ route('admin.orders.show', $order) }}"
                               class="btn btn-outline-primary btn-sm d-inline-flex align-items-center gap-1"
                               title="Lihat Detail Pesanan">
                                <i class="bi bi-eye-fill"></i>
                                <span class="d-none d-md-inline">Detail</span>
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="text-center py-5">
                            <div class="text-muted">
                                <i class="bi bi-inbox fs-1 d-block mb-2 text-secondary"></i>
                                <h6 class="fw-bold mb-1">Tidak Ada Pesanan</h6>
                                <p class="small text-muted mb-0">
                                    @if(request('status') || request('search'))
                                        Tidak ditemukan pesanan dengan filter yang diterapkan.
                                        <a href="{{ route('admin.orders.index') }}" class="fw-bold text-decoration-none" style="color: var(--red);">Hapus Filter</a>
                                    @else
                                        Belum ada pesanan yang masuk dari pembeli.
                                    @endif
                                </p>
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($orders->hasPages())
        <div class="card-footer bg-white py-3 border-top d-flex justify-content-end">
            {{ $orders->links() }}
        </div>
    @endif
</div>
@endsection