@extends("layouts.app")
@section("content")
<div class="d-flex justify-content-between align-items-center pt-3 pb-3 mb-4 border-bottom">
    <h1 class="h3 font-weight-bold text-dark m-0">
        <i class="fas fa-users-cog text-primary mr-2"></i> إدارة موظفي أصحاب العقارات
    </h1>
</div>
@include('flash::message')
@if ($errors->any())
    <div class="alert alert-danger shadow-sm rounded-lg border-0 mb-4">
        <ul class="mb-0 pl-3">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
<div class="card shadow-sm border-0 mb-4 rounded-lg">
    <div class="card-header bg-white border-bottom-0 pt-4 pb-2">
        <h6 class="m-0 font-weight-bold text-muted">
            <i class="fas fa-filter ml-1"></i> تصفية الموظفين حسب المالك
        </h6>
    </div>
    <div class="card-body pt-2 pb-4">
        <form method="GET" action="{{ route('admin.staff.index') }}" class="row align-items-center">
            <div class="col-md-8 mb-3 mb-md-0">
                <select name="owner_id" id="owner_id" class="form-control select2" onchange="this.form.submit()" data-placeholder="-- ابحث عن صاحب العقار (الاسم أو الهاتف) --">
                    <option value=""></option>
                    @foreach($owners as $owner)
                        <option value="{{ $owner->id }}" {{ $selectedOwnerId == $owner->id ? 'selected' : '' }}>
                            {{ $owner->full_name }} ({{ $owner->phone_number ?? $owner->contact_no }})
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4 text-left">
                @if($selectedOwnerId)
                <button type="button" class="btn btn-primary shadow-sm rounded-pill px-4" data-toggle="modal" data-target="#addStaffModal">
                    <i class="fas fa-user-plus ml-1"></i> إضافة موظف جديد
                </button>
                @endif
            </div>
        </form>
    </div>
</div>
@if($selectedOwnerId)
<div class="card shadow-sm border-0 rounded-lg overflow-hidden">
    <div class="card-body p-0">
        @if($staffMembers->count() > 0)
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0 text-center">
                <thead class="bg-light text-muted">
                    <tr>
                        <th class="border-top-0 border-bottom-0 py-3 font-weight-bold">الاسم</th>
                        <th class="border-top-0 border-bottom-0 py-3 font-weight-bold">اسم المستخدم</th>
                        <th class="border-top-0 border-bottom-0 py-3 font-weight-bold">رقم الهاتف</th>
                        <th class="border-top-0 border-bottom-0 py-3 font-weight-bold">الدور</th>
                        <th class="border-top-0 border-bottom-0 py-3 font-weight-bold">تاريخ الإضافة</th>
                        <th class="border-top-0 border-bottom-0 py-3 font-weight-bold">الحالة</th>
                        <th class="border-top-0 border-bottom-0 py-3 font-weight-bold text-center">الإجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($staffMembers as $staff)
                        <tr>
                            <td class="py-3 font-weight-bold">{{ $staff->full_name }}</td>
                            <td class="py-3 text-muted">{{ $staff->username }}</td>
                            <td class="py-3" dir="ltr">{{ $staff->country_code }} {{ $staff->phone_number }}</td>
                            <td class="py-3">
                                @if($staff->role_id == 1)
                                    <span class="badge badge-pill badge-soft-danger px-3 py-1">CO-Admin</span>
                                @elseif($staff->role_id == 2)
                                    <span class="badge badge-pill badge-soft-primary px-3 py-1">حجوزات</span>
                                @elseif($staff->role_id == 3)
                                    <span class="badge badge-pill badge-soft-success px-3 py-1">مالية</span>
                                @endif
                            </td>
                            <td class="py-3 text-muted">{{ $staff->created_on->format('Y-m-d') }}</td>
                            <td class="py-3">
                                @if($staff->is_active)
                                    <span class="badge badge-pill badge-soft-success px-3 py-1">نشط</span>
                                @else
                                    <span class="badge badge-pill badge-soft-secondary px-3 py-1">غير نشط</span>
                                @endif
                            </td>
                            <td class="py-3 text-center">
                                <button type="button" class="btn btn-sm btn-light rounded-pill px-3 shadow-sm mr-1" data-toggle="modal" data-target="#editStaffModal{{ $staff->id }}" title="تعديل">
                                    <i class="fas fa-edit text-info"></i>
                                </button>
                                <form action="{{ route('admin.staff.changeStatus', $staff->id) }}" method="POST" class="d-inline-block">
                                    @csrf
                                    @method('PATCH')
                                    <input type="hidden" name="action" value="{{ $staff->is_active ? 0 : 1 }}">
                                    <button type="submit" class="btn btn-sm btn-light rounded-pill px-3 shadow-sm" title="{{ $staff->is_active ? 'إيقاف' : 'تنشيط' }}" onclick="return confirm('هل أنت متأكد من تغيير حالة الموظف؟')">
                                        <i class="fas fa-{{ $staff->is_active ? 'ban text-warning' : 'check text-success' }}"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @else
        <div class="py-5 text-center">
            <div class="mb-3">
                <i class="fas fa-users fa-4x text-light"></i>
            </div>
            <h5 class="text-muted font-weight-bold">لا يوجد موظفين</h5>
            <p class="text-muted mb-4">لم يقم صاحب العقار هذا بإضافة أي موظفين حتى الآن.</p>
            <button type="button" class="btn btn-primary rounded-pill px-4 shadow-sm" data-toggle="modal" data-target="#addStaffModal">
                <i class="fas fa-plus ml-1"></i> أضف موظفاً الآن
            </button>
        </div>
        @endif
    </div>
    @if($staffMembers->hasPages())
        <div class="card-footer bg-white border-top-0 pb-3 pt-4">
            {{ $staffMembers->appends(['owner_id' => $selectedOwnerId])->links() }}
        </div>
    @endif
</div>
@include('admin.staff.partials.form_modal')
@else
<div class="py-5 text-center mt-5">
    <div class="mb-4">
        <i class="fas fa-search fa-4x text-light"></i>
    </div>
    <h4 class="text-muted font-weight-bold">اختر صاحب العقار</h4>
    <p class="text-muted">الرجاء اختيار صاحب العقار من القائمة أعلاه لعرض موظفيه وإدارتهم.</p>
</div>
@endif
@endsection
@push('scripts')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        $('.select2').select2({
            dir: "rtl",
            width: '100%',
            allowClear: true
        });
    });
</script>
@endpush