@extends('layouts.buyer')

@section('title', 'Konfirmasi Checkout Pesanan')

@section('content')
<!-- Navigasi Breadcrumb -->
<div class="mb-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0 py-2 px-3 bg-white rounded-3 border">
            <li class="breadcrumb-item">
                <a href="{{ route('buyer.toko') }}" class="text-decoration-none fw-medium" style="color:#16a34a;">
                    <i class="bi bi-shop me-1"></i>Katalog Toko
                </a>
            </li>
            <li class="breadcrumb-item">
                <a href="{{ route('buyer.cart.index') }}" class="text-decoration-none text-secondary">
                    Keranjang Belanja
                </a>
            </li>
            <li class="breadcrumb-item active text-dark fw-semibold" aria-current="page">
                Checkout Pesanan
            </li>
        </ol>
    </nav>
</div>

<!-- Header Checkout -->
<div class="mb-4">
    <h1 class="h3 fw-bold text-dark mb-1 d-flex align-items-center gap-2">
        <i class="bi bi-bag-check" style="color:#16a34a;"></i>
        <span>Konfirmasi Checkout Pesanan</span>
    </h1>
    <p class="text-muted small mb-0">Tinjau kembali barang pesanan Anda dan lengkapi informasi pengiriman sebelum konfirmasi.</p>
</div>

<form action="{{ route('buyer.checkout.process') }}" method="POST">
    @csrf
    <div class="row g-4 mb-5">
        <!-- Kolom Kiri: Rincian Produk & Informasi Pengiriman -->
        <div class="col-lg-8">
            <!-- Card Daftar Barang -->
            <div class="card card-custom border-0 shadow-sm mb-4 overflow-hidden">
                <div class="card-header bg-white py-3 px-4 border-bottom d-flex justify-content-between align-items-center">
                    <h5 class="card-title fw-bold text-dark mb-0 fs-6">
                        <i class="bi bi-box-seam me-2 text-primary"></i>Barang yang Dipesan ({{ count($cart) }} Item)
                    </h5>
                    <a href="{{ route('buyer.cart.index') }}" class="btn btn-outline-secondary btn-sm">
                        <i class="bi bi-pencil me-1"></i>Ubah Keranjang
                    </a>
                </div>
                <div class="table-responsive">
                    <table class="table align-middle mb-0">
                        <thead class="table-light text-muted small text-uppercase">
                            <tr>
                                <th scope="col" class="ps-4 py-3">Produk</th>
                                <th scope="col" class="py-3 text-center">Harga</th>
                                <th scope="col" class="py-3 text-center">Jumlah</th>
                                <th scope="col" class="pe-4 py-3 text-end">Subtotal</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($cart as $id => $item)
                                <tr>
                                    <td class="ps-4 py-3">
                                        <div class="d-flex align-items-center gap-3">
                                            <div class="bg-light rounded-3 overflow-hidden border d-flex align-items-center justify-content-center flex-shrink-0" style="width: 50px; height: 50px;">
                                                @if (!empty($item['image']))
                                                    <img src="{{ $item['image'] }}" alt="{{ $item['name'] }}" class="w-100 h-100 object-fit-cover">
                                                @else
                                                    <i class="bi bi-image text-muted fs-5"></i>
                                                @endif
                                            </div>
                                            <div>
                                                <div class="fw-bold text-dark text-truncate mb-0" style="max-width: 280px;" title="{{ $item['name'] }}">
                                                    {{ $item['name'] }}
                                                </div>
                                                @if (!empty($item['category']))
                                                    <span class="badge bg-light text-secondary border small">{{ $item['category'] }}</span>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td class="py-3 text-center text-muted small">
                                        {{ $item['formatted_price'] }}
                                    </td>
                                    <td class="py-3 text-center fw-bold">
                                        {{ $item['quantity'] }} pcs
                                    </td>
                                    <td class="pe-4 py-3 text-end fw-bold text-success">
                                        {{ $item['formatted_subtotal'] }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Card Informasi Pengiriman -->
            <div class="card card-custom border-0 shadow-sm p-4">
                <h5 class="card-title fw-bold text-dark mb-3 fs-6 d-flex align-items-center gap-2">
                    <i class="bi bi-truck" style="color:#16a34a;"></i>
                    <span>Informasi Pengiriman & Catatan</span>
                </h5>

                <div class="mb-3">
                    <label for="shipping_address" class="form-label fw-medium text-dark small">Alamat Lengkap Pengiriman:</label>
                    <textarea name="shipping_address" id="shipping_address" rows="3" class="form-control @error('shipping_address') is-invalid @enderror" placeholder="Masukkan alamat lengkap tujuan pengiriman pesanan Anda...">{{ old('shipping_address', 'Jl. Merdeka No. 123, Kelurahan Bahagia, Kota Palembang') }}</textarea>
                    @error('shipping_address')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    <div class="form-text small">Pastikan alamat jelas termasuk nomor rumah, RT/RW, dan kode pos.</div>
                </div>

                <div class="mb-0">
                    <label for="notes" class="form-label fw-medium text-dark small">Catatan Tambahan untuk Penjual (Opsional):</label>
                    <textarea name="notes" id="notes" rows="2" class="form-control" placeholder="Contoh: Titipkan ke satpam jika penerima sedang tidak di tempat.">{{ old('notes') }}</textarea>
                </div>
            </div>
        </div>

        <!-- Kolom Kanan: Ringkasan & Tombol Konfirmasi -->
        <div class="col-lg-4">
            <div class="card card-custom border-0 shadow-sm sticky-top" style="top: 90px;">
                <div class="card-header bg-white py-3 px-4 border-bottom">
                    <h5 class="card-title fw-bold text-dark mb-0 fs-6">
                        Ringkasan Pembayaran
                    </h5>
                </div>
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span class="text-muted">Total Jumlah Barang</span>
                        <span class="fw-bold text-dark">{{ $totalQuantity }} pcs</span>
                    </div>

                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span class="text-muted">Total Jenis Produk</span>
                        <span class="fw-bold text-dark">{{ count($cart) }} jenis</span>
                    </div>

                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span class="text-muted">Status Awal Pesanan</span>
                        <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle px-2 py-1">
                            Pending
                        </span>
                    </div>

                    <hr class="my-3 text-muted">

                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <div>
                            <span class="fw-bold text-dark d-block">Total Akhir:</span>
                            <span class="text-muted small">Akumulasi seluruh subtotal</span>
                        </div>
                        <span class="text-success fw-bold fs-4">{{ $formattedTotal }}</span>
                    </div>

                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary btn-lg shadow-sm d-flex align-items-center justify-content-center gap-2">
                            <i class="bi bi-check-circle-fill"></i>
                            <span>Konfirmasi & Checkout</span>
                        </button>
                        <a href="{{ route('buyer.cart.index') }}" class="btn btn-outline-secondary d-flex align-items-center justify-content-center gap-2">
                            <i class="bi bi-arrow-left"></i>
                            <span>Kembali ke Keranjang</span>
                        </a>
                    </div>

                    <div class="mt-4 p-3 bg-light rounded-3 text-muted small">
                        <div class="d-flex gap-2">
                            <i class="bi bi-info-circle-fill fs-5 mt-1" style="color:#16a34a;"></i>
                            <div>
                                Stok produk akan langsung dikurangi dan keranjang belanja dikosongkan secara aman via <strong>Database Transaction</strong>.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection