

<?php $__env->startSection('title', 'Keranjang Belanja - Vogue3D'); ?>

<?php $__env->startSection('content'); ?>
<div class="container mx-auto px-4 py-12" style="font-family: 'Plus Jakarta Sans', sans-serif;">
    <div class="mb-10 text-center">
        <h2 class="text-4xl font-black text-slate-900 italic tracking-tight">MY <span class="text-pink-500">CART</span></h2>
        <p class="text-slate-400 font-bold text-sm uppercase tracking-widest mt-2">Kelola barang unik pilihanmu</p>
    </div>

    
    <?php if(session('cart') && count(session('cart')) > 0): ?>
        
        <form action="<?php echo e(route('user.cart.checkout')); ?>" method="GET" id="checkout-form">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
                
                <div class="lg:col-span-2 space-y-6">
                    
                    <div class="flex items-center gap-3 px-6 py-2">
                        <input type="checkbox" id="select-all" class="w-5 h-5 accent-pink-500 rounded-lg cursor-pointer">
                        <label for="select-all" class="text-sm font-black text-slate-700 uppercase tracking-widest cursor-pointer">Pilih Semua Barang</label>
                    </div>

                    <?php $total = 0 ?>
                    <?php $__currentLoopData = session('cart'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $id => $details): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div class="bg-white/70 backdrop-blur-md border border-white rounded-[35px] p-6 shadow-xl flex flex-wrap md:flex-nowrap items-center gap-6 transition-all hover:scale-[1.02]">
                            
                            
                            <div class="flex-shrink-0">
                                <input type="checkbox" name="selected_items[]" value="<?php echo e($id); ?>" 
                                    class="item-checkbox w-6 h-6 accent-pink-500 rounded-xl cursor-pointer"
                                    data-price="<?php echo e($details['price']); ?>" 
                                    data-qty="<?php echo e($details['quantity']); ?>"
                                    onclick="calculateTotal()">
                            </div>

                            
                            <div class="w-24 h-24 bg-pink-100 rounded-[25px] overflow-hidden flex-shrink-0 shadow-inner">
                                <img src="<?php echo e(asset('storage/' . $details['image'])); ?>" class="w-full h-full object-cover" alt="<?php echo e($details['name']); ?>">
                            </div>

                            
                            <div class="flex-1">
                                <h4 class="text-xl font-black text-slate-800 leading-tight mb-1"><?php echo e($details['name']); ?></h4>
                                <p class="text-pink-500 font-black italic">Rp <?php echo e(number_format($details['price'], 0, ',', '.')); ?></p>
                            </div>

                            
                            <div class="flex items-center bg-slate-100 rounded-2xl p-1 border border-slate-200">
                                <button type="button" onclick="updateQty(<?php echo e($id); ?>, <?php echo e($details['quantity'] - 1); ?>)" class="w-10 h-10 flex items-center justify-center font-black text-slate-500 hover:text-pink-500 transition-colors">-</button>
                                <input type="number" value="<?php echo e($details['quantity']); ?>" readonly class="w-12 text-center bg-transparent font-black text-slate-800 border-none focus:ring-0">
                                <button type="button" onclick="updateQty(<?php echo e($id); ?>, <?php echo e($details['quantity'] + 1); ?>)" class="w-10 h-10 flex items-center justify-center font-black text-slate-500 hover:text-pink-500 transition-colors">+</button>
                            </div>

                            
                            <div class="text-right flex md:flex-col items-center md:items-end gap-4">
                                <p class="font-black text-slate-900 text-lg">Rp <?php echo e(number_format($details['price'] * $details['quantity'], 0, ',', '.')); ?></p>
                                <button type="button" onclick="removeProduct(<?php echo e($id); ?>)" class="bg-red-50 text-red-400 p-3 rounded-2xl hover:bg-red-500 hover:text-white transition-all shadow-sm">
                                    <i data-lucide="trash-2" class="w-5 h-5"></i>
                                </button>
                            </div>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>

                
                <div class="lg:col-span-1">
                    <div class="bg-slate-900 rounded-[40px] p-8 shadow-2xl sticky top-24 text-white overflow-hidden relative">
                        <div class="absolute -top-10 -right-10 w-40 h-40 bg-pink-500/20 rounded-full blur-3xl"></div>
                        
                        <h3 class="text-2xl font-black italic mb-6">Ringkasan <span class="text-pink-400">Order</span></h3>
                        
                        <div class="space-y-4 mb-8">
                            <div class="flex justify-between font-bold text-slate-400">
                                <span>Subtotal (<span id="selected-count">0</span> barang)</span>
                                <span id="display-subtotal">Rp 0</span>
                            </div>
                            <div class="flex justify-between font-bold text-slate-400">
                                <span>Admin Fee</span>
                                <span class="text-emerald-400">FREE</span>
                            </div>
                            <hr class="border-white/10 border-dashed">
                            <div class="flex justify-between items-center">
                                <span class="text-sm font-black uppercase tracking-widest text-slate-300">Total</span>
                                <span class="text-3xl font-black italic text-pink-400" id="display-total">Rp 0</span>
                            </div>
                        </div>

                        <button type="submit" id="checkout-btn" disabled class="block w-full text-center py-5 bg-slate-700 text-white rounded-3xl font-black text-sm uppercase tracking-widest shadow-lg transition-all cursor-not-allowed">
                            Checkout Terpilih
                        </button>
                        
                        <a href="<?php echo e(route('user.products.index')); ?>" class="block w-full text-center mt-4 text-slate-400 font-bold text-xs uppercase tracking-widest hover:text-white transition-colors">
                            Lanjut Belanja
                        </a>
                    </div>
                </div>
            </div>
        </form>
    <?php else: ?>
        
        <div class="max-w-md mx-auto text-center py-20 bg-white/50 backdrop-blur-sm rounded-[50px] border border-white shadow-2xl">
            <div class="w-24 h-24 bg-pink-50 text-pink-400 rounded-full flex items-center justify-center mx-auto mb-8 shadow-inner animate-bounce">
                <i data-lucide="shopping-bag" class="w-12 h-12"></i>
            </div>
            <h3 class="text-3xl font-black text-slate-900 italic mb-3 uppercase">Oops! Kosong</h3>
            <p class="text-slate-400 font-bold mb-10 px-10">Sepertinya keranjangmu masih malu-malu. Yuk, cari ATK unik untuk koleksi kamu!</p>
            
            <a href="<?php echo e(route('user.products.index')); ?>" 
               class="inline-flex items-center px-10 py-4 bg-slate-900 text-white font-black text-sm uppercase tracking-widest rounded-3xl hover:bg-pink-500 transition-all shadow-xl hover:shadow-pink-500/20 active:scale-95">
                Mulai Belanja
            </a>
        </div>
    <?php endif; ?>
