set driver availabilities

web/layouts/solidarity_service/_partials/create-driver.html

@@ -228,18 +228,49 @@
             '09:00 PM',
             '10:00 PM',
             '11:00 PM'
-            ] 
+            ],
+
+            confirmAvailabilities() {
+                const driverAvailabilities = [];
+
+                this.days.forEach(day  => {
+                    this.hours.forEach(hour => {
+                        let checkbox = document.getElementById('hour-' + day + '-' + hour).checked;
+                        if( checkbox && checkbox === true){
+                            const startTime = hour;
+                            const endTime = hour;
+    
+                            const availabilitySlot = {
+                                DayOfWeek: day, 
+                                StartTime: startTime,
+                                EndTime: endTime,
+                            };
+    
+                            driverAvailabilities.push(availabilitySlot);
+                        }
+                    })
+                })
+                console.log(driverAvailabilities);
+                let availabilities = document.getElementById('availabilities');
+                availabilities.value = JSON.stringify(driverAvailabilities);
+                return
+                
+            }
         }">
         <template x-for="day in days" :key="day">
-            <div>
-                <label for="day-select-${day}" x-text="day"></label><br>
-                <select name="${day}" id="day-select-${day}">
+            <div class="mb-4"> 
+                <label :for="'day-select-'+ day" class="block text-sm font-medium text-gray-700" x-text="day"></label><br>
+                <div :name="day" :id="'day-select-' + day" multiple>
                     <template x-for="hour in hours" :key="hour">
-                        <option x-text="hour" x-value="hour"></option>
+                        <input :id="'hour-' + day + '-' + hour" type="checkbox" x-text="hour" x-value="hour" class="mr-4"></input>
+                        <label :for="'hour-' + day + '-' + hour" x-text="hour" class="text-sm text-gray-700"></label>
                     </template>
-                </select>
+                </div>
             </div>
         </template>
+        <button type="button" @click="confirmAvailabilities()"
+        class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-2xl text-white bg-co-blue hover:bg-co-blue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">Confirmer les disponibilitées</button>
+        <input type="hidden" id="availabilities" name="availabilities" >
         <div class="flex justify-end">
             <p x-show="! isFormValid" class="px-4 py-2 text-sm text-co-red">Certains champs de sont pas valides.</p>
             <a href="/app/beneficiaries/">