/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


// Register shortcode [booking_calendar]
function booking_calendar_shortcode() {
    ob_start();
    ?>
    <style>
        .booking-calendar { display: flex; flex-wrap: wrap; width: 280px; }
        .booking-calendar div {
            width: 14.28%; padding: 10px; box-sizing: border-box;
            text-align: center; border: 1px solid #ccc; cursor: pointer;
        }
        .booking-calendar .header { font-weight: bold; background: #f0f0f0; }
        .booking-form { margin-top: 20px; display: none; }
    </style>

    <div id="calendar-container">
        <div class="booking-calendar" id="calendar">
            <?php
            $days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
            foreach ($days as $day) {
                echo "<div class='header'>$day</div>";
            }

            $today = date('Y-m-01');
            $start_day = date('w', strtotime($today));
            $days_in_month = date('t');

            for ($i = 0; $i < $start_day; $i++) {
                echo "<div></div>";
            }

            for ($d = 1; $d <= $days_in_month; $d++) {
                echo "<div class='day' data-day='$d'>$d</div>";
            }
            ?>
        </div>

        <div class="booking-form" id="booking-form">
            <h3>Book for <span id="selected-date"></span></h3>
            <form method="post">
                <input type="hidden" name="booking_date" id="booking_date">
                <input type="text" name="name" placeholder="Your Name" required><br><br>
                <input type="email" name="email" placeholder="Your Email" required><br><br>
                <input type="submit" name="submit_booking" value="Book Now">
            </form>
        </div>
    </div>

    <script>
        document.querySelectorAll('.booking-calendar .day').forEach(day => {
            day.addEventListener('click', () => {
                const selected = day.getAttribute('data-day');
                const date = new Date();
                const fullDate = `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2, '0')}-${String(selected).padStart(2, '0')}`;
                document.getElementById('selected-date').textContent = fullDate;
                document.getElementById('booking_date').value = fullDate;
                document.getElementById('booking-form').style.display = 'block';
            });
        });
    </script>
    <?php

    // Handle form submission
    if (isset($_POST['submit_booking'])) {
        $date = sanitize_text_field($_POST['booking_date']);
        $name = sanitize_text_field($_POST['name']);
        $email = sanitize_email($_POST['email']);

        // Save booking (you can replace this with DB insert or email)
        echo "<p>Thank you, $name! Your booking for $date has been received.</p>";
    }

    return ob_get_clean();
}
add_shortcode('booking_calendar', 'booking_calendar_shortcode');