Using JS module on the book button

reservation.html

@@ -19,6 +19,10 @@
         .notie-container {
             box-shadow: none;
         }
+
+        .datepicker {
+            z-index: 10000;
+        }
     </style>
 </head>
 
@@ -110,6 +114,7 @@
 
     <script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/js/datepicker-full.min.js"></script>
     <script src="https://unpkg.com/notie"></script>
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 
     <script>
 
@@ -140,17 +145,147 @@
 
         // notie
         function notify(msg, msgType) {
-            console.log("Test")
             notie.alert({
                 type: msgType,
                 text: msg,
             });
         }
 
-        document.getElementById("dummy").addEventListener('click', () => {
+        // sweetalert2
-            console.log("Test1")
+        function notifyModal(title, text, icon, confirmButtonText) {
-            notify("This is a message", "success");
+            Swal.fire({
+                title: title,
+                text: text,
+                icon: icon,
+                confirmButtonText: confirmButtonText
+            })
+        }
+
+        // Prompt is out Javascript module for all alerts, notifications, and custom popup dialogs
+        function Prompt() {
+            let toast = function (c) {
+                const {
+                    msg = "",
+                    icon = "success",
+                    position = "top-end",
+                } = c
+
+                const Toast = Swal.mixin({
+                    toast: true,
+                    title: msg,
+                    position: position,
+                    icon: icon,
+                    showConfirmButton: false,
+                    timer: 3000,
+                    timerProgressBar: true,
+                    didOpen: (toast) => {
+                        toast.addEventListener('mouseenter', Swal.stopTimer)
+                        toast.addEventListener('mouseleave', Swal.resumeTimer)
+                    }
+                })
+                Toast.fire({})
+            }
+
+            let success = function (c) {
+                const {
+                    msg = "",
+                    title = "",
+                    footer = "",
+                } = c
+
+                Swal.fire({
+                    icon: 'success',
+                    title: title,
+                    text: msg,
+                    footer: footer,
+                })
+            }
+
+            let error = function (c) {
+                const {
+                    msg = "",
+                    title = "",
+                    footer = "",
+                } = c
+
+                Swal.fire({
+                    icon: 'error',
+                    title: title,
+                    text: msg,
+                    footer: footer,
+                })
+            }
+
+            async function custom(c) {
+                const {
+                    msg = "",
+                    title = "",
+                } = c;
+
+                const {value: formValues} = await Swal.fire({
+                    title: title,
+                    html: msg,
+                    backdrop: false,
+                    focusConfirm: false,
+                    showCancelButton: true,
+                    willOpen: () => {
+                        console.log("test")
+                        const elem = document.getElementById('reservation-dates-modal')
+                        const rp = new DateRangePicker(elem, {
+                            "format": "yyyy-mm-dd",
+                            showOnFocus: true,
                         });
+                    },
+                    didOpen: () => {
+                        return [
+                            document.getElementById('start').removeAttribute("disabled"),
+                            document.getElementById('end').removeAttribute("disabled"),
+                        ]
+                    },
+                    preConfirm: () => {
+                        return [
+                            document.getElementById('start').value,
+                            document.getElementById('end').value,
+                        ]
+                    },
+                })
+
+                if (formValues) {
+                    Swal.fire(JSON.stringify(formValues))
+                }
+            }
+
+            return {
+                toast: toast,
+                success: success,
+                error: error,
+                custom: custom,
+            }
+        }
+
+        document.getElementById("dummy").addEventListener('click', () => {
+            notify("This is a message", "success");
+            // notifyModal("title", "text", "success", "confirm");
+            // Prompt().toast({msg: "Prompt Test"})
+            Prompt().success({msg: "Success!"})
+            // Prompt().error({msg: "Ooops"})
+
+            let html = `
+                <form action="reservation.html" method="get" 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">
+                        </div>
+                        <div class="col mb-3">
+                            <input disabled required type="text" class="form-control" name="end" id="end" placeholder="Departure">
+                        </div>
+                    </div>
+                </form>
+            `;
+            Prompt().custom({title: "Choose your dates", msg: html})
+        });
+
+
 
     </script>
 </body>