@extends('layouts.admin')

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

@section('content')
<div class="row align-items-center mb-4">
    <div class="col-md-6 mb-3 mb-md-0">
        <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>
        <h2 class="h4 fw-bold mb-0 text-dark">Manajemen Pesanan</h2>
        <p class="text-muted small mb-0">Kelola dan pantau semua pesanan pembeli di Peachy Beauty.</p>
    </div>
</div>

@if(session('success'))
<div class="alert alert-success alert-dismissible fade show border-0 shadow-sm rounded-3" role="alert">
    <i class="bi bi-check-circle-fill me-2"></i> {{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif

@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm rounded-3" role="alert">
    <i class="bi bi-exclamation-triangle-fill me-2"></i> {{ session('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif

<!-- Filter Status Tab & Form Pencarian -->
<div class="card mb-4 border-0 shadow-sm">
    <div class="card-body p-3">
        <!-- Status Pills -->
        <div class="d-flex flex-wrap gap-2 mb-3">
            <a href="{{ route('admin.orders.index', ['search' => $search]) }}" 
               class="btn btn-sm rounded-pill {{ !$status ? 'btn-primary' : 'btn-outline-secondary' }}">
                Semua ({{ $statusCounts['all'] }})
            </a>
            <a href="{{ route('admin.orders.index', ['status' => 'pending', 'search' => $search]) }}" 
               class="btn btn-sm rounded-pill {{ $status === 'pending' ? 'btn-warning text-dark' : 'btn-outline-warning text-dark' }}">
                Pending ({{ $statusCounts['pending'] }})
            </a>
            <a href="{{ route('admin.orders.index', ['status' => 'processing', 'search' => $search]) }}" 
               class="btn btn-sm rounded-pill {{ $status === 'processing' ? 'btn-info text-white' : 'btn-outline-info' }}">
                Processing ({{ $statusCounts['processing'] }})
            </a>
            <a href="{{ route('admin.orders.index', ['status' => 'shipped', 'search' => $search]) }}" 
               class="btn btn-sm rounded-pill {{ $status === 'shipped' ? 'btn-secondary' : 'btn-outline-secondary' }}">
                Shipped ({{ $statusCounts['shipped'] }})
            </a>
            <a href="{{ route('admin.orders.index', ['status' => 'completed', 'search' => $search]) }}" 
               class="btn btn-sm rounded-pill {{ $status === 'completed' ? 'btn-success' : 'btn-outline-success' }}">
                Completed ({{ $statusCounts['completed'] }})
            </a>
            <a href="{{ route('admin.orders.index', ['status' => 'cancelled', 'search' => $search]) }}" 
               class="btn btn-sm rounded-pill {{ $status === 'cancelled' ? 'btn-danger' : 'btn-outline-danger' }}">
                Cancelled ({{ $statusCounts['cancelled'] }})
            </a>
        </div>

        <form action="{{ route('admin.orders.index') }}" method="GET" class="row g-2 align-items-center">
            @if($status)
                <input type="hidden" name="status" value="{{ $status }}">
            @endif
            <div class="col-md-9">
                <div class="input-group">
                    <span class="input-group-text bg-white border-end-0 text-muted">
                        <i class="bi bi-search"></i>
                    </span>
                    <input type="text" name="search" class="form-control border-start-0 ps-0" 
                           placeholder="Cari nomor order, nama buyer, atau email..." 
                           value="{{ $search }}">
                </div>
            </div>
            <div class="col-md-3 d-flex gap-2">
                <button type="submit" class="btn btn-outline-primary w-100">
                    Cari
                </button>
                @if($search || $status)
                    <a href="{{ route('admin.orders.index') }}" class="btn btn-outline-secondary w-100">
                        Reset
                    </a>
                @endif
            </div>
        </form>
    </div>
</div>

<!-- Tabel Daftar Pesanan -->
<div class="card border-0 shadow-sm">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="ps-3 py-3">Nomor Order</th>
                        <th class="py-3">Data Buyer</th>
                        <th class="py-3">Tanggal</th>
                        <th class="py-3 text-end">Total</th>
                        <th class="py-3 text-center">Status</th>
                        <th class="py-3 text-center pe-3" style="width: 140px;">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($orders as $order)
                        <tr>
                            <!-- Nomor Order -->
                            <td class="ps-3">
                                <a href="{{ route('admin.orders.show', $order) }}" class="fw-bold font-monospace text-primary text-decoration-none">
                                    {{ $order->order_number }}
                                </a>
                                <div class="small text-muted">{{ $order->orderItems->count() }} produk</div>
                            </td>

                            <!-- Data Buyer -->
                            <td>
                                <div class="fw-semibold text-dark">{{ $order->user->name ?? $order->shipping_name }}</div>
                                <div class="small text-muted">{{ $order->user->email ?? '-' }}</div>
                                <div class="small text-secondary">{{ $order->shipping_phone }}</div>
                            </td>

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

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

                            <!-- Status -->
                            <td class="text-center">
                                @php
                                    $badgeClass = match($order->status) {
                                        'pending'    => 'bg-warning text-dark',
                                        'processing' => 'bg-info text-white',
                                        'shipped'    => 'bg-primary text-white',
                                        'completed'  => 'bg-success text-white',
                                        'cancelled'  => 'bg-danger text-white',
                                        default      => 'bg-secondary text-white'
                                    };
                                @endphp
                                <span class="badge {{ $badgeClass }} px-3 py-2 rounded-pill text-uppercase font-monospace" style="font-size: 0.75rem;">
                                    {{ $order->status }}
                                </span>
                            </td>

                            <!-- Aksi -->
                            <td class="text-center pe-3">
                                <a href="{{ route('admin.orders.show', $order) }}" class="btn btn-sm btn-outline-primary rounded-pill px-3">
                                    <i class="bi bi-eye me-1"></i> Detail
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center py-5 text-muted">
                                <i class="bi bi-inbox fs-1 d-block mb-2 text-secondary opacity-50"></i>
                                Tidak ada data pesanan yang ditemukan.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($orders->hasPages())
        <div class="card-footer bg-white border-0 py-3">
            <div class="d-flex justify-content-center">
                {{ $orders->links('pagination::bootstrap-5') }}
            </div>
        </div>
    @endif
</div>
@endsection