@extends('layouts.app')

@section('title', 'زيارة جديدة - ' . $patient->full_name)

@section('content')
<div class="clinic-hero" data-tone="records">
    <div class="position-relative d-flex flex-wrap align-items-center gap-3">
        <span class="hero-icon"><i class="ti ti-stethoscope"></i></span>
        <div class="flex-grow-1 min-w-0">
            <div class="hero-subtitle mb-1">
                زيارة جديدة لـ <bdi class="text-mono-en">{{ $patient->file_number }}</bdi>
            </div>
            <div class="hero-title">{{ $patient->full_name }}</div>
            <div class="d-flex flex-wrap gap-2 mt-2">
                <span class="badge bg-white text-dark bg-opacity-90">
                    <i class="ti {{ $patient->gender === 'female' ? 'ti-venus' : 'ti-mars' }} me-1"></i>
                    {{ $patient->gender === 'female' ? 'أنثى' : 'ذكر' }}
                </span>
                @if($patient->age !== null)
                    <span class="badge bg-white text-dark bg-opacity-90">
                        <i class="ti ti-cake me-1"></i> {{ $patient->age }} سنة
                    </span>
                @endif
                @if($patient->blood_type)
                    <span class="badge bg-red text-white"><i class="ti ti-droplet me-1"></i> {{ $patient->blood_type }}</span>
                @endif
                <span class="badge bg-white text-dark bg-opacity-90">
                    <i class="ti ti-calendar me-1"></i> <bdi class="text-mono-en">{{ now()->format('Y-m-d') }}</bdi>
                </span>
            </div>
        </div>
        <div class="hero-actions d-flex flex-wrap gap-2 align-items-center">
            <span id="autosaveStatus" class="badge bg-white text-dark bg-opacity-90"></span>
            <a href="{{ route('patients.show', $patient) }}" class="btn btn-outline-light">
                <i class="ti ti-arrow-right me-1"></i> رجوع للملف
            </a>
            <button type="button" class="btn btn-outline-light" id="saveDraftBtn">
                <i class="ti ti-device-floppy me-1"></i> مسودة
            </button>
            <button type="button" class="btn btn-light" id="saveBtn">
                <i class="ti ti-check me-1"></i> حفظ الزيارة
            </button>
        </div>
    </div>
</div>

