@extends('layouts.admin')

@section('page_kicker', 'Scheduling')
@section('page_title', 'Appointments')

@section('content')
    <div class="grid gap-6 lg:grid-cols-2">
        <div class="admin-content-card">
            <h3 class="admin-card-title">Create appointment</h3>
            <p class="admin-card-desc">Book a slot between patient and doctor.</p>
            <form method="POST" action="{{ route('hospital.appointments.store') }}" class="mt-5 grid gap-4 md:grid-cols-2">
                @csrf
                <div>
                    <label class="admin-form-label" for="patient_id">Patient user ID</label>
                    <input id="patient_id" type="number" name="patient_id" placeholder="Patient user ID" class="admin-input" required>
                </div>
                <div>
                    <label class="admin-form-label" for="doctor_id">Doctor user ID</label>
                    <input id="doctor_id" type="number" name="doctor_id" placeholder="Doctor user ID" class="admin-input" required>
                </div>
                <div class="md:col-span-2">
                    <label class="admin-form-label" for="scheduled_at">Schedule</label>
                    <input id="scheduled_at" type="datetime-local" name="scheduled_at" class="admin-input" required>
                </div>
                <div class="md:col-span-2">
                    <label class="admin-form-label" for="visit_type">Visit type</label>
                    <select id="visit_type" name="visit_type" class="admin-input">
                        @foreach(['outpatient', 'inpatient', 'followup'] as $visitType)
                            <option value="{{ $visitType }}">{{ ucfirst($visitType) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="md:col-span-2">
                    <button type="submit" class="admin-btn-primary">Schedule</button>
                </div>
            </form>
        </div>
        <div class="admin-content-card">
            <h3 class="admin-card-title">Calendar view</h3>
            <p class="admin-card-desc">Appointments are listed below; reschedule or update status inline.</p>
        </div>
    </div>

    <div class="admin-content-card mt-6">
        <h3 class="admin-card-title">All appointments</h3>
        <p class="admin-card-desc">Edit schedule and workflow state.</p>
        <div class="admin-table-wrap mt-5">
            <table class="admin-table min-w-full">
                <thead>
                    <tr>
                        <th>Patient</th>
                        <th>Doctor</th>
                        <th>Schedule</th>
                        <th>Visit type</th>
                        <th>Status</th>
                        <th>Update</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($appointments as $appointment)
                        <tr>
                            <td>{{ $appointment->patient->name ?? $appointment->patient_id }}</td>
                            <td>{{ $appointment->doctor->name ?? $appointment->doctor_id }}</td>
                            <td>{{ $appointment->scheduled_at }}</td>
                            <td>{{ $appointment->visit_type }}</td>
                            <td>{{ $appointment->status }}</td>
                            <td>
                                <form method="POST" action="{{ route('hospital.appointments.update', $appointment) }}" class="grid max-w-xs gap-2">
                                    @csrf
                                    @method('PATCH')
                                    <input type="datetime-local" name="scheduled_at" value="{{ optional($appointment->scheduled_at)->format('Y-m-d\TH:i') }}" class="admin-input text-xs py-2" required>
                                    <select name="status" class="admin-input text-xs py-2">
                                        @foreach(['scheduled', 'checked_in', 'completed', 'cancelled'] as $status)
                                            <option value="{{ $status }}" @selected($appointment->status === $status)>{{ $status }}</option>
                                        @endforeach
                                    </select>
                                    <button type="submit" class="admin-btn-secondary text-xs py-2">Save</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="mt-5 border-t border-slate-100 pt-4">{{ $appointments->links() }}</div>
    </div>
@endsection