@extends('layouts.app')

@section('title', 'لوحة الاستقبال')
@section('page_title')
لوحة الاستقبال - {{ auth()->user()->name }}
@endsection

@section('content')

<!-- Alerts Container -->
<div class="alerts-container position-fixed top-0 end-0 p-3" style="z-index: 9999;"></div>


<!-- Quick Section: Left (Quick Patient Search), Right (2x2 Stats) -->
<div class="row mb-4">
    <!-- Left: Quick Patient Search -->
    <div class="col-md-8 mb-4 mb-md-0">
        <div class="card h-100">
            <div class="card-header d-flex align-items-center">
                <i class="fas fa-search me-2"></i>
                <strong>بحث سريع عن مريض</strong>
            </div>
            <div class="card-body">
                <div class="input-group mb-3">
                    <span class="input-group-text"><i class="fas fa-user"></i></span>
                    <input type="text" id="quickPatientSearch" class="form-control" placeholder="اكتب اسم المريض أو رقم الهاتف...">
                </div>
                <div id="quickSearchResults" class="list-group" style="max-height: 320px; overflow-y: auto;"></div>
            </div>
        </div>
    </div>

    <!-- Right: 2x2 Stats Grid -->
    <div class="col-md-4">
        <div class="row g-3">
            <div class="col-6">
                <div class="card bg-primary text-white text-center">
                    <div class="card-body py-2">
                       <div class="h4 mb-0">{{ $stats['total_today'] ?? 0 }}</div>
                       <i class="fas fa-calendar-check fa-lg mb-1"></i>
                       <small>مواعيد اليوم</small>
                        
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="card bg-warning text-white text-center">
                    <div class="card-body py-2">
                        
                        <div class="h4 mb-0">{{ $stats['waiting'] ?? 0 }}</div>
                        <i class="fas fa-clock fa-lg mb-1 "></i>
                        <small>في الانتظار</small>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="card bg-success text-white text-center">
                    <div class="card-body py-2">
                        
                        <div class="h4 mb-0">{{ $stats['completed'] ?? 0 }}</div>
                        <i class="fas fa-check-circle fa-lg mb-1 "></i>
                        <small>مكتمل</small>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="card bg-dark text-white text-center">
                    <div class="card-body py-2">
                        
                        <div class="h4 mb-0">{{ number_format($stats['today_income'] ?? 0, 2) }} ج.م</div>
                        <i class="fas fa-money-bill-wave fa-lg mb-1 "></i>
                        <small>الخزينة اليوم</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Main Action Cards -->
<div class="row mb-4">
    <div class="col-12">
        <h4 class="mb-3">الإجراءات الرئيسية</h4>
    </div>
</div>