<form id="visitForm">
    @csrf
    <input type="hidden" name="patient_id" value="{{ $patient->id }}">

    <div class="row row-cards">
        <div class="col-lg-9">
            {{-- Vitals --}}
            <div class="card clinic-section visit-section">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="ti ti-heart me-1 text-danger"></i> العلامات الحيوية
                    </h3>
                </div>
                <div class="card-body">
                    <div class="row g-2">
                        @php
                            $vs = [
                                'bp_systolic'  => ['label' => 'الضغط الانقباضي', 'icon' => 'ti-arrow-up-bar',     'unit' => 'mmHg'],
                                'bp_diastolic' => ['label' => 'الضغط الانبساطي', 'icon' => 'ti-arrow-down-bar', 'unit' => 'mmHg'],
                                'heart_rate'   => ['label' => 'النبض',           'icon' => 'ti-heartbeat',        'unit' => 'bpm'],
                                'temperature'  => ['label' => 'الحرارة',         'icon' => 'ti-temperature',      'unit' => '°C'],
                                'weight'       => ['label' => 'الوزن',           'icon' => 'ti-weight',           'unit' => 'كجم'],
                                'height'       => ['label' => 'الطول',           'icon' => 'ti-ruler',            'unit' => 'سم'],
                                'o2'           => ['label' => 'الأكسجين',        'icon' => 'ti-lungs',            'unit' => '%'],
                                'rr'           => ['label' => 'التنفس',          'icon' => 'ti-wind',             'unit' => 'rpm'],
                            ];
                        @endphp
                        @foreach($vs as $k => $meta)
                            <div class="col-md-3 col-sm-6">
                                <label class="form-label small mb-1">
                                    <i class="ti {{ $meta['icon'] }} me-1 text-muted"></i> {{ $meta['label'] }}
                                </label>
                                <div class="input-group input-group-sm">
                                    <input type="number" step="0.1" name="vital_signs[{{ $k }}]" class="form-control" placeholder="—">
                                    <span class="input-group-text small">{{ $meta['unit'] }}</span>
                                </div>
                            </div>
                        @endforeach
                        <div class="col-md-3 col-sm-6">
                            <label class="form-label small mb-1">
                                <i class="ti ti-calculator me-1 text-muted"></i> BMI <span class="text-muted">(تلقائي)</span>
                            </label>
                            <div class="input-group input-group-sm">
                                <input type="text" id="bmiOut" class="form-control fw-semibold" readonly placeholder="—">
                                <span class="input-group-text small" id="bmiCategory"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Chief Complaint + HPI --}}
            <div class="card clinic-section visit-section mt-3">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="ti ti-message-circle me-1 text-primary"></i> الشكوى والتاريخ المرضي
                    </h3>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label required">الشكوى الرئيسية</label>
                        <textarea name="chief_complaint" class="form-control" rows="2" required placeholder="ما الذي أحضر المريض اليوم؟"></textarea>
                        <div class="invalid-feedback d-block" data-field-error="chief_complaint"></div>
                    </div>
                    <div class="mb-0">
                        <label class="form-label">تاريخ المرض الحالي</label>
                        <textarea name="history_of_present_illness" class="form-control" rows="3" placeholder="بداية الأعراض، التطور، العوامل المؤثرة..."></textarea>
                    </div>
                </div>
            </div>

            {{-- Examination --}}
            <div class="card clinic-section visit-section mt-3">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="ti ti-zoom-scan me-1 text-info"></i> الفحص الإكلينيكي
                    </h3>
                </div>
                <div class="card-body">
                    <textarea name="examination_findings" class="form-control" rows="4" placeholder="نتائج الفحص بالأنظمة..."></textarea>
                </div>
            </div>

            {{-- Diagnosis --}}
            <div class="card clinic-section visit-section mt-3">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="ti ti-clipboard-check me-1 text-warning"></i> التشخيص
                    </h3>
                </div>
                <div class="card-body">
                    <label class="form-label">أكواد التشخيص (ICD-10)</label>
                    <div class="position-relative">
                        <input type="text" id="diagnosisSearch" class="form-control" placeholder="ابحث عن كود تشخيص أو اسم...">
                        <div class="dropdown-menu w-100 p-0" id="diagnosisResults" style="max-height:240px; overflow-y:auto;"></div>
                    </div>
                    <div id="diagnosisChips" class="mt-2"></div>
                    <div class="mt-3">
                        <label class="form-label">ملاحظات التشخيص</label>
                        <textarea name="diagnosis" class="form-control" rows="2" placeholder="تفاصيل أو ملاحظات إضافية..."></textarea>
                    </div>
                </div>
            </div>

            {{-- Treatment Plan --}}
            <div class="card clinic-section visit-section mt-3">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="ti ti-target me-1 text-success"></i> خطة العلاج
                    </h3>
                </div>
                <div class="card-body">
                    <textarea name="treatment_plan" class="form-control" rows="4" placeholder="الإجراءات، التحويلات، التحاليل المطلوبة..."></textarea>
                </div>
            </div>

            {{-- Prescription --}}
            <div class="card clinic-section visit-section mt-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title mb-0">
                        <i class="ti ti-prescription me-1" style="color:#8b5cf6;"></i> الوصفة الطبية
                    </h3>
                    <button type="button" class="btn btn-sm btn-outline-primary" id="addRxRow">
                        <i class="ti ti-plus me-1"></i> إضافة دواء
                    </button>
                </div>
                <div class="table-responsive">
                    <table class="table align-middle mb-0" id="rxTable">
                        <thead class="bg-light">
                            <tr>
                                <th style="min-width: 220px;">الدواء</th>
                                <th style="min-width: 110px;">الجرعة</th>
                                <th style="min-width: 140px;">التكرار</th>
                                <th style="min-width: 110px;">المدة</th>
                                <th>تعليمات</th>
                                <th style="width: 50px;"></th>
                            </tr>
                        </thead>
                        <tbody id="rxRows"></tbody>
                    </table>
                </div>
                <div class="card-body border-top">
                    <label class="form-label">ملاحظات الوصفة</label>
                    <textarea name="prescription_notes" class="form-control" rows="2" placeholder="تعليمات عامة على الوصفة..."></textarea>
                </div>
            </div>

            {{-- Follow-up --}}
            <div class="card clinic-section visit-section mt-3">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="ti ti-calendar-event me-1 text-primary"></i> المتابعة
                    </h3>
                </div>
                <div class="card-body">
                    <div class="row g-2">
                        <div class="col-md-4">
                            <label class="form-label">تاريخ المتابعة</label>
                            <input type="date" name="follow_up_date" class="form-control" min="{{ now()->addDay()->toDateString() }}">
                        </div>
                        <div class="col-md-8">
                            <label class="form-label">تعليمات المتابعة</label>
                            <input type="text" name="follow_up_instructions" class="form-control" placeholder="ما الذي يجب على المريض فعله قبل الزيارة القادمة؟">
                        </div>
                    </div>
                </div>
            </div>

            {{-- Footer save buttons (mobile-friendly) --}}
            <div class="d-flex justify-content-end gap-2 mt-3 d-lg-none">
                <button type="button" class="btn btn-outline-secondary" id="saveDraftBtnMobile"><i class="ti ti-device-floppy me-1"></i> مسودة</button>
                <button type="button" class="btn btn-primary" id="saveBtnMobile"><i class="ti ti-check me-1"></i> حفظ الزيارة</button>
            </div>
        </div>

        {{-- Sticky right panel --}}
        <div class="col-lg-3">
            <div class="position-sticky" style="top: 90px;">
                @if($patient->allergies)
                    <x-alert type="danger" title="حساسية" :message="$patient->allergies" :dismissible="false" icon="ti-alert-triangle" />
                @endif

                <div class="card clinic-section">
                    <div class="card-body text-center">
                        @if($patient->photo)
                            <img src="{{ Storage::disk('public')->url($patient->photo) }}" class="avatar avatar-xl rounded-circle mb-2">
                        @else
                            <span class="avatar avatar-xl rounded-circle clinic-avatar-initials mb-2">
                                {{ mb_substr($patient->first_name,0,1) }}{{ mb_substr($patient->last_name,0,1) }}
                            </span>
                        @endif
                        <div class="fw-bold">{{ $patient->full_name }}</div>
                        <div class="small text-muted">
                            <bdi class="text-mono-en">{{ $patient->file_number }}</bdi>
                            @if($patient->phone) · <bdi class="text-mono-en">{{ $patient->phone }}</bdi>@endif
                        </div>
                        @if($patient->age !== null || $patient->blood_type)
                            <div class="mt-2 d-flex flex-wrap gap-1 justify-content-center">
                                @if($patient->age !== null)
                                    <span class="badge bg-secondary-lt">{{ $patient->age }} سنة</span>
                                @endif
                                <span class="badge bg-{{ $patient->gender === 'female' ? 'pink' : 'azure' }}-lt">
                                    {{ $patient->gender === 'female' ? 'أنثى' : 'ذكر' }}
                                </span>
                                @if($patient->blood_type)
                                    <span class="badge bg-red-lt">{{ $patient->blood_type }}</span>
                                @endif
                            </div>
                        @endif
                    </div>
                </div>

                @if($patient->chronic_diseases)
                    <div class="card clinic-section mt-3">
                        <div class="card-header py-2">
                            <h4 class="card-title mb-0 small"><i class="ti ti-heartbeat me-1 text-warning"></i> أمراض مزمنة</h4>
                        </div>
                        <div class="card-body py-2">
                            <p class="small text-muted mb-0">{{ $patient->chronic_diseases }}</p>
                        </div>
                    </div>
                @endif

                @if($patient->current_medications)
                    <div class="card clinic-section mt-3">
                        <div class="card-header py-2">
                            <h4 class="card-title mb-0 small"><i class="ti ti-pill me-1 text-info"></i> أدوية حالية</h4>
                        </div>
                        <div class="card-body py-2">
                            <p class="small text-muted mb-0">{{ $patient->current_medications }}</p>
                        </div>
                    </div>
                @endif

                @if($patient->medicalRecords->isNotEmpty())
                    <div class="card clinic-section mt-3">
                        <div class="card-header py-2">
                            <h4 class="card-title mb-0 small"><i class="ti ti-history me-1 text-primary"></i> آخر زيارات</h4>
                        </div>
                        <div class="list-group list-group-flush">
                            @foreach($patient->medicalRecords as $r)
                                <a href="{{ route('medical-records.show', $r) }}" class="list-group-item list-group-item-action py-2">
                                    <div class="small fw-semibold"><bdi class="text-mono-en">{{ $r->visit_date->format('Y-m-d') }}</bdi></div>
                                    <div class="small text-muted">{{ Str::limit($r->diagnosis ?: $r->chief_complaint, 50) }}</div>
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
(function () {
    const $form = $('#visitForm');
    let dxSearchTimer, autosaveTimer, rxSearchTimer;
    const diagnosisCodes = new Set();

    /* ----- BMI auto-calc with category badge ----- */
    function bmi() {
        const w = parseFloat($form.find('[name="vital_signs[weight]"]').val());
        const h = parseFloat($form.find('[name="vital_signs[height]"]').val());
        if (w && h) {
            const v = w / Math.pow(h / 100, 2);
            $('#bmiOut').val(v.toFixed(1));
            const [cat, color] = v < 18.5 ? ['نقص وزن', 'text-info']
                : v < 25 ? ['طبيعي', 'text-success']
                : v < 30 ? ['زيادة وزن', 'text-warning']
                : ['سمنة', 'text-danger'];
            $('#bmiCategory').removeClass('text-info text-success text-warning text-danger').addClass(color).text(cat);
        } else {
            $('#bmiOut').val(''); $('#bmiCategory').text('');
        }
    }
    $form.on('input', '[name="vital_signs[weight]"], [name="vital_signs[height]"]', bmi);

    /* ----- Diagnosis ICD-10 search ----- */
    $('#diagnosisSearch').on('input', function () {
        clearTimeout(dxSearchTimer);
        const $input = $(this);
        const q = $input.val();
        if (q.length < 2) { $('#diagnosisResults').empty().removeClass('show'); return; }
        dxSearchTimer = setTimeout(() => {
            $.getJSON(@json(route('autocomplete.diagnoses')), { q }).done(res => {
                $('#diagnosisResults').html(res.data.map(d => `
                    <a href="#" class="dropdown-item" data-code="${d.code}" data-name="${d.name_ar}">
                        <strong>${d.code}</strong> — ${d.name_ar}
                    </a>
                `).join('') || '<div class="dropdown-item-text text-muted">لا توجد نتائج</div>').addClass('show');
            });
        }, 250);
    });
    $(document).on('click', '#diagnosisResults [data-code]', function (e) {
        e.preventDefault();
        const code = $(this).data('code'); const name = $(this).data('name');
        if (diagnosisCodes.has(code)) return;
        diagnosisCodes.add(code);
        $('#diagnosisChips').append(`
            <span class="badge bg-blue-lt me-1 mb-1 dx-chip" data-dx="${code}">
                <strong>${code}</strong> — ${name}
                <input type="hidden" name="diagnosis_codes[]" value="${code}">
                <a href="#" class="ms-2 text-danger fw-bold" data-remove-dx="${code}">×</a>
            </span>
        `);
        $('#diagnosisSearch').val('');
        $('#diagnosisResults').empty().removeClass('show');
    });
    $(document).on('click', '[data-remove-dx]', function (e) {
        e.preventDefault();
        const code = $(this).data('remove-dx');
        diagnosisCodes.delete(code);
        $(`[data-dx="${code}"]`).remove();
    });
    $(document).on('click', function (e) {
        if (!$(e.target).closest('#diagnosisSearch, #diagnosisResults').length) {
            $('#diagnosisResults').removeClass('show');
        }
    });

    /* ----- Prescription rows ----- */
    let rxIdx = 0;
    function addRxRow(prefill = {}) {
        const i = rxIdx++;
        const row = `
            <tr data-row="${i}">
                <td>
                    <div class="position-relative">
                        <input type="text" class="form-control form-control-sm rx-name" name="prescription_items[${i}][medication_name]" value="${prefill.medication_name || ''}" placeholder="ابحث...">
                        <div class="dropdown-menu w-100 p-0 rx-results" style="max-height:200px;overflow-y:auto;"></div>
                    </div>
                </td>
                <td><input type="text" class="form-control form-control-sm" name="prescription_items[${i}][dosage]" placeholder="قرص"></td>
                <td>
                    <select class="form-select form-select-sm" name="prescription_items[${i}][frequency]">
                        <option value="">—</option>
                        <option>مرة يومياً</option><option>مرتين يومياً</option><option>3 مرات يومياً</option>
                        <option>4 مرات يومياً</option><option>كل 6 ساعات</option><option>كل 8 ساعات</option><option>حسب الحاجة</option>
                    </select>
                </td>
                <td><input type="text" class="form-control form-control-sm" name="prescription_items[${i}][duration]" placeholder="7 أيام"></td>
                <td><input type="text" class="form-control form-control-sm" name="prescription_items[${i}][instructions]" placeholder="بعد الأكل"></td>
                <td><button type="button" class="btn btn-sm btn-outline-danger" data-remove-rx><i class="ti ti-x"></i></button></td>
            </tr>`;
        $('#rxRows').append(row);
    }
    addRxRow();
    $('#addRxRow').on('click', () => addRxRow());
    $(document).on('click', '[data-remove-rx]', function () {
        if ($('#rxRows tr').length > 1) { $(this).closest('tr').remove(); }
        else { Notify.warning('احذف السطر بدلاً من تركه فارغاً.'); }
    });

    /* ----- Medication name autocomplete ----- */
    $(document).on('input', '.rx-name', function () {
        const $input = $(this);
        const $results = $input.siblings('.rx-results');
        clearTimeout(rxSearchTimer);
        const q = $input.val();
        if (q.length < 2) { $results.empty().removeClass('show'); return; }
        rxSearchTimer = setTimeout(() => {
            $.getJSON(@json(route('autocomplete.medications')), { q }).done(res => {
                $results.html(res.data.map(m => `
                    <a href="#" class="dropdown-item" data-mname="${m.name}" data-mstrength="${m.strength || ''}" data-mdose="${m.default_dosage || ''}" data-mfreq="${m.default_frequency || ''}">
                        <strong>${m.name}</strong> ${m.strength || ''} <span class="text-muted">(${m.form})</span>
                    </a>
                `).join('') || '<div class="dropdown-item-text text-muted">لا توجد نتائج</div>').addClass('show');
            });
        }, 250);
    });
    $(document).on('click', '.rx-results [data-mname]', function (e) {
        e.preventDefault();
        const $row = $(this).closest('tr');
        $row.find('.rx-name').val(($(this).data('mname') || '') + ' ' + ($(this).data('mstrength') || ''));
        if ($(this).data('mdose')) $row.find('[name*="[dosage]"]').val($(this).data('mdose'));
        if ($(this).data('mfreq')) $row.find('[name*="[frequency]"]').val($(this).data('mfreq'));
        $(this).closest('.rx-results').empty().removeClass('show');
    });
    $(document).on('click', function (e) {
        if (!$(e.target).closest('.rx-name, .rx-results').length) {
            $('.rx-results').removeClass('show');
        }
    });

    /* ----- Save handlers ----- */
    function applyValidationErrors(xhr) {
        $form.find('.is-invalid').removeClass('is-invalid');
        $form.find('[data-field-error]').text('');
        if (xhr.status === 422 && xhr.responseJSON?.errors) {
            Object.entries(xhr.responseJSON.errors).forEach(([f, m]) => {
                $form.find(`[name="${f}"]`).addClass('is-invalid');
                $form.find(`[data-field-error="${f}"]`).text(m[0]);
            });
            // Scroll to the first error
            const $first = $form.find('.is-invalid').first();
            if ($first.length) {
                $('html, body').animate({ scrollTop: $first.offset().top - 120 }, 300);
            }
        }
    }

    function setBusy($btn, busy) {
        $btn.prop('disabled', busy);
        if (busy) {
            $btn.data('original-html', $btn.html());
            $btn.html('<span class="spinner-border spinner-border-sm me-1"></span> جارٍ الحفظ...');
        } else if ($btn.data('original-html')) {
            $btn.html($btn.data('original-html'));
        }
    }

    function submit($btn, extra = {}) {
        const data = $form.serializeArray();
        Object.entries(extra).forEach(([k, v]) => data.push({ name: k, value: v }));
        setBusy($btn, true);
        return $.ajax({
            url: @json(route('medical-records.store')),
            method: 'POST',
            data, globalErrorHandled: true,
        }).always(() => setBusy($btn, false));
    }

    function bindSave(selector, opts = {}) {
        $(selector).on('click', function () {
            const $btn = $(this);
            submit($btn, opts.extra || {})
                .done(res => {
                    Notify.success(res.message || 'تم الحفظ.');
                    if (opts.afterSave) { opts.afterSave(res); return; }
                    if (res.redirect) { window.location.href = res.redirect; }
                })
                .fail(xhr => { applyValidationErrors(xhr); Notify.error(xhr.responseJSON?.message || 'تعذر الحفظ.'); });
        });
    }

    bindSave('#saveBtn, #saveBtnMobile');
    bindSave('#saveDraftBtn, #saveDraftBtnMobile', { extra: { is_draft: 1 }, afterSave: () => {} });

    /* ----- Autosave to cache every 30s ----- */
    autosaveTimer = setInterval(() => {
        $.post(@json(route('medical-records.autosave')), $form.serialize())
            .done(res => $('#autosaveStatus').html(`<i class="ti ti-cloud-check me-1"></i> حفظ تلقائي · ${new Date(res.saved_at).toLocaleTimeString('ar-EG')}`));
    }, 30000);
})();
</script>
@endpush