@extends('layouts.admin')
@section('scripts')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#rol').on('change', onRol);
        });

        function onRol(){
           var rolId= $(this).val();
           // AJAX
           if(!rolId){
            $('#usuario').html('<option value="">Seleccione una opción</option>');
           }
           $.get('/public/moderadores/'+rolId+'/usuarios', function(data){
               var html_select='<option value="">Seleccione una opción</option>';
               for (var i=0; i<data.length; i++){
                   html_select+='<option value="'+data[i].id+'">'+data[i].name+'</option>';
                   console.log(html_select);
                   $('#usuario').html(html_select);
               }
           });
        }
    </script>
@endsection
@section('content')

<h1 class="text-center">Añadir moderador a curso</h1>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">

                <div class="card-body">
                    <form method="POST" action="{{route('mods.store')}}" novalidate>
                        @csrf

                        <div class="form-group row">
                            <label for="curso" class="col-md-4 col-form-label text-md-right">Seleccionar Curso</label>
                            <div class="col-md-6">
                            <select name="curso"
                            class="form-control @error('curso') is-invalid @enderror"
                            id="curso">
                            <option value="">Seleccione</option>
                            <!--Comienzo for each -->
                            @foreach($cursos as $curso)
                            <option value="{{$curso->id}}" {{old('curso')== $curso->id ? 'selected' : ''}}>{{$curso->nombre}}</option>
                            @endforeach
                            <!--termino for each -->
                            </select>
                            @error('curso')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{$message}}</strong>
                                </span>
                            @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="rol" class="col-md-4 col-form-label text-md-right">Seleccionar Rol</label>
                            <div class="col-md-6">
                            <select name="rol"
                            class="form-control @error('rol') is-invalid @enderror"
                            id="rol">
                            <option value="">Seleccione</option>
                            <!--Comienzo for each -->
                            @foreach($roles as $rol)
                            <option value="{{$rol->id}}" {{old('rol')== $rol->id ? 'selected' : ''}}>{{$rol->nombre}}</option>
                            @endforeach
                            <!--termino for each -->
                            </select>
                            @error('rol')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{$message}}</strong>
                                </span>
                            @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="usuario" class="col-md-4 col-form-label text-md-right">Seleccionar usuario</label>
                            <div class="col-md-6">
                            <select name="usuario"
                            class="form-control @error('usuario') is-invalid @enderror"
                            id="usuario">
                            <option value="">Seleccione</option>
                            <!--Comienzo for each -->     
                            <!--termino for each -->
                            </select>
                            @error('usuario')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{$message}}</strong>
                                </span>
                            @enderror
                            </div>
                        </div>



                        <div class="form-group row mb-0 justify-content-center">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-dark">
                                    {{ __('Añadir ') }} <i class="fas fa-user-plus"></i>
                                </button>
                                {{-- <a href="{{route('users.index')}}" class="btn btn-dark offset-md-4">Regresar</a> --}}
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
    
@endsection