@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <!-- Back Button -->
    <div class="mb-3">
        <a href="/receptionist/patients-management" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-right me-2"></i>العودة إلى قائمة المرضى
        </a>
    </div>

    <!-- Patient Header -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-auto">
                    <div class="avatar-lg bg-gradient-primary rounded-circle d-flex align-items-center justify-content-center">
                        <i class="fas fa-user fa-2x text-white"></i>
                    </div>
                </div>
                <div class="col">
                    <h4 class="mb-1" id="patientName">جاري التحميل...</h4>
                    <p class="text-muted mb-0">
                        <i class="fas fa-phone me-2"></i><span id="patientMobile">-</span>
                        <span class="mx-3">|</span>
                        <i class="fas fa-calendar me-2"></i>العمر: <span id="patientAge">-</span>
                        <span class="mx-3">|</span>
                        <i class="fas fa-venus-mars me-2"></i><span id="patientGender">-</span>
                    </p>
                </div>
                <div class="col-auto">
                    <button class="btn btn-outline-primary" onclick="editPatientInfo()">
                        <i class="fas fa-edit me-2"></i>تعديل البيانات
                    </button>
                    <button class="btn btn-outline-info ms-2" onclick="showAddAnalysisRequest()">
                        <i class="fas fa-vials me-2"></i>إضافة طلب خدمة/تحليل
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <i class="fas fa-calendar-check fa-2x text-primary mb-2"></i>
                    <h5 class="mb-1" id="totalAppointments">0</h5>
                    <small class="text-muted">إجمالي المواعيد</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <i class="fas fa-clock fa-2x text-warning mb-2"></i>
                    <h5 class="mb-1" id="upcomingAppointments">0</h5>
                    <small class="text-muted">مواعيد قادمة</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                            <i class="fas fa-check-circle fa-2x text-success mb-2"></i>
                            <h4 class="mb-1" id="completedAppointments">0</h4>
                            <small class="text-muted">مواعيد مكتملة</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <i class="fas fa-file-medical fa-2x text-info mb-2"></i>
                    <h5 class="mb-1" id="totalMedicalRecords">0</h5>
                    <small class="text-muted">السجلات الطبية</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabs Navigation -->
    <ul class="nav nav-tabs mb-4" id="patientTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="appointments-tab" data-bs-toggle="tab" data-bs-target="#appointments" type="button" role="tab">
                <i class="fas fa-calendar-alt me-2"></i>المواعيد
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="medical-history-tab" data-bs-toggle="tab" data-bs-target="#medical-history" type="button" role="tab">
                <i class="fas fa-file-medical me-2"></i>التاريخ الطبي
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="payments-tab" data-bs-toggle="tab" data-bs-target="#payments" type="button" role="tab">
                <i class="fas fa-money-bill-wave me-2"></i>المدفوعات
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="analysis-requests-tab" data-bs-toggle="tab" data-bs-target="#analysis-requests" type="button" role="tab">
                <i class="fas fa-vials me-2"></i>طلبات التحاليل/الخدمات
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="notes-tab" data-bs-toggle="tab" data-bs-target="#notes" type="button" role="tab">
                <i class="fas fa-sticky-note me-2"></i>الملاحظات
            </button>
        </li>
    </ul>

    <!-- Tab Content -->
    <div class="tab-content" id="patientTabsContent">
        <div class="tab-pane fade" id="analysis-requests" role="tabpanel" aria-labelledby="analysis-requests-tab">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h6 class="mb-0"><i class="fas fa-vials me-2"></i>طلبات التحاليل/الخدمات</h6>
                <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addAnalysisModal">
                    <i class="fas fa-plus me-1"></i>إضافة طلب
                </button>
            </div>
            <div id="analysis_requests_container" class="card">
                <div class="card-body">
                    <div id="analysis_requests_loading" class="text-center text-muted">جاري التحميل...</div>
                    <div class="table-responsive d-none" id="analysis_requests_table_wrap">
                        <table class="table table-hover align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>رقم الطلب</th>
                                    <th>الفئة</th>
                                    <th>الخدمات</th>
                                    <th>التكلفة</th>
                                    <th>مدفوع</th>
                                    <th>المتبقي</th>
                                    <th>الحالة</th>
                                    <th class="text-center">إجراءات</th>
                                </tr>
                            </thead>
                            <tbody id="analysis_requests_tbody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- Appointments Tab -->
        <div class="tab-pane fade show active" id="appointments" role="tabpanel">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h6 class="mb-0">سجل المواعيد</h6>
                <button class="btn btn-success btn-sm" onclick="showAddAppointmentModal()">
                    <i class="fas fa-plus me-1"></i>موعد جديد
                </button>
            </div>
            
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead class="table-light">
                        <tr>
                            <th>التاريخ</th>
                            <th>الوقت</th>
                            <th>الطبيب</th>
                            <th>نوع الموعد</th>
                            <th>الحالة</th>
                            <th>الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody id="appointmentsTableBody">
                        <!-- Appointments will be loaded here -->
                    </tbody>
                </table>
            </div>
            
            <div id="noAppointments" class="text-center py-4" style="display: none;">
                <i class="fas fa-calendar-times fa-3x text-muted mb-3"></i>
                <h6 class="text-muted">لا توجد مواعيد</h6>
                <p class="text-muted">لم يتم حجز أي مواعيد لهذا المريض</p>
            </div>
        </div>

        <!-- Medical History Tab -->
        <div class="tab-pane fade" id="medical-history" role="tabpanel">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h6 class="mb-0">التاريخ الطبي</h6>
                <button class="btn btn-info btn-sm" onclick="addMedicalRecord()">
                    <i class="fas fa-plus me-1"></i>سجل طبي جديد
                </button>
            </div>
            
            <div id="medicalHistoryContainer">
                <!-- Medical history will be loaded here -->
            </div>
            
            <div id="noMedicalHistory" class="text-center py-4" style="display: none;">
                <i class="fas fa-file-medical fa-3x text-muted mb-3"></i>
                <h6 class="text-muted">لا يوجد تاريخ طبي</h6>
                <p class="text-muted">لم يتم تسجيل أي سجلات طبية لهذا المريض</p>
            </div>
        </div>

        <!-- Payments Tab -->
        <div class="tab-pane fade" id="payments" role="tabpanel">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h6 class="mb-0">سجل المدفوعات</h6>
                <div class="d-flex align-items-center gap-3">
                    <button class="btn btn-success btn-sm" onclick="addPayment()">
                        <i class="fas fa-plus me-1"></i>إضافة دفعة
                    </button>
                    <div class="text-muted">
                        إجمالي المدفوعات: <span class="fw-bold text-success" id="totalPayments">0 ج.م</span>
                    </div>
                </div>
            </div>
            
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead class="table-light">
                        <tr>
                            <th>التاريخ</th>
                            <th>المبلغ</th>
                            <th>طريقة الدفع</th>
                            <th>الموعد المرتبط</th>
                            <th>الحالة</th>
                            <th>الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody id="paymentsTableBody">
                        <!-- Payments will be loaded here -->
                    </tbody>
                </table>
            </div>
            
            <div id="noPayments" class="text-center py-4" style="display: none;">
                <i class="fas fa-credit-card fa-3x text-muted mb-3"></i>
                <h6 class="text-muted">لا توجد مدفوعات</h6>
                <p class="text-muted">لم يتم تسجيل أي مدفوعات لهذا المريض</p>
            </div>
        </div>

        <!-- Notes Tab -->
        <div class="tab-pane fade" id="notes" role="tabpanel">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">ملاحظات المريض</h6>
                </div>
                <div class="card-body">
                    <textarea class="form-control" id="patientNotes" rows="8" placeholder="اكتب ملاحظات عن المريض هنا..."></textarea>
                    <div class="mt-3">
                        <button class="btn btn-primary" onclick="savePatientNotes()">
                            <i class="fas fa-save me-2"></i>حفظ الملاحظات
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Include Modal Components -->
@include('components.modals.appointment-view')
@include('components.modals.appointment-edit')
@include('components.modals.appointment-add')
@include('components.modals.payment-add')
@include('components.modals.payment-edit')
@include('components.modals.patient-edit')
@include('components.modals.medical-record-add')

