@extends('layouts.main')
@section('content')
<div class="container py-4">
   <h4 class="mb-4">New Booking</h4>
   <div class="card p-4">
      <!-- Success -->
      @if(session('success'))
      <div class="alert alert-success">{{ session('success') }}</div>
      @endif
      <!-- Errors -->
      @if ($errors->any())
      <div class="alert alert-danger">
         <ul class="mb-0">
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
         </ul>
      </div>
      @endif
      <form action="{{ route('patient.booking.store') }}" method="POST">
         @csrf
         <input type="hidden" name="patient_id" value="{{ $user->id ?? '' }}">
         <div class="row g-2 align-items-end">
            <!-- Patient Name -->
            <div class="col-md-2">
               <label class="small">Name</label>
               <input type="text" class="form-control form-control-sm"
                  value="{{ $user->first_name ?? '' }}" readonly>
            </div>
            <!-- Mobile -->
            <div class="col-md-2">
               <label class="small">Mobile</label>
               <input type="text" class="form-control form-control-sm"
                  value="{{ $user->mobile_number ?? '' }}" readonly>
            </div>
            <!-- Doctor -->
            <div class="col-md-2">
               <label class="small">Doctor</label>
               <select name="consultant_id" id="doctorSelect"
                  class="form-select form-select-sm" required>
                  <option value="">Doctor</option>
                  @foreach($doctors as $doctor)
                  <option value="{{ $doctor->id }}">
                     {{ $doctor->first_name }}
                  </option>
                  @endforeach
               </select>
            </div>
            <!-- Slots -->
            <div class="col-md-3">
               <label class="small">Slot</label>
               <select name="session_id" id="slotSelect"
                  class="form-select form-select-sm" required>
                  <option value="">Select</option>
               </select>
            </div>
            <!-- Problem -->
            <div class="col-md-2">
               <label class="small">Problem</label>
               <input type="text" name="problem"
                  class="form-control form-control-sm" required>
            </div>
            <!-- Button -->
            <div class="col-md-1">
               <button type="submit" class="btn btn-success btn-sm w-100">
               Save
               </button>
            </div>
         </div>
      </form>
   </div>
</div>

<script>
document.getElementById('doctorSelect').addEventListener('change', function () {

    let doctorId = this.value;
    let slotSelect = document.getElementById('slotSelect');

    slotSelect.innerHTML = '<option>Loading...</option>';

    if (doctorId) {

        let url = "{{ route('getAvailableSlots', ':id') }}".replace(':id', doctorId);

        fetch(url)
            .then(response => response.json())
            .then(data => {

                slotSelect.innerHTML = '<option value="">Select Slot</option>';

                // ❌ No slots found
                if (!data || data.length === 0) {
                    slotSelect.innerHTML = '<option>No timeslot found</option>';
                    return;
                }

                data.forEach(slot => {

                    let option = document.createElement('option');
                    option.value = slot.id;

                    // ✅ FIX: get date from relation
                    let date = slot.availability?.available_date ?? 'N/A';

                    // ✅ format time
                    let start = slot.slot_start_time.substring(0,5);
                    let end = slot.slot_end_time.substring(0,5);

                    // ✅ disable if booked
                    if (slot.is_booked == 1) {
                        option.disabled = true;
                    }

                    // ✅ final text
                    option.text = date + ' | ' + start + ' - ' + end ;

                    slotSelect.appendChild(option);
                });

            })
            .catch(error => {
                console.log(error);
                slotSelect.innerHTML = '<option>Error loading slots</option>';
            });

    } else {
        slotSelect.innerHTML = '<option>Select Slot</option>';
    }

});
</script>
@endsection