@extends('adminlte::page')

@section('title', 'Alumnos')

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

@section('content_header')
    <h1>Alumnos</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 Alumno</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 Alumno</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">Matricular Alumno 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 ('students.store')}}">
                                @csrf
                                <div class="form-row">
                                    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-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-xs-12 col-sm-12 col-md-6 col-lg-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 class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
                                        <label>DNI (*)</label>
                                        <input type="text" class="form-control" id="dni" name="dni" value="{{old('dni')}}" placeholder="Dni" required>
                                    </div>
                                    <div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
                                        <label>Telefono (*)</label>
                                        <input type="text" class="form-control" id="phone" name="phone" value="{{old('phone')}}" placeholder="Telefono" required>
                                    </div>
                                </div>
                                <div class="form-row">
                                    
                                    <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                        <label>Profesion (*)</label>
                                        <input type="text" class="form-control" id="profession" name="profession" value="{{old('profession')}}" placeholder="Profesion">
                                    </div>
                                    <div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
                                        <label>Ciclo</label>
                                        <input type="text" class="form-control" id="cycle" name="cycle" value="{{old('cycle')}}" placeholder="Ciclo" >
                                    </div>
                                    <div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
                                        <label>Edad (*)</label>
                                        <input type="text" class="form-control" id="age" name="age" value="{{old('age')}}" placeholder="Edad" required>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-dark">Agregar Alumno</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 ('students.assignment')}}">
                                            @csrf
                                            
                                            <div class="form-row">
                                                <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                                    <label>Selecciona Alumno: (*)</label>
                                                    <select class="form-control select2" id="student" name="student" data-placeholder="Seleccione un alumno" style="width: 100%;" required>
                                                        <option></option>
                                                        @foreach ($estudiantes as $student)
                                                            <option value="{{$student->id}}" >{{$student->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-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}} -
                                                                {{App\Models\Level::find($course->level_id)->name}} -
                                                                Ciclo {{$course->cycle}} -
                                                                Salón {{$course->classroom}}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-row">
                                    
                                                <div class="form-group col-xs-12 col-sm-12 col-md-7 col-lg-7">
                                                    <label>Matricula</label>
                                                    <input type="number" step=0.01 min=0 class="form-control" id="enrollment" name="enrollment" value="{{old('enrollment')}}" placeholder="Matricula" >
                                                </div>
                                                <div class="form-group col-xs-12 col-sm-12 col-md-7 col-lg-7">
                                                    <label>Mensualidad</label>
                                                    <input type="number" step=0.01 min=0 class="form-control" id="monthlypayment" name="monthlypayment" value="{{old('monthlypayment')}}" placeholder="Mensualidad" >
                                                </div>
                                                <div class="form-group col-xs-12 col-sm-12 col-md-5 col-lg-5">
                                                    <label>N° de Recibo Mensualidad</label>
                                                    <input type="text" class="form-control" id="receipt_m" name="receipt_m" value="{{old('receipt_m')}}" placeholder="N° de recibo" >
                                                </div>
                                                <div class="form-group col-xs-12 col-sm-12 col-md-7 col-lg-7">
                                                    <label>Precio Libro</label>
                                                    <input type="number" step=0.01 min=0 class="form-control" id="book" name="book" value="{{old('book')}}" placeholder="Precio Libro" >
                                                </div>
                                                <div class="form-group col-xs-12 col-sm-12 col-md-5 col-lg-5">
                                                    <label>N° de Recibo Libro</label>
                                                    <input type="text" class="form-control" id="receipt_b" name="receipt_b" value="{{old('receipt_b')}}" placeholder="N° de recibo" >
                                                </div>
                                            </div>
                                            <input type="hidden" id="options" name="options" value="assignment" required>
                                            <button type="submit" class="btn btn-dark">Matricular Alumno</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 Alumnos</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>DNI</th>
                        <th>Telefono</th>
                        <th>Edad</th>
                        <th>Profesión</th>
                        <th>Ciclo</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($students as $student)
                    <tr>
                        <td>{{$student->name}}</td>
                        <td>{{$student->email}}</td>
                        <td style="text-align:center">{{$student->dni}}</td>
                        <td style="text-align:center">{{$student->phone}}</td>
                        <td style="text-align:center">{{$student->age}}</td>
                        <td>{{$student->profession}}</td>
                        <td style="text-align:center">{{$student->cycle}}</td>
                        <td>
                            @if ($student->state == 1)
                                <a onclick="return confirm('¿Estás seguro de deshabilitar este estudiante?')"  href="{{route('students.state',$student)}}" 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 estudiante?')"  href="{{route('students.state',$student)}}" class="btn btn-danger btn-xs" role="button">Deshabilitado</a>
                            @endif
                            <a href="{{route('students.edit',$student)}}" class="btn btn-outline-primary btn-xs"><i class="far fa-edit">&nbsp;Editar</i></a>
                            <form action="{{ route('students.destroy',$student)}}" 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 estudiante?')"><i class="far fa-trash-alt">&nbsp;Eliminar</i></button>  
                            </form>
                            <a href="{{route('students.show',$student)}}" 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>DNI</th>
                        <th>Telefono</th>
                        <th>Edad</th>
                        <th>Profesión</th>
                        <th>Ciclo</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' 
                },
            ],
            /* columnDefs: [ 
                {
                    targets: -1,
                    visible: false
                } 
            ], */
            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'));
          });   
            //Date range picker
            $('#reservationdate_start').datetimepicker({
                locale: 'es',
                //defaultDate: moment(),
                format: 'YYYY-MM-DD'
            }); 
          $('.select2').select2()
        });
    </script>
@stop