@extends('layout')

@section('content')
<div class="max-w-5xl mx-auto mb-8 relative">
    <a href="{{ route('shop.index') }}" class="absolute left-0 top-1 text-blue-600 hover:text-blue-800 font-medium transition">&larr; Continue Shopping</a>
    <h1 class="text-3xl font-bold text-gray-900 text-center">Your Cart</h1>
</div>

@if(count($cart) > 0)
<div class="bg-white rounded shadow overflow-hidden">
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th>
                <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider hidden">Price</th>
                <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Quantity</th>
                <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider hidden">Total</th>
                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
            @foreach($cart as $key => $item)
            <tr>
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm font-medium text-gray-900">{{ $item['name'] }}</div>
                    @if($item['variation_name'])
                        <div class="text-sm text-gray-500">{{ $item['variation_name'] }}</div>
                    @endif
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-900 hidden">${{ number_format($item['price'], 2) }}</td>
                <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-900">{{ $item['quantity'] }}</td>
                <td class="px-6 py-4 whitespace-nowrap text-center text-sm font-bold text-gray-900 hidden">${{ number_format($item['price'] * $item['quantity'], 2) }}</td>
                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                    <form action="{{ route('cart.remove') }}" method="POST">
                        @csrf
                        <input type="hidden" name="cart_key" value="{{ $key }}">
                        <button type="submit" class="text-red-600 hover:text-red-900">Remove</button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
    <div class="bg-gray-50 px-6 py-4 border-t border-gray-200 justify-between items-center hidden">
        <span class="text-xl font-bold">Total: ${{ number_format($total, 2) }}</span>
    </div>
    <div class="p-6 bg-gray-50 flex justify-end">
        <button type="button" onclick="openMobilePopup()" class="bg-blue-600 text-white font-bold py-3 px-8 rounded shadow hover:bg-blue-700">Proceed to Checkout</button>
    </div>
</div>

<!-- Mobile Number Popup -->
<div id="mobilePopup" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white p-8 rounded-lg shadow-xl max-w-sm w-full">
        <h2 class="text-2xl font-bold mb-4">Enter Mobile Number</h2>
        <p class="text-gray-600 mb-6">Please provide a valid mobile number to proceed to checkout.</p>
        <form action="{{ route('cart.mobile') }}" method="POST">
            @csrf
            <input type="text" name="mobile" class="w-full border rounded px-3 py-2 mb-4" placeholder="Mobile Number" required pattern="[0-9]{10,15}">
            <div class="flex justify-end gap-2">
                <button type="button" onclick="closeMobilePopup()" class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded">Cancel</button>
                <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Continue</button>
            </div>
        </form>
    </div>
</div>

<script>
    function openMobilePopup() {
        document.getElementById('mobilePopup').classList.remove('hidden');
        document.getElementById('mobilePopup').classList.add('flex');
    }
    function closeMobilePopup() {
        document.getElementById('mobilePopup').classList.add('hidden');
        document.getElementById('mobilePopup').classList.remove('flex');
    }
</script>
@else
<div class="text-center py-12">
    <p class="text-xl text-gray-500 mb-6">Your cart is currently empty.</p>
    <a href="{{ route('shop.index') }}" class="bg-blue-600 text-white font-bold py-2 px-6 rounded hover:bg-blue-700 transition">Continue Shopping</a>
</div>
@endif
@endsection