@extends("admin.layout.layout")
@section("styles")
    @php
        $titulo = "Ajustes";
        $modulo = "Ajustes";
        $vista="Roles";
    @endphp
    <title>{{getenv("APP_NAME")}} | {{$titulo}}</title>
@endsection

@section("contenido")
    <!--begin::Row-->
    <div class="row gx-5 gx-xl-10">
        <div class="row">
            <div class="col-xl">
                <div class="card mb-12">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Ajuste de roles y permisos</h5>
                        <p class="mb-4">
                            Ajuste los permisos por rol, es importante saber que cada usuario puede tener más de un rol. <br>
                            De esta manera se conmutan sus permisos.
                        </p>
                        <div class="card-toolbar">
                            <button type="button" class="btn btn-sm btn-success btnAgregarRol" title="Agregar Rol"><i class="ki-solid ki-plus-square"></i></button>
                            <a href="{{route("admin::ajustes")}}" class="nuevo btn btn-secondary mx-3 font-weight-bolder mr-2">
                                <i class="fa-solid fa-arrow-left fa-lg"></i> Volver
                            </a>

                        </div>
                    </div>

                    <div class="row g-4 pb-5 ">
                        @foreach ($roles as $role)
                            <div class="col-xl-4 col-lg-6 col-md-6">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between">
                                            <h6 class="fw-normal mb-2">Total <b>{{ $role->users_count }}</b>
                                                {{ $role->users_count == 1 ? 'usuario' : 'usuarios' }}
                                            </h6>
                                            <ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
                                                @foreach($role->users as $user)
                                                    <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-sm pull-up"  data-bs-original-title="{{$user->nombre}}">
                                                        <img class="rounded-circle" src="assets/media/avatars/blank.png" width="10px"  alt="Avatar" >
                                                    </li>
                                                @endforeach

                                            </ul>
                                        </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:;"  class="editarRol" data-value="{{$role->id}}" data-name="{{$role->name}}" ><span>Editar rol</span></a>
                                            </div>
                                            <a data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"  data-bs-original-title="Permisos" href="javascript:void(0);" class="text-muted">
                                                <i class="fas fa-check text-success"></i> {{ $role->permissions_count }}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include("admin.ajustes.modal.permiso")

@endsection

@section("scripts")
    <script>
        let getUrl= "{{ route('admin::rol.get',"_name") }}"
        let editarUrl = "{{ route('admin::rol.editar',"_id") }}"

        $(document).on('click', '.editarRol', function() {
            let permisosCheckboxes = $('.permiso');

            let id= $(this).data("value");
            let name= $(this).data("name");
            $("#frmPermisos")[0].reset();
            $("#lblName").text(name);
            $("#name").val(name);
            let ajax= $.ajax({
                url: getUrl.replace("_name",name),
                dataType: "json",
            })
            ajax.done(function (response) {

                let permisos = response.permissions;

                // Marcar los checkboxes correspondientes a los permisos existentes
                permisosCheckboxes.prop('checked', false);

                if (permisos.length>0){
                    permisos.forEach(function(permiso) {
                        $("#permiso_" + permiso.id).prop('checked', true);
                    });
                }
                $("#frmPermisos").attr('action', editarUrl.replace("_id",id) );
                $("#modalPermisos").modal({backdrop: 'static', keyboard: false}).modal('show');
            })
            ajax.fail(function (error) {
                Swal.fire({icon: 'error', title: error, showConfirmButton: true, showCancelButton:false});
            })

        });

        $(document).on('click', '.btnAgregarRol', function() {
            $("#frmPermisos")[0].reset();
            $("#lblName").text("Nuevo Rol");
            $("#name").val("");
            let permisosCheckboxes = $('.permiso');
            permisosCheckboxes.prop('checked', false);
            $("#frmPermisos").attr('action', "{{ route('admin::rol.insertar') }}" );
            $("#modalPermisos").modal({backdrop: 'static', keyboard: false}).modal('show');
        });


        // Obtener referencias a los checkboxes
        let selectAllCheckbox = $('#selectAll');
        let permisosCheckboxes = $('.permiso');

        // Evento de cambio del checkbox "Todos"
        selectAllCheckbox.on('change', function() {
            let isChecked = $(this).prop('checked');
            permisosCheckboxes.prop('checked', isChecked);
        });

        // Evento de cambio de los checkboxes de permisos
        permisosCheckboxes.on('change', function() {
            let allChecked = permisosCheckboxes.length === permisosCheckboxes.filter(':checked').length;
            selectAllCheckbox.prop('checked', allChecked);
        });
    </script>
@endsection