[edit] active class for appointment date

app/Http/Controllers/Admin/AppointmentController.php

@@ -7,6 +7,7 @@ use App\Http\Controllers\Controller;
 
 use App\Models\Appointment;
 use Illuminate\Http\Request;
+use Carbon\Carbon;
 
 class AppointmentController extends Controller
 {
@@ -36,16 +37,17 @@ class AppointmentController extends Controller
     {
         $request->validate([
             'date' => 'required|date',
-            'start_time' => 'required|date_format:H:i A',
-            'end_time' => 'required|date_format:H:i A',
+            'start_time' => 'required|date_format:H:i',
+            'end_time' => 'required|date_format:H:i',
             // 'location' => 'required|max:255',
             // 'description' => 'required',
         ]);
-
+        $start_time = Carbon::createFromFormat('H:i', $request->get('start_time'))->format('H:i A');
+        $end_time = Carbon::createFromFormat('H:i', $request->get('end_time'))->format('H:i A');
         $appointment = new Appointment([
             'date' => $request->get('date'),
-            'start_time' => $request->get('start_time'),
-            'end_time' => $request->get('end_time'),
+            'start_time' => $start_time,
+            'end_time' => $end_time,
             'location' => $request->get('location'),
             'description' => $request->get('description'),
             'service_type' => $request->get('service_type'),
@@ -58,8 +60,14 @@ class AppointmentController extends Controller
 
     public function edit($id)
     {
-        $appointment = Appointment::find($id);
-
+        $appointment = Appointment::findorfail($id);
+        $start_time = explode(" ", $appointment->start_time);
+        $start_time = $start_time[0];
+       
+        $end_time = explode(" ", $appointment->end_time);
+        $end_time = $end_time[0];
+        $appointment['start_time'] = $start_time;
+        $appointment['end_time'] = $end_time;
         return view($this->view.'edit', compact('appointment'));
     }
 
@@ -67,19 +75,22 @@ class AppointmentController extends Controller
     {
         $request->validate([
             'date' => 'required|date',
-            'start_time' => 'required|date_format:H:i A',
-            'end_time' => 'required|date_format:H:i A',
+            'start_time' => 'required|date_format:H:i',
+            'end_time' => 'required|date_format:H:i',
             // 'location' => 'required|max:255',
             // 'description' => 'required',
         ]);
+        $start_time = Carbon::createFromFormat('H:i', $request->get('start_time'))->format('H:i A');
+        $end_time = Carbon::createFromFormat('H:i', $request->get('end_time'))->format('H:i A');
 
         $appointment = Appointment::find($id);
         $appointment->date = $request->get('date');
-        $appointment->start_time = $request->get('start_time');
-        $appointment->end_time = $request->get('end_time');
+        $appointment->start_time = $start_time;
+        $appointment->end_time = $end_time;
         $appointment->location = $request->get('location');
         $appointment->description = $request->get('description');
         $appointment->service_type = $request->get('service_type');
+        $appointment->status = $request->get('status');
         $appointment->save();
 
         return redirect($this->redirect)->with('success', 'Appointment has been updated');

app/Http/Controllers/AppointmentController.php

@@ -76,6 +76,7 @@ class AppointmentController extends Controller
             $appointment->is_booked = true;
             $appointment->save();
             $subject = 'Appointment Confirmed';
+            dispatch(function() use ($name,$email,$subject,$formated_date,$appointment) {
             \Mail::send('appointment_confirmed', array(
 
                 'full_name' =>$name,
@@ -88,7 +89,7 @@ class AppointmentController extends Controller
 
                 'end_time' => $appointment['end_time'],
     
-                'phone' =>$request['phone'],
+                'phone' =>$appointment['phone'],
     
                 'subject' =>$subject 
     
@@ -101,6 +102,7 @@ class AppointmentController extends Controller
                 // $message->cc('suman@extratechs.com.au', 'Extratech')->subject($subject);
     
                });
+            });
         }
 
         return response()->json(['appointment_detail' => $appointment_detail,'appointment' => $appointment,'formated_date' => $formated_date],200);

public/frontend/css/style.css

@@ -1622,7 +1622,6 @@ table.lightgrey-weekends tbody td:nth-child(n+6) {
 .available-dates{
     /* background: #f0f0f0; */
     display: inline-block;
-    text-align: center;
     justify-content: center;
     color: #272626;
     margin-top: 1rem;
@@ -1633,11 +1632,11 @@ table.lightgrey-weekends tbody td:nth-child(n+6) {
     border: 1px solid #e0ecfb;
     color:#1a60c5;
     padding: 10px 12px;
-    margin-left: 15px;
+    margin: 6px;
 }
-.available-dates button:nth-of-type(1){
+/* .available-dates button:nth-of-type(1){
     margin-left:0;
-}
+} */
 .available-dates button, .appointment-section .modal-footer button{
     transition: all 250ms ease-in-out;
 }
@@ -1659,7 +1658,8 @@ table.lightgrey-weekends tbody td:nth-child(n+6) {
 table.lightgrey-weekends tbody td:nth-child(n+6) {
     background-color: #f3f3f3;
     color: #d30000;
-  }
+    pointer-events: none !important;
+}
 .event-colourful {
     color: #bdbdbd;
     cursor: not-allowed;
@@ -1673,6 +1673,9 @@ table.lightgrey-weekends tbody td:nth-child(n+6) {
     cursor: pointer;
     box-shadow: 0 1px 5px rgb(0 0 0 / 20%), 0 2px 2px rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%) !important;
 }
+.event-clickable.active{
+    background-color: #27ab00 !important;
+}
 /* appointment page css ends */
 
 /* Footer Css */

resources/views/admin/appointment/edit.blade.php

@@ -48,13 +48,13 @@
                             <div class="col-md-6" >
                                 <div class="form-group" >
                                     <label>Start Time <span style="color: red";> * </span></label>
-                                    <input type="text" name="start_time" class="form-control"  value = "{{$appointment->start_time}}" required/>
+                                    <input type="time" name="start_time" class="form-control"  value = "{{$appointment->start_time}}" required/>
                                 </div>
                             </div>
                             <div class="col-md-6" >
                                 <div class="form-group" >
                                     <label>End Time <span style="color: red";> * </span></label>
-                                    <input type="text" name="end_time" class="form-control"  value = "{{$appointment->end_time}}" required/>
+                                    <input type="time" name="end_time" class="form-control"  value = "{{$appointment->end_time}}" required/>
                                 </div>
                             </div>
                             <div class="col-md-6">

resources/views/appointment.blade.php

@@ -136,19 +136,6 @@
         var id = id;
         var now = new Date();
         $calender.zabuto_calendar({
-        data: [
-            @foreach($educationAppointments as $appointment)
-                @php
-                    $date = Carbon\Carbon::createFromFormat('Y-m-d', $appointment->date);
-                    $start_time = Carbon\Carbon::createFromFormat('H:i A', $appointment->start_time);
-                    $end_time = Carbon\Carbon::createFromFormat('H:i A', $appointment->end_time); 
-                @endphp
-                {
-                    date: "{{ $date->format('Y-m-d') }}",
-                    content: "{{ $start_time->format('H:i') }} - {{ $end_time->format('H:i') }}"
-                },
-            @endforeach
-        ],
         classname: 'table event-colourful table-bordered lightgrey-weekends',
         week_starts: 'monday',
         show_days: true,
@@ -170,6 +157,7 @@
       
         });
 
+        let allBtns = document.querySelectorAll("td")
         $calender.on('zabuto:calendar:day', function (e) {
         var now = new Date();
         var date = e.date;
@@ -192,14 +180,13 @@
 
                 }
             });
-
-            if (e.today) {
-                $(e.element).html('<span class="badge bg-success">'+ e.date.getDate() +'</span>');
-            } else if (e.date.getTime() < now.getTime()) {
-                $(e.element).html('<span class="badge bg-danger">'+ e.date.getDate() +'</span>');
-            } else {
-                $(e.element).html('<span class="badge bg-success">'+ e.date.getDate() +'</span>');
-            }
+            // On click, remove the MyClass on ALL td
+            allBtns.forEach(function(el){
+                el.classList.remove("active");
+            });
+            
+            // Add the class on clicked one
+            e.target.classList.add("active");
         })
     }
     function dispalyAppointments(appointments,formated_date,id) {