<div class="row">
    <!-- Add New Patient Card -->
    <div class="col-12 col-sm-6 col-md-3 mb-4">
        <div class="card action-card h-100" data-bs-toggle="modal" data-bs-target="#addPatientModal">
            <div class="card-body text-center py-4">
                <div class="action-icon mb-2">
                    <i class="fas fa-user-plus fa-3x text-success"></i>
                </div>
                <h6 class="card-title mb-1">إضافة مريض جديد</h6>
                <p class="card-text text-muted mb-3">تسجيل مريض جديد في النظام</p>
                <button class="btn btn-success btn-sm">
                    <i class="fas fa-plus me-2"></i>إضافة مريض
                </button>
            </div>
        </div>
    </div>

    <!-- Book Appointment + Payment Card -->
    <div class="col-12 col-sm-6 col-md-3 mb-4">
        <div class="card action-card h-100" data-bs-toggle="modal" data-bs-target="#addAppointmentModal">
            <div class="card-body text-center py-4">
                <div class="action-icon mb-2">
                    <i class="fas fa-calendar-plus fa-3x text-primary"></i>
                </div>
                <h6 class="card-title mb-1">حجز موعد + دفع</h6>
                <p class="card-text text-muted mb-3">حجز موعد وتسجيل الدفعة في خطوة واحدة</p>
                <button class="btn btn-primary btn-sm">
                    <i class="fas fa-calendar-plus me-2"></i>حجز موعد
                </button>
            </div>
        </div>
    </div>


    <!-- Doctor Waiting List Card -->
    <div class="col-12 col-sm-6 col-md-3 mb-4">
        <div class="card action-card h-100" onclick="window.location.href='{{ route('receptionist.waiting-list') }}'">
            <div class="card-body text-center py-4">
                <div class="action-icon mb-2">
                    <i class="fas fa-user-md fa-3x text-warning"></i>
                </div>
                <h6 class="card-title mb-1">قائمة انتظار الأطباء</h6>
                <p class="card-text text-muted mb-3">عرض وإدارة قوائم انتظار الأطباء</p>
                <button class="btn btn-warning btn-sm">
                    <i class="fas fa-list me-2"></i>عرض القوائم
                </button>
            </div>
        </div>
    </div>

    <!-- Patient Management Card -->
    <div class="col-12 col-sm-6 col-md-3 mb-4">
        <div class="card action-card h-100" onclick="window.location.href='{{ route('receptionist.patients.management') }}'">
            <div class="card-body text-center py-4">
                <div class="action-icon mb-2">
                    <i class="fas fa-users fa-3x text-info"></i>
                </div>
                <h6 class="card-title mb-1">إدارة المرضى</h6>
                <p class="card-text text-muted mb-3">عرض وإدارة جميع المرضى المسجلين</p>
                <button class="btn btn-info btn-sm">
                    <i class="fas fa-users me-2"></i>إدارة المرضى
                </button>
            </div>
        </div>
    </div>

    <!-- Manage Appointments Card -->
    <div class="col-12 col-sm-6 col-md-3 mb-4">
        <div class="card action-card h-100" onclick="window.location.href='{{ route('receptionist.appointments') }}'">
            <div class="card-body text-center py-4">
                <div class="action-icon mb-2">
                    <i class="fas fa-calendar-check fa-3x text-primary"></i>
                </div>
                <h6 class="card-title mb-1">إدارة المواعيد</h6>
                <p class="card-text text-muted mb-3">قائمة المواعيد مع الفلاتر والإجراءات</p>
                <button class="btn btn-primary btn-sm">
                    <i class="fas fa-calendar-check me-2"></i>فتح المواعيد
                </button>
            </div>
        </div>
    </div>

    <!-- Quick Bookings Card -->
    <div class="col-12 col-sm-6 col-md-3 mb-4">
        <div class="card action-card h-100" onclick="window.location.href='{{ route('quick-bookings.index') }}'">
            <div class="card-body text-center py-4">
                <div class="action-icon mb-2">
                    <i class="fas fa-clock fa-3x text-warning"></i>
                </div>
                <h6 class="card-title mb-1">طلبات الحجز السريع</h6>
                <p class="card-text text-muted mb-3">عرض وإدارة طلبات الحجز السريع من الموقع</p>
                <button class="btn btn-warning btn-sm">
                    <i class="fas fa-clock me-2"></i>عرض الطلبات
                </button>
            </div>
        </div>
    </div>

    <!-- Payment Management Card -->
    <div class="col-12 col-sm-6 col-md-3 mb-4">
        <div class="card action-card h-100" onclick="window.location.href='{{ route('receptionist.payments') }}'">
            <div class="card-body text-center py-4">
                <div class="action-icon mb-2">
                    <i class="fas fa-money-bill-wave fa-3x text-success"></i>
                </div>
                <h6 class="card-title mb-1">إدارة المدفوعات</h6>
                <p class="card-text text-muted mb-3">دفعات المواعيد والطلبات + المتبقي/المعلّق</p>
                <button class="btn btn-success btn-sm">
                    <i class="fas fa-file-invoice-dollar me-2"></i>فتح المدفوعات
                </button>
            </div>
        </div>
    </div>

    <!-- Invoices Management Card -->
    <div class="col-12 col-sm-6 col-md-3 mb-4">
        <div class="card action-card h-100" onclick="window.location.href='{{ route('receptionist.invoices') }}'">
            <div class="card-body text-center py-4">
                <div class="action-icon mb-2">
                    <i class="fas fa-file-invoice fa-3x text-secondary"></i>
                </div>
                <h6 class="card-title mb-1">إدارة الفواتير</h6>
                <p class="card-text text-muted mb-3">إنشاء وإدارة الفواتير + الطباعة</p>
                <button class="btn btn-secondary btn-sm">
                    <i class="fas fa-file-invoice me-2"></i>فتح الفواتير
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Add New 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="01xxxxxxxxx" inputmode="tel" maxlength="11"
                               pattern="01(0|1|2|5)[0-9]{8}"
                               title="يجب أن يبدأ الرقم بـ 010 أو 011 أو 012 أو 015 ويتكون من 11 رقمًا">
                        <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>

