@extends('layouts.app')

@section('content')
<div class="bg-zinc-50 min-h-screen py-8">
    <div class="container mx-auto px-4 max-w-6xl">

        {{-- Header --}}
        <div class="flex items-center justify-between mb-5 flex-wrap gap-3">
            <h2 class="text-base md:text-lg font-medium text-zinc-900 flex items-center gap-2">
                <i class="fas fa-shopping-cart w-4 h-4 text-zinc-500 text-sm"></i>
                শপিং কার্ট
                <span class="px-2 py-0.5 text-xs rounded-full bg-zinc-100 text-zinc-500">
                    {{ array_sum(array_column($cartItems, 'quantity')) }} টি
                </span>
            </h2>
            @if(count($cartItems))
                @auth
                    <button onclick="clearServerCart()" class="text-zinc-400 font-medium text-xs md:text-sm hover:text-zinc-700 transition-colors flex items-center gap-1.5">
                        <i class="far fa-trash-alt"></i> কার্ট খালি করুন
                    </button>
                @else
                    <button onclick="clearLocalCart()" class="text-zinc-400 font-medium text-xs md:text-sm hover:text-zinc-700 transition-colors flex items-center gap-1.5">
                        <i class="far fa-trash-alt"></i> কার্ট খালি করুন
                    </button>
                @endauth
            @endif
        </div>

        @if(count($cartItems))
        <div class="flex flex-col lg:flex-row gap-6 items-start">

            {{-- Left: Items --}}
            <div class="flex-1 w-full space-y-3">
                {{-- Table Header (desktop only) --}}
                <div class="hidden md:grid grid-cols-[32px_2fr_110px_130px_90px_32px] items-center px-4 py-2 text-[11px] font-medium text-zinc-400 uppercase tracking-wide">
                    <div><input type="checkbox" id="select-all" checked class="w-3.5 h-3.5 accent-zinc-900 rounded"></div>
                    <div>পণ্যের বিবরণ</div>
                    <div class="text-center">একক মূল্য</div>
                    <div class="text-center">পরিমাণ</div>
                    <div class="text-center">সাবটোটাল</div>
                    <div></div>
                </div>

                {{-- Items List --}}
                <div id="cart-items-container" class="space-y-3">
                    @foreach($cartItems as $item)
                        <div data-product-id="{{ $item['product_id'] }}"
                             data-price="{{ $item['price'] }}"
                             class="group grid grid-cols-[32px_1fr] md:grid-cols-[32px_2fr_110px_130px_90px_32px] items-center gap-3 md:gap-0 p-4 rounded-xl bg-white border border-zinc-200 hover:border-zinc-300 transition-all duration-200">

                            {{-- Checkbox --}}
                            <div class="flex items-start md:items-center pt-1 md:pt-0">
                                <input type="checkbox" class="item-checkbox w-3.5 h-3.5 accent-zinc-900 rounded" checked>
                            </div>

                            {{-- Product Info --}}
                            <div class="flex items-center gap-3 min-w-0">
                                <div class="relative w-12 h-12 rounded-lg overflow-hidden bg-zinc-100 flex-shrink-0 transition-colors duration-200 group-hover:bg-zinc-200">
                                    @if($item['image'])
                                        <img src="{{ asset('uploads/' . $item['image']) }}" class="w-full h-full object-contain p-1" alt="{{ $item['name'] }}">
                                    @endif
                                </div>
                                <div class="min-w-0">
                                    <h4 class="text-sm font-medium text-zinc-900 line-clamp-2 leading-snug">{{ $item['name'] }}</h4>
                                    {{-- Mobile: show price + subtotal inline --}}
                                    <div class="md:hidden mt-1 flex items-center gap-2 text-sm text-zinc-500">
                                        <span>৳{{ number_format($item['price']) }}</span>
                                    </div>
                                </div>
                            </div>

                            {{-- Unit Price (desktop) --}}
                            <div class="hidden md:block text-center text-sm text-zinc-500">
                                ৳{{ number_format($item['price']) }}
                            </div>

                            {{-- Quantity Stepper --}}
                            <div class="col-span-2 md:col-span-1 flex md:justify-center mt-2 md:mt-0">
                                <div class="flex items-center gap-1">
                                    <button onclick="changeCartQty({{ $item['product_id'] }}, -1, this)"
                                        class="p-1.5 rounded-md hover:bg-zinc-100 text-zinc-500 transition-colors">
                                        <i class="fa fa-minus text-[10px]"></i>
                                    </button>
                                    <span class="item-qty text-xs text-zinc-600 w-6 text-center font-medium">{{ $item['quantity'] }}</span>
                                    <button onclick="changeCartQty({{ $item['product_id'] }}, 1, this)"
                                        class="p-1.5 rounded-md hover:bg-zinc-100 text-zinc-500 transition-colors">
                                        <i class="fa fa-plus text-[10px]"></i>
                                    </button>
                                </div>
                            </div>

                            {{-- Subtotal (desktop) --}}
                            <div class="hidden md:block text-center text-sm font-medium text-zinc-900">
                                ৳<span class="item-subtotal">{{ number_format($item['price'] * $item['quantity']) }}</span>
                            </div>

                            {{-- Remove --}}
                            <div class="flex md:justify-center">
                                <button onclick="removeCartItem({{ $item['product_id'] }})"
                                    class="p-1.5 rounded-md hover:bg-zinc-100 text-zinc-400 hover:text-zinc-600 transition-colors">
                                    <i class="fa fa-times text-xs"></i>
                                </button>
                            </div>
                        </div>
                    @endforeach
                </div>

                {{-- Continue Shopping --}}
                <a href="{{ route('shop') }}" class="inline-flex items-center gap-2 pt-2 text-sm text-zinc-400 hover:text-zinc-700 transition-colors">
                    <i class="fas fa-chevron-left text-[10px]"></i> আরও কেনাকাটা করুন
                </a>
            </div>

            {{-- Right: Order Summary --}}
            <div class="w-full lg:w-80 flex-shrink-0 flex flex-col p-4 rounded-xl bg-white border border-zinc-200 lg:sticky lg:top-24">
                <div class="flex items-center gap-2 mb-3 pb-3 border-b border-zinc-200">
                    <i class="fas fa-receipt text-zinc-400 text-sm"></i>
                    <h3 class="text-sm font-medium text-zinc-900">অর্ডার সামারি</h3>
                </div>

                <div class="space-y-2.5 text-sm">
                    <div class="flex items-center justify-between">
                        <span class="text-zinc-500">সর্বমোট আইটেম</span>
                        <span id="total-items-count" class="text-zinc-700">{{ array_sum(array_column($cartItems, 'quantity')) }} টি</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-zinc-500">সাবটোটাল</span>
                        <span class="text-zinc-700">৳{{ number_format(array_sum(array_map(fn($i) => $i['price'] * $i['quantity'], $cartItems))) }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-zinc-500">ডেলিভারি চার্জ</span>
                        <span class="text-zinc-700">ফ্রী</span>
                    </div>
                </div>

                <div class="flex items-center justify-between pt-3 mt-3 border-t border-zinc-200">
                    <span class="text-sm font-medium text-zinc-900">সর্বমোট</span>
                    <span class="text-sm font-semibold text-zinc-900">৳<span id="grand-total-price">{{ number_format(array_sum(array_map(fn($i) => $i['price'] * $i['quantity'], $cartItems))) }}</span></span>
                </div>

                <button onclick="proceedToCheckout()"
                    class="w-full mt-4 bg-zinc-900 hover:bg-zinc-800 text-white py-2.5 rounded-md text-sm font-medium transition-colors flex items-center justify-center gap-2">
                    <i class="fas fa-credit-card text-xs"></i> চেকআউট করুন
                </button>

                {{-- Trust Row --}}
                <div class="flex items-center justify-around mt-4 pt-4 border-t border-zinc-200 text-zinc-400">
                    <div class="text-center flex-1">
                        <i class="fas fa-shield-alt text-sm"></i>
                        <p class="text-[9px] font-medium uppercase mt-1 tracking-wide text-zinc-400">নিরাপদ</p>
                    </div>
                    <div class="text-center flex-1">
                        <i class="fas fa-truck text-sm"></i>
                        <p class="text-[9px] font-medium uppercase mt-1 tracking-wide text-zinc-400">দ্রুত ডেলিভারি</p>
                    </div>
                    <div class="text-center flex-1">
                        <i class="fas fa-rotate-left text-sm"></i>
                        <p class="text-[9px] font-medium uppercase mt-1 tracking-wide text-zinc-400">সহজ রিটার্ন</p>
                    </div>
                </div>
            </div>
        </div>

        @else
            {{-- Empty Cart --}}
            <div id="empty-cart-placeholder" class="p-14 md:p-20 rounded-xl text-center bg-white border border-zinc-200">
                <div class="w-16 h-16 bg-zinc-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fa fa-shopping-cart text-zinc-300 text-2xl"></i>
                </div>
                <h3 class="text-base md:text-lg font-medium text-zinc-900">আপনার কার্টটি বর্তমানে খালি</h3>
                <p class="text-zinc-400 text-sm mt-1.5 mb-6">আমাদের সেরা পণ্যগুলো দেখতে শপ পেজে ফিরে যান।</p>
                <a href="{{ route('shop') }}" class="inline-flex items-center gap-2 bg-zinc-900 hover:bg-zinc-800 text-white px-6 py-2.5 rounded-md font-medium text-sm transition-colors">
                    কেনাকাটা শুরু করুন
                </a>
            </div>
        @endif
    </div>
</div>

<script>
    function changeCartQty(productId, delta, btn) {
        const row = btn.closest('[data-product-id]');
        const qtySpan = row.querySelector('.item-qty');
        const currentQty = parseInt(qtySpan.textContent) || 1;
        const newQty = currentQty + delta;

        if (newQty < 1) return; // qty 1 theke minus korle abar 0 hobe na; remove button use korte hobe

        // Optimistic update — click korার sathe sathe UI update, AJAX response er জন্য wait korte hobe না
        qtySpan.textContent = newQty;
        updateRowSubtotal(row);

        const buttons = row.querySelectorAll('button');
        buttons.forEach(b => b.disabled = true);

        $.ajax({
            url: '/cart/update',
            method: 'POST',
            data: {
                product_id: productId,
                quantity: newQty
            },
            success: function (data) {
                if (data.success) {
                    document.getElementById('grand-total-price').innerText = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(data.cart_total);
                    document.getElementById('total-items-count').innerText = data.cart_count + ' টি';
                    window.dispatchEvent(new CustomEvent('cart-updated'));
                } else {
                    // rollback jodi server side reject kore
                    qtySpan.textContent = currentQty;
                    updateRowSubtotal(row);
                }
            },
            error: function () {
                qtySpan.textContent = currentQty;
                updateRowSubtotal(row);
                alert('আপডেট ব্যর্থ হয়েছে, আবার চেষ্টা করুন।');
            },
            complete: function () {
                buttons.forEach(b => b.disabled = false);
            }
        });
    }

    function updateRowSubtotal(row) {
        const price = parseFloat(row.dataset.price);
        const qty = parseInt(row.querySelector('.item-qty').textContent) || 0;
        const subtotalEl = row.querySelector('.item-subtotal');
        if (subtotalEl) {
            subtotalEl.textContent = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(price * qty);
        }
    }

    function removeCartItem(productId) {
        if (!confirm('এই পণ্যটি কার্ট থেকে সরাতে চান?')) return;

        $.ajax({
            url: '/cart/remove',
            method: 'POST',
            data: { product_id: productId },
            success: function (data) {
                if (data.success) {
                    location.reload();
                }
            },
            error: function () {
                alert('মুছতে ব্যর্থ হয়েছে, আবার চেষ্টা করুন।');
            }
        });
    }

    function clearServerCart() {
        if (!confirm('আপনি কি নিশ্চিত যে পুরো কার্ট খালি করতে চান?')) return;

        const container = document.getElementById('cart-items-container');
        const items = container.querySelectorAll('[data-product-id]');
        let completed = 0;
        const total = items.length;

        if (total === 0) return;

        items.forEach(el => {
            const pid = el.dataset.productId;
            $.ajax({
                url: '/cart/remove',
                method: 'POST',
                data: { product_id: pid },
                complete: function () {
                    completed++;
                    if (completed === total) location.reload();
                }
            });
        });
    }

    function clearLocalCart() {
        if (!confirm('আপনি কি নিশ্চিত যে পুরো কার্ট খালি করতে চান?')) return;
        localStorage.removeItem('khulna_mal_cart');
        window.dispatchEvent(new Event('cart-updated'));
        location.reload();
    }

    function proceedToCheckout() {
        window.location.href = "{{ route('checkout') }}";
    }
</script>
@endsection