@extends('layouts.app')

@section('title', 'الموظفون')

@php
    $roleMeta = [
        'owner' => ['label' => 'مالك', 'color' => 'primary', 'icon' => 'crown'],
        'doctor' => ['label' => 'طبيب', 'color' => 'info', 'icon' => 'stethoscope'],
        'receptionist' => ['label' => 'استقبال', 'color' => 'success', 'icon' => 'phone'],
        'nurse' => ['label' => 'تمريض', 'color' => 'purple', 'icon' => 'heart'],
        'accountant' => ['label' => 'محاسب', 'color' => 'warning', 'icon' => 'calculator'],
        'lab_technician' => ['label' => 'فني تحاليل', 'color' => 'cyan', 'icon' => 'flask'],
    ];
    $totalStaff = $staff->total();
    $byRole = collect($staff->items())->groupBy('role')->map->count();
@endphp

@section('content')
<x-clinic-hero
    title="الموظفون"
    subtitle="فريق العيادة — الأطباء والاستقبال والإدارة"
    icon="ti-users"
    tone="staff"
    :stats="[
        ['icon' => 'ti-stack', 'value' => $totalStaff, 'label' => 'إجمالي'],
        ['icon' => 'ti-stethoscope', 'value' => $byRole['doctor'] ?? 0, 'label' => 'أطباء'],
        ['icon' => 'ti-phone', 'value' => $byRole['receptionist'] ?? 0, 'label' => 'استقبال'],
        ['icon' => 'ti-calculator', 'value' => $byRole['accountant'] ?? 0, 'label' => 'محاسبة'],
    ]"
>
    <x-slot:actions>
        @can('staff.create')
            <button class="btn btn-light" data-bs-toggle="modal" data-bs-target="#staffModal" onclick="window.StaffModal.openNew()">
                <i class="ti ti-user-plus me-1"></i> موظف جديد
            </button>
        @endcan
    </x-slot:actions>
</x-clinic-hero>

<div class="card clinic-section">
    <div class="card-header">
        <h3 class="card-title"><i class="ti ti-list me-1"></i> فريق العيادة</h3>
    </div>
    @if($staff->isEmpty())
        <div class="card-body">
            <div class="empty-card-rich">
                <i class="ti ti-users-off"></i>
                <h3>لا يوجد موظفون بعد</h3>
                <p>أضف الأطباء والاستقبال وباقي الفريق.</p>
            </div>
        </div>
    @else
        <div class="table-responsive">
            <table class="table table-vcenter clinic-table mb-0">
                <thead>
                    <tr>
                        <th>الموظف</th>
                        <th>الدور</th>
                        <th>التخصص</th>
                        <th>الحالة</th>
                        <th class="w-1 text-end">الإجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($staff as $u)
                        @php
                            $rm = $roleMeta[$u->role] ?? ['label' => $u->role, 'color' => 'secondary', 'icon' => 'user'];
                            $initials = collect(preg_split('/\s+/u', trim($u->name)))
                                ->filter()->take(2)
                                ->map(fn ($w) => mb_substr($w, 0, 1))
                                ->implode('') ?: '؟';
                            $avatarRoleClass = match($u->role) {
                                'doctor' => 'role-doctor',
                                'nurse' => 'role-nurse',
                                default => '',
                            };
                        @endphp
                        <tr>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <span class="entity-avatar {{ $avatarRoleClass }}">{{ $initials }}</span>
                                    <div>
                                        <strong>{{ $u->name }}</strong>
                                        <div class="small text-muted text-mono-en">{{ $u->email }}</div>
                                        @if($u->phone)
                                            <div class="small text-muted text-mono-en">
                                                <i class="ti ti-phone"></i> {{ $u->phone }}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span class="status-pill bg-{{ $rm['color'] }}-lt text-{{ $rm['color'] }}">
                                    <i class="ti ti-{{ $rm['icon'] }}"></i>{{ $rm['label'] }}
                                </span>
                            </td>
                            <td>{{ $u->specialization ?: '—' }}</td>
                            <td>
                                @if($u->status === 'active')
                                    <span class="status-pill bg-success-lt text-success">
                                        <i class="ti ti-check"></i> نشط
                                    </span>
                                @else
                                    <span class="status-pill bg-secondary-lt text-secondary">
                                        <i class="ti ti-pause"></i> {{ $u->status }}
                                    </span>
                                @endif
                            </td>
                            <td class="text-end text-nowrap">
                                <div class="btn-list flex-nowrap justify-content-end">
                                    @if($u->role === 'doctor' && (auth('web')->user()?->isOwner() || auth('web')->id() === $u->id))
                                        <a href="{{ route('doctor.dashboard', $u) }}"
                                           class="btn btn-sm btn-icon btn-outline-info" title="لوحة الطبيب">
                                            <i class="ti ti-dashboard"></i>
                                        </a>
                                    @endif
                                    @can('staff.update')
                                        <button class="btn btn-sm btn-icon btn-outline-secondary"
                                                data-edit-staff='@json($u)' title="تعديل">
                                            <i class="ti ti-edit"></i>
                                        </button>
                                    @endcan
                                    @can('staff.delete')
                                        <button class="btn btn-sm btn-icon btn-outline-danger"
                                                data-delete-staff="{{ $u->id }}" title="حذف">
                                            <i class="ti ti-trash"></i>
                                        </button>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @if($staff->hasPages())
            <div class="card-footer">{{ $staff->links() }}</div>
        @endif
    @endif
