@extends('adminlte::page')

@section('title', 'Docentes')

@section('plugins.Datatables', true)
@section('plugins.Select2', true)
@section('content_header')
    <h1>Docentes</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">Administrar Docente</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-header p-0 border-bottom-0">
                      <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
                        <li class="nav-item">
                          <a class="nav-link active" id="custom-tabs-four-manual-tab" data-toggle="pill" href="#custom-tabs-four-manual" role="tab" aria-controls="custom-tabs-four-manual" aria-selected="true">Agregar Docente</a>
                        </li>
                        {{-- <li class="nav-item">
                          <a class="nav-link" id="custom-tabs-four-archive-tab" data-toggle="pill" href="#custom-tabs-four-archive" role="tab" aria-controls="custom-tabs-four-archive" aria-selected="false">Por Achivo</a>
                        </li> --}}
                        <li class="nav-item">
                            <a class="nav-link" id="custom-tabs-four-asignation-tab" data-toggle="pill" href="#custom-tabs-four-asignation" role="tab" aria-controls="custom-tabs-four-asignation" aria-selected="false">Asignar Docente a un Curso</a>
                          </li>
                      </ul>
                    </div>
                    <div class="card-body">
                      <div class="tab-content" id="custom-tabs-four-tabContent">
                        <div class="tab-pane fade show active" id="custom-tabs-four-manual" role="tabpanel" aria-labelledby="custom-tabs-four-manual-tab">
                            <p>(*) Campos obligatorios</p>
                            <form method="POST" action="{{route ('teachers.store')}}">
                                @csrf
                                <div class="form-row">
                                    <div class="form-group col-md-12">
                                        <label>Nombres y Apellidos (*)</label>
                                        <input type="text" class="form-control" id="name" name="name" value="{{old('name')}}" placeholder="Nombre" required>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label>Correo Electrónico (*)</label>
                                        <input type="email" class="form-control" id="email" name="email" value="{{old('email')}}" placeholder="Correo Electrónico" required>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label>Contraseña (*)</label>
                                        <input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-dark">Agregar Docente</button>
                            </form>
                        </div>
                        {{-- <div class="tab-pane fade" id="custom-tabs-four-archive" role="tabpanel" aria-labelledby="custom-tabs-four-archive-tab">
                           Código para subir por archivo
                        </div> --}}
                        <div class="tab-pane fade" id="custom-tabs-four-asignation" role="tabpanel" aria-labelledby="custom-tabs-four-asignation-tab">
                            <div class="row">
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                    <div class="tab-pane text-left fade show active" id="vert-tabs-individualmente" role="tabpanel" aria-labelledby="vert-tabs-individualmente-tab">
                                        <p>(*) Campos obligatorios</p>
                                        <form method="POST" action="{{route ('teachers.assignment')}}">
                                            @csrf
                                            <div class="form-row">
                                                <div class="form-group col-md-12">
                                                    <label>Selecciona Docente: (*)</label>
                                                    <select class="form-control select2" id="teacher" name="teacher" data-placeholder="Seleccione un docente" style="width: 100%;" required>
                                                        <option></option>
                                                        @foreach ($profesores as $teacher)
                                                            <option value="{{$teacher->id}}" >{{$teacher->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                
                                                <div class="form-group col-md-12">
                                                    <label>Selecciona Curso: (*)</label>
                                                    <select class="form-control select2" id="courses" name="courses" data-placeholder="Periodo - Idioma - Nivel - Ciclo - Salón" style="width: 100%;" required>
                                                        <option></option>
                                                        @foreach ($courses as $course)
                                                            <option value="{{$course->id}}" >
                                                                {{App\Models\Period::find($course->period_id)->name}} -
                                                                {{App\Models\Language::find($course->language_id)->name}} -
                                                                Nivel {{App\Models\Level::find($course->level_id)->name}} -
                                                                Ciclo {{$course->cycle}} -
                                                                Salón {{$course->classroom}}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <input type="hidden" id="options" name="options" value="assignment" required>
                                            <button type="submit" class="btn btn-dark">Asignar Docente</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
            
                         </div>
                      </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 Docentes</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>Nombre</th>
                        <th>Email</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($teachers as $teacher)
                    <tr>
                        <td>{{$teacher->name}}</td>
                        <td>{{$teacher->email}}</td>
                        <td>
                            @if ($teacher->state == 1)
                                <a onclick="return confirm('¿Estás seguro de deshabilitar este Docente?')"  href="{{route('teachers.state',$teacher)}}" 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 Docente?')"  href="{{route('teachers.state',$teacher)}}" class="btn btn-danger btn-xs" role="button">Deshabilitado</a>
                            @endif
                            <a href="{{route('teachers.edit',$teacher)}}" class="btn btn-outline-primary btn-xs"><i class="far fa-edit">&nbsp;Editar</i></a>
                            <form action="{{ route('teachers.destroy',$teacher)}}" 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 Docente?')"><i class="far fa-trash-alt">&nbsp;Eliminar</i></button>  
                            </form>
                            <a href="{{route('teachers.show',$teacher)}}" class="btn btn-outline-info btn-xs"><i class="far fa-eye">&nbsp;Ver</i></a>
                            
                        </td>

                    </tr>
                    @endforeach
                    
                </tbody>
                <tfoot>
                    <tr>
                        <th>Nombre</th>
                        <th>Email</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>
        $(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'));
          });  
          $('.select2').select2() 
        });
    </script>
@stop