@extends('layouts.admin')

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

@section('content')
<div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3 mb-4">
    <div>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1 small">
                <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 fw-bold text-dark mb-0">Manajemen Pesanan</h1>
        <p class="text-muted small mb-0">Kelola dan pantau seluruh transaksi belanja pelanggan Han's Store.</p>
    </div>
</div>

<!-- Filter Status Tabs -->
<div class="card shadow-sm border-0 mb-4">
    <div class="card-body p-2">
        <div class="d-flex flex-wrap gap-1">
            <a href="{{ route('admin.orders.index', array_merge(request()->except('status', 'page'), [])) }}" 
               class="btn btn-sm rounded-pill px-3 {{ empty($currentStatus) ? 'btn-primary text-white fw-bold' : 'btn-light text-secondary' }}">
                Semua Pesanan
                <span class="badge {{ empty($currentStatus) ? 'bg-white text-primary' : 'bg-secondary-subtle text-secondary' }} rounded-pill ms-1">
                    {{ $statusCounts['all'] }}
                </span>
            </a>

            <a href="{{ route('admin.orders.index', array_merge(request()->except('page'), ['status' => 'pending'])) }}" 
               class="btn btn-sm rounded-pill px-3 {{ $currentStatus === 'pending' ? 'btn-warning text-dark fw-bold' : 'btn-light text-secondary' }}">
                <i class="bi bi-clock-history me-1"></i> Pending
                <span class="badge {{ $currentStatus === 'pending' ? 'bg-dark text-white' : 'bg-warning-subtle text-warning-emphasis' }} rounded-pill ms-1">
                    {{ $statusCounts['pending'] }}
                </span>
            </a>

            <a href="{{ route('admin.orders.index', array_merge(request()->except('page'), ['status' => 'processing'])) }}" 
               class="btn btn-sm rounded-pill px-3 {{ $currentStatus === 'processing' ? 'btn-info text-white fw-bold' : 'btn-light text-secondary' }}">
                <i class="bi bi-gear me-1"></i> Processing
                <span class="badge {{ $currentStatus === 'processing' ? 'bg-white text-info' : 'bg-info-subtle text-info-emphasis' }} rounded-pill ms-1">
                    {{ $statusCounts['processing'] }}
                </span>
            </a>

            <a href="{{ route('admin.orders.index', array_merge(request()->except('page'), ['status' => 'shipped'])) }}" 
               class="btn btn-sm rounded-pill px-3 {{ $currentStatus === 'shipped' ? 'btn-primary text-white fw-bold' : 'btn-light text-secondary' }}">
                <i class="bi bi-truck me-1"></i> Shipped
                <span class="badge {{ $currentStatus === 'shipped' ? 'bg-white text-primary' : 'bg-primary-subtle text-primary' }} rounded-pill ms-1">
                    {{ $statusCounts['shipped'] }}
                </span>
            </a>

            <a href="{{ route('admin.orders.index', array_merge(request()->except('page'), ['status' => 'completed'])) }}" 
               class="btn btn-sm rounded-pill px-3 {{ $currentStatus === 'completed' ? 'btn-success text-white fw-bold' : 'btn-light text-secondary' }}">
                <i class="bi bi-check2-circle me-1"></i> Completed
                <span class="badge {{ $currentStatus === 'completed' ? 'bg-white text-success' : 'bg-success-subtle text-success-emphasis' }} rounded-pill ms-1">
                    {{ $statusCounts['completed'] }}
                </span>
            </a>

            <a href="{{ route('admin.orders.index', array_merge(request()->except('page'), ['status' => 'cancelled'])) }}" 
               class="btn btn-sm rounded-pill px-3 {{ $currentStatus === 'cancelled' ? 'btn-danger text-white fw-bold' : 'btn-light text-secondary' }}">
                <i class="bi bi-x-circle me-1"></i> Cancelled
                <span class="badge {{ $currentStatus === 'cancelled' ? 'bg-white text-danger' : 'bg-danger-subtle text-danger-emphasis' }} rounded-pill ms-1">
                    {{ $statusCounts['cancelled'] }}
                </span>
            </a>
        </div>
    </div>
</div>

