@extends('layouts.main-app')

@section('title', 'Cart')

@section('content')

    @include('layouts.navbar')

    <div class="bg-[#f2f2f2] h-screen">
        <div class="container mx-auto">
            <div class="grid grid-cols-2">
                <div class="py-14">
                    <h1 class="text-black font-medium text-4xl py-3">Cart</h1>
                    <hr class="border-black">
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3">
                <div class="grid col-span-2">
                    <div class="overflow-x-auto">
                        <table class="min-w-full bg-white border border-gray-200">
                            <thead>
                                <tr>
                                    <th class="py-2 px-4 border-b text-left text-gray-600"></th>
                                    <th class="py-2 px-4 border-b text-left text-gray-600">Product</th>
                                    <th class="py-2 px-4 border-b text-right text-gray-600">Price</th>
                                    <th class="py-2 px-4 border-b text-center text-gray-600">Quantity</th>
                                    <th class="py-2 px-4 border-b text-right text-gray-600">Subtotal</th>
                                    <th class="py-2 px-4 border-b text-center text-gray-600"></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($cartItems as $id => $item)
                                    <tr>
                                        <td class="py-2 px-4 border-b flex items-center">
                                            {{-- <img src="{{ asset($item['image']) }}" alt="{{ $item['name'] }}"
                                                class="w-16 h-16 mr-4"> --}}
                                        </td>
                                        <td><span>{{ $item['name'] }}</span></td>
                                        <td class="py-2 px-4 border-b text-right">₱{{ number_format($item['price'], 2) }}
                                        </td>
                                        <td class="py-2 px-4 border-b text-center">
                                            <form action="{{ route('cart.update', $id) }}" method="POST">
                                                @csrf
                                                @method('PUT')
                                                <div class="flex justify-center items-center">
                                                    <button type="button"
                                                        class="px-2 py-1 text-gray-600 bg-gray-200 hover:bg-gray-300 decrease-quantity">−</button>
                                                    <input type="text" name="quantity"
                                                        class="w-12 text-center border mx-2"
                                                        value="{{ $item['quantity'] }}">
                                                    <button type="button"
                                                        class="px-2 py-1 text-gray-600 bg-gray-200 hover:bg-gray-300 increase-quantity">+</button>
                                                    <button type="submit" class="hidden">Update</button>
                                                </div>
                                            </form>
                                        </td>
                                        <td class="py-2 px-4 border-b text-right">
                                            ₱{{ number_format($item['price'] * $item['quantity'], 2) }}</td>
                                        <td class="py-2 px-4 border-b text-center text-red-600 cursor-pointer">
                                            <form action="{{ route('cart.remove', $id) }}" method="POST"
                                                class="inline-block">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit"
                                                    class="text-red-600 hover:text-red-800 cursor-pointer">×</button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>

                        </table>
                    </div>
                </div>
                <div>
                    <div class="py-4 px-3">
                        <div class="bg-white p-4 rounded-lg">
                            <h1 class="text-black font-semibold uppercase py-4">Cart Total</h1>
                            <div>
                                <div class="flex justify-between py-4">
                                    <h1 class="text-black font-medium">Subtotal</h1>
                                    <h1 class="text-gray-600" id="subtotal">₱{{ number_format($total, 2) }}</h1>
                                </div>
                                <hr class="py-2">
                                <div class="grid grid-cols-2">
                                    <div class="text-lg">
                                        <h1 class="text-gray-600">Shipping</h1>
                                        <h1 class="text-gray-600">Discount</h1>
                                        <h1 class="text-gray-600">Tax</h1>
                                    </div>
                                    <div class="text-lg py-3">
                                        <h1 class="flex justify-end text-gray-600" id="shipping-fee">TBD</h1>
                                        <h1 class="flex justify-end text-gray-600" id="discount">-₱0.00</h1>
                                        <h1 class="flex justify-end text-gray-600" id="tax">₱0.00</h1>
                                    </div>
                                </div>
                                <hr>
                                <div class="py-4 flex justify-between">
                                    <h1 class="text-2xl text-black">Estimated Total</h1>
                                    <h1 class="text-black text-2xl" id="estimated_total">₱{{ number_format($total, 2) }}
                                    </h1>
                                </div>
                                <div>
                                    <div class="flex flex-col px-14 py-10 gap-2">
                                        @php
                                            $isCartEmpty = session()->get('cart', []) === []; // Check if the cart is empty
                                        @endphp

                                        <a href="{{ $isCartEmpty ? '#' : route('checkout.show') }}"
                                            class="bg-[#ff0000] text-white p-2 py-4 rounded-full text-center 
                                            {{ $isCartEmpty ? 'opacity-50 cursor-not-allowed' : '' }}"
                                            {{ $isCartEmpty ? 'disabled' : '' }}>
                                            PROCEED TO CHECKOUT
                                        </a>
                                        <a href="{{ route('shop.show') }}"
                                            class="border-black p-2 py-4 border rounded-full text-center">
                                            CONTINUE SHOPPING
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.querySelectorAll('.increase-quantity').forEach(button => {
            button.addEventListener('click', (event) => {
                const input = button.closest('form').querySelector('input[name="quantity"]');
                input.value = parseInt(input.value) + 1;
                button.closest('form').submit();
            });
        });

        document.querySelectorAll('.decrease-quantity').forEach(button => {
            button.addEventListener('click', (event) => {
                const input = button.closest('form').querySelector('input[name="quantity"]');
                if (parseInt(input.value) > 1) {
                    input.value = parseInt(input.value) - 1;
                    button.closest('form').submit();
                }
            });
        });
    </script>
@endsection