<div>
    @component('common.breadcrumb', ['addBtn' => false, 'permission_create' => 'Assign_index', 'breadcrumb_show' => $breadcrumb_show])
        @slot('breadcrumb_title')
            <h3>{{ $componentName }} | {{ $pageTitle }}</h3>

        @endslot
        <li class="breadcrumb-item">Usuarios</li>
        <li class="breadcrumb-item active">Asignar</li>
    @endcomponent
    @include('common.searchbox')
    <div class="container-fluid">
        <div class="row layout-top-spacing">
            <div class="col-sm-12">
                <div class="card">
                    <div class="row form form-theme mt-3">
                        <div class="col-sm-4 ">
                            <div class="form-group mr-5">
                                <select wire:model="role" class="form-select">
                                    <option value="Seleccionar" selected>Seleccione el Rol</option>
                                    @foreach ($roles as $role)
                                        <option value="{{$role->id}}">{{$role->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-8">
                            <div class="btn-showcase">
                                <button wire:click.prevent="SyncAll()" type="button" class="btn btn-primary">Sincronizar Todos</button>
                                <button onclick="Revoke()" type="button" class="btn btn-secondary">Revocar Todos</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row layout-top-spacing">
            <div class="col-sm-12">
                <div class="card">
                    <div class="table-responsive">
                        <table class="table">
                            <thead class="bg-primary">
                                <tr>
                                    <th scope="col">ID</th>
                                    <th scope="col">PERMISO @include('common.orderby', ['column' => 'name'])</th>
                                    <th scope="col" class="text-center">ROLES CON EL PERMISO</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($permissions as $item)
                                <tr>
                                    <td>{{$item->id}}</td>
                                    <td>
                                        <div class="n-check">
                                            <label class="d-flex">
                                                <input type="checkbox"
                                                wire:change="SyncPermission($('#p' + {{$item->id}}).is(':checked'), '{{$item->name}}')"
                                                id="p{{$item->id}}"
                                                value="{{$item->id}}"
                                                class="checkbox_animated "
                                                {{ $item->checked == 1 ? 'checked' : '' }}
                                                >
                                                {{$item->name}}
                                            </label>
                                        </div>
                                    </td>
                                    <td class="text-center">{{ \App\Models\User::permission($item->name)->count() }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        {{ $permissions->links() }}
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
      window.livewire.on('sync-error', msg => {
          noty(msg)
      });
      window.livewire.on('permi', msg => {
          noty(msg)
      });
      window.livewire.on('sync-all', msg => {
          noty(msg)
      });
      window.livewire.on('remove-all', msg => {
          noty(msg)
      });
      window.livewire.on('not-permission', msg => {
            noty(msg)
      });
    });

    function Revoke()
    {
        swal.fire({
        title: 'CONFIRMAR',
        text: '¿Confirmas revocar todos los Permisos?',
        icon: 'warning',
        showCancelButton: true,
        cancelButtonText: 'CERRAR',
        confirmButtonText: 'ACEPTAR',
        customClass: {
            confirmButton: 'btn btn-success',
            cancelButton: 'btn btn-danger'
        },
      }).then(function(result){
        if(result.value)
        {
          window.livewire.emit('revoke-all')
          swal.close()
        }
      })
    }
    </script>