<!-- Add Analysis/Service Request Modal -->
<div class="modal fade" id="addAnalysisModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">إضافة طلب خدمة/تحليل</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="addAnalysisForm" onsubmit="submitAddAnalysisRequest(event)">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">الفئة</label>
                        <select name="category" class="form-select" required id="add_analysis_category">
                            <option value="lab" selected>معمل</option>
                            <option value="xray">أشعة</option>
                            <option value="other">أخرى</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <label class="form-label mb-0">الخدمات (يمكن اختيار أكثر من خدمة)</label>
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="selectAllServices(true)">تحديد الكل</button>
                                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="selectAllServices(false)">إلغاء الكل</button>
                            </div>
                        </div>
                        <div class="input-group input-group-sm mb-2">
                            <span class="input-group-text"><i class="fas fa-search"></i></span>
                            <input type="text" id="add_analysis_service_search" class="form-control" placeholder="بحث عن خدمة...">
                        </div>
                        <select multiple size="8" class="form-select" id="add_analysis_service">
                            <!-- options populated by JS -->
                        </select>
                        <div class="form-text">اختر خدمة أو أكثر من القائمة. يتم حساب الإجمالي تلقائياً.</div>
                    </div>
                    <div class="mb-2" id="add_analysis_selected_list" style="display:none;">
                        <strong>الخدمات المحددة:</strong>
                        <ul class="mt-2" style="padding-right:18px;" id="add_analysis_selected_ul"></ul>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">الطبيب (اختياري)</label>
                        <select name="doctor_id" class="form-select">
                            <option value="">اختر الطبيب (اختياري)</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">تفاصيل</label>
                        <textarea name="details" class="form-control" rows="3"></textarea>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">الإجمالي (ج.م)</label>
                            <input type="number" name="cost" class="form-control" min="0" step="0.01" value="0" id="add_analysis_cost" readonly>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">المدفوع الآن</label>
                            <input type="number" name="paid_amount" class="form-control" min="0" step="0.01" value="0" oninput="updateAddAnalysisRemaining()">
                        </div>
                    </div>
                    <div class="mt-2">
                        <small class="text-muted">المتبقي: <span id="add_analysis_remaining">0.00 ج.م</span></small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                    <button type="submit" class="btn btn-primary">حفظ</button>
                </div>
            </form>
        </div>
    </div>
    </div>

    <!-- Edit Analysis/Service Request Modal -->
    <div class="modal fade" id="editAnalysisModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">تحديث طلب الخدمة/التحليل</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="editAnalysisForm" onsubmit="submitEditAnalysisRequest(event)">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">الحالة</label>
                            <select name="status" class="form-select">
                                <option value="pending">قيد الانتظار</option>
                                <option value="in_progress">قيد التنفيذ</option>
                                <option value="completed">مكتمل</option>
                                <option value="cancelled">ملغي</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">رفع نتيجة التحليل</label>
                            <input type="file" name="result_file" class="form-control" accept=".pdf,.jpg,.jpeg,.png,.webp">
                            <div class="form-text">الحد الأقصى 5MB. الأنواع المسموحة: PDF, JPG, PNG, WEBP.</div>
                            <a id="current_result_file_link" href="#" target="_blank" class="d-none mt-2">عرض الملف الحالي</a>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                        <button type="submit" class="btn btn-primary">حفظ</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


