@extends('layouts.app')

@section('title', 'المرضى')

@section('content')
<x-clinic-hero
    title="إدارة المرضى"
    subtitle="ملفات المرضى وسجلهم الصحي في مكان واحد"
    icon="ti-users"
    tone="patients"
    :stats="[
        ['icon' => 'ti-user-plus', 'value' => number_format($stats['total']), 'label' => 'إجمالي'],
        ['icon' => 'ti-calendar-plus', 'value' => $stats['this_month'], 'label' => 'هذا الشهر'],
        ['icon' => 'ti-sparkles', 'value' => $stats['today'], 'label' => 'اليوم'],
        ['icon' => 'ti-friends', 'value' => $stats['males'].'/'.$stats['females'], 'label' => 'ذكور / إناث'],
    ]"
>
    <x-slot:actions>
        @can('patients.create')
            <button class="btn btn-light" data-bs-toggle="modal" data-bs-target="#patientModal">
                <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 d-flex justify-content-between align-items-center flex-wrap gap-2">
        <h3 class="card-title">قائمة المرضى</h3>
        <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="collapse" data-bs-target="#patientsFilters">
            <i class="ti ti-filter me-1"></i> تصفية متقدمة
        </button>
    </div>

    <div class="collapse" id="patientsFilters">
        <div class="card-body bg-light">
            <div class="row g-2">
                <div class="col-md-3">
                    <label class="form-label small">النوع</label>
                    <select class="form-select" id="filterGender">
                        <option value="">كل الأنواع</option>
                        <option value="male">ذكر</option>
                        <option value="female">أنثى</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label small">فصيلة الدم</label>
                    <select class="form-select" id="filterBlood">
                        <option value="">كل الفصائل</option>
                        @foreach(['A+','A-','B+','B-','AB+','AB-','O+','O-'] as $b)
                            <option value="{{ $b }}">{{ $b }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label small">مسجل من</label>
                    <input type="date" id="filterFrom" class="form-control">
                </div>
                <div class="col-md-3">
                    <label class="form-label small">إلى</label>
                    <input type="date" id="filterTo" class="form-control">
                </div>
            </div>
        </div>
    </div>

    <div class="table-responsive">
        <table id="patientsTable" class="table table-vcenter table-hover clinic-table mb-0" style="width:100%;">
            <thead>
                <tr>
                    <th>رقم الملف</th>
                    <th>المريض</th>
                    <th>الهاتف</th>
                    <th>النوع</th>
                    <th>العمر</th>
                    <th>آخر زيارة</th>
                    <th class="w-1 text-end">الإجراءات</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

@include('patients._form-modal')
@endsection

@push('head')
<link rel="stylesheet" href="https://cdn.datatables.net/2.1.8/css/dataTables.bootstrap5.min.css">
<style>
    /* Wrap the search box from the DataTables default styling so it
       feels consistent with the rest of the section card. */
    #patientsTable_wrapper .dataTables_filter input {
        background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .5rem;
        padding: .35rem .75rem; min-width: 240px;
    }
    #patientsTable_wrapper .dataTables_length select { border-radius: .5rem; }
</style>
@endpush

