@extends('layouts.app')

@section('title', 'الوصفات الطبية')

@push('head')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
<style>
    /* Polish Select2 to match Bootstrap form-controls. */
    .select2-container .select2-selection--single { height: 38px; padding: 4px 10px; border-color: #e2e8f0; }
    .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 28px; }
    .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
    .select2-dropdown { border-color: #e2e8f0; }
</style>
@endpush

@section('content')
<x-clinic-hero
    title="الوصفات الطبية"
    subtitle="كل الوصفات الصادرة من العيادة — جاهزة للطباعة"
    icon="ti-prescription"
    tone="prescriptions"
    :stats="[
        ['icon' => 'ti-stack', 'value' => number_format($stats['total']), 'label' => 'إجمالي'],
        ['icon' => 'ti-calendar-month', 'value' => $stats['this_month'], 'label' => 'هذا الشهر'],
        ['icon' => 'ti-calendar-week', 'value' => $stats['this_week'], 'label' => 'هذا الأسبوع'],
        ['icon' => 'ti-sparkles', 'value' => $stats['today'], 'label' => 'اليوم'],
    ]"
>
    <x-slot:actions>
        @can('prescriptions.create')
            <button type="button" class="btn btn-light"
                    data-bs-toggle="modal" data-bs-target="#rxCreateModal">
                <i class="ti ti-plus me-1"></i> وصفة جديدة
            </button>
        @endcan
    </x-slot:actions>
</x-clinic-hero>

<div class="card clinic-section">
    <div class="card-header">
        <h3 class="card-title"><i class="ti ti-list me-1"></i> آخر الوصفات</h3>
    </div>
    @if($prescriptions->isEmpty())
        <div class="card-body">
            <div class="empty-card-rich">
                <i class="ti ti-prescription"></i>
                <h3>لا توجد وصفات بعد</h3>
                <p>الوصفات الجديدة تظهر هنا تلقائياً عند إنشائها من سجل الزيارة.</p>
            </div>
        </div>
    @else
        <div class="table-responsive">
            <table class="table table-vcenter clinic-table mb-0">
                <thead>
                    <tr>
                        <th>الرقم</th>
                        <th>المريض</th>
                        <th>الطبيب</th>
                        <th>التاريخ</th>
                        <th class="w-1 text-end">الإجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($prescriptions as $rx)
                        @php
                            $name = trim(($rx->patient->first_name ?? '').' '.($rx->patient->last_name ?? ''));
                            $initials = collect(preg_split('/\s+/u', $name))
                                ->filter()->take(2)
                                ->map(fn ($w) => mb_substr($w, 0, 1))
                                ->implode('') ?: '؟';
                            $genderClass = ($rx->patient->gender ?? null) === 'female' ? 'gender-female' : '';
                        @endphp
                        <tr>
                            <td><code class="text-mono-en">{{ $rx->prescription_number ?? '#'.$rx->id }}</code></td>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <span class="entity-avatar {{ $genderClass }}">{{ $initials }}</span>
                                    <div>
                                        <a href="{{ route('patients.show', $rx->patient_id) }}" class="text-reset text-decoration-none">
                                            <strong>{{ $name ?: '—' }}</strong>
                                        </a>
                                        @if($rx->patient?->file_number)
                                            <div class="small text-muted">
                                                <code class="text-mono-en">{{ $rx->patient->file_number }}</code>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span class="status-pill bg-info-lt text-info">
                                    <i class="ti ti-stethoscope"></i> د. {{ $rx->doctor?->name ?? '—' }}
                                </span>
                            </td>
                            <td>
                                <div>{{ $rx->issued_at?->translatedFormat('j M Y') }}</div>
                                <div class="small text-muted">{{ $rx->issued_at?->diffForHumans() }}</div>
                            </td>
                            <td class="text-end">
                                <div class="btn-list flex-nowrap justify-content-end">
                                    <a href="{{ route('prescriptions.show', $rx) }}" class="btn btn-sm btn-icon btn-outline-primary" title="عرض">
                                        <i class="ti ti-eye"></i>
                                    </a>
                                    <a href="{{ route('prescriptions.print', $rx) }}" target="_blank"
                                       class="btn btn-sm btn-icon btn-outline-secondary" title="طباعة">
                                        <i class="ti ti-printer"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @if($prescriptions->hasPages())
            <div class="card-footer">
                {{ $prescriptions->links() }}
            </div>
        @endif
    @endif
