@extends('layouts.buyer')

@section('title', 'Keranjang Belanja')

@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 active text-dark fw-semibold" aria-current="page">
                Keranjang Belanja
            </li>
        </ol>
    </nav>
</div>

<!-- Header Keranjang Belanja -->
<div class="d-flex flex-wrap justify-content-between align-items-center mb-4 gap-3">
    <div>
        <h1 class="h3 fw-bold text-dark mb-1 d-flex align-items-center gap-2">
            <i class="bi bi-cart3" style="color:#16a34a;"></i>
            <span>Keranjang Belanja</span>
            @if ($totalQuantity > 0)
                <span class="badge bg-primary-subtle text-primary border border-primary-subtle fs-6 rounded-pill ms-2">
                    {{ $totalQuantity }} Barang
                </span>
            @endif
        </h1>
        <p class="text-muted small mb-0">Kelola daftar produk pilihan Anda sebelum melanjutkan ke proses pembayaran.</p>
    </div>

    @if (!empty($cart))
        <!-- Tombol Kosongkan Keranjang -->
        <form action="{{ route('buyer.cart.clear') }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin mengosongkan semua produk di keranjang belanja?');">
            @csrf
            @method('DELETE')
            <button type="submit" class="btn btn-outline-danger btn-sm d-inline-flex align-items-center gap-1 shadow-sm">
                <i class="bi bi-trash3"></i>
                <span>Kosongkan Keranjang</span>
            </button>
        </form>
    @endif
</div>