<!-- Loading Modal -->
<div class="modal fade" id="loadingModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center py-3">
                <div class="spinner-border spinner-border-sm text-primary mb-2" role="status">
                    <span class="visually-hidden">جاري التحميل...</span>
                </div>
                <p class="mb-0 small">تحميل البيانات...</p>
            </div>
        </div>
    </div>
</div>

<!-- Include JavaScript Components -->
<script src="{{ asset('js/components/appointment-manager.js') }}"></script>
<script src="{{ asset('js/components/payment-manager.js') }}"></script>
<script src="{{ asset('js/components/patient-manager.js') }}"></script>

<script>
// Global variables
let patientId = null;
let patientData = null;
let appointmentManager, paymentManager, patientManager;

// Extract patient ID from URL path
function getPatientIdFromUrl() {
    const pathParts = window.location.pathname.split('/');
    const profileIndex = pathParts.indexOf('profile');
    if (profileIndex > 0) {
        return pathParts[profileIndex - 1];
    }
    return null;
}

function printAnalysisReceipt(request, payment) {
    try {
        const id = request && (request.id || request.request_id) ? (request.id || request.request_id) : null;
        if (!id) return;
        const base = window.location.pathname.includes('receptionist') ? '/receptionist' : '/admin';
        const url = `${base}/analysis-requests/${id}/receipt`;
        window.open(url, '_blank');
    } catch (e) {
        console.error('Failed to open receipt', e);
    }
}

function selectAllServices(selectAll) {
    const sel = document.getElementById('add_analysis_service');
    if (!sel) return;
    Array.from(sel.options).forEach(o => o.selected = !!selectAll);
    updateSelectedServicesUI();
}

function updateSelectedServicesUI() {
    const sel = document.getElementById('add_analysis_service');
    const costEl = document.getElementById('add_analysis_cost');
    const listWrap = document.getElementById('add_analysis_selected_list');
    const listUl = document.getElementById('add_analysis_selected_ul');
    if (!sel || !costEl || !listWrap || !listUl) return;
    const selected = Array.from(sel.selectedOptions).map(opt => ({
        id: opt.value,
        name: opt.getAttribute('data-name'),
        cost: (Number(opt.getAttribute('data-cost')) || 0)
    }));
    if (selected.length === 0) {
        listWrap.style.display = 'none';
        listUl.innerHTML = '';
        // Do not alter existing title/cost when cleared; user may type manually
        updateAddAnalysisRemaining();
        return;
    }
    listWrap.style.display = '';
    listUl.innerHTML = selected.map(s => `<li>${s.name} — ${s.cost.toFixed(2)} ج.م</li>`).join('');
    // Compute total
    const total = selected.reduce((acc, s) => acc + (s.cost||0), 0);
    costEl.value = total.toFixed(2);
    updateAddAnalysisRemaining();
}

function loadServicesByCategory(category, q) {
    const isReceptionist = window.location.pathname.includes('receptionist');
    const baseUrl = isReceptionist ? '/receptionist' : '/admin';
    const params = new URLSearchParams();
    if (category) params.set('category', category);
    if (q) params.set('q', q);
    fetch(`${baseUrl}/services?${params.toString()}`)
        .then(r => r.json())
        .then(data => {
            const services = (data && data.data) ? data.data : [];
            const sel = document.getElementById('add_analysis_service');
            if (!sel) return;
            sel.innerHTML = services.map(s => `
                <option value="${s.id}" data-name="${s.name}" data-cost="${s.default_cost}">${s.name} — ${Number(s.default_cost).toFixed(2)} ج.م</option>
            `).join('');
            // After reload, recalc totals in case nothing selected
            updateSelectedServicesUI();
        })
        .catch(() => {});
}