@push('scripts')
<script src="https://cdn.datatables.net/2.1.8/js/dataTables.min.js"></script>
<script src="https://cdn.datatables.net/2.1.8/js/dataTables.bootstrap5.min.js"></script>
<script>
(function () {
    let table;
    const PATIENTS_URL = @json(url('patients'));

    // Initial-bubble avatar fallback when a patient has no photo.
    function renderAvatar(name, gender) {
        const parts = (name || '').trim().split(/\s+/);
        const initials = ((parts[0]?.[0] || '') + (parts[1]?.[0] || '')) || '؟';
        const cls = gender === 'أنثى' ? 'gender-female' : '';
        return `<span class="entity-avatar ${cls}">${initials}</span>`;
    }

    function buildTable() {
        table = $('#patientsTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: @json(route('patients.index')),
                data: d => {
                    d.filters = {
                        gender: $('#filterGender').val(),
                        blood_type: $('#filterBlood').val(),
                        created_from: $('#filterFrom').val(),
                        created_to: $('#filterTo').val(),
                    };
                },
            },
            columns: [
                { data: 'file_number', render: v => `<code class="text-mono-en">${v ?? ''}</code>` },
                {
                    data: null,
                    render: row => `
                        <div class="d-flex align-items-center gap-2">
                            ${renderAvatar(row.name, row.gender)}
                            <div class="min-w-0">
                                <a href="${PATIENTS_URL}/${row.id}" class="text-reset text-decoration-none">
                                    <strong class="d-block text-truncate">${row.name}</strong>
                                </a>
                            </div>
                        </div>`,
                },
                { data: 'phone', render: v => v ? `<span class="text-mono-en">${v}</span>` : '<span class="text-muted">—</span>' },
                {
                    data: 'gender',
                    render: v => {
                        const isF = v === 'أنثى';
                        const cls = isF ? 'pink' : 'blue';
                        const icon = isF ? 'ti-gender-female' : 'ti-gender-male';
                        return `<span class="status-pill bg-${cls}-lt text-${cls}"><i class="ti ${icon}"></i>${v}</span>`;
                    },
                },
                { data: 'age' },
                { data: 'last_visit', render: v => v || '<span class="text-muted">—</span>' },
                {
                    data: 'actions',
                    orderable: false,
                    className: 'text-end text-nowrap',
                    render: id => `
                        <div class="btn-list flex-nowrap justify-content-end">
                            <a href="${PATIENTS_URL}/${id}" class="btn btn-sm btn-icon btn-outline-primary" title="عرض">
                                <i class="ti ti-eye"></i>
                            </a>
                            <button class="btn btn-sm btn-icon btn-outline-secondary" data-edit="${id}" title="تعديل">
                                <i class="ti ti-edit"></i>
                            </button>
                            <button class="btn btn-sm btn-icon btn-outline-danger" data-delete="${id}" title="حذف">
                                <i class="ti ti-trash"></i>
                            </button>
                        </div>`,
                },
            ],
            order: [[0, 'desc']],
            pageLength: 25,
            language: {
                processing: '<span class="spinner-border spinner-border-sm me-1"></span> جارٍ التحميل...',
                search: '<i class="ti ti-search me-1"></i>',
                searchPlaceholder: 'ابحث بالاسم، الهاتف، أو رقم الملف...',
                lengthMenu: 'عرض _MENU_ سجل',
                info: 'عرض _START_–_END_ من _TOTAL_',
                infoEmpty: 'لا توجد سجلات',
                infoFiltered: '(مفلترة من _MAX_)',
                paginate: { first: '«', previous: '‹', next: '›', last: '»' },
                emptyTable: `
                    <div class="empty-card-rich my-3">
                        <i class="ti ti-users-off"></i>
                        <h3>لا يوجد مرضى بعد</h3>
                        <p>ابدأ بإضافة أول مريض من زر "مريض جديد" في الأعلى.</p>
                    </div>`,
                zeroRecords: `
                    <div class="empty-card-rich my-3">
                        <i class="ti ti-search-off"></i>
                        <h3>لا توجد نتائج مطابقة</h3>
                        <p>جرّب تعديل البحث أو الفلاتر.</p>
                    </div>`,
            },
        });
    }

    $(function () {
        buildTable();

        $('#filterGender, #filterBlood, #filterFrom, #filterTo').on('change', () => table.ajax.reload());

        $(document).on('click', '[data-delete]', function () {
            const id = $(this).data('delete');
            Notify.confirmDelete('هل أنت متأكد من نقل المريض إلى المهملات؟', () => {
                $.ajax({ url: `${PATIENTS_URL}/${id}`, method: 'DELETE' })
                    .done(res => { Notify.success(res.message); table.ajax.reload(); });
            });
        });

        $(document).on('click', '[data-edit]', function () {
            const id = $(this).data('edit');
            $.getJSON(`${PATIENTS_URL}/${id}`).done(res => {
                window.PatientModal.open(res.patient);
            });
        });

        $('#patientModal').on('hidden.bs.modal', () => window.PatientModal.reset());
    });
})();
</script>
@endpush