@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>
    .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; }
</style>
@endpush

@php
    $statusMeta = [
        'requested'   => ['label' => 'مطلوب', 'color' => 'info', 'icon' => 'clock'],
        'in_progress' => ['label' => 'قيد التنفيذ', 'color' => 'warning', 'icon' => 'loader'],
        'completed'   => ['label' => 'مكتمل', 'color' => 'success', 'icon' => 'check'],
        'cancelled'   => ['label' => 'ملغي', 'color' => 'danger', 'icon' => 'x'],
    ];
@endphp

@section('content')
<x-clinic-hero
    title="التحاليل والفحوصات"
    subtitle="طلبات التحاليل ومتابعة نتائجها"
    icon="ti-flask"
    tone="labs"
    :stats="[
        ['icon' => 'ti-clock', 'value' => $stats['pending'], 'label' => 'قيد الانتظار'],
        ['icon' => 'ti-check', 'value' => $stats['completed'], 'label' => 'مكتمل'],
        ['icon' => 'ti-sparkles', 'value' => $stats['today'], 'label' => 'اليوم'],
        ['icon' => 'ti-calendar-month', 'value' => $stats['this_month'], 'label' => 'هذا الشهر'],
    ]"
>
    <x-slot:actions>
        @can('lab_tests.create')
            <button type="button" class="btn btn-light"
                    data-bs-toggle="modal" data-bs-target="#labCreateModal">
                <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($tests->isEmpty())
        <div class="card-body">
            <div class="empty-card-rich">
                <i class="ti ti-flask-off"></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>الحالة</th>
                        <th class="w-1 text-end">الملف</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($tests as $t)
                        @php
                            $name = trim(($t->patient?->first_name ?? '').' '.($t->patient?->last_name ?? ''));
                            $initials = collect(preg_split('/\s+/u', $name))
                                ->filter()->take(2)
                                ->map(fn ($w) => mb_substr($w, 0, 1))
                                ->implode('') ?: '؟';
                            $genderClass = ($t->patient->gender ?? null) === 'female' ? 'gender-female' : '';
                            $sm = $statusMeta[$t->status] ?? ['label' => $t->status, 'color' => 'secondary', 'icon' => 'circle'];
                        @endphp
                        <tr>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <span class="entity-avatar {{ $genderClass }}">{{ $initials }}</span>
                                    <div>
                                        <a href="{{ route('patients.show', $t->patient_id) }}" class="text-reset text-decoration-none">
                                            <strong>{{ $name ?: '—' }}</strong>
                                        </a>
                                        @if($t->patient?->file_number)
                                            <div class="small text-muted">
                                                <code class="text-mono-en">{{ $t->patient->file_number }}</code>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td>
                                <strong>{{ $t->test_name }}</strong>
                                @if($t->notes)
                                    <div class="small text-muted">{{ Str::limit($t->notes, 40) }}</div>
                                @endif
                            </td>
                            <td class="small">د. {{ $t->doctor?->name ?? '—' }}</td>
                            <td class="text-muted text-mono-en">{{ optional($t->test_date)->format('Y-m-d') ?? '—' }}</td>
                            <td>
                                <span class="status-pill bg-{{ $sm['color'] }}-lt text-{{ $sm['color'] }}">
                                    <i class="ti ti-{{ $sm['icon'] }}"></i>{{ $sm['label'] }}
                                </span>
                            </td>
                            <td class="text-end">
                                @if($t->file_path)
                                    <a href="{{ Storage::disk('public')->url($t->file_path) }}" target="_blank"
                                       class="btn btn-sm btn-icon btn-outline-secondary" title="تحميل">
                                        <i class="ti ti-file-download"></i>
                                    </a>
                                @else
                                    <span class="text-muted small">—</span>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @if($tests->hasPages())
            <div class="card-footer">
                {{ $tests->links() }}
            </div>
        @endif
    @endif
</div>

{{-- ============================================================ --}}
{{-- Request lab-test modal                                        --}}
{{-- ============================================================ --}}
<div class="modal fade" id="labCreateModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form id="labCreateForm" class="modal-content" enctype="multipart/form-data">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title"><i class="ti ti-flask 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="labPatient" class="form-select" required>
                            <option value="">— اختر المريض —</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label required">الطبيب الطالب</label>
                        <select name="doctor_id" id="labDoctor" 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>

                <div class="row g-3 mt-1">
                    <div class="col-md-7">
                        <label class="form-label required">اسم التحليل</label>
                        <input type="text" name="test_name" class="form-control" required maxlength="200"
                               placeholder="مثال: صورة دم كاملة CBC">
                    </div>
                    <div class="col-md-5">
                        <label class="form-label">المعمل</label>
                        <input type="text" name="lab_name" class="form-control" maxlength="120"
                               placeholder="معمل البرج / المختبر">
                    </div>
                </div>

                <div class="row g-3 mt-1">
                    <div class="col-md-4">
                        <label class="form-label">تاريخ التحليل</label>
                        <input type="date" name="test_date" class="form-control" value="{{ now()->toDateString() }}">
                    </div>
                    <div class="col-md-8">
                        <label class="form-label">إرفاق طلب أو نتيجة (اختياري)</label>
                        <input type="file" name="file" class="form-control" accept=".pdf,.png,.jpg,.jpeg">
                        <div class="form-hint">PDF أو صورة، حد أقصى 5 ميجا.</div>
                    </div>
                </div>

                <label class="form-label mt-3">ملاحظات</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>
@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 = $('#labCreateModal');
    const $form = $('#labCreateForm');

    NamePickers.patient($('#labPatient'), {
        dropdownParent: $modal,
        searchUrl: '{{ route('patients.search') }}',
    });
    NamePickers.doctor($('#labDoctor'), { dropdownParent: $modal });

    $modal.on('hidden.bs.modal', function () {
        $form[0].reset();
        $('#labPatient').val(null).trigger('change');
    });

    $form.on('submit', function (e) {
        e.preventDefault();
        // Use FormData for the file upload — jQuery doesn't auto-promote
        // multipart bodies otherwise.
        const formData = new FormData($form[0]);
        formData.set('patient_id', $('#labPatient').val());

        $.ajax({
            url: '{{ route('lab-tests.store') }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            globalErrorHandled: true,
        }).done(() => {
            Notify.success('تم حفظ طلب التحليل.');
            $modal.modal('hide');
            window.location.reload();
        }).fail(xhr => {
            Notify.error(xhr.responseJSON?.message || 'تعذر حفظ الطلب.');
        });
    });
})();
</script>
@endpush