@extends('layouts.admin')
@section('title', $patient->exists ? 'Edit Patient' : 'Add New Patient')
@section('content')
    <x-page-header :title="$patient->exists ? 'Edit Patient' : 'Add New Patient'">
        <x-slot:actions>
            <a href="{{ route('admin.patients.index') }}" class="btn btn-outline-secondary"><i class="bi bi-arrow-left"></i> Back</a>
        </x-slot:actions>
    </x-page-header>

    @if($errors->any())
        <div class="alert alert-danger">@foreach($errors->all() as $e)<div>{{ $e }}</div>@endforeach</div>
    @endif

    <form method="POST" action="{{ $patient->exists ? route('admin.patients.update', $patient) : route('admin.patients.store') }}" class="card p-4">
        @csrf
        @if($patient->exists) @method('PUT') @endif

        <h6 class="text-muted">Patient Information</h6>
        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label">Full Name *</label>
                <input type="text" name="full_name" value="{{ old('full_name', $patient->full_name) }}" class="form-control" required>
            </div>
            <div class="col-md-3">
                <label class="form-label">Phone *</label>
                <input type="text" name="phone" value="{{ old('phone', $patient->phone) }}" class="form-control" required>
            </div>
            <div class="col-md-3">
                <label class="form-label">WhatsApp</label>
                <input type="text" name="whatsapp" value="{{ old('whatsapp', $patient->whatsapp) }}" class="form-control">
            </div>
            <div class="col-md-4">
                <label class="form-label">Email</label>
                <input type="email" name="email" value="{{ old('email', $patient->email) }}" class="form-control">
            </div>
            <div class="col-md-2">
                <label class="form-label">Date of Birth</label>
                <input type="date" name="dob" value="{{ old('dob', $patient->dob?->toDateString()) }}" class="form-control">
            </div>
            <div class="col-md-2">
                <label class="form-label">Gender</label>
                <select name="gender" class="form-select">
                    <option value="">—</option>
                    @foreach(['female' => 'Female', 'male' => 'Male', 'other' => 'Other'] as $v => $l)
                        <option value="{{ $v }}" @selected(old('gender', $patient->gender) === $v)>{{ $l }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">City</label>
                <input type="text" name="city" value="{{ old('city', $patient->city) }}" class="form-control">
            </div>
            <div class="col-md-2">
                <label class="form-label">Blood Group</label>
                <input type="text" name="blood_group" value="{{ old('blood_group', $patient->blood_group) }}" class="form-control">
            </div>

            @if($patient->exists)
                <div class="col-md-4">
                    <label class="form-label">Assigned Doctor</label>
                    <select name="assigned_doctor_id" class="form-select">
                        <option value="">—</option>
                        @foreach($doctors as $doc)<option value="{{ $doc->id }}" @selected(old('assigned_doctor_id', $patient->assigned_doctor_id) == $doc->id)>{{ $doc->name }}</option>@endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">CRM Status</label>
                    <select name="crm_status" class="form-select">
                        <option value="active" @selected(old('crm_status', $patient->crm_status) === 'active')>Active</option>
                        <option value="inactive" @selected(old('crm_status', $patient->crm_status) === 'inactive')>Inactive</option>
                    </select>
                </div>
            @endif
        </div>

        <h6 class="text-muted mt-4">Clinical Background <small>(optional)</small></h6>
        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label">Allergies <small class="text-muted">(comma separated)</small></label>
                <input type="text" name="allergies" value="{{ old('allergies', is_array($patient->allergies) ? implode(', ', $patient->allergies) : '') }}" class="form-control" placeholder="e.g. Penicillin, Sulfa">
            </div>
            <div class="col-md-6">
                <label class="form-label">Conditions <small class="text-muted">(comma separated)</small></label>
                <input type="text" name="conditions" value="{{ old('conditions', is_array($patient->conditions) ? implode(', ', $patient->conditions) : '') }}" class="form-control" placeholder="e.g. Hypertension, Diabetes">
            </div>
            <div class="col-12">
                <label class="form-label">Clinical Notes</label>
                <textarea name="clinical_notes" class="form-control" rows="2">{{ old('clinical_notes', $patient->clinical_notes) }}</textarea>
            </div>
        </div>

        @unless($patient->exists)
            {{-- Patient → Doctor → Department → Clinical Disease/Diagnosis → Appointment (PDF §3) --}}
            <h6 class="text-muted mt-4">First Appointment <small>(optional — assigns directly to the doctor's dashboard)</small></h6>
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label">Department</label>
                    <select name="clinical_department_id" class="form-select">
                        <option value="">—</option>
                        @foreach($departments as $d)<option value="{{ $d->id }}" @selected(old('clinical_department_id') == $d->id)>{{ $d->name }}</option>@endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Doctor</label>
                    <select name="doctor_id" id="patient-doctor" class="form-select">
                        <option value="">—</option>
                        @foreach($doctors as $doc)<option value="{{ $doc->id }}" data-dept="{{ $doc->doctorProfile?->clinical_department_id }}" @selected(old('doctor_id') == $doc->id)>{{ $doc->name }} — {{ $doc->doctorProfile?->department?->name }}</option>@endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Clinical Disease / Diagnosis</label>
                    <select name="diagnosis_id" class="form-select">
                        <option value="">—</option>
                        @foreach($diagnoses as $dx)<option value="{{ $dx->id }}" @selected(old('diagnosis_id') == $dx->id)>{{ $dx->name }} ({{ config('clinic.currency.symbol') }}{{ number_format($dx->cost_per_sitting, 0) }}/sitting)</option>@endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Appointment Date <small class="text-muted">(required if doctor chosen)</small></label>
                    <input type="date" name="appointment_date" value="{{ old('appointment_date') }}" class="form-control" min="{{ now()->toDateString() }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Time <small class="text-muted">(optional)</small></label>
                    <input type="time" name="appointment_time" value="{{ old('appointment_time') }}" class="form-control">
                </div>
            </div>

            <h6 class="text-muted mt-4">Medication History <small>(optional)</small></h6>
            <div id="medRows"></div>
            <button type="button" class="btn btn-sm btn-outline-secondary mt-2" id="addMed"><i class="bi bi-plus"></i> Add Medication</button>
        @endunless

        <div class="mt-4">
            <button type="submit" class="btn btn-primary">{{ $patient->exists ? 'Update Patient' : 'Create Patient' }}</button>
        </div>
    </form>

    @push('scripts')
    <script>
    (function () {
        // doctor -> auto department
        const doc = document.getElementById('patient-doctor');
        if (doc) doc.addEventListener('change', function () {
            const dept = this.selectedOptions[0]?.dataset.dept;
            const deptSel = document.querySelector('[name="clinical_department_id"]');
            if (dept && deptSel) deptSel.value = dept;
        });
        // medication rows
        const wrap = document.getElementById('medRows');
        const add = document.getElementById('addMed');
        let i = 0;
        function row(n) {
            const div = document.createElement('div');
            div.className = 'row g-2 mb-2';
            div.innerHTML = `
                <div class="col-md-4"><input class="form-control" name="medications[${n}][medication_name]" placeholder="Medication name"></div>
                <div class="col-md-4"><input class="form-control" name="medications[${n}][indication]" placeholder="Indication"></div>
                <div class="col-md-3"><input class="form-control" name="medications[${n}][dosage_frequency]" placeholder="Dosage / frequency"></div>
                <div class="col-md-1"><button type="button" class="btn btn-outline-danger" onclick="this.closest('.row').remove()">&times;</button></div>`;
            return div;
        }
        if (add) add.addEventListener('click', () => wrap.appendChild(row(i++)));
    })();
    </script>
    @endpush
@endsection