<!-- Include reusable appointment modal -->
@include('components.appointment-add-modal')

<!-- Include appointment receipt modal -->
@include('components.appointment-receipt-modal')

<!-- Doctor Waiting List Section -->
<div id="doctorWaitingSection" style="display: none;">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h4>قائمة انتظار الأطباء</h4>
                <button class="btn btn-secondary" onclick="hideDoctorWaitingList()">
                    <i class="fas fa-arrow-right me-2"></i>العودة للوحة الرئيسية
                </button>
            </div>
        </div>
    </div>
    
    <div class="row" id="doctorCards">
        <!-- Doctor cards will be loaded here -->
    </div>
</div>

<!-- Doctor Appointments Modal -->
<div class="modal fade" id="doctorAppointmentsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="doctorModalTitle">مواعيد الطبيب</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>المريض</th>
                                <th>الوقت</th>
                                <th>الحالة</th>
                                <th>الإجراءات</th>
                            </tr>
                        </thead>
                        <tbody id="doctorAppointmentsList">
                            <!-- Appointments will be loaded here -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Receipt Print Modal -->
<div class="modal fade" id="receiptModal" 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>
            <div class="modal-body text-center">
                <div class="alert alert-success">
                    <i class="fas fa-check-circle fa-2x mb-2"></i>
                    <h5>تم حجز الموعد وتسجيل الدفعة بنجاح</h5>
                    <p class="mb-0">رقم الحجز: <strong id="bookingReference"></strong></p>
                </div>
                <p>هل تريد طباعة الإيصال؟</p>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-success" onclick="printReceipt()">
                    <i class="fas fa-print me-2"></i>طباعة الإيصال
                </button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<!-- Include Appointment Manager JS -->
<script src="{{ asset('js/appointment-manager.js') }}?v={{ time() }}"></script>

<script>
// Initialize Appointment Manager for Receptionist
let appointmentManager;

