@extends('layouts.admin')

@section('contenido')

<div class="container">

    <h3>Nuevo Rol</h3>

    @if($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('roles.store') }}" method="POST">

        @csrf

        <div class="form-group">
            <label>Nombre del rol</label>

            <input type="text"
                   name="name"
                   class="form-control"
                   value="{{ old('name') }}"
                   required>
        </div>

        <div class="form-group">
            <label>Permisos del rol</label>

            <select name="permisos[]"
                    class="form-control"
                    id="permisos"
                    multiple
                    size="8">

                @foreach($permisos as $permiso)
                    <option value="{{ $permiso->id }}"
                        {{ in_array($permiso->id, old('permisos', [])) ? 'selected' : '' }}>
                        {{ $permiso->name }}
                    </option>
                @endforeach

            </select>

            <small class="text-muted">
                Mantené presionada la tecla Ctrl para seleccionar varios permisos.
            </small>
        </div>

        <div class="form-group">
            <label>Usuarios que tendrán este rol</label>

            <select name="usuarios[]"
                    class="form-control"
                    id="usuarios"
                    multiple
                    size="6">

                @foreach($usuarios as $usuario)
                    <option value="{{ $usuario->id }}"
                        {{ in_array($usuario->id, old('usuarios', [])) ? 'selected' : '' }}>
                        {{ $usuario->name }} - {{ $usuario->email }}
                    </option>
                @endforeach

            </select>

            <small class="text-muted">
                Mantené presionada la tecla Ctrl para seleccionar varios usuarios.
            </small>
        </div>

        <button type="submit" class="btn btn-primary">
            Guardar
        </button>

        <a href="{{ route('roles.index') }}" class="btn btn-secondary">
            Salir
        </a>

    </form>

</div>

@endsection
@push('styles')
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
      $('#usuarios').select2({
    placeholder:"Seleccione usuarios"
      });

        $('#permisos').select2({
    placeholder:"Seleccione permisos"
      });

    </script>
@endpush