// ===== Fallback modal controls (no Bootstrap required) =====
function openModalFallback(modalEl) {
    try {
        modalEl.style.display = 'block';
        modalEl.removeAttribute('aria-hidden');
        modalEl.classList.add('show');
        document.body.classList.add('modal-open');
        // Backdrop
        let backdrop = document.createElement('div');
        backdrop.className = 'modal-backdrop fade show';
        backdrop.id = 'fallback-backdrop-add-analysis';
        document.body.appendChild(backdrop);
        // Hook close buttons inside this modal
        modalEl.querySelectorAll('[data-bs-dismiss="modal"], .btn-close').forEach(btn => {
            btn.addEventListener('click', () => closeModalFallback(modalEl), { once: true });
        });
    } catch (e) { console.error('Fallback modal open error', e); }
}

function closeModalFallback(modalEl) {
    try {
        modalEl.style.display = 'none';
        modalEl.setAttribute('aria-hidden', 'true');
        modalEl.classList.remove('show');
        document.body.classList.remove('modal-open');
        const backdrop = document.getElementById('fallback-backdrop-add-analysis');
        if (backdrop) backdrop.remove();
    } catch (e) { console.error('Fallback modal close error', e); }
}

document.addEventListener('DOMContentLoaded', function() {
    patientId = getPatientIdFromUrl();
    
    if (patientId) {
        // Initialize managers
        appointmentManager = initAppointmentManager(patientId);
        paymentManager = initPaymentManager(patientId);
        patientManager = initPatientManager(patientId);
        
        loadPatientProfile();
    } else {
        showError('معرف المريض غير صحيح');
    }
    // Prepare Add Analysis modal on open
    const addAnalysisEl = document.getElementById('addAnalysisModal');
    if (addAnalysisEl) {
        addAnalysisEl.addEventListener('show.bs.modal', function () {
            try {
                loadDoctorsForAnalysis();
                const form = document.getElementById('addAnalysisForm');
                if (form) {
                    form.reset();
                }
                document.getElementById('add_analysis_remaining').textContent = '0.00 ج.م';
                // Load services for default category
                const catSel = document.getElementById('add_analysis_category');
                if (catSel) loadServicesByCategory(catSel.value);
            } catch(e) { console.error(e); }
        });
    }

    // Link category -> services
    document.getElementById('add_analysis_category')?.addEventListener('change', (e) => {
        // Clear search and reload by category
        const s = document.getElementById('add_analysis_service_search');
        if (s) s.value = '';
        loadServicesByCategory(e.target.value);
        // Reset selections and totals
        const sel = document.getElementById('add_analysis_service');
        if (sel) {
            Array.from(sel.options).forEach(o => o.selected = false);
        }
        const costEl = document.getElementById('add_analysis_cost');
        if (costEl) costEl.value = '0.00';
        updateAddAnalysisRemaining();
    });
    // When service changes (multi-select), update list, title and total cost
    const serviceSel = document.getElementById('add_analysis_service');
    if (serviceSel) {
        ['change','input','click','keyup'].forEach(evt => {
            serviceSel.addEventListener(evt, () => updateSelectedServicesUI());
        });
        // Allow single-click toggle without Ctrl on multi-select
        serviceSel.addEventListener('mousedown', (e) => {
            const opt = e.target;
            if (opt && opt.tagName === 'OPTION') {
                e.preventDefault();
                opt.selected = !opt.selected;
                serviceSel.dispatchEvent(new Event('change', { bubbles: true }));
            }
        });
    }
    // Service search with debounce
    const svcSearch = document.getElementById('add_analysis_service_search');
    if (svcSearch) {
        svcSearch.addEventListener('input', () => {
            clearTimeout(window.__svc_q_t);
            window.__svc_q_t = setTimeout(() => {
                const cat = document.getElementById('add_analysis_category')?.value || '';
                loadServicesByCategory(cat, svcSearch.value.trim());
            }, 250);
        });
    }

    // Load analysis requests when the tab is shown
    const analysisTabBtn = document.getElementById('analysis-requests-tab');
    if (analysisTabBtn) {
        analysisTabBtn.addEventListener('shown.bs.tab', () => {
            const loading = document.getElementById('analysis_requests_loading');
            const tableWrap = document.getElementById('analysis_requests_table_wrap');
            if (loading) loading.classList.remove('d-none');
            if (tableWrap) tableWrap.classList.add('d-none');
            loadAnalysisRequests();
        });
    }
});

