@extends('template.main')

@section('titulo','Reporte de adeudos Generales')

@section('cabecera')
    <script src="{{ asset('js/Chart.min.js') }}"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    @php
        $carrera = \App\Carrera::all();
    @endphp
    <script>
        $(document).ready(function () {
            $("#validacion").submit(function(e){
                e.preventDefault();
                $.ajax({
                    data: $(this).serialize(),
                    type: "POST",
                    url: "{{ route('reportes.adeudosBusquedaGen') }}",
                    beforeSend: function () {

                        $('#contenedor1').html("<center><p>Por favor espere. La información se encuentra descargando.</p><img src=\"{{ asset('img/loading.gif') }}\" style=\"max-width: 100px\"></center>");
                    },

                    success: function (response) {
                        var html = '';
                        html += '<table id="contenedor" style="background: #fff; font-size: 12px" class="table table-hover DataTable">';
                        html += '<thead>';
                        html += '<tr>';
                        html += '<th>ID</th>';
                        html += '<th>Alumno</th>';
                        html += '<th>Carrera</th>';
                        html += '<th>Generaci&oacute;n</th>';
                        html += '<th> </th>';
                        html += '</tr>';
                        html += '</thead>';
                        html += '<tfoot style="display: table-header-group;">';
                        html += '<tr role="row" class="odd">';
                        html += '<th>ID</th>';
                        html += '<th>Alumno</th>';
                        html += '<th>Carrera</th>';
                        html += '<th>Generaci&oacute;n</th>';
                        html += '<th> </th>';
                        html += '</tr>';
                        html += '</tfoot>';
                        html += '<tbody>';

                        $.each(response, function (index, item) {
                            html += '<tr>';
                            html += '<td>' + item.idalumno + '</td>';
                            html += '<td>' + item.nombre + ' '+ item.apellidos + '</td>';
                            html += '<td>' + item.carrera + '</td>';
                            html += '<td>' + item.generacion + '</td>';
                            html += '<td><button class="btn btn-outline-info show-modal" data-idalumno="' + item.idalumno + '" data-mi="' + item.mi + '" data-yi="' + item.yi + '" data-mf="' + item.mf + '" data-yf="' + item.yf + '" title="Ver datos del alumno"><i class="far fa-eye"></i></button></td>';
                            html += '</tr>';
                        });

                        html += '</tbody>';
                        html += '</table>';

                        $('#contenedor1').html(html);

                        $('#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 ><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>' )
                                    } );
                                } );
                            }
                        });

                        $('.show-modal').click(function () {
                            var idalumno = $(this).data('idalumno');
                            var mi = $(this).data('mi');
                            var yi = $(this).data('yi');
                            var mf = $(this).data('mf');
                            var yf = $(this).data('yf');

                            $.ajax({
                                type: 'GET',
                                url: "/controlescolar/iitec/public/admin/reportes/adeudos/show/" + idalumno + "/" + mi + "/" + yi + "/" + mf + "/" + yf,

                                data: {
                                    idalumno: idalumno,
                                    mi: mi,
                                    yi: yi,
                                    mf: mf,
                                    yf: yf
                                },
                                success: function (response) {
console.log(response);
                                    var html = '';
                                    html += '<center><h5>Adeudo de Colegiaturas</h5></center>';
                                    html += '<table style="background: #fff; font-size: 12px;" class="table table-hover">';
                                    html += '<thead>';
                                    html += '<th>ID</th>';
                                    html += '<th>Debe</th>';
                                    html += '<th>Concepto</th>';
                                    html += '</thead>';
                                    html += '<tbody>';

                                    var meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];

                                    $.each(response, function (index, item) {
                                        if (item.concepto == 3)
                                        {
                                            html += '<tr>';
                                            html += '<td>' + item.idAlumno + '</td>';
                                            var fecha = new Date(item.fecha);
                                            fecha.setDate(1);
                                            fecha.setMonth(fecha.getMonth() + 1);

                                            var mes = meses[fecha.getMonth()];
                                            var anio = fecha.getFullYear();

                                            html += '<td>' + mes + ' ' + anio + '</td>';
                                            html += '<td>Colegiatura</td>';
                                            html += '</tr>';
                                        }
                                    });

                                    html += '</tbody>';
                                    html += '</table>';



                                    html += '<center><h5>Re-Inscripciones No Pagadas</h5></center>';
                                    html += '<table style="background: #fff; font-size: 12px;" class="table table-hover">';
                                    html += '<thead>';
                                    html += '<th>ID</th>';
                                    html += '<th>Mes</th>';
                                    html += '<th>Concepto</th>';
                                    html += '</thead>';
                                    html += '<tbody>';

                                    var meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];

                                    $.each(response, function (index, item) {
                                        if (item.concepto == 2)
                                        {
                                            html += '<tr>';
                                            html += '<td>' + item.idAlumno + '</td>';
                                            var fecha = new Date(item.fecha);
                                            fecha.setDate(1);
                                            fecha.setMonth(fecha.getMonth() + 1);

                                            var mes = meses[fecha.getMonth()];
                                            var anio = fecha.getFullYear();

                                            html += '<td>' + mes + ' ' + anio + '</td>';
                                            html += '<td>Re-Inscripci&oacute;n</td>';
                                            html += '</tr>';
                                        }
                                    });

                                    html += '</tbody>';
                                    html += '</table>';




                                    $('#respuesta-modal').html(html); // Actualizamos el contenido del modal
                                    $('#myModal').modal('show');
                                },
                                error: function (xhr, status, error) {
                                    // Manejo de errores
                                    console.log(xhr.responseText);
                                }
                            });
                        });


                    },
                    error: function () {
                        $('#contenedor1').html("Error al descargar la información.");
                    }
                });

            });
        });
    </script>
