@extends('layouts.app')

@section('title', 'Shopping Cart - Saba Remedies')

@section('content')
<!-- Page Header -->
<div class="bg-gradient-to-r from-emerald-800 to-teal-900 text-white py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-2xl sm:text-3xl font-extrabold">My Shopping Cart</h1>
        <p class="text-xs text-emerald-200 mt-1">Review your selected Unani remedies before proceeding to checkout</p>
    </div>
</div>

<section class="py-12 bg-slate-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        @if($standardItems->count() > 0 || $sbItems->count() > 0)
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
                
                <!-- Cart Items Table Column -->
                <div class="lg:col-span-8 space-y-4">
                    <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
                        <div class="overflow-x-auto">
                            <table class="w-full text-left border-collapse text-xs">
                                <thead>
                                    <tr class="bg-slate-100 text-slate-700 font-bold uppercase tracking-wider text-[11px] border-b border-slate-200">
                                        <th class="py-4 px-4">Item Details</th>
                                        <th class="py-4 px-4 w-28">Price</th>
                                        <th class="py-4 px-4 w-36 text-center">Quantity</th>
                                        <th class="py-4 px-4 w-28 text-center">Subtotal</th>
                                        <th class="py-4 px-4 w-16 text-center">Remove</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-100 font-medium text-slate-800">
                                    
                                    <!-- Standard Cart Items -->
                                    @foreach($standardItems as $item)
                                        @php
                                            $itemSubtotal = (float)$item->price * (int)$item->quantity;
                                        @endphp
                                        <tr class="hover:bg-slate-50 transition-colors">
                                            <td class="py-4 px-4">
                                                <div class="flex items-center gap-3">
                                                    <div class="w-12 h-12 rounded-xl bg-emerald-50 text-emerald-700 flex items-center justify-center flex-shrink-0 text-xl font-bold">
                                                        <i class="fa-solid fa-pills"></i>
                                                    </div>
                                                    <div>
                                                        <a href="{{ route('products.show', ['id' => $item->prod_id]) }}" class="font-bold text-slate-900 hover:text-emerald-700 text-sm">
                                                            {{ $item->prod_name ?? ($item->product->prod_name ?? 'Unani Medicine') }}
                                                        </a>
                                                        @if($item->prod_size)
                                                            <div class="text-[11px] text-slate-400">Pack: {{ $item->prod_size }}</div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="py-4 px-4 font-bold text-slate-900">
                                                ₹{{ $item->price }}
                                            </td>
                                            <td class="py-4 px-4 text-center">
                                                <div class="inline-flex items-center border border-slate-300 rounded-xl overflow-hidden bg-white shadow-xs">
                                                    <button type="button" onclick="updateItemQty('{{ $item->id }}', -1, 'standard')" class="px-2.5 py-1 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold">-</button>
                                                    <input type="text" id="qty-std-{{ $item->id }}" value="{{ $item->quantity }}" readonly class="w-10 text-center text-xs font-bold border-none py-1">
                                                    <button type="button" onclick="updateItemQty('{{ $item->id }}', 1, 'standard')" class="px-2.5 py-1 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold">+</button>
                                                </div>
                                            </td>
                                            <td class="py-4 px-4 text-center font-bold text-emerald-700" id="subtotal-std-{{ $item->id }}">
                                                ₹{{ $itemSubtotal }}
                                            </td>
                                            <td class="py-4 px-4 text-center">
                                                <a href="{{ route('cart.delete', ['id' => $item->id]) }}" class="text-red-500 hover:text-red-700 p-2 inline-block transition-colors" title="Remove Item">
                                                    <i class="fa-regular fa-trash-can text-sm"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach

                                    <!-- Sb Product Cart Items -->
                                    @foreach($sbItems as $sbItem)
                                        @php
                                            $sbSubtotal = (float)$sbItem->price * (int)$sbItem->quantity;
                                        @endphp
                                        <tr class="hover:bg-slate-50 transition-colors">
                                            <td class="py-4 px-4">
                                                <div class="flex items-center gap-3">
                                                    <div class="w-12 h-12 rounded-xl bg-slate-100 p-1 flex items-center justify-center flex-shrink-0 overflow-hidden">
                                                        @if($sbItem->sbProduct && $sbItem->sbProduct->prod_img1)
                                                            <img src="{{ product_image_url($sbItem->sbProduct->prod_img1) }}" class="w-full h-full object-contain" onerror="this.onerror=null;this.src='{{ asset('img/about.png') }}';">
                                                        @else
                                                            <i class="fa-solid fa-leaf text-emerald-600"></i>
                                                        @endif
                                                    </div>
                                                    <div>
                                                        <a href="{{ route('products.show', ['id' => $sbItem->prod_id]) }}" class="font-bold text-slate-900 hover:text-emerald-700 text-sm">
                                                            {{ $sbItem->prod_name }}
                                                        </a>
                                                        @if($sbItem->detail)
                                                            <div class="text-[11px] text-slate-400">
                                                                Pack: {{ $sbItem->detail->prod_quantity }} {{ $sbItem->detail->prod_quantity_type }}
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="py-4 px-4 font-bold text-slate-900">
                                                ₹{{ $sbItem->price }}
                                            </td>
                                            <td class="py-4 px-4 text-center">
                                                <div class="inline-flex items-center border border-slate-300 rounded-xl overflow-hidden bg-white shadow-xs">
                                                    <button type="button" onclick="updateItemQty('{{ $sbItem->id }}', -1, 'sb')" class="px-2.5 py-1 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold">-</button>
                                                    <input type="text" id="qty-sb-{{ $sbItem->id }}" value="{{ $sbItem->quantity }}" readonly class="w-10 text-center text-xs font-bold border-none py-1">
                                                    <button type="button" onclick="updateItemQty('{{ $sbItem->id }}', 1, 'sb')" class="px-2.5 py-1 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold">+</button>
                                                </div>
                                            </td>
                                            <td class="py-4 px-4 text-center font-bold text-emerald-700" id="subtotal-sb-{{ $sbItem->id }}">
                                                ₹{{ $sbSubtotal }}
                                            </td>
                                            <td class="py-4 px-4 text-center">
                                                <a href="{{ route('cart.delete', ['id' => $sbItem->id]) }}" class="text-red-500 hover:text-red-700 p-2 inline-block transition-colors" title="Remove Item">
                                                    <i class="fa-regular fa-trash-can text-sm"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach

                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="flex items-center justify-between pt-2">
                        <a href="{{ route('products.classic') }}" class="inline-flex items-center gap-2 text-xs font-bold text-emerald-700 hover:underline">
                            &larr; Continue Shopping
                        </a>
                    </div>
                </div>

                <!-- Cart Totals & Checkout Summary Column -->
                <div class="lg:col-span-4 space-y-6">
                    <div class="bg-white rounded-3xl border border-slate-200 p-6 shadow-sm space-y-5">
                        <h3 class="font-extrabold text-slate-900 text-base border-b border-slate-100 pb-3">Order Summary</h3>

                        <!-- Promo Code Input -->
                        <div>
                            @if($appliedPromo)
                                <div class="flex items-center justify-between p-3 bg-emerald-50 border border-emerald-200 rounded-xl text-xs">
                                    <div>
                                        <div class="font-bold text-emerald-800">Coupon: {{ $appliedPromo }}</div>
                                        <div class="text-[11px] text-emerald-600">Discount Applied: -₹{{ $discount }}</div>
                                    </div>
                                    <a href="{{ route('cart.remove-promo') }}" class="text-red-600 font-bold hover:underline">Remove</a>
                                </div>
                            @else
                                <form action="{{ route('cart.apply-promo') }}" method="POST" class="flex gap-2">
                                    @csrf
                                    <input type="text" name="promo_code" placeholder="Enter coupon code" required class="flex-1 bg-slate-50 border border-slate-300 rounded-xl px-3 py-2 text-xs focus:ring-1 focus:ring-emerald-500">
                                    <button type="submit" class="bg-slate-800 hover:bg-slate-900 text-white font-bold px-4 py-2 rounded-xl text-xs transition-colors">Apply</button>
                                </form>
                            @endif
                        </div>

                        <!-- Calculations -->
                        <div class="space-y-2 text-xs text-slate-600 border-t border-slate-100 pt-3">
                            <div class="flex justify-between">
                                <span>Cart Subtotal</span>
                                <span class="font-bold text-slate-900">₹{{ $subtotal }}</span>
                            </div>
                            @if($discount > 0)
                                <div class="flex justify-between text-emerald-600">
                                    <span>Discount</span>
                                    <span class="font-bold">-₹{{ $discount }}</span>
                                </div>
                            @endif
                            <div class="flex justify-between">
                                <span>Estimated Shipping</span>
                                <span class="font-bold text-emerald-600">Calculated at Checkout</span>
                            </div>
                            <div class="border-t border-slate-200 pt-3 flex justify-between items-baseline text-sm">
                                <span class="font-extrabold text-slate-900">Total Amount</span>
                                <span class="text-xl font-extrabold text-emerald-700">₹{{ $total }}</span>
                            </div>
                        </div>

                        <!-- Checkout Button -->
                        @if(session('loggedin'))
                            <a href="{{ route('checkout.index') }}" class="block w-full text-center bg-brand-red hover:bg-brand-darkred text-white font-bold py-3.5 px-6 rounded-2xl text-sm shadow-md hover:shadow-lg transition-all">
                                <i class="fa-solid fa-lock mr-2"></i> Proceed to Checkout
                            </a>
                        @else
                            <a href="{{ route('auth.login') }}?redirect_to=checkout" class="block w-full text-center bg-brand-red hover:bg-brand-darkred text-white font-bold py-3.5 px-6 rounded-2xl text-sm shadow-md hover:shadow-lg transition-all">
                                <i class="fa-solid fa-right-to-bracket mr-2"></i> Login to Checkout
                            </a>
                        @endif

                        <div class="text-center text-[11px] text-slate-400">
                            <i class="fa-solid fa-shield-halved mr-1 text-emerald-600"></i> Guaranteed 100% safe &amp; secure checkout
                        </div>
                    </div>
                </div>

            </div>
        @else
            <!-- Empty Cart State -->
            <div class="bg-white rounded-3xl p-16 text-center border border-slate-200 max-w-md mx-auto shadow-xs">
                <div class="w-20 h-20 rounded-full bg-emerald-50 text-emerald-600 flex items-center justify-center text-4xl mx-auto mb-4">
                    <i class="fa-solid fa-bag-shopping"></i>
                </div>
                <h2 class="text-xl font-bold text-slate-800">Your Cart is Empty</h2>
                <p class="text-xs text-slate-500 mt-2 mb-6">Looks like you haven't added any authentic Unani medicines to your cart yet.</p>
                <a href="{{ route('products.classic') }}" class="inline-block bg-brand-red hover:bg-brand-darkred text-white font-bold text-xs px-8 py-3 rounded-full shadow transition-all">
                    Start Shopping
                </a>
            </div>
        @endif

    </div>
</section>
@endsection

@push('scripts')
<script>
    function updateItemQty(id, delta, type) {
        const inputId = type === 'sb' ? '#qty-sb-' + id : '#qty-std-' + id;
        const subtotalId = type === 'sb' ? '#subtotal-sb-' + id : '#subtotal-std-' + id;
        
        let currentVal = parseInt($(inputId).val()) || 1;
        let newVal = currentVal + delta;
        if (newVal < 1) return;

        $.post("{{ route('cart.update') }}", {
            id: id,
            quantity: newVal,
            type: type
        }, function(res) {
            if (res.status) {
                $(inputId).val(newVal);
                $(subtotalId).text('₹' + res.subtotal);
                window.location.reload(); // Refresh to recalculate grand total & promo
            }
        });
    }
</script>
@endpush