@extends('layouts.app')

@section('title', 'إدارة الأطباء')
@section('page_title', 'إدارة الأطباء')

@section('content')
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card bg-success text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4>{{ \App\Models\User::where('role', 'doctor')->count() }}</h4>
                        <p class="mb-0">إجمالي الأطباء</p>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-user-md fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-primary text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4>{{ \App\Models\User::where('role', 'doctor')->where('created_at', '>=', now()->subMonth())->count() }}</h4>
                        <p class="mb-0">أطباء جدد هذا الشهر</p>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-user-plus fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-info text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4>{{ \App\Models\Appointment::whereDate('appointment_date', today())->distinct('doctor_id')->count() }}</h4>
                        <p class="mb-0">أطباء نشطون اليوم</p>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-stethoscope fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-warning text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        @php
                            $totalAppointments = \App\Models\Appointment::count();
                            $totalDoctors = \App\Models\User::where('role', 'doctor')->count();
                            $avgAppointments = $totalDoctors > 0 ? round($totalAppointments / $totalDoctors) : 0;
                        @endphp
                        <h4>{{ $avgAppointments }}</h4>
                        <p class="mb-0">متوسط المواعيد لكل طبيب</p>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-chart-line fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <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-success" data-bs-toggle="modal" data-bs-target="#addDoctorModal">
                    <i class="fas fa-plus me-2"></i>إضافة طبيب جديد
                </button>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped" id="doctorsTable">
                        <thead>
                            <tr>
                                <th>الاسم</th>
                                <th>رقم الهاتف</th>
                                <th>البريد الإلكتروني</th>
                                <th>التخصص</th>
                                <th>المواعيد</th>
                                <th>المرضى</th>
                                <th>السجلات الطبية</th>
                                <th>تاريخ الانضمام</th>
                                <th>الحالة</th>
                                <th>سعر الكشف</th>
                                <th>سعر المتابعة</th>
                                <th>نسبة العمولة</th>
                                <th>مستحقات الشهر</th>
                                <th>الإجراءات</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach(\App\Models\User::where('role', 'doctor')->get() as $doctor)
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-user-circle fa-2x text-muted me-2"></i>
                                        <div>
                                            <strong>د. {{ $doctor->name }}</strong>
                                        </div>
                                    </div>
                                </td>
                                <td>{{ $doctor->mobile }}</td>
                                <td>{{ $doctor->email ?? '-' }}</td>
                                <td>
                                    <span class="badge bg-secondary">{{ $doctor->specialization ? $doctor->specialization : 'طب عام' }}</span>
                                </td>
                                <td>
                                    <span class="badge bg-primary">{{ \App\Models\Appointment::where('doctor_id', $doctor->id)->count() }}</span>
                                </td>
                                <td>
                                    <span class="badge bg-info">{{ \App\Models\Appointment::where('doctor_id', $doctor->id)->distinct('patient_id')->count() }}</span>
                                </td>
                                <td>
                                    <span class="badge bg-success">{{ \App\Models\MedicalRecord::where('doctor_id', $doctor->id)->count() }}</span>
                                </td>
                                <td>{{ $doctor->created_at->format('Y-m-d') }}</td>
                                <td>
                                    <span class="badge bg-success">نشط</span>
                                </td>
                                <td>
                                    {{ isset($doctor->checkup_cost) ? number_format($doctor->checkup_cost, 2) . ' ج.م' : '-' }}
                                </td>
                                <td>
                                    {{ isset($doctor->followup_cost) ? number_format($doctor->followup_cost, 2) . ' ج.م' : '-' }}
                                </td>
                                <td>
                                    {{ $doctor->commission_percentage ? rtrim(rtrim(number_format($doctor->commission_percentage, 2, '.', ''), '0'), '.') . '%' : '-' }}
                                </td>
                                <td>
                                    @php
                                        $monthStart = now()->startOfMonth();
                                        $monthEnd = now()->endOfMonth();
                                        $paidSum = \App\Models\Appointment::where('doctor_id', $doctor->id)
                                            ->where('payment_status', 'paid')
                                            ->whereBetween('appointment_date', [$monthStart, $monthEnd])
                                            ->sum('cost');
                                        $commission = $doctor->commission_percentage ? ($paidSum * ($doctor->commission_percentage/100)) : 0;
                                    @endphp
                                    <span class="badge bg-light text-dark">{{ number_format($commission, 2) }} ج.م</span>
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <button
                                            class="btn btn-sm btn-outline-primary"
                                            onclick="viewDoctor(this, {{ $doctor->id }})"
                                            data-name="{{ 'د. ' . $doctor->name }}"
                                            data-mobile="{{ $doctor->mobile }}"
                                            data-email="{{ $doctor->email ?? '-' }}"
                                            data-commission="{{ $doctor->commission_percentage ? rtrim(rtrim(number_format($doctor->commission_percentage, 2, '.', ''), '0'), '.') : '-' }}"
                                            data-specialization="{{ $doctor->specialization ?? 'طب عام' }}"
                                            data-checkupcost="{{ isset($doctor->checkup_cost) ? number_format($doctor->checkup_cost, 2) : '-' }}"
                                            data-followupcost="{{ isset($doctor->followup_cost) ? number_format($doctor->followup_cost, 2) : '-' }}"
                                            data-appointments="{{ \App\Models\Appointment::where('doctor_id', $doctor->id)->count() }}"
                                            data-patients="{{ \App\Models\Appointment::where('doctor_id', $doctor->id)->distinct('patient_id')->count() }}"
                                            data-records="{{ \App\Models\MedicalRecord::where('doctor_id', $doctor->id)->count() }}"
                                            data-joined="{{ $doctor->created_at->format('Y-m-d') }}"
                                            data-monthly="{{ number_format($commission ?? 0, 2) }}"
                                        >
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-warning" onclick="editDoctor({{ $doctor->id }})">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger" onclick="deleteDoctor({{ $doctor->id }})">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">أداء الأطباء</h5>
            </div>
            <div class="card-body">
                <canvas id="doctorPerformanceChart" height="200"></canvas>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">الأطباء الأكثر نشاطاً</h5>
            </div>
            <div class="card-body">
                @php
                    $topDoctors = \App\Models\User::where('role', 'doctor')->get()->map(function($doctor) {
                        $doctor->appointments_count = \App\Models\Appointment::where('doctor_id', $doctor->id)->count();
                        return $doctor;
                    })->sortByDesc('appointments_count')->take(5);
                @endphp
                @foreach($topDoctors as $doctor)
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-user-md fa-2x text-success me-3"></i>
                        <div>
                            <strong>د. {{ $doctor->name }}</strong>
                            <br><small class="text-muted">{{ $doctor->appointments_count }} موعد</small>
                        </div>
                    </div>
                    <div class="text-end">
                        <div class="progress" style="width: 100px; height: 8px;">
                            @php
                                $maxAppointments = $topDoctors->max('appointments_count');
                                $percentage = $maxAppointments > 0 ? ($doctor->appointments_count / $maxAppointments) * 100 : 0;
                            @endphp
                            <div class="progress-bar bg-success" style="width: {{ $percentage }}%"></div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

