@extends('adminlte::page')

@section('title', 'Idioma '.$language->name
                  )
@section('plugins.Datatables', true)
@section('plugins.File-input', true)

@section('content')
    @include('admin.parts.info')
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-3">
            <!-- Profile Image -->
            <div class="card card-primary card-outline">
              <div class="card-body box-profile">
                <div class="text-center">
                  <img class="img-fluid img-circle"
                       src="https://ui-avatars.com/api/?name={{$language->name}}&background=0D8ABC&color=fff"
                       alt="User profile picture">
                </div>

                <h3 class="profile-username text-center">
                  {{$language->name}}
                </h3>

                {{-- <p class="text-muted text-center">{{$language->code}}</p> --}}
                <hr>

                <a href="{{route('languages.edit',$language)}}" class="btn btn-primary btn-block">Editar</a><br>
                <form action="{{ route('languages.destroy',$language)}}" method="post" style="display: inline">
                  @csrf @method('delete')
                  <button class="btn btn-danger btn-block" onclick="return confirm('¿Estás seguro de eliminar este Idioma?')">Eliminar</i></button>  
                </form>
                {{-- <form action="{{ route('languages.excel')}}" method="post" style="display: inline" enctype="multipart/form-data">
                  @csrf 
                  <input type="file" name="file" id="file" >
                  <button class="btn btn-danger btn-block" >Subir archivos</i></button>  
                </form> --}}
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
            <!-- About Me Box -->
            <div class="card card-primary">
                <div class="card-header">
                <h3 class="card-title">Detalles</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                <strong><i class="fas fa-calendar-alt mr-1"></i> Fecha de Creación</strong>

                <p class="text-muted">
                    {{$language->created_at}}
                </p>

                <hr>

                <strong><i class="fas fa-calendar-alt mr-1"></i> Última Modificación</strong>

                <p class="text-muted">
                    {{$language->updated_at}}
                </p>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
          <div class="col-md-9">
              <div class="form-row">
                  <div class="form-group col-md-12 ml-auto">
                      <div class="ml-auto">
                        @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-block" 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-block" role="button">Deshabilitado</a>
                        @endif
                      </div>
                  </div>
                  <div class="form-group col-md-12 ml-auto">
                    <br>
                    <section class="content">
                      <div class="container-fluid">
                        <div class="row">
                        @foreach ($language->levels as $level)
                          <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                            <!-- small box -->
                            <div class="small-box bg-info">
                              <div class="inner">
                                <h5>
                                  {{$level->name}}
                                </h5>
                                <p>
                                  {{$level->cycles}} ciclos 
                                </p>
                              </div>
                              <div class="icon">
                                <i class="ion ion-ios-book"></i>
                              </div>
                              <a href="{{route('levels.show',$level)}}" class="small-box-footer">Ir al Nivel <i class="fas fa-arrow-circle-right"></i></a>
                            </div>
                          </div>
                        @endforeach
                        </div>
                      </div>
                    </section>
                  </div>
              </div>
            <!-- /.nav-tabs-custom -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
      </div><!-- /.container-fluid -->
    </section>

@stop

@section('js')
<script>
  $(function () {
    $("#example1").DataTable({
              
              "responsive": true, "lengthChange": false, "autoWidth": false,
              "buttons": [
                  {
                      extend: 'excel', 
                      exportOptions: {
                          columns: ':visible'
                      }
                  },
                  {
                      extend: 'pdf', 
                      exportOptions: {
                          columns: ':visible'
                      }
                  },
                  {
                      extend: 'print',
                      exportOptions: {
                          columns: ':visible'
                      },
                      text: 'Imprimir'
                  },
                  {
                      extend: 'colvis',
                      text: 'Columnas' 
                  },
              ],
              /* columnDefs: [ 
                  {
                      targets: -1,
                      visible: false
                  } 
              ], */
              language: {
                  "decimal": "",
                  "emptyTable": "Aún no se cargaron datos",
                  "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)');
  });

</script>
<script>
  $(function () {
    bsCustomFileInput.init();
  });
  </script>
@stop