@extends('dashboard.layouts.app')
@section('style')
@endsection
@section('content')


            <div class="container">

<h4 class="fw-semibold mb-4">قائمة الصلاحيات </h4>

<!-- Role cards -->
<div class="row g-4">
    @foreach (Roles() as $role)
    <div class="col-xl-4 col-lg-6 col-md-6 deleted-row">
      <div class="card">
        <div class="card-body">
          <div class="d-flex justify-content-between">
            <h6 class="fw-normal mb-2">عدد الموظفين {{$role->User()->count()}}</h6>
            <ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
                @foreach ($role->User()->limit(15)->get() as $user)
                    <li data-toggle="tooltip" data-popup="tooltip-custom" data-placement="top" title="{{$user->name}}" class="avatar avatar-sm pull-up">
                        <img class="rounded-circle" src="{{getImage($user->image)}}" alt="Avatar">
                    </li>
                @endforeach
                @if ($role->User()->count() > 15 )
                    <li data-toggle="tooltip" data-popup="tooltip-custom" data-placement="top" title="..." class="avatar avatar-sm pull-up">
                        ....
                    </li>
                @endif

            </ul>
          </div>
          <div class="d-flex justify-content-between align-items-end mt-1">
            <div class="role-heading">
              <h4 class="mb-1">{{$role->title}}</h4>
              {{-- <a href="javascript:;" data-route="{{url('/dashboard/settings/permissions-update/'.$role->id)}}" data-name="{{ $role->title }}" data="{{$role->Permission()->pluck('permission')}}" data-toggle="modal" data-target="#addRoleModal" class="role-edit-modal edit-permission"><span>تعديل الصلاحيات</span></a> --}}
              <a href="{{route('permissions-page', $role->id)}}" class="role-edit-modal edit-permission"><span>تعديل الصلاحيات</span></a>
            </div>
            <a href="javascript:void(0);" class="text-mute2d  load-ajax" data-toggle="modal"
            data-target="#modals-slide-in" data-route="{{route('roles.edit', $role->id)}}"><i data-feather="edit-2" class="mr-50"></i>تعديل</a>
            <a class="text-mute2d delete-item" href="{{route('roles.destroy', $role->id)}}"><i data-feather="trash"></i>حذف</a>
          </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="https://demos.pixinvent.com/vuexy-html-admin-template/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 class="btn btn-primary load-ajax" tabindex="0" type="button" data-toggle="modal"
                    data-target="#modals-slide-in" data-route="{{route('roles.create')}}">اضافة</button>
                <p class="mb-0 mt-1">اضافة صلاحية جديدة</p>
              </div>
            </div>
          </div>
        </div>
      </div>
</div>
<!--/ Role cards -->

<!-- Add Role Modal -->
<!-- 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-dismiss="modal" aria-label="Close"></button>
      <div class="modal-body add-per">
        <div class="text-center mb-4">
          <h3 class="role-title mb-2">تعديل الصلاحية</h3>
          {{-- <p class="text-muted">Set role permissions</p> --}}
        </div>
        <!-- Add role form -->
        <form id="addRoleForm" class="row g-3" method="post">
            @csrf
          <div class="col-12 mb-4">
            <label class="form-label" for="modalRoleName">اسم الوظيفة</label>
            <input type="text" id="modalRoleName" name="role" disabled class="form-control" placeholder="Enter a role name" tabindex="-1" />
          </div>
          <div class="col-12">
            <h5>امكانية الوصول </h5>
            <!-- Permission table -->
            <div class="table-responsive">
              <table class="table table-flush-spacing">
                <tbody>
                  {{-- <tr>
                    <td class="text-nowrap fw-semibold">امكانية الوصول <i class="ti ti-info-circle" data-toggle="tooltip" data-placement="top" title="Allows a full access to the system"></i></td>
                    <td>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="selectAll" />
                        <label class="form-check-label" for="selectAll">
                          تحديد الكل
                        </label>
                      </div>
                    </td>
                  </tr> --}}
                  @php
                      $i = 0;
                  @endphp
                @foreach(PermissionModels() as $model)
                  @php
                      $i++;
                  @endphp
                  <tr>
                    <td class="text-nowrap fw-semibold">
                        {{__('translation.permission_'.$model)}}
                    </td>
                    <td>
                      <div class="d-flex">
                        <div class="form-check me-3 me-lg-5">
                          <input class="form-check-input selecctall"  data-i="{{$i}}" value="1" type="checkbox" id="userManagementRead2{{$model}}" />
                          <label class="form-check-label" for="userManagementRead2{{$model}}">
                            الكل
                          </label>
                        </div>
                        <div class="form-check me-3 me-lg-5">
                          <input class="form-check-input inside-{{$i}}" type="checkbox" value="1" name="_show" id="userManagementRead{{$model}}" />
                          <label class="form-check-label" for="userManagementRead{{$model}}">
                            عرض
                          </label>
                        </div>
                        <div class="form-check me-3 me-lg-5">
                          <input class="form-check-input inside-{{$i}}" type="checkbox" name="_edit" value="1" id="userManagementWrite{{$model}}" />
                          <label class="form-check-label" for="userManagementWrite{{$model}}">
                            تعديل
                          </label>
                        </div>
                        <div class="form-check">
                          <input class="form-check-input inside-{{$i}}" type="checkbox" name="_add" value="1" id="userManagementCreate{{$model}}" />
                          <label class="form-check-label" for="userManagementCreate{{$model}}">
                            اضافة
                          </label>
                        </div>
                        <div class="form-check">
                          <input class="form-check-input inside-{{$i}}" type="checkbox" name="_delete" value="1" id="userManagementDel{{$model}}" />
                          <label class="form-check-label" for="userManagementDel{{$model}}">
                            حذف
                          </label>
                        </div>
                      </div>
                    </td>
                  </tr>
                @endforeach
                    {{-- <tr>
                        <td class="text-nowrap fw-semibold">
                            انواع المعاملات
                        </td>
                        <td>
                        <div class="d-flex">
                            <div class="form-check me-3 me-lg-5">
                            <input class="form-check-input selecctall"  data-i="a" value="1" type="checkbox" id="userManagementRead2a" />
                            <label class="form-check-label" for="userManagementRead2a">
                                الكل
                            </label>
                            </div>
                            <div class="form-check me-3 me-lg-5">
                            <input class="form-check-input inside-a" type="checkbox" value="1" name="general_exporter_show" id="userManagementReada" />
                            <label class="form-check-label" for="userManagementReada">
                                صادر عام
                            </label>
                            </div>
                            <div class="form-check me-3 me-lg-5">
                            <input class="form-check-input inside-a" type="checkbox" name="general_importer_show" value="1" id="userManagementWritea" />
                            <label class="form-check-label" for="userManagementWritea">
                                وارد عام
                            </label>
                            </div>
                            <div class="form-check">
                            <input class="form-check-input inside-a" type="checkbox" name="internal_show" value="1" id="userManagementCreatea" />
                            <label class="form-check-label" for="userManagementCreatea">
                                معاملة داخلية
                            </label>
                            </div>
                            <div class="form-check">
                            <input class="form-check-input inside-a" type="checkbox" name="archived_show" value="1" id="userManagementDela" />
                            <label class="form-check-label" for="userManagementDela">
                                ارشيف الكتروني
                            </label>
                            </div>
                        </div>
                        </td>
                    </tr> --}}
                    <tr>
                        <td class="text-nowrap fw-semibold">
                           صلاحيات عامة
                        </td>
                        <td>
                        <div class="d-flex">

                            <div class="form-check me-3 me-lg-5">
                            <input class="form-check-input inside-a" type="checkbox" value="1" name="settings_show" id="userManagementReadaq" />
                            <label class="form-check-label" for="userManagementReadaq">
                                الاعدادات
                            </label>
                            </div>
                            <div class="form-check me-3 me-lg-5">
                            <input class="form-check-input inside-a" type="checkbox" name="notifications_show" value="1" id="userManagementWriteaq" />
                            <label class="form-check-label" for="userManagementWriteaq">
                                الاشعارات
                            </label>
                            </div>

                        </div>
                        </td>
                    </tr>
                </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">حفظ</button>
            <button type="reset" class="btn btn-label-secondary" data-dismiss="modal" aria-label="Close">الغاء</button>
          </div>
        </form>
        <!--/ Add role form -->
      </div>
    </div>
  </div>
