@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>
                </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-money-bill-wave fa-2x text-success mb-2"></i>
                    <h5 class="mb-1" id="totalPayments">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-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>

    <!-- Tab Content -->
    <div class="tab-content" id="patientTabsContent">
        <!-- 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')

<!-- 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-4">
                <div class="spinner-border text-primary mb-3" role="status">
                    <span class="visually-hidden">جاري التحميل...</span>
                </div>
                <p class="mb-0">جاري تحميل البيانات...</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;
}

document.addEventListener('DOMContentLoaded', function() {
    patientId = getPatientIdFromUrl();
    
    if (patientId) {
        // Initialize managers
        appointmentManager = initAppointmentManager(patientId);
        paymentManager = initPaymentManager(patientId);
        patientManager = initPatientManager(patientId);
        
        loadPatientProfile();
    } else {
        showError('معرف المريض غير صحيح');
    }
});

// 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 => response.json())
        .then(data => {
            if (data.success) {
                patientData = data.patient;
                patientManager.setPatientData(patientData);
                displayPatientInfo(data.patient);
                displayPatientStats(data.stats);
                loadAppointments();
                loadMedicalHistory();
                loadPayments();
                loadNotes();
            } else {
                showError('فشل في تحميل بيانات المريض');
            }
        })
        .catch(error => {
            console.error('Error loading patient profile:', error);
            showError('حدث خطأ في تحميل البيانات');
        })
        .finally(() => {
            hideLoadingModal();
        });
}

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('totalPayments').textContent = (stats.total_payments || 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';
    
    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';
    
    tbody.innerHTML = appointments.map(appointment => `
        <tr>
            <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>
        </tr>
    `).join('');
}

function loadPayments() {
    const isReceptionist = window.location.pathname.includes('receptionist');
    const baseUrl = isReceptionist ? '/receptionist/patients' : '/admin/patients';
    
    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';
    
    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.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() {
    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;
}

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();
}

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>

</div>

    <!-- Tabs Navigation -->
    <div class="card">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs" 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-alt 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-credit-card 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>
        </div>
        
        <div class="card-body">
            <div class="tab-content" id="patientTabsContent">
                <!-- 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" data-bs-toggle="modal" data-bs-target="#bookAppointmentModal">
                            <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-primary 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>
                                </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="mb-3">
                        <label class="form-label">ملاحظات عامة</label>
                        <textarea class="form-control" id="generalNotes" rows="6" placeholder="أضف ملاحظات عامة عن المريض..."></textarea>
                    </div>
                    <button class="btn btn-primary" onclick="saveNotes()">
                        <i class="fas fa-save me-2"></i>حفظ الملاحظات
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- View Appointment Modal -->
<div class="modal fade" id="viewAppointmentModal" tabindex="-1">
    <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"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>المريض:</strong> <span id="viewPatientName"></span></p>
                        <p><strong>الطبيب:</strong> <span id="viewDoctorName"></span></p>
                        <p><strong>التاريخ:</strong> <span id="viewAppointmentDate"></span></p>
                        <p><strong>الوقت:</strong> <span id="viewAppointmentTime"></span></p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>نوع الزيارة:</strong> <span id="viewAppointmentType"></span></p>
                        <p><strong>الحالة:</strong> <span id="viewAppointmentStatus"></span></p>
                        <p><strong>التكلفة:</strong> <span id="viewAppointmentCost"></span></p>
                        <p><strong>رقم الحجز:</strong> <span id="viewBookingReference"></span></p>
                    </div>
                </div>
                <div class="mt-3">
                    <p><strong>ملاحظات:</strong></p>
                    <p id="viewAppointmentNotes" class="text-muted"></p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
                <button type="button" class="btn btn-primary" onclick="editAppointmentFromView()">تعديل الموعد</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Appointment Modal -->