$(document).ready(function() {
    console.log('🚀 DOM Ready - Initializing AppointmentManager');
    
    // Debug data
    const patients = @json($patients ?? []);
    const doctors = @json($doctors ?? []);
    const token = $('meta[name="csrf-token"]').attr('content');
    
    console.log('📊 Debug data:', {
        patients: patients.length,
        doctors: doctors.length,
        hasToken: !!token,
        modalExists: $('#addAppointmentModal').length > 0
    });
    
    // Initialize the appointment manager
    appointmentManager = new AppointmentManager({
        baseUrl: '',
        role: 'receptionist',
        patients: patients,
        doctors: doctors,
        csrfToken: token
    });

    console.log('🔧 Receptionist dashboard initialized with AppointmentManager');
    
    // Debug functions
    window.testPatientSearch = function() {
        console.log('🧪 Testing patient search...');
        const input = $('#addAppointmentModal input[name="patient_search"]');
        if (input.length > 0) {
            input.val('test').trigger('input');
            console.log('✅ Patient search input triggered');
        } else {
            console.error('❌ Patient search input not found');
        }
    };
    
    window.testModal = function() {
        console.log('🧪 Testing modal...');
        const modal = $('#addAppointmentModal');
        if (modal.length > 0) {
            modal.modal('show');
            console.log('✅ Modal shown');
        } else {
            console.error('❌ Modal not found');
        }
    };
    
    window.testData = function() {
        console.log('🧪 Testing data...');
        console.log('Patients:', patients);
        console.log('Doctors:', doctors);
        console.log('AppointmentManager:', appointmentManager);
        if (appointmentManager) {
            console.log('Manager patients:', appointmentManager.patients);
            console.log('Manager doctors:', appointmentManager.doctors);
        }
    };
    
    // Global print function
    window.printReceipt = function() {
        const receiptContent = document.getElementById('receiptContent');
        if (!receiptContent) {
            alert('لا يمكن العثور على محتوى الإيصال');
            return;
        }
        
        const printWindow = window.open('', '_blank', 'width=800,height=600');
        printWindow.document.write(
            '<!DOCTYPE html>' +
            '<html dir="rtl" lang="ar">' +
            '<head>' +
            '<meta charset="UTF-8">' +
            '<meta name="viewport" content="width=device-width, initial-scale=1.0">' +
            '<title>إيصال حجز الموعد</title>' +
            '<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">' +
            '<style>' +
            'body { font-family: Arial, sans-serif; background: white; color: black; margin: 20px; direction: rtl; }' +
            '.receipt-container { background: #fff; border: 1px solid #ddd; padding: 20px; max-width: 800px; margin: 0 auto; }' +
            '.clinic-header { background: #f8f9ff; padding: 20px; margin-bottom: 20px; text-align: center; }' +
            '.clinic-name { font-size: 1.8rem; font-weight: bold; color: #007bff; margin-bottom: 5px; }' +
            '.info-card { background: #f8f9fa; padding: 15px; border-left: 4px solid #007bff; margin-bottom: 15px; }' +
            '.fw-bold { font-weight: bold; }' +
            '.text-primary { color: #007bff; }' +
            '.text-success { color: #28a745; }' +
            '.badge { padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; }' +
            '.bg-success { background-color: #28a745; color: white; }' +
            '.bg-warning { background-color: #ffc107; color: black; }' +
            '@media print { body { margin: 0; } .receipt-container { border: none; margin: 0; max-width: none; } }' +
            '</style>' +
            '</head>' +
            '<body>' +
            '<div class="receipt-container">' +
            receiptContent.innerHTML +
            '</div>' +
            '<script>' +
            'window.onload = function() { setTimeout(function() { window.print(); window.close(); }, 500); };' +
            '<\/script>' +
            '<\/body>' +
            '<\/html>'
        );
        printWindow.document.close();
    };
    
    // Global function to close receipt modal
    window.closeReceiptModal = function() {
        $('#appointmentReceiptModal').modal('hide');
        // Immediate cleanup - no delays
        $('body').removeClass('modal-open');
        $('.modal-backdrop').remove();
        $('#appointmentLoadingOverlay').hide();
        $('.loading-overlay').hide();
        $('body').css({
            'overflow': '',
            'padding-right': '',
            'cursor': ''
        });
        // Reset any lingering loading states
        if (window.appointmentManager && window.appointmentManager.showLoading) {
            window.appointmentManager.showLoading(false);
        }
    };
    
    // Global print function with cleanup
    window.printReceipt = function() {
        const receiptContent = document.getElementById('receiptContent');
        if (!receiptContent) {
            alert('لا يمكن العثور على محتوى الإيصال');
            return;
        }
        
        const printWindow = window.open('', '_blank', 'width=800,height=600');
        printWindow.document.write(
            '<!DOCTYPE html>' +
            '<html dir="rtl" lang="ar">' +
            '<head>' +
            '<meta charset="UTF-8">' +
            '<title>إيصال حجز الموعد</title>' +
            '<style>' +
            'body { font-family: Arial, sans-serif; margin: 20px; direction: rtl; }' +
            '.receipt-container { padding: 20px; }' +
            '.clinic-header { background: #f8f9ff; padding: 20px; margin-bottom: 20px; text-align: center; }' +
            '.clinic-name { font-size: 1.8rem; font-weight: bold; color: #007bff; }' +
            '.info-card { background: #f8f9fa; padding: 15px; border-left: 4px solid #007bff; margin-bottom: 15px; }' +
            '.fw-bold { font-weight: bold; }' +
            '.text-primary { color: #007bff; }' +
            '.text-success { color: #28a745; }' +
            '.badge { padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; }' +
            '.bg-success { background-color: #28a745; color: white; }' +
            '.bg-warning { background-color: #ffc107; color: black; }' +
            '<\/style>' +
            '<\/head>' +
            '<body>' +
            receiptContent.innerHTML +
            '<script>window.print(); window.close();<\/script>' +
            '<\/body>' +
            '<\/html>'
        );
        printWindow.document.close();
        
        // Clean up after print
        setTimeout(function() {
            window.closeReceiptModal();
        }, 1000);
    };

    // ===== Quick Patient Search =====
    let __patientsCache = null;
    let __qs_timer = null;
    const $input = $('#quickPatientSearch');
    const $results = $('#quickSearchResults');

    function renderQuickResults(items) {
        if (!$results.length) return;
        if (!items || items.length === 0) {
            $results.html('<div class="list-group-item text-muted text-center">لا توجد نتائج</div>');
            return;
        }
        const base = '/receptionist/patients/';
        const html = items.slice(0, 25).map(p => `
            <a href="${base}${p.id}/profile" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                <div>
                    <div class="fw-semibold">${p.name || '-'}</div>
                    <small class="text-muted">${p.mobile || ''} ${p.patient_number ? ' • رقم المريض: ' + p.patient_number : ''}</small>
                </div>
                <i class="fas fa-arrow-left text-muted"></i>
            </a>
        `).join('');
        $results.html(html);
    }

    function filterPatients(q) {
        q = (q || '').trim().toLowerCase();
        if (!q) { $results.empty(); return; }
        if (!__patientsCache) return;
        const filtered = __patientsCache.filter(p => {
            const name = (p.name || '').toLowerCase();
            const mobile = (p.mobile || '').toLowerCase();
            const pn = (p.patient_number || '').toString().toLowerCase();
            return name.includes(q) || mobile.includes(q) || pn.includes(q);
        });
        renderQuickResults(filtered);
    }

    function ensurePatientsLoaded(cb) {
        if (__patientsCache) { cb && cb(); return; }
        $results.html('<div class="list-group-item text-center"><span class="spinner-border spinner-border-sm"></span> جاري التحميل...</div>');
        fetch('/api/patients/search')
            .then(r => r.json())
            .then(data => { __patientsCache = Array.isArray(data) ? data : []; cb && cb(); })
            .catch(() => { $results.html('<div class="list-group-item text-danger text-center">فشل تحميل قائمة المرضى</div>'); });
    }

    if ($input.length) {
        $input.on('input', function() {
            clearTimeout(__qs_timer);
            const q = this.value;
            __qs_timer = setTimeout(() => {
                ensurePatientsLoaded(() => filterPatients(q));
            }, 200);
        });
    }

    // Arabic validity messages for Add Patient modal
    const nameEl = document.getElementById('patientName');
    const mobileEl = document.getElementById('patientMobile');
    if (nameEl) {
        nameEl.oninvalid = function(e) {
            this.setCustomValidity('الاسم مطلوب');
        };
        nameEl.oninput = function() { this.setCustomValidity(''); };
    }
    if (mobileEl) {
        mobileEl.oninvalid = function(e) {
            if (this.validity.patternMismatch) {
                this.setCustomValidity('صيغة رقم الهاتف غير صحيحة. يجب أن يبدأ بـ 010 أو 011 أو 012 أو 015 ويتكون من 11 رقمًا');
            } else if (this.validity.valueMissing) {
                this.setCustomValidity('رقم الهاتف مطلوب');
            } else {
                this.setCustomValidity('قيمة غير صالحة');
            }
        };
        mobileEl.oninput = function() { this.setCustomValidity(''); };
    }
});

