Appt. confirmation screen UI

resources/views/app/guest/appointment-confirmation.blade.php

@@ -1,9 +1,10 @@
 @extends ('layouts.guest_template')
 @section('content')
-<div class="container">
+<div class="container mcp-theme-1">
     <div class="row">
         <div class="col-md-12">
-            <h1>Appointment Confirmation</h1>
+            <h3 class="font-size-16 font-weight-bold my-3">Appointment Confirmation</h3>
+            <hr>
             <div>
                 @if(session('success'))
                     <div class="alert alert-info">Submitted successfully</div>
@@ -11,12 +12,17 @@
                 @if(session('error'))
                     <div class="alert alert-danger">Error while submitting the data. Please contact the administrator</div>
                 @endif
+                @if(!session('success'))
                 <form action="{{route('process-appointment_confirmation')}}" method="POST">
                     @csrf
                     <input type="hidden" name="appointment_uid" value="{{$appointment->uid}}">
 
                     <div class="form-group">
                         <p>Hi {{$appointment->client->name_first}} {{$appointment->client->name_last}}!</p>
+                        <p>You have an appointment with <b>{{$appointment->pro->displayName()}}</b>
+                            on <b>{{friendly_date_time($appointment->raw_date, false)}}</b>
+                            at <b>{{friendly_time($appointment->raw_start_time)}} - {{$appointment->timezone}}</b>
+                        </p>
                     </div>
 
                     <div class="form-group">
@@ -24,18 +30,18 @@
                     </div>
 
                     <div class="form-group">
-                        <div class="check">
-                            <input type="radio" name="decision" value="ACCEPT" id="appointment_confirmation_accept" class="check-input">
-                            <label for="appointment_confirmation_accept" class="check-label">Accept</label>
+                        <div class="check d-flex align-items-center mb-2">
+                            <input type="radio" required name="decision" value="ACCEPT" id="appointment_confirmation_accept" class="check-input my-0 mr-2">
+                            <label for="appointment_confirmation_accept" class="check-label my-0">Accept - <b>I confirm my availability at the above mentioned date/time</b></label>
                         </div>
-                        <div class="check">
-                            <input type="radio" name="decision" value="REJECT" id="appointment_confirmation_reject" class="check-input">
-                            <label for="appointment_confirmation_reject" class="check-label">Reject</label>
+                        <div class="check d-flex align-items-center">
+                            <input type="radio" required name="decision" value="REJECT" id="appointment_confirmation_reject" class="check-input my-0 mr-2">
+                            <label for="appointment_confirmation_reject" class="check-label my-0">Reject - <b>I do not want an appointment at the above mentioned date/time</b></label>
                         </div>
                     </div>
 
                     <div class="form-group">
-                        <textarea name="memo" class="form-control"></textarea>
+                        <textarea name="memo" class="form-control form-control-sm" placeholder="Any additional information / reason in case you are rejecting the appointment"></textarea>
                     </div>
 
                     <div class="form-group">
@@ -43,10 +49,11 @@
                     </div>
 
                 </form>
+                @endif
             </div>
         </div>
     </div>
 
 </div>
 
-@endsection
+@endsection