Connecting the rooms page to make reservation page

templates/majors.page.tmpl

@@ -32,7 +32,7 @@
 <script>
     document.getElementById("check-availability").addEventListener('click', () => {
         let html = `
-                <form action="reservation.html" method="get" novalidate class="needs-validation">
+                <form id="check-availability-form" action="/availability-json" method="post" novalidate class="needs-validation">
                     <div id="reservation-dates-modal" class="row">
                         <div class="col mb-3">
                             <input disabled required type="text" class="form-control" name="start" id="start" placeholder="Arrival">
@@ -43,7 +43,62 @@
                     </div>
                 </form>
             `;
-        Prompt().custom({title: "Choose your dates", msg: html})
+        let attention = Prompt()
+        attention.custom({
+            title: "Choose your dates",
+            msg: html,
+            willOpen: () => {
+                const elem = document.getElementById('reservation-dates-modal')
+                const rp = new DateRangePicker(elem, {
+                    "format": "yyyy-mm-dd",
+                    showOnFocus: true,
+                    minDate: new Date(),
+                });
+            },
+            didOpen: () => {
+                return [
+                    document.getElementById('start').removeAttribute("disabled"),
+                    document.getElementById('end').removeAttribute("disabled"),
+                ]
+            },
+            callback: (result) => {
+                const formElem = document.getElementById("check-availability-form");
+                let formData = new FormData(formElem);
+                formData.append("csrf_token", "{{.CSRFToken}}");
+                formData.append("room_id", "2")
+
+                fetch('/availability-json', {
+                    method: "post",
+                    body: formData,
+                })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.ok) {
+                            console.log("room is available")
+                            attention.custom({
+                                icon: "success",
+                                // TODO: use the default ok button instead
+                                msg: '<p>Room is available</p>' +
+                                     '<p><a href="/book-room?id=' +
+                                    data.room_id +
+                                    '&s=' +
+                                    data.start_date +
+                                    '&e=' +
+                                    data.end_date +
+                                    '" class="btn btn-primary">' +
+                                     'Book now!</a></p>',
+                                showConfirmButton: false,
+                            });
+                        } else {
+                            console.log("room is not available")
+                            attention.error({
+                                msg: "No availability"
+                            });
+                        }
+                    })
+            },
+        });
     });
+
 </script>
 {{end}}