</div>

{{-- ============================================================ --}}
{{-- New prescription modal                                        --}}
{{-- ============================================================ --}}
<div class="modal fade" id="rxCreateModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <form id="rxCreateForm" class="modal-content">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title"><i class="ti ti-prescription me-1"></i> وصفة طبية جديدة</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label required">المريض</label>
                        <select name="patient_id" id="rxPatient" class="form-select" required>
                            <option value="">— اختر المريض —</option>
                        </select>
                        <div class="form-hint">ابدأ بكتابة الاسم أو رقم الملف للبحث.</div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label required">الطبيب</label>
                        <select name="doctor_id" id="rxDoctor" class="form-select" required>
                            <option value="">— اختر —</option>
                            @foreach($doctors as $d)
                                <option value="{{ $d->id }}"
                                        data-name="{{ $d->name }}"
                                        data-specialization="{{ $d->specialization }}"
                                        {{ auth('web')->user()?->isDoctor() && auth('web')->id() === $d->id ? 'selected' : '' }}>
                                    د. {{ $d->name }}@if($d->specialization) — {{ $d->specialization }}@endif
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">التاريخ</label>
                        <input type="date" name="issued_at" class="form-control" value="{{ now()->toDateString() }}">
                    </div>
                </div>

                <hr class="my-3">

                <div class="d-flex justify-content-between align-items-center mb-2">
                    <h6 class="text-muted mb-0"><i class="ti ti-pills me-1"></i> الأدوية</h6>
                    <button type="button" class="btn btn-sm btn-outline-primary" id="rxAddItem">
                        <i class="ti ti-plus me-1"></i> إضافة دواء
                    </button>
                </div>

                <div id="rxItems"></div>

                <hr class="my-3">

                <label class="form-label"><i class="ti ti-note me-1"></i> ملاحظات على الوصفة (اختياري)</label>
                <textarea name="notes" class="form-control" rows="2" maxlength="1000"
                          placeholder="مثال: الحضور للمتابعة بعد أسبوع"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-link" data-bs-dismiss="modal">إلغاء</button>
                <button type="submit" class="btn btn-primary">
                    <i class="ti ti-check me-1"></i> حفظ الوصفة
                </button>
            </div>
        </form>
    </div>
</div>

{{-- Hidden template for one prescription-item row. Cloned by JS. --}}
<template id="rxItemTpl">
    <div class="rx-item p-3 mb-2" style="border:1px solid #e2e8f0;border-radius:.55rem;background:#f8fafc;">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <strong class="rx-item-num text-muted small">دواء #1</strong>
            <button type="button" class="btn btn-sm btn-icon btn-outline-danger rx-item-remove" title="حذف">
                <i class="ti ti-x"></i>
            </button>
        </div>
        <div class="row g-2">
            <div class="col-md-5">
                <label class="form-label small required">اسم الدواء</label>
                <input type="text" data-field="medication_name" class="form-control" required maxlength="200" placeholder="Paracetamol 500mg">
            </div>
            <div class="col-md-2">
                <label class="form-label small">التركيز</label>
                <input type="text" data-field="strength" class="form-control" maxlength="60" placeholder="500mg">
            </div>
            <div class="col-md-2">
                <label class="form-label small required">الجرعة</label>
                <input type="text" data-field="dosage" class="form-control" required maxlength="120" placeholder="قرص واحد">
            </div>
            <div class="col-md-2">
                <label class="form-label small required">التكرار</label>
                <input type="text" data-field="frequency" class="form-control" required maxlength="120" placeholder="3 مرات يومياً">
            </div>
            <div class="col-md-1">
                <label class="form-label small">المدة</label>
                <input type="text" data-field="duration" class="form-control" maxlength="60" placeholder="7 أيام">
            </div>
            <div class="col-12">
                <label class="form-label small">تعليمات إضافية</label>
                <input type="text" data-field="instructions" class="form-control" maxlength="500" placeholder="بعد الأكل، مع كوب ماء، …">
            </div>
        </div>
    </div>