@if (!empty($cart))
    <div class="row g-4 mb-5">
        <!-- Kolom Kiri: Daftar Produk dalam Keranjang -->
        <div class="col-lg-8">
            <div class="card card-custom border-0 shadow-sm overflow-hidden">
                <div class="card-header bg-white py-3 px-4 border-bottom">
                    <h5 class="card-title fw-bold text-dark mb-0 fs-6">
                        Daftar Produk ({{ count($cart) }} Jenis Barang)
                    </h5>
                </div>

                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light text-muted small text-uppercase">
                            <tr>
                                <th scope="col" class="ps-4 py-3" style="min-width: 260px;">Produk</th>
                                <th scope="col" class="py-3" style="min-width: 130px;">Harga Satuan</th>
                                <th scope="col" class="py-3 text-center" style="min-width: 170px;">Jumlah</th>
                                <th scope="col" class="py-3 text-end" style="min-width: 140px;">Subtotal</th>
                                <th scope="col" class="pe-4 py-3 text-center" style="width: 60px;">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($cart as $id => $item)
                                <tr>
                                    <!-- Informasi & Gambar Produk -->
                                    <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: 65px; height: 65px;">
                                                @if (!empty($item['image']))
                                                    <img src="{{ $item['image'] }}" 
                                                         alt="{{ $item['name'] }}" 
                                                         class="w-100 h-100 object-fit-cover"
                                                         onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'65\' height=\'65\' fill=\'%23cbd5e1\' viewBox=\'0 0 16 16\'><rect width=\'16\' height=\'16\' fill=\'%23f1f5f9\'/><path d=\'M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\'/><path d=\'M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z\'/></svg>';">
                                                @else
                                                    <i class="bi bi-image text-muted fs-4"></i>
                                                @endif
                                            </div>
                                            <div class="min-w-0">
                                                <a href="{{ route('buyer.products.show', $id) }}" class="fw-bold text-dark text-decoration-none text-truncate d-block mb-1 hover-primary" title="{{ $item['name'] }}">
                                                    {{ $item['name'] }}
                                                </a>
                                                <div class="d-flex flex-wrap align-items-center gap-2 small text-muted">
                                                    @if (!empty($item['category']))
                                                        <span class="badge bg-light text-secondary border">
                                                            <i class="bi bi-tag me-1"></i>{{ $item['category'] }}
                                                        </span>
                                                    @endif
                                                    <span>Stok: {{ $item['stock'] }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </td>

                                    <!-- Harga Satuan -->
                                    <td class="py-3 text-secondary fw-medium">
                                        {{ $item['formatted_price'] }}
                                    </td>

                                    <!-- Mengubah Quantity -->
                                    <td class="py-3 text-center">
                                        <form action="{{ route('buyer.cart.update', $id) }}" method="POST" class="d-inline-flex align-items-center justify-content-center gap-1">
                                            @csrf
                                            @method('PATCH')
                                            <div class="input-group input-group-sm" style="width: 120px;">
                                                <button type="button" class="btn btn-outline-secondary" onclick="stepQty('qty_{{ $id }}', -1, {{ $item['stock'] }})">
                                                    <i class="bi bi-dash"></i>
                                                </button>
                                                <input type="number" 
                                                       name="quantity" 
                                                       id="qty_{{ $id }}" 
                                                       class="form-control form-control-sm text-center fw-bold px-1" 
                                                       value="{{ $item['quantity'] }}" 
                                                       min="1" 
                                                       max="{{ $item['stock'] }}" 
                                                       required>
                                                <button type="button" class="btn btn-outline-secondary" onclick="stepQty('qty_{{ $id }}', 1, {{ $item['stock'] }})">
                                                    <i class="bi bi-plus"></i>
                                                </button>
                                            </div>
                                            <button type="submit" class="btn btn-sm btn-outline-primary shadow-sm" title="Perbarui Kuantitas" style="color:#16a34a;border-color:#16a34a;">
                                                <i class="bi bi-check-lg"></i>
                                            </button>
                                        </form>
                                    </td>

                                    <!-- Menghitung Subtotal -->
                                    <td class="py-3 text-end fw-bold text-success">
                                        {{ $item['formatted_subtotal'] }}
                                    </td>

                                    <!-- Menghapus Produk -->
                                    <td class="pe-4 py-3 text-center">
                                        <form action="{{ route('buyer.cart.remove', $id) }}" method="POST" onsubmit="return confirm('Hapus {{ $item['name'] }} dari keranjang?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-outline-danger border-0 rounded-circle p-2" title="Hapus produk">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="card-footer bg-white py-3 px-4 border-top d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <a href="{{ route('buyer.toko') }}" class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center gap-2">
                        <i class="bi bi-arrow-left"></i>
                        <span>Lanjut Belanja Produk Lain</span>
                    </a>
                    <span class="text-muted small">
                        *Klik tombol centang (<i class="bi bi-check-lg text-primary"></i>) untuk menyimpan perubahan jumlah barang.
                    </span>
                </div>
            </div>
        </div>

        <!-- Kolom Kanan: Ringkasan Total Belanja -->
        <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 Pesanan
                    </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>

                    <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 Belanja:</span>
                            <span class="text-muted small">Sudah termasuk semua subtotal</span>
                        </div>
                        <span class="text-success fw-bold fs-4">{{ $formattedTotal }}</span>
                    </div>

                    <!-- Tombol Aksi Keranjang / Checkout -->
                    <div class="d-grid gap-2">
                        <a href="{{ route('buyer.checkout.index') }}" class="btn btn-primary btn-lg shadow-sm d-flex align-items-center justify-content-center gap-2">
                            <i class="bi bi-bag-check-fill"></i>
                            <span>Lanjut ke Checkout</span>
                        </a>
                        <a href="{{ route('buyer.toko') }}" class="btn btn-outline-secondary d-flex align-items-center justify-content-center gap-2">
                            <i class="bi bi-shop"></i>
                            <span>Tambah Produk Lain</span>
                        </a>
                    </div>

                    <div class="mt-4 p-3 bg-light rounded-3 text-muted small">
                        <i class="bi bi-shield-check text-success me-1"></i>
                        Data keranjang disimpan secara aman di <strong>Laravel Session</strong> selama sesi browsing Anda aktif.
                    </div>
                </div>
            </div>
        </div>
    </div>
@else
    <!-- Tampilan Jika Keranjang Masih Kosong -->
    <div class="card card-custom border-0 shadow-sm text-center py-5 my-4">
        <div class="card-body p-4 p-md-5">
            <div class="mb-3">
                <span class="d-inline-flex align-items-center justify-content-center bg-light text-muted rounded-circle p-4 shadow-inner" style="width: 100px; height: 100px;">
                    <i class="bi bi-cart-x fs-1 text-secondary"></i>
                </span>
            </div>
            <h3 class="h4 fw-bold text-dark mb-2">Keranjang Belanja Anda Masih Kosong</h3>
            <p class="text-muted mb-4 mx-auto" style="max-width: 450px;">
                Anda belum menambahkan produk apapun ke dalam keranjang belanja. Jelajahi katalog toko kami dan temukan berbagai produk menarik sekarang!
            </p>
            <a href="{{ route('buyer.toko') }}" class="btn btn-primary px-4 py-2 shadow-sm d-inline-flex align-items-center gap-2">
                <i class="bi bi-bag-plus"></i>
                <span>Mulai Belanja Sekarang</span>
            </a>
        </div>
    </div>
@endif
@endsection

@push('scripts')
<script>
    function stepQty(inputId, change, maxStock) {
        const input = document.getElementById(inputId);
        if (!input) return;

        let current = parseInt(input.value) || 1;
        current += change;

        if (current < 1) current = 1;
        if (current > maxStock) current = maxStock;

        input.value = current;
    }
</script>
@endpush