<div class="modal fade" id="editAppointmentModal" tabindex="-1">
    <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"></button>
            </div>
            <form id="editAppointmentForm">
                <div class="modal-body">
                    <input type="hidden" id="editAppointmentId" name="appointment_id">
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">الطبيب</label>
                                <select class="form-control" id="editAppointmentDoctor" name="doctor_id" required>
                                    <option value="">اختر الطبيب</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">التاريخ</label>
                                <input type="date" class="form-control" id="editAppointmentDate" name="appointment_date" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">الوقت المتاح</label>
                                <select class="form-control" id="editAppointmentTime" name="appointment_time" required>
                                    <option value="">اختر الوقت المتاح</option>
                                </select>
                                <div class="form-text text-muted">
                                    <i class="fas fa-info-circle me-1"></i>
                                    اختر الطبيب والتاريخ أولاً لعرض الأوقات المتاحة
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">نوع الزيارة</label>
                                <select class="form-control" id="editAppointmentType" name="appointment_type">
                                    <option value="check-up">كشف عام</option>
                                    <option value="follow-up">متابعة</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">الحالة</label>
                                <select class="form-control" id="editAppointmentStatus" name="status">
                                    <option value="جديد">جديد</option>
                                    <option value="في الانتظار">في الانتظار</option>
                                    <option value="مؤكد">مؤكد</option>
                                    <option value="مكتمل">مكتمل</option>
                                    <option value="ملغي">ملغي</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">التكلفة</label>
                                <input type="number" class="form-control" id="editAppointmentCost" name="cost" step="0.01" min="0">
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">ملاحظات</label>
                        <textarea class="form-control" id="editAppointmentNotes" name="notes" rows="3"></textarea>
                    </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>

<!-- Add Payment Modal -->
<div class="modal fade" id="addPaymentModal" tabindex="-1">
    <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"></button>
            </div>
            <form id="addPaymentForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">المبلغ *</label>
                        <input type="number" class="form-control" name="amount" step="0.01" min="0" required>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">طريقة الدفع *</label>
                        <select class="form-control" name="payment_method" required>
                            <option value="">اختر طريقة الدفع</option>
                            <option value="cash">نقدي</option>
                            <option value="bank_transfer">تحويل بنكي</option>
                            <option value="card">بطاقة ائتمان</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">ملاحظات</label>
                        <textarea class="form-control" name="notes" rows="3" placeholder="ملاحظات إضافية عن الدفعة..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                    <button type="submit" class="btn btn-success">تسجيل الدفعة</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Patient Modal -->
<div class="modal fade" id="editPatientModal" tabindex="-1">
    <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"></button>
            </div>
            <form id="editPatientForm">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">الاسم الكامل *</label>
                                <input type="text" class="form-control" id="editPatientName" name="name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">رقم الجوال *</label>
                                <input type="text" class="form-control" id="editPatientMobile" name="mobile" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">العمر</label>
                                <input type="number" class="form-control" id="editPatientAge" name="age" min="0" max="150">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">الجنس</label>
                                <select class="form-control" id="editPatientGender" name="gender">
                                    <option value="">غير محدد</option>
                                    <option value="ذكر">ذكر</option>
                                    <option value="أنثى">أنثى</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">ملاحظات عامة</label>
                        <textarea class="form-control" id="editPatientNotes" name="notes" rows="4"></textarea>
                    </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>

<!-- Add Medical Record Modal -->
<div class="modal fade" id="addMedicalRecordModal" tabindex="-1">
    <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"></button>
            </div>
            <form id="addMedicalRecordForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">عنوان السجل *</label>
                        <input type="text" class="form-control" name="title" required placeholder="مثال: زيارة طبية، فحص دوري، متابعة...">
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">الطبيب المعالج</label>
                                <select class="form-control" name="doctor_id">
                                    <option value="">اختر الطبيب</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">تاريخ الزيارة</label>
                                <input type="date" class="form-control" name="visit_date">
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">الأعراض</label>
                        <textarea class="form-control" name="symptoms" rows="3" placeholder="وصف الأعراض التي يعاني منها المريض..."></textarea>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">التشخيص</label>
                        <textarea class="form-control" name="diagnosis" rows="3" placeholder="التشخيص الطبي..."></textarea>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">العلاج الموصوف</label>
                        <textarea class="form-control" name="treatment" rows="3" placeholder="الأدوية والعلاج الموصوف..."></textarea>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">ملاحظات إضافية</label>
                        <textarea class="form-control" name="notes" rows="2" placeholder="أي ملاحظات أخرى..."></textarea>
                    </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-4">
                <div class="spinner-border text-primary mb-3" role="status">
                    <span class="visually-hidden">جاري التحميل...</span>
                </div>
                <div>جاري تحميل بيانات المريض...</div>
            </div>
        </div>
    </div>
</div>

