@extends('adminlte::page')

@section('title', 'Cursos')

@section('plugins.Datatables', true)
@section('plugins.Date-picker', true)
@section('plugins.Select2', true)

@section('content_header')
    <h1>Cursos</h1>
@stop

@section('content')
    @include('admin.parts.info')
    @include('admin.parts.infoPeriod')
    <div class="card card-dark collapsed-card">
        <div class="card-header" data-card-widget="collapse">
            <h3 class="card-title">Agregar Curso</h3>
            <div class="card-tools">
                <!-- Collapse Button -->
                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i></button>
            </div>
        <!-- /.card-tools -->
        </div>
        <!-- /.card-header -->
        
        <div class="card-body">
            <div class="row">
                <div class="col-12 col-sm-12">
                  <div class="card card-dark card-outline card-outline-tabs">
                    <div class="card-body">
                      <div class="tab-content" id="custom-tabs-four-tabContent">
                            <p>(*) Campos obligatorios</p>
                            <form method="POST" action="{{route ('courses.store')}}">
                                @csrf
                                <div class="form-row">
                                
                                    <div class="form-group col-md-3">
                                        <label for="language">Selecciona un Idioma (*) </label>
                                        <select class="form-control select2" id="language" name="language_id" data-placeholder="Seleccione un Idioma" style="width: 100%;" required>
                                            <option></option>
                                            @foreach($languages as $language)
                                                <option value="{{ $language->id }}">{{ $language->name  }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group col-md-3">
                                        <label for="level">Selecciona un Nivel (*) </label>
                                        <select class="form-control select2" id="level" name="level_id" data-placeholder="Seleccione un nivel" style="width: 100%;" required>
                                            <option></option>
                                        </select>
                                    </div>

                                    <div class="form-group col-md-3">
                                        <label for="cycle">Selecciona un Ciclo (*) </label>
                                        <select class="form-control select2" id="cycle" name="cycle" data-placeholder="Seleccione un ciclo" style="width: 100%;" required>
                                            <option></option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label>Salón (*)</label>
                                        <input type="number" min="1" class="form-control" id="classroom" name="classroom" value="1" placeholder="Salón" required>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <hr>
                                        <p>Asignar horario del curso</p>
                                        <button type="button" id="agregar" class="btn btn-dark float-center"><i class="fa fa-plus"></i> Agregar horario</button>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label>Día (*)</label>
                                        <select class="form-control select2" id="day" name="day" data-placeholder="Seleccione un día" style="width: 100%;" >
                                            <option></option>
                                            <option value="Lunes">Lunes</option>
                                            <option value="Martes">Martes</option>
                                            <option value="Miércoles">Miércoles</option>
                                            <option value="Jueves">Jueves</option>
                                            <option value="Viernes">Viernes</option>
                                            <option value="Sábado">Sábado</option>
                                            <option value="Domingo">Domingo</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label>Hora de Inicio (*)</label>
                                        <div class="input-group date" id="timepicker_start" data-target-input="nearest">
                                            <input type="text" id="time_start" name="time_start" class="form-control datetimepicker-input" data-target="#timepicker_start"/>
                                            <div class="input-group-append" data-target="#timepicker_start" data-toggle="datetimepicker">
                                                <div class="input-group-text"><i class="far fa-clock"></i></div>
                                            </div>
                                        </div>
                                        
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label>Hora de Salida (*)</label>
                                        <div class="input-group date" id="timepicker_end" data-target-input="nearest">
                                            <input type="text" id="time_end" name="time_end" class="form-control datetimepicker-input" data-target="#timepicker_end"/>
                                            <div class="input-group-append" data-target="#timepicker_end" data-toggle="datetimepicker">
                                                <div class="input-group-text"><i class="far fa-clock"></i></div>
                                            </div>
                                        </div>
                                        
                                    </div>
                                    <div class="form-group col-md-12">
                                        <div class="row">
                                            <div class="col-12 table-responsive">
                                              <table id="detalles" class="table table-striped">
                                                <thead>
                                                <tr>
                                                  <th></th>
                                                  <th>Día</th>
                                                  <th>Hora de inicio</th>
                                                  <th>Hora de salida</th>
                                                </tr>
                                                </thead>
                                              </table>
                                            </div>
                                          </div>
                                    </div>
                                    
                                    {{-- Asinación de nombres de notas --}}

                                    <div class="form-group col-md-12">
                                        <hr>
                                        <p>Asignar nombres de notas</p>
                                        <button type="button" id="agregarNota" class="btn btn-dark float-center"><i class="fa fa-plus"></i> Agregar Nota</button>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label>Nombre del módulo (*)</label>
                                        <select class="form-control select2" id="nombreArea" name="nombreArea" data-placeholder="Módulo de la nota" style="width: 100%;" data-select2-tags="true">
                                            <option></option>
                                            <option value="Independent">Independent</option>
                                            <option value="Unit 1">Unit 1</option>
                                            <option value="Unit 2">Unit 2</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label>Nombre de la nota (*)</label>
                                        <select class="form-control select2" id="nombreNota" name="nombreNota" data-placeholder="Nombre de la nota" style="width: 100%;" data-select2-tags="true">
                                            <option></option>
                                            <option value="Homework">Homework</option>
                                            <option value="Class Part.">Class Part.</option>
                                            <option value="Writing">Writing</option>
                                            <option value="Speaking">Speaking</option>
                                            <option value="G-V-R-L">G-V-R-L</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label>% de la nota (*)</label>
                                        <input type="number" min="0" class="form-control" id="nombrePeso" name="nombrePeso" placeholder="Peso Porcentaje de la nota">
                                    </div>
                                    <div class="form-group col-md-12">
                                        <div class="row">
                                            <div class="col-12 table-responsive">
                                              <table id="detallesNota" class="table table-striped">
                                                <thead>
                                                <tr>
                                                  <th></th>
                                                  <th>Nombre del módulo</th>
                                                  <th>Nombre de la nota</th>
                                                  <th>% de la nota</th>
                                                </tr>
                                                </thead>
                                              </table>
                                            </div>
                                          </div>
                                    </div>
                                </div>
                                <button name="guardar" id="guardar"  type="submit" class="btn btn-dark">Agregar Curso</button>
                            </form>
                       
                      </div>
                    </div>
                    <!-- /.card -->
                  </div>
                </div>
            </div>       
        </div>
        <!-- /.card-body -->
    </div>
    <!-- /.card -->
    <div class="card card-dark">
        <div class="card-header">
            <h3 class="card-title">Listado de Cursos</h3>
            <div class="card-tools">
                <!-- Maximize Button -->
                <button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i></button>
            </div>
            <!-- /.card-tools -->
        </div>
        <!-- /.card-header -->
        <div class="card-body">
            <table id="example1" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>Periodo</th>
                        <th>Idioma</th>
                        <th>Nivel</th>
                        <th>Ciclo</th>
                        <th>Salón</th>
                        <th>Horario</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($courses as $course)
                    <tr>
                        <td>{{App\Models\Period::find(\Session::get('idPeriodo'))->name}}</td>
                        <td>{{App\Models\Language::find($course->language_id)->name}}</td>
                        <td>{{App\Models\Level::find($course->level_id)->name}}</td>
                        <td>{{$course->cycle}}</td>
                        <td>{{$course->classroom}}</td>
                        <td>
                            <ul>
                                @foreach ($course->timetables as $timetable)
                                <li>
                                    {{$timetable->day}} - {{$timetable->time_start}} : {{$timetable->time_end}}
                                </li>
                                @endforeach
                            </ul>
                        </td>
                        <td>
                            @if ($course->state == 1)
                                <a onclick="return confirm('¿Estás seguro de deshabilitar este Curso?')"  href="{{route('courses.state',$course)}}" class="btn btn-success btn-xs" role="button">Habilitado&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                            @else
                                <a onclick="return confirm('¿Estás seguro de cambiar habilitar este Curso?')"  href="{{route('courses.state',$course)}}" class="btn btn-danger btn-xs" role="button">Deshabilitado</a>
                            @endif
                            <form action="{{ route('courses.destroy',$course)}}" method="post" style="display: inline">
                                @csrf @method('delete')
                                <button class="btn btn-outline-danger btn-xs" onclick="return confirm('¿Estás seguro de eliminar este Curso?')"><i class="far fa-trash-alt">&nbsp;Eliminar</i></button>  
                            </form>
                            <a href="{{route('courses.show',$course->slug)}}" class="btn btn-outline-info btn-xs"><i class="far fa-eye">&nbsp;Ver</i></a>
                            
                        </td>

                    </tr>
                    @endforeach
                    
                </tbody>
                <tfoot>
                    <tr>
                        <th>Periodo</th>
                        <th>Idioma</th>
                        <th>Nivel</th>
                        <th>Ciclo</th>
                        <th>Salón</th>
                        <th>Horario</th>
                        <th>Acciones</th>
                    </tr>
                </tfoot>
            </table>
        </div>
        <!-- /.card-body -->
    </div>
    <!-- /.card -->
@stop

@section('css')
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
@stop

@section('js')
    <script>
        $(document).ready(function() {
            $("#nombreArea").select2({
                tags: true
            });
            $("#nombreNota").select2({
                tags: true
            });
        });
        var cont=0;
        var contNota=0;
        function borrar(index){
            $("#fila" + index).remove();
            cont--;
            evaluar()
        }
        function evaluar(){
            if(cont>0 && contNota>0){
                $("#guardar").show();
            } else{
                $("#guardar").hide();
            }
        }
        function borrarNota(index){
            $("#filaNota" + index).remove();
            contNota--;
            evaluar()
        }
        $(function () {
            $("#example1").DataTable({
                "responsive": true, "lengthChange": false, "autoWidth": false,
                "buttons": [
                    {
                        extend: 'copy', 
                        text: 'Copiar'
                    },
                    {
                        extend: 'csv', 
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        extend: 'excel', 
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        extend: 'pdf', 
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        extend: 'print',
                        exportOptions: {
                            columns: ':visible'
                        },
                        text: 'Imprimir'
                    },
                    {
                        extend: 'colvis',
                        text: 'Columnas visibles' 
                    }
                ],
                language: {
                    "decimal": "",
                    "emptyTable": "No hay información",
                    "info": "Mostrando _START_ a _END_ de _TOTAL_ entradas",
                    "infoEmpty": "Mostrando 0 to 0 of 0 Entradas",
                    "infoFiltered": "(Filtrado de _MAX_ total entradas)",
                    "infoPostFix": "",
                    "thousands": ",",
                    "lengthMenu": "Mostrar _MENU_ entradas",
                    "loadingRecords": "Cargando...",
                    "processing": "Procesando...",
                    "search": "Buscar:",
                    "zeroRecords": "Sin resultados encontrados",
                    "paginate": {
                        "first": "Primero",
                        "last": "Ultimo",
                        "next": "Siguiente",
                        "previous": "Anterior"
                    }
                },
            }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');  
            $("input[data-bootstrap-switch]").each(function(){
                $(this).bootstrapSwitch('state', $(this).prop('checked'));
            });   
            //Timepicker
            $('#timepicker_start').datetimepicker({
                format: 'LT'
                })
                //Timepicker
                $('#timepicker_end').datetimepicker({
                format: 'LT'
            })
        });
        $(document).ready(function(){
            $("#agregar").click(function(){
                agregar();
            });
            

            $("#guardar").hide();

            function agregar(){
                day= $("#day").val();
                time_start= $("#time_start").val();
                time_end= $("#time_end").val();

                if(day !="" && time_start!="" && time_end!=""){
                var fila= ''+
                    '<tr class="selected" id="fila'+cont+'">'+
                    '<td>'+
                        '<button type="button" class="btn btn-danger btn-sm" onclick="borrar('+cont+');">'+
                        '<i class="fa fa-times"></i>'+
                        '</button>'+
                    '</td>'+
                    '<td>'+
                        '<input type="hidden" name="day[]" value="'+day+'">'+day+
                    '</td>'+
                    '<td>'+
                        '<input type="hidden"name="time_start[]" value="'+time_start+'">'+time_start+
                    '</td>'+
                    '<td>'+
                        '<input type="hidden"name="time_end[]" value="'+time_end+'">'+time_end+
                    '</td>'+

                    '</tr>';      
                cont++;
                limpiar();
                evaluar();
                $('#detalles').append(fila);
                
                }else{

                alert("Rellene todos los campos del detalle del curso, revise los datos del horario");
                
                }
                
            }
            function limpiar(){
                $('#day').append('<option value="" selected="selected">Seleccione un día</option>')
                $("#time_start").val("");
                $("#time_end").val("");
                
            }
            
            
            
        });

        $(document).ready(function(){
            $("#agregarNota").click(function(){
                agregarNota();
            });
            

            $("#guardar").hide();

            function agregarNota(){
                nombreNota= $("#nombreNota").val();
                nombreArea= $("#nombreArea").val();
                nombrePeso= $("#nombrePeso").val();
                if(nombreNota !="" && nombreArea !="" && nombrePeso !=""){
                var filaNota= ''+
                    '<tr class="selected" id="filaNota'+contNota+'">'+
                    '<td>'+
                        '<button type="button" class="btn btn-danger btn-sm" onclick="borrarNota('+contNota+');">'+
                        '<i class="fa fa-times"></i>'+
                        '</button>'+
                    '</td>'+
                    '<td>'+
                        '<input type="hidden" name="nombreArea[]" value="'+nombreArea+'">'+nombreArea+
                    '</td>'+
                    '<td>'+
                        '<input type="hidden" name="nombreNota[]" value="'+nombreNota+'">'+nombreNota+
                    '</td>'+
                    '<td>'+
                        '<input type="hidden" name="nombrePeso[]" value="'+nombrePeso+'">'+nombrePeso+
                    '</td>'+

                    '</tr>';      
                contNota++;
                limpiarNota();
                evaluar();
                $('#detallesNota').append(filaNota);
                
                }else{

                alert("Rellene todos los campos del detalle de la nota, revise los datos de asignación de nombre");
                
                }
                
            }
            function limpiarNota(){
                $('#nombreNota').append('<option value="" selected="selected">Nombre de la nota</option>')
                $('#nombreArea').append('<option value="" selected="selected">Módulo de la nota</option>')
                $("#nombrePeso").val("");
                
            }
            
            
            
        });
        $(document).ready(function(){
            $('.select2').select2()
            $('#language').on('change', function(){
                var language_id = $('#language').val();
                $('#level').empty();
                $('#cycle').empty();
                if ($.trim(language_id) != '') {
                    $.get('getLevels', {language_id: language_id}, function (levels) {
                        $('#level').empty();
                        $('#cycle').empty();
                        $('#level').append("<option value=''>Selecciona un Nivel</option>");
                        $('#cycle').append("<option value=''>Selecciona un Ciclo</option>");
                        $.each(levels, function (index, value) {
                            $('#level').append("<option value='" + index + "'>"+value +"</option>");
                        })
                    });
                }
            });

            $('#level').on('change', function(){
                var level_id = $('#level').val();
                $('#cycle').empty();
                if ($.trim(level_id) != '') {
                    $.get('getCycles', {level_id: level_id}, function (cycles) {
                        $('#cycle').empty();
                        $('#cycle').append("<option value=''>Selecciona un Ciclo</option>");
                        $.each(cycles, function (index, value) {
                            $('#cycle').append("<option value='" + index + "'>"+value +"</option>");
                        })
                    });
                }
            });
        });
    </script>
    
    
    
@stop