### 26. Disabling-unavailable-dates

### 26. Disabling-unavailable-dates

- This plugin lock the date that we cannot use.
- Define out the plugins that we want to use
- We can define the option under the lockPlugin key
- The minimum would be the current date and time
- Filter the date whether it is pickup or not
- A $avaialbleDates variable was created in checkoutController whether the $availability(dates or slots) has the particular slots.
- The hasSlots method was implemented in the app\Bookings\DateCollection class
- Die and dump the $avaialableDates
- Grab the date and grab the date object for the value of the lets grab the slots count, and casts this to an array
- Die and dump the $avaialableDates
- Grab the date and grab the date object for the value of the lets grab the slots count, and casts this to an array
- Die and dump the $avaialableDates
- The result will be the weekend will be escaped from the array
- Remove the dd
- Make $availableDates in the blade views to work as json encoded with in JavaScript, in the CheckoutController __invoke method, use the inside the calender
- Output the about data by json encoding the PHP array
- Check the available dates
- Check the output in the console
- Output the not available dates
- Change the appointment according to the day you are checking.

app/Bookings/DateCollection.php

@@ -19,4 +19,5 @@ public function hasSlots()
             return !$date->slots->isEmpty();
         });
     }
+
 }

app/Http/Controllers/CheckoutController.php

@@ -2,10 +2,11 @@
 
 namespace App\Http\Controllers;
 
-use App\Bookings\ServiceSlotAvailability;
-use App\Models\Employee;
+use App\Bookings\Date;
 use App\Models\Service;
+use App\Models\Employee;
 use Illuminate\Http\Request;
+use App\Bookings\ServiceSlotAvailability;
 
 class CheckoutController extends Controller
 {
@@ -20,10 +21,18 @@ public function __invoke(Employee $employee, Service $service)
                             now()->addMonth()->endOfDay()
                         );
 
+        $availableDates = $availability
+                            ->hasSlots()
+                            ->mapWithKeys(fn (Date $date) => [
+                                $date->date->toDateString() => $date->slots->count()
+                            ])
+                            ->toArray();
+
         return view('bookings.checkout', [
             'employee' => $employee,
             'service' => $service,
             'firstAvailableDate' => $availability->firstAvailableDate()->date->toDateString(),
+            'availableDates' => $availableDates,
         ]);
     }
 }

resources/views/bookings/checkout.blade.php

@@ -26,7 +26,8 @@
 
             <div
                 x-data="{
-                    picker: null
+                    picker: null,
+                    availableDates: {{ json_encode($availableDates) }},
                 }"
                 x-init="
                     this.picker = new easepick.create({
@@ -36,7 +37,16 @@
                         date: '{{ $firstAvailableDate }}',
                         css: [
                             'https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.css',
-                        ]
+                        ],
+                        plugins: [
+                            'LockPlugin'
+                        ],
+                        LockPlugin: {
+                            minDate: new Date(),
+                            filter (date, picked) {
+                                return !Object.keys(availableDates).includes(date.format('YYYY-MM-DD'))
+                            }
+                        }
                     })
                 "
             >