@extends('frontend.layouts.layouts')

@section('content')
    <div>
        <div class="relative z-0">
            <img src="{{ asset('img/cart/img-banner-header (2).jpg') }}" class="absolute object-cover w-full h-full"
                alt="Flowbite Logo">
            <div class="relative inset-0 z-50 flex items-center justify-center py-32">
                <style>
                    .marcellus-font {
                        font-family: 'Marcellus', serif;
                    }

                    .cursive-font {
                        font-family: 'Brush Script MT', 'Comic Sans MS', 'Segoe Script', 'Lucida Handwriting', cursive;
                    }
                </style>
                <div>
                    <h1
                        class="p-4 text-xl text-center text-black sm:text-3xl md:text-5xl lg:text-6xl xl:text-7xl marcellus-font">
                        Cart
                    </h1>
                </div>
            </div>
        </div>
        <div class="container mx-auto" style="font-family: 'Poppins', sans-serif;">
            <p class="py-16 text-4xl">Product</p>
            <!-- Modal -->
            <div id="success-modal" class="fixed top-0 right-0 z-50 hidden ">
                <div class="max-w-sm p-4 mx-auto bg-white rounded shadow-lg">
                    <div class="flex items-center justify-between">
                        <h2 class="text-lg font-bold">Success</h2>
                        <button id="modal-close" class="text-gray-500 hover:text-gray-700">&times;</button>
                    </div>
                    <p id="modal-message" class="mt-2"></p>
                </div>
            </div>

            <div class="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 ">
                <div class="w-full col-span-2 overflow-x-auto">
                    <table class="min-w-full text-center border-collapse">
                        <thead>
                            <tr>
                                <th>Select</th> <!-- New column for checkboxes -->
                                <th>Delete</th>
                                <th>Image</th>
                                <th>Name</th>
                                <th>Variant</th>
                                <th>Price</th>
                                <th>Quantity</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($cart as $productId => $item)
                                <tr class="py-10 text-sm border-y-2">


                                    <td class="px-4 py-2">
                                        <form action="{{ route('cart.updateSession') }}" method="POST"
                                            id="cart-checkbox-form-{{ $productId }}">
                                            @csrf
                                            <input type="hidden" name="product_id" value="{{ $productId }}">
                                            <input type="hidden" name="checked" value="0">
                                            <input type="checkbox" name="checked" value="1" class="form-checkbox"
                                                {{ isset($item['status']) && $item['status'] == 'checked_out' ? 'checked' : '' }}
                                                onchange="this.form.submit()">
                                        </form>
                                    </td>
                                    <td class="r">
                                        <form action="{{ route('cart.destroy', $productId) }}" method="POST"
                                            class="flex items-center justify-center">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="flex items-center justify-center w-20 px-5">
                                                <img src="{{ asset('img/cart/icon-delete.png') }}"
                                                    class="object-cover w-auto h-auto" alt="Delete Product">
                                            </button>
                                        </form>
                                    </td>

                                    <td class="flex items-center justify-center">
                                        <div class="flex items-center justify-center w-20 px-5 py-2 bg-gray-200">
                                            <img src="{{ asset($item['picture']) }}" class="object-contain w-auto h-28"
                                                alt="Product Image">
                                        </div>
                                    </td>
                                    <!-- Product Name -->
                                    <td class="px-4 py-2">{{ $item['name'] }}</td>
                                    <td class="px-4 py-2">{{ $item['variant'] }}</td>
                                    <!-- Product Price -->
                                    <td class="px-4 py-2">{{ number_format($item['price'], 2) }}</td>
                                    <!-- Quantity Control -->
                                    <td class="px-4 py-2">
                                        <form action="{{ route('cart.update', $productId) }}" method="POST"
                                            class="flex flex-col items-center justify-center md:flex-row">
                                            @csrf
                                            @method('PATCH')
                                            <input type="hidden" name="product_id" value="{{ $productId }}">
                                          
                                            <input type="hidden" name="current_quantity" value="{{ $item['quantity'] }}">
                                            <div class="flex items-center w-40 space-x-4 rounded-sm h-14">
                                                <button type="submit" name="action" value="decrement"
                                                    class="flex items-center justify-center w-8 h-8 text-gray-700">-</button>
                                                <input type="text" name="quantity" value="{{ $item['quantity'] }}"
                                                    readonly class="w-12 h-8 text-center rounded-lg">
                                                <button type="submit" name="action" value="increment"
                                                    class="flex items-center justify-center w-8 h-8 text-gray-700">+</button>
                                            </div>
                                        </form>
                                    </td>
                                    <!-- Total Price -->
                                    <td class="px-4 py-2">{{ number_format($item['quantity'] * $item['price'], 2) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

                </div>
                <div class="p-5 mb-32">
                    <div class="relative w-full h-full">
                        <img src="{{ asset('img/cart/obj-left-container.png') }}" class="absolute w-full h-full">
                        <div class="relative p-4">
                            <div class="pb-5 mt-10">
                                <p class="font-bold text-md">CART TOTALS</p>
                            </div>
                            <hr class="w-full mb-2 border-t-2 border-gray-400">
                            <div class="flex gap-20 py-8">
                                <div>
                                    <p class="mb-3 font-bold">SUBTOTAL</p>
                                    {{-- <p class="mb-3 font-bold">SHIPPING</p> --}}
                                </div>
                                <div>
                                    <p class="mb-3 font-bold">{{ number_format($subtotal, 2) }}</p>

                                    {{-- <div class="mb-3">
                                        <input type="radio" id="flat-rate" name="rate"
                                            class="text-blue-500 form-radio">
                                        <label for="flat-rate">Flat Rate</label>
                                    </div>

                                    <div class="mb-3">
                                        <input type="radio" id="local-pickup" name="rate"
                                            class="text-blue-500 form-radio">
                                        <label for="local-pickup">Local Pickup</label>
                                    </div>
                                    <div class="mb-3 text-xs">
                                        <label for="address" class="flex items-center mb-3 cursor-pointer">
                                            <i class="mr-2 text-xl fas fa-map-marker-alt"></i>
                                            Claro M Recto, Davao City 8000
                                        </label>
                                        <p class="text-lg text-blue-500">CHANGE ADDRESS</p>
                                    </div> --}}
                                </div>
                            </div>
                            <hr class="w-full mb-2 border-t-2 border-gray-400">
                            <div class="flex gap-20 py-8">
                                <div>
                                    <p class="mb-3 font-bold">TOTAL</p>
                                </div>
                                <div>
                                    <p class="mb-3 text-xl font-bold">{{ number_format($total, 2) }}</p>
                                </div>
                            </div>
                            <div class="flex items-center justify-center py-2 text-white">
                                <a href="{{ url('/checkout') }}"
                                    class="py-2 text-center bg-blue-700 rounded-full btn w-80 hover:text-gray-300">PROCEED
                                    TO CHECKOUT</a>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center justify-center my-10 text-white">
                        <a href="{{ url('/shop') }}"
                            class="py-2 text-center text-blue-600 bg-gray-100 rounded-full hover:text-blue-900 btn w-80">CONTINUE
                            SHOPPING</a>
                    </div>
                </div>
            </div>
        </div>
        <script>
            function incrementQuantity(productId) {
                var quantityInput = document.getElementById('quantity-' + productId);
                var currentQuantity = parseInt(quantityInput.value, 10);
                quantityInput.value = currentQuantity + 1;
                // Here you may also want to update the cart on the server side via AJAX or a form submission
            }

            function decrementQuantity(productId) {
                var quantityInput = document.getElementById('quantity-' + productId);
                var currentQuantity = parseInt(quantityInput.value, 10);
                if (currentQuantity > 1) {
                    quantityInput.value = currentQuantity - 1;
                    // Here you may also want to update the cart on the server side via AJAX or a form submission
                }
            }
        </script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Check if there's a success message
                @if (session('success'))
                    // Display the modal with the success message
                    const modal = document.getElementById('success-modal');
                    const message = document.getElementById('modal-message');
                    message.textContent = "{{ session('success') }}";
                    modal.classList.remove('hidden');

                    // Hide the modal after 5 seconds
                    setTimeout(function() {
                        modal.classList.add('hidden');
                    }, 5000);
                @endif

                // Close modal when the close button is clicked
                const closeButton = document.getElementById('modal-close');
                closeButton.addEventListener('click', function() {
                    document.getElementById('success-modal').classList.add('hidden');
                });
            });
        </script>
    @endsection