@extends('layouts.app')

@section('title', 'طلبات الحجز السريع')
@section('page_title', 'طلبات الحجز السريع')

@section('content')
<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>
                <div class="d-flex gap-2">
                    <span class="badge bg-warning">{{ $bookings->where('status', 'pending')->count() }} في الانتظار</span>
                    <span class="badge bg-info">{{ $bookings->where('status', 'contacted')->count() }} تم التواصل</span>
                    <span class="badge bg-success">{{ $bookings->where('status', 'scheduled')->count() }} تم الجدولة</span>
                </div>
            </div>
            <div class="card-body">
                <form id="filterForm" class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label">الحالة</label>
                        <select name="status" class="form-select">
                            <option value="">جميع الحالات</option>
                            <option value="pending">في الانتظار</option>
                            <option value="contacted">تم التواصل</option>
                            <option value="scheduled">تم الجدولة</option>
                            <option value="cancelled">ملغي</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">الطبيب</label>
                        <select name="doctor_id" class="form-select">
                            <option value="">جميع الأطباء</option>
                            @foreach($bookings->pluck('doctor')->unique('id') as $doctor)
                                <option value="{{ $doctor->id }}">د. {{ $doctor->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">من تاريخ</label>
                        <input type="date" name="date_from" class="form-control">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">إلى تاريخ</label>
                        <input type="date" name="date_to" class="form-control">
                    </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">
                        <thead>
                            <tr>
                                <th>رقم الطلب</th>
                                <th>اسم المريض</th>
                                <th>رقم الهاتف</th>
                                <th>الطبيب</th>
                                <th>التاريخ المفضل</th>
                                <th>الوقت المفضل</th>
                                <th>الحالة</th>
                                <th>تاريخ الطلب</th>
                                <th>الإجراءات</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($bookings as $booking)
                            <tr>
                                <td>#{{ $booking->id }}</td>
                                <td>{{ $booking->patient_name }}</td>
                                <td>
                                    <a href="tel:{{ $booking->mobile }}" class="text-decoration-none">
                                        {{ $booking->mobile }}
                                    </a>
                                </td>
                                <td>د. {{ $booking->doctor->name }}</td>
                                <td>{{ $booking->preferred_date->format('Y-m-d') }}</td>
                                <td>{{ $booking->preferred_time->format('H:i') }}</td>
                                <td>
                                    @switch($booking->status)
                                        @case('pending')
                                            <span class="badge bg-warning">في الانتظار</span>
                                            @break
                                        @case('contacted')
                                            <span class="badge bg-info">تم التواصل</span>
                                            @break
                                        @case('scheduled')
                                            <span class="badge bg-success">تم الجدولة</span>
                                            @break
                                        @case('cancelled')
                                            <span class="badge bg-danger">ملغي</span>
                                            @break
                                    @endswitch
                                </td>
                                <td>{{ $booking->created_at->format('Y-m-d H:i') }}</td>
                                <td>
                                    <button class="btn btn-sm btn-primary" onclick="viewBooking({{ $booking->id }})">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="btn btn-sm btn-success" onclick="updateStatus({{ $booking->id }})">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="9" class="text-center">لا توجد طلبات حجز</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                
                <div class="d-flex justify-content-center mt-4">
                    {{ $bookings->links() }}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- View Booking Modal -->
<div class="modal fade" id="viewBookingModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">تفاصيل طلب الحجز</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="bookingDetails">
                <!-- Content will be loaded here -->
            </div>
        </div>
    </div>
</div>

<!-- Update Status Modal -->
<div class="modal fade" id="updateStatusModal" 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="updateStatusForm">
                <div class="modal-body">
                    <input type="hidden" id="bookingId">
                    
                    <div class="mb-3">
                        <label class="form-label">الحالة</label>
                        <select class="form-select" id="bookingStatus" name="status" required>
                            <option value="">اختر الحالة</option>
                            <option value="pending">في الانتظار</option>
                            <option value="contacted">تم التواصل</option>
                            <option value="scheduled">تم الجدولة</option>
                            <option value="cancelled">ملغي</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">ملاحظات الاستقبال</label>
                        <textarea class="form-control" id="receptionistNotes" name="receptionist_notes" rows="3" placeholder="أي ملاحظات حول التواصل مع المريض..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                    <button type="submit" class="btn btn-primary">حفظ التغييرات</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function viewBooking(id) {
    fetch(`/quick-bookings/${id}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const booking = data.booking;
                const details = `
                    <div class="row">
                        <div class="col-md-6">
                            <strong>رقم الطلب:</strong> #${booking.id}<br>
                            <strong>اسم المريض:</strong> ${booking.patient_name}<br>
                            <strong>رقم الهاتف:</strong> <a href="tel:${booking.mobile}">${booking.mobile}</a><br>
                            <strong>الطبيب:</strong> د. ${booking.doctor.name}<br>
                            <strong>التخصص:</strong> ${booking.doctor.specialization || 'غير محدد'}
                        </div>
                        <div class="col-md-6">
                            <strong>التاريخ المفضل:</strong> ${booking.preferred_date}<br>
                            <strong>الوقت المفضل:</strong> ${booking.preferred_time}<br>
                            <strong>الحالة:</strong> ${getStatusBadge(booking.status)}<br>
                            <strong>تاريخ الطلب:</strong> ${booking.created_at}
                        </div>
                    </div>
                    ${booking.notes ? `<div class="mt-3"><strong>ملاحظات المريض:</strong><br>${booking.notes}</div>` : ''}
                    ${booking.receptionist_notes ? `<div class="mt-3"><strong>ملاحظات الاستقبال:</strong><br>${booking.receptionist_notes}</div>` : ''}
                    ${booking.contacted_at ? `<div class="mt-3"><strong>تاريخ التواصل:</strong> ${booking.contacted_at}</div>` : ''}
                `;
                document.getElementById('bookingDetails').innerHTML = details;
                
                // Show the modal using the same function
                showModal('viewBookingModal');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('حدث خطأ أثناء تحميل التفاصيل');
        });
}

function updateStatus(id) {
    // First fetch the current booking data to populate the form
    fetch(`/quick-bookings/${id}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const booking = data.booking;
                document.getElementById('bookingId').value = id;
                
                // Set the current status as selected
                const statusSelect = document.getElementById('bookingStatus');
                statusSelect.value = booking.status;
                
                // Set current receptionist notes if any
                const notesTextarea = document.getElementById('receptionistNotes');
                notesTextarea.value = booking.receptionist_notes || '';
                
                // Show the modal using Bootstrap 5 API
                showModal('updateStatusModal');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            // Still show the modal even if we can't fetch current data
            document.getElementById('bookingId').value = id;
            showModal('updateStatusModal');
        });
}

