@extends('template.main')
@if($parametro!=2)
    @section('titulo','Listado de Alumnos')
@else
    @section('titulo','Listado de Competencias')
@endif

@section('cabecera')
    <script>
        $(document).ready(function() {
            $('#contenedor').DataTable( {
                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"
                    }
                },
                "paging":false,

                initComplete: function () {
                    this.api().columns().every( function () {
                        var column = this;
                        var select = $('<select style="word-wrap: break-word;width:135px" ><option value=""></option></select>')
                            .appendTo( $(column.footer()).empty() )
                            .on( 'change', function () {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );

                                column
                                    .search( val ? '^'+val+'$' : '', true, false )
                                    .draw();
                            } );

                        column.data().unique().sort().each( function ( d, j ) {
                            select.append( '<option value="'+d+'">'+d+'</option>' )
                        } );
                    } );
                }
            } );
        } );
    </script>
    <style>
        select option{
        width:180px;
        word-wrap: break-word;
        white-space: normal;
        }
        select{
        width:190px;
        }
    </style>
@endsection

@section('contenido')
    <div class="row" style="margin: 5px;">
        <div class="col-lg-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fas fa-home"></i> Inicio </a></li>
                    @if($parametro!=2)
                    <li class="breadcrumb-item"><i class="fas fa-user-circle"></i> Listado de Alumnos</li>
                    @else
                        <li class="breadcrumb-item"><i class="fas fa-user-circle"></i> Listado de Competencias</li>
                    @endif
                </ol>
            </nav>
            <hr>
        </div>
        <div class="col-lg-9">
            @if($parametro!=2)
            <h3 class="contexto"> <i class="fas fa-user-circle"></i> Listado de Alumnos</h3>
            @else
                <h3 class="contexto"> <i class="fas fa-user-circle"></i> Listado de Competencias</h3>
            @endif
        </div>
        <div class="col-lg-3">
            @if($parametro==2)
                <a href="{{ route('competencias.create') }}" class="btn btn-success"><i class="fas fa-plus"></i> Agregar Nuevo</a>

            @else
            <a href="{{ route('alumnos.create') }}" class="btn btn-success"><i class="fas fa-plus"></i> Agregar Nuevo</a>
            @endif
             </div>
        <div class="col-lg-12">
            <table id="contenedor" style="background: #fff; font-size: 12px" class="table table-hover">
                <thead>
                    <tr>
                        <th style="word-wrap: break-word;width:125px">Alumno</th>
                        <th style="word-wrap: break-word;width:125px">Alta</th>
                        @if($parametro!=2)
                            <th>Matrícula</th>
                        @endif
			@if($user->permiso!=1 || $parametro!=2)
			<th>Sede</th>
			@endif
			@if($user->permiso!=1 || $parametro==2)
                        <th>Modalidad</th>
			@endif
                        <th>Carrera</th>
                        @if($parametro!=2)
                            @if($user->permiso!=1)
                                <th>Generacion</th>
                            @endif
                            <th>Tipo</th>
                        @endif
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tfoot style="display: table-header-group;">
                <tr>
                    <th style="word-wrap: break-word;width:130px">Alumno</th>
                    <th style="word-wrap: break-word;width:130px">Alta</th>
                    @if($parametro!=2)
                    <th>Matrícula</th>
                    @endif
		    @if($user->permiso!=1 || $parametro!=2)
			<th>Sede</th>
			@endif
			@if($user->permiso!=1 || $parametro==2)
                        <th>Modalidad</th>
			@endif
                    <th>Carrera</th>
                    @if($parametro!=2)
                            @if($user->permiso!=1)
                                <th>Generacion</th>
                            @endif
                    <th>Tipo</th>
                    @endif
                    <th>Acciones</th>
                </tr>
                </tfoot>
                <tbody>
                    @if(count($alumnos) >= 1)
                        @foreach($alumnos as $al)
                            <tr>
                                <td style="word-wrap: break-word;width:130px">{{ $al->nombre }} {{ $al->apellidos }}</td>
                                <td style="word-wrap: break-word;width:130px">{{ $al->User->name }}</td>
                                @if($parametro!=2)
                                <td style="word-wrap: break-word;width:100px">{{ $al->matricula }}</td>
                                @endif
				@if($user->permiso!=1 || $parametro!=2)
				<td style="word-wrap: break-word;width:125px">{{ $al->Sede->sede }}</td>
				@endif
				@if($user->permiso!=1 || $parametro==2)  
                                <td>{{ $al->NivelEducativo->tipo }}</td>
				@endif
                                <td style="word-wrap: break-word;width:150px">{{ $al->Carrera->nombre }}</td>
                                @if($parametro!=2)
                                    @if($user->permiso!=1)
                                        <td>{{ $al->generacion }}</td>
                                    @endif
                                    <td style="width:40px">{{ $al->Tipo->tipo }}</td>
                                @endif
                                <td>
                                    @if($parametro==2)
                                        <a href="{{ route('competencias.show',$al->idalumno) }}" class="btn btn-outline-info" title="Ver datos del alumno"><i class="far fa-eye"></i></a>
                                        <a href="{{ route('competencias.edit',$al->idalumno) }}" class="btn btn-outline-warning" title="Editar Alumno"><i class="fas fa-edit"></i></a>
                                        <a href="{{ route('competencias.eliminar',$al->idalumno) }}" class="btn btn-outline-danger" onclick="return eliminar();" title="Eliminar Alumno"><i class="fas fa-trash-alt"></i></a>
                                    @else
                                         <a href="{{ route('alumnos.show',$al->idalumno) }}" class="btn btn-outline-info" title="Ver datos del alumno"><i class="far fa-eye"></i></a>
                                        @if($user->permiso==1)
                                            <a href="{{ route('alumnos.financiero',$al->idalumno) }}" class="btn btn-outline-success" title="Historial Financiero"><i class="fa fa-money-bill"></i></a>
                                        @endif
					<a href="{{ route('alumnos.edit',$al->idalumno) }}" class="btn btn-outline-warning" title="Editar Alumno"><i class="fas fa-edit"></i></a>
                                        <a href="{{ route('alumnos.kardex',$al->idalumno) }}" class="btn btn-outline-dark" title="Kardex del Alumno"><i class="fas fa-list"></i></a>

                                       <!-- <a href="{{ route('credencial.verCredencial',$al->idalumno) }}" class="btn btn-outline-warning" title="Credencial del Alumno"><i class="fas fa-id-card"></i></a>-->
                                       <a data-bs-toggle="modal" data-bs-target="#credencialalumno-{{$al->idalumno}}" class="btn btn-outline-warning" title="Credencial del Alumno"><i class="fas fa-id-card"></i></a>

					<a href="{{ route('alumnos.eliminar',$al->idalumno) }}" class="btn btn-outline-danger" onclick="return eliminar();" title="Eliminar Alumno"><i class="fas fa-trash-alt"></i></a>
                                   @endif
                                    </td>
                            </tr>
                            @endforeach
                        @else
                    <tr>
                        <td colspan="5" align="center">No hay alumnos registrados</td>
                    </tr>
                    @endif
                </tbody>
            </table>
        </div>
    </div>