<!-- Book Appointment Modal -->
<div class="modal fade" id="bookAppointmentModal" tabindex="-1" aria-labelledby="bookAppointmentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="bookAppointmentModalLabel">
                    <i class="fas fa-calendar-plus me-2"></i>حجز موعد + تسجيل الدفعة
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="إغلاق"></button>
            </div>
            
            <div class="modal-body">
                <div id="appointmentAlertContainer" style="display: none;"></div>
                
                <form id="appointmentForm">
                    @csrf
                    <input type="hidden" id="appointmentPatientId" name="patient_id" value="">
                    
                    <div class="row mb-3">
                        <div class="col-12">
                            <div class="alert alert-info">
                                <strong>المريض:</strong> <span id="modalPatientName"></span><br>
                                <strong>رقم الجوال:</strong> <span id="modalPatientMobile"></span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="appointmentDoctor" class="form-label">الطبيب *</label>
                                <select class="form-control" id="appointmentDoctor" name="doctor_id" required>
                                    <option value="">اختر الطبيب</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="appointmentDate" class="form-label">التاريخ *</label>
                                <input type="date" class="form-control" id="appointmentDate" name="appointment_date" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="appointmentTime" class="form-label">الوقت *</label>
                                <select class="form-control" id="appointmentTime" name="appointment_time" required>
                                    <option value="">اختر الوقت المتاح</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="appointmentType" class="form-label">نوع الزيارة</label>
                                <select class="form-control" id="appointmentType" name="appointment_type">
                                    <option value="">—</option>
                                    <option value="check-up">كشف عام</option>
                                    <option value="follow-up">متابعة</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="appointmentNotes" class="form-label">ملاحظات الموعد</label>
                        <textarea class="form-control" id="appointmentNotes" name="notes" rows="2"></textarea>
                    </div>
                    
                    <hr>
                    <h6 class="mb-3">تفاصيل الدفع</h6>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="consultationFee" class="form-label">رسوم الاستشارة *</label>
                                <input type="number" class="form-control" id="consultationFee" name="consultation_fee" step="0.01" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="paidAmount" class="form-label">المبلغ المدفوع *</label>
                                <input type="number" class="form-control" id="paidAmount" name="paid_amount" step="0.01" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="remainingAmount" class="form-label">المبلغ المتبقي</label>
                                <input type="number" class="form-control" id="remainingAmount" name="remaining_amount" step="0.01" readonly>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="paymentMethod" class="form-label">طريقة الدفع *</label>
                        <select class="form-control" name="payment_method" required>
                            <option value="">اختر طريقة الدفع</option>
                            <option value="cash">نقدي</option>
                            <option value="bank_transfer">تحويل بنكي</option>
                            <option value="card">بطاقة ائتمان</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                <button type="button" class="btn btn-success" onclick="submitAppointment()">
                    <i class="fas fa-save me-2"></i>حجز الموعد والدفع
                </button>
            </div>
        </div>
    </div>
</div>

<script>
// Get patient ID from URL
let patientId = null;
let patientData = null;

// 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;
}

document.addEventListener('DOMContentLoaded', function() {
    patientId = getPatientIdFromUrl();
    
    if (patientId) {
        loadPatientProfile();
    } else {
        showError('معرف المريض غير صحيح');
    }
});

// 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 => response.json())
        .then(data => {
            if (data.success) {
                patientData = data.patient;
                displayPatientInfo(data.patient);
                displayPatientStats(data.stats);
                loadAppointments();
                loadMedicalHistory();
                loadPayments();
                loadNotes();
            } else {
                showError('فشل في تحميل بيانات المريض');
            }
        })
        .catch(error => {
            console.error('Error loading patient profile:', error);
            showError('حدث خطأ في تحميل البيانات');
        })
        .finally(() => {
            hideLoadingModal();
        });
}

// Display patient information
function displayPatientInfo(patient) {
    document.getElementById('patientName').textContent = patient.name;
    document.getElementById('patientNumber').textContent = patient.patient_number || 'غير محدد';
    document.getElementById('fullName').textContent = patient.name;
    document.getElementById('mobile').textContent = patient.mobile;
    document.getElementById('age').textContent = patient.age || 'غير محدد';
    document.getElementById('gender').textContent = patient.gender || 'غير محدد';
    document.getElementById('registrationDate').textContent = formatDate(patient.created_at);
    document.getElementById('generalNotes').value = patient.notes || '';
}

