@extends('layouts.admin')

@section('title', 'Detail Pesanan #' . $order->order_number)

@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">
                    <a href="{{ route('admin.orders.index') }}" class="text-decoration-none">Pesanan</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">#{{ $order->order_number }}</li>
            </ol>
        </nav>
        <h1 class="h3 mb-0 fw-bold text-dark">
            <i class="bi bi-receipt me-2 text-primary"></i>Detail Pesanan
        </h1>
        <p class="text-muted small mb-0">
            Order <span class="font-monospace fw-semibold">{{ $order->order_number }}</span>
            &middot; {{ $order->created_at->format('d M Y, H:i') }} WIB
        </p>
    </div>
    <a href="{{ route('admin.orders.index') }}" class="btn btn-outline-secondary d-flex align-items-center gap-2">
        <i class="bi bi-arrow-left"></i>
        <span>Kembali ke Daftar</span>
    </a>
</div>

{{-- Validation Errors --}}
@if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show d-flex align-items-start gap-2" role="alert">
        <i class="bi bi-exclamation-triangle-fill mt-1"></i>
        <div>
            <strong>Gagal mengubah status:</strong>
            <ul class="mb-0 mt-1">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

<div class="row g-4">
    {{-- Kolom Kiri: Info Pesanan & Produk --}}
    <div class="col-lg-8">

        {{-- Card: Produk yang Dibeli --}}
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3">
                <h5 class="card-title mb-0 fw-bold text-dark">
                    <i class="bi bi-box-seam me-1 text-primary"></i> Produk yang Dibeli
                </h5>
            </div>
            <div class="table-responsive">
                <table class="table align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Produk</th>
                            <th scope="col" class="text-end">Harga Satuan</th>
                            <th scope="col" class="text-center">Qty</th>
                            <th scope="col" class="text-end">Subtotal</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{-- Iterasi order items menggunakan Eloquent Relationship: order->orderItems->product --}}
                        @foreach($order->orderItems as $item)
                            <tr>
                                <td class="text-muted fw-semibold">{{ $loop->iteration }}</td>
                                <td>
                                    <div class="d-flex align-items-center gap-3">
                                        {{-- Gambar produk melalui relasi item->product --}}
                                        @if($item->product && $item->product->image)
                                            <img src="{{ asset('storage/' . $item->product->image) }}"
                                                 alt="{{ $item->product_name }}"
                                                 class="img-thumbnail"
                                                 style="width: 48px; height: 48px; object-fit: cover;">
                                        @else
                                            <div class="bg-light text-muted d-flex align-items-center justify-content-center img-thumbnail"
                                                 style="width: 48px; height: 48px;">
                                                <i class="bi bi-image"></i>
                                            </div>
                                        @endif
                                        <div>
                                            <div class="fw-semibold text-dark">{{ $item->product_name }}</div>
                                            @if(!$item->product)
                                                <span class="badge bg-secondary-subtle text-secondary small">Produk dihapus</span>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td class="text-end text-muted">
                                    Rp {{ number_format($item->price, 0, ',', '.') }}
                                </td>
                                <td class="text-center">
                                    <span class="badge bg-light text-dark border">{{ $item->quantity }}</span>
                                </td>
                                <td class="text-end fw-semibold text-dark">
                                    Rp {{ number_format($item->subtotal, 0, ',', '.') }}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot class="table-light">
                        <tr>
                            <td colspan="4" class="text-end fw-bold text-dark py-3">
                                Total Pembayaran:
                            </td>
                            <td class="text-end fw-bold text-primary fs-5 py-3">
                                Rp {{ number_format($order->total_amount, 0, ',', '.') }}
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>

        {{-- Card: Alamat Pengiriman --}}
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white py-3">
                <h5 class="card-title mb-0 fw-bold text-dark">
                    <i class="bi bi-geo-alt me-1 text-danger"></i> Alamat Pengiriman
                </h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-sm-6">
                        <div class="text-muted small text-uppercase fw-semibold mb-1">Nama Penerima</div>
                        <div class="fw-semibold text-dark">{{ $order->shipping_name }}</div>
                    </div>
                    <div class="col-sm-6">
                        <div class="text-muted small text-uppercase fw-semibold mb-1">Nomor Telepon</div>
                        <div class="fw-semibold text-dark">{{ $order->shipping_phone }}</div>
                    </div>
                    <div class="col-sm-6">
                        <div class="text-muted small text-uppercase fw-semibold mb-1">Kota</div>
                        <div class="fw-semibold text-dark">{{ $order->shipping_city }}</div>
                    </div>
                    <div class="col-sm-6">
                        <div class="text-muted small text-uppercase fw-semibold mb-1">Kode Pos</div>
                        <div class="fw-semibold text-dark">{{ $order->shipping_postal_code }}</div>
                    </div>
                    <div class="col-12">
                        <div class="text-muted small text-uppercase fw-semibold mb-1">Alamat Lengkap</div>
                        <div class="fw-semibold text-dark">{{ $order->shipping_address }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Kolom Kanan: Info Buyer & Update Status --}}
    <div class="col-lg-4">

        {{-- Card: Data Buyer --}}
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3">
                <h5 class="card-title mb-0 fw-bold text-dark">
                    <i class="bi bi-person-circle me-1 text-info"></i> Data Buyer
                </h5>
            </div>
            <div class="card-body">
                {{-- Menggunakan Eloquent Relationship: order->user --}}
                @if($order->user)
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="rounded-circle bg-primary d-flex align-items-center justify-content-center text-white fw-bold"
                             style="width: 48px; height: 48px; font-size: 1.2rem; flex-shrink: 0;">
                            {{ strtoupper(substr($order->user->name, 0, 1)) }}
                        </div>
                        <div>
                            <div class="fw-bold text-dark">{{ $order->user->name }}</div>
                            <div class="text-muted small">{{ $order->user->email }}</div>
                        </div>
                    </div>
                    <hr class="my-2">
                    <div class="d-flex justify-content-between small py-1">
                        <span class="text-muted">Role</span>
                        <span class="badge bg-info-subtle text-info border border-info-subtle">{{ ucfirst($order->user->role) }}</span>
                    </div>
                    <div class="d-flex justify-content-between small py-1">
                        <span class="text-muted">Bergabung</span>
                        <span class="fw-semibold">{{ $order->user->created_at->format('d M Y') }}</span>
                    </div>
                @else
                    <div class="text-center text-muted py-3">
                        <i class="bi bi-person-x fs-2 d-block mb-2"></i>
                        <small>Data buyer tidak ditemukan</small>
                    </div>
                @endif
            </div>
        </div>

        {{-- Card: Status Pesanan Saat Ini --}}
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3">
                <h5 class="card-title mb-0 fw-bold text-dark">
                    <i class="bi bi-info-circle me-1 text-warning"></i> Status Pesanan
                </h5>
            </div>
            <div class="card-body text-center py-4">
                <span class="badge {{ $order->status_badge_class }} px-4 py-2 fs-6 rounded-pill mb-2">
                    {{ $order->status_label }}
                </span>
                <div class="text-muted small mt-1">Status saat ini</div>
            </div>
        </div>

        {{-- Card: Ubah Status Pesanan --}}
        <div class="card border-0 shadow-sm border-start border-warning border-3">
            <div class="card-header bg-white py-3">
                <h5 class="card-title mb-0 fw-bold text-dark">
                    <i class="bi bi-pencil-square me-1 text-warning"></i> Ubah Status Pesanan
                </h5>
            </div>
            <div class="card-body">
                {{--
                    Form untuk mengubah status pesanan.
                    Method PATCH + Validation di Admin\OrderController@updateStatus
                    Status yang diperbolehkan: pending, processing, shipped, completed, cancelled
                --}}
                <form id="form-update-status"
                      method="POST"
                      action="{{ route('admin.orders.updateStatus', $order) }}">
                    @csrf
                    @method('PATCH')

                    <div class="mb-3">
                        <label for="status" class="form-label fw-semibold text-dark small text-uppercase">
                            Pilih Status Baru
                        </label>
                        <select id="status"
                                name="status"
                                class="form-select @error('status') is-invalid @enderror">
                            <option value="" disabled>-- Pilih Status --</option>
                            <option value="pending"    {{ $order->status === 'pending'    ? 'selected' : '' }}>
                                ⏳ Pending (Menunggu Konfirmasi)
                            </option>
                            <option value="processing" {{ $order->status === 'processing' ? 'selected' : '' }}>
                                ⚙️ Processing (Diproses)
                            </option>
                            <option value="shipped"    {{ $order->status === 'shipped'    ? 'selected' : '' }}>
                                🚚 Shipped (Dikirim)
                            </option>
                            <option value="completed"  {{ $order->status === 'completed'  ? 'selected' : '' }}>
                                ✅ Completed (Selesai)
                            </option>
                            <option value="cancelled"  {{ $order->status === 'cancelled'  ? 'selected' : '' }}>
                                ❌ Cancelled (Dibatalkan)
                            </option>
                        </select>
                        @error('status')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text text-muted mt-1">
                            Hanya 5 status di atas yang diperbolehkan.
                        </div>
                    </div>

                    <div class="d-grid">
                        <button type="submit"
                                id="btn-update-status"
                                class="btn btn-warning fw-bold d-flex align-items-center justify-content-center gap-2">
                            <i class="bi bi-check2-circle"></i>
                            <span>Simpan Perubahan Status</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>
@endsection