<!-- Add Doctor Modal -->
<div class="modal fade" id="addDoctorModal" 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="addDoctorForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">اسم الطبيب</label>
                        <input type="text" class="form-control" name="name" placeholder="د. أحمد محمد" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">رقم الهاتف</label>
                        <input type="text" class="form-control" name="mobile" placeholder="01xxxxxxxxx" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">البريد الإلكتروني</label>
                        <input type="email" class="form-control" name="email" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">التخصص</label>
                        <select class="form-select" name="specialization">
                            <option value="طب عام">طب عام</option>
                            <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="row g-2">
                        <div class="col-md-6">
                            <label class="form-label">سعر الكشف  ج.م</label>
                            <input type="number" step="0.01" min="0" class="form-control" name="checkup_cost" placeholder="مثال: 200">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">سعر المتابعة  ج.م</label>
                            <input type="number" step="0.01" min="0" class="form-control" name="followup_cost" placeholder="مثال: 100">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">نسبة العمولة (%)</label>
                        <input type="number" step="0.01" min="0" max="100" class="form-control" name="commission_percentage" placeholder="مثال: 50">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">كلمة المرور</label>
                        <input type="password" class="form-control" name="password" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">تأكيد كلمة المرور</label>
                        <input type="password" class="form-control" name="password_confirmation" required>
                    </div>
                    <input type="hidden" name="role" value="doctor">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                    <button type="submit" class="btn btn-success">إضافة الطبيب</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- View Doctor Modal -->
