<?php
include "classes/class.loader.php";
$html = new html();
$html->bacground_emoji();
$calls = new functions();
$db = new db();
$html->header();
if(!isset($_SESSION['user_id'])){
    echo "<script>window.location.href='login.php';</script>";
}
?>
<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 = 1; $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>

  <div class="whatsapp-label">HELP</div>

    <!-- Floating button -->
    <a class="whatsapp-float" id="whatsappBtn" title="Message us on WhatsApp" target="_blank" rel="noopener noreferrer"
        href="#" aria-label="Open WhatsApp chat">
        <!-- WhatsApp SVG icon (official-looking) -->
        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M20.52 3.48A11.9 11.9 0 0 0 12 0C5.373 0 .003 5.373.003 12 0 13.987.44 15.9 1.27 17.6L0 24l6.66-1.76a11.94 11.94 0 0 0 5.34 1.38h.01c6.627 0 12-5.373 12-12 0-3.19-1.24-6.18-3.48-8.04z"
                fill="#25D366" />
            <path
                d="M17.56 14.1c-.32-.16-1.9-.94-2.2-1.04-.3-.11-.52-.16-.74.16-.22.32-.86 1.04-1.06 1.25-.19.19-.39.21-.72.07-.32-.13-1.37-.51-2.61-1.62-.97-.86-1.62-1.92-1.81-2.24-.19-.32-.02-.49.14-.65.14-.14.32-.36.48-.54.16-.19.21-.32.32-.53.11-.21.05-.39-.03-.55-.08-.16-.74-1.78-1.02-2.44-.27-.64-.55-.55-.74-.56-.19-.01-.41-.01-.63-.01-.22 0-.58.08-.88.39-.3.31-1.15 1.12-1.15 2.73 0 1.6 1.18 3.14 1.34 3.36.16.22 2.32 3.66 5.62 5.12 3.3 1.46 3.3 0.97 3.9 0.91.6-.07 1.92-.78 2.19-1.53.27-.74.27-1.38.19-1.53-.08-.15-.3-.24-.62-.4z"
                fill="#fff" />
        </svg>
    </a>

    <script>
        // PHONE: user-provided local number (0645010642).
        // For reliable behaviour with wa.me we convert to international format.
        // South Africa country code = 27; remove leading zero from the local number.
        const localNumber = "0645010642";
        const intlNumber = localNumber.replace(/^0+/, ""); // removes leading zero(s)
        // If your country is South Africa, add 27 before the number:
        const countryCode = "27";
        const phoneForWA = countryCode + intlNumber; // -> "27645010642"

        // Prefilled message (exact text provided by user)
        const msg = "Good day Team, Please help with the following:";

        // Build links: prefer whatsapp:// for mobile apps, fallback to https://wa.me/ for web/mobile
        const encodedMsg = encodeURIComponent(msg);
        const waAppLink = "whatsapp://send?phone=" + phoneForWA + "&text=" + encodedMsg;
        const waWebLink = "https://wa.me/" + phoneForWA + "?text=" + encodedMsg;

        // Use web link by default (works on desktop & mobile); on some mobile browsers whatsapp:// may work.
        const anchor = document.getElementById("whatsappBtn");

        // Attempt to open app link on mobile — but final href will be web fallback.
        // We'll set href to web link so it also works in desktop browsers.
        anchor.href = waWebLink;

        // Optional: on mobile, try to open the app first then fallback to web.
        // (We do this by attempting to navigate to app scheme for short time.)
        function openWhatsAppPreferApp(e) {
            // On touch devices, try app; on desktop, just open web
            const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
            if (!isMobile) return; // let default anchor behavior open new tab

            e.preventDefault();
            // Try app scheme
            const appUrl = waAppLink;
            const webUrl = waWebLink;

            // Create invisible iframe to try app URL (older technique)
            const start = Date.now();
            let didOpen = false;

            // For modern browsers, direct location change is OK.
            window.location = appUrl;

            // After short delay, navigate to web link (works as fallback)
            setTimeout(function () {
                // If still on the page, open web link
                // We guard to avoid double navigation in some environments
                if (Date.now() - start < 2000) {
                    window.location = webUrl;
                }
            }, 1500);
        }

        // Use the mobile-prefer behavior on click
        anchor.addEventListener("click", openWhatsAppPreferApp, { passive: false });
    </script>