@extends('template.main')

@section('titulo','Bienvenido '.Auth::user()->name)
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="{{ asset('js/nombre.js') }}"></script>
<script>
    $( document ).ready(function() {
        $("#mes").change(function () {
            var mes = $("#mes").val();
            var year = $("#year").val();
            $.ajax({
                data: {"mes": mes,"year":year},
                type: "GET",
                url: "{{ route('home.validar') }}",

                beforeSend: function(){
                    $('#salidaDatos').html("<center><img src=\"{{ asset('img/loading.gif') }}\" style=\"max-width: 100px\"></center>");
                },

                success: function(valor){
                    valores(valor);
                    //$('#salidaDatos').html(valor);

                }
            });
        });
        $("#mes").change(function () {
            var mes = $("#mes").val();;

            var year = $("#year").val();
            $.ajax({
                data: {"mes": mes,"year":year},
                type: "GET",
                url: "{{ route('home.validar2') }}",

                beforeSend: function(){
                    $('#salidaDatos').html("<center><img src=\"{{ asset('img/loading.gif') }}\" style=\"max-width: 100px\"></center>");
                },

                success: function(response){
                   $('#salidaLista').html(response);

                }
            });
        });
    });
</script>

@section('contenido')
    @if(count($usuario)>=1)
        @foreach($usuario as $us)
        <div id="myModal" class="modal fade">
            <div class="modal-dialog modal-login">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Docente {{$us->name}}</h4>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                        <form method="post" action="{{ route('home.cambiarcontraseña') }}">
                            @csrf
                            <div class="form-group">
                                <div class="input-group">
                                    <label> Por motivos de seguridad, agregue una nueva contraseña: </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <input type="text" class="form-control" name="idUsuario" value="{{$us->id}}" hidden>
                                    <input type="password" class="form-control" name="password" placeholder="contraseña" required="required">
                                </div>
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn btn-primary btn-block btn-lg">Guardar</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    @else
        <div class="row">
            <div class="col-lg-12">
                <h1 class="contexto"><center>Bienvenido {{ Auth::user()->name }}</center></h1>
                <h3 class="contexto"><center>Es un gusto volver a verte.</center></h3>
            <div class="col-lg-12">
                @if(Auth::user()->tipo == null)
                    <center> <a href="{{route('calendarios.birthday')}}" class="btn btn-success">Ver cumpleaños </a> </center>
                @endif
            </div>
            </div>
            @if($user!=null)
                <div class="col-lg-12">
                    <br><br>
                    <h5 class="contexto"><center>Alumnos que no han pagado</center></h5>
                    <div class="col-lg-3 offset-3" style="float: left">
                        Mes:
                        @php  $fecha = 0; @endphp
                        <select name="mes" id="mes" class="form-control">
                            <option value="">Seleccione una opción</option>
                            @for($i = 1; $i <= 12; $i++)
                                @if($i == 1)
                                    @if($fecha!=$i)<option value="{{ $i }}">Enero @else <option value="{{ $i }}" selected>Enero @endif
                                @elseif($i == 2)
                                    @if($fecha!=$i)<option value="{{ $i }}">Febrero @else <option value="{{ $i }}" selected>Febrero @endif
                                @elseif($i == 3)
                                    @if($fecha!=$i)<option value="{{ $i }}">Marzo @else <option value="{{ $i }}" selected>Marzo @endif
                                @elseif($i == 4)
                                    @if($fecha!=$i)<option value="{{ $i }}">Abril @else <option value="{{ $i }}" selected>Abril @endif
                                @elseif($i == 5)
                                    @if($fecha!=$i)<option value="{{ $i }}">Mayo @else <option value="{{ $i }}" selected>Mayo @endif
                                @elseif($i == 6)
                                    @if($fecha!=$i)<option value="{{ $i }}">Junio @else <option value="{{ $i }}" selected>Junio @endif
                                @elseif($i == 7)
                                    @if($fecha!=$i)<option value="{{ $i }}">Julio @else <option value="{{ $i }}" selected>Julio @endif
                                @elseif($i == 8)
                                    @if($fecha!=$i)<option value="{{ $i }}">Agosto @else <option value="{{ $i }}" selected>Agosto @endif
                                @elseif($i == 9)
                                    @if($fecha!=$i)<option value="{{ $i }}">Septiembre @else <option value="{{ $i }}" selected>Septiembre @endif
                                @elseif($i == 10)
                                    @if($fecha!=$i)<option value="{{ $i }}">Octubre @else <option value="{{ $i }}" selected>Octubre @endif
                                @elseif($i == 11)
                                    @if($fecha!=$i)<option value="{{ $i }}">Noviembre @else <option value="{{ $i }}" selected>Noviembre @endif
                                @else
                                    @if($fecha!=$i)<option value="{{ $i }}">Diciembre @else <option value="{{ $i }}" selected>Diciembre @endif
                                        @endif</option>
                                    @endfor
                        </select>
                    </div>
                    <div class="col-lg-3" style="float: left">
                        Año:
                        @php  $fecha = date('Y'); @endphp
                        <select name="year" id="year" class="form-control">
                            <option value="">Seleccione una opción</option>
                            @for($i = 2010; $i <= date("Y"); $i++)
                                @if($fecha!=$i)
                                <option value="{{ $i }}">{{ $i }}</option>
                                @else
                                <option value="{{ $i }}" selected>{{ $i }}</option>
                                @endif
                            @endfor
                        </select>
                        <input name="mesA" id="mesA" type="text" value="{{date('n')}}" hidden>
                    </div>
                </div>
                <div class='col-lg-6 offset-3' id='container' style='width:100%; height:400px;'></div>
                <div class="col-lg-6 offset-3" id="salidaDatos" hidden></div>
                <div class="col-lg-6 offset-3" id="salidaLista"></div>
            @endif
        </div>
    @endif
@endsection
<script>
    $( document ).ready(function() {
        $('#myModal').modal('toggle')
    });
</script>


<script>
    function valores(valor){
        var datos = valor.split(',');
        var dato1 = datos[0].replace(/[^0-9]+/g, "");
        var dato2 = datos[1].replace(/[^0-9]+/g, "");
        var x = Number(dato1);
        @php
        $alumnosInv = \App\Alumno::
            where('competencia',null)
            ->where('status', 1)->where('estatus','<',4)
            ->pluck('idalumno');
        $contador = count($alumnosInv);
        @endphp

        var xx= Number({{$contador}});
        var y = Number(xx-x-dato2);
        var z = Number(dato2);
        Highcharts.chart('container', {
            chart: {
                type: 'bar',
            },
            title: {
                text: 'Pagos'
            },
            xAxis: {
                categories: ['Estado']
            },
            yAxis: {
                title: {
                    text: 'Alumnos'
                }
            },
            series: [{
                name: 'Sin Pagar',
                data: [x],
                color: 'red',
            }, {
                name: 'Pagado',
                data: [y],
                color: '#00fa9a',
            }, {
                name: 'Abono',
                data: [z],
                color: '#ffe817',
            }
            ],
        });
    };

</script>
<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 ><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>