<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
     <?php $__env->slot('header', null, []); ?> 
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            <?php echo e(__('Keranjang Belanja')); ?>

        </h2>
     <?php $__env->endSlot(); ?>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">

            
            <?php if(session('success')): ?>
                <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4">
                    <span class="block sm:inline"><?php echo e(session('success')); ?></span>
                </div>
            <?php endif; ?>
            <?php if(session('error')): ?>
                <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4">
                    <span class="block sm:inline"><?php echo e(session('error')); ?></span>
                </div>
            <?php endif; ?>

            
            <?php if(!$cart || $cart->items->isEmpty()): ?>
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-10 text-center">
                        <div class="mb-4">
                            <svg class="mx-auto h-16 w-16 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
                            </svg>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900">Keranjang Anda kosong</h3>
                        <p class="mt-1 text-gray-500">Sepertinya Anda belum menambahkan item apa pun.</p>
                        <div class="mt-6">
                            <a href="<?php echo e(route('products.index')); ?>"
                                class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                                Mulai Belanja
                            </a>
                        </div>
                    </div>
                </div>

            <?php else: ?>
                <div id="cart-wrapper">
                    <div class="flex flex-col md:flex-row gap-6">

                        
                        <div class="md:w-3/4 space-y-3">

                            
                            <div class="bg-white rounded-lg shadow-sm px-6 py-3 flex items-center gap-3 border-b">
                                <input type="checkbox" id="check-all"
                                    class="w-5 h-5 rounded border-gray-300 text-indigo-600 cursor-pointer">
                                <label for="check-all" class="text-sm font-semibold text-gray-700 cursor-pointer select-none">
                                    Pilih Semua
                                </label>
                            </div>

                            
                            <?php $__currentLoopData = $cart->items; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <div class="bg-white rounded-lg shadow-sm px-6 py-4 flex items-center gap-4 hover:shadow-md transition"
                                    data-item-id="<?php echo e($item->id); ?>"
                                    data-item-price="<?php echo e($item->price); ?>"
                                    data-item-qty="<?php echo e($item->quantity); ?>">

                                    
                                    <input type="checkbox"
                                        class="item-checkbox w-5 h-5 rounded border-gray-300 text-indigo-600 cursor-pointer flex-shrink-0"
                                        value="<?php echo e($item->id); ?>"
                                        data-price="<?php echo e($item->price * $item->quantity); ?>">

                                    
                                    <?php
                                        $cartImgPath = null;
                                        if ($item->variant && $item->variant->image) {
                                            $cartImgPath = $item->variant->image->image_path;
                                        } elseif ($item->product->images && $item->product->images->count() > 0) {
                                            $cover = $item->product->images->firstWhere('is_primary', true) ?? $item->product->images->first();
                                            $cartImgPath = $cover->image_path;
                                        }
                                    ?>
                                    <div class="flex-shrink-0 h-20 w-20">
                                        <?php if($cartImgPath): ?>
                                            <img class="h-20 w-20 rounded-lg object-cover"
                                                src="<?php echo e(asset('storage/' . $cartImgPath)); ?>"
                                                alt="<?php echo e($item->product->name); ?>">
                                        <?php else: ?>
                                            <img class="h-20 w-20 rounded-lg object-cover"
                                                src="https://via.placeholder.com/150" alt="No Image">
                                        <?php endif; ?>
                                    </div>

                                    
                                    <div class="flex-1 min-w-0">
                                        <p class="text-sm font-semibold text-gray-900 truncate"><?php echo e($item->product->name); ?></p>
                                        <?php if($item->variant): ?>
                                            <p class="text-xs text-gray-500 mt-0.5">
                                                <?php echo e($item->variant->size ?? ''); ?> / <?php echo e($item->variant->color ?? ''); ?>

                                            </p>
                                        <?php endif; ?>
                                        <p class="text-indigo-600 font-bold mt-1">
                                            Rp <?php echo e(number_format($item->price, 0, ',', '.')); ?>

                                        </p>
                                    </div>

                                    
                                    <div class="flex-shrink-0">
                                        <div class="flex items-center border border-gray-300 rounded-lg overflow-hidden">
                                            <button type="button" onclick="adjustQty(this, -1, '<?php echo e($item->id); ?>')"
                                                class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 font-bold text-lg leading-none transition">−</button>
                                            <input type="number" id="qty-<?php echo e($item->id); ?>"
                                                value="<?php echo e($item->quantity); ?>" min="1"
                                                max="<?php echo e($item->variant ? $item->variant->stock : ($item->product->variants->first()->stock ?? 999)); ?>"
                                                class="w-12 text-center border-0 text-sm focus:ring-0 qty-input"
                                                data-item-id="<?php echo e($item->id); ?>"
                                                onchange="updateQuantity(this)">
                                            <button type="button" onclick="adjustQty(this, 1, '<?php echo e($item->id); ?>')"
                                                class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 font-bold text-lg leading-none transition">+</button>
                                        </div>
                                    </div>

                                    
                                    <div class="flex-shrink-0 text-right min-w-[100px]">
                                        <p class="text-sm font-bold text-gray-900 item-subtotal" id="subtotal-<?php echo e($item->id); ?>">
                                            Rp <?php echo e(number_format($item->price * $item->quantity, 0, ',', '.')); ?>

                                        </p>
                                    </div>

                                    
                                    <div class="flex-shrink-0">
                                        <form action="<?php echo e(route('cart.destroy', $item->id)); ?>" method="POST"
                                            onsubmit="return confirm('Yakin ingin menghapus item ini?')">
                                            <?php echo csrf_field(); ?>
                                            <?php echo method_field('DELETE'); ?>
                                            <button type="submit" class="text-red-400 hover:text-red-600 transition">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
                                                    viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                                </svg>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                            
                            <div class="bg-white rounded-lg shadow-sm px-6 py-3">
                                <a href="<?php echo e(route('products.index')); ?>"
                                    class="text-sm text-indigo-600 hover:text-indigo-900 font-medium flex items-center w-fit">
                                    <svg class="h-4 w-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                                    </svg>
                                    Lanjut Belanja
                                </a>
                            </div>
                        </div>

                        
                        <div class="md:w-1/4">
                            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg sticky top-6">
                                <div class="p-6">
                                    <h3 class="text-lg font-medium text-gray-900 border-b pb-4 mb-4">Ringkasan Pesanan</h3>

                                    <div class="flex justify-between mb-2 text-sm text-gray-600">
                                        <span>Item Dipilih</span>
                                        <span id="summary-count" class="font-semibold">0 item</span>
                                    </div>

                                    <div class="flex justify-between mb-4 text-sm text-gray-600">
                                        <span>Subtotal</span>
                                        <span id="summary-subtotal" class="font-semibold">Rp 0</span>
                                    </div>

                                    <div class="border-t pt-4 flex justify-between items-center mb-6">
                                        <span class="text-base font-bold text-gray-900">Total</span>
                                        <span id="summary-total" class="text-lg font-bold text-indigo-600">Rp 0</span>
                                    </div>

                                    <?php if(auth()->guard()->check()): ?>
                                        <button type="button" id="btn-checkout"
                                            onclick="submitCheckout()"
                                            disabled
                                            class="w-full flex justify-center py-2.5 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed transition">
                                            Checkout (<span id="btn-count">0</span>)
                                        </button>
                                    <?php else: ?>
                                        <a href="<?php echo e(route('login')); ?>"
                                            class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-600 hover:bg-gray-700">
                                            Login untuk Checkout
                                        </a>
                                    <?php endif; ?>

                                    <p class="mt-4 text-xs text-center text-gray-500">
                                        Pilih item yang ingin di-checkout.<br>Ongkir dihitung saat checkout.
                                    </p>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            <?php endif; ?>
        </div>
    </div>

