@extends('layouts.app')

@section('title', 'قائمة انتظار الأطباء')
@section('page_title', 'قائمة انتظار الأطباء')

@section('content')
<div class="row">
    @foreach($doctors as $doctor)
    <div class="col-md-4 mb-4">
        <div class="card doctor-card h-100" data-doctor-id="{{ $doctor->id }}">
            <div class="card-body text-center">
                <div class="doctor-avatar mb-3">
                    <i class="fas fa-user-md fa-3x text-primary"></i>
                </div>
                <h5 class="card-title">د. {{ $doctor->name }}</h5>
                <div class="waiting-stats">
                    <div class="row">
                        <div class="col-6">
                            <div class="stat-item">
                                <h4 class="text-warning">{{ $doctor->waiting_count }}</h4>
                                <small class="text-muted">في الانتظار</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="stat-item">
                                <h4 class="text-success">{{ $doctor->total_today }}</h4>
                                <small class="text-muted">مواعيد اليوم</small>
                            </div>
                        </div>
                    </div>
                </div>
                <button class="btn btn-primary mt-3 view-appointments" data-doctor-id="{{ $doctor->id }}">
                    <i class="fas fa-list"></i> عرض المواعيد
                </button>
            </div>
        </div>
    </div>
    @endforeach
</div>

@if($doctors->isEmpty())
<div class="text-center py-5">
    <i class="fas fa-user-md fa-4x text-muted mb-3"></i>
    <h4 class="text-muted">لا يوجد أطباء</h4>
    <p class="text-muted">لم يتم العثور على أطباء في النظام</p>
</div>
@endif

<!-- Doctor Appointments Modal -->
<div class="modal fade" id="doctorAppointmentsModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalDoctorName">مواعيد الطبيب</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-md-3">
                        <div class="card bg-info text-white">
                            <div class="card-body text-center">
                                <h4 id="modal_total_appointments">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">
                                <h4 id="modal_waiting_appointments">0</h4>
                                <small>في الانتظار</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-primary text-white">
                            <div class="card-body text-center">
                                <h4 id="modal_in_progress_appointments">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">
                                <h4 id="modal_completed_appointments">0</h4>
                                <small>مكتمل</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="table-responsive">
                    <table class="table table-striped" id="doctorAppointmentsTable">
                        <thead>
                            <tr>
                                <th>الوقت</th>
                                <th>المريض</th>
                                <th>رقم الهاتف</th>
                                <th>النوع</th>
                                <th>الحالة</th>
                                <th>الإجراءات</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Will be populated via AJAX -->
                        </tbody>
                    </table>
                </div>
                
                <div id="modalLoadingSpinner" class="text-center" style="display: none;">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </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" id="refreshAppointments">
                    <i class="fas fa-sync"></i> تحديث
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Quick Status Update Modal -->
<div class="modal fade" id="quickStatusModal" 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="quickStatusForm">
                <div class="modal-body">
                    @csrf
                    <input type="hidden" id="quick_appointment_id">
                    <div class="mb-3">
                        <label class="form-label">المريض</label>
                        <input type="text" id="quick_patient_name" class="form-control" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">الحالة الجديدة *</label>
                        <select id="quick_status" name="status" class="form-select" required>
                            <option value="مؤكد">مؤكد</option>
                            <option value="في الانتظار">في الانتظار</option>
                            <option value="قيد التنفيذ">قيد التنفيذ</option>
                            <option value="مكتمل">مكتمل</option>
                            <option value="ملغي">ملغي</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">ملاحظات</label>
                        <textarea id="quick_notes" name="notes" class="form-control" 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>

@endsection

