@extends('layouts.admin')

@section('title', 'Detail Pesanan #' . $order->order_number)
@section('page_title', 'Detail Pesanan')
@section('breadcrumb')
    <a href="{{ route('admin.orders.index') }}">Pesanan</a>
    <span class="sep">/</span> {{ $order->order_number }}
@endsection

@section('topbar_actions')
    <a href="{{ route('admin.orders.index') }}" class="btn-topbar-ghost btn-topbar-pink">
        <i class="bi bi-arrow-left"></i> Kembali
    </a>
@endsection

@section('content')

@if($errors->any())
    <div class="alert-admin-error mb-4">
        <i class="bi bi-exclamation-triangle-fill fs-5"></i>
        <ul class="mb-0 ps-3">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="btn-close ms-auto" onclick="this.closest('.alert-admin-error').remove()"></button>
    </div>
@endif

<div class="row g-4">
    {{-- LEFT: Order Items + Address --}}
    <div class="col-lg-8">

        {{-- Order Items Card --}}
        <div class="card-admin mb-4">
            <div class="card-header-admin">
                <div>
                    <h5 style="font-size:1rem;">Produk yang Dibeli</h5>
                    <p class="text-muted small mb-0">{{ $order->orderItems->count() }} macam produk, total {{ $order->orderItems->sum('quantity') }} unit</p>
                </div>
                <span class="badge-pink">{{ $order->order_number }}</span>
            </div>

            <div class="table-responsive">
                <table class="table table-admin mb-0">
                    <thead>
                        <tr>
                            <th style="width:50%;">Produk</th>
                            <th class="text-end">Harga Satuan</th>
                            <th class="text-center">Qty</th>
                            <th class="text-end">Subtotal</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($order->orderItems as $item)
                        <tr>
                            <td>
                                <div class="d-flex align-items-center gap-3">
                                    @if($item->product && $item->product->image)
                                        @php
                                            $orderItemImg = \Illuminate\Support\Str::startsWith($item->product->image, ['http://', 'https://'])
                                                ? $item->product->image
                                                : asset('storage/' . $item->product->image);
                                        @endphp
                                        <img src="{{ $orderItemImg }}" alt="{{ $item->product_name }}"
                                             style="width:48px;height:48px;object-fit:cover;border-radius:10px;border:1px solid #fce7f3;"
                                             onerror="this.onerror=null; this.src='https://placehold.co/100x100?text=No+Image';">
                                    @else
                                        <div style="width:48px;height:48px;border-radius:10px;background:#fdf2f8;border:1px solid #fce7f3;display:flex;align-items:center;justify-content:center;color:#f9a8d4;">
                                            <i class="bi bi-image"></i>
                                        </div>
                                    @endif
                                    <div>
                                        <div class="fw-semibold text-dark small">{{ $item->product_name }}</div>
                                        @if($item->product)
                                            <div class="text-muted" style="font-size:0.72rem;">Stok terkini: {{ $item->product->stock }} unit</div>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td class="text-end text-muted small fw-semibold">Rp {{ number_format($item->price, 0, ',', '.') }}</td>
                            <td class="text-center fw-bold text-dark">{{ $item->quantity }}</td>
                            <td class="text-end fw-bold" style="color:#db2777;">Rp {{ number_format($item->subtotal, 0, ',', '.') }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr style="background:#fdf2f8;">
                            <td colspan="3" class="text-end fw-bold text-dark py-3">Total Pembayaran:</td>
                            <td class="text-end py-3" style="font-size:1.2rem;font-weight:800;color:#db2777;">
                                Rp {{ number_format($order->total, 0, ',', '.') }}
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>

        {{-- Shipping Address Card --}}
        <div class="card-admin">
            <div class="card-header-admin">
                <h6 style="font-size:0.95rem;" class="mb-0"><i class="bi bi-geo-alt-fill me-2" style="color:#ec4899;"></i>Alamat Pengiriman</h6>
            </div>
            <div class="p-4">
                <p class="text-secondary mb-0" style="background:#fdf2f8;border:1px solid #fce7f3;border-radius:14px;padding:1rem 1.25rem;line-height:1.7;">
                    {{ $order->shipping_address ?: 'Alamat pengiriman belum diisi oleh pembeli.' }}
                </p>
            </div>
        </div>
    </div>

    {{-- RIGHT: Update Status + Buyer Info --}}
    <div class="col-lg-4">

        {{-- Current Status --}}
        <div class="card-admin mb-4">
            <div class="card-header-admin">
                <h6 style="font-size:0.95rem;" class="mb-0"><i class="bi bi-pencil-square me-2" style="color:#ec4899;"></i>Status Pesanan</h6>
            </div>
            <div class="p-4">
                {{-- Current Status Badge --}}
                <div class="mb-3">
                    <div class="small text-muted fw-semibold mb-2">Status Saat Ini:</div>
                    @php
                        $statusStyles = [
                            'pending'    => 'background:#fef3c7;color:#92400e;border:1px solid #fde68a;',
                            'processing' => 'background:#e0f2fe;color:#075985;border:1px solid #bae6fd;',
                            'shipped'    => 'background:#fdf2f8;color:#db2777;border:1px solid #fbcfe8;',
                            'completed'  => 'background:#dcfce7;color:#166534;border:1px solid #bbf7d0;',
                            'cancelled'  => 'background:#fff1f2;color:#be123c;border:1px solid #fecdd3;',
                        ];
                        $statusIcons = [
                            'pending'    => 'bi-hourglass-split',
                            'processing' => 'bi-arrow-repeat',
                            'shipped'    => 'bi-truck',
                            'completed'  => 'bi-check-circle-fill',
                            'cancelled'  => 'bi-x-circle-fill',
                        ];
                        $s = $order->status;
                        $cStyle = $statusStyles[$s] ?? 'background:#f1f5f9;color:#475569;border:1px solid #e2e8f0;';
                        $cIcon  = $statusIcons[$s] ?? 'bi-circle';
                    @endphp
                    <span style="{{ $cStyle }}padding:0.45rem 1rem;border-radius:9999px;font-size:0.8rem;font-weight:700;display:inline-flex;align-items:center;gap:0.4rem;text-transform:uppercase;">
                        <i class="bi {{ $cIcon }}"></i> {{ ucfirst($s) }}
                    </span>
                </div>

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

                    <div class="mb-3">
                        <label for="status" class="form-label small fw-semibold text-dark">Ubah Status Menjadi:</label>
                        <select name="status" id="status" class="form-select form-select-admin @error('status') is-invalid @enderror" required>
                            @foreach($allowedStatuses as $statusCode => $statusLabel)
                                <option value="{{ $statusCode }}" {{ $order->status === $statusCode ? 'selected' : '' }}>
                                    {{ $statusLabel }}
                                </option>
                            @endforeach
                        </select>
                        @error('status') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <button type="submit" class="btn-pink btn-topbar-pink w-100 justify-content-center">
                        <i class="bi bi-save2-fill"></i> Simpan Perubahan
                    </button>
                </form>
            </div>
        </div>

        {{-- Buyer Info Card --}}
        <div class="card-admin">
            <div class="card-header-admin">
                <h6 style="font-size:0.95rem;" class="mb-0"><i class="bi bi-person-badge-fill me-2" style="color:#ec4899;"></i>Data Pembeli</h6>
            </div>
            <div class="p-4">
                @if($order->user)
                    <div class="d-flex align-items-center gap-3 mb-3 pb-3" style="border-bottom:1px solid #fce7f3;">
                        <div style="width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#f472b6,#db2777);display:flex;align-items:center;justify-content:center;color:white;font-size:1.1rem;font-weight:700;flex-shrink:0;">
                            {{ strtoupper(substr($order->user->name, 0, 2)) }}
                        </div>
                        <div>
                            <div class="fw-bold text-dark">{{ $order->user->name }}</div>
                            <span class="badge-pink" style="font-size:0.65rem;">{{ ucfirst($order->user->role) }}</span>
                        </div>
                    </div>

                    <div class="small">
                        <div class="d-flex justify-content-between align-items-center py-1" style="border-bottom:1px solid #fdf2f8;">
                            <span class="text-muted">Email:</span>
                            <span class="fw-semibold text-dark">{{ $order->user->email }}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center py-1" style="border-bottom:1px solid #fdf2f8;">
                            <span class="text-muted">User ID:</span>
                            <span class="badge-pink" style="background:#f1f5f9;color:#64748b;border-color:#e2e8f0;">#{{ $order->user->id }}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center py-1" style="border-bottom:1px solid #fdf2f8;">
                            <span class="text-muted">Bergabung:</span>
                            <span class="text-dark">{{ $order->user->created_at->format('d M Y') }}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center pt-1">
                            <span class="text-muted">Waktu Pesan:</span>
                            <span class="text-dark">{{ $order->created_at->format('d M Y, H:i') }}</span>
                        </div>
                    </div>
                @else
                    <div class="text-center py-3 text-muted small">
                        <i class="bi bi-person-x fs-2 d-block mb-2 opacity-25"></i>
                        Data pengguna tidak ditemukan atau akun telah dihapus.
                    </div>
                @endif
            </div>
        </div>

    </div>
</div>
@endsection