@extends('adminlte::page')

@section('title', 'Idiomas')

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

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

@section('content')
    @include('admin.parts.info')
    <div class="card card-dark collapsed-card">
        <div class="card-header" data-card-widget="collapse">
            <h3 class="card-title">Agregar Idioma</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 ('languages.store')}}">
                                @csrf
                                <div class="form-row">
                                
                                    <div class="form-group col-md-3">
                                        <label>Código de Idioma (*)</label>
                                        <input type="text" class="form-control" id="code" name="code" placeholder="Ingrese código del Idioma" required>
                                    </div>

                                    <div class="form-group col-md-9">
                                        <label>Nombre de Idioma (*)</label>
                                        <input type="text" class="form-control" id="name" name="name" placeholder="Ingrese nombre del Idioma" required>
                                    </div>
                                    {{-- Asinación de nombres de niveles --}}

                                    <div class="form-group col-md-12">
                                        <hr>
                                        <p>Asignar nombres de niveles</p>
                                        <button type="button" id="agregarNiveles" class="btn btn-dark float-center"><i class="fa fa-plus"></i> Agregar Nivel</button>
                                    </div>
                                    <div class="form-group col-md-9">
                                        <label>Nombre del nivel (*)</label>
                                        <select class="form-control select2" id="nombreNivel" name="nombreNivel" data-placeholder="Nombre del nivel" style="width: 100%;" >
                                            <option></option>
                                            <option value="Básico">Básico</option>
                                            <option value="Intermedio">Intermedio</option>
                                            <option value="Avanzado">Avanzado</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label>Número de ciclos (*)</label>
                                        <input type="number" min="1" class="form-control" id="ciclosNivel" name="ciclosNivel" placeholder="Ciclos del nivel">
                                    </div>
                                    <div class="form-group col-md-12">
                                        <div class="row">
                                            <div class="col-12 table-responsive">
                                              <table id="detallesNivel" class="table table-striped">
                                                <thead>
                                                <tr>
                                                  <th></th>
                                                  <th>Nombre del nivel</th>
                                                  <th>N° de ciclos</th>
                                                </tr>
                                                </thead>
                                              </table>
                                            </div>
                                          </div>
                                    </div>
                                </div>
                                <button name="guardar" id="guardar"  type="submit" class="btn btn-dark">Agregar Idioma</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 Idiomas</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>Código</th>
                        <th>Idioma</th>
                        <th>Niveles</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($languages as $language)
                    <tr>
                        <td>{{$language->code}}</td>
                        <td>{{$language->name}}</td>
                        <td>
                            <ul>
                                @foreach ($language->levels as $level)
                                <li>
                                    {{$level->name}} - {{$level->cycles}}
                                </li>
                                @endforeach
                            </ul>
                        </td>
                        <td>
                            @if ($language->state == 1)
                                <a onclick="return confirm('¿Estás seguro de deshabilitar este Idioma?')"  href="{{route('languages.state',$language)}}" 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 Idioma?')"  href="{{route('languages.state',$language)}}" class="btn btn-danger btn-xs" role="button">Deshabilitado</a>
                            @endif
                            <a href="{{route('languages.edit',$language)}}" class="btn btn-outline-primary btn-xs"><i class="far fa-edit">&nbsp;Editar</i></a>
                            <form action="{{ route('languages.destroy',$language)}}" 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 Idioma?')"><i class="far fa-trash-alt">&nbsp;Eliminar</i></button>  
                            </form>
                            <a href="{{route('languages.show',$language->slug)}}" class="btn btn-outline-info btn-xs"><i class="far fa-eye">&nbsp;Ver</i></a>
                            
                        </td>

                    </tr>
                    @endforeach
                    
                </tbody>
                <tfoot>
                    <tr>
                        <th>Código</th>
                        <th>Idioma</th>
                        <th>Niveles</th>
                        <th>Acciones</th>
                    </tr>
                </tfoot>
            </table>
        </div>
        <!-- /.card-body -->
    </div>
    <!-- /.card -->
    <script>
        function borrarNivel(index){

            $("#filaNivel" + index).remove();
        }
    </script>
@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>
        $(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(){
            $('.select2').select2({
                tags: true
            });
            $('#nombreNivel').on('change', function(){
                var nombreNivel = $('#nombreNivel').val();
                switch($.trim(nombreNivel)) {
                    case "Básico":
                        $('#ciclosNivel').empty()
                        $("#ciclosNivel").val("12")
                        break;
                    case "Intermedio":
                        $('#ciclosNivel').empty()
                        $("#ciclosNivel").val("12")
                        break;
                    case "Avanzado":
                        $('#ciclosNivel').empty()
                        $("#ciclosNivel").val("10")
                        break;
                    default:
                        $('#ciclosNivel').empty()
                        $("#ciclosNivel").val("")
                }
            });



            $("#agregarNiveles").click(function(){
                agregarNiveles();
            });
            var contNivel=0;

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

            function agregarNiveles(){
                nombreNivel= $("#nombreNivel").val();
                ciclosNivel= $("#ciclosNivel").val();
                if(nombreNivel !="" && ciclosNivel !=""){
                var filaNivel= ''+
                    '<tr class="selected" id="filaNivel'+contNivel+'">'+
                    '<td>'+
                        '<button type="button" class="btn btn-danger btn-sm" onclick="borrarNivel('+contNivel+');">'+
                        '<i class="fa fa-times"></i>'+
                        '</button>'+
                    '</td>'+
                    '<td>'+
                        '<input type="hidden" name="nombreNivel[]" value="'+nombreNivel+'">'+nombreNivel+
                    '</td>'+
                    '<td>'+
                        '<input type="hidden" name="ciclosNivel[]" value="'+ciclosNivel+'">'+ciclosNivel+
                    '</td>'+

                    '</tr>';      
                contNivel++;
                limpiarNivel();
                evaluarNivel();
                $('#detallesNivel').append(filaNivel);
                
                }else{

                alert("Rellene todos los campos del detalle de la nivel, revise los datos de asignación de nombre");
                
                }
                
            }
            function limpiarNivel(){
                
                $("#nombreNivel").val("");
                $("#ciclosNivel").val("");
                
            }
            function evaluarNivel(){

                if(contNivel>0){

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

                } else{
                    
                $("#guardar").hide();
                }
            }
            
            
        });
    </script>
    
    
    
@stop