<div class="card shadow-sm border-0">
    <div class="card-header bg-white py-3 border-bottom">
        <div class="row align-items-center g-3">
            <div class="col-md-6">
                <form method="GET" action="{{ route('admin.orders.index') }}" class="d-flex gap-2">
                    @if($currentStatus)
                        <input type="hidden" name="status" value="{{ $currentStatus }}">
                    @endif
                    <div class="input-group">
                        <span class="input-group-text bg-light border-end-0 text-muted">
                            <i class="bi bi-search"></i>
                        </span>
                        <input type="text" 
                               name="search" 
                               class="form-control bg-light border-start-0 ps-0" 
                               placeholder="Cari nomor order, nama, email, no HP..." 
                               value="{{ $search }}">
                        @if ($search)
                            <a href="{{ route('admin.orders.index', $currentStatus ? ['status' => $currentStatus] : []) }}" 
                               class="btn btn-light border" 
                               title="Reset pencarian">
                                <i class="bi bi-x-lg"></i>
                            </a>
                        @endif
                    </div>
                    <button type="submit" class="btn btn-outline-primary px-3">Cari</button>
                </form>
            </div>
            <div class="col-md-6 text-md-end text-muted small">
                Menampilkan <strong>{{ $orders->total() }}</strong> total pesanan
            </div>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light text-uppercase fs-7 text-secondary">
                <tr>
                    <th scope="col" class="ps-4">No. Order</th>
                    <th scope="col">Data Buyer</th>
                    <th scope="col">Tanggal</th>
                    <th scope="col" class="text-center">Jml Item</th>
                    <th scope="col" class="text-end">Total Pembayaran</th>
                    <th scope="col" class="text-center">Status</th>
                    <th scope="col" class="pe-4 text-center" style="width: 140px;">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($orders as $order)
                    <tr>
                        <!-- Nomor Order -->
                        <td class="ps-4">
                            <span class="fw-bold text-dark font-monospace">#{{ $order->order_number }}</span>
                            <div class="text-muted small">ID: {{ $order->id }}</div>
                        </td>

                        <!-- Data Buyer -->
                        <td>
                            <div class="fw-bold text-dark">{{ $order->user->name ?? 'User Tidak Diketahui' }}</div>
                            <div class="text-muted small">{{ $order->user->email ?? '-' }}</div>
                            <div class="text-muted small"><i class="bi bi-telephone me-1"></i>{{ $order->shipping_phone }}</div>
                        </td>

                        <!-- Tanggal Order -->
                        <td class="text-secondary small">
                            <div>{{ $order->created_at->format('d M Y') }}</div>
                            <div class="text-muted">{{ $order->created_at->format('H:i') }} WIB</div>
                        </td>

                        <!-- Jumlah Item -->
                        <td class="text-center">
                            <span class="badge bg-light text-dark border px-2 py-1">
                                {{ $order->orderItems->sum('quantity') }} pcs
                            </span>
                        </td>

                        <!-- Total Pembayaran -->
                        <td class="text-end fw-bold text-primary">
                            Rp {{ number_format($order->total, 0, ',', '.') }}
                        </td>

                        <!-- Status Pesanan -->
                        <td class="text-center">
                            @if ($order->status === 'pending')
                                <span class="badge bg-warning text-dark px-3 py-1 rounded-pill fw-semibold">
                                    <i class="bi bi-clock-history me-1"></i> Pending
                                </span>
                            @elseif ($order->status === 'processing')
                                <span class="badge bg-info text-white px-3 py-1 rounded-pill fw-semibold">
                                    <i class="bi bi-gear-fill me-1"></i> Processing
                                </span>
                            @elseif ($order->status === 'shipped')
                                <span class="badge bg-primary px-3 py-1 rounded-pill fw-semibold">
                                    <i class="bi bi-truck me-1"></i> Shipped
                                </span>
                            @elseif ($order->status === 'completed')
                                <span class="badge bg-success px-3 py-1 rounded-pill fw-semibold">
                                    <i class="bi bi-check-circle-fill me-1"></i> Completed
                                </span>
                            @elseif ($order->status === 'cancelled')
                                <span class="badge bg-danger px-3 py-1 rounded-pill fw-semibold">
                                    <i class="bi bi-x-circle-fill me-1"></i> Cancelled
                                </span>
                            @else
                                <span class="badge bg-secondary px-3 py-1 rounded-pill fw-semibold text-uppercase">
                                    {{ $order->status }}
                                </span>
                            @endif
                        </td>

                        <!-- Tombol Aksi Detail -->
                        <td class="pe-4 text-center">
                            <a href="{{ route('admin.orders.show', $order->id) }}" 
                               class="btn btn-sm btn-outline-primary rounded-pill px-3 fw-semibold">
                                <i class="bi bi-eye me-1"></i> Detail
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center py-5">
                            <div class="text-muted">
                                <i class="bi bi-inbox display-4 d-block mb-3 text-secondary opacity-50"></i>
                                <h5 class="fw-bold">Tidak ada pesanan yang ditemukan</h5>
                                <p class="small text-muted mb-0">
                                    @if ($search || $currentStatus)
                                        Coba sesuaikan kata kunci pencarian atau ganti filter status.
                                    @else
                                        Belum ada pelanggan yang melakukan pemesanan belanja.
                                    @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-between align-items-center">
            <span class="text-muted small">
                Menampilkan {{ $orders->firstItem() ?? 0 }} - {{ $orders->lastItem() ?? 0 }} dari {{ $orders->total() }} pesanan
            </span>
            <div>
                {{ $orders->links('pagination::bootstrap-5') }}
            </div>
        </div>
    @endif
</div>
@endsection