@extends('layouts.app')

@section('content')
    <h1>Available Time Slots for {{ $ground->name }} on {{ $date }}</h1>

    @if(count($timeSlots) > 0)
        <div class="list-group">
            @foreach($timeSlots as $slot)
                <a href="javascript:void(0);" class="list-group-item list-group-item-action slot-button"
                   data-start-time="{{ $slot['start_time'] }}"
                   data-end-time="{{ $slot['end_time'] }}"
                   data-price="{{ $slot['price'] }}">
                    {{ $slot['start_time'] }} - {{ $slot['end_time'] }}: {{ $slot['price'] }} /hr
                </a>
            @endforeach
        </div>
    @else
        <p>No available time slots for this date.</p>
    @endif

    <a href="{{ route('cart.view') }}" class="btn btn-primary mt-3">View Cart</a>

    <form id="add-to-cart-form" method="POST" action="{{ route('cart.add', $ground->id) }}" style="display:none;">
        @csrf
        <input type="hidden" name="start_time" id="start_time">
        <input type="hidden" name="end_time" id="end_time">
        <input type="hidden" name="price" id="price">
        <input type="hidden" name="date" value="{{ $date }}">
    </form>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // Handle click event on time slot buttons
        $('.slot-button').on('click', function() {
            var startTime = $(this).data('start-time');
            var endTime = $(this).data('end-time');
            var price = $(this).data('price');

            // Set form values
            $('#start_time').val(startTime);
            $('#end_time').val(endTime);
            $('#price').val(price);

            // Submit the form via jQuery
            $('#add-to-cart-form').submit();
        });
    });
</script>
@endsection