@extends('layouts.admin')

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

@section('styles')
<style>
    .stat-card {
        border-radius: 1rem;
        border: 1px solid #e2e8f0;
        background: #fff;
        transition: box-shadow .2s;
    }
    .stat-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.07); }
    .badge-status { font-size: .78rem; padding: .4em .75em; border-radius: .5rem; font-weight: 600; }
    .table > tbody > tr:hover { background-color: #f8fafc; }
    .filter-bar { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; }
</style>
@endsection

@section('content')

{{-- ── Header ──────────────────────────────────────────── --}}
<div class="d-flex justify-content-between align-items-start mb-4 flex-wrap gap-2">
    <div>
        <h1 class="fw-bold fs-3 mb-0">
            <i class="bi bi-receipt-cutoff me-2 text-warning"></i> Manajemen Pesanan
        </h1>
        <p class="text-muted mb-0 mt-1">Kelola dan pantau seluruh pesanan dari pembeli.</p>
    </div>
</div>

{{-- ── Statistik Ringkas ────────────────────────────────── --}}
<div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
        <div class="stat-card p-3 text-center">
            <div class="fs-1 fw-bold text-dark">{{ $stats['total'] }}</div>
            <div class="text-muted small">Total Pesanan</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card p-3 text-center">
            <div class="fs-1 fw-bold text-warning">{{ $stats['pending'] }}</div>
            <div class="text-muted small">Menunggu</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card p-3 text-center">
            <div class="fs-1 fw-bold text-info">{{ $stats['processing'] }}</div>
            <div class="text-muted small">Diproses</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card p-3 text-center">
            <div class="fs-1 fw-bold text-success">{{ $stats['completed'] }}</div>
            <div class="text-muted small">Selesai</div>
        </div>
    </div>
</div>

{{-- ── Filter & Pencarian ────────────────────────────────── --}}
<div class="filter-bar p-3 mb-4">
    <form action="{{ route('admin.orders.index') }}" method="GET" class="row g-2 align-items-end">
        <div class="col-md-6">
            <label class="form-label small fw-semibold mb-1">Cari Pesanan</label>
            <div class="input-group">
                <span class="input-group-text bg-white border-end-0">
                    <i class="bi bi-search text-muted"></i>
                </span>
                <input type="text"
                       name="search"
                       class="form-control border-start-0 ps-0"
                       placeholder="No. pesanan, nama, atau email buyer..."
                       value="{{ request('search') }}">
            </div>
        </div>
        <div class="col-md-3">
            <label class="form-label small fw-semibold mb-1">Filter Status</label>
            <select name="status" class="form-select">
                <option value="">Semua Status</option>
                @foreach($statusOptions as $s)
                    <option value="{{ $s }}" {{ request('status') === $s ? 'selected' : '' }}>
                        {{ ucfirst($s) }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-md-3 d-flex gap-2">
            <button type="submit" class="btn btn-warning fw-semibold flex-grow-1">
                <i class="bi bi-funnel me-1"></i> Filter
            </button>
            @if(request()->hasAny(['search', 'status']))
                <a href="{{ route('admin.orders.index') }}" class="btn btn-outline-secondary">
                    <i class="bi bi-x-lg"></i>
                </a>
            @endif
        </div>
    </form>
</div>

{{-- ── Tabel Pesanan ─────────────────────────────────────── --}}
<div class="card-custom">
    <div class="d-flex justify-content-between align-items-center px-4 py-3 border-bottom">
        <h6 class="fw-bold mb-0">
            Daftar Pesanan
            <span class="badge bg-secondary-subtle text-secondary ms-1">{{ $orders->total() }}</span>
        </h6>
        @if(request()->hasAny(['search', 'status']))
            <span class="badge bg-warning-subtle text-warning border border-warning-subtle">
                <i class="bi bi-funnel-fill me-1"></i>Filter aktif
            </span>
        @endif
    </div>

    @if($orders->isNotEmpty())
        <div class="table-responsive">
            <table class="table align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="ps-4">No. Pesanan</th>
                        <th>Buyer</th>
                        <th class="text-center">Tgl. Pesanan</th>
                        <th class="text-center">Item</th>
                        <th class="text-end">Total</th>
                        <th class="text-center">Status</th>
                        <th class="text-center">Bayar</th>
                        <th class="text-center pe-4">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($orders as $order)
                        @php
                            $statusMap = [
                                'pending'    => ['warning',   'clock',        'Pending'],
                                'processing' => ['info',      'gear',          'Diproses'],
                                'shipped'    => ['primary',   'truck',         'Dikirim'],
                                'completed'  => ['success',   'check-circle',  'Selesai'],
                                'cancelled'  => ['danger',    'x-circle',      'Dibatalkan'],
                            ];
                            $sc = $statusMap[$order->status] ?? ['secondary', 'question', $order->status];
                        @endphp
                        <tr>
                            <td class="ps-4">
                                <a href="{{ route('admin.orders.show', $order) }}"
                                   class="font-monospace fw-semibold text-primary text-decoration-none">
                                    {{ $order->order_number }}
                                </a>
                            </td>
                            <td>
                                <div class="fw-semibold text-dark small">{{ $order->customer_name }}</div>
                                <div class="text-muted" style="font-size:.78rem">{{ $order->customer_email }}</div>
                            </td>
                            <td class="text-center">
                                <div class="small">{{ $order->created_at->format('d/m/Y') }}</div>
                                <div class="text-muted" style="font-size:.78rem">{{ $order->created_at->format('H:i') }} WIB</div>
                            </td>
                            <td class="text-center">
                                <span class="badge bg-secondary-subtle text-secondary border">
                                    {{ $order->orderItems->sum('quantity') }} pcs
                                </span>
                            </td>
                            <td class="text-end fw-bold">
                                Rp {{ number_format($order->total, 0, ',', '.') }}
                            </td>
                            <td class="text-center">
                                <span class="badge-status bg-{{ $sc[0] }}-subtle text-{{ $sc[0] }} border border-{{ $sc[0] }}-subtle">
                                    <i class="bi bi-{{ $sc[1] }} me-1"></i>{{ $sc[2] }}
                                </span>
                            </td>
                            <td class="text-center">
                                @if($order->payment_status === 'paid')
                                    <span class="badge bg-success-subtle text-success border border-success-subtle">
                                        <i class="bi bi-check2 me-1"></i>Lunas
                                    </span>
                                @else
                                    <span class="badge bg-danger-subtle text-danger border border-danger-subtle">
                                        <i class="bi bi-clock me-1"></i>Belum
                                    </span>
                                @endif
                            </td>
                            <td class="text-center pe-4">
                                <a href="{{ route('admin.orders.show', $order) }}"
                                   class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-eye me-1"></i>Detail
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        @if($orders->hasPages())
            <div class="px-4 py-3 border-top d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div class="text-muted small">
                    Menampilkan {{ $orders->firstItem() }}–{{ $orders->lastItem() }} dari {{ $orders->total() }} pesanan
                </div>
                {{ $orders->links() }}
            </div>
        @endif

    @else
        <div class="text-center py-5">
            <i class="bi bi-inbox display-1 text-muted"></i>
            <h5 class="fw-bold mt-3 text-muted">Tidak ada pesanan ditemukan</h5>
            @if(request()->hasAny(['search', 'status']))
                <p class="text-muted">Coba ubah filter atau kata kunci pencarian.</p>
                <a href="{{ route('admin.orders.index') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="bi bi-x-circle me-1"></i>Reset Filter
                </a>
            @else
                <p class="text-muted">Belum ada transaksi yang masuk.</p>
            @endif
        </div>
    @endif
</div>

@endsection