<div class="modal fade" id="viewDoctorModal" 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">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label text-muted">الاسم</label>
                        <div id="v_name" class="fw-bold"></div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label text-muted">الهاتف</label>
                        <div id="v_mobile"></div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label text-muted">تاريخ الانضمام</label>
                        <div id="v_joined"></div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label text-muted">البريد الإلكتروني</label>
                        <div id="v_email"></div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label text-muted">نسبة العمولة</label>
                        <div id="v_commission"></div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label text-muted">التخصص</label>
                        <div id="v_specialization"></div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label text-muted">مستحقات هذا الشهر</label>
                        <div id="v_monthly" class="badge bg-light text-dark"></div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label text-muted">سعر الكشف </label>
                        <div id="v_checkup_cost"></div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label text-muted">سعر المتابعة</label>
                        <div id="v_followup_cost"></div>
                    </div>
                </div>
                <hr>
                <div class="row text-center">
                    <div class="col">
                        <div class="small text-muted">المواعيد</div>
                        <div id="v_appointments" class="h5 mb-0"></div>
                    </div>
                    <div class="col">
                        <div class="small text-muted">المرضى</div>
                        <div id="v_patients" class="h5 mb-0"></div>
                    </div>
                    <div class="col">
                        <div class="small text-muted">السجلات الطبية</div>
                        <div id="v_records" class="h5 mb-0"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
            </div>
        </div>
    </div>
    </div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Doctor Performance Chart
