@extends('admin.layouts.master')

@section('title') Starter Page @endsection
@section('css')
@endsection
@section('content')

    <div class="container-xxl flex-grow-1 container-p-y">
        <h4 class="mb-4">قائمة الأدوار</h4>

        <p class="mb-4">
            يوفر الدور إمكانية الوصول إلى القوائم والميزات المحددة مسبقًا بحيث يعتمد ذلك على <br />
            الدور المعين يمكن للمسؤول الوصول إلى ما يحتاجه المستخدم.
        </p>
        <!-- Role cards -->
        <div class="row g-4">
            @foreach($roles as $role)
            <div class="col-xl-4 col-lg-6 col-md-6" id="row{{$role->id}}">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <h6 class="fw-normal mb-2">عدد المستخدمين : {{$role->users_count}}  </h6>

                        </div>
                        <div class="d-flex justify-content-between align-items-end mt-1">
                            <div class="role-heading">
                                <h4 class="mb-1">{{$role->name}}</h4>
                                <a
                                        href="javascript:;"
                                        data-bs-toggle="modal"
                                        data-bs-target="#editRoleModal"
                                        class="role-edit-modal edit-role"
                                        data-id="{{$role->id}}"
                                ><span>Edit Role</span></a
                                >
                            </div>
                            <form id="{{$role->id}}" method="POST" action="" style="display:inline">
                                <input name="_method" type="hidden" value="DELETE">
                                @csrf
                                <a href="javascript:void(0);" class="text-muted delete"
                                   onclick="deleteRecord(this,`{{route('admin.roles.delete',$role->id)}}`);">
                                    <i class="ti ti-trash ti-md"></i>
                                </a>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
            @endforeach
            <div class="col-xl-4 col-lg-6 col-md-6">
                <div class="card h-100">
                    <div class="row h-100">
                        <div class="col-sm-5">
                            <div class="d-flex align-items-end h-100 justify-content-center mt-sm-0 mt-3">
                                <img
                                        src="{{asset('backend/assets/img/illustrations/add-new-roles.png')}}"
                                        class="img-fluid mt-sm-4 mt-md-0"
                                        alt="add-new-roles"
                                        width="83" />
                            </div>
                        </div>
                        <div class="col-sm-7">
                            <div class="card-body text-sm-end text-center ps-sm-0">
                                <button
                                        data-bs-target="#addRoleModal"
                                        data-bs-toggle="modal"
                                        class="btn btn-primary mb-2 text-nowrap add-new-role">
                                    اضافة دور جديد
                                </button>
                                <p class="mb-0 mt-1">اضف دور جديد بما يتناسب مع فريق العمل</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!--/ Role cards -->
        <!-- Add Role Modal -->
        <div class="modal fade" id="addRoleModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered modal-add-new-role">
                <div class="modal-content p-3 p-md-5">
                    <button
                            type="button"
                            class="btn-close btn-pinned"
                            data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    <div class="modal-body">
                        <div class="text-center mb-4">
                            <h3 class="role-title mb-2">اضافة دور جديد</h3>
                            <p class="text-muted">اختر صلاحيات هذا الدور</p>
                        </div>
                        <!-- Add role form -->
                        <form id="addRoleForm" class="row g-3" method="POST" action="{{route('admin.roles.store')}}">
                            @csrf
                            <div class="col-12 mb-4">
                                <label class="form-label" for="modalRoleName">اسم الدور</label>
                                <input
                                        type="text"
                                        id="modalRoleName"
                                        name="name"
                                        class="form-control"
                                        placeholder="Enter a role name"
                                        tabindex="-1" required />
                            </div>
                            <div class="col-12">
                                <h5>صلاحيات الدور</h5>
                                <!-- Permission table -->
                                <div class="table-responsive">
                                    <table class="table table-flush-spacing">
                                        <tbody>

                                        @foreach ($permissions as $group_name => $groups)
                                            <tr>
                                                <td class="text-nowrap fw-medium">{{ ucfirst($group_name) }}</td>
                                                <td>
                                                    <div class="d-flex">
                                                        @foreach ($groups as $key => $permission)
                                                            <div class="form-check me-3 me-lg-5">
                                                                <input class="form-check-input" type="checkbox" id="permissions-{{ $group_name.$loop->index . $key}}" name="permissions[{{$group_name.$loop->index . $key }}]"
                                                                       value="{{ $permission->name }}" />
                                                                <label class="form-check-label" for="permissions-{{ $group_name.$loop->index . $key}}"> {{ str_replace($group_name, '', $permission->name) }} </label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                <!-- Permission table -->
                            </div>
                            <div class="col-12 text-center mt-4">
                                <button type="submit" class="btn btn-primary me-sm-3 me-1">Submit</button>
                                <button
                                        type="reset"
                                        class="btn btn-label-secondary"
                                        data-bs-dismiss="modal"
                                        aria-label="Close">
                                    Cancel
                                </button>
                            </div>
                        </form>
                        <!--/ Add role form -->
                    </div>
                </div>
            </div>
        </div>
        <!--/ Add Role Modal -->


        <!-- Add Role Modal -->
        <div class="modal fade" id="editRoleModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered modal-add-new-role">
                <div class="modal-content p-3 p-md-5">
                    <button
                            type="button"
                            class="btn-close btn-pinned"
                            data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    <div class="modal-body">
                        <div class="text-center mb-4">
                            <h3 class="role-title mb-2">اضافة دور جديد</h3>
                            <p class="text-muted">اختر صلاحيات هذا الدور</p>
                        </div>
                        <div id="editRoleModal-form">

                        </div>

                    </div>
                </div>
            </div>
        </div>


        <!-- / Add Role Modal -->
    </div>

    
@endsection
@section('script')
    <script>
        $(".edit-role").click(function (e) {
            e.preventDefault();

            var url = '{{route('admin.roles.edit',':slug')}}';
            var slug = $(this).attr('data-id');
            $.ajax({
                type: 'GET',
                url: url.replace(':slug', slug),
                success:function(data)
                {
                    $('#editRoleModal-form').html(data.form);

                }, error: function (reject) {

                }
            });

        });
    </script>
@endsection