@extends('layouts.admin')

@section('title', 'Detail Pesanan #ORD-' . str_pad($order->id, 5, '0', STR_PAD_LEFT))

@push('styles')
<style>
    .order-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 1rem;
        box-shadow: 0 4px 16px rgba(0,0,0,.04);
        overflow: hidden;
    }
    .badge-status {
        font-size: .8rem;
        font-weight: 800;
        letter-spacing: .03em;
        text-transform: uppercase;
        padding: .4rem .85rem;
        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; }

    .items-table th {
        background: var(--cream);
        color: var(--text-dark);
        font-size: .82rem;
        font-weight: 700;
        border-bottom: 2px solid var(--border);
    }
    .items-table td {
        vertical-align: middle;
        padding: 1rem .9rem;
        border-bottom: 1px solid var(--border);
    }
</style>
@endpush

@section('content')
{{-- Header Halaman & Breadcrumb --}}
<div class="mb-4 d-flex flex-wrap justify-content-between align-items-center gap-3">
    <div>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1 small">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}" class="text-decoration-none" style="color: var(--pink-dk);">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.orders.index') }}" class="text-decoration-none" style="color: var(--pink-dk);">Daftar Pesanan</a></li>
                <li class="breadcrumb-item active" aria-current="page">#ORD-{{ str_pad($order->id, 5, '0', STR_PAD_LEFT) }}</li>
            </ol>
        </nav>
        <h2 class="fs-4 fw-bold mb-0 text-dark d-flex align-items-center gap-2">
            <span>Detail Pesanan</span>
            <span style="color: var(--pink-dk);">#ORD-{{ str_pad($order->id, 5, '0', STR_PAD_LEFT) }}</span>
        </h2>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('admin.orders.index') }}" class="btn btn-outline-secondary btn-sm px-3 d-inline-flex align-items-center gap-1">
            <i class="bi bi-arrow-left"></i>
            <span>Kembali ke Daftar</span>
        </a>
    </div>
</div>

{{-- Alert Notifikasi Sukses --}}
@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show d-flex align-items-center gap-2 mb-4" role="alert">
        <i class="bi bi-check-circle-fill fs-5"></i>
        <div>{{ session('success') }}</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

{{-- Alert Error Validasi --}}
@if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
        <div class="fw-bold mb-1"><i class="bi bi-exclamation-triangle-fill me-1"></i> Terjadi kesalahan:</div>
        <ul class="mb-0 small ps-3">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

