<turbo-stream action="replace" target="booking_container"><template><div id="booking_container" class="flex-1 h-full flex flex-col gap-5">

  <div id="appointment_content"
    class="flex flex-col"
    data-controller="new-appointment"
    data-new-appointment-time-slots-url-value="/booking/appointment/11/time_slots">
    <nav class="mb-8 flex items-center gap-2 text-on-surface-variant/60 font-medium text-xs tracking-wider uppercase uk-animation-fade">
      <span class="hover:text-primary cursor-pointer transition-colors">Clinics</span>
      <span data-feather="chevron-right" class="text-[14px]"></span>
      <span class="hover:text-primary cursor-pointer transition-colors">Doctors</span>
      <span data-feather="chevron-right" class="text-[14px]"></span>
      <span class="text-primary font-bold">Select Time</span>
    </nav>
    <header class="mb-10">
      <h1 class="text-3xl font-extrabold font-headline tracking-tight text-on-surface mb-2">One last step...</h1>
      <p class="text-on-surface-variant font-body mt-2 mb-0!">
        Please review your selection and provide patient details to confirm your visit.
      </p>
    </header>
    <div class="grid min-w-0 grid-cols-1 gap-6 lg:grid-cols-12 lg:gap-8">
      <!-- Left Column: Context & Patient Details -->
      <div class="lg:col-span-5 space-y-8 uk-animation-fade">
          <!-- Appointment Context Card -->
          <section
              class="relative overflow-hidden rounded-xl bg-surface-container-lowest p-5 shadow-[0_8px_32px_rgba(25,28,30,0.04)] sm:p-8">
              <div class="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full -mr-16 -mt-16"></div>
              <div class="relative z-10 space-y-6">
                  <div class="flex items-center gap-4">
                      <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-primary-fixed">
                          <img class="w-full h-full object-cover transition-all duration-700 flip" alt="Doctor Avatar" src="https://demo.careflowclinic.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MywicHVyIjoiYmxvYl9pZCJ9fQ==--ad95b116ed771d2752890829397c7abfa61d0f8d/dr-marcus-lee-ai-profile.png" />
                      </div>
                      <div>
                          <h3 class="text-xl font-headline font-bold m-0!">Dr. Marcus Lee</h3>
                          <p class="text-primary font-medium text-sm m-0!">Senior Dermatologist</p>
                      </div>
                  </div>
                  <div class="pt-4 border-t border-outline-variant/20 space-y-4">
                      <div class="flex items-start gap-3">
                          <span data-feather="map-pin" class="text-primary text-lg"></span>
                          <div>
                            <span class="block text-xs font-label uppercase tracking-wider opacity-60">
                              Clinic Location
                            </span>
                            <span class="text-sm font-semibold">
                              CareCal Downtown Clinic
                            </span>
                            <p class="text-xs text-on-surface-variant m-0!">
                              245 Market Street, Boston, MA 02110
                              <a target="_blank" class="uk-link-heading" href="https://www.google.com/maps/search/245 Market Street, Boston, MA 02110">
                                <span data-feather="external-link" class="text-primary text-lg ml-2 size-4" uk-tooltip="title: View on Google Maps"></span>
</a>                            </p>
                          </div>
                      </div>
                      <div class="flex items-start gap-3">
                        <span data-feather="dollar-sign" class="text-primary text-lg"></span>
                        <div>
                            <span class="block text-xs font-label uppercase tracking-wider opacity-60">Service Fee</span>
                            <span class="text-sm font-semibold" data-new-appointment-target="feeLabel">
                              Select a service
                            </span>
                        </div>
                      </div>
                      <div class="flex items-start gap-3">
                        <span data-feather="clock" class="text-primary text-lg"></span>
                        <div>
                            <span class="block text-xs font-label uppercase tracking-wider opacity-60">Appointment Duration</span>
                            <span class="text-sm font-semibold" data-new-appointment-target="durationLabel">
                              Select a service
                            </span>
                        </div>
                      </div>
                      <div class="pt-4 mt-4 border-t border-outline-variant/30">
                        <a data-turbo-stream="true" class="w-full py-3 rounded-lg bg-surface-container-high text-on-surface-variant text-sm font-bold flex items-center justify-center gap-2 hover:bg-surface-container-highest transition-colors border-0! no-underline! hover:text-primary" href="/booking/doctors/2">
                          <span data-feather="edit-2" class="size-4"></span>
                          Change Doctor
