@extends('layouts.admin')

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

@section('content')
<div class="d-flex flex-wrap justify-content-between align-items-center mb-4 gap-2">
    <div>
        <a href="{{ route('admin.orders.index') }}" class="btn btn-outline-secondary btn-sm mb-2 d-inline-flex align-items-center gap-1">
            <i class="bi bi-arrow-left"></i> Kembali ke Daftar Pesanan
        </a>
        <h2 class="h4 fw-bold mb-1">
            <span class="text-gradient-pink-purple">Detail Pesanan</span> <span class="font-monospace ms-1" style="color: #c084fc;">#{{ $order->order_number }}</span>
        </h2>
        <p class="small mb-0" style="color: #d8b4fe;">
            Tanggal Transaksi: <strong style="color: #f472b6;">{{ $order->created_at->format('d F Y, H:i') }} WIB</strong>
        </p>
    </div>

    <div>
        @php
            $badgeClass = match(strtolower($order->status)) {
                'pending'    => 'bg-warning text-dark border-warning',
                'processing' => 'bg-info text-white border-info',
                'shipped'    => 'bg-primary text-white border-primary',
                'completed'  => 'bg-success text-white border-success',
                'cancelled'  => 'bg-danger text-white border-danger',
                default      => 'bg-secondary text-white'
            };
            $icon = match(strtolower($order->status)) {
                'pending'    => 'bi-hourglass-split',
                'processing' => 'bi-arrow-repeat',
                'shipped'    => 'bi-truck',
                'completed'  => 'bi-check2-circle',
                'cancelled'  => 'bi-x-circle',
                default      => 'bi-info-circle'
            };
        @endphp
        <span class="badge {{ $badgeClass }} border px-3 py-2 fs-6 rounded-pill text-uppercase">
            <i class="bi {{ $icon }} me-1"></i> Status: {{ $order->status }}
        </span>
    </div>
</div>

