@extends('layouts.app')
@section('title', 'New Appointment')
@section('content')
<div class="max-w-3xl mx-auto">
    <form method="POST" action="{{ route('appointments.store') }}">
        @csrf
        <div class="bg-white rounded-xl border border-gray-200 p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

                <!-- Patient Search -->
                <div class="md:col-span-2">
                    <label class="form-label">Patient <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <svg class="w-4 h-4 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                        {{-- preselectedPatient is set when this form is opened with
                             ?patient_id=X (e.g. from the ANC encounter's "Book Next
                             Appointment" button). The search input shows the
                             patient's name as text the user can edit, and the
                             hidden input carries the id forward to submit. --}}
                        <input type="text"
                               class="form-input pl-9 patient-search"
                               data-target="patient_id"
                               placeholder="Type patient name, MRN, or phone..."
                               value="{{ $preselectedPatient ? ($preselectedPatient->full_name . ' · ' . ($preselectedPatient->mrn ?? '—')) : '' }}"
                               autocomplete="off">
                        <input type="hidden" name="patient_id" id="patient_id" required
                               value="{{ $preselectedPatient->id ?? '' }}">
                    </div>
                    <p class="text-xs text-gray-400 mt-1">
                        @if($preselectedPatient)
                            Pre-selected from ANC encounter. Clear the box to choose a different patient.
                        @else
                            Start typing to search registered patients
                        @endif
                    </p>
                </div>

                <div>
                    <label class="form-label">Department <span class="text-red-500">*</span></label>
                    {{-- Lab and Radiology excluded: those open direct
                         encounters (no consultation), not appointments.
                         Their walk-ins are booked from the Queue page's
                         Start New Visit button instead. --}}
                    <select name="department_id" required class="form-input">
                        <option value="">Select department</option>
                        @include('partials._department-options', ['excludeDirect' => true])
                    </select>
                </div>

                <div>
                    <label class="form-label">Preferred Clinician</label>
                    {{-- Pool restricted to people who see patients
                         (Clinician / Nurse / Triage Nurse / Dental User)
                         via the standard clinician partial. --}}
                    <select name="clinician_id" class="form-input">
                        <option value="">Any available</option>
                        @include('partials._clinician-options')
                    </select>
                </div>

                <div>
                    <label class="form-label">Appointment Date <span class="text-red-500">*</span></label>
                    {{-- placeholder="dd/mm/yyyy" gives the user a visible
                         hint of the expected date shape when the field
                         is empty. Flatpickr propagates this placeholder
                         attribute to its visible altInput on init, so
                         the hint shows in the picker that the user
                         actually interacts with. --}}
                    <input type="date" name="appointment_date" required min="{{ date('Y-m-d') }}"
                           value="{{ $preselectedDate ?? '' }}"
                           placeholder="dd/mm/yyyy"
                           class="form-input">
                </div>

                <div>
                    <label class="form-label">Appointment Time</label>
                    <input type="time" name="appointment_time" class="form-input">
                </div>

                <div>
                    <label class="form-label">Visit Type <span class="text-red-500">*</span></label>
                    <select name="type" required class="form-input">
                        <option value="consultation">General Consultation</option>
                        <option value="revisit">Revisit / Follow-up</option>
                        <option value="procedure">Procedure</option>
                        <option value="lab">Lab Only</option>
                        <option value="imaging">Imaging Only</option>
                    </select>
                </div>

                <div class="md:col-span-2">
                    <label class="form-label">Reason / Notes</label>
                    <textarea name="reason" class="form-input" rows="2" placeholder="Brief reason for visit..."></textarea>
                </div>
            </div>

            <div class="mt-6 flex gap-3 border-t border-gray-100 pt-5">
                <button type="submit" class="btn-success flex items-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                    Book Appointment
                </button>
                <a href="{{ route('appointments.index') }}" class="btn-secondary">Cancel</a>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
    // Safety net for the "Appointment Date" placeholder.
    //
    // Flatpickr's altInput inherits the placeholder of the original
    // input by default, so the placeholder="dd/mm/yyyy" attribute on
    // the date input would normally just work. We re-apply it here
    // after Flatpickr has initialised to defend against version
    // differences and any later attribute resets — the cost is zero
    // when it's already correct, and it guarantees the user always
    // sees the hint on an empty field.
    document.addEventListener('DOMContentLoaded', function () {
        const dateInput = document.querySelector('input[name="appointment_date"]');
        if (!dateInput) return;
        // After Flatpickr swaps to altInput, the original input is
        // hidden and the visible field is its immediate next sibling.
        const altInput = dateInput.nextElementSibling;
        if (altInput && altInput.tagName === 'INPUT') {
            altInput.setAttribute('placeholder', 'dd/mm/yyyy');
        } else {
            // Flatpickr did not run (e.g. CDN blocked). Fall back to
            // making the native input itself behave usefully — when
            // empty, render as text so the placeholder shows; on
            // focus or non-empty value, switch to type=date so the
            // native picker is available.
            const swapToDate = () => { dateInput.type = 'date'; };
            const swapToText = () => {
                if (!dateInput.value) {
                    dateInput.type = 'text';
                    dateInput.setAttribute('placeholder', 'dd/mm/yyyy');
                }
            };
            swapToText();
            dateInput.addEventListener('focus', swapToDate);
            dateInput.addEventListener('blur', swapToText);
        }
    });
</script>
@endpush
@endsection