// Display patient statistics
function displayPatientStats(stats) {
    document.getElementById('totalAppointments').textContent = stats.total_appointments;
    document.getElementById('upcomingAppointments').textContent = stats.upcoming_appointments;
    document.getElementById('completedAppointments').textContent = stats.completed_appointments;
    document.getElementById('medicalRecords').textContent = stats.medical_records;
    document.getElementById('totalPayments').textContent = stats.total_payments + ' ج.م';
}

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

// Display appointments
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';
    
    tbody.innerHTML = appointments.map(appointment => `
        <tr>
            <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>
        </tr>
    `).join('');
}

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

// Display medical history
function displayMedicalHistory(medicalHistory) {
    const container = document.getElementById('medicalHistoryContainer');
    const noHistory = document.getElementById('noMedicalHistory');
    
    if (medicalHistory.length === 0) {
        container.innerHTML = '';
        noHistory.style.display = 'block';
        return;
    }
    
    noHistory.style.display = 'none';
    
    container.innerHTML = medicalHistory.map(record => `
        <div class="card mb-3">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <h6 class="card-title mb-0">${record.title}</h6>
                    <small class="text-muted">${formatDate(record.created_at)}</small>
                </div>
                <p class="card-text">${record.description}</p>
                <div class="d-flex justify-content-between align-items-center">
                    <small class="text-muted">الطبيب: ${record.doctor_name}</small>
                    <div class="btn-group btn-group-sm">
                        <button class="btn btn-outline-info btn-sm" onclick="viewAppointment(${record.appointment_id})" title="عرض التفاصيل">
                            <i class="fas fa-eye"></i>
                        </button>
                        <button class="btn btn-outline-primary btn-sm" onclick="editMedicalRecord(${record.id})" title="تعديل">
                            <i class="fas fa-edit"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `).join('');
}

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

