@extends('layouts.app')
@section('content')
<h2 class="mb-3">Book Appointment</h2>
<form method="POST" action="{{ route('appointments.store') }}" class="card card-body shadow-sm">
@csrf
<div class="row">
<div class="col-md-6 mb-3"><label class="form-label">Doctor</label><select name="doctor_id" id="doctor_id" class="form-select" required><option value="">Select Doctor</option>@foreach($doctors as $doctor)<option value="{{ $doctor->id }}">{{ $doctor->user->name }} - {{ $doctor->specialty->name }}</option>@endforeach</select></div>
<div class="col-md-6 mb-3"><label class="form-label">Patient</label><select name="patient_id" class="form-select" required><option value="">Select Patient</option>@foreach($patients as $patient)<option value="{{ $patient->id }}">{{ $patient->user->name }} ({{ $patient->patient_code }})</option>@endforeach</select></div>
<div class="col-md-6 mb-3"><label class="form-label">Appointment Date</label><input type="date" name="appointment_date" id="appointment_date" class="form-control" min="{{ now()->format('Y-m-d') }}" required></div>
<div class="col-md-6 mb-3"><label class="form-label">Available Slot</label><select name="slot" id="slot" class="form-select" required disabled><option>Select doctor and date first</option></select><input type="hidden" name="start_time" id="start_time"><input type="hidden" name="end_time" id="end_time"></div>
<div class="col-md-6 mb-3"><label class="form-label">Consultation Type</label><select name="consultation_type" class="form-select"><option value="online">Online</option><option value="offline">Offline</option></select></div>
<div class="col-12 mb-3"><label class="form-label">Reason</label><textarea name="reason" class="form-control"></textarea></div>
</div>
<button class="btn btn-primary">Book Appointment</button>
</form>
<script>
const doctor = document.getElementById('doctor_id');
const date = document.getElementById('appointment_date');
const slot = document.getElementById('slot');
const start = document.getElementById('start_time');
const end = document.getElementById('end_time');

async function loadSlots() {
    if (!doctor.value || !date.value) return;
    slot.disabled = true;
    slot.innerHTML = '<option>Loading slots...</option>';

    const response = await fetch(`{{ route('appointments.slots') }}?doctor_id=${doctor.value}&date=${date.value}`);
    const data = await response.json();

    slot.innerHTML = '';
    if (!data.slots.length) {
        slot.innerHTML = '<option>No available slots</option>';
        return;
    }

    slot.innerHTML = '<option value="">Select Slot</option>';
    data.slots.forEach(item => {
        const option = document.createElement('option');
        option.value = `${item.start_time}|${item.end_time}`;
        option.textContent = `${item.start_time} - ${item.end_time}`;
        slot.appendChild(option);
    });
    slot.disabled = false;
}

doctor.addEventListener('change', loadSlots);
date.addEventListener('change', loadSlots);
slot.addEventListener('change', function () {
    const [startTime, endTime] = this.value.split('|');
    start.value = startTime || '';
    end.value = endTime || '';
});
</script>
@endsection