const ctx = document.getElementById('doctorPerformanceChart').getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [@foreach($topDoctors as $doctor)'د. {{ $doctor->name }}',@endforeach],
        datasets: [{
            label: 'عدد المواعيد',
            data: [@foreach($topDoctors as $doctor){{ $doctor->appointments_count }},@endforeach],
            backgroundColor: 'rgba(54, 162, 235, 0.5)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

function viewDoctor(btnEl, doctorId) {
    try {
        const d = btnEl.dataset;
        document.getElementById('v_name').textContent = d.name || '';
        document.getElementById('v_mobile').textContent = d.mobile || '';
        document.getElementById('v_email').textContent = d.email || '';
        document.getElementById('v_commission').textContent = (d.commission ? d.commission + '%' : '-');
        const vSpec = document.getElementById('v_specialization');
        if (vSpec) vSpec.textContent = d.specialization || 'طب عام';
        document.getElementById('v_monthly').textContent = (d.monthly ? d.monthly + ' ج.م' : '0.00 ج.م');
        document.getElementById('v_appointments').textContent = d.appointments || '0';
        document.getElementById('v_patients').textContent = d.patients || '0';
        document.getElementById('v_records').textContent = d.records || '0';
        document.getElementById('v_joined').textContent = d.joined || '';
        const chk = (d.checkupcost && d.checkupcost !== '-') ? (d.checkupcost + ' ج.م') : '-';
        const fol = (d.followupcost && d.followupcost !== '-') ? (d.followupcost + ' ج.م') : '-';
        const vChk = document.getElementById('v_checkup_cost');
        const vFol = document.getElementById('v_followup_cost');
        if (vChk) vChk.textContent = chk;
        if (vFol) vFol.textContent = fol;
        const modal = new bootstrap.Modal(document.getElementById('viewDoctorModal'));
        modal.show();
    } catch (e) {
        alert('تعذر عرض بيانات الطبيب');
    }
}

const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
const usersBaseUrl = "{{ url('/admin/users') }}";

function refreshPage() { window.location.reload(); }

function editDoctor(doctorId) {
    fetch(`${usersBaseUrl}/${doctorId}`)
        .then(r => r.json())
        .then(user => {
            // Reuse the edit user modal structure from users page dynamically
            // If modal doesn't exist on this page, create a minimal one
            let modalEl = document.getElementById('editDoctorModal');
            if (!modalEl) {
                const wrapper = document.createElement('div');
                wrapper.innerHTML = `
                <div class="modal fade" id="editDoctorModal" 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="editDoctorForm">
                        <input type="hidden" name="id" id="edit_id">
                        <div class="modal-body">
                          <div class="mb-3">
                            <label class="form-label">اسم الطبيب</label>
                            <input type="text" class="form-control" name="name" id="edit_name" required>
                          </div>
                          <div class="mb-3">
                            <label class="form-label">رقم الهاتف</label>
                            <input type="text" class="form-control" name="mobile" id="edit_mobile" required>
                          </div>
                          <div class="mb-3">
                            <label class="form-label">البريد الإلكتروني</label>
                            <input type="email" class="form-control" name="email" id="edit_email">
                          </div>
                          <div class="mb-3">
                            <label class="form-label">التخصص</label>
                            <select class="form-select" name="specialization" id="edit_specialization">
                              <option value="">اختر التخصص (اختياري)</option>
                              <option value="طب عام">طب عام</option>
                              <option value="باطنة">باطنة</option>
                              <option value="جراحة">جراحة</option>
                              <option value="أطفال">أطفال</option>
                              <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="row g-2">
                            <div class="col-md-6">
                              <label class="form-label">سعر الكشف (كشف) ج.م</label>
                              <input type="number" step="0.01" min="0" class="form-control" name="checkup_cost" id="edit_checkup_cost" placeholder="مثال: 200">
                            </div>
                            <div class="col-md-6">
                              <label class="form-label">سعر الكشف (متابعة) ج.م</label>
                              <input type="number" step="0.01" min="0" class="form-control" name="followup_cost" id="edit_followup_cost" placeholder="مثال: 100">
                            </div>
                          </div>
                          <div class="mb-3">
                            <label class="form-label">نسبة العمولة (%)</label>
                            <input type="number" step="0.01" min="0" max="100" class="form-control" name="commission_percentage" id="edit_commission_percentage" placeholder="مثال: 50">
                          </div>
                          <div class="mb-3">
                            <label class="form-label">كلمة المرور (اختياري)</label>
                            <input type="password" class="form-control" name="password" id="edit_password">
                          </div>
                          <div class="mb-3">
                            <label class="form-label">تأكيد كلمة المرور</label>
                            <input type="password" class="form-control" name="password_confirmation" id="edit_password_confirmation">
                          </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>`;
                document.body.appendChild(wrapper.firstElementChild);
                modalEl = document.getElementById('editDoctorModal');
                document.getElementById('editDoctorForm').addEventListener('submit', submitEditDoctor);
            }

            document.getElementById('edit_id').value = user.id;
            document.getElementById('edit_name').value = user.name || '';
            document.getElementById('edit_mobile').value = user.mobile || '';
            document.getElementById('edit_email').value = user.email || '';
            const cp = (user.commission_percentage !== null && user.commission_percentage !== undefined) ? user.commission_percentage : '';
            const cpInput = document.getElementById('edit_commission_percentage');
            if (cpInput) cpInput.value = cp;
            const ecInput = document.getElementById('edit_checkup_cost');
            if (ecInput) ecInput.value = (user.checkup_cost !== null && user.checkup_cost !== undefined) ? user.checkup_cost : '';
            const fcInput = document.getElementById('edit_followup_cost');
            if (fcInput) fcInput.value = (user.followup_cost !== null && user.followup_cost !== undefined) ? user.followup_cost : '';
            const specSel = document.getElementById('edit_specialization');
            if (specSel) specSel.value = user.specialization || '';

            const modal = new bootstrap.Modal(modalEl);
            modal.show();
        })
        .catch(() => alert('تعذر تحميل بيانات الطبيب'));
}

function submitEditDoctor(e) {
    e.preventDefault();
    const form = e.target;
    const id = document.getElementById('edit_id').value;
    const data = new FormData(form);
    data.append('_method', 'PUT');
    // Ensure role is preserved as doctor to pass validation
    if(!data.get('role')) data.append('role', 'doctor');
    fetch(`${usersBaseUrl}/${id}`, {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
        body: data
    })
    .then(async r => { if(!r.ok) throw await r.json(); return r.json(); })
    .then(() => { bootstrap.Modal.getInstance(document.getElementById('editDoctorModal'))?.hide(); refreshPage(); })
    .catch(err => alert(err?.message || 'تحقق من البيانات المدخلة'));
}

function deleteDoctor(doctorId) {
    if(!confirm('هل أنت متأكد من حذف هذا الطبيب؟')) return;
    fetch(`${usersBaseUrl}/${doctorId}`, {
        method: 'DELETE',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' }
    })
    .then(r => r.json())
    .then(res => { if(res.success) refreshPage(); else alert(res.message || 'حدث خطأ أثناء الحذف'); })
    .catch(() => alert('حدث خطأ أثناء الحذف'));
}

document.getElementById('addDoctorForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const form = e.target;
    const data = new FormData(form);
    // Ensure role=doctor
    if(!data.get('role')) data.append('role', 'doctor');
    fetch("{{ route('admin.users.store') }}", {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
        body: data
    })
    .then(async r => { if(!r.ok) throw await r.json(); return r.json(); })
    .then(() => { bootstrap.Modal.getInstance(document.getElementById('addDoctorModal'))?.hide(); refreshPage(); })
    .catch(err => alert(err?.message || 'تحقق من البيانات المدخلة'));
});
</script>
@endsection