@extends('layouts.app')

@section('title', 'إدارة المستخدمين')
@section('page_title', 'إدارة المستخدمين')

@section('content')
<div class="row mb-4">
    <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', 'patient')->count() }}</h4>
                        <p class="mb-0">المرضى</p>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-users fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <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-warning text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4>{{ \App\Models\User::where('role', 'receptionist')->count() }}</h4>
                        <p class="mb-0">موظفي الاستقبال</p>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-user-tie 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\User::count() }}</h4>
                        <p class="mb-0">إجمالي المستخدمين</p>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-user-shield fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <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="#addUserModal">
                    <i class="fas fa-plus me-2"></i>إضافة مستخدم جديد
                </button>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped" id="usersTable">
                        <thead>
                            <tr>
                                <th>الاسم</th>
                                <th>رقم المريض</th>
                                <th>رقم الهاتف</th>
                                <th>البريد الإلكتروني</th>
                                <th>النوع</th>
                                <th>تاريخ التسجيل</th>
                                <th>الإجراءات</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach(\App\Models\User::paginate(15) as $user)
                            <tr>
                                <td>{{ $user->name }}</td>
                                <td>{{ $user->patient_number ?? '-' }}</td>
                                <td>{{ $user->mobile }}</td>
                                <td>{{ $user->email ?? '-' }}</td>
                                <td>
                                    @switch($user->role)
                                        @case('admin')
                                            <span class="badge bg-danger">مدير</span>
                                            @break
                                        @case('doctor')
                                            <span class="badge bg-success">طبيب</span>
                                            @break
                                        @case('receptionist')
                                            <span class="badge bg-warning">موظف استقبال</span>
                                            @break
                                        @case('patient')
                                            <span class="badge bg-info">مريض</span>
                                            @break
                                    @endswitch
                                </td>
                                <td>{{ $user->created_at->format('Y-m-d') }}</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary" onclick="editUser({{ $user->id }})">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-danger" onclick="deleteUser({{ $user->id }})">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">إحصائيات سريعة</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <h6>المستخدمين الجدد هذا الأسبوع</h6>
                    <h4 class="text-primary">{{ \App\Models\User::where('created_at', '>=', now()->subWeek())->count() }}</h4>
                </div>
                <div class="mb-3">
                    <h6>المستخدمين النشطين اليوم</h6>
                    <h4 class="text-success">{{ \App\Models\User::whereDate('updated_at', today())->count() }}</h4>
                </div>
                <div class="mb-3">
                    <h6>إجمالي المواعيد</h6>
                    <h4 class="text-info">{{ \App\Models\Appointment::count() }}</h4>
                </div>
            </div>
        </div>
        
        <div class="card mt-3">
            <div class="card-header">
                <h5 class="card-title mb-0">آخر المستخدمين المسجلين</h5>
            </div>
            <div class="card-body">
                @foreach(\App\Models\User::latest()->take(5)->get() as $user)
                <div class="d-flex align-items-center mb-2">
                    <div class="me-3">
                        <i class="fas fa-user-circle fa-2x text-muted"></i>
                    </div>
                    <div>
                        <strong>{{ $user->name }}</strong>
                        <br><small class="text-muted">{{ $user->created_at->diffForHumans() }}</small>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

<!-- Add User Modal -->
<div class="modal fade" id="addUserModal" 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="addUserForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">الاسم الكامل</label>
                        <input type="text" class="form-control" name="name" 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">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">نوع المستخدم</label>
                        <select class="form-select" name="role" required>
                            <option value="patient">مريض</option>
                            <option value="doctor">طبيب</option>
                            <option value="receptionist">موظف استقبال</option>
                            <option value="admin">مدير</option>
                        </select>
                    </div>
                    <div class="mb-3 d-none" id="add_doctor_fields">
                        <label class="form-label">تخصص الطبيب</label>
                        <select class="form-select" name="specialization" id="add_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>
                            <option value="صدر">صدر</option>
                            <option value="مسالك بولية">مسالك بولية</option>
                            <option value="سكر وغدد">سكر وغدد</option>
                            <option value="تجميل">تجميل</option>
                        </select>
                    </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>
                </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>

<!-- Edit User Modal -->
<div class="modal fade" id="editUserModal" 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="editUserForm">
                <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="role" id="edit_role" required>
                            <option value="patient">مريض</option>
                            <option value="doctor">طبيب</option>
                            <option value="receptionist">موظف استقبال</option>
                            <option value="admin">مدير</option>
                        </select>
                    </div>
                    <div class="mb-3 d-none" id="edit_doctor_fields">
                        <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>
                            <option value="صدر">صدر</option>
                            <option value="مسالك بولية">مسالك بولية</option>
                            <option value="سكر وغدد">سكر وغدد</option>
                            <option value="تجميل">تجميل</option>
                        </select>
                    </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>

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

function refreshPage() {
    // Simple approach: reload to refresh table/pagination
    window.location.reload();
}

function editUser(userId) {
    // Fetch user data then open modal
    fetch(`${usersBaseUrl}/${userId}`, {
        headers: { 'X-CSRF-TOKEN': csrfToken }
    })
    .then(r => r.json())
    .then(user => {
        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 || '';
        document.getElementById('edit_role').value = user.role || 'patient';
        // Toggle doctor fields and set specialization if role is doctor
        toggleDoctorFields('edit');
        if ((user.role || '') === 'doctor') {
            document.getElementById('edit_specialization').value = user.specialization || '';
        }

        const editModal = new bootstrap.Modal(document.getElementById('editUserModal'));
        editModal.show();
    })
    .catch(() => alert('تعذر تحميل بيانات المستخدم'));
}

function deleteUser(userId) {
    if(!confirm('هل أنت متأكد من حذف هذا المستخدم؟')) return;

    fetch(`${usersBaseUrl}/${userId}`, {
        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('addUserForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const form = e.target;
    const data = new FormData(form);
    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(() => {
        const addModal = bootstrap.Modal.getInstance(document.getElementById('addUserModal'));
        if (addModal) addModal.hide();
        refreshPage();
    })
    .catch(err => {
        const msg = err?.message || 'تحقق من البيانات المدخلة';
        alert(msg);
    });
});

document.getElementById('editUserForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const form = e.target;
    const id = document.getElementById('edit_id').value;
    const data = new FormData(form);
    // Laravel expects _method=PUT for FormData if not using JSON
    data.append('_method', 'PUT');

    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(() => {
        const editModal = bootstrap.Modal.getInstance(document.getElementById('editUserModal'));
        if (editModal) editModal.hide();
        refreshPage();
    })
    .catch(err => {
        const msg = err?.message || 'تحقق من البيانات المدخلة';
        alert(msg);
    });
});
</script>
@endsection