</div>
<!--/ Add Role Modal -->
            </div>



@endsection
@section('modal')
    <!-- modal -->
    <div class="modal modal-slide-in fade" id="modals-slide-in" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog sidebar-sm" id="ajax-content">
            {{-- ajax content --}}
        </div>
    </div>
@endsection

@section('js')

<script>
    /* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
    var dropdown = document.getElementsByClassName("dropdown-btn");
    var i;

    for (i = 0; i < dropdown.length; i++) {
        dropdown[i].addEventListener("click", function () {
            this.classList.toggle("active");
            var dropdownContent = this.nextElementSibling;
            if (dropdownContent.style.display === "block") {
                dropdownContent.style.display = "none";
            } else {
                dropdownContent.style.display = "block";
            }
        });
    }


    $(document).ready(function(){

        $('.user-role').on('click', function(e){
            //remove selected one
$('option:selected', 'select[name="role_id"]').removeAttr('selected');
//Using the value
$('select[name="role_id"]').find('option[value="'+$(this).attr('data-role')+'"]').attr("selected",true);
            //remove selected one
$('option:selected', 'select[name="admin_id"]').removeAttr('selected');
//Using the value
$('select[name="admin_id"]').find('option[value="'+$(this).attr('data-user')+'"]').attr("selected",true);
            //$('form#user-role > select[name=role_id]').val($(this).attr('data-role')).change();
            //$('form#user-role > select[name=admin_id]').val($(this).attr('data-user')).change();

                $('.give-per').removeClass('hidden');
        });
    });


    $('.buunton-notofication').on('click',function(){
        var type = $(this).data('type');
        var message = $(this).data('message');
        switch(type){
            case 'error' : toastr.error(message);  break;
            case 'success' : toastr.success(message);  break;
            case 'info' : toastr.info(message);  break;
            case 'warning' : toastr.warning(message);  break;
        }
        return false;
    });
    // TableManageButtons.init();
</script>

<script type="text/javascript">
    $(document).ready(function(){
        $('.edit-permission').on('click', function(){
            var list = $.parseJSON( $(this).attr('data'));
            $.each(list, function( index, value ) {
                $('input[name='+value+']').prop('checked', true);
            });
            console.log(list);
            $('.add-per form').attr('action', $(this).attr('data-route'));
            $('.add-per input[name=role]').attr('value', $(this).attr('data-name'));
            $('.add-per').removeClass('hidden');
        });

        $('.selecctall').on('click', function(){
            var i = $(this).attr('data-i');
            if ($(this).is(':checked') ) {
                //
                $('.inside-'+i).prop('checked', true);
            } else {
                //
                $('.inside-'+i).prop('checked', false);
            }
        } );
    });
</script>
@endsection