{"id":1335,"date":"2025-01-24T22:42:36","date_gmt":"2025-01-24T21:42:36","guid":{"rendered":"https:\/\/stichtingdiva.nl\/?page_id=1335&#038;lang=nl"},"modified":"2025-01-28T16:22:42","modified_gmt":"2025-01-28T15:22:42","slug":"reservieren","status":"publish","type":"page","link":"https:\/\/stichtingdiva.nl\/?page_id=1335&lang=de","title":{"rendered":"Reservieren"},"content":{"rendered":"\r\n    <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\"\r\n          integrity=\"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65\" crossorigin=\"anonymous\">\r\n    <link rel=\"stylesheet\" href=\"css\/style.css\">\r\n\r\n    <input type=\"hidden\" id=\"current_lang\" name=\"current_lang\" value=\"nl\" >\r\n    <div class=\"container custom-vertical-lines mt-3 p-2\" style=\"max-width: 700px; background-color: #f1ffec; border-width: 2px;\">\r\n                <form action=\"\" method=\"POST\">\r\n            <input type=\"hidden\" name=\"action\" value=\"booking_form_handler\">\r\n\r\n            <div class=\"mb-3\">\r\n                <style>\r\n                    .success {\r\n                        color: green;\r\n                        padding: 10px;\r\n                        border: 1px solid green;\r\n                        background-color: #eaffea;\r\n                        margin-bottom: 15px;\r\n                    }\r\n\r\n                    .error {\r\n                        color: red;\r\n                        padding: 10px;\r\n                        border: 1px solid red;\r\n                        background-color: #ffeaea;\r\n                        margin-bottom: 15px;\r\n                    }\r\n                <\/style>\r\n                <h1>\r\n                    Vakantiewoning                <\/h1>\r\n                <select class=\"form-select\" aria-label=\"\" id=\"home\" name=\"home\" onchange=\"changePrice(event); changeOptions(event);\">\r\n                    <option selected disabled>\r\n                        Selecteer                    <\/option>\r\n                                            <option value=\"Arnsberg\"\r\n                                data-animalsAllowed=\"0\"\r\n                                data-persons=\"2\"\r\n                                data-price=\"45\"\r\n                                data-childBedAllowed=\"1\"\r\n                                data-ChildChairAllowed=\"1\">\r\n                            Arnsberg                        <\/option>\r\n                                                <option value=\"Rotes Moor\"\r\n                                data-animalsAllowed=\"1\"\r\n                                data-persons=\"5\"\r\n                                data-price=\"67\"\r\n                                data-childBedAllowed=\"1\"\r\n                                data-ChildChairAllowed=\"1\">\r\n                            Rotes Moor                        <\/option>\r\n                                                <option value=\"Feldberg\"\r\n                                data-animalsAllowed=\"0\"\r\n                                data-persons=\"6\"\r\n                                data-price=\"77\"\r\n                                data-childBedAllowed=\"0\"\r\n                                data-ChildChairAllowed=\"0\">\r\n                            Feldberg                        <\/option>\r\n                                                <option value=\"Pferdskopf\"\r\n                                data-animalsAllowed=\"0\"\r\n                                data-persons=\"6\"\r\n                                data-price=\"57\"\r\n                                data-childBedAllowed=\"1\"\r\n                                data-ChildChairAllowed=\"1\">\r\n                            Pferdskopf                        <\/option>\r\n                                                <option value=\"Simmelsberg\"\r\n                                data-animalsAllowed=\"1\"\r\n                                data-persons=\"4\"\r\n                                data-price=\"42\"\r\n                                data-childBedAllowed=\"1\"\r\n                                data-ChildChairAllowed=\"1\">\r\n                            Simmelsberg                        <\/option>\r\n                                                <option value=\"Kelvin Huis\"\r\n                                data-animalsAllowed=\"1\"\r\n                                data-persons=\"4\"\r\n                                data-price=\"70\"\r\n                                data-childBedAllowed=\"1\"\r\n                                data-ChildChairAllowed=\"1\">\r\n                            Kelvin Huis                        <\/option>\r\n                                        <\/select>\r\n            <\/div>\r\n\r\n            <hr>\r\n\r\n            <div class=\"month\">\r\n                <ul>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-sm\">\r\n                            <select id=\"month-select\" class=\"form-select\" name=\"month\">\r\n                                <option value=\"none\" selected>\r\n                                    Selecteer een maand                                <\/option>\r\n                                <script>\r\n                                    document.addEventListener('DOMContentLoaded', function() {\r\n                                        var option = (document.getElementById('month-select')).querySelector('option[value=\"none\"]');\r\n                                        if (option) {\r\n                                            option.selected = true;\r\n                                        }\r\n                                    });\r\n                                <\/script>\r\n                                <option value=\"1\">\r\n                                    Januari                                <\/option>\r\n                                <option value=\"2\">\r\n                                    Februari                                <\/option>\r\n                                <option value=\"3\">\r\n                                    Maart                                <\/option>\r\n                                <option value=\"4\">\r\n                                    April                                <\/option>\r\n                                <option value=\"5\">\r\n                                    Mei                                <\/option>\r\n                                <option value=\"6\">\r\n                                    Juni                                <\/option>\r\n                                <option value=\"7\">\r\n                                    Juli                                <\/option>\r\n                                <option value=\"8\">\r\n                                    Augustus                                <\/option>\r\n                                <option value=\"9\">\r\n                                    September                                <\/option>\r\n                                <option value=\"10\">\r\n                                    Oktober                                <\/option>\r\n                                <option value=\"11\">\r\n                                    November                                <\/option>\r\n                                <option value=\"12\">\r\n                                    December                                <\/option>\r\n                            <\/select>\r\n\r\n                        <\/div>\r\n                        <div class=\"col-sm\">\r\n                            <select id=\"year-select\" class=\"form-select\" name=\"year\">\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n\r\n                    <!--\r\n\t\t\t  <li id=\"month-year\" name=\"month-year\">\r\n\t\t\t\t  November<br>\r\n\t\t\t\t  <span style=\"font-size:18px\" id=\"year\">2025<\/span>\r\n\t\t\t  <\/li>\r\n\t\t\t  -->\r\n                <\/ul>\r\n            <\/div>\r\n\r\n            <ul class=\"weekdays\">\r\n                <li>\r\n                    Maandag                <\/li>\r\n                <li>\r\n                    Dinsdag                <\/li>\r\n                <li>\r\n                    Woensdag                <\/li>\r\n                <li>\r\n                    Donderdag                <\/li>\r\n                <li>\r\n                    Vrijdag                <\/li>\r\n                <li>\r\n                    Zaterdag                <\/li>\r\n                <li>\r\n                    Zondag                <\/li>\r\n            <\/ul>\r\n\r\n\r\n            <ul class=\"days\" id=\"days_to_rent\" name=\"days_to_rent\" style=\"padding-left: 2px;\">\r\n            <\/ul>\r\n\r\n            <input type=\"hidden\" name=\"days_to_rent\" id=\"selected_days\" value=\"\">\r\n            <input type=\"hidden\" name=\"start_date\" id=\"start_date\" value=\"\">\r\n            <input type=\"hidden\" name=\"end_date\" id=\"end_date\" value=\"\">\r\n\r\n            <p>\r\n                Geboekt:                <span class=\"badge text-bg-danger p-2 mr-2\">&nbsp;<\/span><\/p>\r\n\r\n            <p id=\"extra_cleaning_cost_popup\" style=\"display: none\">\r\n                Extra schoonmaakkosten: \u20ac 40,-            <\/p>\r\n\r\n            <hr>\r\n\r\n            <div class=\"row\">\r\n                <h1>\r\n                    Persoonsgegevens:                <\/h1>\r\n                <div class=\"col\">\r\n                    <div class=\"mb-3\">\r\n                        <label for=\"first_name\" class=\"form-label\">\r\n                            Voornaam                        <\/label>\r\n                        <input type=\"text\" class=\"form-control bg-white\" id=\"first_name\" name=\"first_name\" aria-describedby=\"\"\r\n                               placeholder=\"\" required>\r\n                    <\/div>\r\n                    <div class=\"mb-3\">\r\n                        <label for=\"last_name\" class=\"form-label\">\r\n                            Achternaam                        <\/label>\r\n                        <input type=\"text\" class=\"form-control bg-white\" id=\"last_name\" name=\"last_name\" required>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"col\">\r\n                    <div class=\"mb-3\">\r\n                        <label for=\"birthdate\" class=\"form-label\">\r\n                            Geboortedatum                        <\/label>\r\n                        <input type=\"date\" class=\"form-control bg-white\" id=\"birthdate\" name=\"birthdate\" aria-describedby=\"\" required>\r\n                    <\/div>\r\n\r\n                    <div class=\"mb-3\">\r\n                        <label for=\"nationality\" class=\"form-label\">\r\n                            Nationaliteit                        <\/label>\r\n                        <select class=\"form-select bg-white\" aria-label=\"Default select example\" id=\"nationality\" name=\"nationality\"\r\n                                onchange=\"showHideIdFirst()\" required>\r\n                            <option selected disabled>\r\n                                Selecteer                            <\/option>\r\n                            <option value=\"NL\">\r\n                                Nederland                            <\/option>\r\n                            <option value=\"GE\">\r\n                                Duitsland                            <\/option>\r\n                            <option value=\"RU\">\r\n                                Rusland                            <\/option>\r\n                            <option value=\"BG\">\r\n                                Bulgarije                            <\/option>\r\n                            <option value=\"BE\">\r\n                                Belgi\u00eb                            <\/option>\r\n                            <option value=\"RO\">\r\n                                Roemeni\u00eb                            <\/option>\r\n                            <option value=\"NO\">\r\n                                Noorwegen                            <\/option>\r\n                            <option value=\"DK\">\r\n                                Denemarken                            <\/option>\r\n                            <option value=\"LU\">\r\n                                Luxemburg                            <\/option>\r\n                            <option value=\"SE\">\r\n                                Zweden                            <\/option>\r\n                            <option value=\"IT\">\r\n                                Itali\u00eb                            <\/option>\r\n                            <option value=\"FR\">\r\n                                Frankrijk                            <\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"row\">\r\n                <div class=\"col\">\r\n                    <div class=\"mb-3\">\r\n                        <label for=\"address\" class=\"form-label\">\r\n                            Adres                        <\/label>\r\n                        <input type=\"text\" class=\"form-control bg-white\" id=\"address\" name=\"address\" aria-describedby=\"\" required>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"col\">\r\n                    <div class=\"mb-3\">\r\n                        <label for=\"city\" class=\"form-label\">\r\n                            Woonplaats                        <\/label>\r\n                        <input type=\"text\" class=\"form-control bg-white\" id=\"city\" name=\"city\" aria-describedby=\"\" required>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"row\">\r\n                <div class=\"col\">\r\n                    <div class=\"mb-3\">\r\n                        <label for=\"zipcode\" class=\"form-label\">\r\n                            Postcode                        <\/label>\r\n                        <input type=\"text\" class=\"form-control  bg-white\" id=\"zipcode\" name=\"zipcode\" aria-describedby=\"\" required>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"col\">\r\n                    <div class=\"mb-3\" style=\"display: none;\" id=\"id_number_first\">\r\n                        <label for=\"id_number_first\" class=\"form-label\">\r\n                            ID\/paspoort nummer                        <\/label>\r\n                        <input type=\"text\" class=\"form-control bg-white\" id=\"id_number_first\" name=\"id_number_first\" aria-describedby=\"\">\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"row\">\r\n                <div class=\"col\">\r\n                    <div class=\"mb-3\">\r\n                        <label for=\"country\" class=\"form-label\">\r\n                            Land                        <\/label>\r\n                        <select class=\"form-select\" aria-label=\"Default select example\" id=\"country\"\r\n                                name=\"country\" required>\r\n                            <option selected disabled>\r\n                                Selecteer                            <\/option>\r\n                            <option value=\"Nederland\">\r\n                                Nederland                            <\/option>\r\n                            <option value=\"Deutschland\">\r\n                                Duitsland                            <\/option>\r\n                            <option value=\"Rusland\">\r\n                                Rusland                            <\/option>\r\n                            <option value=\"Bulgarije\">\r\n                                Bulgarije                            <\/option>\r\n                            <option value=\"Belgi\u00eb\">\r\n                                Belgi\u00eb                            <\/option>\r\n                            <option value=\"Roemeni\u00eb\">\r\n                                Roemeni\u00eb                            <\/option>\r\n                            <option value=\"Noorwegen\">\r\n                                Noorwegen                            <\/option>\r\n                            <option value=\"Denemarken\">\r\n                                Denemarken                            <\/option>\r\n                            <option value=\"Luxemburg\">\r\n                                Luxemburg                            <\/option>\r\n                            <option value=\"Zweden\">\r\n                                Zweden                            <\/option>\r\n                            <option value=\"Itali\u00eb\">\r\n                                Itali\u00eb                            <\/option>\r\n                            <option value=\"Frankrijk\">\r\n                                Frankrijk                            <\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"col\">\r\n                    <div class=\"mb-3\">\r\n                        <label for=\"phone\" class=\"form-label\">\r\n                            Telefoon nummer                        <\/label>\r\n                        <input type=\"text\" class=\"form-control bg-white\" id=\"phone\" name=\"phone\" aria-describedby=\"\" required>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"row\">\r\n                <div class=\"col-6\">\r\n                    <div class=\"mb-3\">\r\n                        <label for=\"email\" class=\"form-label\">\r\n                            Email adres                        <\/label>\r\n                        <input type=\"email\" class=\"form-control bg-white\" id=\"email\" name=\"email\" aria-describedby=\"\" required>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"row\">\r\n                <div class=\"col\">\r\n                    <h4>\r\n                        Opties                    <\/h4>\r\n\r\n                    <div class=\"form-check d-flex align-items-center gap-2\" id=\"animals-checkbox\" style=\"display: none;\">\r\n                        <input class=\"form-check-input\" type=\"checkbox\" value=\"5.5\" id=\"animals\" name=\"animals\"\r\n                               onchange=\"changePrice()\">\r\n                        <label class=\"form-check-label d-flex align-items-center\" for=\"animals\">\r\n                            Hond (\u20ac 5.50 extra per nacht)                        <\/label>\r\n                    <\/div>\r\n\r\n                    <div class=\"form-check d-flex align-items-center gap-2\" id=\"child-bed-checkbox\" style=\"display:none;\">\r\n                        <input class=\"form-check-input\" type=\"checkbox\" value=\"5\" id=\"child_bed\" name=\"child_bed\"\r\n                               onchange=\"changePrice()\">\r\n                        <label class=\"form-check-label d-flex align-items-center\" for=\"child_bed\">\r\n                            Reisbedje (\u20ac 5,- eenmalig)                        <\/label>\r\n                    <\/div>\r\n\r\n                    <div class=\"form-check d-flex align-items-center gap-2\" id=\"child-chair-checkbox\" style=\"display:none;\">\r\n                        <input class=\"form-check-input\" type=\"checkbox\" value=\"5\" id=\"child_chair\" name=\"child_chair\"\r\n                               onchange=\"changePrice()\">\r\n                        <label class=\"form-check-label d-flex align-items-center\" for=\"child_chair\">\r\n                            Kinderstoel (\u20ac 5,- eenmalig)                        <\/label>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"col\">\r\n                    <div class=\"mb-3\">\r\n                        <label for=\"comments\" class=\"form-label\">\r\n                            Opmerkingen                        <\/label>\r\n                        <textarea class=\"form-control bg-white\" aria-label=\"With textarea\" id=\"comments\" name=\"comments\"><\/textarea>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n\r\n            <p>\r\n                Van 1 oktober t\/m 31 april brengen we stookkosten in rekening van \u20ac 10,- per nacht per vakantiewoning.<br>Toeristenbelasting: \u20ac 2,10 p.p. per nacht vanaf 14 jaar.<br>Prijzen zijn op basis van 2 personen per nacht.<br>Extra personen \u20ac 10,- p.p. per nacht.<br>Kinderen onder de 14 jaar zijn gratis.            <\/p>\r\n\r\n            <hr>\r\n\r\n            <h2>\r\n                Aantal personen            <\/h2>\r\n            <div class=\"mb-3\">\r\n                <label for=\"amount_persons\" class=\"form-label\">\r\n                    Aantal personen                <\/label>\r\n                <select class=\"form-select  bg-white\" aria-label=\"Default select example\" id=\"amount_persons\" name=\"amount_persons\"\r\n                        onchange=\"changeExtraPersons(event)\">\r\n                    <option selected disabled>\r\n                        Selecteer                    <\/option>\r\n                    <option value=\"1\">1<\/option>\r\n                    <option selected value=\"2\">2<\/option>\r\n                    <option value=\"3\">3<\/option>\r\n                    <option value=\"4\">4<\/option>\r\n                    <option value=\"5\">5<\/option>\r\n                    <option value=\"6\">6<\/option>\r\n                <\/select>\r\n            <\/div>\r\n\r\n            <div class=\"mb-3\" style=\"display: display\" id=\"person_2\">\r\n                <p>\r\n                    Persoon 2:                <\/p>\r\n                <div class=\"row\">\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"first_name\" class=\"form-label\">\r\n                                Voornaam                            <\/label>\r\n                            <input type=\"text\" class=\"form-control  bg-white\" id=\"name_first_second\" name=\"name_first_second\"\r\n                                   aria-describedby=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"name_last_second\" class=\"form-label\">\r\n                                Achternaam                            <\/label>\r\n                            <input type=\"text\" class=\"form-control  bg-white\" id=\"name_last_second\" name=\"name_last_second\"\r\n                                   aria-describedby=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n                <div class=\"row\">\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"city_second\" class=\"form-label\">\r\n                                Woonplaats                            <\/label>\r\n                            <input type=\"text\" class=\"form-control  bg-white\" id=\"city_second\" name=\"city_second\" aria-describedby=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"nationality_person_2\" class=\"form-label\">\r\n                                Nationaliteit                            <\/label>\r\n                            <select class=\"form-select\" aria-label=\"Default select example\" id=\"nationality_person_2\"\r\n                                    name=\"nationality_person_2\" onchange=\"showHideIdSecond()\">\r\n                                <option selected disabled>\r\n                                    Selecteer                                <\/option>\r\n                                <option value=\"NL\">\r\n                                    Nederland                                <\/option>\r\n                                <option value=\"GE\">\r\n                                    Duitsland                                <\/option>\r\n                                <option value=\"RU\">\r\n                                    Rusland                                <\/option>\r\n                                <option value=\"BG\">\r\n                                    Bulgarije                                <\/option>\r\n                                <option value=\"BE\">\r\n                                    Belgi\u00eb                                <\/option>\r\n                                <option value=\"RO\">\r\n                                    Roemeni\u00eb                                <\/option>\r\n                                <option value=\"NO\">\r\n                                    Noorwegen                                <\/option>\r\n                                <option value=\"DK\">\r\n                                    Denemarken                                <\/option>\r\n                                <option value=\"LU\">\r\n                                    Luxemburg                                <\/option>\r\n                                <option value=\"SE\">\r\n                                    Zweden                                <\/option>\r\n                                <option value=\"IT\">\r\n                                    Itali\u00eb                                <\/option>\r\n                                <option value=\"FR\">\r\n                                    Frankrijk                                <\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"row\">\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"birthdate_second\" class=\"form-label\">\r\n                                Geboortedatum                            <\/label>\r\n                            <input type=\"date\" class=\"form-control  bg-white\" id=\"birthdate_second\" name=\"birthdate_second\" onchange=\"changePrice()\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\" style=\"display: none;\" id=\"id_number_second\">\r\n                            <label for=\"id_number_second\" class=\"form-label\">\r\n                                ID\/paspoort nummer                            <\/label>\r\n                            <input type=\"text\" class=\"form-control bg-white\" id=\"id_number_second\" name=\"id_number_second\"\r\n                                   aria-describedby=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"row\">\r\n                    <div class=\"col-6\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"country_second\" class=\"form-label\">\r\n                                Land                            <\/label>\r\n                            <select class=\"form-select\" aria-label=\"Default select example\" id=\"country\"\r\n                                    name=\"country_second\">\r\n                                <option selected disabled>\r\n                                    Selecteer                                <\/option>\r\n                                <option value=\"Nederland\">\r\n                                    Nederland                                <\/option>\r\n                                <option value=\"Deutschland\">\r\n                                    Duitsland                                <\/option>\r\n                                <option value=\"Rusland\">\r\n                                    Rusland                                <\/option>\r\n                                <option value=\"Bulgarije\">\r\n                                    Bulgarije                                <\/option>\r\n                                <option value=\"Belgi\u00eb\">\r\n                                    Belgi\u00eb                                <\/option>\r\n                                <option value=\"Roemeni\u00eb\">\r\n                                    Roemeni\u00eb                                <\/option>\r\n                                <option value=\"Noorwegen\">\r\n                                    Noorwegen                                <\/option>\r\n                                <option value=\"Denemarken\">\r\n                                    Denemarken                                <\/option>\r\n                                <option value=\"Luxemburg\">\r\n                                    Luxemburg                                <\/option>\r\n                                <option value=\"Zweden\">\r\n                                    Zweden                                <\/option>\r\n                                <option value=\"Itali\u00eb\">\r\n                                    Itali\u00eb                                <\/option>\r\n                                <option value=\"Frankrijk\">\r\n                                    Frankrijk                                <\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"mb-3\" style=\"display: none\" id=\"person_3\">\r\n                <p>\r\n                    Persoon 3:                <\/p>\r\n                <div class=\"row\">\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"first_name_thirth\" class=\"form-label\">\r\n                                Voornaam                            <\/label>\r\n                            <input type=\"text\" class=\"form-control bg-white\" id=\"first_name_thirth\" name=\"first_name_thirth\"\r\n                                   aria-describedby=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"last_name_thirth\" class=\"form-label\">\r\n                                Achternaam                            <\/label>\r\n                            <input type=\"text\" class=\"form-control bg-white\" id=\"last_name_thirth\" name=\"last_name_thirth\"\r\n                                   aria-describedby=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n                <div class=\"row\">\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"city_thirth\" class=\"form-label\">\r\n                                Woonplaats                            <\/label>\r\n                            <input type=\"text\" class=\"form-control bg-white\" id=\"city_thirth\" name=\"city_thirth\" aria-describedby=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"nationality_person_3\" class=\"form-label\">\r\n                                Nationaliteit                            <\/label>\r\n                            <select class=\"form-select\" aria-label=\"Default select example\" id=\"nationality_person_3\"\r\n                                    name=\"nationality_person_3\" onchange=\"showHideIdThirth()\">\r\n                                <option selected disabled>\r\n                                    Selecteer                                <\/option>\r\n                                <option value=\"NL\">\r\n                                    Nederland                                <\/option>\r\n                                <option value=\"GE\">\r\n                                    Duitsland                                <\/option>\r\n                                <option value=\"RU\">\r\n                                    Rusland                                <\/option>\r\n                                <option value=\"BG\">\r\n                                    Bulgarije                                <\/option>\r\n                                <option value=\"BE\">\r\n                                    Belgi\u00eb                                <\/option>\r\n                                <option value=\"RO\">\r\n                                    Roemeni\u00eb                                <\/option>\r\n                                <option value=\"NO\">\r\n                                    Noorwegen                                <\/option>\r\n                                <option value=\"DK\">\r\n                                    Denemarken                                <\/option>\r\n                                <option value=\"LU\">\r\n                                    Luxemburg                                <\/option>\r\n                                <option value=\"SE\">\r\n                                    Zweden                                <\/option>\r\n                                <option value=\"IT\">\r\n                                    Itali\u00eb                                <\/option>\r\n                                <option value=\"FR\">\r\n                                    Frankrijk                                <\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"row\">\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"birthdate_thirth\" class=\"form-label\">\r\n                                Geboortedatum                            <\/label>\r\n                            <input type=\"date\" class=\"form-control bg-white\" id=\"birthdate_thirth\" name=\"birthdate_thirth\" oninput=\"changePrice()\"\r\n                                   aria-describedby=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\" style=\"display: none;\" id=\"id_number_thirth\">\r\n                            <label for=\"id_number_thirth\" class=\"form-label\">\r\n                                ID\/paspoort nummer                            <\/label>\r\n                            <input type=\"text\" class=\"form-control bg-white\" id=\"id_number_thirth\" name=\"id_number_thirth\"\r\n                                   aria-describedby=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"row\">\r\n                    <div class=\"col-6\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"country_thirth\" class=\"form-label\">\r\n                                Land                            <\/label>\r\n                            <select class=\"form-select\" aria-label=\"Default select example\" id=\"country\"\r\n                                    name=\"country_thirth\">\r\n                                <option selected disabled>\r\n                                    Selecteer                                <\/option>\r\n                                <option value=\"Nederland\">\r\n                                    Nederland                                <\/option>\r\n                                <option value=\"Deutschland\">\r\n                                    Duitsland                                <\/option>\r\n                                <option value=\"Rusland\">\r\n                                    Rusland                                <\/option>\r\n                                <option value=\"Bulgarije\">\r\n                                    Bulgarije                                <\/option>\r\n                                <option value=\"Belgi\u00eb\">\r\n                                    Belgi\u00eb                                <\/option>\r\n                                <option value=\"Roemeni\u00eb\">\r\n                                    Roemeni\u00eb                                <\/option>\r\n                                <option value=\"Noorwegen\">\r\n                                    Noorwegen                                <\/option>\r\n                                <option value=\"Denemarken\">\r\n                                    Denemarken                                <\/option>\r\n                                <option value=\"Luxemburg\">\r\n                                    Luxemburg                                <\/option>\r\n                                <option value=\"Zweden\">\r\n                                    Zweden                                <\/option>\r\n                                <option value=\"Itali\u00eb\">\r\n                                    Itali\u00eb                                <\/option>\r\n                                <option value=\"Frankrijk\">\r\n                                    Frankrijk                                <\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"mb-3\" style=\"display: none\" id=\"person_4\">\r\n                <p>\r\n                    Persoon 4:                <\/p>\r\n                <div class=\"row\">\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"first_name_fourth\" class=\"form-label\">\r\n                                Voornaam                            <\/label>\r\n                            <input type=\"text\" class=\"form-control bg-white\" id=\"first_name_fourth\" name=\"first_name_fourth\"\r\n                                   aria-describedby=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"last_name_fourth\" class=\"form-label\">\r\n                                Achternaam                            <\/label>\r\n                            <input type=\"text\" class=\"form-control bg-white\" id=\"last_name_fourth\" name=\"last_name_fourth\"\r\n                                   aria-describedby=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n                <div class=\"row\">\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"city_fourth\" class=\"form-label\">\r\n                                Woonplaats                            <\/label>\r\n                            <input type=\"text\" class=\"form-control bg-white\" id=\"city_fourth\" name=\"city_fourth\" aria-describedby=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"nationality_person_4\" class=\"form-label\">\r\n                                Nationaliteit                            <\/label>\r\n                            <select class=\"form-select\" aria-label=\"Default select example\" id=\"nationality_person_4\"\r\n                                    name=\"nationality_person_4\" onchange=\"showHideIdFourth()\">\r\n                                <option selected disabled>\r\n                                    Selecteer                                <\/option>\r\n                                <option value=\"NL\">\r\n                                    Nederland                                <\/option>\r\n                                <option value=\"GE\">\r\n                                    Duitsland                                <\/option>\r\n                                <option value=\"RU\">\r\n                                    Rusland                                <\/option>\r\n                                <option value=\"BG\">\r\n                                    Bulgarije                                <\/option>\r\n                                <option value=\"BE\">\r\n                                    Belgi\u00eb                                <\/option>\r\n                                <option value=\"RO\">\r\n                                    Roemeni\u00eb                                <\/option>\r\n                                <option value=\"NO\">\r\n                                    Noorwegen                                <\/option>\r\n                                <option value=\"DK\">\r\n                                    Denemarken                                <\/option>\r\n                                <option value=\"LU\">\r\n                                    Luxemburg                                <\/option>\r\n                                <option value=\"SE\">\r\n                                    Zweden                                <\/option>\r\n                                <option value=\"IT\">\r\n                                    Itali\u00eb                                <\/option>\r\n                                <option value=\"FR\">\r\n                                    Frankrijk                                <\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"row\">\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"birthdate_fourth\" class=\"form-label\">\r\n                                Geboortedatum                            <\/label>\r\n                            <input type=\"date\" class=\"form-control bg-white\" id=\"birthdate_fourth\" name=\"birthdate_fourth\" oninput=\"changePrice()\"\r\n                                   aria-describedby=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\" style=\"display: none;\" id=\"id_number_fourth\">\r\n                            <label for=\"id_number_fourth\" class=\"form-label\">\r\n                                ID\/paspoort nummer                            <\/label>\r\n                            <input type=\"text\" class=\"form-control bg-white\" id=\"id_number_fourth\" name=\"id_number_fourth\"\r\n                                   aria-describedby=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"row\">\r\n                    <div class=\"col-6\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"country_fourth\" class=\"form-label\">\r\n                                Land                            <\/label>\r\n                            <select class=\"form-select\" aria-label=\"Default select example\" id=\"country\"\r\n                                    name=\"country_fourth\">\r\n                                <option selected disabled>\r\n                                    Selecteer                                <\/option>\r\n                                <option value=\"Nederland\">\r\n                                    Nederland                                <\/option>\r\n                                <option value=\"Deutschland\">\r\n                                    Duitsland                                <\/option>\r\n                                <option value=\"Rusland\">\r\n                                    Rusland                                <\/option>\r\n                                <option value=\"Bulgarije\">\r\n                                    Bulgarije                                <\/option>\r\n                                <option value=\"Belgi\u00eb\">\r\n                                    Belgi\u00eb                                <\/option>\r\n                                <option value=\"Roemeni\u00eb\">\r\n                                    Roemeni\u00eb                                <\/option>\r\n                                <option value=\"Noorwegen\">\r\n                                    Noorwegen                                <\/option>\r\n                                <option value=\"Denemarken\">\r\n                                    Denemarken                                <\/option>\r\n                                <option value=\"Luxemburg\">\r\n                                    Luxemburg                                <\/option>\r\n                                <option value=\"Zweden\">\r\n                                    Zweden                                <\/option>\r\n                                <option value=\"Itali\u00eb\">\r\n                                    Itali\u00eb                                <\/option>\r\n                                <option value=\"Frankrijk\">\r\n                                    Frankrijk                                <\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"mb-3\" style=\"display: none\" id=\"person_5\">\r\n                <p>Persoon 5:<\/p>\r\n                <div class=\"row\">\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"first_name\" class=\"form-label\">Voornaam<\/label>\r\n                            <input type=\"text\" class=\"form-control bg-white\" id=\"name_first_fifth\" name=\"name_first_fifth\"\r\n                                   aria-describedby=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"name_last_fifth\" class=\"form-label\">Achternaam<\/label>\r\n                            <input type=\"text\" class=\"form-control bg-white\" id=\"name_last_fifth\" name=\"name_last_fifth\"\r\n                                   aria-describedby=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"row\">\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"city_fifth\" class=\"form-label\">Woonplaats<\/label>\r\n                            <input type=\"text\" class=\"form-control bg-white\" id=\"city_fifth\" name=\"city_fifth\" aria-describedby=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"nationality_person_5\" class=\"form-label\">Nationaliteit<\/label>\r\n                            <select class=\"form-select\" aria-label=\"Default select example\" id=\"nationality_person_5\"\r\n                                    name=\"nationality_person_5\" onchange=\"showHideIdFifth()\">\r\n                                <option selected disabled>Selecteer<\/option>\r\n                                <option value=\"NL\">Nederland<\/option>\r\n                                <option value=\"GE\">Duitsland<\/option>\r\n                                <option value=\"RU\">Rusland<\/option>\r\n                                <option value=\"BG\">Bulgarije<\/option>\r\n                                <option value=\"BE\">Belgi\u00eb<\/option>\r\n                                <option value=\"RO\">Roemeni\u00eb<\/option>\r\n                                <option value=\"NO\">Noorwegen<\/option>\r\n                                <option value=\"DK\">Denemarken<\/option>\r\n                                <option value=\"LU\">Luxemburg<\/option>\r\n                                <option value=\"SE\">Zweden<\/option>\r\n                                <option value=\"IT\">Itali\u00eb<\/option>\r\n                                <option value=\"FR\">Frankrijk<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"row\">\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\" style=\"display: none;\" id=\"id_number_fifth\">\r\n                            <label for=\"id_number_fifth\" class=\"form-label\">ID\/paspoort nummer<\/label>\r\n                            <input type=\"text\" class=\"form-control bg-white\" id=\"id_number_fifth\" name=\"id_number_fifth\"\r\n                                   aria-describedby=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"row\">\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"birthdate_fifth\" class=\"form-label\">\r\n                                Geboortedatum                            <\/label>\r\n                            <input type=\"date\" class=\"form-control bg-white\" id=\"birthdate_fifth\" name=\"birthdate_fifth\" onchange=\"changePrice()\"\r\n                                   aria-describedby=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\" style=\"display: none;\" id=\"id_number_fifth\">\r\n                            <label for=\"id_number_fifth\" class=\"form-label\">\r\n                                ID\/paspoort nummer                            <\/label>\r\n                            <input type=\"text\" class=\"form-control bg-white\" id=\"id_number_fifth\" name=\"id_number_fifth\"\r\n                                   aria-describedby=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"row\">\r\n                    <div class=\"col-6\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"country_fifth\" class=\"form-label\">\r\n                                Land                            <\/label>\r\n                            <select class=\"form-select\" aria-label=\"Default select example\" id=\"country\"\r\n                                    name=\"country_fifth\">\r\n                                <option selected disabled>\r\n                                    Selecteer                                <\/option>\r\n                                <option value=\"Nederland\">\r\n                                    Nederland                                <\/option>\r\n                                <option value=\"Deutschland\">\r\n                                    Duitsland                                <\/option>\r\n                                <option value=\"Rusland\">\r\n                                    Rusland                                <\/option>\r\n                                <option value=\"Bulgarije\">\r\n                                    Bulgarije                                <\/option>\r\n                                <option value=\"Belgi\u00eb\">\r\n                                    Belgi\u00eb                                <\/option>\r\n                                <option value=\"Roemeni\u00eb\">\r\n                                    Roemeni\u00eb                                <\/option>\r\n                                <option value=\"Noorwegen\">\r\n                                    Noorwegen                                <\/option>\r\n                                <option value=\"Denemarken\">\r\n                                    Denemarken                                <\/option>\r\n                                <option value=\"Luxemburg\">\r\n                                    Luxemburg                                <\/option>\r\n                                <option value=\"Zweden\">\r\n                                    Zweden                                <\/option>\r\n                                <option value=\"Itali\u00eb\">\r\n                                    Itali\u00eb                                <\/option>\r\n                                <option value=\"Frankrijk\">\r\n                                    Frankrijk                                <\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"mb-3\" style=\"display: none\" id=\"person_6\">\r\n                <p>\r\n                    Persoon 6:                <\/p>\r\n                <div class=\"row\">\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"first_name\" class=\"form-label\">\r\n                                Voornaam                            <\/label>\r\n                            <input type=\"text\" class=\"form-control bg-white\" id=\"name_first_sixth\" name=\"name_first_sixth\"\r\n                                   aria-describedby=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"name_last_sixth\" class=\"form-label\">\r\n                                Achternaam                            <\/label>\r\n                            <input type=\"text\" class=\"form-control bg-white\" id=\"name_last_sixth\" name=\"name_last_sixth\"\r\n                                   aria-describedby=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"row\">\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"city_sixth\" class=\"form-label\">\r\n                                Woonplaats                            <\/label>\r\n                            <input type=\"text\" class=\"form-control bg-white\" id=\"city_sixth\" name=\"city_sixth\" aria-describedby=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"nationality_person_6\" class=\"form-label\">\r\n                                Nationaliteit                            <\/label>\r\n                            <select class=\"form-select\" aria-label=\"Default select example\" id=\"nationality_person_6\"\r\n                                    name=\"nationality_person_6\" onchange=\"showHideIdSix()\">\r\n                                <option selected disabled>\r\n                                    Selecteer                                <\/option>\r\n                                <option value=\"NL\">\r\n                                    Nederland                                <\/option>\r\n                                <option value=\"GE\">\r\n                                    Duitsland                                <\/option>\r\n                                <option value=\"RU\">\r\n                                    Rusland                                <\/option>\r\n                                <option value=\"BG\">\r\n                                    Bulgarije                                <\/option>\r\n                                <option value=\"BE\">\r\n                                    Belgi\u00eb                                <\/option>\r\n                                <option value=\"RO\">\r\n                                    Roemeni\u00eb                                <\/option>\r\n                                <option value=\"NO\">\r\n                                    Noorwegen                                <\/option>\r\n                                <option value=\"DK\">\r\n                                    Denemarken                                <\/option>\r\n                                <option value=\"LU\">\r\n                                    Luxemburg                                <\/option>\r\n                                <option value=\"SE\">\r\n                                    Zweden                                <\/option>\r\n                                <option value=\"IT\">\r\n                                    Itali\u00eb                                <\/option>\r\n                                <option value=\"FR\">\r\n                                    Frankrijk                                <\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"row\">\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"birthdate_sixth\" class=\"form-label\">\r\n                                Geboortedatum                            <\/label>\r\n                            <input type=\"date\" class=\"form-control\" id=\"birthdate_sixth\" name=\"birthdate_sixth\" onchange=\"changePrice()\"\r\n                                   aria-describedby=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"col\">\r\n                        <div class=\"mb-3\" style=\"display: none;\" id=\"id_number_sixth\">\r\n                            <label for=\"id_number_sixth\" class=\"form-label\">\r\n                                ID\/paspoort nummer                            <\/label>\r\n                            <input type=\"text\" class=\"form-control\" id=\"id_number_sixth\" name=\"id_number_sixth\"\"\r\n                            aria-describedby=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"row\">\r\n                    <div class=\"col-6\">\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"country_sixth\" class=\"form-label\">\r\n                                Land                            <\/label>\r\n                            <select class=\"form-select\" aria-label=\"Default select example\" id=\"country\"\r\n                                    name=\"country_sixth\">\r\n                                <option selected disabled>\r\n                                    Selecteer                                <\/option>\r\n                                <option value=\"Nederland\">\r\n                                    Nederland                                <\/option>\r\n                                <option value=\"Deutschland\">\r\n                                    Duitsland                                <\/option>\r\n                                <option value=\"Rusland\">\r\n                                    Rusland                                <\/option>\r\n                                <option value=\"Bulgarije\">\r\n                                    Bulgarije                                <\/option>\r\n                                <option value=\"Belgi\u00eb\">\r\n                                    Belgi\u00eb                                <\/option>\r\n                                <option value=\"Roemeni\u00eb\">\r\n                                    Roemeni\u00eb                                <\/option>\r\n                                <option value=\"Noorwegen\">\r\n                                    Noorwegen                                <\/option>\r\n                                <option value=\"Denemarken\">\r\n                                    Denemarken                                <\/option>\r\n                                <option value=\"Luxemburg\">\r\n                                    Luxemburg                                <\/option>\r\n                                <option value=\"Zweden\">\r\n                                    Zweden                                <\/option>\r\n                                <option value=\"Itali\u00eb\">\r\n                                    Itali\u00eb                                <\/option>\r\n                                <option value=\"Frankrijk\">\r\n                                    Frankrijk                                <\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <hr>\r\n\r\n            <h1>\r\n                Prijs            <\/h1>\r\n            <div class=\"d-flex align-items-center\">\r\n                <h2>\u20ac<\/h2>\r\n                <h2 id=\"total_price\" name=\"total_price\" class=\"ms-2\"><\/h2>\r\n                <input type=\"hidden\" id=\"total_price_hidden\" name=\"total_price_hidden\" value=\"\">\r\n            <\/div>\r\n\r\n            <button type=\"submit\" name=\"booking_form_submit\" class=\"btn btn-primary\" style=\"background-color: #0E3E1A\">\r\n                Verzend            <\/button>\r\n            <input type=\"hidden\" id=\"extra_cost_heating\" name=\"extra_cost_heating\"><\/input>\r\n            <input type=\"hidden\" id=\"extra_cost_tax\" name=\"extra_cost_tax\"><\/input>\r\n            <input type=\"hidden\" id=\"extra_cost_cleaning\" name=\"extra_cost_cleaning\"><\/input>\r\n            <input type=\"hidden\" id=\"amount_days\" name=\"amount_days\"><\/input>\r\n\r\n        <\/form>\r\n    <\/div>\r\n\r\n    <pre hidden>\r\n      <style>\r\n        .month {\r\n            padding: 10px 25px;\r\n            width: 100%;\r\n            background: #0E3E1A;\r\n            text-align: center;\r\n        }\r\n\r\n        .month ul {\r\n            margin: 0;\r\n            padding: 0;\r\n        }\r\n\r\n        .month ul li {\r\n            color: white;\r\n            font-size: 20px;\r\n            text-transform: uppercase;\r\n            letter-spacing: 3px;\r\n        }\r\n\r\n        .month .prev {\r\n            float: left;\r\n            padding-top: 10px;\r\n        }\r\n\r\n        .month .next {\r\n            float: right;\r\n            padding-top: 10px;\r\n        }\r\n\r\n        .custom-vertical-lines {\r\n            border-left: 3px solid black;\r\n            border-right: 3px solid black;\r\n            border-radius: 0px;\r\n            border-top: none;\r\n            border-bottom: none;\r\n        }\r\n\r\n        \/* Basisstijl voor de weekdays *\/\r\n        .weekdays {\r\n            margin: 0;\r\n            padding: 10px 0;\r\n            background-color: #0E3E1A;\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            justify-content: space-between;\r\n            list-style: none;\r\n            color: white;\r\n        }\r\n\r\n        .weekdays li {\r\n            flex: 1 0 14%;\r\n            color: white;\r\n            text-align: center;\r\n            padding: 5px 0;\r\n            font-size: 14px;\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .weekdays {\r\n                justify-content: space-around;\r\n            }\r\n\r\n            .weekdays li {\r\n                font-size: 12px;\r\n                flex: 1 0 13%;\r\n            }\r\n        }\r\n\r\n        .next-month {\r\n            color: gray;\r\n            opacity: 0.6;\r\n        }\r\n\r\n        .days_to_rent {\r\n            display: grid;\r\n            grid-template-columns: repeat(7, 1fr);\r\n            gap: 5px;\r\n        }\r\n\r\n        .days_to_rent li {\r\n            text-align: center;\r\n            padding: 10px;\r\n            border: 1px solid #ccc;\r\n            list-style: none;\r\n        }\r\n\r\n        .days-to-rent {\r\n            display: grid;\r\n            grid-template-columns: repeat(7, 1fr);\r\n            gap: 5px;\r\n        }\r\n\r\n        .days-to-rent li {\r\n            text-align: center;\r\n            padding: 10px;\r\n            border: 1px solid #ccc;\r\n            list-style: none;\r\n        }\r\n\r\n        .days {\r\n            padding: 10px 0;\r\n            background: #eee;\r\n            margin: 2px;\r\n            color: white;\r\n            max-height: 175px;\r\n            overflow-y: auto;\r\n            overflow-x: hidden;\r\n        }\r\n\r\n        .days li {\r\n            list-style-type: none;\r\n            display: inline-block;\r\n            width: 13.6%;\r\n            text-align: center;\r\n            margin-bottom: 5px;\r\n            margin-left: 2px;\r\n            margin-right: 2px;\r\n            font-size: 12px;\r\n            color: black;\r\n        }\r\n\r\n        .days li .active {\r\n            padding: 5px;\r\n            background: #1abc9c;\r\n            color: black; !important\r\n        }\r\n\r\n        .selected {\r\n            background-color: green;\r\n            color: white !important;\r\n            border-radius: 5px;\r\n        }\r\n\r\n        .booked {\r\n            background-color: red;\r\n            color: white !important;\r\n            border-radius: 5px;\r\n        }\r\n\r\n        @media screen and (max-width: 720px) {\r\n            .weekdays li, .days li {\r\n                width: 13.1%;\r\n            }\r\n        }\r\n\r\n        @media screen and (max-width: 420px) {\r\n            .weekdays li, .days li {\r\n                width: 12.5%;\r\n            }\r\n\r\n            .days li .active {\r\n                padding: 2px;\r\n            }\r\n        }\r\n\r\n        @media screen and (max-width: 290px) {\r\n            .weekdays li, .days li {\r\n                width: 12.2%;\r\n            }\r\n        }\r\n      <\/style>\r\n\r\n    <\/pre>\r\n\r\n    <pre hidden>\r\n        <script>\r\n          function changeOptions(event) {\r\n              const selectHome = document.getElementById('home');\r\n              const selectedOption = selectHome.options[selectHome.selectedIndex];\r\n              const animalsAllowed = selectedOption.dataset.animalsallowed;\r\n              const childBedAllowed = selectedOption.dataset.childbedallowed;\r\n              const childChairAllowed = selectedOption.dataset.childchairallowed;\r\n\r\n              const AnimalsAllowedElement = document.getElementById('animals-checkbox');\r\n              const childBedElement = document.getElementById('child-bed-checkbox');\r\n              const childChairElement = document.getElementById('child-chair-checkbox');\r\n\r\n              if (animalsAllowed == '1') {\r\n                  AnimalsAllowedElement.style.display = 'block';\r\n              } else {\r\n                  AnimalsAllowedElement.style.display = 'none';\r\n              }\r\n\r\n              if (childBedAllowed == '1') {\r\n                  childBedElement.style.display = 'block';\r\n              } else {\r\n                  childBedElement.style.display = 'none';\r\n              }\r\n\r\n              if (childChairAllowed == '1') {\r\n                  childChairElement.style.display = 'block';\r\n              } else {\r\n                  childChairElement.style.display = 'none';\r\n              }\r\n          }\r\n\r\n          const daysToRentSecond = document.getElementById(\"days_to_rent\");\r\n          const selectedDaysInput = document.getElementById('selected_days');\r\n\r\n          var ajaxurl = \"https:\/\/stichtingdiva.nl\/wp-admin\/admin-ajax.php\";\r\n\r\n\r\n\r\n          daysToRentSecond.addEventListener('click', function (event) {\r\n              if (event.target.tagName === 'LI') {\r\n                  const dayElement = event.target;\r\n\r\n                  \/\/ Get month and year from the clicked day\r\n                  const selectedMonth = parseInt(dayElement.getAttribute('data-month'));  \/\/ Month as integer (1-12)\r\n                  const selectedYear = parseInt(dayElement.getAttribute('data-year'));   \/\/ Full year (e.g., 2025)\r\n                  const selectedDay = parseInt(dayElement.getAttribute('data-day'));\r\n\r\n                  if (!dayElement.classList.contains(\"booked\")) {\r\n                      dayElement.classList.toggle('selected');\r\n                  }\r\n\r\n                  \/\/ Gather selected days with their month & year\r\n                  const selectedDates = [];\r\n                  document.querySelectorAll('#days_to_rent li.selected').forEach(selectedDay => {\r\n                      selectedDates.push({\r\n                          year: parseInt(selectedDay.getAttribute('data-year')),\r\n                          month: parseInt(selectedDay.getAttribute('data-month')),\r\n                          day: parseInt(selectedDay.getAttribute('data-day'))\r\n                      });\r\n                  });\r\n\r\n                  \/\/ Sort selected days across months\r\n                  selectedDates.sort((a, b) =>\r\n                      a.year !== b.year ? a.year - b.year :\r\n                          a.month !== b.month ? a.month - b.month :\r\n                              a.day - b.day\r\n                  );\r\n\r\n                  \/\/ Check for gaps between selected days\r\n                  let hasGap = false;\r\n                  for (let i = 1; i < selectedDates.length; i++) {\r\n                      const prev = selectedDates[i - 1];\r\n                      const current = selectedDates[i];\r\n\r\n                      const prevDate = new Date(prev.year, prev.month - 1, prev.day);\r\n                      const currentDate = new Date(current.year, current.month - 1, current.day);\r\n\r\n                      const differenceInDays = (currentDate - prevDate) \/ (1000 * 60 * 60 * 24);\r\n                      if (differenceInDays > 1) {\r\n                          hasGap = true;\r\n                          break;\r\n                      }\r\n                  }\r\n\r\n                  if (hasGap) {\r\n                      dayElement.classList.remove('selected');\r\n                      return;\r\n                  }\r\n\r\n                  \/\/ Extract min and max dates\r\n                  const startDate = new Date(Date.UTC(selectedDates[0].year, selectedDates[0].month - 1, selectedDates[0].day));\r\n                  const endDate = new Date(Date.UTC(selectedDates[selectedDates.length - 1].year, selectedDates[selectedDates.length - 1].month - 1, selectedDates[selectedDates.length - 1].day));\r\n\r\n                  document.getElementById('start_date').value = startDate.toISOString();\r\n                  document.getElementById('end_date').value = endDate.toISOString();\r\n\r\n                  console.log(\"DEBUG START \", document.getElementById('start_date').value);\r\n                  console.log(\"DEBUG END \", document.getElementById('end_date').value);\r\n\r\n                  changePrice();\r\n              }\r\n          });\r\n\r\n          const monthSelect = document.getElementById(\"month-select\");\r\n          const yearSelect = document.getElementById(\"year-select\");\r\n          const daysToRent = document.getElementById(\"days_to_rent\");\r\n\r\n          const currentYear = new Date().getFullYear();\r\n          const currentMonth = new Date().getMonth();\r\n\r\n          const homeSelect = document.getElementById('home');\r\n\r\n          homeSelect.addEventListener('change', function () {\r\n              const selectedHome = this.value;\r\n              if (typeof ajaxurl === 'undefined') {\r\n                  console.error('ajaxurl is niet gedefinieerd');\r\n                  return;\r\n              }\r\n\r\n              fetch(ajaxurl, {\r\n                  method: 'POST',\r\n                  headers: {'Content-Type': 'application\/x-www-form-urlencoded'},\r\n                  body: new URLSearchParams({\r\n                      action: 'fetch_bookings_for_home',\r\n                      home: selectedHome,\r\n                  }),\r\n              })\r\n                  .then((response) => response.json())\r\n                  .then((data) => {\r\n                      console.log(data);\r\n                      if (data.success) {\r\n                          const bookings = data.data;\r\n                          updateCalendarWithBookings(bookings);\r\n                      } else {\r\n                          console.error(data.data || 'Geen boekingen gevonden.');\r\n                      }\r\n                  })\r\n                  .catch((error) => console.error('Fout:', error));\r\n\r\n              updateCalendar();\r\n          });\r\n\r\n          function updateCalendarWithBookings(bookings) {\r\n              console.log('updateCalendarWithBookings call');\r\n              console.log(bookings)\r\n              const selectedMonth = parseInt(monthSelect.value);\r\n              const selectedYear = parseInt(yearSelect.value);\r\n              const daysInMonth = new Date(selectedYear, selectedMonth, 0).getDate();\r\n\r\n              var bookedGoogleCalendarDays = [];\r\n\r\n              fetchBookingsFromGoogleCalendar().then(bookedDats => {\r\n                      bookedGoogleCalendarDays.push(bookedDats)\r\n                      var bookedCalenderDaysFlat = bookedGoogleCalendarDays.flat();\r\n\r\n                      daysToRent.innerHTML = \"\";\r\n\r\n                      for (let day = 1; day <= daysInMonth; day++) {\r\n                          const li = document.createElement(\"li\");\r\n                          const yearMonthDay = `${selectedYear}-${selectedMonth.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;\r\n\r\n                          li.setAttribute(\"data-day\", day);\r\n                          li.setAttribute(\"data-month\", selectedMonth);\r\n                          li.setAttribute(\"data-year\", selectedYear);\r\n\r\n                          li.textContent = day;\r\n                          const currentDate = new Date(selectedYear, selectedMonth - 1, day);\r\n                          currentDate.setHours(0, 0, 0, 0);\r\n\r\n                          const isBooked = bookings.some((booking) => {\r\n                              const startDate = new Date(booking.start_date);\r\n                              const endDate = new Date(booking.end_date);\r\n                              startDate.setHours(0, 0, 0, 0);\r\n                              endDate.setHours(23, 59, 59, 999);\r\n\r\n                              const currentTime = currentDate.getTime();\r\n                              const startTime = startDate.getTime();\r\n                              const endTime = endDate.getTime();\r\n\r\n                              const checkDate = new Date(startDate);\r\n                              const checkDay = checkDate.getDate();\r\n\r\n                              if (day == checkDay) {\r\n                                  return false;\r\n                              }\r\n\r\n                              const checkDatetwo = new Date(endDate);\r\n                              const checkDaytwo = checkDatetwo.getDate();\r\n                              if (day == checkDaytwo) {\r\n                                  return false;\r\n                              }\r\n\r\n                              if (currentTime > startTime) {\r\n                                  if (currentTime < endTime) {\r\n                                      if (currentTime !== startTime) {\r\n                                          if (currentTime !== endTime) {\r\n                                              return true;\r\n                                          }\r\n                                      }\r\n                                  }\r\n                              }\r\n\r\n                              return false;\r\n                          });\r\n\r\n                          if (isBooked) {\r\n                              li.classList.add('booked');\r\n                          }\r\n\r\n                          try {\r\n                              \/\/ If date is alreate booked inside Google Calendar, add class booked\r\n                              if (bookedCalenderDaysFlat.includes(yearMonthDay)) {\r\n                                  li.classList.add('booked');\r\n                              }\r\n                          } catch (error) {\r\n                              console.error('Error while checking if date is booked in Google Calendar:', error);\r\n                          }\r\n\r\n                          daysToRent.appendChild(li);\r\n                      }\r\n                  }\r\n              );\r\n          }\r\n\r\n          for (let i = currentYear; i <= currentYear + 3; i++) {\r\n              const option = document.createElement(\"option\");\r\n              option.value = i;\r\n              option.textContent = i;\r\n              yearSelect.appendChild(option);\r\n          }\r\n\r\n          monthSelect.value = currentMonth;\r\n          yearSelect.value = currentYear;\r\n\r\n          function getDaysInMonth(month, year) {\r\n              return new Date(year, month, 0).getDate();\r\n          }\r\n\r\n\r\n          function updateCalendar() {\r\n              console.log('updateCalendar call');\r\n              const selectedMonth = parseInt(monthSelect.value);\r\n              const selectedYear = parseInt(yearSelect.value);\r\n              const selectedHome = homeSelect.value;\r\n\r\n              if (typeof ajaxurl === 'undefined') {\r\n                  console.error('ajaxurl is niet gedefinieerd');\r\n                  return;\r\n              }\r\n\r\n              var bookedGoogleCalendarDays = [];\r\n\r\n              fetchBookingsFromGoogleCalendar().then(bookedDates => {\r\n                  bookedGoogleCalendarDays = bookedDates;\r\n\r\n                  fetch(ajaxurl, {\r\n                      method: 'POST',\r\n                      headers: { 'Content-Type': 'application\/x-www-form-urlencoded' },\r\n                      body: new URLSearchParams({\r\n                          action: 'fetch_bookings_for_home',\r\n                          home: selectedHome,\r\n                          year: selectedYear,\r\n                          month: selectedMonth,\r\n                      }),\r\n                  })\r\n                      .then((response) => response.json())\r\n                      .then((data) => {\r\n                          if (data.success) {\r\n                              const bookings = data.data;\r\n                              const daysInMonth = new Date(selectedYear, selectedMonth, 0).getDate(); \/\/ Get days in selected month\r\n                              const nextMonth = selectedMonth === 12 ? 1 : selectedMonth + 1;\r\n                              const nextYear = selectedMonth === 12 ? selectedYear + 1 : selectedYear;\r\n\r\n                              \/\/ Fetch bookings for the next month\r\n                              fetch(ajaxurl, {\r\n                                  method: 'POST',\r\n                                  headers: { 'Content-Type': 'application\/x-www-form-urlencoded' },\r\n                                  body: new URLSearchParams({\r\n                                      action: 'fetch_bookings_for_home',\r\n                                      home: selectedHome,\r\n                                      year: nextYear,\r\n                                      month: nextMonth,\r\n                                  }),\r\n                              })\r\n                                  .then((response) => response.json())\r\n                                  .then((nextMonthData) => {\r\n                                      if (nextMonthData.success) {\r\n                                          const nextMonthBookings = nextMonthData.data;\r\n                                          const allBookings = [...bookings, ...nextMonthBookings];\r\n                                          daysToRent.innerHTML = \"\";\r\n\r\n                                          \/\/ Determine first day of the current month\r\n                                          const firstDayOfMonth = new Date(selectedYear, selectedMonth - 1, 1);\r\n                                          const firstWeekday = firstDayOfMonth.getDay(); \/\/ Get the starting day (0 = Sunday)\r\n\r\n                                          \/\/ Adjust to make Monday the first day of the week\r\n                                          const adjustedFirstWeekday = firstWeekday === 0 ? 6 : firstWeekday - 1;\r\n\r\n                                          \/\/ Insert empty placeholders for alignment\r\n                                          for (let i = 0; i < adjustedFirstWeekday; i++) {\r\n                                              const emptyLi = document.createElement(\"li\");\r\n                                              emptyLi.classList.add(\"empty\");\r\n                                              daysToRent.appendChild(emptyLi);\r\n                                          }\r\n\r\n                                          \/\/ Loop through the days of the current month\r\n                                          for (let day = 1; day <= daysInMonth; day++) {\r\n                                              const li = document.createElement(\"li\");\r\n                                              const yearMonthDay = `${selectedYear}-${selectedMonth.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;\r\n                                              li.setAttribute(\"data-day\", day);\r\n                                              li.setAttribute(\"data-month\", selectedMonth);\r\n                                              li.setAttribute(\"data-year\", selectedYear);\r\n                                              li.textContent = day;\r\n\r\n                                              const currentDate = new Date(selectedYear, selectedMonth - 1, day);\r\n                                              currentDate.setHours(0, 0, 0, 0);\r\n\r\n                                              \/\/ Check if the day is booked from the DB (for both current and next month)\r\n                                              const isBooked = allBookings.some((booking) => {\r\n                                                  const startDate = new Date(booking.start_date);\r\n                                                  const endDate = new Date(booking.end_date);\r\n                                                  startDate.setHours(0, 0, 0, 0);\r\n                                                  endDate.setHours(23, 59, 59, 999);\r\n\r\n                                                  return currentDate >= startDate && currentDate <= endDate;\r\n                                              });\r\n\r\n                                              if (isBooked) {\r\n                                                  li.classList.add(\"booked\");\r\n                                              }\r\n\r\n                                              \/\/ Check if the day is booked from Google Calendar\r\n                                              if (bookedGoogleCalendarDays.includes(yearMonthDay)) {\r\n                                                  li.classList.add(\"booked\");\r\n                                              }\r\n\r\n                                              daysToRent.appendChild(li);\r\n                                          }\r\n\r\n                                          \/\/ Handle the next month's days (display them)\r\n                                          const nextMonthDaysInMonth = new Date(nextYear, nextMonth, 0).getDate(); \/\/ Get days in next month\r\n                                          const nextMonthFirstDay = new Date(nextYear, nextMonth - 1, 1);\r\n                                          const nextMonthFirstWeekday = nextMonthFirstDay.getDay();\r\n                                          const adjustedNextMonthFirstWeekday = nextMonthFirstWeekday === 0 ? 6 : nextMonthFirstWeekday - 1;\r\n\r\n                                          \/\/ Loop through the next month's days\r\n                                          for (let day = 1; day <= nextMonthDaysInMonth; day++) {\r\n                                              const li = document.createElement(\"li\");\r\n                                              const yearMonthDay = `${nextYear}-${nextMonth.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;\r\n                                              li.setAttribute(\"data-day\", day);\r\n                                              li.setAttribute(\"data-month\", selectedMonth + 1);\r\n                                              li.setAttribute(\"data-year\", selectedYear);\r\n                                              li.textContent = day;\r\n\r\n                                              const currentDate = new Date(nextYear, nextMonth - 1, day);\r\n                                              currentDate.setHours(0, 0, 0, 0);\r\n\r\n                                              \/\/ Check if the day is booked from the DB\r\n                                              const isBooked = nextMonthBookings.some((booking) => {\r\n                                                  const startDate = new Date(booking.start_date);\r\n                                                  const endDate = new Date(booking.end_date);\r\n                                                  startDate.setHours(0, 0, 0, 0);\r\n                                                  endDate.setHours(23, 59, 59, 999);\r\n\r\n                                                  return currentDate >= startDate && currentDate <= endDate;\r\n                                              });\r\n\r\n                                              if (isBooked) {\r\n                                                  li.classList.add(\"booked\");\r\n                                              }\r\n\r\n                                              \/\/ Check if the day is booked from Google Calendar\r\n                                              if (bookedGoogleCalendarDays.includes(yearMonthDay)) {\r\n                                                  li.classList.add(\"booked\");\r\n                                              }\r\n\r\n                                              daysToRent.appendChild(li);\r\n                                          }\r\n                                      } else {\r\n                                          console.error(nextMonthData.data || \"Geen boekingen voor de volgende maand gevonden.\");\r\n                                      }\r\n                                  })\r\n                                  .catch((error) => console.error(\"Error fetching next month's bookings:\", error));\r\n                          } else {\r\n                              console.error(data.data || \"Geen boekingen gevonden.\");\r\n                          }\r\n                      })\r\n                      .catch((error) => console.error(\"Error fetching bookings:\", error));\r\n              });\r\n          }\r\n\r\n          monthSelect.addEventListener(\"change\", updateCalendar);\r\n          yearSelect.addEventListener(\"change\", updateCalendar);\r\n\r\n          updateCalendar();\r\n\r\n          function changeExtraPersons(event) {\r\n              console.log(event.target.value)\r\n              if (event.target.value == 1) {\r\n                  document.getElementById(\"person_2\").style.display = \"none\";\r\n                  document.getElementById(\"person_3\").style.display = \"none\";\r\n                  document.getElementById(\"person_4\").style.display = \"none\";\r\n                  document.getElementById(\"person_5\").style.display = \"none\";\r\n                  document.getElementById(\"person_6\").style.display = \"none\";\r\n              }\r\n\r\n              if (event.target.value == 2) {\r\n                  document.getElementById(\"person_2\").style.display = \"block\";\r\n                  document.getElementById(\"person_3\").style.display = \"none\";\r\n                  document.getElementById(\"person_4\").style.display = \"none\";\r\n                  document.getElementById(\"person_5\").style.display = \"none\";\r\n                  document.getElementById(\"person_6\").style.display = \"none\";\r\n              }\r\n\r\n              if (event.target.value == 3) {\r\n                  document.getElementById(\"person_2\").style.display = \"block\";\r\n                  document.getElementById(\"person_3\").style.display = \"block\";\r\n                  document.getElementById(\"person_4\").style.display = \"none\";\r\n                  document.getElementById(\"person_5\").style.display = \"none\";\r\n                  document.getElementById(\"person_6\").style.display = \"none\";\r\n              }\r\n\r\n              if (event.target.value == 4) {\r\n                  document.getElementById(\"person_2\").style.display = \"block\";\r\n                  document.getElementById(\"person_3\").style.display = \"block\";\r\n                  document.getElementById(\"person_4\").style.display = \"block\";\r\n                  document.getElementById(\"person_5\").style.display = \"none\";\r\n                  document.getElementById(\"person_6\").style.display = \"none\";\r\n              }\r\n\r\n              if (event.target.value == 5) {\r\n                  document.getElementById(\"person_2\").style.display = \"block\";\r\n                  document.getElementById(\"person_3\").style.display = \"block\";\r\n                  document.getElementById(\"person_4\").style.display = \"block\";\r\n                  document.getElementById(\"person_5\").style.display = \"block\";\r\n                  document.getElementById(\"person_6\").style.display = \"none\";\r\n              }\r\n\r\n              if (event.target.value == 6) {\r\n                  document.getElementById(\"person_2\").style.display = \"block\";\r\n                  document.getElementById(\"person_3\").style.display = \"block\";\r\n                  document.getElementById(\"person_4\").style.display = \"block\";\r\n                  document.getElementById(\"person_5\").style.display = \"block\";\r\n                  document.getElementById(\"person_6\").style.display = \"block\";\r\n              }\r\n\r\n              changePrice();\r\n          }\r\n\r\n          \/\/\r\n          \/\/ Calendarkl\r\n          \/\/\r\n          function getMinAndMaxDaysFromString(input) {\r\n              const numbersFromString = String(input).split(',').map(Number);\r\n              const minNumber = Math.min(...numbersFromString);\r\n              const maxNumber = Math.max(...numbersFromString);\r\n\r\n              return {minNumber, maxNumber}\r\n          }\r\n\r\n          function calculateHeatingCosts(startDate, endDate, pricePerNight) {\r\n              const start = new Date(startDate);\r\n              const end = new Date(endDate);\r\n              const winterMonths = [10, 11, 12, 1, 2, 3, 4];\r\n              let totalNights = 0;\r\n\r\n              while (start < end) {\r\n                  const month = start.getMonth() + 1;\r\n                  if (winterMonths.includes(month)) {\r\n                      totalNights++;\r\n                  }\r\n                  start.setDate(start.getDate() + 1);\r\n              }\r\n\r\n              return totalNights * pricePerNight;\r\n          }\r\n\r\n          function changePrice() {\r\n              const selectHome = document.getElementById('home');\r\n              var homeMaxPersons = (selectHome.options[selectHome.selectedIndex]).dataset.persons;\r\n\r\n              const selectAmountPersons = document.getElementById('amount_persons');\r\n              const optionThree = selectAmountPersons.querySelector('option[value=\"3\"]');\r\n              const optionFour = selectAmountPersons.querySelector('option[value=\"4\"]');\r\n              const optionFive = selectAmountPersons.querySelector('option[value=\"5\"]');\r\n              const optionSix = selectAmountPersons.querySelector('option[value=\"6\"]');\r\n\r\n              if (optionThree) {\r\n                  if (homeMaxPersons >= 3) {\r\n                      optionThree.style.display = 'block';\r\n                  } else {\r\n                      optionThree.style.display = 'none';\r\n                  }\r\n              }\r\n\r\n              if (optionFour) {\r\n                  if (homeMaxPersons >= 4) {\r\n                      optionFour.style.display = 'block';\r\n                  } else {\r\n                      optionFour.style.display = 'none';\r\n                  }\r\n              }\r\n\r\n              if (optionFive) {\r\n                  if (homeMaxPersons >= 5) {\r\n                      optionFive.style.display = 'block';\r\n                  } else {\r\n                      optionFive.style.display = 'none';\r\n                  }\r\n              }\r\n\r\n              if (optionSix) {\r\n                  if (homeMaxPersons == 6) {\r\n                      optionSix.style.display = 'block';\r\n                  } else {\r\n                      optionSix.style.display = 'none';\r\n                  }\r\n              }\r\n              var homePrice = (selectHome.options[selectHome.selectedIndex]).dataset.price;\r\n              var selectedDaysInput = (document.getElementById('selected_days').value).split(',');\r\n\r\n              document.getElementById('amount_days').value = selectedDaysInput.length - 1;\r\n\r\n              if (document.getElementById('animals').checked) {\r\n                  var animals = document.getElementById('animals').value;\r\n              } else {\r\n                  var animals = 0;\r\n              }\r\n\r\n              if (document.getElementById('child_chair').checked) {\r\n                  var childChair = document.getElementById('child_chair').value;\r\n              } else {\r\n                  var childChair = 0;\r\n              }\r\n\r\n              if (document.getElementById('child_bed').checked) {\r\n                  var childBed = document.getElementById('child_bed').value;\r\n              } else {\r\n                  var childBed = 0;\r\n              }\r\n\r\n              if (document.getElementById('amount_persons').value == 3) {\r\n                  var extraPeoplePrice = 10;\r\n              } else if (document.getElementById('amount_persons').value == 4) {\r\n                  var extraPeoplePrice = 20;\r\n              } else if (document.getElementById('amount_persons').value == 5) {\r\n                  var extraPeoplePrice = 30;\r\n              } else if (document.getElementById('amount_persons').value == 6) {\r\n                  var extraPeoplePrice = 40;\r\n              } else {\r\n                  var extraPeoplePrice = 0;\r\n              }\r\n\r\n              function calculateAge(birthdate) {\r\n                  if (!birthdate) {\r\n                      return 0;\r\n                  }\r\n\r\n                  const birthDate = new Date(birthdate);\r\n                  const today = new Date();\r\n                  const yearDifference = today.getFullYear() - birthDate.getFullYear();\r\n                  const monthDifference = today.getMonth() - birthDate.getMonth();\r\n                  const dayDifference = today.getDate() - birthDate.getDate();\r\n\r\n                  return yearDifference;\r\n              }\r\n\r\n              \/\/ Helper function to calculate age reduction\r\n              function calculateAgeReduction(birthdate) {\r\n                  if (!birthdate) {\r\n                      return 0;\r\n                  }\r\n\r\n                  const birthDate = new Date(birthdate);\r\n                  const today = new Date();\r\n                  let age = today.getFullYear() - birthDate.getFullYear();\r\n\r\n                  \/\/ Adjust age if the birthday hasn't occurred yet this year (without using &&)\r\n                  if (today.getMonth() < birthDate.getMonth()) {\r\n                      age--;\r\n                  } else {\r\n                      if (today.getMonth() === birthDate.getMonth()) {\r\n                          if (today.getDate() < birthDate.getDate()) {\r\n                              age--;\r\n                          }\r\n                      }\r\n                  }\r\n\r\n                  if (age < 14) {\r\n                      return 10;\r\n                  } else {\r\n                      return 0;\r\n                  }\r\n              }\r\n\r\n              \/\/ Get birthdates\r\n              const birthdateSecond = document.getElementById('birthdate_second').value;\r\n              const birthdateThirth = document.getElementById('birthdate_thirth').value;\r\n              const birthdateFourth = document.getElementById('birthdate_fourth').value;\r\n              const birthdateFifth = document.getElementById('birthdate_fifth').value;\r\n              const birthdateSix = document.getElementById('birthdate_sixth').value;\r\n\r\n              let ageReductionSecond = calculateAgeReduction(birthdateSecond);\r\n              let ageReductionThirth = calculateAgeReduction(birthdateThirth);\r\n              let ageReductionFourth = calculateAgeReduction(birthdateFourth);\r\n              let ageReductionFifth = calculateAgeReduction(birthdateFifth);\r\n              let ageReductionSix = calculateAgeReduction(birthdateSix);\r\n\r\n              priceOfTax = 2.10;\r\n\r\n              if (calculateAge(birthdateSecond) >= 14) {\r\n                  priceOfTax += 2.10;\r\n              }\r\n\r\n              if (calculateAge(birthdateThirth) >= 14) {\r\n                  priceOfTax += 2.10;\r\n              }\r\n\r\n              if (calculateAge(birthdateFourth) >= 14) {\r\n                  priceOfTax += 2.10;\r\n              }\r\n\r\n              if (calculateAge(birthdateFifth) >= 14) {\r\n                  priceOfTax += 2.10;\r\n              }\r\n\r\n              if (calculateAge(birthdateSix) >= 14) {\r\n                  priceOfTax += 2.10;\r\n              }\r\n              console.log('Tax: ' + priceOfTax);\r\n\r\n              document.getElementById('extra_cost_tax').value = priceOfTax;\r\n\r\n              const heatingCost = calculateHeatingCosts(\r\n                  document.getElementById('start_date').value,\r\n                  document.getElementById('end_date').value,\r\n                  10, \/\/ Price\r\n              );\r\n\r\n              document.getElementById('extra_cost_heating').value = heatingCost;\r\n\r\n              console.log(`Totale extra stookkosten: \u20ac${heatingCost}`);\r\n\r\n              console.log(\"home price: \" + homePrice);\r\n              var homePricePerDay = homePrice;\r\n              var selectedDays = selectedDaysInput.length;\r\n\r\n              const startDate = new Date(document.getElementById('start_date').value);\r\n              const endDate = new Date(document.getElementById('end_date').value);\r\n              startDate.setHours(0, 0, 0, 0);\r\n              endDate.setHours(0, 0, 0, 0);\r\n\r\n              if (startDate > endDate) {\r\n                  const temp = startDate;\r\n                  startDate = endDate;\r\n                  endDate = temp;\r\n              }\r\n\r\n              const timeDifference = endDate - startDate;\r\n              const dayDifference = timeDifference \/ (1000 * 60 * 60 * 24);\r\n              const nights = Math.round(Math.max(dayDifference, 0));\r\n\r\n              console.log('Nights: ' + nights);\r\n\r\n              document.getElementById('amount_days').value = nights;\r\n\r\n              console.log(\"Dog: \" + animals * nights);\r\n              console.log(\"Child Bed: \" + Number(childBed));\r\n              console.log(\"Child Chair: \" + Number(childChair));\r\n              console.log(\"Home Price total: \" + (Number(homePricePerDay) * Number(nights)));\r\n              console.log(\"Selected nights: \" + nights);\r\n              console.log(\"Heating Cost: \" + Number(heatingCost));\r\n              console.log(\"Extra People Price: \" + Number(extraPeoplePrice));\r\n              console.log(\"Age Reduction Third: \" + Number(ageReductionThirth));\r\n              console.log(\"Age Reduction Fourth: \" + Number(ageReductionFourth));\r\n              console.log(\"Age Reduction Fifth: \" + Number(ageReductionFifth));\r\n              console.log(\"Age Reduction Six: \" + Number(ageReductionSix));\r\n              console.log(\"Tax: \" + Number(priceOfTax * (nights)));\r\n\r\n              if (nights > 1 && nights <= 2) {\r\n                  var extraCleaningPrice = 40;\r\n                  console.log(\"Extra Cleaning: \" + Number(extraCleaningPrice));\r\n                  document.getElementById('extra_cleaning_cost_popup').style.display = 'block';\r\n              }\r\n\r\n              if (nights > 2) {\r\n                  var extraCleaningPrice = 0;\r\n                  console.log(\"Extra Cleaning: \" + Number(extraCleaningPrice));\r\n                  document.getElementById('extra_cost_cleaning').value = extraCleaningPrice;\r\n                  document.getElementById('extra_cleaning_cost_popup').style.display = 'none';\r\n              }\r\n              console.log('Extra people price times nights: ' + (Number(extraPeoplePrice) * Number(nights)));\r\n              var totalHomePrice =\r\n                  (Number(homePricePerDay)) * (Number(nights) || 1) +\r\n                  (Number(priceOfTax) || 0) * (Number(nights) || 0) +\r\n                  (Number(animals) || 0) * (Number(nights) || 0) +\r\n                  (Number(childBed) || 0) +\r\n                  (Number(childChair) || 0) +\r\n                  (Number(heatingCost) || 0) +\r\n                  (Number(extraPeoplePrice) * Number(nights)) -\r\n                  ((Number(ageReductionThirth) * Number(nights)) || 0) -\r\n                  ((Number(ageReductionFourth) * Number(nights)) || 0) -\r\n                  ((Number(ageReductionFifth) * Number(nights)) || 0) -\r\n                  ((Number(ageReductionSix) * Number(nights)) || 0) +\r\n                  (Number(extraCleaningPrice) || 0);\r\n\r\n\r\n              \/\/ Ensure totalHomePrice is a string\r\n              totalHomePrice = totalHomePrice.toString();\r\n              if (totalHomePrice.includes('.') || totalHomePrice.includes(',')) {\r\n                  totalHomePrice = totalHomePrice + '0';\r\n              } else {\r\n                  totalHomePrice = totalHomePrice + ',-';\r\n              }\r\n\r\n              document.getElementById('total_price').innerHTML = totalHomePrice;\r\n              document.getElementById('total_price_hidden').value = totalHomePrice;\r\n\r\n              console.log('DEBUG ' + (document.getElementById('selected_days').value).split(','));\r\n          }\r\n\r\n          function showHideIdFirst() {\r\n              if (document.getElementById('nationality').value != 'GE') {\r\n                  document.getElementById('id_number_first').style.display = 'block';\r\n              } else {\r\n                  document.getElementById('id_number_first').style.display = 'none';\r\n              }\r\n          }\r\n\r\n          function showHideIdSecond() {\r\n              if (document.getElementById('nationality_person_2').value != 'GE') {\r\n                  document.getElementById('id_number_second').style.display = 'block';\r\n              } else {\r\n                  document.getElementById('id_number_second').style.display = 'none';\r\n              }\r\n          }\r\n\r\n          function showHideIdThirth() {\r\n              if (document.getElementById('nationality_person_3').value != 'GE') {\r\n                  document.getElementById('id_number_thirth').style.display = 'block';\r\n              } else {\r\n                  document.getElementById('id_number_thirth').style.display = 'none';\r\n              }\r\n          }\r\n\r\n          function showHideIdFourth() {\r\n              if (document.getElementById('nationality_person_4').value != 'GE') {\r\n                  document.getElementById('id_number_fourth').style.display = 'block';\r\n              } else {\r\n                  document.getElementById('id_number_fourth').style.display = 'none';\r\n              }\r\n          }\r\n\r\n          function showHideIdFifth() {\r\n              if (document.getElementById('nationality_person_5').value != 'GE') {\r\n                  document.getElementById('id_number_fourth').style.display = 'block';\r\n              } else {\r\n                  document.getElementById('id_number_fourth').style.display = 'none';\r\n              }\r\n          }\r\n\r\n          function showHideIdSix() {\r\n              if (document.getElementById('nationality_person_6').value != 'GE') {\r\n                  document.getElementById('id_number_fourth').style.display = 'block';\r\n              } else {\r\n                  document.getElementById('id_number_fourth').style.display = 'none';\r\n              }\r\n          }\r\n\r\n          \/\/ On booking form submit\r\n          \/\/\r\n          document.addEventListener(\"DOMContentLoaded\", function () {\r\n              const bookingForm = document.querySelector(\"form\");\r\n              const submitButton = document.querySelector(\"button[name='booking_form_submit']\");\r\n              const startDateInput = document.getElementById(\"start_date\");\r\n              const endDateInput = document.getElementById(\"end_date\");\r\n              const currentLang = document.getElementById('current_lang');\r\n\r\n              submitButton.addEventListener(\"click\", function (event) {\r\n                  const startDate = new Date(startDateInput.value);\r\n                  const endDate = new Date(endDateInput.value);\r\n\r\n                  if (isNaN(startDate) || isNaN(endDate)) {\r\n                      if (currentLang === 'nl') {\r\n                          alert('Please select both a start and end date.');\r\n                      } else {\r\n                          alert('Please select both a start and end date.');\r\n                      }\r\n                      event.preventDefault();\r\n                      return;\r\n                  }\r\n\r\n                  console.log(startDate, endDate);\r\n                  startDate.setHours(0, 0, 0, 0);\r\n                  endDate.setHours(0, 0, 0, 0);\r\n\r\n                  if (startDate.getTime() === endDate.getTime()) {\r\n                      console.log('debug 1')\r\n                      if (currentLang === 'nl') {\r\n                          alert('Incorrecte datum ingevuld!');\r\n                      } else {\r\n                          alert('Datum falsch eingegeben!');\r\n                      }\r\n                      event.preventDefault();\r\n                  }\r\n\r\n                  const timeDifference = endDate - startDate;\r\n                  const dayDifference = timeDifference \/ (1000 * 60 * 60 * 24); \/\/ Convert ms to days\r\n\r\n                  \/\/ It's cringe because WordPress f*cks up the AND operator in this codebase\r\n                  if (startDate < new Date()) {\r\n                      if (endDate <= new Date()) {\r\n                          console.log('debug 2')\r\n                          if (currentLang === 'nl') {\r\n                              alert('Incorrecte datum ingevuld!');\r\n                          } else {\r\n                              alert('Datum falsch eingegeben!');\r\n                          }\r\n                          event.preventDefault();\r\n                          return;\r\n                      }\r\n                  }\r\n                  const nights = Math.max(Math.round(dayDifference), 0);\r\n                  if (nights < 2 ) {\r\n                      console.log('debug 3')\r\n                      if (currentLang === 'nl') {\r\n                          alert('Incorrecte datum ingevuld!');\r\n                      } else {\r\n                          alert('Datum falsch eingegeben!');\r\n                      }\r\n                      event.preventDefault();\r\n                  }\r\n              });\r\n          });\r\n\r\n          function fetchBookingsFromGoogleCalendar() {\r\n              const home = document.getElementById('home').value;\r\n              const selectedYear = document.getElementById('year-select').value;\r\n              const selectedMonth = document.getElementById('month-select').value;\r\n              const ajaxurl = \"https:\/\/stichtingdiva.nl\/wp-admin\/admin-ajax.php\";\r\n\r\n              return fetch(ajaxurl, {\r\n                  method: 'POST',\r\n                  headers: {'Content-Type': 'application\/x-www-form-urlencoded'},\r\n                  body: new URLSearchParams({\r\n                      action: 'fetch_bookings_from_calendar_by_home_name',\r\n                      home: `${home}`,\r\n                      year: selectedYear,\r\n                      month: selectedMonth,\r\n                  }),\r\n              })\r\n                  .then(response => {\r\n                      if (!response.ok) {\r\n                          throw new Error('Network response was not ok');\r\n                      }\r\n                      return response.json();\r\n                  })\r\n                  .then(data => {\r\n                      console.log(data)\r\n                      if (data.success) {\r\n                          var bookedDates = [];\r\n                          for (let date of data.data) {\r\n                              bookedDates.push(date);\r\n                          }\r\n                          return bookedDates;\r\n                      } else {\r\n                          return [];\r\n                      }\r\n                  })\r\n                  .catch(error => {\r\n                      console.error('Error fetching bookings:', error);\r\n                      throw error;\r\n                  });\r\n          }\r\n      <\/script>\r\n    <\/pre>\r\n\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.3\/dist\/js\/bootstrap.bundle.min.js\"\r\n            integrity=\"sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK\/7HAuoJl+0I4\"\r\n            crossorigin=\"anonymous\"><\/script>\r\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1335","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/stichtingdiva.nl\/index.php?rest_route=\/wp\/v2\/pages\/1335","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stichtingdiva.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stichtingdiva.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stichtingdiva.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stichtingdiva.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1335"}],"version-history":[{"count":0,"href":"https:\/\/stichtingdiva.nl\/index.php?rest_route=\/wp\/v2\/pages\/1335\/revisions"}],"wp:attachment":[{"href":"https:\/\/stichtingdiva.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}