@extends('layouts.app')

@section('title', 'إدارة المواعيد')
@section('page_title', 'إدارة المواعيد')

@section('content')
@php
    // Allow reusing this page for Admin by passing $basePath = '/admin' from the controller.
    // Default to receptionist if not provided.
    $basePath = $basePath ?? '/receptionist';
@endphp
<div class="row mb-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">البحث والفلترة</h5>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addAppointmentModal">
                    <i class="fas fa-plus"></i> موعد جديد
                </button>
            </div>
            <div class="card-body">
                <form id="filterForm" class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label">الطبيب</label>
                        <select name="doctor_id" class="form-select">
                            <option value="">جميع الأطباء</option>
                            @foreach($doctors as $doctor)
                            <option value="{{ $doctor->id }}">د. {{ $doctor->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">المريض</label>
                        <input type="text" name="patient_search" class="form-control" placeholder="اسم المريض أو رقم الهاتف">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">من تاريخ</label>
                        <input type="date" name="date_from" class="form-control" placeholder="اختر تاريخ البداية">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">إلى تاريخ</label>
                        <input type="date" name="date_to" class="form-control" placeholder="اختر تاريخ النهاية">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">الحالة</label>
                        <select name="status" class="form-select">
                            <option value="">جميع الحالات</option>
                            <option value="قيد المراجعة">قيد المراجعة</option>
                            <option value="مؤكد">مؤكد</option>
                            <option value="في الانتظار">في الانتظار</option>
                            <option value="مكتمل">مكتمل</option>
                            <option value="ملغي">ملغي</option>
                            <option value="لم يحضر">لم يحضر</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-search"></i> بحث
                        </button>
                        <button type="button" class="btn btn-secondary" id="clearFilters">
                            <i class="fas fa-times"></i> مسح الفلاتر
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">قائمة المواعيد</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped" id="appointmentsTable">
                        <thead>
                            <tr>
                                <th>التاريخ</th>
                                <th>الوقت</th>
                                <th>المريض</th>
                                <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="loadingSpinner" class="text-center" style="display: none;">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Use the shared, modern Add Appointment modal component -->
@include('components.appointment-add-modal')

<!-- 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">
                    @csrf
                    @method('PUT')
                    <input type="hidden" id="edit_appointment_id">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">اسم المريض *</label>
                                <input type="text" id="edit_patient_name" name="patient_name" class="form-control" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">رقم الهاتف *</label>
                                <input type="text" id="edit_patient_mobile" name="patient_mobile" class="form-control" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">الطبيب *</label>
                                <select id="edit_doctor_id" name="doctor_id" class="form-select" required>
                                    <option value="">اختر الطبيب</option>
                                    @foreach($doctors as $doctor)
                                    <option value="{{ $doctor->id }}">د. {{ $doctor->name }} @if(!empty($doctor->specialization)) — {{ $doctor->specialization }} @endif</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">التاريخ *</label>
                                <input type="date" id="edit_appointment_date" name="appointment_date" class="form-control" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">الوقت *</label>
                                <select id="editAppointmentTime" name="appointment_time" class="form-select" required>
                                    <option value="">اختر الوقت</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">نوع الموعد</label>
                                <select id="edit_type" name="type" class="form-select">
                                    <option value="كشف عام">كشف عام</option>
                                    <option value="متابعة">متابعة</option>
                                    <option value="استشارة">استشارة</option>
                                    <option value="فحص دوري">فحص دوري</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <!-- Cost and Payment -->
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">التكلفة (ج.م)</label>
                                <input type="number" id="edit_cost" name="cost" class="form-control" min="0" step="0.01">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label d-block">مدفوع حتى الآن</label>
                                <div id="edit_paid_total" class="form-control-plaintext fw-bold">0.00 ج.م</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">إضافة دفعة الآن</label>
                                <input type="number" id="edit_paid_amount" name="paid_amount" class="form-control" min="0" step="0.01" value="0">
                                <small class="text-muted">سيتم إنشاء دفعة جديدة بهذا المبلغ</small>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label d-block">المتبقي بعد هذه الدفعة</label>
                                <div id="edit_remaining_after" class="form-control-plaintext fw-bold">0.00 ج.م</div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">الحالة</label>
                                <select id="edit_status" name="status" class="form-select">
                                    <option value="مؤكد">مؤكد</option>
                                    <option value="في الانتظار">في الانتظار</option>
                                    <option value="مكتمل">مكتمل</option>
                                    <option value="ملغي">ملغي</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">ملاحظات</label>
                        <textarea id="edit_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>

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

@endsection

@push('scripts')
<script>
$(document).ready(function() {
    const basePath = "{{ $basePath }}";
    const csrfToken = $('meta[name="csrf-token"]').attr('content');

    // Define helpers globally before any rendering happens
    window.updateAppointmentStatus = function(id, newStatus) {
        const url = `${basePath}/appointments/${id}/status`;
        $.ajax({
            url: url,
            method: 'PUT',
            headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
            data: { status: newStatus },
        }).done(function(resp) {
            if (resp && resp.success) {
                loadAppointments();
            } else {
                alert(resp.message || 'تعذر تحديث الحالة');
            }
        }).fail(function(xhr) {
            const msg = (xhr && xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'تعذر تحديث الحالة';
            alert(msg);
        });
    };

    window.renderStatusActions = function(appt) {
        const id = appt.id;
        const s = (appt.status || '').trim();
        const btn = (label, newS, cls, icon) => `<button class="btn btn-sm ${cls}" onclick="updateAppointmentStatus(${id}, '${newS}')" title="${label}"><i class="${icon}"></i> ${label}</button>`;
        if (s === 'قيد المراجعة') {
            return [
                btn('تأكيد', 'مؤكد', 'btn-outline-success', 'fas fa-check'),
                btn('إلغاء', 'ملغي', 'btn-outline-danger', 'fas fa-times')
            ].join('');
        }
        if (s === 'مؤكد') {
            return [
                btn('تسجيل وصول', 'في الانتظار', 'btn-outline-warning', 'fas fa-sign-in-alt'),
                btn('لم يحضر', 'لم يحضر', 'btn-outline-dark', 'fas fa-user-slash'),
                btn('إلغاء', 'ملغي', 'btn-outline-danger', 'fas fa-times')
            ].join('');
        }
        if (s === 'في الانتظار') {
            return [
                btn('إنهاء الزيارة', 'مكتمل', 'btn-outline-primary', 'fas fa-check-circle'),
                btn('إلغاء', 'ملغي', 'btn-outline-danger', 'fas fa-times')
            ].join('');
        }
        return '';
    };

    // Define status helpers early so they exist before first load
    window.updateAppointmentStatus = function(id, newStatus) {
        const url = `${basePath}/appointments/${id}/status`;
        $.ajax({
            url: url,
            method: 'PUT',
            headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
            data: { status: newStatus },
        }).done(function(resp) {
            if (resp && resp.success) {
                loadAppointments();
            } else {
                alert(resp.message || 'تعذر تحديث الحالة');
            }
        }).fail(function(xhr) {
            const msg = xhr?.responseJSON?.message || 'تعذر تحديث الحالة';
            alert(msg);
        });
    };

    window.renderStatusActions = function(appt) {
        const id = appt.id;
        const s = (appt.status || '').trim();
        const btn = (label, newS, cls, icon) => `<button class="btn btn-sm ${cls}" onclick="updateAppointmentStatus(${id}, '${newS}')" title="${label}"><i class="${icon}"></i> ${label}</button>`;
        if (s === 'قيد المراجعة') {
            return [
                btn('تأكيد', 'مؤكد', 'btn-outline-success', 'fas fa-check'),
                btn('إلغاء', 'ملغي', 'btn-outline-danger', 'fas fa-times')
            ].join('');
        }
        if (s === 'مؤكد') {
            return [
                btn('تسجيل وصول', 'في الانتظار', 'btn-outline-warning', 'fas fa-sign-in-alt'),
                btn('لم يحضر', 'لم يحضر', 'btn-outline-dark', 'fas fa-user-slash'),
                btn('إلغاء', 'ملغي', 'btn-outline-danger', 'fas fa-times')
            ].join('');
        }
        if (s === 'في الانتظار') {
            return [
                btn('إنهاء الزيارة', 'مكتمل', 'btn-outline-primary', 'fas fa-check-circle'),
                btn('إلغاء', 'ملغي', 'btn-outline-danger', 'fas fa-times')
            ].join('');
        }
        return '';
    };

    // Load appointments on page load
    loadAppointments();

    // Filter form submission
    $('#filterForm').submit(function(e) {
        e.preventDefault();
        loadAppointments();
    });

    // (View appointment removed as receipt is sufficient)

    // Receipt button handler
    $(document).on('click', '.receipt-appointment', function() {
        const appointmentId = $(this).data('id');
        $.get(`${basePath}/appointments/${appointmentId}`)
            .done(function(response) {
                // Normalize response across roles
                const appointment = response && response.appointment ? response.appointment : response;
                console.log('Receipt appointment response:', response);
                console.log('Normalized appointment object:', appointment);
                // Fill receipt modal content
                const apptDate = new Date(appointment.appointment_date);
                const formattedDate = isNaN(apptDate.getTime()) ? (appointment.appointment_date || '-') : apptDate.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' });

                const rPatientName = appointment.patient?.name || appointment.patient_name || '-';
                const rPatientNumber = appointment.patient?.patient_number || appointment.patient_number || '-';
                const rPatientMobile = appointment.patient?.mobile || appointment.patient_mobile || '-';
                $('#appointmentReceiptModal .booking-ref').text(appointment.booking_reference || '-');
                $('#appointmentReceiptModal .issue-date').text(new Date().toLocaleDateString('en-US'));
                $('#appointmentReceiptModal .patient-name').text(rPatientName);
                $('#appointmentReceiptModal .patient-number').text(rPatientNumber);
                $('#appointmentReceiptModal .patient-mobile').text(rPatientMobile);
                const rDoctorName = appointment.doctor?.name || appointment.doctor_name || '-';
                $('#appointmentReceiptModal .doctor-name').text(rDoctorName !== '-' ? ('د. ' + rDoctorName) : '-');
                $('#appointmentReceiptModal .appointment-type').text(appointment.appointment_type || appointment.type || '-');
                $('#appointmentReceiptModal .appointment-date').text(formattedDate);
                $('#appointmentReceiptModal .appointment-time').text(formatTime12h(appointment.appointment_time));
                $('#appointmentReceiptModal .appointment-status').text(appointment.status || '-');
                if (appointment.cost != null) {
                    $('#appointmentReceiptModal .payment-amount').text(Number(appointment.cost).toFixed(2) + ' ج.م');
                } else {
                    $('#appointmentReceiptModal .payment-amount').text('-');
                }
                // Optional fields (if present on model)
                if (appointment.payment_method) $('#appointmentReceiptModal .payment-method').text(appointment.payment_method);
                if (appointment.payment_date) $('#appointmentReceiptModal .payment-date').text(appointment.payment_date);
                if (appointment.payment_status) $('#appointmentReceiptModal .payment-status').text(appointment.payment_status);
                if (appointment.notes) {
                    $('#appointmentReceiptModal .notes-section').show();
                    $('#appointmentReceiptModal .appointment-notes').text(appointment.notes);
                } else {
                    $('#appointmentReceiptModal .notes-section').hide();
                    $('#appointmentReceiptModal .appointment-notes').text('');
                }

                $('#appointmentReceiptModal').modal('show');
            })
            .fail(function() {
                alert('تعذر تحميل بيانات الإيصال');
            });
    });
    // Clear filters
    $('#clearFilters').click(function() {
        $('#filterForm')[0].reset();
        loadAppointments();
    });

    // Patient search functionality for add form
    setupPatientSearch('#add_patient_name', '#add_patient_mobile');

    // Load time slots when doctor or date changes (Add form)
    $('#add_doctor_id, #add_appointment_date').change(function() {
        const doctorId = $('#add_doctor_id').val();
        const date = $('#add_appointment_date').val();
        if (doctorId && date) {
            loadTimeSlots(doctorId, date, '#add_appointment_time');
        }
    });

    // Load time slots when doctor or date changes (Edit form)
    $('#edit_doctor_id, #edit_appointment_date').change(function() {
        const doctorId = $('#edit_doctor_id').val();
        const date = $('#edit_appointment_date').val();
        if (doctorId && date) {
            loadTimeSlots(doctorId, date, '#editAppointmentTime');
        }
    });

    // Add appointment form submission is now handled by appointment-manager.js

    // Edit appointment form submission
    $('#editAppointmentForm').submit(function(e) {
        e.preventDefault();
        const appointmentId = $('#edit_appointment_id').val();
        const submitBtn = $(this).find('button[type="submit"]');
        submitBtn.prop('disabled', true).text('جاري الحفظ...');
        
        // Build payload and map 'type' (Arabic) to 'appointment_type'
        const formArray = $(this).serializeArray();
        const payload = {};
        formArray.forEach(({name, value}) => payload[name] = value);
        const typeMap = {
            'كشف عام': 'check-up',
            'متابعة': 'follow-up',
            'استشارة': 'check-up',
            'فحص دوري': 'check-up'
        };
        if (payload.type) {
            payload.appointment_type = typeMap[payload.type] || payload.type;
        }
        $.ajax({
            url: `${basePath}/appointments/${appointmentId}`,
            method: 'PUT',
            headers: { 'X-CSRF-TOKEN': csrfToken },
            data: payload,
            success: function(response) {
                if (response.success) {
                    alert(response.message);
                    $('#editAppointmentModal').modal('hide');
                    loadAppointments();
                } else {
                    alert(response.message || 'حدث خطأ أثناء التحديث');
                }
            },
            error: function(xhr) {
                const response = xhr.responseJSON;
                alert(response?.message || 'حدث خطأ أثناء التحديث');
            },
            complete: function() {
                submitBtn.prop('disabled', false).text('حفظ التغييرات');
            }
        });
    });

    function loadAppointments() {
        $('#loadingSpinner').show();
        const formData = $('#filterForm').serialize();
        
        $.get(`${basePath}/appointments/list?` + formData)
            .done(function(response) {
                console.log('Response received:', response);
                const tbody = $('#appointmentsTable tbody');
                tbody.empty();
                
                // Check if response has error
                if (response.success === false) {
                    alert(response.message || 'حدث خطأ في تحميل المواعيد');
                    console.error('API Error:', response.error);
                    return;
                }
                
                const appointments = response;
                if (appointments && appointments.length > 0) {
                    appointments.forEach(function(appointment) {
                        // Format the date
                        const appointmentDate = new Date(appointment.appointment_date);
                        const formattedDate = appointmentDate.toLocaleDateString('en-US', {
                            year: 'numeric',
                            month: '2-digit',
                            day: '2-digit'
                        });
                        
                        const waLink = getEgyptWhatsAppLink(appointment);
                        const row = `
                            <tr>
                                <td>${formattedDate}</td>
                                <td>${formatTime12h(appointment.appointment_time)}</td>
                                <td>${appointment.patient ? appointment.patient.name : 'غير محدد'}</td>
                                <td>${appointment.patient ? appointment.patient.mobile : '-'}</td>
                                <td>${appointment.doctor ? 'د. ' + appointment.doctor.name : 'غير محدد'}</td>
                                <td>${appointment.type || 'كشف عام'}</td>
                                <td>${getPaymentBadge(appointment)}</td>
                                <td>${getStatusBadge(appointment.status)}</td>
                                <td>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <button class="btn btn-outline-primary edit-appointment" data-id="${appointment.id}">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="btn btn-outline-success receipt-appointment" data-id="${appointment.id}">
                                            <i class="fas fa-receipt"></i>
                                        </button>
                                        ${waLink ? `
                                        <a class="btn btn-outline-success" href="${waLink}" target="_blank" rel="noopener" title="واتساب">
                                            <i class="fab fa-whatsapp"></i>
                                        </a>
                                        ` : ''}
                                    </div>
                                    <div class="mt-2 d-flex flex-wrap gap-1">
                                        ${(window.renderStatusActions ? window.renderStatusActions(appointment) : '')}
                                    </div>
                                </td>
                            </tr>
                        `;
                        tbody.append(row);
                    });
                } else {
                    tbody.append('<tr><td colspan="8" class="text-center">لا توجد مواعيد</td></tr>');
                }
            })
            .fail(function(xhr, status, error) {
                console.error('Error loading appointments:', error);
                console.error('XHR Response:', xhr.responseText);
                
                let errorMessage = 'حدث خطأ أثناء تحميل المواعيد';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                
                alert(errorMessage);
            })
            .always(function() {
                $('#loadingSpinner').hide();
            });
    }

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

    function getPaymentBadge(appointment) {
        const status = appointment.payment_status || 'unpaid';
        const paid = typeof appointment.paid_amount !== 'undefined' ? Number(appointment.paid_amount) : null;
        const remaining = typeof appointment.remaining_amount !== 'undefined' ? Number(appointment.remaining_amount) : null;
        let badgeClass = 'bg-secondary';
        let label = 'غير مدفوع';
        if (status === 'confirmed') { badgeClass = 'bg-success'; label = 'مدفوع'; }
        else if (status === 'pending') { badgeClass = 'bg-warning text-dark'; label = 'جزئي'; }
        const amounts = (paid !== null && remaining !== null) ? ` — مدفوع: ${paid.toFixed(2)} ج.م | متبقي: ${remaining.toFixed(2)} ج.م` : '';
        return `<span class="badge ${badgeClass}">${label}</span><br><small class="text-muted">${amounts}</small>`;
    }

    // Format time to 12-hour with Arabic period (صباحا/مساء)
    function formatTime12h(timeStr) {
        if (!timeStr) return '-';
        // Expect formats like "HH:mm" or "HH:mm:ss"
        const parts = String(timeStr).split(':');
        if (parts.length < 2) return timeStr; // fallback if unexpected
        let hour = parseInt(parts[0], 10);
        const minute = parts[1] ?? '00';
        const period = hour >= 12 ? 'مساء' : 'صباحا';
        hour = hour % 12;
        if (hour === 0) hour = 12;
        const hh = String(hour).padStart(2, '0');
        const mm = String(minute).padStart(2, '0');
        return `${hh}:${mm} ${period}`;
    }

    // Build WhatsApp link for Egypt numbers with Arabic message
    function getEgyptWhatsAppLink(appointment) {
        try {
            const mobileRaw = (appointment.patient && appointment.patient.mobile) ? appointment.patient.mobile : (appointment.patient_mobile || '');
            const name = appointment.patient ? appointment.patient.name : (appointment.patient_name || '-');
            const doctorName = appointment.doctor ? appointment.doctor.name : (appointment.doctor_name || '-');
            const booking = appointment.booking_reference || '-';
            const dateObj = new Date(appointment.appointment_date);
            const dateStr = isNaN(dateObj.getTime()) ? (appointment.appointment_date || '-') : dateObj.toLocaleDateString('ar-EG');
            const timeStr = formatTime12h(appointment.appointment_time);

            const digits = String(mobileRaw).replace(/\D/g, '');
            if (!digits) return '';
            let phone = digits;
            // Normalize to 20XXXXXXXXXX (drop leading 0)
            if (phone.startsWith('00')) {
                phone = phone.replace(/^00/, '');
            }
            if (phone.startsWith('+')) {
                phone = phone.replace(/^\+/, '');
            }
            if (phone.startsWith('0')) {
                phone = '20' + phone.slice(1);
            } else if (!phone.startsWith('20')) {
                // Assume local without country code
                phone = '20' + phone;
            }

            const lines = [
                `مرحباً ${name}،`,
                `تفاصيل موعدك في عيادة سمارت كير:`,
                `- رقم الحجز: ${booking}`,
                `- الطبيب: د. ${doctorName}`,
                `- التاريخ: ${dateStr}`,
                `- الوقت: ${timeStr}`,
                `\nللاستفسار يُرجى الرد على هذه الرسالة.`
            ];
            const text = encodeURIComponent(lines.join('\n'));
            return `https://wa.me/${phone}?text=${text}`;
        } catch (e) {
            return '';
        }
    }

    function setupPatientSearch(nameSelector, mobileSelector) {
        let searchTimeout;
        $(nameSelector).on('input', function() {
            clearTimeout(searchTimeout);
            const query = $(this).val();
            
            if (query.length >= 2) {
                searchTimeout = setTimeout(function() {
                    searchPatients(query, nameSelector, mobileSelector);
                }, 300);
            } else {
                $('.patient-suggestions').hide().empty();
            }
        });
    }

    function searchPatients(query, nameSelector, mobileSelector) {
        $.get(`${basePath}/search-patients`, { q: query })
            .done(function(patients) {
                const suggestions = $('.patient-suggestions');
                suggestions.empty();
                
                if (patients.length > 0) {
                    patients.forEach(function(patient) {
                        const item = $(`
                            <div class="suggestion-item p-2 border-bottom cursor-pointer" 
                                 data-name="${patient.name}" 
                                 data-mobile="${patient.mobile}">
                                <strong>${patient.name}</strong><br>
                                <small class="text-muted">${patient.mobile} - ${patient.patient_number || 'لا يوجد رقم'}</small>
                            </div>
                        `);
                        suggestions.append(item);
                    });
                    suggestions.show();
                } else {
                    suggestions.hide();
                }
            });
    }

    // Handle patient selection
    $(document).on('click', '.suggestion-item', function() {
        const nameField = $(this).closest('.modal').find('input[name="patient_name"]');
        const mobileField = $(this).closest('.modal').find('input[name="patient_mobile"]');
        
        nameField.val($(this).data('name'));
        mobileField.val($(this).data('mobile'));
        $('.patient-suggestions').hide();
    });

    function loadTimeSlots(doctorId, date, selector, excludeAppointment = null) {
        // Normalize date to YYYY-MM-DD for backend without timezone shifts
        let dateStr = date || '';
        if (typeof dateStr === 'string') {
            if (dateStr.includes('T')) {
                // ISO string received; extract date part only
                dateStr = dateStr.slice(0, 10);
            } else if (dateStr.length > 10) {
                dateStr = dateStr.slice(0, 10);
            }
        }

        // Build URL with exclude_appointment parameter if provided
        let url = `${basePath}/available-slots`;
        let params = { doctor_id: doctorId, date: dateStr };
        if (excludeAppointment) {
            params.exclude_appointment = excludeAppointment;
        }

        $.get(url, params)
            .done(function(response) {
                const timeSelect = $(selector);
                timeSelect.empty().append('<option value="">اختر الوقت</option>');

                // Response may be { success: true, slots: [...] }
                const slots = response && Array.isArray(response.slots) ? response.slots : (Array.isArray(response) ? response : []);

                if (!Array.isArray(slots) || slots.length === 0) {
                    return; // keep only the placeholder
                }

                slots.forEach(function(slot) {
                    // Support both shapes: {time:'HH:mm', status:'available'} or {value,label}
                    const timeVal = slot.time || slot.value;
                    if (!timeVal) return;
                    // Only show available slots if status provided
                    if (slot.status && slot.status !== 'available') return;
                    const label = slot.label || formatTime12h(timeVal);
                    timeSelect.append(`<option value="${timeVal}">${label}</option>`);
                });
            })
            .fail(function() {
                $(selector).empty().append('<option value="">لا توجد مواعيد متاحة</option>');
            });
    }

    // Edit appointment button click
    $(document).on('click', '.edit-appointment', function() {
        const appointmentId = $(this).data('id');
        
        $.get(`${basePath}/appointments/${appointmentId}`)
            .done(function(response) {
                // Normalize response across roles
                const appt = response && response.appointment ? response.appointment : response;

                $('#edit_appointment_id').val(appt.id || '');
                const pName = appt.patient?.name || appt.patient_name || '';
                const pMobile = appt.patient?.mobile || appt.patient_mobile || '';
                $('#edit_patient_name').val(pName);
                $('#edit_patient_mobile').val(pMobile);
                $('#edit_doctor_id').val(appt.doctor_id || '');
                // Normalize edit date field to YYYY-MM-DD
                let editDate = appt.appointment_date || '';
                console.log('Raw appointment date from API:', editDate);
                
                if (editDate) {
                    // Handle different date formats
                    if (typeof editDate === 'string') {
                        if (editDate.includes('T')) {
                            // ISO string - extract date part without timezone conversion
                            editDate = editDate.split('T')[0];
                        } else if (editDate.length >= 10) {
                            // Already in YYYY-MM-DD format
                            editDate = editDate.slice(0, 10);
                        }
                    } else if (editDate instanceof Date) {
                        // Date object - format without timezone issues
                        const year = editDate.getFullYear();
                        const month = String(editDate.getMonth() + 1).padStart(2, '0');
                        const day = String(editDate.getDate()).padStart(2, '0');
                        editDate = `${year}-${month}-${day}`;
                    }
                }
                
                console.log('Setting edit date:', editDate);
                $('#edit_appointment_date').val(editDate);
                console.log('Date field value after setting:', $('#edit_appointment_date').val());
                // Map backend type ('check-up'/'follow-up') to Arabic select values for the UI
                const typeDb = (appt.appointment_type || appt.type || '').toLowerCase();
                const typeUiMap = { 'check-up': 'كشف عام', 'follow-up': 'متابعة' };
                const typeUi = typeUiMap[typeDb] || (appt.type || '');
                $('#edit_type').val(typeUi);
                $('#edit_status').val(appt.status || '');
                $('#edit_notes').val(appt.notes || '');

                // Set cost and payment fields
                const cost = Number(appt.cost || 0);
                const paidTotal = Number(appt.paid_total || 0);
                $('#edit_cost').val(cost.toFixed(2));
                $('#edit_paid_total').text(`${paidTotal.toFixed(2)} ج.م`);
                $('#edit_paid_amount').val(0);
                // Compute remaining after potential additional payment
                function updateEditRemaining() {
                    const addPay = Number($('#edit_paid_amount').val() || 0);
                    let remaining = cost - paidTotal - addPay;
                    if (remaining < 0) remaining = 0;
                    $('#edit_remaining_after').text(`${remaining.toFixed(2)} ج.م`);
                }
                updateEditRemaining();
                $('#edit_paid_amount').off('input._calc').on('input._calc', updateEditRemaining);
                
                // Load time slots and set current time
                if (appt.doctor_id && appt.appointment_date) {
                    console.log('Loading time slots for doctor:', appt.doctor_id, 'date:', appt.appointment_date);
                    loadTimeSlots(appt.doctor_id, appt.appointment_date, '#editAppointmentTime', appt.id);
                    setTimeout(() => {
                        console.log('Setting appointment time:', appt.appointment_time);
                        // Convert time from HH:mm:ss to HH:mm format to match slot options
                        let timeToSet = appt.appointment_time || '';
                        if (timeToSet && timeToSet.includes(':')) {
                            const timeParts = timeToSet.split(':');
                            timeToSet = `${timeParts[0]}:${timeParts[1]}`;
                        }
                        console.log('Formatted time to set:', timeToSet);
                        $('#editAppointmentTime').val(timeToSet);
                        console.log('Time field value after setting:', $('#editAppointmentTime').val());
                        console.log('Available options:', $('#editAppointmentTime option').map(function() { return $(this).val(); }).get());
                    }, 500);
                }
                
                $('#editAppointmentModal').modal('show');
            })
            .fail(function() {
                alert('حدث خطأ أثناء تحميل بيانات الموعد');
            });
    });

    // Cancel appointment button click
    $(document).on('click', '.cancel-appointment', function() {
        if (confirm('هل أنت متأكد من إلغاء هذا الموعد؟')) {
            const appointmentId = $(this).data('id');
            
            $.ajax({
                url: `${basePath}/appointments/${appointmentId}`,
                method: 'DELETE',
                data: { _token: csrfToken },
                success: function(response) {
                    if (response.success) {
                        alert(response.message);
                        loadAppointments();
                    }
                },
                error: function(xhr) {
                    const response = xhr.responseJSON;
                    alert(response?.message || 'حدث خطأ أثناء الإلغاء');
                }
            });
        }
    });

    // Hide suggestions when clicking outside
    $(document).click(function(e) {
        if (!$(e.target).closest('input[name="patient_name"], .patient-suggestions').length) {
            $('.patient-suggestions').hide();
        }
    });
});
</script>

<!-- Initialize the unified AppointmentManager for this page -->
<script src="{{ asset('js/appointment-manager.js') }}"></script>
<script>
$(function() {
    try {
        const role = @json(($basePath ?? '/receptionist') === '/admin' ? 'admin' : 'receptionist');
        const patients = @json($patients ?? []);
        const doctors = @json($doctors ?? []);
        const token = $('meta[name="csrf-token"]').attr('content');
        window.appointmentManager = new AppointmentManager({
            baseUrl: '',
            role: role,
            patients: patients,
            doctors: doctors,
            csrfToken: token
        });
    } catch (e) { console.error('Failed to init AppointmentManager:', e); }
});
</script>

@push('scripts')
<script>
// Provide global functions expected by the shared receipt modal
window.closeReceiptModal = function() {
    $('#appointmentReceiptModal').modal('hide');
    // Cleanup any leftover backdrop/body styles
    $('body').removeClass('modal-open');
    $('.modal-backdrop').remove();
    $('body').css({ 'overflow': '', 'padding-right': '' });
};

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">' +
        '</head>' +
        '<body>' +
        '<div class="receipt-container">' +
        receiptContent.innerHTML +
        '</div>' +
        '<script>window.onload = function(){ setTimeout(function(){ window.print(); window.close(); }, 300); };<\/script>' +
        '</body>' +
        '</html>'
    );
    printWindow.document.close();
};
</script>
@endpush

<style>
.suggestion-item {
    cursor: pointer;
    background: white;
    border: 1px solid #dee2e6;
}
.suggestion-item:hover {
    background-color: #f8f9fa;
}
.patient-suggestions {
    position: absolute;
    z-index: 1000;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
</style>
@endpush