@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>
    .record-card {
        border: 1px solid #e2e8f0;
        border-radius: .75rem;
        padding: 1rem 1.25rem;
        margin-bottom: .75rem;
        transition: all .12s ease;
        background: #fff;
    }
    .record-card:hover {
        border-color: #cbd5e1;
        box-shadow: 0 4px 14px rgba(15,23,42,.06);
        transform: translateY(-1px);
    }
    .record-card .meta { color: #64748b; font-size: .85rem; }
    .record-card .complaint { color: #475569; margin-top: .35rem; }
    .record-card .diagnosis-tag {
        display: inline-flex; align-items: center; gap: .35rem;
        background: #dbeafe; color: #1e40af;
        padding: .18rem .55rem; border-radius: .35rem;
        font-size: .78rem; font-weight: 600; margin-top: .5rem;
    }
    .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

@section('content')
<x-clinic-hero
    title="السجلات الطبية"
    subtitle="كل زيارة وتشخيصاتها — السجل الكامل للعيادة"
    icon="ti-file-text"
    tone="records"
    :stats="[
        ['icon' => 'ti-files', '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('medical_records.create')
            <button type="button" class="btn btn-light"
                    data-bs-toggle="modal" data-bs-target="#newVisitModal">
                <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>
    <div class="card-body">
        @forelse($records as $r)
            @php
                $name = trim(($r->patient->first_name ?? '') . ' ' . ($r->patient->last_name ?? ''));
                $initials = collect(preg_split('/\s+/u', $name))
                    ->filter()->take(2)
                    ->map(fn ($w) => mb_substr($w, 0, 1))
                    ->implode('') ?: '؟';
                $genderClass = ($r->patient->gender ?? null) === 'female' ? 'gender-female' : '';
            @endphp
            <div class="record-card">
                <div class="d-flex align-items-start gap-3">
                    <span class="entity-avatar {{ $genderClass }}">{{ $initials }}</span>
                    <div class="flex-grow-1 min-w-0">
                        <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
                            <div>
                                <a href="{{ route('patients.show', $r->patient_id) }}" class="text-reset text-decoration-none">
                                    <strong>{{ $name ?: '—' }}</strong>
                                </a>
                                @if($r->patient?->file_number)
                                    <code class="text-mono-en small text-muted ms-2">{{ $r->patient->file_number }}</code>
                                @endif
                            </div>
                            <div class="meta text-mono-en">
                                {{ $r->visit_date?->translatedFormat('j M Y، h:i A') }}
                            </div>
                        </div>
                        <div class="meta mt-1">
                            <i class="ti ti-stethoscope text-info"></i> د. {{ $r->doctor?->name ?? '—' }}
                        </div>
                        @if($r->chief_complaint)
                            <div class="complaint">
                                <strong class="small text-muted">الشكوى:</strong> {{ $r->chief_complaint }}
                            </div>
                        @endif
                        @if($r->diagnosis)
                            <span class="diagnosis-tag">
                                <i class="ti ti-stethoscope"></i> {{ $r->diagnosis }}
                            </span>
                        @endif
                    </div>
                </div>
            </div>
        @empty
            <div class="empty-card-rich">
                <i class="ti ti-file-text-off"></i>
                <h3>لا توجد سجلات بعد</h3>
                <p>سيظهر هنا كل زيارة جديدة بمجرد تسجيل سجل طبي للمريض.</p>
            </div>
        @endforelse

        @if($records->hasPages())
            <div class="mt-3">
                {{ $records->links() }}
            </div>
        @endif
    </div>
</div>

{{-- ============================================================ --}}
{{-- New visit modal — picks patient then redirects to the rich     --}}
{{-- visit form that already exists at /patients/{patient}/visits/  --}}
{{-- create. Keeps that 310-line view as the single source of truth --}}
{{-- for the actual data entry while letting the user start from    --}}
{{-- the records list.                                              --}}
{{-- ============================================================ --}}
<div class="modal fade" id="newVisitModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="ti ti-stethoscope me-1"></i> زيارة جديدة</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted small mb-3">
                    اختر المريض اللي هتفتحله سجل طبي جديد، وهنوديك لصفحة الزيارة الكاملة.
                </p>
                <label class="form-label required">المريض</label>
                <select id="visitPatient" class="form-select" required>
                    <option value="">— اختر المريض —</option>
                </select>
                <div class="form-hint">ابدأ بكتابة الاسم أو رقم الملف.</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-link" data-bs-dismiss="modal">إلغاء</button>
                <button type="button" id="visitGoBtn" class="btn btn-primary" disabled>
                    <i class="ti ti-arrow-left me-1"></i> فتح صفحة الزيارة
                </button>
            </div>
        </div>
    </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 = $('#newVisitModal');
    const $btn = $('#visitGoBtn');

    NamePickers.patient($('#visitPatient'), {
        dropdownParent: $modal,
        searchUrl: '{{ route('patients.search') }}',
    });
    $('#visitPatient').on('change', function () {
        $btn.prop('disabled', ! this.value);
    });

    $btn.on('click', function () {
        const id = $('#visitPatient').val();
        if (! id) return;
        // Build the route URL from a placeholder pattern — Laravel
        // ignores the literal "_PATIENT_" until we substitute.
        window.location = '{{ route('visits.create', ['patient' => '_PATIENT_']) }}'.replace('_PATIENT_', id);
    });

    $modal.on('hidden.bs.modal', function () {
        $('#visitPatient').val(null).trigger('change');
        $btn.prop('disabled', true);
    });
})();
</script>
@endpush