@extends('layouts.admin')

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

@section('styles')
<style>
    .info-label  { font-size: .78rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
    .info-value  { font-size: .95rem; color: #1e293b; font-weight: 500; }
    .status-pill { font-size: .82rem; padding: .45em .9em; border-radius: .6rem; font-weight: 600; }
    .section-card { border: 1px solid #e2e8f0; border-radius: 1rem; background: #fff; overflow: hidden; }
    .section-card-header { background: #f8fafc; padding: .85rem 1.25rem; border-bottom: 1px solid #e2e8f0; font-weight: 700; font-size: .9rem; }
    .change-status-btn { transition: all .15s; }
    .change-status-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,.1); }
</style>
@endsection

@section('content')

{{-- ── Breadcrumb + Header ─────────────────────────────── --}}
<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
        <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 font-monospace">{{ $order->order_number }}</li>
    </ol>
</nav>

@php
    $statusMap = [
        'pending'    => ['warning',   'clock',        'Pending'],
        'processing' => ['info',      'gear',          'Diproses'],
        'shipped'    => ['primary',   'truck',         'Dikirim'],
        'completed'  => ['success',   'check-circle',  'Selesai'],
        'cancelled'  => ['danger',    'x-circle',      'Dibatalkan'],
    ];
    $sc = $statusMap[$order->status] ?? ['secondary', 'question', $order->status];
@endphp

<div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-4">
    <div>
        <h1 class="fw-bold fs-3 mb-1">
            <i class="bi bi-receipt text-warning me-2"></i>Detail Pesanan
        </h1>
        <p class="font-monospace text-muted mb-0">{{ $order->order_number }}</p>
    </div>
    <span class="status-pill bg-{{ $sc[0] }}-subtle text-{{ $sc[0] }} border border-{{ $sc[0] }}-subtle align-self-center">
        <i class="bi bi-{{ $sc[1] }} me-1"></i>{{ $sc[2] }}
    </span>
</div>

<div class="row g-4">

    {{-- ══════════════════════════════════
         KOLOM KIRI — Produk & Ringkasan
    ══════════════════════════════════ --}}
    <div class="col-lg-8">

        {{-- ─── Daftar Produk yang Dibeli ─────────────────── --}}
        <div class="section-card mb-4">
            <div class="section-card-header">
                <i class="bi bi-box-seam me-2 text-primary"></i>Produk yang Dibeli
                <span class="badge bg-secondary-subtle text-secondary ms-1">{{ $order->orderItems->count() }} jenis</span>
            </div>
            <div class="table-responsive">
                <table class="table align-middle mb-0">
                    <thead class="table-light" style="font-size:.82rem">
                        <tr>
                            <th class="ps-4">Produk</th>
                            <th class="text-center">Kategori</th>
                            <th class="text-center">Harga Satuan</th>
                            <th class="text-center">Qty</th>
                            <th class="text-end pe-4">Subtotal</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($order->orderItems as $item)
                            <tr>
                                <td class="ps-4">
                                    <div class="d-flex align-items-center gap-3">
                                        {{-- Gambar Produk --}}
                                        @if($item->product && $item->product->image)
                                            <img src="{{ Storage::url($item->product->image) }}"
                                                 alt="{{ $item->product_name }}"
                                                 class="rounded-3 border"
                                                 style="width:52px;height:52px;object-fit:cover;flex-shrink:0">
                                        @else
                                            <div class="bg-secondary-subtle text-secondary rounded-3 d-flex align-items-center justify-content-center border flex-shrink-0"
                                                 style="width:52px;height:52px">
                                                <i class="bi bi-image fs-5"></i>
                                            </div>
                                        @endif
                                        <div>
                                            <div class="fw-semibold" style="font-size:.9rem">
                                                {{ $item->product_name }}
                                            </div>
                                            @if($item->product)
                                                <div class="text-muted" style="font-size:.78rem">
                                                    SKU: {{ $item->product->sku ?? '-' }}
                                                </div>
                                            @else
                                                <div class="text-danger" style="font-size:.78rem">
                                                    <i class="bi bi-exclamation-triangle-fill me-1"></i>Produk dihapus
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td class="text-center">
                                    <span class="badge bg-secondary-subtle text-secondary border" style="font-size:.75rem">
                                        {{ $item->product?->category?->name ?? '-' }}
                                    </span>
                                </td>
                                <td class="text-center text-secondary" style="font-size:.88rem">
                                    Rp {{ number_format($item->price, 0, ',', '.') }}
                                </td>
                                <td class="text-center">
                                    <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-1">
                                        {{ $item->quantity }}
                                    </span>
                                </td>
                                <td class="text-end pe-4 fw-bold text-primary">
                                    Rp {{ number_format($item->subtotal, 0, ',', '.') }}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot class="table-light" style="font-size:.88rem">
                        <tr>
                            <td colspan="4" class="text-end text-muted ps-4">Subtotal Produk</td>
                            <td class="text-end pe-4 fw-semibold">
                                Rp {{ number_format($order->subtotal, 0, ',', '.') }}
                            </td>
                        </tr>
                        <tr>
                            <td colspan="4" class="text-end text-muted ps-4">Ongkos Kirim</td>
                            <td class="text-end pe-4 fw-semibold text-success">
                                {{ $order->shipping_fee > 0
                                    ? 'Rp ' . number_format($order->shipping_fee, 0, ',', '.')
                                    : 'Gratis' }}
                            </td>
                        </tr>
                        @if($order->discount > 0)
                            <tr>
                                <td colspan="4" class="text-end text-muted ps-4">Diskon</td>
                                <td class="text-end pe-4 fw-semibold text-danger">
                                    − Rp {{ number_format($order->discount, 0, ',', '.') }}
                                </td>
                            </tr>
                        @endif
                        <tr class="fw-bold fs-6">
                            <td colspan="4" class="text-end ps-4">Total Pembayaran</td>
                            <td class="text-end pe-4 text-primary fs-5">
                                Rp {{ number_format($order->total, 0, ',', '.') }}
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>

        {{-- ─── Informasi Pesanan ──────────────────────────── --}}
        <div class="section-card">
            <div class="section-card-header">
                <i class="bi bi-info-circle me-2 text-info"></i>Informasi Pesanan
            </div>
            <div class="p-4">
                <div class="row g-3">
                    <div class="col-sm-6 col-md-4">
                        <div class="info-label mb-1">Tanggal Pesanan</div>
                        <div class="info-value">{{ $order->created_at->format('d M Y') }}</div>
                        <div class="text-muted small">{{ $order->created_at->format('H:i') }} WIB</div>
                    </div>
                    <div class="col-sm-6 col-md-4">
                        <div class="info-label mb-1">Metode Bayar</div>
                        <div class="info-value">{{ $order->payment_method ?? '— Belum ditentukan —' }}</div>
                    </div>
                    <div class="col-sm-6 col-md-4">
                        <div class="info-label mb-1">Status Pembayaran</div>
                        @if($order->payment_status === 'paid')
                            <span class="badge bg-success-subtle text-success border border-success-subtle">
                                <i class="bi bi-check2-circle me-1"></i>Lunas
                            </span>
                        @else
                            <span class="badge bg-danger-subtle text-danger border border-danger-subtle">
                                <i class="bi bi-clock me-1"></i>Belum Dibayar
                            </span>
                        @endif
                    </div>
                    @if($order->shipping_address)
                        <div class="col-12">
                            <div class="info-label mb-1">Alamat Pengiriman</div>
                            <div class="info-value">{{ $order->shipping_address }}</div>
                        </div>
                    @endif
                    @if($order->notes)
                        <div class="col-12">
                            <div class="info-label mb-1">Catatan Buyer</div>
                            <div class="info-value fst-italic text-secondary">{{ $order->notes }}</div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- ══════════════════════════════════
         KOLOM KANAN — Buyer & Update Status
    ══════════════════════════════════ --}}
    <div class="col-lg-4">

        {{-- ─── Data Buyer ─────────────────────────────────── --}}
        <div class="section-card mb-4">
            <div class="section-card-header">
                <i class="bi bi-person-circle me-2 text-warning"></i>Data Buyer
            </div>
            <div class="p-4">
                <div class="d-flex align-items-center gap-3 mb-3">
                    <div class="d-flex align-items-center justify-content-center rounded-circle bg-warning-subtle text-warning border border-warning-subtle"
                         style="width:48px;height:48px;font-size:1.3rem;flex-shrink:0">
                        <i class="bi bi-person-fill"></i>
                    </div>
                    <div>
                        <div class="fw-bold">{{ $order->customer_name }}</div>
                        <div class="text-muted small">{{ $order->customer_email }}</div>
                    </div>
                </div>
                <hr class="my-2">
                @if($order->user)
                    <div class="mb-2">
                        <div class="info-label mb-1">ID Pengguna</div>
                        <div class="info-value font-monospace">#{{ $order->user->id }}</div>
                    </div>
                    <div class="mb-2">
                        <div class="info-label mb-1">Nama Akun</div>
                        <div class="info-value">{{ $order->user->name }}</div>
                    </div>
                    <div>
                        <div class="info-label mb-1">Email Akun</div>
                        <div class="info-value">{{ $order->user->email }}</div>
                    </div>
                @else
                    <div class="text-muted small fst-italic">
                        <i class="bi bi-exclamation-triangle-fill text-warning me-1"></i>
                        Akun buyer tidak ditemukan.
                    </div>
                @endif
            </div>
        </div>

        {{-- ─── Ubah Status Pesanan ────────────────────────── --}}
        <div class="section-card mb-4">
            <div class="section-card-header">
                <i class="bi bi-arrow-left-right me-2 text-success"></i>Ubah Status Pesanan
            </div>
            <div class="p-4">
                {{-- Status saat ini --}}
                <div class="mb-3">
                    <div class="info-label mb-1">Status Saat Ini</div>
                    <span class="status-pill bg-{{ $sc[0] }}-subtle text-{{ $sc[0] }} border border-{{ $sc[0] }}-subtle">
                        <i class="bi bi-{{ $sc[1] }} me-1"></i>{{ $sc[2] }}
                    </span>
                </div>

                {{-- Form ubah status --}}
                <form action="{{ route('admin.orders.updateStatus', $order) }}"
                      method="POST"
                      id="statusForm">
                    @csrf
                    @method('PATCH')

                    <div class="mb-3">
                        <label for="status" class="form-label fw-semibold small">
                            Pilih Status Baru
                            <span class="text-danger">*</span>
                        </label>
                        <select name="status"
                                id="status"
                                class="form-select @error('status') is-invalid @enderror"
                                required>
                            @foreach($statusOptions as $statusVal)
                                @php
                                    $sm = $statusMap[$statusVal] ?? ['secondary', 'question', ucfirst($statusVal)];
                                @endphp
                                <option value="{{ $statusVal }}"
                                        {{ $order->status === $statusVal ? 'selected' : '' }}>
                                    {{ $sm[2] }}
                                </option>
                            @endforeach
                        </select>
                        @error('status')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text text-muted small mt-1">
                            Status yang tersedia: Pending, Diproses, Dikirim, Selesai, Dibatalkan.
                        </div>
                    </div>

                    <button type="submit"
                            class="btn btn-warning fw-bold w-100 change-status-btn"
                            onclick="return confirm('Ubah status pesanan ini?')">
                        <i class="bi bi-check2-circle me-2"></i>Simpan Perubahan
                    </button>
                </form>
            </div>
        </div>

        {{-- ─── Tombol Navigasi ────────────────────────────── --}}
        <a href="{{ route('admin.orders.index') }}" class="btn btn-outline-secondary w-100">
            <i class="bi bi-arrow-left me-1"></i>Kembali ke Daftar Pesanan
        </a>
    </div>

</div>
@endsection