</a>                      </div>
                  </div>
              </div>
          </section>
      </div>
      <div class="lg:col-span-7">
        <form action="/booking/appointment/11" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="NuflzxzjumFXqOtLTE_sZ6-jmJBU4Nm7LoZtsr5j5JFXgbANEyvbDvYypmLxcOaP6aFMa3sBNCb9JG0K8oQkoA" autocomplete="off" />
        <section class="flex flex-col rounded-xl bg-surface-container-lowest p-5 shadow-[0_8px_32px_rgba(25,28,30,0.04)] uk-animation-slide-top-medium sm:p-8">
          <div class="flex flex-col mb-8">
            <h2 class="text-2xl text-left font-headline font-extrabold tracking-tight">Select Time</h2>
            <div class="mb-6 space-y-2">
              <label class="text-xs font-label font-bold uppercase tracking-widest text-on-surface-variant ml-1" for="appointment_service_id">Visit Reason / Service</label>
              <select class="uk-select" required="required" data-new-appointment-target="serviceSelect" data-action="change-&gt;new-appointment#serviceChanged" name="appointment[service_id]" id="appointment_service_id"><option value="">Select a service</option>
<option data-fee="$180.00" data-duration="45 min" value="4">Annual Wellness Exam</option>
<option data-fee="$225.00" data-duration="60 min" value="6">Chronic Care Review</option>
<option data-fee="$120.00" data-duration="30 min" value="5">Follow-up Consultation</option></select>
            </div>
            
            
<turbo-frame data-controller="appointment-new-appointment" data-new-appointment-target="timeSlots" data-date="2026-05-03" id="time_slots">
  <div class="flex flex-row justify-between items-center mb-2">
    <a data-turbo-stream="true" data-turbo-method="post" class="uk-button uk-button-default px-2! md:px-15" uk-tooltip="Previous day" href="/booking/appointment/11/time_slots?date=2026-05-02">
      <span uk-icon="icon: chevron-left"></span>
</a>    <div class="flex items-center gap-2 relative">
      <span class="text-pink-500 text-xs capitalize absolute left-0 -top-5 w-full h-full flex items-center justify-center">today</span>
      <h5 class="font-bold m-0!">Sunday, May 03, 2026</h5>
      <span uk-icon="icon: calendar"></span>
    </div>
    <div class="flex items-center gap-2">
      <a data-turbo-stream="true" data-turbo-method="post" class="uk-button uk-button-default px-2! md:px-15" uk-tooltip="Next day" href="/booking/appointment/11/time_slots?date=2026-05-04">
        <span uk-icon="icon: chevron-right"></span>
