@extends('metronic.base')
@section('title')
    Roles
@endsection
@section('content')
@section('extracss')
@endsection




<div class="col-md-12">
    @include('sessions')
</div>


<div class="col-md-12 mt-4">
    <div class="card card-bordered">
        <div class="card-header">
            <h3 class="card-title">Roles existentes</h3>
            <div class="card-toolbar">

            </div>
        </div>
        <div class="card-body">

            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead class="">
                        <tr class="fw-bold fs-6 text-gray-800">
                            <th width="50" scope="col"> <strong>#</strong> </th>
                            <th scope="col"> <strong>Nombre</strong> </th>
                            <th width="50" class="text-center"> <strong>Editar</strong> </th>
                            <th width="50" class="text-center"> <strong>Eliminar</strong>
                            </th>
                        </tr>
                        @foreach ($roles as $key => $rol)
                            <tr>
                                <td> {{ $rol->id }} </td>
                                <td> {{ $rol->name }} </td>
                                <td>
                                    <a class="btn" href="{{ route('rol.edit', $rol->id) }}" title="Editar"><i
                                            class=" ki-outline ki-pencil fs-2x text-dark"></i></a>


                                </td>
                                <td>
                                    @include('roles.modal')
                                    <button type="button" data-bs-toggle="modal" data-bs-target="#deleteModal{{ $key }}"
                                    class="btn" title="Eliminar"><i class="ki-outline ki-trash fs-2x text-danger"></i></button>
                                </td>


                            </tr>
                        @endforeach
                    </thead>
                </table>
            </div>


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

<br>
<div class="col-md-12">

    <div class="card card-bordered">
        <div class="card-header">
            <h3 class="card-title"> Agregar Rol</h3>
            <div class="card-toolbar">
            </div>
        </div>
        <div class="card-body">
            <div class="alert alert-danger" role="alert">
                Los permisos que conllevan la palabra (MENU) son requeridos, ya que es un permiso para
                visualizar
                la opción en el menu lateral, por ejemplo permiso: ventas (MENU) quiere decir que es un
                permiso
                para desplegar las opciones de ventas en el menu lateral.
            </div>

            <form action="{{ route('rol.store') }}" method="post">
                @csrf
                <div class="form-group mb-4">
                    <h5><strong>Nombre del rol </strong></h5>
                    <input required name="name" type="text" id="name" class="form-control" />
                    <input type="hidden" name="user" value="{{ auth()->user()->name }}">
                </div>
                <h5><strong> Lista de permisos </strong></h5>
                <div class="form-group mt-2 mb-5">
                    <select class="form-select" multiple="multiple" size="10" name="permissions[]" id="dual_list">
                        @foreach ($permissions as $permission)
                            <option value="{{ $permission->id }}">{{ $permission->name }} @if ($permission->padre == null)
                                    <strong> ( MENU )</strong>
                                @endif
                            </option>
                        @endforeach
                    </select>
                </div>
                <button type="submit" class="btn btn-primary btn-block"><i class="ki-outline ki-check-circle fs-2"></i> Guardar Rol </button>
            </form>
        </div>
    </div>
</div>





@section('extrajs')
    <script type="text/javascript">
        function fun_delete(id) {
            $("#delete_id").val(id);
        }
    </script>
@endsection

@endsection