// Load patient profile data
function loadPatientProfile() {
    showLoadingModal();
    
    const isReceptionist = window.location.pathname.includes('receptionist');
    const baseUrl = isReceptionist ? '/receptionist/patients' : '/admin/patients';
    
    fetch(`${baseUrl}/${patientId}/profile-data`)
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                patientData = data.patient;
                patientManager.setPatientData(patientData);
                displayPatientInfo(data.patient);
                displayPatientStats(data.stats);
                loadNotes();
                hideLoadingModal();
                
                // Load secondary data in background after hiding modal
                setTimeout(() => {
                    loadAppointments();
                    loadMedicalHistory(); 
                    loadPayments();
                    loadAnalysisRequests();
                }, 100);
            } else {
                hideLoadingModal();
                showError('فشل في تحميل بيانات المريض');
            }
        })
        .catch(error => {
            console.error('Error loading patient profile:', error);
            hideLoadingModal();
            showError('حدث خطأ في تحميل البيانات');
        });
}

function displayPatientInfo(patient) {
    document.getElementById('patientName').textContent = patient.name;
    document.getElementById('patientMobile').textContent = patient.mobile;
    document.getElementById('patientAge').textContent = patient.age || 'غير محدد';
    document.getElementById('patientGender').textContent = patient.gender || 'غير محدد';
}

function displayPatientStats(stats) {
    document.getElementById('totalAppointments').textContent = stats.total_appointments || 0;
    document.getElementById('upcomingAppointments').textContent = stats.upcoming_appointments || 0;
    document.getElementById('completedAppointments').textContent = stats.completed_appointments || 0;
    document.getElementById('totalMedicalRecords').textContent = stats.total_medical_records || 0;
}

function loadAppointments() {
    const isReceptionist = window.location.pathname.includes('receptionist');
    const baseUrl = isReceptionist ? '/receptionist/patients' : '/admin/patients';
    
    return fetch(`${baseUrl}/${patientId}/appointments`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                displayAppointments(data.appointments);
            }
        })
        .catch(error => console.error('Error loading appointments:', error));
}

