@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="mb-1">إدارة المرضى</h2>
            <p class="text-muted">عرض وإدارة جميع المرضى المسجلين في النظام</p>
        </div>
        <div>
            <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addPatientModal">
                <i class="fas fa-user-plus me-2"></i>إضافة مريض جديد
            </button>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body text-center">
                    <i class="fas fa-users fa-2x mb-2"></i>
                    <h4 id="totalPatients">0</h4>
                    <small>إجمالي المرضى</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body text-center">
                    <i class="fas fa-user-check fa-2x mb-2"></i>
                    <h4 id="activePatients">0</h4>
                    <small>المرضى النشطين</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body text-center">
                    <i class="fas fa-calendar-check fa-2x mb-2"></i>
                    <h4 id="todayAppointments">0</h4>
                    <small>مواعيد اليوم</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body text-center">
                    <i class="fas fa-clock fa-2x mb-2"></i>
                    <h4 id="pendingAppointments">0</h4>
                    <small>مواعيد معلقة</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Search and Filter -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-search"></i></span>
                        <input type="text" class="form-control" id="searchPatients" placeholder="البحث بالاسم أو رقم الهاتف...">
                    </div>
                </div>
                <div class="col-md-3">
                    <select class="form-select" id="filterGender">
                        <option value="">جميع الأجناس</option>
                        <option value="ذكر">ذكر</option>
                        <option value="أنثى">أنثى</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <select class="form-select" id="filterAge">
                        <option value="">جميع الأعمار</option>
                        <option value="0-18">أطفال (0-18)</option>
                        <option value="19-40">شباب (19-40)</option>
                        <option value="41-60">متوسط العمر (41-60)</option>
                        <option value="60+">كبار السن (60+)</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-outline-secondary w-100" onclick="clearFilters()">
                        <i class="fas fa-times me-1"></i>مسح الفلاتر
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Patients Table -->
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">قائمة المرضى</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover" id="patientsTable">
                    <thead class="table-light">
                        <tr>
                            <th>رقم المريض</th>
                            <th>الاسم</th>
                            <th>رقم الهاتف</th>
                            <th>العمر</th>
                            <th>الجنس</th>
                            <th>آخر موعد</th>
                            <th>الحالة</th>
                            <th>الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody id="patientsTableBody">
                        <!-- Patients will be loaded here -->
                    </tbody>
                </table>
            </div>
            
            <!-- Loading Spinner -->
            <div id="loadingSpinner" class="text-center py-4">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">جاري التحميل...</span>
                </div>
            </div>
            
            <!-- No Results -->
            <div id="noResults" class="text-center py-4" style="display: none;">
                <i class="fas fa-users fa-3x text-muted mb-3"></i>
                <h5 class="text-muted">لا توجد مرضى</h5>
                <p class="text-muted">لم يتم العثور على أي مرضى مطابقين للبحث</p>
            </div>
        </div>
        
        <!-- Pagination -->
        <div class="card-footer">
            <nav aria-label="Patient pagination">
                <ul class="pagination justify-content-center mb-0" id="pagination">
                    <!-- Pagination will be generated here -->
                </ul>
            </nav>
        </div>
    </div>
</div>

<!-- Add Patient Modal -->
<div class="modal fade" id="addPatientModal" tabindex="-1" aria-labelledby="addPatientModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="addPatientModalLabel">
                    <i class="fas fa-user-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">
                <form id="patientForm">
                    @csrf
                    
                    <!-- Alert Container -->
                    <div id="alertContainer" class="mb-3" style="display: none;"></div>
                    
                    <!-- Name Field -->
                    <div class="mb-3">
                        <label for="patientName" class="form-label">
                            <i class="fas fa-user me-1"></i>الاسم الكامل <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control" id="patientName" name="name" required 
                               placeholder="أدخل الاسم الكامل للمريض">
                        <div class="invalid-feedback"></div>
                    </div>
                    
                    <!-- Mobile Field -->
                    <div class="mb-3">
                        <label for="patientMobile" class="form-label">
                            <i class="fas fa-phone me-1"></i>رقم الهاتف <span class="text-danger">*</span>
                        </label>
                        <input type="tel" class="form-control" id="patientMobile" name="mobile" required 
                               placeholder="05xxxxxxxx" pattern="[0-9]{10}">
                        <div class="invalid-feedback"></div>
                    </div>
                    
                    <!-- Age and Gender Row -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="patientAge" class="form-label">
                                    <i class="fas fa-birthday-cake me-1"></i>العمر
                                </label>
                                <input type="number" class="form-control" id="patientAge" name="age" 
                                       min="1" max="120" placeholder="العمر بالسنوات">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="patientGender" class="form-label">
                                    <i class="fas fa-venus-mars me-1"></i>الجنس
                                </label>
                                <select class="form-select" id="patientGender" name="gender">
                                    <option value="">اختر الجنس</option>
                                    <option value="ذكر">ذكر</option>
                                    <option value="أنثى">أنثى</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Notes Field -->
                    <div class="mb-3">
                        <label for="patientNotes" class="form-label">
                            <i class="fas fa-sticky-note me-1"></i>ملاحظات
                        </label>
                        <textarea class="form-control" id="patientNotes" name="notes" rows="3" 
                                  placeholder="أي ملاحظات إضافية عن المريض..."></textarea>
                    </div>
                </form>
            </div>
            
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i>إلغاء
                </button>
                <button type="button" class="btn btn-success" onclick="submitPatient()">
                    <i class="fas fa-save me-2"></i>حفظ المريض
                </button>
            </div>
        </div>
    </div>
