@extends('admin.layouts.master')

@section('css')
    @include('admin.helper.tablecss')
@endsection

@section('page-header')
    <!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto">إدارة الأدوار</h4>
            </div>
        </div>
    </div>
    <!-- breadcrumb -->
@endsection

@section('content')
    <div class="col-xl-12">
        <div class="card mg-b-20">
            <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                <h4 class="card-title mg-b-0">جدول الأدوار</h4>
                @if(can_admin('roles_add'))
                <a href="{{ route('admin.roles.create') }}" class="btn btn-primary">
                    <x-lucide-plus width="20" height="20" /> إضافة دور جديد
                </a>
                @endif
            </div>

            <div class="card-body">
                <div class="table-responsive">
                    <table class="table text-md-nowrap" id="employeestable">
                        <thead>
                            <tr>
                                <th style="width: 3rem" class="border-bottom-0">#</th>
                                <th class="border-bottom-0">اسم الدور</th>
                                <th class="border-bottom-0 text-center">العمليات</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{-- سيتم ملؤها عبر DataTables --}}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('vue')
    @include('admin.helper.tablescripts')

    <script>
        $(function() {
            var table = $('#employeestable').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.roles.index') }}",
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false,
                        className: "text-center"
                    }
                ]
            });

            $('#employeestable tbody').on('click', '.delete', function() {
                var value = $(this).attr("value");
                var delete_route = "{{ route('admin.roles.delete', ':id') }}".replace(':id', value);

                Swal.fire({
                    title: 'هل أنت متأكد من الحذف؟',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'نعم، احذف',
                    cancelButtonText: 'إلغاء'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: delete_route,
                            type: 'POST',
                            data: {
                                '_token': "{{ csrf_token() }}",
                                'id': value,
                            },
                            success: function(response) {
                                Swal.fire({
                                    title: 'تم الحذف بنجاح',
                                    icon: 'success',
                                    confirmButtonText: 'موافق'
                                }).then(() => {
                                    table.ajax.reload();
                                });
                            },
                            error: function(response) {
                                Swal.fire({
                                    title: 'حدث خطأ أثناء الحذف',
                                    icon: 'error',
                                    confirmButtonText: 'موافق'
                                });
                            }
                        });
                    }
                });
            });
        });
    </script>
@endsection