// Display payments
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 class="fw-bold text-success">${payment.amount} ج.م</td>
            <td>${payment.payment_method}</td>
            <td>${payment.appointment_date || '-'}</td>
            <td>
                <span class="badge ${payment.status === 'completed' ? 'bg-success' : 'bg-warning'}">
                    ${payment.status === 'completed' ? 'مكتمل' : 'معلق'}
                </span>
            </td>
        </tr>
    `).join('');
}

// Load notes
function loadNotes() {
    // Notes are already loaded with patient info
    if (patientData && patientData.last_updated) {
        document.getElementById('lastUpdate').textContent = formatDate(patientData.updated_at);
    }
    if (patientData && patientData.created_by_name) {
        document.getElementById('createdBy').textContent = patientData.created_by_name;
    }
}

// Action functions
function editPatient() {
    alert('سيتم تنفيذ تعديل بيانات المريض قريباً');
}

function addMedicalRecord() {
    alert('سيتم تنفيذ إضافة سجل طبي قريباً');
}

// Appointment booking functions
document.addEventListener('DOMContentLoaded', function() {
    // Load doctors when modal is shown
    const bookAppointmentModal = document.getElementById('bookAppointmentModal');
    if (bookAppointmentModal) {
        bookAppointmentModal.addEventListener('show.bs.modal', function() {
            loadDoctorsForAppointment();
            populatePatientInfoInModal();
        });
    }
    
    // Load available times when doctor or date changes
    document.getElementById('appointmentDoctor')?.addEventListener('change', function() {
        updateConsultationFee();
        loadAvailableTimes();
    });
    document.getElementById('appointmentDate')?.addEventListener('change', loadAvailableTimes);
    
    // Calculate remaining amount when consultation fee or paid amount changes
    document.getElementById('consultationFee')?.addEventListener('input', calculateRemainingAmount);
    document.getElementById('paidAmount')?.addEventListener('input', calculateRemainingAmount);
    
    // Add event listener for appointment type changes
    const typeSelect = document.getElementById('appointmentType');
    if (typeSelect) {
        typeSelect.addEventListener('change', updateConsultationFee);
    }
});

function populatePatientInfoInModal() {
    if (patientData) {
        document.getElementById('appointmentPatientId').value = patientData.id;
        document.getElementById('modalPatientName').textContent = patientData.name;
        document.getElementById('modalPatientMobile').textContent = patientData.mobile;
    }
}

function loadDoctorsForAppointment() {
    console.log('Loading doctors...');
    fetch('/api/doctors')
        .then(response => {
            console.log('Doctor API response status:', response.status);
            return response.json();
        })
        .then(data => {
            console.log('Doctor API data:', data);
            const doctorSelect = document.getElementById('appointmentDoctor');
            if (!doctorSelect) {
                console.error('Doctor select element not found');
                return;
            }
            
            doctorSelect.innerHTML = '<option value="">اختر الطبيب</option>';
            
            // Handle both response formats: {success: true, doctors: [...]} or direct array [...]
            let doctors = [];
            if (data.success && data.doctors) {
                doctors = data.doctors;
            } else if (Array.isArray(data)) {
                doctors = data;
            }
            
            if (doctors.length > 0) {
                doctors.forEach(doctor => {
                    console.log('Doctor:', doctor.name, 'Checkup Cost:', doctor.checkup_cost, 'Followup Cost:', doctor.followup_cost);
                    const option = document.createElement('option');
                    option.value = doctor.id;
                    option.textContent = doctor.name;
                    option.dataset.checkupCost = doctor.checkup_cost;
                    option.dataset.followupCost = doctor.followup_cost;
                    doctorSelect.appendChild(option);
                });
                console.log('Loaded', doctors.length, 'doctors');
            } else {
                console.log('No doctors found in response');
                doctorSelect.innerHTML = '<option value="">لا توجد أطباء متاحون</option>';
            }
        })
        .catch(error => {
            console.error('Error loading doctors:', error);
            showAppointmentAlert('فشل في تحميل قائمة الأطباء', 'danger');
        });
}

function updateConsultationFee() {
    const selectedDoctor = document.getElementById('appointmentDoctor').selectedOptions[0];
    const appointmentType = document.getElementById('appointmentType')?.value;
    
    if (selectedDoctor) {
        let suggestedCost = 0;
        
        if (appointmentType === 'follow-up' && selectedDoctor.dataset.followupCost) {
            suggestedCost = selectedDoctor.dataset.followupCost;
        } else if (appointmentType === 'check-up' && selectedDoctor.dataset.checkupCost) {
            suggestedCost = selectedDoctor.dataset.checkupCost;
        } else if (selectedDoctor.dataset.defaultCost) {
            suggestedCost = selectedDoctor.dataset.defaultCost;
        }
        
        const costField = document.querySelector('[name="cost"]');
        if (costField && !costField.value) {
            costField.value = suggestedCost;
        }
        
        document.getElementById('consultationFee').value = suggestedCost;
        calculateRemainingAmount();
    }
}

function calculateRemainingAmount() {
    const consultationFee = parseFloat(document.getElementById('consultationFee').value) || 0;
    const paidAmount = parseFloat(document.getElementById('paidAmount').value) || 0;
    const remainingAmount = consultationFee - paidAmount;
    document.getElementById('remainingAmount').value = remainingAmount.toFixed(2);
}

function loadAvailableTimes() {
    const doctorId = document.getElementById('appointmentDoctor').value;
    const appointmentDate = document.getElementById('appointmentDate').value;
    const timeSelect = document.getElementById('appointmentTime');
    
    console.log('Loading available times for doctor:', doctorId, 'date:', appointmentDate);
    
    if (!doctorId || !appointmentDate) {
        timeSelect.innerHTML = '<option value="">اختر الوقت المتاح</option>';
        return;
    }
    
    const isReceptionist = window.location.pathname.includes('receptionist');
    const baseUrl = isReceptionist ? '/receptionist' : '/admin';
    const url = `${baseUrl}/available-slots/${doctorId}/${appointmentDate}`;
    
    console.log('Fetching available slots from:', url);
    
    fetch(url)
        .then(response => {
            console.log('Available slots response status:', response.status);
            return response.json();
        })
        .then(data => {
            console.log('Available slots data:', data);
            timeSelect.innerHTML = '<option value="">اختر الوقت المتاح</option>';
            
            if (data.success && data.slots && data.slots.length > 0) {
                data.slots.forEach(slot => {
                    const option = document.createElement('option');
                    option.value = slot.time;
                    option.textContent = slot.time;
                    timeSelect.appendChild(option);
                });
                console.log('Loaded', data.slots.length, 'time slots');
            } else {
                console.log('No time slots available');
                timeSelect.innerHTML = '<option value="">لا توجد أوقات متاحة</option>';
            }
        })
        .catch(error => {
            console.error('Error loading available times:', error);
            timeSelect.innerHTML = '<option value="">خطأ في تحميل الأوقات</option>';
        });
}

function submitAppointment() {
    const form = document.getElementById('appointmentForm');
    const formData = new FormData(form);
    
    // Debug: Log form data
    console.log('Form data being sent:');
    for (let [key, value] of formData.entries()) {
        console.log(key + ': ' + value);
    }
    
    // Validate required fields
    const requiredFields = ['patient_id', 'doctor_id', 'appointment_date', 'appointment_time', 'consultation_fee', 'paid_amount', 'payment_method'];
    for (let field of requiredFields) {
        if (!formData.get(field)) {
            showAppointmentAlert(`يرجى ملء الحقل: ${field}`, 'danger');
            return;
        }
    }
    
    const isReceptionist = window.location.pathname.includes('receptionist');
    const baseUrl = isReceptionist ? '/receptionist' : '/admin';
    
    fetch(`${baseUrl}/book-appointment-payment`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: formData
    })
    .then(response => {
        console.log('Response status:', response.status);
        return response.text().then(text => {
            console.log('Response text:', text);
            try {
                return JSON.parse(text);
            } catch (e) {
                console.error('Failed to parse JSON:', e);
                throw new Error('Invalid JSON response: ' + text);
            }
        });
    })
    .then(data => {
        console.log('Response data:', data);
        if (data.success) {
            showAppointmentAlert('تم حجز الموعد وتسجيل الدفعة بنجاح', 'success');
            setTimeout(() => {
                const modal = bootstrap.Modal.getInstance(document.getElementById('bookAppointmentModal'));
                modal.hide();
                loadAppointments(); // Refresh appointments list
                form.reset();
            }, 1500);
        } else {
            showAppointmentAlert(data.message || 'فشل في حجز الموعد', 'danger');
        }
    })
    .catch(error => {
        console.error('Error booking appointment:', error);
        showAppointmentAlert('حدث خطأ في حجز الموعد: ' + error.message, 'danger');
    });
}

function showAppointmentAlert(message, type) {
    const alertContainer = document.getElementById('appointmentAlertContainer');
    alertContainer.innerHTML = `
        <div class="alert alert-${type} alert-dismissible fade show" role="alert">
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;
    alertContainer.style.display = 'block';
}

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

