@extends('layouts.app')

@section('content')
    <h1>Book {{ $ground->name }}</h1>

    <p>Type: {{ $ground->type }}</p>
    <p>Base Price: {{ $ground->price }} /hr</p>

    <!-- Date selection -->
    <label for="date">Select a Date:</label>
    <input type="date" id="date" name="date" class="form-control mb-3" min="{{ date('Y-m-d') }}">

    <!-- Section for time slots -->
    <h3>Available Time Slots</h3>
    <div id="time-slots" class="list-group">
        <!-- Time slots will be loaded here via jQuery/AJAX -->
    </div>

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

    <!-- Hidden form for adding/removing time slots -->
    <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" id="selected_date">
    </form>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    let selectedSlots = []; // Initialize as an empty array to track selected slots
    let minBookingHours = {{ env('MIN_BOOKING_HOURS_BEFORE', 2) }}; // Get from the .env file (default 2 hours)
    let currentTime = new Date();

    // Disable past dates in the date picker
    $('#date').attr('min', new Date().toISOString().split('T')[0]);

    // Load available time slots when a date is selected
    $('#date').on('change', function() {
        var selectedDate = new Date($(this).val());
        $('#selected_date').val($(this).val()); // Set hidden field

        // Clear previous time slots
        $('#time-slots').empty();

        // If the selected date is today, adjust the slots based on the current time
        var isToday = selectedDate.toDateString() === currentTime.toDateString();

        // Fetch available time slots
        $.ajax({
            url: "{{ route('ground.timeslots', $ground->id) }}",
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                date: selectedDate.toISOString().split('T')[0] // Send the selected date in YYYY-MM-DD format
            },
            success: function(data) {
                // Log the fetched time slots for debugging
                console.log('Time Slots:', data);

                // Display available time slots
                data.forEach(function(slot) {
                    let isSelected = selectedSlots.some(s => s.start_time === slot.start_time && s.date === selectedDate.toISOString().split('T')[0]);
                    let activeClass = isSelected ? 'active' : ''; // Highlight pre-selected slots

                    let slotTime = new Date(`${selectedDate.toISOString().split('T')[0]} ${slot.start_time}`);

                    // If today, filter out slots that are within the restricted time frame
                    if (isToday) {
                        let timeDiff = (slotTime - currentTime) / 36e5; // Difference in hours
                        if (timeDiff < minBookingHours) {
                            activeClass = 'disabled'; // Disable slots within restricted hours
                        }
                    }

                    // Append available and valid slots
                    let slotHtml = `<a href="javascript:void(0);" class="list-group-item list-group-item-action time-slot ${activeClass}" 
                                        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>`;
                    $('#time-slots').append(slotHtml);
                });
            },
            error: function() {
                alert('Error loading time slots.');
            }
        });

        // Fetch the current cart to pre-select already added slots
        $.ajax({
            url: "{{ route('cart.json') }}", // Fetch the JSON cart data from a separate route
            type: 'GET',
            success: function(cart) {
                // Ensure cart is an array
                if (Array.isArray(cart)) {
                    selectedSlots = cart;
                } else {
                    selectedSlots = []; // Fallback to an empty array
                }

                // Log the cart data for debugging
                console.log('Cart Data:', selectedSlots);

                // Check and mark the time slots that are already in the cart
                $('.time-slot').each(function() {
                    var startTime = $(this).data('start-time');
                    console.log('Checking slot:', startTime, 'for date:', selectedDate.toISOString().split('T')[0]); // Debug

                    var isSelected = selectedSlots.some(slot => slot.start_time === startTime && slot.date === selectedDate.toISOString().split('T')[0]);

                    if (isSelected) {
                        $(this).addClass('active');
                    } else {
                        $(this).removeClass('active');
                    }
                });
            },
            error: function() {
                selectedSlots = [];
            }
        });
    });


    $(document).on('click', '.time-slot', function() {
        var startTime = $(this).data('start-time');
        var endTime = $(this).data('end-time');
        var price = $(this).data('price');
        var date = $('#selected_date').val();
        var groundId = "{{ $ground->id }}"; // Get ground ID from Blade template
        var groundName = "{{ $ground->name }}"; // Get ground name from Blade template

        // Construct the key using ground ID, date, and start time
        var key = groundId + '_' + date + '_' + startTime;

        // Toggle the slot selection
        $.ajax({
            url: "cart/toggle/" + key, // Use the unified toggle URL
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                ground_id: groundId,   // Ensure ground_id is passed
                ground_name: groundName,  // Ensure ground_name is passed
                start_time: startTime,
                end_time: endTime,
                price: price,
                date: date
            },
            success: function(response) {
                // If the slot was added or removed, update the UI accordingly
                if (response.status === 'added') {
                    selectedSlots.push({ start_time: startTime, end_time: endTime, price: price, date: date });
                    $(this).addClass('active'); // Mark the slot as active
                    console.log('Slot added to cart');
                } else if (response.status === 'removed') {
                    selectedSlots = selectedSlots.filter(slot => slot.start_time !== startTime || slot.date !== date);
                    $(this).removeClass('active'); // Remove active class if slot removed
                    console.log('Slot removed from cart');
                }
            }.bind(this),
            error: function() {
                alert('Failed to update the cart. Please try again.');
            }
        });
    });



});


</script>
@endsection