@extends('layouts.admin')

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

@section('content')
{{-- Header & Breadcrumb --}}
<div class="d-flex flex-wrap justify-content-between align-items-center mb-4 gap-2">
    <div>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1">
                <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>
        <h1 class="h3 mb-0 fw-bold text-dark">
            <i class="bi bi-cart-check me-2 text-warning"></i>Manajemen Pesanan
        </h1>
        <p class="text-muted small mb-0">Kelola dan pantau semua pesanan masuk dari seluruh pembeli.</p>
    </div>
    <div>
        <span class="badge bg-warning text-dark fs-6 px-3 py-2 shadow-sm">
            <i class="bi bi-bag-check me-1"></i>Total: {{ $statusCounts['all'] ?? $orders->total() }} Pesanan
        </span>
    </div>
</div>

{{-- Filter Status Tabs / Pills --}}
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body p-3">
        <div class="d-flex flex-wrap gap-2 align-items-center">
            <span class="text-muted small fw-semibold me-2">
                <i class="bi bi-funnel me-1"></i>Filter Status:
            </span>
            <a href="{{ route('admin.orders.index', array_filter(['search' => $search])) }}"
               class="btn btn-sm {{ empty($status) ? 'btn-primary' : 'btn-outline-secondary' }} rounded-pill px-3">
                Semua ({{ $statusCounts['all'] ?? 0 }})
            </a>
            <a href="{{ route('admin.orders.index', array_filter(['status' => 'pending', 'search' => $search])) }}"
               class="btn btn-sm {{ $status === 'pending' ? 'btn-warning text-dark fw-bold' : 'btn-outline-warning text-dark' }} rounded-pill px-3">
                ⏳ Pending ({{ $statusCounts['pending'] ?? 0 }})
            </a>
            <a href="{{ route('admin.orders.index', array_filter(['status' => 'processing', 'search' => $search])) }}"
               class="btn btn-sm {{ $status === 'processing' ? 'btn-info text-dark fw-bold' : 'btn-outline-info text-dark' }} rounded-pill px-3">
                ⚙️ Processing ({{ $statusCounts['processing'] ?? 0 }})
            </a>
            <a href="{{ route('admin.orders.index', array_filter(['status' => 'shipped', 'search' => $search])) }}"
               class="btn btn-sm {{ $status === 'shipped' ? 'btn-primary fw-bold' : 'btn-outline-primary' }} rounded-pill px-3">
                🚚 Shipped ({{ $statusCounts['shipped'] ?? 0 }})
            </a>
            <a href="{{ route('admin.orders.index', array_filter(['status' => 'completed', 'search' => $search])) }}"
               class="btn btn-sm {{ $status === 'completed' ? 'btn-success fw-bold' : 'btn-outline-success' }} rounded-pill px-3">
                ✅ Completed ({{ $statusCounts['completed'] ?? 0 }})
            </a>
            <a href="{{ route('admin.orders.index', array_filter(['status' => 'cancelled', 'search' => $search])) }}"
               class="btn btn-sm {{ $status === 'cancelled' ? 'btn-danger fw-bold' : 'btn-outline-danger' }} rounded-pill px-3">
                ❌ Cancelled ({{ $statusCounts['cancelled'] ?? 0 }})
            </a>
        </div>
    </div>
</div>

{{-- Bar Pencarian & Info --}}
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body p-3">
        <form method="GET" action="{{ route('admin.orders.index') }}" class="row g-2 align-items-center">
            @if(!empty($status))
                <input type="hidden" name="status" value="{{ $status }}">
            @endif
            <div class="col-md-9 col-lg-10">
                <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"
                           value="{{ $search ?? '' }}"
                           class="form-control border-start-0"
                           placeholder="Cari nomor order, nama pembeli, email, atau nama penerima...">
                </div>
            </div>
            <div class="col-md-3 col-lg-2 d-flex gap-2">
                <button type="submit" class="btn btn-primary w-100 d-flex align-items-center justify-content-center gap-1">
                    <i class="bi bi-search"></i>
                    <span>Cari</span>
                </button>
                @if(!empty($search) || !empty($status))
                    <a href="{{ route('admin.orders.index') }}" class="btn btn-outline-secondary" title="Reset Filter">
                        <i class="bi bi-x-circle"></i>
                    </a>
                @endif
            </div>
        </form>
    </div>
</div>

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

    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th scope="col" class="text-center" style="width: 50px;">#</th>
                    <th scope="col">No. Order</th>
                    <th scope="col">Tanggal</th>
                    <th scope="col">Data Buyer</th>
                    <th scope="col">Penerima</th>
                    <th scope="col" class="text-center">Jml Item</th>
                    <th scope="col" class="text-end">Total</th>
                    <th scope="col" class="text-center">Status</th>
                    <th scope="col" class="text-center" style="width: 110px;">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($orders as $order)
                    <tr>
                        <td class="text-center text-muted fw-semibold">
                            {{ ($orders->currentPage() - 1) * $orders->perPage() + $loop->iteration }}
                        </td>
                        <td>
                            <span class="fw-bold text-dark font-monospace">{{ $order->order_number }}</span>
                        </td>
                        <td>
                            <div class="text-dark small">{{ $order->created_at->format('d M Y') }}</div>
                            <div class="text-muted" style="font-size: 0.75rem;">{{ $order->created_at->format('H:i') }} WIB</div>
                        </td>
                        <td>
                            {{-- Data Buyer melalui Eloquent Relationship: order->user --}}
                            @if($order->user)
                                <div class="fw-semibold text-dark">{{ $order->user->name }}</div>
                                <div class="text-muted small">{{ $order->user->email }}</div>
                            @else
                                <span class="text-muted fst-italic small">Buyer tidak ditemukan</span>
                            @endif
                        </td>
                        <td>
                            <div class="text-dark small fw-semibold">{{ $order->shipping_name }}</div>
                            <div class="text-muted small" style="font-size: 0.75rem;">{{ $order->shipping_city }}</div>
                        </td>
                        <td class="text-center">
                            <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle px-2 py-1">
                                {{ $order->order_items_count }} item
                            </span>
                        </td>
                        <td class="text-end fw-bold text-dark">
                            Rp {{ number_format($order->total_amount, 0, ',', '.') }}
                        </td>
                        <td class="text-center">
                            <span class="badge {{ $order->status_badge_class }} px-3 py-1 rounded-pill">
                                {{ $order->status_label }}
                            </span>
                        </td>
                        <td class="text-center">
                            <a href="{{ route('admin.orders.show', $order) }}"
                               class="btn btn-sm btn-outline-primary d-inline-flex align-items-center gap-1"
                               title="Lihat Detail Pesanan">
                                <i class="bi bi-eye"></i>
                                <span>Detail</span>
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="9" class="text-center py-5 text-muted">
                            <i class="bi bi-cart-x fs-1 d-block mb-3 text-secondary opacity-50"></i>
                            <div class="fw-semibold">Tidak ada pesanan ditemukan.</div>
                            <p class="small mt-1 mb-0">
                                @if(!empty($search) || !empty($status))
                                    Coba ubah kata kunci pencarian atau reset filter status.
                                @else
                                    Pesanan dari pembeli akan muncul di sini saat transaksi dilakukan.
                                @endif
                            </p>
                            @if(!empty($search) || !empty($status))
                                <a href="{{ route('admin.orders.index') }}" class="btn btn-sm btn-outline-primary mt-3">
                                    <i class="bi bi-arrow-counterclockwise me-1"></i>Reset Filter
                                </a>
                            @endif
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

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