@extends('layouts.admin')

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

@section('content')
<div class="row align-items-center mb-4">
    <div class="col-md-7 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"><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>
        <div class="d-flex align-items-center gap-2 flex-wrap">
            <h2 class="h4 fw-bold mb-0 text-dark">Pesanan #{{ $order->order_number }}</h2>
            @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">
                {{ $order->status }}
            </span>
        </div>
        <p class="text-muted small mb-0">Dibuat pada {{ $order->created_at->format('d F Y, H:i') }} WIB</p>
    </div>
    <div class="col-md-5 text-md-end">
        <a href="{{ route('admin.orders.index') }}" class="btn btn-outline-secondary rounded-pill px-3">
            <i class="bi bi-arrow-left me-1"></i> Kembali ke Daftar Pesanan
        </a>
    </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($errors->any())
<div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm rounded-3" role="alert">
    <ul class="mb-0 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">
    <!-- Kolom Kiri: Rincian Produk yang Dibeli -->
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3 border-bottom d-flex align-items-center justify-content-between">
                <h5 class="fw-bold mb-0 text-dark">
                    <i class="bi bi-bag-check me-2 text-primary"></i>Produk yang Dibeli
                </h5>
                <span class="badge bg-light text-dark border">{{ $order->orderItems->count() }} jenis produk</span>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="ps-3 py-3">Produk</th>
                                <th class="py-3 text-center">Harga Satuan</th>
                                <th class="py-3 text-center">Qty</th>
                                <th class="py-3 text-end pe-3">Subtotal</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($order->orderItems as $item)
                                <tr>
                                    <td class="ps-3 py-3">
                                        <div class="d-flex align-items-center gap-3">
                                            @if($item->product && $item->product->image)
                                                <img src="{{ asset('storage/' . $item->product->image) }}" 
                                                     alt="{{ $item->product_name }}" 
                                                     style="width: 52px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0;">
                                            @else
                                                <div class="bg-light d-flex align-items-center justify-content-center text-muted" 
                                                     style="width: 52px; height: 52px; border-radius: 8px; border: 1px solid #e2e8f0;">
                                                    <i class="bi bi-image"></i>
                                                </div>
                                            @endif
                                            <div>
                                                <div class="fw-semibold text-dark">{{ $item->product_name }}</div>
                                                @if($item->product_sku)
                                                    <div class="small text-muted font-monospace">SKU: {{ $item->product_sku }}</div>
                                                @endif
                                                @if($item->product)
                                                    <a href="{{ route('admin.products.edit', $item->product) }}" class="small text-primary text-decoration-none">
                                                        Lihat Master Produk →
                                                    </a>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-center text-nowrap">
                                        Rp {{ number_format($item->unit_price, 0, ',', '.') }}
                                    </td>
                                    <td class="text-center fw-bold">
                                        {{ $item->quantity }}
                                    </td>
                                    <td class="text-end fw-bold text-dark pe-3 text-nowrap">
                                        Rp {{ number_format($item->subtotal, 0, ',', '.') }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot class="table-light">
                            <tr>
                                <td colspan="3" class="text-end fw-medium pt-3">Subtotal:</td>
                                <td class="text-end fw-semibold pe-3 pt-3 text-nowrap">
                                    Rp {{ number_format($order->subtotal, 0, ',', '.') }}
                                </td>
                            </tr>
                            <tr>
                                <td colspan="3" class="text-end fw-medium">Biaya Pengiriman:</td>
                                <td class="text-end fw-semibold pe-3 text-nowrap">
                                    @if($order->shipping_cost > 0)
                                        Rp {{ number_format($order->shipping_cost, 0, ',', '.') }}
                                    @else
                                        <span class="text-success fw-bold">Gratis</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <td colspan="3" class="text-end fw-bold fs-5 pt-3 border-top">Total Pembayaran:</td>
                                <td class="text-end fw-extrabold text-success fs-4 pe-3 pt-3 text-nowrap border-top">
                                    Rp {{ number_format($order->total, 0, ',', '.') }}
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Kolom Kanan: Form Ubah Status & Data Buyer -->
    <div class="col-lg-4">
        <!-- Form Ubah Status Pesanan -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3 border-bottom">
                <h5 class="fw-bold mb-0 text-dark">
                    <i class="bi bi-arrow-repeat me-2 text-primary"></i>Ubah Status Pesanan
                </h5>
            </div>
            <div class="card-body p-4">
                <form action="{{ route('admin.orders.updateStatus', $order) }}" method="POST">
                    @csrf
                    @method('PATCH')

                    <div class="mb-3">
                        <label for="status" class="form-label fw-semibold small text-muted">Pilih Status Baru:</label>
                        <select name="status" id="status" class="form-select @error('status') is-invalid @enderror">
                            <option value="pending" {{ $order->status === 'pending' ? 'selected' : '' }}>Pending (Menunggu Konfirmasi)</option>
                            <option value="processing" {{ $order->status === 'processing' ? 'selected' : '' }}>Processing (Sedang Diproses)</option>
                            <option value="shipped" {{ $order->status === 'shipped' ? 'selected' : '' }}>Shipped (Dalam Pengiriman)</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>

                    <div class="small text-muted mb-3 bg-light p-3 rounded-3">
                        <div class="fw-semibold text-dark mb-1">Panduan Status:</div>
                        • <strong>Pending:</strong> Pesanan baru masuk.<br>
                        • <strong>Processing:</strong> Barang disiapkan & dikemas.<br>
                        • <strong>Shipped:</strong> Diserahkan ke kurir pengiriman.<br>
                        • <strong>Completed:</strong> Diterima oleh pembeli.<br>
                        • <strong>Cancelled:</strong> Dibatalkan.
                    </div>

                    <button type="submit" class="btn btn-primary w-100 fw-bold py-2 rounded-3">
                        <i class="bi bi-check2-circle me-1"></i> Simpan Perubahan Status
                    </button>
                </form>
            </div>
        </div>

        <!-- Data Akun & Pengiriman Buyer -->
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white py-3 border-bottom">
                <h5 class="fw-bold mb-0 text-dark">
                    <i class="bi bi-person-badge me-2 text-primary"></i>Data Buyer & Pengiriman
                </h5>
            </div>
            <div class="card-body p-4">
                <div class="mb-3">
                    <span class="text-muted small d-block">Akun Terdaftar:</span>
                    <strong class="text-dark">{{ $order->user->name ?? '-' }}</strong>
                    <div class="small text-muted">{{ $order->user->email ?? '-' }}</div>
                </div>

                <hr>

                <div class="mb-3">
                    <span class="text-muted small d-block">Nama Penerima:</span>
                    <strong class="text-dark">{{ $order->shipping_name }}</strong>
                </div>

                <div class="mb-3">
                    <span class="text-muted small d-block">Nomor Telepon / WhatsApp:</span>
                    <span class="fw-semibold text-dark">{{ $order->shipping_phone }}</span>
                </div>

                <div class="mb-3">
                    <span class="text-muted small d-block">Alamat Pengiriman:</span>
                    <p class="text-dark mb-0 small bg-light p-2 rounded-2">{{ $order->shipping_address }}</p>
                </div>

                <div>
                    <span class="text-muted small d-block">Metode Pembayaran:</span>
                    <span class="badge bg-light text-dark border text-uppercase">
                        {{ str_replace('_', ' ', $order->payment_method ?? 'Manual Transfer') }}
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection