@extends('layouts.buyer')

@section('title', 'Konfirmasi Checkout - Toko Online')

@section('content')
<div class="row mb-4">
    <div class="col-12">
        {{-- Breadcrumb --}}
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('buyer.dashboard') }}" class="text-decoration-none">Katalog</a></li>
                <li class="breadcrumb-item"><a href="{{ route('buyer.cart.index') }}" class="text-decoration-none">Keranjang</a></li>
                <li class="breadcrumb-item active" aria-current="page">Konfirmasi Pesanan</li>
            </ol>
        </nav>
        <h2 class="fw-bold mb-0">
            <i class="bi bi-bag-check text-success me-2"></i> Konfirmasi Pesanan
        </h2>
        <p class="text-muted mt-1">Periksa kembali pesanan Anda sebelum dikonfirmasi.</p>
    </div>
</div>

<form action="{{ route('buyer.checkout.process') }}" method="POST" id="checkoutForm">
    @csrf

    <div class="row g-4">
        {{-- Kiri: Ringkasan Produk + Form Info --}}
        <div class="col-lg-8">

            {{-- Daftar Produk --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white py-3 border-bottom">
                    <h5 class="mb-0 fw-bold">
                        <i class="bi bi-list-ul me-2 text-primary"></i>
                        Produk yang Dipesan ({{ $totalItems }} Item)
                    </h5>
                </div>
                <div class="table-responsive">
                    <table class="table align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Produk</th>
                                <th class="text-center">Harga</th>
                                <th class="text-center">Qty</th>
                                <th class="text-end">Subtotal</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($cart as $id => $item)
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            @if(!empty($item['image']))
                                                <img src="{{ Storage::url($item['image']) }}"
                                                     alt="{{ $item['name'] }}"
                                                     class="rounded border me-3"
                                                     style="width:56px;height:56px;object-fit:cover;">
                                            @else
                                                <div class="bg-secondary-subtle text-secondary rounded d-flex align-items-center justify-content-center me-3 border"
                                                     style="width:56px;height:56px;font-size:0.7rem;">
                                                    <i class="bi bi-image fs-5"></i>
                                                </div>
                                            @endif
                                            <div>
                                                <div class="fw-semibold text-dark">{{ $item['name'] }}</div>
                                                <small class="text-muted">{{ $item['category'] ?? 'Umum' }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-center text-secondary">
                                        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-2">
                                            {{ $item['quantity'] }}
                                        </span>
                                    </td>
                                    <td class="text-end fw-bold text-primary">
                                        Rp {{ number_format($subtotalPerItem[$id], 0, ',', '.') }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- Form Informasi Pengiriman & Catatan --}}
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white py-3 border-bottom">
                    <h5 class="mb-0 fw-bold">
                        <i class="bi bi-geo-alt me-2 text-warning"></i>
                        Informasi Pengiriman
                    </h5>
                </div>
                <div class="card-body">
                    {{-- Info Pembeli (Read-only) --}}
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label text-muted small fw-semibold">Nama Pembeli</label>
                            <input type="text" class="form-control bg-light" value="{{ $user->name }}" readonly>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label text-muted small fw-semibold">Email</label>
                            <input type="text" class="form-control bg-light" value="{{ $user->email }}" readonly>
                        </div>
                    </div>

                    {{-- Alamat Pengiriman --}}
                    <div class="mb-3">
                        <label for="shipping_address" class="form-label fw-semibold">
                            Alamat Pengiriman
                            <span class="text-muted fw-normal">(opsional)</span>
                        </label>
                        <textarea name="shipping_address"
                                  id="shipping_address"
                                  class="form-control @error('shipping_address') is-invalid @enderror"
                                  rows="3"
                                  maxlength="1000"
                                  placeholder="Masukkan alamat lengkap pengiriman...">{{ old('shipping_address') }}</textarea>
                        @error('shipping_address')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Catatan Tambahan --}}
                    <div class="mb-0">
                        <label for="notes" class="form-label fw-semibold">
                            Catatan Pesanan
                            <span class="text-muted fw-normal">(opsional)</span>
                        </label>
                        <textarea name="notes"
                                  id="notes"
                                  class="form-control @error('notes') is-invalid @enderror"
                                  rows="2"
                                  maxlength="500"
                                  placeholder="Contoh: Tolong bungkus rapi, kirim pagi hari...">{{ old('notes') }}</textarea>
                        @error('notes')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        {{-- Kanan: Ringkasan Pembayaran --}}
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm sticky-top" style="top: 80px;">
                <div class="card-header bg-white py-3 border-bottom">
                    <h5 class="mb-0 fw-bold">
                        <i class="bi bi-receipt me-2 text-success"></i> Ringkasan Pembayaran
                    </h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Total Item</span>
                        <span class="fw-semibold">{{ $totalItems }} pcs</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Macam Produk</span>
                        <span class="fw-semibold">{{ count($cart) }} item</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Ongkos Kirim</span>
                        <span class="fw-semibold text-success">Gratis</span>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <span class="fs-5 fw-bold">Total Pembayaran</span>
                        <span class="fs-4 fw-bold text-primary">
                            Rp {{ number_format($total, 0, ',', '.') }}
                        </span>
                    </div>

                    {{-- Informasi Status Order --}}
                    <div class="alert alert-warning py-2 small mb-3">
                        <i class="bi bi-clock-history me-1"></i>
                        Setelah checkout, status pesanan akan menjadi <strong>Pending</strong> menunggu pembayaran.
                    </div>

                    {{-- Tombol Aksi --}}
                    <button type="submit"
                            id="btn-checkout"
                            class="btn btn-success btn-lg w-100 fw-bold shadow-sm mb-2"
                            onclick="return konfirmasiCheckout()">
                        <i class="bi bi-bag-check me-2"></i> Konfirmasi & Buat Pesanan
                    </button>

                    <a href="{{ route('buyer.cart.index') }}"
                       class="btn btn-outline-secondary w-100">
                        <i class="bi bi-arrow-left me-1"></i> Kembali ke Keranjang
                    </a>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
    function konfirmasiCheckout() {
        return confirm(
            'Apakah Anda yakin ingin membuat pesanan ini?\n\n' +
            'Stok produk akan langsung dikurangi setelah pesanan dikonfirmasi.'
        );
    }

    // Nonaktifkan tombol setelah submit untuk mencegah double submit
    document.getElementById('checkoutForm').addEventListener('submit', function () {
        const btn = document.getElementById('btn-checkout');
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Memproses...';
    });
</script>
@endpush