</div>


<script>
    // Fungsi Hitung Total Berdasarkan Pilihan
    function calculateTotal() {
        let total = 0;
        let count = 0;
        const checkboxes = document.querySelectorAll('.item-checkbox:checked');
        const checkoutBtn = document.getElementById('checkout-btn');
        
        checkboxes.forEach(cb => {
            const price = parseFloat(cb.dataset.price);
            const qty = parseInt(cb.dataset.qty);
            total += price * qty;
            count++;
        });

        // Update Tampilan Ringkasan
        document.getElementById('selected-count').innerText = count;
        document.getElementById('display-subtotal').innerText = 'Rp ' + total.toLocaleString('id-ID');
        document.getElementById('display-total').innerText = 'Rp ' + total.toLocaleString('id-ID');

        // Aktif/Nonaktifkan Tombol Checkout
        if (count > 0) {
            checkoutBtn.disabled = false;
            checkoutBtn.classList.remove('bg-slate-700', 'cursor-not-allowed');
            checkoutBtn.classList.add('bg-pink-500', 'hover:bg-pink-600', 'shadow-pink-500/30', 'active:scale-95');
        } else {
            checkoutBtn.disabled = true;
            checkoutBtn.classList.add('bg-slate-700', 'cursor-not-allowed');
            checkoutBtn.classList.remove('bg-pink-500', 'hover:bg-pink-600', 'shadow-pink-500/30', 'active:scale-95');
        }
    }

    // Fitur Pilih Semua
    document.getElementById('select-all')?.addEventListener('change', function() {
        const checkboxes = document.querySelectorAll('.item-checkbox');
        checkboxes.forEach(cb => cb.checked = this.checked);
        calculateTotal();
    });

    // Validasi Form sebelum submit
    document.getElementById('checkout-form')?.addEventListener('submit', function(e) {
        const selected = document.querySelectorAll('.item-checkbox:checked');
        if (selected.length === 0) {
            e.preventDefault();
            alert('Silakan pilih minimal satu barang untuk di-checkout.');
        }
    });

    function updateQty(id, qty) {
        if(qty < 1) return;
        
        fetch("<?php echo e(route('user.cart.update')); ?>", {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>'
            },
            body: JSON.stringify({ id: id, quantity: qty })
        })
        .then(response => response.json())
        .then(data => {
            if(data.success) {
                location.reload();
            }
        });
    }

    function removeProduct(id) {
        if(!confirm('Yakin ingin menghapus produk ini dari keranjang?')) return;

        fetch("<?php echo e(route('user.cart.remove')); ?>", {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>'
            },
            body: JSON.stringify({ id: id })
        })
        .then(response => response.json())
        .then(data => {
            if(data.success) {
                location.reload();
            }
        });
    }
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\SwiftCart\resources\views/cart/index.blade.php ENDPATH**/ ?>