@push('scripts')
<script>
$(document).ready(function() {
    let currentDoctorId = null;

    // View doctor appointments
    $('.view-appointments').click(function() {
        const doctorId = $(this).data('doctor-id');
        const doctorName = $(this).closest('.card').find('.card-title').text();
        
        currentDoctorId = doctorId;
        $('#modalDoctorName').text(`مواعيد ${doctorName} - اليوم`);
        $('#doctorAppointmentsModal').modal('show');
        
        loadDoctorAppointments(doctorId);
    });

    // Refresh appointments
    $('#refreshAppointments').click(function() {
        if (currentDoctorId) {
            loadDoctorAppointments(currentDoctorId);
        }
    });

    function loadDoctorAppointments(doctorId) {
        $('#modalLoadingSpinner').show();
        const tbody = $('#doctorAppointmentsTable tbody');
        tbody.empty();
        
        $.get(`/receptionist/doctor-appointments/${doctorId}`)
            .done(function(data) {
                const appointments = data.appointments;
                const stats = data.stats;
                
                // Update stats
                $('#modal_total_appointments').text(stats.total);
                $('#modal_waiting_appointments').text(stats.waiting);
                $('#modal_in_progress_appointments').text(stats.in_progress);
                $('#modal_completed_appointments').text(stats.completed);
                
                // Populate table
                if (appointments.length > 0) {
                    appointments.forEach(function(appointment) {
                        const row = `
                            <tr>
                                <td>${appointment.appointment_time || '-'}</td>
                                <td>${appointment.patient.name}</td>
                                <td>${appointment.patient.mobile || '-'}</td>
                                <td>${appointment.type || 'كشف عام'}</td>
                                <td>${getStatusBadge(appointment.status)}</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary update-status" 
                                            data-id="${appointment.id}"
                                            data-patient="${appointment.patient.name}"
                                            data-status="${appointment.status}">
                                        <i class="fas fa-edit"></i> تحديث
                                    </button>
                                </td>
                            </tr>
                        `;
                        tbody.append(row);
                    });
                } else {
                    tbody.append('<tr><td colspan="6" class="text-center">لا توجد مواعيد اليوم</td></tr>');
                }
            })
            .fail(function() {
                alert('حدث خطأ أثناء تحميل المواعيد');
                tbody.append('<tr><td colspan="6" class="text-center text-danger">حدث خطأ أثناء التحميل</td></tr>');
            })
            .always(function() {
                $('#modalLoadingSpinner').hide();
            });
    }

    // Update appointment status
    $(document).on('click', '.update-status', function() {
        const appointmentId = $(this).data('id');
        const patientName = $(this).data('patient');
        const currentStatus = $(this).data('status');
        
        $('#quick_appointment_id').val(appointmentId);
        $('#quick_patient_name').val(patientName);
        $('#quick_status').val(currentStatus);
        $('#quick_notes').val('');
        
        $('#quickStatusModal').modal('show');
    });

    // Quick status form submission
    $('#quickStatusForm').submit(function(e) {
        e.preventDefault();
        
        const appointmentId = $('#quick_appointment_id').val();
        const submitBtn = $(this).find('button[type="submit"]');
        submitBtn.prop('disabled', true).text('جاري الحفظ...');
        
        $.ajax({
            url: `/receptionist/appointments/${appointmentId}/status`,
            method: 'PUT',
            data: $(this).serialize(),
            success: function(response) {
                if (response.success) {
                    alert(response.message);
                    $('#quickStatusModal').modal('hide');
                    
                    // Refresh appointments and main page stats
                    if (currentDoctorId) {
                        loadDoctorAppointments(currentDoctorId);
                    }
                    
                    // Update main page doctor card stats
                    updateDoctorCardStats();
                } else {
                    alert(response.message || 'حدث خطأ أثناء التحديث');
                }
            },
            error: function(xhr) {
                const response = xhr.responseJSON;
                alert(response?.message || 'حدث خطأ أثناء التحديث');
            },
            complete: function() {
                submitBtn.prop('disabled', false).text('حفظ التغييرات');
            }
        });
    });

    function updateDoctorCardStats() {
        // Refresh the entire page to update doctor card statistics
        setTimeout(() => {
            location.reload();
        }, 1000);
    }

    function getStatusBadge(status) {
        const badges = {
            'مؤكد': 'bg-success',
            'في الانتظار': 'bg-warning',
            'قيد التنفيذ': 'bg-primary',
            'مكتمل': 'bg-secondary',
            'ملغي': 'bg-danger',
            'جديد': 'bg-info'
        };
        const badgeClass = badges[status] || 'bg-secondary';
        return `<span class="badge ${badgeClass}">${status}</span>`;
    }

    // Auto-refresh every 30 seconds
    setInterval(function() {
        if (!$('#doctorAppointmentsModal').hasClass('show')) {
            location.reload();
        }
    }, 30000);
});
</script>

<style>
.doctor-card {
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.doctor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.doctor-avatar {
    margin-bottom: 1rem;
}

.stat-item h4 {
    margin-bottom: 0;
    font-weight: bold;
}

.waiting-stats {
    margin: 1rem 0;
}

.modal-xl {
    max-width: 1200px;
}

@media (max-width: 768px) {
    .modal-xl {
        max-width: 95%;
        margin: 1rem auto;
    }
}
</style>
@endpush