function viewAppointment(appointmentId) {
    alert('سيتم عرض تفاصيل الموعد قريباً');
}

function cancelAppointment(appointmentId) {
    if (confirm('هل أنت متأكد من إلغاء هذا الموعد؟')) {
        alert('سيتم إلغاء الموعد قريباً');
    }
}

function editMedicalRecord(recordId) {
    alert('سيتم تعديل السجل الطبي قريباً');
}

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

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;
}

// View Appointment Modal Functions
function viewAppointment(appointmentId) {
    const isReceptionist = window.location.pathname.includes('receptionist');
    const baseUrl = isReceptionist ? '/receptionist' : '/admin';
    
    fetch(`${baseUrl}/appointments/${appointmentId}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const appointment = data.appointment;
                document.getElementById('viewPatientName').textContent = appointment.patient_name;
                document.getElementById('viewDoctorName').textContent = appointment.doctor_name;
                document.getElementById('viewAppointmentDate').textContent = formatDate(appointment.appointment_date);
                document.getElementById('viewAppointmentTime').textContent = appointment.appointment_time;
                document.getElementById('viewAppointmentType').textContent = appointment.appointment_type === 'check-up' ? 'كشف عام' : 'متابعة';
                document.getElementById('viewAppointmentStatus').textContent = appointment.status;
                document.getElementById('viewAppointmentCost').textContent = appointment.cost ? appointment.cost + ' ج.م' : 'غير محدد';
                document.getElementById('viewBookingReference').textContent = appointment.booking_reference || 'غير متوفر';
                document.getElementById('viewAppointmentNotes').textContent = appointment.notes || 'لا توجد ملاحظات';
                
                // Store appointment ID for edit function
                window.currentAppointmentId = appointmentId;
                
                new bootstrap.Modal(document.getElementById('viewAppointmentModal')).show();
            }
        })
        .catch(error => {
            console.error('Error loading appointment:', error);
            showAlert('danger', 'حدث خطأ في تحميل بيانات الموعد');
        });
}

// Edit Appointment Functions
function editAppointment(appointmentId) {
    const isReceptionist = window.location.pathname.includes('receptionist');
    const baseUrl = isReceptionist ? '/receptionist' : '/admin';
    
    // Load doctors first
    loadDoctorsForEdit();
    
    // Load appointment data
    fetch(`${baseUrl}/appointments/${appointmentId}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const appointment = data.appointment;
                document.getElementById('editAppointmentId').value = appointmentId;
                document.getElementById('editAppointmentDoctor').value = appointment.doctor_id;
                document.getElementById('editAppointmentDate').value = appointment.appointment_date;
                document.getElementById('editAppointmentTime').value = appointment.appointment_time;
                document.getElementById('editAppointmentType').value = appointment.appointment_type;
                document.getElementById('editAppointmentStatus').value = appointment.status;
                document.getElementById('editAppointmentCost').value = appointment.cost;
                document.getElementById('editAppointmentNotes').value = appointment.notes || '';
                
                new bootstrap.Modal(document.getElementById('editAppointmentModal')).show();
            }
        })
        .catch(error => {
            console.error('Error loading appointment:', error);
            showAlert('danger', 'حدث خطأ في تحميل بيانات الموعد');
        });
}