<div class="row g-4">
    {{-- Kolom Kiri: Rincian Produk yang Dibeli --}}
    <div class="col-lg-8">
        {{-- Card Produk yang Dibeli --}}
        <div class="card card-custom mb-4">
            <div class="card-header border-bottom py-3 d-flex justify-content-between align-items-center">
                <span class="fw-bold" style="color: #f472b6;">
                    <i class="bi bi-cart-check-fill me-2" style="color: #c084fc;"></i>Produk yang Dibeli
                </span>
                <span class="badge rounded-pill" style="background: rgba(168, 85, 247, 0.18); color: #d8b4fe; border: 1px solid rgba(168, 85, 247, 0.35);">
                    {{ $order->orderItems->count() }} Jenis Produk
                </span>
            </div>
            <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 scope="col" style="width: 60px;" class="text-center">#</th>
                                <th scope="col">Produk</th>
                                <th scope="col" class="text-end">Harga Satuan</th>
                                <th scope="col" class="text-center">Quantity</th>
                                <th scope="col" class="text-end">Subtotal</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($order->orderItems as $index => $item)
                                <tr>
                                    <td class="text-center fw-semibold" style="color: #c4b5fd;">
                                        {{ $index + 1 }}
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center gap-3">
                                            <div style="width: 48px; height: 48px; border-radius: 8px; background: rgba(168, 85, 247, 0.12); border: 1px solid rgba(192, 132, 252, 0.25); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;">
                                                @if($item->product && $item->product->image)
                                                    <img src="{{ asset('storage/' . $item->product->image) }}" alt="{{ $item->product->name }}" style="width: 100%; height: 100%; object-fit: cover;">
                                                @else
                                                    <i class="bi bi-box fs-4" style="color: #c084fc;"></i>
                                                @endif
                                            </div>
                                            <div>
                                                <div class="fw-bold">
                                                    @if($item->product)
                                                        <a href="{{ route('admin.products.edit', $item->product->id) }}" class="text-decoration-none fw-bold" style="color: #fdf2f8;" title="Edit Produk">
                                                            {{ $item->product->name }} <i class="bi bi-pencil-square small" style="color: #d8b4fe;"></i>
                                                        </a>
                                                    @else
                                                        <span style="color: #d8b4fe;">{{ 'Produk #' . $item->product_id . ' (Dihapus)' }}</span>
                                                    @endif
                                                </div>
                                                @if($item->product && $item->product->category)
                                                    <div class="small" style="color: #d8b4fe;">
                                                        Kategori: <span class="badge" style="background: rgba(168, 85, 247, 0.18); color: #d8b4fe; border: 1px solid rgba(168, 85, 247, 0.35);">{{ $item->product->category->name }}</span>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-end fw-semibold" style="color: #d8b4fe;">
                                        Rp {{ number_format($item->price, 0, ',', '.') }}
                                    </td>
                                    <td class="text-center">
                                        <span class="badge px-3 py-1 fw-bold fs-6" style="background: rgba(236, 72, 153, 0.18); color: #f472b6; border: 1px solid rgba(236, 72, 153, 0.35);">
                                            &times; {{ $item->quantity }}
                                        </span>
                                    </td>
                                    <td class="text-end fw-bold fs-6" style="color: #f472b6;">
                                        Rp {{ number_format($item->subtotal, 0, ',', '.') }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot class="table-light">
                            <tr>
                                <th colspan="3" class="text-end" style="color: #d8b4fe;">Total Item:</th>
                                <th class="text-center fw-bold" style="color: #e9d5ff;">{{ $order->orderItems->sum('quantity') }} pcs</th>
                                <th class="text-end fw-bold fs-5" style="color: #ec4899;">
                                    Rp {{ number_format($order->total_price, 0, ',', '.') }}
                                </th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>

        {{-- Card Informasi Pengiriman & Catatan --}}
        <div class="card card-custom">
            <div class="card-header border-bottom py-3">
                <span class="fw-bold" style="color: #f472b6;">
                    <i class="bi bi-geo-alt-fill me-2" style="color: #c084fc;"></i>Informasi Alamat Pengiriman & Catatan
                </span>
            </div>
            <div class="card-body p-4">
                <div class="row g-3">
                    <div class="col-md-7">
                        <label class="form-label small fw-bold text-uppercase" style="color: #d8b4fe;">
                            <i class="bi bi-geo-alt me-1" style="color: #f472b6;"></i> Alamat Lengkap Pengiriman
                        </label>
                        <div class="p-3 rounded border" style="background: rgba(168, 85, 247, 0.08); border-color: rgba(192, 132, 252, 0.22) !important; color: #fdf2f8;">
                            {{ $order->shipping_address ?? 'Alamat pengiriman tidak diisi.' }}
                        </div>
                    </div>
                    <div class="col-md-5">
                        <label class="form-label small fw-bold text-uppercase" style="color: #d8b4fe;">
                            <i class="bi bi-chat-text me-1" style="color: #c084fc;"></i> Catatan dari Buyer
                        </label>
                        <div class="p-3 rounded border" style="background: rgba(168, 85, 247, 0.08); border-color: rgba(192, 132, 252, 0.22) !important; color: #fdf2f8;">
                            {{ $order->notes ?? 'Tidak ada catatan pesanan khusus.' }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Kolom Kanan: Ubah Status Pesanan & Data Buyer --}}
    <div class="col-lg-4">
        {{-- Card Ubah Status Pesanan --}}
        <div class="card card-custom mb-4" style="border-color: rgba(236, 72, 153, 0.35) !important;">
            <div class="card-header py-3" style="background: linear-gradient(135deg, rgba(236, 72, 153, 0.35) 0%, rgba(139, 92, 246, 0.45) 100%); border-bottom: 1px solid rgba(236, 72, 153, 0.3);">
                <h6 class="mb-0 fw-bold d-flex align-items-center gap-2" style="color: #fdf2f8;">
                    <i class="bi bi-pencil-fill" style="color: #f472b6;"></i> Ubah Status Pesanan
                </h6>
            </div>
            <div class="card-body p-4">
                <form action="{{ route('admin.orders.update-status', $order->id) }}" method="POST">
                    @csrf
                    @method('PATCH')

                    <div class="mb-3">
                        <label for="statusSelect" class="form-label fw-bold small text-uppercase" style="color: #d8b4fe;">
                            Pilih Status Baru:
                        </label>
                        <select name="status" id="statusSelect" class="form-select @error('status') is-invalid @enderror" required>
                            @foreach ($allowedStatuses as $st)
                                <option value="{{ $st }}" {{ strtolower($order->status) === $st ? 'selected' : '' }}>
                                    {{ strtoupper($st) }}
                                    @if(strtolower($order->status) === $st) (Status Saat Ini) @endif
                                </option>
                            @endforeach
                        </select>
                        @error('status')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="small mb-3" style="color: #d8b4fe;">
                        <i class="bi bi-info-circle me-1" style="color: #c084fc;"></i>
                        Status yang sah: <code>pending</code>, <code>processing</code>, <code>shipped</code>, <code>completed</code>, <code>cancelled</code>.
                    </div>

                    <button type="submit" class="btn btn-primary w-100 fw-bold d-flex align-items-center justify-content-center gap-2 shadow-sm" onclick="return confirm('Apakah Anda yakin ingin memperbarui status pesanan ini?');">
                        <i class="bi bi-check2-circle fs-5"></i> Simpan Perubahan Status
                    </button>
                </form>
            </div>
        </div>

        {{-- Card Data Buyer --}}
        <div class="card card-custom mb-4">
            <div class="card-header border-bottom py-3">
                <span class="fw-bold" style="color: #f472b6;">
                    <i class="bi bi-person-circle me-2" style="color: #c084fc;"></i>Data Buyer (Pemesan)
                </span>
            </div>
            <div class="card-body p-4">
                @if ($order->user)
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div style="width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(168, 85, 247, 0.3)); color: #f472b6; border: 2px solid rgba(244, 114, 182, 0.45); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem;">
                            {{ strtoupper(substr($order->user->name, 0, 1)) }}
                        </div>
                        <div>
                            <div class="fw-bold fs-6" style="color: #fdf2f8;">{{ $order->user->name }}</div>
                            <span class="badge" style="background: rgba(168, 85, 247, 0.2); color: #d8b4fe; border: 1px solid rgba(168, 85, 247, 0.4);">
                                Role: {{ strtoupper($order->user->role) }}
                            </span>
                        </div>
                    </div>

                    <ul class="list-group list-group-flush small" style="background: transparent;">
                        <li class="list-group-item px-0 d-flex justify-content-between" style="background: transparent; border-bottom: 1px solid rgba(192, 132, 252, 0.15);">
                            <span style="color: #d8b4fe;"><i class="bi bi-envelope me-1" style="color: #ec4899;"></i> Email:</span>
                            <span class="fw-semibold" style="color: #fdf2f8;">{{ $order->user->email }}</span>
                        </li>
                        <li class="list-group-item px-0 d-flex justify-content-between" style="background: transparent; border-bottom: 1px solid rgba(192, 132, 252, 0.15);">
                            <span style="color: #d8b4fe;"><i class="bi bi-hash me-1" style="color: #ec4899;"></i> User ID:</span>
                            <span class="fw-semibold" style="color: #fdf2f8;">#{{ $order->user->id }}</span>
                        </li>
                        <li class="list-group-item px-0 d-flex justify-content-between" style="background: transparent; border-bottom: none;">
                            <span style="color: #d8b4fe;"><i class="bi bi-clock-history me-1" style="color: #ec4899;"></i> Terdaftar Sejak:</span>
                            <span class="fw-semibold" style="color: #fdf2f8;">{{ $order->user->created_at->format('d M Y') }}</span>
                        </li>
                    </ul>
                @else
                    <div class="alert alert-warning mb-0 small">
                        <i class="bi bi-exclamation-circle me-1"></i> Akun pengguna telah dihapus dari sistem.
                    </div>
                @endif
            </div>
        </div>

        {{-- Card Ringkasan Pembayaran --}}
        <div class="card card-custom">
            <div class="card-header border-bottom py-3">
                <span class="fw-bold" style="color: #f472b6;">
                    <i class="bi bi-cash-stack me-2" style="color: #c084fc;"></i>Ringkasan Total Pembayaran
                </span>
            </div>
            <div class="card-body p-4">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <span class="small" style="color: #d8b4fe;">Metode Pembayaran:</span>
                    <span class="badge fw-bold" style="background: rgba(168, 85, 247, 0.18); color: #d8b4fe; border: 1px solid rgba(168, 85, 247, 0.35);">
                        {{ $order->payment_method ?? 'Transfer Bank' }}
                    </span>
                </div>
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <span class="small" style="color: #d8b4fe;">Status Pembayaran:</span>
                    <span class="badge {{ $order->payment_status === 'paid' ? 'bg-success' : 'bg-warning text-dark' }} fw-bold text-uppercase">
                        {{ $order->payment_status ?? 'unpaid' }}
                    </span>
                </div>
                <hr style="border-color: rgba(192, 132, 252, 0.2);">
                <div class="d-flex justify-content-between align-items-center pt-2">
                    <span class="fw-bold fs-6" style="color: #d8b4fe;">Total Belanja:</span>
                    <span class="fw-bold fs-5" style="color: #ec4899;">
                        Rp {{ number_format($order->total_price, 0, ',', '.') }}
                    </span>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection