<?php 
    include("./utility.php");
    $url = PRODUCTION_API."booking/booking_dates.php";
    $response = json_decode(curlFunction($url, "{}"));
    if($response->status == '1'){
        $booking_dates = array_column($response->payload,"booking_date");
    }else{
        $booking_dates = [];
    }
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kalenteri - Kiiltavatpinnat</title>
    <!--=======================BOOTSTRAP CSS============================-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <!--=======================BOOTSTRAP CSS============================-->

    <!--=======================CUSTOM CSS============================-->
    <link rel="stylesheet" href="./assets/css/style.css">
    <!--=======================CUSTOM CSS============================-->

    <!--=======================Datepicker CSS============================-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
    <!--=======================Datepicker CSS============================-->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    
    
    <style>
        .datepicker table tr td.today {
            background-image: linear-gradient(to bottom, #08c, #04c) !important;
            background-repeat: repeat-x !important;
            border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .25) !important;
            color: #fff !important;
        }

    .datepicker table tr td, .datepicker table tr th {
        font-weight: 600 !important;
    }

        /*=========================WhatsAPP=========================*/
        .btn-whatsapp-pulse {
            background: #25d366;
            position: fixed;
            bottom: 40px;
            right: 20px;
            font-size: 37px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 73px;
            height: 73px;
            text-decoration: none;
            border-radius: 50%;
            animation-name: pulse;
            animation-duration: 1.5s;
            animation-timing-function: ease-out;
            animation-iteration-count: infinite;
        }
        .btn-whatsapp-pulse a {
            color: #ffffff !important;
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
            }
            80% {
                box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
            }
        }
        /*=========================WhatsAPP=========================*/

        .header-container {
            position: relative;
            margin-top: 80px;
            text-align: center;
        }

        .back-button {
            position: absolute;
            left: 12px;
            top: 0;
            cursor: pointer;
            width: 45px; /* Set width explicitly */
            height: 45px; /* Set height explicitly */
        }

        .heading {
            margin: 0;
            padding-left: 60px; /* Adjust based on button width and margin */
        }
        #bookingCalendar {
    display: block !important; /* Ensure the button is always displayed */
}
    </style>
</head>
<body style="overflow-x: hidden;">
    <!--=======================Calendar Modal============================-->
    <div class="modal fade" id="datepickerModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="datepickerModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <h5 class="modal-title" id="datepickerModalLabel">Valitse varauspäiväsi</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <div class="col-12">
                        <div class="example-box">
                            <div class="card card-box mb-5">
                                <div class="card-body">
                                    <div class="datepicker-wrapper-flush" id="datepicker"></div>
                                    <input type="hidden" id="hidden_date">
                                </div>
                            </div>
                        </div>
                    </div>
                    <a href="javascript: void(0);" id="placeOrder" onClick="placeOrder()" class="btn" style="display: none;">Vahvista</a>
                </div>
            </div>
        </div>
    </div>
    <!--=======================Calendar Modal============================-->

    <header>
        <h5 class="text-white text-center" style="font-size: 15px; background: forestgreen; height: 2.5em; line-height: 35px; letter-spacing: 1px;">STATUS: Varauspalvelu toiminnassa.</h5>
    </header>
    <section>
        <div class="header-container">
            <a href="javascript:history.back()" class="back-button">
                <img src="./assets/images/download.png" alt="back" width="30px">
            </a>
            <h4 class="text-dark font-weight-bold heading">Saisimmeko yhteystietosi?</h4>
        </div>

        <div class="row d-flex justify-content-center">
            <div class="col-lg-4 col-md-6 col-sm-6 text-center py-4">
                <form method="post" class="form-validate px-md-0 px-2" novalidate>
                    <div class="form-group">
                        <label for="user_name">Nimi</label>
                        <input type="text" class="form-control custom-field custom-field-input" name="user_name" id="user_name" placeholder="Anni Asiakas" required autocomplete="off">
                        <div class="invalid-feedback">Nimi on pakollinen!</div>
                    </div>
                    <div class="form-group">
                        <label for="user_email">Sähköpostiosoite</label>
                        <input type="text" class="form-control custom-field custom-field-input" name="user_email" id="user_email" placeholder="Anni@example.fi" required autocomplete="off">
                        <div class="invalid-feedback">Sähköpostiosoite on pakollinen!</div>
                    </div>
                    <div class="form-group">
                        <label for="user_phone">Puhelinnumero</label>
                        <input type="text" class="form-control custom-field custom-field-input" name="user_phone" id="user_phone" placeholder="+358 1234567890" required autocomplete="off">
                        <div class="invalid-feedback">Puhelinnumero on pakollinen!</div>
                    </div>
                    <div class="form-group">
                        <label for="address">Osoite ja postinumero</label>
                        <input type="text" class="form-control custom-field custom-field-input" name="address" id="address" placeholder="Mannerheimintie 1 A 1, 00100 Helsinki" required autocomplete="off">
                        <div class="invalid-feedback">Osoite on pakollinen!</div>
                    </div>
                    <div class="form-group">
                        <label for="user_remarks">Kellonaikatoiveet ja mahdolliset lisätiedot</label>
                        <textarea type="text" class="form-control custom-field-area" rows="5" cols="1" name="user_remarks" id="user_remarks" placeholder="Mikäli et ole varma pesun tarkasta ajankohdasta tai varauskalenterissa ei ole avoinna toivomaasi päivää, ota yhteyttä asiakaspalveluumme!" style="resize: none; overflow: hidden;" autocomplete="off"></textarea>
                    </div>
                    <div align="center";>
                        <a href="javascript: void(0);" class="btn w-75 py-3 text-dark" id="bookingCalendar" onclick="bookingCalendar()">Varauskalenteriin</a>
                    </div>
                </form>
            </div>
        </div>
    </section>
    <footer class="text-center">
        <span>Asiakaspalvelu: <a href="tel:044 3434205" class="text-decoration-none">044 3434205</a></span>
    </footer>
    
    <span class="btn-whatsapp-pulse">
	<a href="https://wa.me/+358443434205?text=Hello! I have a Question" target="_blank">
		<i class="fab fa-whatsapp mt-2"></i>
	</a>