function showModal(modalId) {
    const modalElement = document.getElementById(modalId);
    if (!modalElement) {
        console.error('Modal element not found:', modalId);
        return;
    }
    
    try {
        // Try Bootstrap 5 native API first
        if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
            const modal = new bootstrap.Modal(modalElement);
            modal.show();
        } else {
            // Fallback: manually show modal by adding Bootstrap classes
            modalElement.classList.add('show');
            modalElement.style.display = 'block';
            modalElement.setAttribute('aria-modal', 'true');
            modalElement.setAttribute('role', 'dialog');
            
            // Add backdrop
            const backdrop = document.createElement('div');
            backdrop.className = 'modal-backdrop fade show';
            backdrop.id = modalId + '-backdrop';
            document.body.appendChild(backdrop);
            
            // Add close functionality
            const closeButtons = modalElement.querySelectorAll('[data-bs-dismiss="modal"]');
            closeButtons.forEach(button => {
                button.onclick = () => hideModal(modalId);
            });
            
            // Close on backdrop click
            backdrop.onclick = () => hideModal(modalId);
        }
    } catch (error) {
        console.error('Error showing modal:', error);
        alert('حدث خطأ في فتح النافذة');
    }
}

function hideModal(modalId) {
    const modalElement = document.getElementById(modalId);
    const backdrop = document.getElementById(modalId + '-backdrop');
    
    if (modalElement) {
        modalElement.classList.remove('show');
        modalElement.style.display = 'none';
        modalElement.removeAttribute('aria-modal');
        modalElement.removeAttribute('role');
    }
    
    if (backdrop) {
        backdrop.remove();
    }
}

function getStatusBadge(status) {
    const badges = {
        'pending': '<span class="badge bg-warning">في الانتظار</span>',
        'contacted': '<span class="badge bg-info">تم التواصل</span>',
        'scheduled': '<span class="badge bg-success">تم الجدولة</span>',
        'cancelled': '<span class="badge bg-danger">ملغي</span>'
    };
    return badges[status] || status;
}

document.getElementById('updateStatusForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const bookingId = document.getElementById('bookingId').value;
    
    // Convert FormData to regular object for better compatibility with PATCH
    const data = {};
    for (let [key, value] of formData.entries()) {
        data[key] = value;
    }
    // Debug: Log form data
    console.log('Form data being sent:', data);

    // Use FormData with method spoofing for reliable Laravel PATCH handling
    formData.append('_method', 'PATCH');
    
    fetch(`/quick-bookings/${bookingId}/status`, {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'X-Requested-With': 'XMLHttpRequest',
            'X-HTTP-Method-Override': 'PATCH'
        }
    })
    .then(response => {
        if (!response.ok) {
            return response.json().then(err => Promise.reject(err));
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            alert('تم تحديث حالة الطلب بنجاح');
            hideModal('updateStatusModal');
            
            // Update the status in the table row directly instead of reloading
            updateTableRowStatus(bookingId, formData.get('status'), formData.get('receptionist_notes'));
        } else {
            alert('حدث خطأ أثناء التحديث');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        if (error.errors) {
            // Display validation errors
            let errorMessage = 'أخطاء في التحقق:\n';
            for (let field in error.errors) {
                errorMessage += error.errors[field].join('\n') + '\n';
            }
            alert(errorMessage);
        } else {
            alert('حدث خطأ أثناء التحديث');
        }
    });
});

// Function to update the table row status without page reload
function updateTableRowStatus(bookingId, newStatus, notes) {
    // Find the table row for this booking
    const rows = document.querySelectorAll('tbody tr');
    for (let row of rows) {
        const firstCell = row.querySelector('td');
        if (firstCell && firstCell.textContent.includes(`#${bookingId}`)) {
            // Find the status cell (7th column, index 6)
            const statusCell = row.cells[6];
            if (statusCell) {
                // Update the status badge
                statusCell.innerHTML = getStatusBadge(newStatus);
            }
            break;
        }
    }
}
</script>
@endsection