<script>
    // =============================================
    // LOGIKA CHECKBOX & SUMMARY
    // =============================================
    const checkAll        = document.getElementById('check-all');
    const btnCheckout     = document.getElementById('btn-checkout');
    const btnCount        = document.getElementById('btn-count');
    const summaryCount    = document.getElementById('summary-count');
    const summarySubtotal = document.getElementById('summary-subtotal');
    const summaryTotal    = document.getElementById('summary-total');

    function getChecked() {
        return document.querySelectorAll('.item-checkbox:checked');
    }

    function formatRupiah(num) {
        return 'Rp ' + num.toLocaleString('id-ID');
    }

    function updateSummary() {
        const checked = getChecked();
        let total = 0;

        checked.forEach(cb => {
            const row   = cb.closest('[data-item-id]');
            const price = parseInt(row.dataset.itemPrice);
            const qty   = parseInt(row.querySelector('.qty-input').value);
            total += price * qty;
        });

        const count = checked.length;

        summaryCount.textContent    = count + ' item';
        summarySubtotal.textContent = formatRupiah(total);
        summaryTotal.textContent    = formatRupiah(total);

        if (btnCount) btnCount.textContent = count;
        if (btnCheckout) btnCheckout.disabled = count === 0;

        const allBoxes = document.querySelectorAll('.item-checkbox');
        if (checkAll) {
            checkAll.checked       = allBoxes.length > 0 && count === allBoxes.length;
            checkAll.indeterminate = count > 0 && count < allBoxes.length;
        }
    }

    if (checkAll) {
        checkAll.addEventListener('change', function () {
            document.querySelectorAll('.item-checkbox').forEach(cb => {
                cb.checked = this.checked;
            });
            updateSummary();
        });
    }

    document.querySelectorAll('.item-checkbox').forEach(cb => {
        cb.addEventListener('change', updateSummary);
    });

    // =============================================
    // UPDATE QUANTITY VIA AJAX
    // =============================================
    function adjustQty(btn, delta, itemId) {
        const input = document.getElementById('qty-' + itemId);
        if (!input) return;
        
        const min = parseInt(input.min) || 1;
        const max = parseInt(input.max) || 999;
        let val = parseInt(input.value) + delta;

        if (val < min) val = min;
        if (val > max) val = max;

        input.value = val;
        updateQuantity(input);
    }

    function updateQuantity(input) {
        const itemId = input.dataset.itemId;
        const qty = parseInt(input.value);
        
        fetch(`/cart/${itemId}`, {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>'
            },
            body: JSON.stringify({ quantity: qty })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Update subtotal item
                const subtotalEl = document.getElementById('subtotal-' + itemId);
                if (subtotalEl) subtotalEl.textContent = data.item_subtotal;
                
                // Update row dataset
                const row = document.querySelector(`[data-item-id="${itemId}"]`);
                if (row) {
                    row.dataset.itemQty = qty;
                }
                
                // Update ringkasan
                updateSummary();
            } else {
                alert(data.message);
                location.reload();
            }
        })
        .catch(error => {
            console.error('Error:', error);
            location.reload();
        });
    }

    // =============================================
    // SUBMIT CHECKOUT - HANYA ITEM YANG DIPILIH
    // =============================================
    function submitCheckout() {
        const checked = getChecked();
        if (checked.length === 0) {
            alert('Pilih minimal 1 produk untuk di-checkout!');
            return;
        }

        // Buat form baru
        const form = document.createElement('form');
        form.method = 'GET';
        form.action = '<?php echo e(route('checkout.index')); ?>';
        
        // Tambahkan CSRF token
        const csrf = document.createElement('input');
        csrf.type = 'hidden';
        csrf.name = '_token';
        csrf.value = '<?php echo e(csrf_token()); ?>';
        form.appendChild(csrf);
        
        // Tambahkan selected items (HANYA YANG DICENTANG)
        checked.forEach(cb => {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'selected_items[]';
            input.value = cb.value; // Ini adalah cart_item_id
            form.appendChild(input);
        });
        
        document.body.appendChild(form);
        form.submit();
    }

    // Inisialisasi awal
    updateSummary();
</script>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?><?php /**PATH C:\laragon\www\e_commerce_pakaian\resources\views/customer/cart/index.blade.php ENDPATH**/ ?>