@foreach($alumnos as $alumno)
<div class="modal fade" id="credencialalumno-{{$alumno->idalumno}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Generar credencial</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Seleccione el periodo de vigencia para el alumn@: {{$alumno->nombre}} {{$alumno->apellidos}}</p>
        
        <!-- Select para elegir la vigencia en meses -->
        <div class="mb-3">
            <label for="vigencia{{$alumno->idalumno}}" class="form-label">Vigencia (en meses)</label>
            <select class="form-select" id="vigencia{{$alumno->idalumno}}" name="vigencia">
                <option value="6">6 Meses</option>
                <option value="12">12 Meses (1 Año)</option>
                <option value="24">24 Meses (2 Años)</option>
                <option value="36">36 Meses (3 Años)</option>
                <option value="48">48 Meses (4 Años)</option>
                <option value="60">60 Meses (5 Años)</option>
            </select>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        
        <!-- Formulario que envía la información -->
        <form action="{{ route('credencial.verCredencialVigencia', $alumno->idalumno) }}" method="POST">
            @csrf
            <input type="hidden" name="vigencia" id="vigencia-input{{$alumno->idalumno}}" value="">
            <button type="submit" class="btn btn-primary" onclick="setVigencia({{$alumno->idalumno}})">Generar</button>
        </form>
      </div>
    </div>
  </div>
</div>
@endforeach

<script>
    // Función para capturar la selección del select y enviarla al formulario antes de enviarlo
    function setVigencia(alumnoId) {
        var select = document.getElementById('vigencia' + alumnoId);
        var vigenciaValue = select.options[select.selectedIndex].value;
        document.getElementById('vigencia-input' + alumnoId).value = vigenciaValue;

        document.getElementById('form-' + alumnoId).submit();
    }
</script>





@endsection