</template>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/i18n/ar.js"></script>
<script>
(function () {
    const $modal = $('#rxCreateModal');
    const $form = $('#rxCreateForm');
    const $items = $('#rxItems');
    const $tpl = document.getElementById('rxItemTpl');

    // ---------------------------------------------------------------
    //  Patient + doctor pickers — bidi-safe via the shared
    //  NamePickers helper. Renders rich HTML templates per row.
    // ---------------------------------------------------------------
    NamePickers.patient($('#rxPatient'), {
        dropdownParent: $modal,
        searchUrl: '{{ route('patients.search') }}',
    });
    NamePickers.doctor($('#rxDoctor'), { dropdownParent: $modal });

    // ---------------------------------------------------------------
    //  Items list — clone a row template every time "إضافة دواء" is
    //  clicked, renumber on add/remove. Keeps DOM the source of truth
    //  for items so submit() just reads them.
    // ---------------------------------------------------------------
    function renumberItems() {
        $items.find('.rx-item').each(function (i) {
            $(this).find('.rx-item-num').text(`دواء #${i + 1}`);
        });
    }

    function addItem() {
        const node = $tpl.content.firstElementChild.cloneNode(true);
        $items.append(node);
        renumberItems();
        $items.find('.rx-item:last-child input[data-field="medication_name"]').focus();
    }

    $('#rxAddItem').on('click', addItem);

    $items.on('click', '.rx-item-remove', function () {
        if ($items.find('.rx-item').length > 1) {
            $(this).closest('.rx-item').remove();
            renumberItems();
        } else {
            Notify.warning('الوصفة لازم تحتوي على دواء واحد على الأقل.');
        }
    });

    // Reset modal each time it opens — fresh form, one empty item row.
    $modal.on('shown.bs.modal', function () {
        $items.empty();
        addItem();
    });
    $modal.on('hidden.bs.modal', function () {
        $form[0].reset();
        $('#rxPatient').val(null).trigger('change');
        $items.empty();
    });

    // ---------------------------------------------------------------
    //  Submit — gather the items array and POST as JSON.
    // ---------------------------------------------------------------
    $form.on('submit', function (e) {
        e.preventDefault();

        const items = [];
        $items.find('.rx-item').each(function () {
            const row = {};
            $(this).find('[data-field]').each(function () {
                const v = $(this).val()?.trim();
                if (v) row[$(this).data('field')] = v;
            });
            if (row.medication_name && row.dosage && row.frequency) items.push(row);
        });

        if (items.length === 0) {
            Notify.error('أدخل دواء واحد على الأقل.');
            return;
        }

        const payload = {
            patient_id: $('#rxPatient').val(),
            doctor_id: $form.find('[name="doctor_id"]').val(),
            issued_at: $form.find('[name="issued_at"]').val(),
            notes: $form.find('[name="notes"]').val(),
            items,
        };

        $.ajax({
            url: '{{ route('prescriptions.store') }}',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(payload),
            globalErrorHandled: true,
        }).done(res => {
            Notify.success(res.message || 'تم حفظ الوصفة.');
            $modal.modal('hide');
            // Open the print preview in a new tab so the doctor can
            // hand the patient a paper copy without a manual click.
            if (res.prescription?.print_url) {
                window.open(res.prescription.print_url, '_blank');
            }
            window.location.reload();
        }).fail(xhr => {
            const msg = xhr.responseJSON?.message
                || Object.values(xhr.responseJSON?.errors ?? {})[0]?.[0]
                || 'تعذر حفظ الوصفة.';
            Notify.error(msg);
        });
    });
})();
</script>
@endpush