<?php
include "classes/class.loader.php";
$html = new html();
$html->bacground_emoji();
$calls = new functions();
$db = new db();
$html->header();
?>
<style>
    body {
        background-color: #bebebee7;
        color: white;
    }
</style>

<form action="book_group.php" method="post">
    <input type="text" name="booking_type" value="PARK-GROUP" hidden />
    <div class="home_container">
        <div class="container_wide" id="dogs_container">
            <h2>ENTER THE NUMBER DOGS YOU WISH TO GO TO THE PARK WITH:</h2>
            <div class="line"></div>
            <input type="number" value="1" max="10" name="no_of_dogs" oninput="if(this.value > 10) this.value = 10;">
        </div>
        <div class="container_wide" id="calendar_container">
            <h2>SELECT THE DAY YOU WISH TO GO:</h2>
            <div class="data_container_for_adding">
                <?php
                for ($i = 0; $i < 30; $i++) {
                    $date = new DateTime();
                    $date->add(new DateInterval('P' . $i . 'D'));
                    $available_slots = [];

                    for ($time = 9; $time < 17; $time++) {
                        $booking_check_res = $db->query("SELECT * FROM bookings WHERE date_of_booking = '" . $date->format('Y-m-d') . "' AND time_start = '" . $time . ":00' AND time_end = '" . ($time + 1) . ":00' AND (status != 3)");
                        if ($booking_check_res->num_rows == 0) {
                            $available_slots[] = $time;
                        }
                    }

                    // Check for 6 consecutive available slots
                    $consecutive = 1;
                    $has_six = false;
                    for ($j = 1; $j < count($available_slots); $j++) {
                        if ($available_slots[$j] == $available_slots[$j - 1] + 1) {
                            $consecutive++;
                            if ($consecutive >= 6) {
                                $has_six = true;
                                break;
                            }
                        } else {
                            $consecutive = 1;
                        }
                    }

                    if ($has_six) {
                        ?>
                        <div class="booking_time_date_row" id="date_<?php echo $date->format('Y-m-d'); ?>"
                            style="overflow:hidden;">
                            <a onclick="show_hide('date_<?php echo $date->format('Y-m-d'); ?>')">
                                <?php echo $date->format('Y F jS'); ?></a>
                            <?php
                            $booked_index = 0;
                            for ($time = 9; $time < 17; $time++) {
                                $booking_check_res = $db->query("SELECT * FROM bookings WHERE date_of_booking = '" . $date->format('Y-m-d') . "' AND time_start <= " . $time . " AND time_end >= " . ($time + 1) . " AND (status != 3)");
                                // echo "SELECT * FROM bookings WHERE date_of_booking = '" . $date->format('Y-m-d') . "' AND time_start <= '" . $time . "' AND time_end >= '" . ($time + 1) . "' AND (status != 3)";
                                if ($booking_check_res->num_rows == 0) {
                                    $time_slot = $time . ':00';
                                    ?>
                                    <div class="booking_time_row"
                                        onclick="select_consecutive_slots(this, '<?php echo $date->format('Y-m-d'); ?>', <?php echo $time; ?>)">
                                        <p><?php echo $time_slot . ' - ' . ($time + 1) . ':00'; ?></p>
                                        <input hidden type="text" name="booking_slot[]"
                                            value="<?php echo $date->format('Y-m-d') . '_' . $time_slot . '-' . ($time + 1) . ':00' ?>" />
                                        <input type="text" hidden name="selected[]" value="0"
                                            id="selected_<?php echo $date->format('Y-m-d') . '_' . $time_slot . '-' . ($time + 1) . ':00'; ?>" />
                                    </div>
                                    <?php
                                } else {
                                    $booked_index++;
                                }
                                if ($booked_index >= 8) {
                                    $booked_index = 0;
                                    echo "<script>document.getElementById('date_" . $date->format('Y-m-d') . "').style.display = 'none';</script>";
                                }
                            }
                            ?>
                        </div>
                        <?php
                    }
                    ?>

                    <?php
                }
                ?>
            </div>
            <script>
                function show_hide(id) {
                    if (document.getElementById(id).style.height == '') {
                        document.getElementById(id).style.height = 'auto';
                    } else {
                        document.getElementById(id).style.height = '';
                    }
                }
                function select_consecutive_slots(button, date, hour) {
                    const requiredSlots = 6;
                    let slots = [];

                    // Build slot references
                    for (let i = 0; i < requiredSlots; i++) {
                        const timeStart = hour + i;
                        const id = `selected_${date}_${timeStart}:00-${timeStart + 1}:00`;
                        const input = document.getElementById(id);
                        const row = input?.parentNode;

                        if (!input || !row) return alert("Not enough consecutive slots available.");
                        slots.push({ input, row });
                    }

                    // Check if all 6 are selected (for toggle-off)
                    const allSelected = slots.every(slot => slot.input.value == "1");

                    if (allSelected) {
                        // Deselect group
                        for (const slot of slots) {
                            slot.input.value = "0";
                            slot.row.style.backgroundColor = "#3a3a3a";
                        }
                        return;
                    }

                    // ❗ New: Prevent selecting if any other slot is already selected
                    const allSelectedInputs = document.querySelectorAll("input[name='selected[]']");
                    const anyOtherSelected = Array.from(allSelectedInputs).some(input => {
                        return input.value == "1" && !slots.some(slot => slot.input === input);
                    });

                    if (anyOtherSelected) {
                        return alert("You can only select one group of 6 consecutive time slots.");
                    }

                    // Select group
                    for (const slot of slots) {
                        slot.input.value = "1";
                        slot.row.style.backgroundColor = "green";
                    }
                }
            </script>
        </div>


        <div class="container_wide">
            <button onclick="document.getElementById('overlay').style.display='block'">BOOK NOW</button>
        </div>
        <div id="overlay"
            style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0,0,0,0.5);z-index:9999;">
            <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;">
                <p style="color:white;font-size:1.5em;">Loading...</p>
            </div>
        </div>


    </div>
</form>