function displayAppointments(appointments) {
    const tbody = document.getElementById('appointmentsTableBody');
    const noAppointments = document.getElementById('noAppointments');
    
    if (appointments.length === 0) {
        tbody.innerHTML = '';
        noAppointments.style.display = 'block';
        return;
    }
    
    noAppointments.style.display = 'none';
    
    // Use DocumentFragment for better performance
    const fragment = document.createDocumentFragment();
    
    appointments.forEach(appointment => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${formatDate(appointment.appointment_date)}</td>
            <td>${appointment.appointment_time}</td>
            <td>${appointment.doctor_name}</td>
            <td>${appointment.appointment_type || 'استشارة عامة'}</td>
            <td>
                <span class="badge ${getStatusBadgeClass(appointment.status)}">
                    ${getStatusText(appointment.status)}
                </span>
            </td>
            <td>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-outline-info btn-sm" onclick="viewAppointment(${appointment.id})" title="عرض التفاصيل">
                        <i class="fas fa-eye"></i>
                    </button>
                    <button class="btn btn-outline-primary btn-sm" onclick="editAppointment(${appointment.id})" title="تعديل">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="btn btn-outline-danger btn-sm" onclick="deleteAppointment(${appointment.id})" title="حذف">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </td>
        `;
        fragment.appendChild(row);
    });
    
    tbody.innerHTML = '';
    tbody.appendChild(fragment);
}

function loadPayments() {
    const isReceptionist = window.location.pathname.includes('receptionist');
    const baseUrl = isReceptionist ? '/receptionist/patients' : '/admin/patients';
    
    return fetch(`${baseUrl}/${patientId}/payments`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                displayPayments(data.payments);
            }
        })
        .catch(error => console.error('Error loading payments:', error));
}

function displayPayments(payments) {
    const tbody = document.getElementById('paymentsTableBody');
    const noPayments = document.getElementById('noPayments');
    
    if (payments.length === 0) {
        tbody.innerHTML = '';
        noPayments.style.display = 'block';
        return;
    }
    
    noPayments.style.display = 'none';
    
    tbody.innerHTML = payments.map(payment => `
        <tr>
            <td>${formatDate(payment.created_at)}</td>
            <td>${payment.amount} ج.م</td>
            <td>${getPaymentMethodText(payment.payment_method)}</td>
            <td>${payment.appointment_id ? 'موعد #' + payment.appointment_id : 'دفعة مستقلة'}</td>
            <td>
                <span class="badge bg-success">مؤكدة</span>
            </td>
            <td>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-outline-primary btn-sm" onclick="editPayment(${payment.id})" title="تعديل">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="btn btn-outline-danger btn-sm" onclick="deletePayment(${payment.id})" title="حذف">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </td>
        </tr>
    `).join('');
}

function loadMedicalHistory() {
    const isReceptionist = window.location.pathname.includes('receptionist');
    const baseUrl = isReceptionist ? '/receptionist/patients' : '/admin/patients';
    
    return fetch(`${baseUrl}/${patientId}/medical-history`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                displayMedicalHistory(data.records);
            }
        })
        .catch(error => console.error('Error loading medical history:', error));
}

function displayMedicalHistory(records) {
    const container = document.getElementById('medicalHistoryContainer');
    const noRecords = document.getElementById('noMedicalHistory');
    
    if (!records || !Array.isArray(records) || records.length === 0) {
        container.innerHTML = '';
        noRecords.style.display = 'block';
        return;
    }
    
    noRecords.style.display = 'none';
    
    container.innerHTML = records.map(record => `
        <div class="card mb-3">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <h6 class="card-title">${record.title}</h6>
                        <p class="text-muted mb-2">
                            <i class="fas fa-user-md me-1"></i>${record.doctor_name} | 
                            <i class="fas fa-calendar me-1"></i>${formatDate(record.visit_date)}
                        </p>
                    </div>
                    <button class="btn btn-outline-primary btn-sm" onclick="editMedicalRecord(${record.id})">
                        <i class="fas fa-edit"></i>
                    </button>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <strong>الأعراض:</strong>
                        <p>${record.symptoms || 'لا توجد'}</p>
                    </div>
                    <div class="col-md-6">
                        <strong>التشخيص:</strong>
                        <p>${record.diagnosis || 'لا يوجد'}</p>
                    </div>
                </div>
                <div class="mt-2">
                    <strong>العلاج:</strong>
                    <p>${record.treatment || 'لا يوجد'}</p>
                </div>
            </div>
        </div>
    `).join('');
}

function loadNotes() {
    document.getElementById('patientNotes').value = patientData?.notes || '';
}

function showAddAppointmentModal() {
    if (window.appointmentManager) {
        window.appointmentManager.reinitializeAddAppointmentModal();
    }
    const modal = new bootstrap.Modal(document.getElementById('addAppointmentModal'));
    modal.show();
}

function addMedicalRecord() {
    // Load doctors for the medical record form
    loadDoctorsForMedicalRecord();
    const modal = new bootstrap.Modal(document.getElementById('addMedicalRecordModal'));
    modal.show();
}

function loadDoctorsForMedicalRecord() {
    fetch('/api/doctors')
        .then(response => response.json())
        .then(data => {
            const doctorSelect = document.querySelector('#addMedicalRecordModal select[name="doctor_id"]');
            doctorSelect.innerHTML = '<option value="">اختر الطبيب</option>';
            
            let doctors = [];
            if (data.success && data.doctors) {
                doctors = data.doctors;
            } else if (Array.isArray(data)) {
                doctors = data;
            }
            
            doctors.forEach(doctor => {
                const option = document.createElement('option');
                option.value = doctor.id;
                option.textContent = doctor.name;
                doctorSelect.appendChild(option);
            });
        })
        .catch(error => console.error('Error loading doctors:', error));
}

function savePatientNotes() {
    const notes = document.getElementById('patientNotes').value;
    const isReceptionist = window.location.pathname.includes('receptionist');
    const baseUrl = isReceptionist ? '/receptionist' : '/admin';
    
    fetch(`${baseUrl}/patients/${patientId}/notes`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ notes: notes })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', 'تم حفظ الملاحظات بنجاح');
        } else {
            showAlert('danger', 'حدث خطأ في حفظ الملاحظات');
        }
    })
    .catch(error => {
        console.error('Error saving notes:', error);
        showAlert('danger', 'حدث خطأ في حفظ الملاحظات');
    });
}

// Utility functions
function formatDate(dateString) {
    if (!dateString) return '-';
    const date = new Date(dateString);
    return date.toLocaleDateString('en-GB');
}

function getStatusBadgeClass(status) {
    const classes = {
        'scheduled': 'bg-primary',
        'completed': 'bg-success',
        'cancelled': 'bg-danger',
        'no_show': 'bg-warning'
    };
    return classes[status] || 'bg-secondary';
}

function getStatusText(status) {
    const statusTexts = {
        'scheduled': 'مجدول',
        'completed': 'مكتمل',
        'cancelled': 'ملغي',
        'no_show': 'لم يحضر'
    };
    return statusTexts[status] || status;
}

function getPaymentMethodText(method) {
    const methods = {
        'cash': 'نقدي',
        'bank_transfer': 'تحويل بنكي',
        'card': 'بطاقة ائتمان'
    };
    return methods[method] || method;
}

// ===== Analysis/Service Requests functions =====
function loadAnalysisRequests() {
    const isReceptionist = window.location.pathname.includes('receptionist');
    const baseUrl = isReceptionist ? '/receptionist' : '/admin';
    return fetch(`${baseUrl}/patients/${patientId}/analysis-requests`)
        .then(r => r.json())
        .then(data => {
            const rows = (data && data.success) ? (data.data || []) : [];
            displayAnalysisRequests(rows);
        })
        .catch(err => console.error('Error loading analysis requests:', err));
}

function displayAnalysisRequests(requests) {
    const tbody = document.getElementById('analysis_requests_tbody');
    const loading = document.getElementById('analysis_requests_loading');
    const tableWrap = document.getElementById('analysis_requests_table_wrap');
    if (!tbody || !loading || !tableWrap) return;
    // Hide loading
    loading.classList.add('d-none');
    if (!Array.isArray(requests) || requests.length === 0) {
        tableWrap.classList.remove('d-none');
        tbody.innerHTML = '<tr><td colspan="8" class="text-center text-muted">لا توجد طلبات</td></tr>';
        return;
    }
    tableWrap.classList.remove('d-none');
    tbody.innerHTML = requests.map(req => {
        const items = Array.isArray(req.items) ? req.items : [];
        const itemsText = items.length ? items.map(it => it.name).join('، ') : '-';
        return `
        <tr>
            <td>${req.request_number || '-'}</td>
            <td>${getAnalysisCategoryText(req.category)}</td>
            <td>${itemsText}</td>
            <td>${Number(req.cost || 0).toFixed(2)} ج.م</td>
            <td>${Number(req.paid_amount || 0).toFixed(2)} ج.م</td>
            <td>${Number((req.remaining_amount != null ? req.remaining_amount : Math.max(0, (req.cost||0) - (req.paid_amount||0)))).toFixed(2)} ج.م</td>
            <td><span class="badge ${getAnalysisStatusBadge(req.status)}">${getAnalysisStatusText(req.status)}</span></td>
            <td>
                <div class="btn-group btn-group-sm">
                    <a class="btn btn-outline-secondary btn-sm" href="${(window.location.pathname.includes('receptionist') ? '/receptionist' : '/admin')}/analysis-requests/${req.id}/receipt" target="_blank" title="طباعة الإيصال"><i class="fas fa-print"></i></a>
                    <button class="btn btn-outline-primary btn-sm" onclick="openEditAnalysisRequest(${req.id})" title="تعديل"><i class="fas fa-edit"></i></button>
                </div>
            </td>
        </tr>`;
    }).join('');
}

function getAnalysisCategoryText(cat) {
    const m = { analysis: 'تحليل', xray: 'أشعة', lab: 'معمل', other: 'أخرى' };
    return m[cat] || cat || '-';
}
function getAnalysisStatusText(s) {
    const m = { pending: 'قيد الانتظار', in_progress: 'قيد التنفيذ', completed: 'مكتمل', cancelled: 'ملغي' };
    return m[s] || s || '-';
}
function getAnalysisStatusBadge(s) {
    const m = { pending: 'bg-warning text-dark', in_progress: 'bg-info', completed: 'bg-success', cancelled: 'bg-danger' };
    return m[s] || 'bg-secondary';
}

// ===== Edit Analysis/Service Request =====
function openEditAnalysisRequest(id) {
    // Fill modal with current data if present in table fetch cache; otherwise fetch single
    const isReceptionist = window.location.pathname.includes('receptionist');
    const baseUrl = isReceptionist ? '/receptionist' : '/admin';
    fetch(`${baseUrl}/analysis-requests/${id}`)
        .then(r => r.json())
        .then(data => {
            const req = data && data.data ? data.data : data.request || null;
            const modalEl = document.getElementById('editAnalysisModal');
            if (!modalEl) return;
            const statusEl = modalEl.querySelector('[name="status"]');
            if (statusEl) {
                statusEl.value = (req && req.status) ? req.status : 'pending';
            }
            const link = document.getElementById('current_result_file_link');
            if (link) {
                if (req && req.result_file_path) {
                    link.href = `/storage/${req.result_file_path}`;
                    link.classList.remove('d-none');
                } else {
                    link.classList.add('d-none');
                }
            }
            modalEl.setAttribute('data-id', id);
            if (window.bootstrap && bootstrap.Modal) {
                bootstrap.Modal.getOrCreateInstance(modalEl).show();
            } else if (window.$ && typeof $('#editAnalysisModal').modal === 'function') {
                $('#editAnalysisModal').modal('show');
            } else {
                openModalFallback(modalEl);
            }
        })
        .catch(() => {
            // fallback: open modal with defaults
            const modalEl = document.getElementById('editAnalysisModal');
            if (!modalEl) return;
            modalEl.setAttribute('data-id', id);
            bootstrap.Modal.getOrCreateInstance(modalEl).show();
        });
}

function submitEditAnalysisRequest(e) {
    e.preventDefault();
    const form = e.target;
    const modalEl = document.getElementById('editAnalysisModal');
    const id = modalEl?.getAttribute('data-id');
    if (!id) return;
    const isReceptionist = window.location.pathname.includes('receptionist');
    const baseUrl = isReceptionist ? '/receptionist' : '/admin';
    const fd = new FormData(form);
    fetch(`${baseUrl}/analysis-requests/${id}`, {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, 'Accept': 'application/json' },
        body: (fd.append('_method','PUT'), fd)
    })
    .then(r => r.json())
    .then(data => {
        if (data && data.success) {
            bootstrap.Modal.getInstance(modalEl)?.hide();
            loadAnalysisRequests();
        } else {
            alert('فشل التحديث');
        }
    })
    .catch(() => alert('خطأ في الاتصال'));
}

function showAddAnalysisRequest() {
    try {
        loadDoctorsForAnalysis();
        const form = document.getElementById('addAnalysisForm');
        if (form) form.reset();
        const remain = document.getElementById('add_analysis_remaining');
        if (remain) remain.textContent = '0.00 ج.م';
        const modalEl = document.getElementById('addAnalysisModal');
        if (modalEl) {
            if (window.bootstrap && bootstrap.Modal) {
                let instance = bootstrap.Modal.getInstance(modalEl);
                if (!instance) {
                    instance = new bootstrap.Modal(modalEl, { backdrop: true, keyboard: true, focus: true });
                }
                instance.show();
            } else if (window.$ && typeof $('#addAnalysisModal').modal === 'function') {
                $('#addAnalysisModal').modal('show');
            } else {
                // Fallback: manual show
                openModalFallback(modalEl);
            }
        }
    } catch(e) { console.error(e); }
}

function loadDoctorsForAnalysis() {
    fetch('/api/doctors')
        .then(r => r.json())
        .then(data => {
            const doctors = Array.isArray(data) ? data : (data.doctors || []);
            const opts = ['<option value="">اختر الطبيب (اختياري)</option>'].concat(
                doctors.map(d => `<option value="${d.id}">${d.name}</option>`) 
            ).join('');
            const sel1 = document.querySelector('#addAnalysisModal select[name="doctor_id"]');
            const sel2 = document.querySelector('#editAnalysisModal select[name="doctor_id"]');
            if (sel1) sel1.innerHTML = opts;
            if (sel2) sel2.innerHTML = opts;
        })
        .catch(() => {});
}

function updateAddAnalysisRemaining() {
    const cost = parseFloat(document.querySelector('#addAnalysisModal [name="cost"]')?.value || '0');
    const paid = parseFloat(document.querySelector('#addAnalysisModal [name="paid_amount"]')?.value || '0');
    const remain = Math.max(0, cost - paid);
    const el = document.getElementById('add_analysis_remaining');
    if (el) el.textContent = remain.toFixed(2) + ' ج.م';
}

function submitAddAnalysisRequest(e) {
    e.preventDefault();
    const form = e.target;
    const isReceptionist = window.location.pathname.includes('receptionist');
    const baseUrl = isReceptionist ? '/receptionist' : '/admin';
    const fd = new FormData(form);
    fd.set('patient_id', patientId);
    if (!fd.get('requested_by')) fd.set('requested_by', 'receptionist');
    // Append multi services
    const sel = document.getElementById('add_analysis_service');
    if (sel) {
        const selectedIds = Array.from(sel.selectedOptions).map(o => o.value).filter(Boolean);
        // Remove potential single service param if exists; backend supports both
        fd.delete('service_id');
        selectedIds.forEach(id => fd.append('service_ids[]', id));
    }
    fetch(`${baseUrl}/analysis-requests`, {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, 'Accept': 'application/json' },
        body: fd
    })
    .then(r => r.json())
    .then(data => {
        if (data && data.success) {
            const modal = bootstrap.Modal.getInstance(document.getElementById('addAnalysisModal'));
            if (modal) modal.hide();
            loadAnalysisRequests();
            showAlert('success', 'تم إضافة الطلب بنجاح');
            // Print receipt
            if (data.request) {
                printAnalysisReceipt(data.request, data.payment);
            }
        } else {
            showAlert('danger', (data && data.message) || 'فشل إضافة الطلب');
        }
    })
    .catch(() => showAlert('danger', 'خطأ في الاتصال'));
}

let currentAnalysisId = null;
// Removed legacy duplicate edit-analysis functions that referenced non-existent fields

function showLoadingModal() {
    const modal = new bootstrap.Modal(document.getElementById('loadingModal'));
    modal.show();
}

function hideLoadingModal() {
    const modal = bootstrap.Modal.getInstance(document.getElementById('loadingModal'));
    if (modal) {
        modal.hide();
    } else {
        // Fallback: force hide the modal if getInstance fails
        const modalElement = document.getElementById('loadingModal');
        if (modalElement) {
            modalElement.style.display = 'none';
            modalElement.classList.remove('show');
            document.body.classList.remove('modal-open');
            
            // Remove backdrop if exists
            const backdrop = document.querySelector('.modal-backdrop');
            if (backdrop) {
                backdrop.remove();
            }
        }
    }
}

function showAlert(type, message) {
    // Create alert element
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    // Insert at top of container
    const container = document.querySelector('.container-fluid');
    container.insertBefore(alertDiv, container.firstChild);
    
    // Auto dismiss after 5 seconds
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.remove();
        }
    }, 5000);
}

function showError(message) {
    showAlert('danger', message);
}
</script>

<style>
.bg-gradient-primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
}

.avatar-lg {
    width: 60px;
    height: 60px;
}

.nav-tabs .nav-link {
    border: none;
    color: #6c757d;
}

.nav-tabs .nav-link.active {
    background-color: transparent;
    border-bottom: 2px solid #007bff;
    color: #007bff;
}

.card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.btn-group-sm > .btn {
    padding: 0.25rem 0.5rem;
}

.table th {
    border-top: none;
    font-weight: 600;
}
</style>
@endsection