<div class="row g-4 mb-4">
    {{-- Kolom Kiri: Informasi Buyer, Status, dan Ubah Status --}}
    <div class="col-lg-4">
        {{-- Status Pesanan & Form Ubah Status --}}
        <div class="order-card p-4 mb-4">
            <h5 class="fw-bold mb-3 d-flex align-items-center gap-2 text-dark fs-6">
                <i class="bi bi-sliders2 text-primary"></i>
                <span>Kelola Status Pesanan</span>
            </h5>

            @php $currentStatus = strtolower($order->status); @endphp
            <div class="text-center p-3 rounded-3 mb-3" style="background: var(--pink-xl); border: 1px dashed var(--pink);">
                <div class="small text-muted mb-1 fw-semibold">Status Saat Ini:</div>
                <span class="badge-status badge-{{ $currentStatus }}">
                    {{ ucfirst($order->status) }}
                </span>
            </div>

            {{-- Form Update Status --}}
            <form action="{{ route('admin.orders.update-status', $order) }}" method="POST" class="mt-3">
                @csrf
                @method('PATCH')
                <div class="mb-3">
                    <label for="statusSelect" class="form-label small fw-bold text-dark">Ubah Status Menjadi:</label>
                    <select name="status" id="statusSelect" class="form-select form-select-sm" required>
                        @foreach($allowedStatuses as $st)
                            <option value="{{ $st }}" {{ $order->status === $st ? 'selected' : '' }}>
                                {{ ucfirst($st) }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <button type="submit" class="btn btn-primary btn-sm w-100 fw-bold d-inline-flex align-items-center justify-content-center gap-1">
                    <i class="bi bi-check2-circle"></i>
                    <span>Simpan Perubahan Status</span>
                </button>
            </form>
        </div>

        {{-- Informasi Buyer & Pengiriman --}}
        <div class="order-card p-4">
            <h5 class="fw-bold mb-3 d-flex align-items-center gap-2 text-dark fs-6">
                <i class="bi bi-person-badge-fill" style="color: var(--pink-dk);"></i>
                <span>Data Pembeli & Pengiriman</span>
            </h5>

            <div class="mb-3 pb-3 border-bottom">
                <div class="text-muted fw-bold text-uppercase" style="font-size: .7rem;">Nama Pelanggan</div>
                <div class="fw-bold text-dark fs-6">{{ $order->user->name ?? 'User Tidak Diketahui' }}</div>
                <div class="small text-muted"><i class="bi bi-envelope me-1"></i>{{ $order->user->email ?? '-' }}</div>
            </div>

            <div class="mb-3 pb-3 border-bottom">
                <div class="text-muted fw-bold text-uppercase" style="font-size: .7rem;">Nomor Telepon / WhatsApp</div>
                <div class="text-dark fw-semibold small">
                    <i class="bi bi-telephone me-1 text-primary"></i>{{ $order->phone ?? '-' }}
                </div>
            </div>

            <div class="mb-3 pb-3 border-bottom">
                <div class="text-muted fw-bold text-uppercase" style="font-size: .7rem;">Alamat Pengiriman</div>
                <div class="p-2.5 rounded bg-light border text-dark small" style="line-height: 1.5;">
                    {{ $order->shipping_address ?? '-' }}
                </div>
            </div>

            @if($order->notes)
                <div>
                    <div class="text-muted fw-bold text-uppercase" style="font-size: .7rem;">Catatan Pembeli</div>
                    <div class="p-2.5 rounded bg-light border text-muted small fst-italic">
                        "{{ $order->notes }}"
                    </div>
                </div>
            @endif
        </div>
    </div>

    {{-- Kolom Kanan: Detail Item Produk yang Dibeli --}}
    <div class="col-lg-8">
        <div class="order-card">
            <div class="p-3 px-4 border-bottom bg-white d-flex justify-content-between align-items-center">
                <h5 class="fw-bold mb-0 text-dark d-flex align-items-center gap-2 fs-6">
                    <i class="bi bi-box-seam-fill" style="color: var(--pink-dk);"></i>
                    <span>Rincian Produk yang Dipesan</span>
                </h5>
                <span class="badge rounded-pill bg-light text-muted border px-3 py-1">
                    {{ $order->orderItems->count() }} Macam Produk
                </span>
            </div>

            <div class="table-responsive">
                <table class="table items-table mb-0">
                    <thead>
                        <tr>
                            <th class="ps-4">Produk</th>
                            <th class="text-center">Harga Satuan</th>
                            <th class="text-center">Jumlah</th>
                            <th class="text-end pe-4">Subtotal</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($order->orderItems as $item)
                            <tr>
                                <td class="ps-4">
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="rounded-3 d-flex align-items-center justify-content-center"
                                             style="width: 44px; height: 44px; background: var(--pink-xl); color: var(--pink-dk); font-size: 1.25rem; flex-shrink: 0;">
                                            <i class="bi bi-bag-check"></i>
                                        </div>
                                        <div>
                                            <div class="fw-bold text-dark" style="font-size: .95rem;">
                                                {{ $item->product_name }}
                                            </div>
                                            @if($item->product && $item->product->category)
                                                <span class="badge bg-light text-muted border" style="font-size: .7rem;">
                                                    <i class="bi bi-tag me-1"></i>{{ $item->product->category->name }}
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td class="text-center text-dark small">
                                    Rp {{ number_format($item->price, 0, ',', '.') }}
                                </td>
                                <td class="text-center">
                                    <span class="badge rounded-pill px-3 py-1 text-dark border bg-light fw-bold">
                                        {{ $item->quantity }}
                                    </span>
                                </td>
                                <td class="text-end pe-4 fw-bold" style="color: var(--pink-dk);">
                                    Rp {{ number_format($item->subtotal, 0, ',', '.') }}
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center py-4 text-muted">
                                    Tidak ada item produk dalam pesanan ini.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                    <tfoot class="table-light">
                        <tr>
                            <td colspan="3" class="text-end fw-semibold text-muted py-3">
                                Total Kuantitas Barang:
                            </td>
                            <td class="text-end pe-4 fw-bold py-3 text-dark">
                                {{ $order->orderItems->sum('quantity') }} Unit
                            </td>
                        </tr>
                        <tr style="border-top: 2px solid var(--border);">
                            <td colspan="3" class="text-end fw-bold py-3 text-dark fs-6">
                                Total Pembayaran:
                            </td>
                            <td class="text-end pe-4 fw-bold py-3 fs-5" style="color: var(--pink-dk);">
                                Rp {{ number_format($order->total, 0, ',', '.') }}
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            <div class="p-3 px-4 border-top bg-white d-flex justify-content-between align-items-center">
                <div class="small text-muted">
                    <i class="bi bi-clock me-1"></i> Dibuat pada: {{ $order->created_at->format('d M Y, H:i') }} WIB
                </div>
                <a href="{{ route('admin.orders.index') }}" class="btn btn-outline-secondary btn-sm px-3">
                    <i class="bi bi-arrow-left me-1"></i> Kembali ke Daftar Pesanan
                </a>
            </div>
        </div>
    </div>
</div>
@endsection