</div>

<script>
let currentPage = 1;
let totalPages = 1;
let patients = [];

// Load patients on page load
document.addEventListener('DOMContentLoaded', function() {
    loadPatients();
    loadStatistics();
    
    // Search functionality
    document.getElementById('searchPatients').addEventListener('input', debounce(filterPatients, 300));
    document.getElementById('filterGender').addEventListener('change', filterPatients);
    document.getElementById('filterAge').addEventListener('change', filterPatients);
});

// Load all patients
function loadPatients(page = 1) {
    showLoading();
    
    const isReceptionist = window.location.pathname.includes('receptionist');
    const baseUrl = isReceptionist ? '/receptionist/patients' : '/admin/patients';
    
    fetch(`${baseUrl}/data?page=${page}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                patients = data.patients.data;
                currentPage = data.patients.current_page;
                totalPages = data.patients.last_page;
                
                displayPatients(patients);
                updatePagination();
            } else {
                showError('فشل في تحميل بيانات المرضى');
            }
        })
        .catch(error => {
            console.error('Error loading patients:', error);
            showError('حدث خطأ في تحميل البيانات');
        })
        .finally(() => {
            hideLoading();
        });
}

// Display patients in table
function displayPatients(patientsData) {
    const tbody = document.getElementById('patientsTableBody');
    const noResults = document.getElementById('noResults');
    
    if (patientsData.length === 0) {
        tbody.innerHTML = '';
        noResults.style.display = 'block';
        return;
    }
    
    noResults.style.display = 'none';
    
    tbody.innerHTML = patientsData.map(patient => `
        <tr>
            <td><span class="badge bg-primary">${patient.patient_number || 'غير محدد'}</span></td>
            <td>
                <div class="d-flex align-items-center">
                    <div class="avatar-sm bg-light rounded-circle d-flex align-items-center justify-content-center me-2">
                        <i class="fas fa-user text-muted"></i>
                    </div>
                    <div>
                        <strong>${patient.name}</strong>
                    </div>
                </div>
            </td>
            <td><i class="fas fa-phone text-muted me-1"></i>${patient.mobile}</td>
            <td>${patient.age || 'غير محدد'}</td>
            <td>
                ${patient.gender ? `<span class="badge ${patient.gender === 'ذكر' ? 'bg-info' : 'bg-pink'}">${patient.gender}</span>` : 'غير محدد'}
            </td>
            <td>${patient.last_appointment || 'لا يوجد'}</td>
            <td>
                <span class="badge ${patient.status === 'active' ? 'bg-success' : 'bg-secondary'}">
                    ${patient.status === 'active' ? 'نشط' : 'غير نشط'}
                </span>
            </td>
            <td>
                <div class="btn-group btn-group-sm" role="group">
                    <button type="button" class="btn btn-outline-primary" onclick="viewPatientProfile(${patient.id})" title="عرض الملف الشخصي">
                        <i class="fas fa-eye"></i>
                    </button>
                    <button type="button" class="btn btn-outline-success" onclick="bookAppointment(${patient.id})" title="حجز موعد">
                        <i class="fas fa-calendar-plus"></i>
                    </button>
                    <button type="button" class="btn btn-outline-info" onclick="editPatient(${patient.id})" title="تعديل">
                        <i class="fas fa-edit"></i>
                    </button>
                </div>
            </td>
        </tr>
    `).join('');
}

// Filter patients
function filterPatients() {
    const searchTerm = document.getElementById('searchPatients').value.toLowerCase();
    const genderFilter = document.getElementById('filterGender').value;
    const ageFilter = document.getElementById('filterAge').value;
    
    let filteredPatients = patients.filter(patient => {
        const matchesSearch = patient.name.toLowerCase().includes(searchTerm) || 
                            patient.mobile.includes(searchTerm);
        
        const matchesGender = !genderFilter || patient.gender === genderFilter;
        
        let matchesAge = true;
        if (ageFilter && patient.age) {
            const age = parseInt(patient.age);
            switch(ageFilter) {
                case '0-18': matchesAge = age >= 0 && age <= 18; break;
                case '19-40': matchesAge = age >= 19 && age <= 40; break;
                case '41-60': matchesAge = age >= 41 && age <= 60; break;
                case '60+': matchesAge = age > 60; break;
            }
        }
        
        return matchesSearch && matchesGender && matchesAge;
    });
    
    displayPatients(filteredPatients);
}

// Clear all filters
function clearFilters() {
    document.getElementById('searchPatients').value = '';
    document.getElementById('filterGender').value = '';
    document.getElementById('filterAge').value = '';
    displayPatients(patients);
}

// View patient profile
function viewPatientProfile(patientId) {
    const isReceptionist = window.location.pathname.includes('receptionist');
    const baseUrl = isReceptionist ? '/receptionist/patients' : '/admin/patients';
    window.location.href = `${baseUrl}/${patientId}/profile`;
}

// Book appointment for patient
function bookAppointment(patientId) {
    // Implementation for booking appointment
    alert('سيتم تنفيذ حجز الموعد قريباً');
}

// Edit patient
function editPatient(patientId) {
    // Implementation for editing patient
    alert('سيتم تنفيذ تعديل المريض قريباً');
}

// Load statistics
function loadStatistics() {
    const isReceptionist = window.location.pathname.includes('receptionist');
    const baseUrl = isReceptionist ? '/receptionist/patients' : '/admin/patients';
    
    fetch(`${baseUrl}/statistics`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.getElementById('totalPatients').textContent = data.stats.total_patients;
                document.getElementById('activePatients').textContent = data.stats.active_patients;
                document.getElementById('todayAppointments').textContent = data.stats.today_appointments;
                document.getElementById('pendingAppointments').textContent = data.stats.pending_appointments;
            }
        })
        .catch(error => console.error('Error loading statistics:', error));
}

// Pagination
function updatePagination() {
    const pagination = document.getElementById('pagination');
    let paginationHTML = '';
    
    // Previous button
    paginationHTML += `
        <li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
            <a class="page-link" href="#" onclick="loadPatients(${currentPage - 1})" aria-label="السابق">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
    `;
    
    // Page numbers
    for (let i = Math.max(1, currentPage - 2); i <= Math.min(totalPages, currentPage + 2); i++) {
        paginationHTML += `
            <li class="page-item ${i === currentPage ? 'active' : ''}">
                <a class="page-link" href="#" onclick="loadPatients(${i})">${i}</a>
            </li>
        `;
    }
    
    // Next button
    paginationHTML += `
        <li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
            <a class="page-link" href="#" onclick="loadPatients(${currentPage + 1})" aria-label="التالي">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    `;
    
    pagination.innerHTML = paginationHTML;
}

// Utility functions
function showLoading() {
    document.getElementById('loadingSpinner').style.display = 'block';
    document.getElementById('patientsTableBody').innerHTML = '';
}

function hideLoading() {
    document.getElementById('loadingSpinner').style.display = 'none';
}

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

function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

// Submit patient function (same as receptionist)
function submitPatient() {
    const form = document.getElementById('patientForm');
    const name = document.getElementById('patientName').value.trim();
    const mobile = document.getElementById('patientMobile').value.trim();
    
    if (!name || !mobile) {
        alert('يرجى ملء الاسم ورقم الهاتف');
        return;
    }
    
    const csrfToken = document.querySelector('meta[name="csrf-token"]');
    if (!csrfToken) {
        alert('خطأ في النظام');
        return;
    }
    
    const formData = new FormData(form);
    
    fetch('/receptionist/patients', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': csrfToken.getAttribute('content')
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('تم إضافة المريض بنجاح');
            const modal = bootstrap.Modal.getInstance(document.getElementById('addPatientModal'));
            if (modal) modal.hide();
            form.reset();
            loadPatients(); // Reload patients list
            loadStatistics(); // Reload statistics
        } else {
            if (data.errors && data.errors.mobile) {
                alert('رقم الهاتف مسجل مسبقاً في النظام. يرجى استخدام رقم هاتف آخر.');
            } else {
                alert('خطأ: ' + data.message);
            }
        }
    })
    .catch(error => {
        alert('حدث خطأ: ' + error.message);
    });
}
</script>

<style>
.avatar-sm {
    width: 32px;
    height: 32px;
}

.bg-pink {
    background-color: #e91e63 !important;
}

.table th {
    border-top: none;
    font-weight: 600;
}

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

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

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
</style>
@endsection