</a>    </div>
  </div>
  <div class="flex items-center justify-between my-8">
    <h3 class="text-sm font-label font-bold uppercase tracking-widest text-on-surface-variant m-0!">
      Available Slots (May 03)</h3>
    <span class="text-xs text-tertiary-container font-bold bg-tertiary/10 px-2 py-1 rounded">
      0
      slots left</span>
  </div>
  <div class="uk-flex uk-flex-wrap uk-flex-center uk-text-center gap-2">
      <div>
          <button class="uk-button uk-button-default uk-width-small text-gray-500! line-through! uk-disabled" disabled>09:00 AM</button>
      </div>
      <div>
          <button class="uk-button uk-button-default uk-width-small text-gray-500! line-through! uk-disabled" disabled>09:30 AM</button>
      </div>
      <div>
          <button class="uk-button uk-button-default uk-width-small text-gray-500! line-through! uk-disabled" disabled>10:00 AM</button>
      </div>
      <div>
          <button class="uk-button uk-button-default uk-width-small text-gray-500! line-through! uk-disabled" disabled>10:30 AM</button>
      </div>
      <div>
          <button class="uk-button uk-button-default uk-width-small text-gray-500! line-through! uk-disabled" disabled>11:00 AM</button>
      </div>
      <div>
          <button class="uk-button uk-button-default uk-width-small text-gray-500! line-through! uk-disabled" disabled>11:30 AM</button>
      </div>
      <div>
          <button class="uk-button uk-button-default uk-width-small text-gray-500! line-through! uk-disabled" disabled>12:00 PM</button>
      </div>
      <div>
          <button class="uk-button uk-button-default uk-width-small text-gray-500! line-through! uk-disabled" disabled>12:30 PM</button>
      </div>
      <div>
          <button class="uk-button uk-button-default uk-width-small text-gray-500! line-through! uk-disabled" disabled>01:00 PM</button>
      </div>
      <div>
          <button class="uk-button uk-button-default uk-width-small text-gray-500! line-through! uk-disabled" disabled>01:30 PM</button>
      </div>
      <div>
          <button class="uk-button uk-button-default uk-width-small text-gray-500! line-through! uk-disabled" disabled>02:00 PM</button>
      </div>
      <div>
          <button class="uk-button uk-button-default uk-width-small text-gray-500! line-through! uk-disabled" disabled>02:30 PM</button>
      </div>
      <div>
          <button class="uk-button uk-button-default uk-width-small text-gray-500! line-through! uk-disabled" disabled>03:00 PM</button>
      </div>
      <div>
          <button class="uk-button uk-button-default uk-width-small text-gray-500! line-through! uk-disabled" disabled>03:30 PM</button>
      </div>
      <div>
          <button class="uk-button uk-button-default uk-width-small text-gray-500! line-through! uk-disabled" disabled>04:00 PM</button>
      </div>
      <div>
          <button class="uk-button uk-button-default uk-width-small text-gray-500! line-through! uk-disabled" disabled>04:30 PM</button>
      </div>
  </div>
  <div class="flex items-center justify-end mt-4!">
      <a data-turbo-stream="true" data-turbo-method="post" class="uk-button uk-button-text text-primary! hover:text-primary-dark" href="/booking/appointment/11/time_slots?date=2026-05-04">
        <span uk-icon="icon: chevron-double-right"></span> Next available day
</a>  </div>
</turbo-frame>
              
            <div class="flex flex-col gap-2">
              
              <input autocomplete="off" type="hidden" name="appointment[clinic_id]" id="appointment_clinic_id" />
              <input value="held" autocomplete="off" type="hidden" name="appointment[status]" id="appointment_status" />
              <input value="11" autocomplete="off" type="hidden" name="appointment[doctor_id]" id="appointment_doctor_id" />
              <input value="11" autocomplete="off" type="hidden" name="appointment[patient_id]" id="appointment_patient_id" />
            </div>
          </div>
        </section>
        <div id="appointment_phone"></div>
</form>      </div>
  </div>
  <section class="mt-12 grid grid-cols-1 gap-6 border-t border-outline-variant/20 py-8 md:grid-cols-3 md:gap-8 lg:mt-20 lg:py-10">
    <div class="flex gap-4">
        <div
            class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary shrink-0">
            <span data-feather="bell" class="text-primary text-lg"></span>
        </div>
        <div>
            <h4 class="font-bold text-sm">Instant Confirmation</h4>
            <p class="text-xs text-on-surface-variant leading-relaxed">Receive immediate SMS and email alerts
                once your booking is finalized.</p>
        </div>
    </div>
    <div class="flex gap-4">
        <div
            class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary shrink-0">
            <span data-feather="calendar" class="text-primary text-lg"></span>
        </div>
        <div>
            <h4 class="font-bold text-sm">Easy Rescheduling</h4>
            <p class="text-xs text-on-surface-variant leading-relaxed">Plans change. Reschedule or cancel up to
                24 hours before your visit with one click.</p>
        </div>
    </div>
    <div class="flex gap-4">
        <div
            class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary shrink-0">
            <span data-feather="shield" class="text-primary text-lg"></span>
        </div>
        <div>
            <h4 class="font-bold text-sm">Data Privacy</h4>
            <p class="text-xs text-on-surface-variant leading-relaxed">Your personal health information is
                encrypted and never shared without consent.</p>
        </div>
    </div>
</section>
</div>
</template></turbo-stream>