@extends('layouts.app')

@section('content')
<div class="page-title dark-background aos-init aos-animate" data-aos="fade">
    <div class="heading empty-heading">
    </div>
    <nav class="breadcrumbs">
        <div class="container">
        <ol>
            <li><a href="{{ url('/dashboard') }}">Home</a></li>
            <li class="current">Cart</li>
        </ol>
        </div>
    </nav>
</div>
<div class="container">
    <section class="section">
        <h1>Your Cart</h1>

        <ul id="cart-items">
            @foreach($cart as $key => $item)
                <li id="cart-item-{{ $key }}">
                    Ground: {{ $item['ground_name'] }}<br>
                    Date: {{ $item['date'] }}<br>
                    Time: {{ $item['start_time'] }} - {{ $item['end_time'] }}<br>
                    Price: ₹{{ $item['price'] }} /hr
                    <button class="remove-from-cart" data-key="{{ $key }}">Remove</button>
                </li>
            @endforeach
        </ul>

        @if(count($cart) > 0)
            <a href="{{ route('checkout.view') }}" id="checkout" class="btn btn-primary">Proceed to Checkout</a>
        @else
            <p>Your cart is empty.</p>
        @endif
    @endsection
    </section>
</div>
@section('scripts')
<script>
    $(document).ready(function() {
        // Handle remove from cart action
        $(document).on('click', '.remove-from-cart', function() {
            var key = $(this).data('key'); // Get the cart item key

            $.ajax({
                url: "cart/remove/" + key, // Use the key in the URL
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}', // CSRF token for security
                },
                success: function(response) {
                    // Remove the item from the cart UI
                    var safeKey = key.replace(/([#;&,.+*~':"!^$[\]()=>|/@])/g, '\\$1');
                    console.log(safeKey);
                    $('#cart-item-' + safeKey).remove();

                    // If the cart is empty, show the empty cart message
                    if ($('#cart-items li').length === 0) {
                        $('#checkout').remove();
                        $('#cart-items').html('<p>Your cart is empty.</p>');
                    }
                },
                error: function() {
                    alert('Failed to remove the item. Please try again.');
                }
            });
        });
    });
</script>
@endsection