@endsection

@section('contenido')
    <div class="row" style="margin: 10px;">
        <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>
                    <li class="breadcrumb-item">Reportes</li>
                    <li class="breadcrumb-item active" aria-current="page"><i class="fas fa-hand-holding-usd"></i> Reporte de adeudos</li>
                </ol>
            </nav>
            <hr>
        </div>
        <div class="col-lg-12">
            <h3 class="contexto"> <i class="fas fa-hand-holding-usd"></i> Reporte de adeudos</h3>
        </div>
        <div class="col-lg-12">
            <form method="post" id="validacion">
                @csrf
                <div class="row">
                    <div class="col-lg-3"  id="generacion">
                        <label>Generaci&oacute;n</label>
                        <select name="generacion" id="generacion" class="form-control">
                            <option>Seleccione una opci&oacute;n</option>
                            @foreach($generaciones as $g => $key){
				@if($key)
                                <option value="{{$key}}">{{$key}}</option>
				@endif
                            @endforeach
                            </select>
                    </div>

                    <div class="col-lg-12">
                        <br>
                        <button type="submit" style="float: right" class="btn btn-success">Buscar</button>
                    </div>
                </div>
            </form>
        </div>
        <div id="contenedor1" class="col-lg-12">

        </div>



        <script>
            $(document).ready(function () {
                $('#campo').daterangepicker({
                    "autoApply": true,
                    "locale": {
                        "format": "YYYY-MM-DD",
                        "separator": " - ",
                        "applyLabel": "Aplicar",
                        "cancelLabel": "Cancelar",
                        "fromLabel": "Desde",
                        "toLabel": "Hasta",
                        "customRangeLabel": "Custom",
                        "weekLabel": "S",
                        "daysOfWeek": [
                            "Do",
                            "Lu",
                            "Ma",
                            "Mi",
                            "Ju",
                            "Vi",
                            "Sa"
                        ],
                        "monthNames": [
                            "Enero",
                            "Febrero",
                            "Marzo",
                            "Abril",
                            "Mayo",
                            "Junio",
                            "Julio",
                            "Agosto",
                            "Septiembre",
                            "Octubre",
                            "Noviembre",
                            "Deciembre"
                        ],
                        "firstDay": 1
                    },
                    "startDate": "{{ date("Y-m-d") }}",
                    "endDate": "{{ date("Y-m-d", strtotime("+14 days")) }}"
                }, function(start, end, label) {
                    console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
                });
            });
        </script>

    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="myModalLabel">Resumen de Pagos.</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="respuesta-modal">
                    <!-- Aquí se mostrará la respuesta del AJAX -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
@endsection