@extends('admin.master')

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

@section('content')

    <section class="pc-container">
        <div class="pc-content">

            <!-- [ مسار التنقل ] بداية -->
            <div class="page-header">
                <div class="page-block">
                    <div class="row align-items-center">
                        <div class="col-md-12">
                            <ul class="breadcrumb">
                                <li class="breadcrumb-item"><a href="#">لوحة التحكم</a></li>
                                <li class="breadcrumb-item" aria-current="page">الموظفون</li>
                            </ul>
                        </div>
                        <div class="col-md-12">
                            <div class="page-header-title">
                                <h2 class="mb-0">الموظفون</h2>
                            </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">
                            <h4 class="card-title mb-0">الموظفون</h4>
                            @can('create_employees')
                                <a href="{{ route('admin.employees.create') }}" class="btn btn-primary btn-sm">
                                    <i class="fas fa-plus"></i> إضافة موظف
                                </a>
                            @endcan
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-hover align-middle datatables" id="dataTable-1">
                                    <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>الاسم</th>
                                        <th>البريد الإلكتروني</th>
                                        <th>الهاتف</th>
                                        <th>الدور</th>
                                        <th>الحالة</th>
                                        <th class="text-center">الإجراءات</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @if (count($employees) > 0)
                                        @foreach ($employees as $employee)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>{{ $employee->name }}</td>
                                                <td>{{ $employee->email }}</td>
                                                <td>{{ $employee->phone }}</td>
                                                <td>{{ implode(", ", $employee->roles->pluck('name')->toArray() ?? []) }}</td>
                                                <td>
                                                    <div class="form-check form-switch">
                                                        <input class="form-check-input toggle-status" type="checkbox"
                                                               id="toggleStatus{{ $employee->id }}"
                                                               data-id="{{ $employee->id }}"
                                                            {{ $employee->is_active ? 'checked' : '' }}>
                                                        <label class="form-check-label"
                                                               for="toggleStatus{{ $employee->id }}"></label>
                                                    </div>
                                                </td>
                                                <td class="text-center">
                                                    @can('update_employees')
                                                        <a href="{{ route('admin.employees.edit', $employee->id) }}"
                                                           class="btn btn-sm btn-outline-primary me-1">
                                                           تعديل
                                                        </a>
                                                    @endcan

                                                    @can('delete_employees')
                                                        <button class="btn btn-sm btn-outline-danger delete-employee"
                                                                data-id="{{ $employee->id }}">
                                                            حذف
                                                        </button>
                                                    @endcan
                                                </td>
                                            </tr>
                                        @endforeach
                                    @else
                                        <tr>
                                            <td colspan="7" class="text-center">
                                                <div class="d-flex flex-column align-items-center py-4">
                                                    <img src="{{ asset('no-data.png') }}" alt="لا توجد بيانات"
                                                         class="img-fluid" style="max-width: 150px;">
                                                    <p class="mt-2 text-muted">لا توجد بيانات متاحة</p>
                                                </div>
                                            </td>
                                        </tr>
                                    @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection

@section('after_script')

    <script>
        $(document).ready(function () {

            $('.toggle-status').change(function () {
                let employeeId = $(this).data('id');

                $.ajax({
                    url: "{{ route('admin.employees.changeStatus', ':id') }}".replace(':id',
                        employeeId),
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        employee_id: employeeId,
                    },
                    success: function (response) {
                        if (response.success) {
                            toastr.success("تم تحديث الحالة بنجاح");
                        } else {
                            toastr.error("حدث خطأ ما");
                        }
                    },
                    error: function () {
                        toastr.error("حدث خطأ");
                    }
                });
            });


            $(document).on('click', '.delete-employee', function (e) {
                e.preventDefault();
                let employeeId = $(this).data('id');
                let deleteUrl = "{{ route('admin.employees.destroy', ':id') }}".replace(':id', employeeId);
                let row = $(this).closest('tr');

                // تنبيه تأكيد الحذف
                Swal.fire({
                    title: "تأكيد الحذف",
                    text: "هل أنت متأكد؟",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#dc3545",
                    cancelButtonColor: "#3085d6",
                    confirmButtonText: "نعم، احذف",
                    cancelButtonText: "لا، إلغاء"
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: deleteUrl,
                            type: "POST",
                            data: {
                                _token: "{{ csrf_token() }}",
                                _method: "DELETE"
                            },
                            success: function (response) {
                                if (response.success) {
                                    Swal.fire("تم الحذف",
                                        response.message,
                                        "success");
                                    row.fadeOut(500, function () {
                                        $(this).remove();
                                    });
                                } else {
                                    Swal.fire("خطأ",
                                        "حدث خطأ ما",
                                        "error");
                                }
                            },
                            error: function () {
                                Swal.fire("خطأ",
                                    "حدث خطأ", "error");
                            }
                        });
                    }
                });
            });
        });
    </script>

@endsection