function editAppointmentFromView() {
    document.querySelector('#viewAppointmentModal .btn-close').click();
    setTimeout(() => editAppointment(window.currentAppointmentId), 300);
}

function loadDoctorsForEdit() {
    fetch('/api/doctors')
        .then(response => response.json())
        .then(data => {
            const doctorSelect = document.getElementById('editAppointmentDoctor');
            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);
            });
            
            // Add event listener for doctor change
            doctorSelect.addEventListener('change', loadAvailableTimeSlotsForEdit);
        })
        .catch(error => console.error('Error loading doctors:', error));
}

function loadAvailableTimeSlotsForEdit() {
    const doctorId = document.getElementById('editAppointmentDoctor').value;
    const appointmentDate = document.getElementById('editAppointmentDate').value;
    const timeSelect = document.getElementById('editAppointmentTime');
    const currentAppointmentId = document.getElementById('editAppointmentId').value;
    
    // Clear existing options
    timeSelect.innerHTML = '<option value="">اختر الوقت المتاح</option>';
    
    if (!doctorId || !appointmentDate) {
        return;
    }
    
    const isReceptionist = window.location.pathname.includes('receptionist');
    const baseUrl = isReceptionist ? '/receptionist' : '/admin';
    
    // Show loading state
    timeSelect.innerHTML = '<option value="">جاري تحميل الأوقات المتاحة...</option>';
    timeSelect.disabled = true;
    
    fetch(`${baseUrl}/available-slots?doctor_id=${doctorId}&date=${appointmentDate}&exclude_appointment=${currentAppointmentId}`)
        .then(response => response.json())
        .then(data => {
            timeSelect.innerHTML = '<option value="">اختر الوقت المتاح</option>';
            timeSelect.disabled = false;
            
            if (data.success && data.slots && data.slots.length > 0) {
                data.slots.forEach(slot => {
                    const option = document.createElement('option');
                    option.value = slot.time;
                    option.textContent = `${slot.time} - ${slot.status === 'available' ? 'متاح' : 'محجوز'}`;
                    if (slot.status !== 'available') {
                        option.disabled = true;
                        option.style.color = '#dc3545';
                    }
                    timeSelect.appendChild(option);
                });
            } else {
                timeSelect.innerHTML = '<option value="">لا توجد أوقات متاحة في هذا التاريخ</option>';
            }
        })
        .catch(error => {
            console.error('Error loading time slots:', error);
            timeSelect.innerHTML = '<option value="">خطأ في تحميل الأوقات</option>';
            timeSelect.disabled = false;
        });
}