// ===== Alerts helpers =====
function showGlobalAlert(message, type = 'success', timeoutMs = 5000) {
    const container = document.querySelector('.alerts-container');
    if (!container) return;
    const alert = document.createElement('div');
    alert.className = `alert alert-${type} alert-dismissible fade show shadow`;
    alert.innerHTML = `
        <div class="d-flex align-items-center">
            <i class="me-2 ${type === 'success' ? 'fas fa-check-circle' : type === 'warning' ? 'fas fa-exclamation-triangle' : 'fas fa-times-circle'}"></i>
            <div>${message}</div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    container.appendChild(alert);
    if (timeoutMs > 0) {
        setTimeout(() => {
            try { $(alert).alert('close'); } catch(e) { alert.remove(); }
        }, timeoutMs);
    }
}

function showModalAlert(html, type = 'danger') {
    const cont = document.getElementById('alertContainer');
    if (!cont) return;
    cont.style.display = 'block';
    cont.className = '';
    cont.classList.add('alert', `alert-${type}`);
    cont.innerHTML = html;
}

function clearFieldValidation(formEl) {
    formEl.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
    formEl.querySelectorAll('.invalid-feedback').forEach(el => el.textContent = '');
    const cont = document.getElementById('alertContainer');
    if (cont) { cont.style.display = 'none'; cont.className = ''; cont.innerHTML = ''; }
}

// Patient submission function (with full scenarios handling)
function submitPatient() {
    const form = document.getElementById('patientForm');
    const formData = new FormData(form);
    const submitBtn = document.querySelector('#addPatientModal .btn.btn-success');
    clearFieldValidation(form);

    // Disable button during submission
    if (submitBtn) { submitBtn.disabled = true; submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>جاري الحفظ...'; }

    fetch('/receptionist/patients', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(async (response) => {
        const isJson = (response.headers.get('content-type') || '').includes('application/json');
        const payload = isJson ? await response.json() : {};

        if (response.ok && payload.success) {
            $('#addPatientModal').modal('hide');
            form.reset();
            showGlobalAlert('تم إضافة المريض بنجاح وإرسال بيانات الدخول عبر الرسائل النصية', 'success');
            // Optional: refresh patients cache in quick search without full reload
            setTimeout(() => window.location.reload(), 800);
            return;
        }

        // Handle validation errors (422)
        if (response.status === 422 && payload.errors) {
            const errs = payload.errors;
            const messages = [];
            if (errs.name && errs.name.length) {
                const el = document.getElementById('patientName');
                if (el) { el.classList.add('is-invalid'); el.nextElementSibling.textContent = errs.name[0]; }
                messages.push(`<div><i class='fas fa-exclamation-circle me-1'></i>${errs.name[0]}</div>`);
            }
            if (errs.mobile && errs.mobile.length) {
                const el = document.getElementById('patientMobile');
                if (el) { el.classList.add('is-invalid'); el.nextElementSibling.textContent = errs.mobile[0]; }
                // Common scenario: duplicate mobile
                if (/unique|مستخدم/i.test(errs.mobile[0])) {
                    messages.push(`<div><i class='fas fa-phone me-1'></i>رقم الهاتف مستخدم مسبقاً. يرجى إدخال رقم آخر أو البحث عن المريض.</div>`);
                } else {
                    messages.push(`<div><i class='fas fa-phone me-1'></i>${errs.mobile[0]}</div>`);
                }
            }
            if (errs.age && errs.age.length) {
                messages.push(`<div><i class='fas fa-birthday-cake me-1'></i>${errs.age[0]}</div>`);
            }
            if (errs.gender && errs.gender.length) {
                messages.push(`<div><i class='fas fa-venus-mars me-1'></i>${errs.gender[0]}</div>`);
            }
            if (errs.notes && errs.notes.length) {
                messages.push(`<div><i class='fas fa-sticky-note me-1'></i>${errs.notes[0]}</div>`);
            }
            if (messages.length === 0) {
                messages.push('<div>تحقق من الحقول المدخلة</div>');
            }
            showModalAlert(`<strong>تعذر حفظ المريض بسبب:</strong><div class='mt-2'>${messages.join('')}</div>`, 'warning');
            return;
        }

        // Other errors
        const msg = payload.message || 'حدث خطأ غير متوقع أثناء إضافة المريض';
        showModalAlert(`<i class='fas fa-times-circle me-1'></i>${msg}`, 'danger');
    })
    .catch((error) => {
        console.error('Add patient error:', error);
        showModalAlert('<i class="fas fa-times-circle me-1"></i>تعذر الاتصال بالخادم. يرجى المحاولة لاحقاً.', 'danger');
    })
    .finally(() => {
        if (submitBtn) { submitBtn.disabled = false; submitBtn.innerHTML = '<i class="fas fa-save me-2"></i>حفظ المريض'; }
    });
}

// Doctor waiting list functions
function showDoctorWaitingList() {
    document.getElementById('doctorWaitingSection').style.display = 'block';
    loadDoctorCards();
}

function hideDoctorWaitingList() {
    document.getElementById('doctorWaitingSection').style.display = 'none';
}

function loadDoctorCards() {
    // This would typically load from an API
    const doctorCards = document.getElementById('doctorCards');
    doctorCards.innerHTML = '<p class="text-center">جاري تحميل قوائم انتظار الأطباء...</p>';
}
</script>
@endsection

@section('styles')
<style>
.action-card {
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.action-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-color: #007bff;
}

.action-icon {
    transition: transform 0.3s ease;
}

.action-card:hover .action-icon {
    transform: scale(1.1);
}
</style>
@endsection

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

#doctorWaitingSection {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.doctor-card {
    cursor: pointer;
    transition: all 0.3s ease;
}

.doctor-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
</style>
@endsection