</div>

<x-modal id="staffModal" title="موظف">
    <form id="staffForm">
        @csrf
        <input type="hidden" id="staffId">
        <input type="hidden" id="staffMethod" value="POST">
        <x-form-input name="name" label="الاسم" required />
        <x-form-input name="email" label="البريد الإلكتروني" type="email" required />
        <x-form-input name="phone" label="الهاتف" />
        <x-form-select name="role" label="الدور" required placeholder="اختر..."
            :options="['owner' => 'مالك', 'doctor' => 'طبيب', 'receptionist' => 'استقبال', 'nurse' => 'تمريض', 'accountant' => 'محاسب', 'lab_technician' => 'فني تحاليل']" />
        <x-form-input name="specialization" label="التخصص (للطبيب)" />
        <x-form-input name="password" label="كلمة المرور" type="password" help="اتركها فارغة عند التعديل للإبقاء عليها" />
        <div class="text-end mt-3">
            <button type="button" class="btn btn-link" data-bs-dismiss="modal">إلغاء</button>
            <button type="submit" class="btn btn-primary">حفظ</button>
        </div>
    </form>
</x-modal>
@endsection

@push('scripts')
<script>
window.StaffModal = (function () {
    const $form = $('#staffForm');
    const $modal = $('#staffModal');

    function reset() { $form.trigger('reset'); $('#staffId').val(''); $('#staffMethod').val('POST'); }
    function openNew() { reset(); $modal.modal('show'); }
    function openEdit(u) {
        reset();
        $('#staffId').val(u.id); $('#staffMethod').val('PUT');
        Object.entries(u).forEach(([k, v]) => $form.find(`[name="${k}"]`).val(v ?? ''));
        $modal.modal('show');
    }

    $form.on('submit', function (e) {
        e.preventDefault();
        const id = $('#staffId').val();
        $.ajax({
            url: id ? `${APP_BASE_URL}/staff/${id}` : @json(route('staff.store')),
            method: $('#staffMethod').val(),
            data: $form.serialize(),
            globalErrorHandled: true,
        }).done(() => { Notify.success('تم الحفظ.'); window.location.reload(); })
          .fail(xhr => Notify.error(xhr.responseJSON?.message || 'خطأ.'));
    });

    return { openNew, openEdit, reset };
})();
$(document).on('click', '[data-edit-staff]', function () { window.StaffModal.openEdit($(this).data('edit-staff')); });
$(document).on('click', '[data-delete-staff]', function () {
    const id = $(this).data('delete-staff');
    Notify.confirmDelete('حذف الموظف؟', () => {
        $.ajax({ url: `${APP_BASE_URL}/staff/${id}`, method: 'DELETE' })
            .done(() => { Notify.success('تم الحذف.'); window.location.reload(); });
    });
});
</script>
@endpush