</span>

    <!--=======================JQUERY JS============================-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!--=======================JQUERY JS============================-->
    <!--=======================POPPER JS============================-->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <!--=======================POPPER JS============================-->
    <!--=======================BOOTSTRAP JS============================-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
    <!--=======================BOOTSTRAP JS============================-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.fi.min.js"></script>
    <!--=======================CUSTOM JS============================-->
    <script src="./assets/js/script.js"></script>
    <!--=======================CUSTOM JS============================-->
    <script>
    //=====================================Date Picker Init=========================================
// var disabledDates = <?php echo json_encode($booking_dates) ?>;
// var today = new Date();
// today.setHours(0, 0, 0, 0); // Reset hours to ensure accurate comparison

// $('#datepicker').datepicker({
//     format: 'mm/dd/yyyy',
//     language: 'fi',
//     autoclose: true,
//     todayHighlight: false,
//     beforeShowDay: function(date) {
//         var formattedDate = (date.getMonth() + 1).toString().padStart(2, '0') + '/' + date.getDate().toString().padStart(2, '0') + '/' + date.getFullYear();
//         if (date < today) {
//             return {
//                 enabled: false,
//                 classes: 'disabled-date'
//             };
//         }

//         if (disabledDates.indexOf(formattedDate) != -1) {
//             return {
//                 enabled: false,
//                 classes: 'disabled-date'
//             };
//         }

//         return {enabled: true};
//     }
// }).on('changeDate', function (e) {
//     $('#placeOrder').show();
//     $('#bookingCalendar').hide();
//     var selectedDate = e.format('yyyy-mm-dd');
//     $('#hidden_date').val(selectedDate);
// });

//     var disabledDates = <?php echo json_encode($booking_dates) ?>;
// var today = new Date();
// today.setHours(0, 0, 0, 0); // Reset hours to ensure accurate comparison

// $('#datepicker').datepicker({
//     format: 'mm/dd/yyyy',
//     language: 'fi',
//     autoclose: true,
//     todayHighlight: false,
//     beforeShowDay: function(date) {
//         var formattedDate = (date.getMonth() + 1).toString().padStart(2, '0') + '/' + date.getDate().toString().padStart(2, '0') + '/' + date.getFullYear();
//         var currentYear = today.getFullYear();
        
//         if (date.getFullYear() !== currentYear) {
//             return {
//                 enabled: false,
//                 classes: 'disabled-date'
//             };
//         }

//         if (date < today) {
//             return {
//                 enabled: false,
//                 classes: 'disabled-date'
//             };
//         }

//         if (disabledDates.indexOf(formattedDate) != -1) {
//             return {
//                 enabled: false,
//                 classes: 'disabled-date'
//             };
//         }

//         return {enabled: true};
//     }
// }).on('changeDate', function (e) {
//     $('#placeOrder').show();
//     $('#bookingCalendar').hide();
//     var selectedDate = e.format('yyyy-mm-dd');
//     $('#hidden_date').val(selectedDate);
// });



var disabledDates = <?php echo json_encode($booking_dates) ?>;
var today = new Date();
today.setHours(0, 0, 0, 0); // Reset hours to ensure accurate comparison

$('#datepicker').datepicker({
    format: 'mm/dd/yyyy',
    language: 'fi',
    autoclose: true,
    todayHighlight: false,
    beforeShowDay: function(date) {
        var today = new Date(); // Define today's date
        var formattedDate = (date.getMonth() + 1).toString().padStart(2, '0') + '/' + date.getDate().toString().padStart(2, '0') + '/' + date.getFullYear();
        var currentYear = today.getFullYear();

        // Disable dates outside the current year
        if (date.getFullYear() !== currentYear) {
            return {
                enabled: false,
                classes: 'disabled-date'
            };
        }

        // Disable past dates
        if (date < today) {
            return {
                enabled: false,
                classes: 'disabled-date'
            };
        }

        // Disable Saturdays (6) and Sundays (0)
        if (date.getDay() === 0 || date.getDay() === 6) {
            return {
                enabled: false,
                classes: 'disabled-date'
            };
        }

        // Disable specific dates from disabledDates array
        if (disabledDates.indexOf(formattedDate) != -1) {
            return {
                enabled: false,
                classes: 'disabled-date'
            };
        }

        return { enabled: true };
    }
}).on('changeDate', function (e) {
    $('#placeOrder').show();
    $('#bookingCalendar').hide();
    var selectedDate = e.format('yyyy-mm-dd');
    $('#hidden_date').val(selectedDate);
});


    //=====================================Date Picker Init=========================================
    </script>
</body>

</html>