// Delete Appointment Function
function deleteAppointment(appointmentId) {
    if (!confirm('هل أنت متأكد من حذف هذا الموعد؟')) {
        return;
    }
    
    const isReceptionist = window.location.pathname.includes('receptionist');
    const baseUrl = isReceptionist ? '/receptionist' : '/admin';
    
    fetch(`${baseUrl}/appointments/${appointmentId}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', 'تم حذف الموعد بنجاح');
            loadAppointments(); // Reload appointments list
        } else {
            showAlert('danger', data.message || 'حدث خطأ في حذف الموعد');
        }
    })
    .catch(error => {
        console.error('Error deleting appointment:', error);
        showAlert('danger', 'حدث خطأ في حذف الموعد');
    });
}

// Edit Patient Functions
function editPatientInfo() {
    if (!patientData) {
        showAlert('danger', 'لم يتم تحميل بيانات المريض بعد');
        return;
    }
    
    document.getElementById('editPatientName').value = patientData.name;
    document.getElementById('editPatientMobile').value = patientData.mobile;
    document.getElementById('editPatientAge').value = patientData.age || '';
    document.getElementById('editPatientGender').value = patientData.gender || '';
    document.getElementById('editPatientNotes').value = patientData.notes || '';
    
    new bootstrap.Modal(document.getElementById('editPatientModal')).show();
}

// Add Payment Function
function addPayment() {
    new bootstrap.Modal(document.getElementById('addPaymentModal')).show();
}

// Medical Record Functions
function editMedicalRecord(recordId) {
    alert('سيتم تعديل السجل الطبي قريباً');
}

function addMedicalRecord() {
    // Load doctors for the medical record form
    loadDoctorsForMedicalRecord();
    new bootstrap.Modal(document.getElementById('addMedicalRecordModal')).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));
}

// Form Submit Handlers
document.addEventListener('DOMContentLoaded', function() {
    // Add event listener for date change in edit appointment
    document.getElementById('editAppointmentDate').addEventListener('change', loadAvailableTimeSlotsForEdit);
    
    // Edit Appointment Form
    document.getElementById('editAppointmentForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const appointmentId = formData.get('appointment_id');
        const isReceptionist = window.location.pathname.includes('receptionist');
        const baseUrl = isReceptionist ? '/receptionist' : '/admin';
        
        fetch(`${baseUrl}/appointments/${appointmentId}`, {
            method: 'PUT',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(Object.fromEntries(formData))
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('success', 'تم تحديث الموعد بنجاح');
                document.querySelector('#editAppointmentModal .btn-close').click();
                loadAppointments();
            } else {
                showAlert('danger', data.message || 'حدث خطأ في تحديث الموعد');
            }
        })
        .catch(error => {
            console.error('Error updating appointment:', error);
            showAlert('danger', 'حدث خطأ في تحديث الموعد');
        });
    });
    
    // Add Payment Form
    document.getElementById('addPaymentForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        formData.append('patient_id', patientId);
        
        const isReceptionist = window.location.pathname.includes('receptionist');
        const baseUrl = isReceptionist ? '/receptionist' : '/admin';
        
        fetch(`${baseUrl}/payments`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('success', 'تم تسجيل الدفعة بنجاح');
                document.querySelector('#addPaymentModal .btn-close').click();
                this.reset();
                loadPayments();
            } else {
                showAlert('danger', data.message || 'حدث خطأ في تسجيل الدفعة');
            }
        })
        .catch(error => {
            console.error('Error adding payment:', error);
            showAlert('danger', 'حدث خطأ في تسجيل الدفعة');
        });
    });
    
    // Edit Patient Form
    document.getElementById('editPatientForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const isReceptionist = window.location.pathname.includes('receptionist');
        const baseUrl = isReceptionist ? '/receptionist' : '/admin';
        
        fetch(`${baseUrl}/patients/${patientId}`, {
            method: 'PUT',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(Object.fromEntries(formData))
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('success', 'تم تحديث بيانات المريض بنجاح');
                document.querySelector('#editPatientModal .btn-close').click();
                loadPatientProfile(); // Reload patient data
            } else {
                showAlert('danger', data.message || 'حدث خطأ في تحديث بيانات المريض');
            }
        })
        .catch(error => {
            console.error('Error updating patient:', error);
            showAlert('danger', 'حدث خطأ في تحديث بيانات المريض');
        });
    });
    
    // Add Medical Record Form
    document.getElementById('addMedicalRecordForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        formData.append('patient_id', patientId);
        
        const isReceptionist = window.location.pathname.includes('receptionist');
        const baseUrl = isReceptionist ? '/receptionist' : '/admin';
        
        fetch(`${baseUrl}/medical-records`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('success', 'تم إضافة السجل الطبي بنجاح');
                document.querySelector('#addMedicalRecordModal .btn-close').click();
                this.reset();
                loadMedicalHistory();
            } else {
                showAlert('danger', data.message || 'حدث خطأ في إضافة السجل الطبي');
            }
        })
        .catch(error => {
            console.error('Error adding medical record:', error);
            showAlert('danger', 'حدث خطأ في إضافة السجل الطبي');
        });
    });
});

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

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();
}

function showError(message) {
    alert(message);
}

function showAlert(type, message) {
    const alertContainer = document.getElementById('alertContainer');
    alertContainer.innerHTML = `
        <div class="alert alert-${type} alert-dismissible fade show" role="alert">
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;
    alertContainer.style.display = 'block';
}
</script>

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

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

.info-item label {
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.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