@extends('template.layout')

@section('content')
    @include('sweet::alert')
    <h1 class="page-title">
        Reporte estadístico de asistencia
    </h1>
    <div class="portlet light portlet-fit portlet-datatable bordered">

        <div class="portlet-body">

            <div class="tabbable-custom nav-justified">
                <ul class="nav nav-tabs nav-justified">
                    <li class="active">
                        <a href="#tab_1_1_1" data-toggle="tab" aria-expanded="true" onclick="asistenciapersonal()">
                            Asistencia Personal </a>
                    </li>
                    <li class="">
                        <a href="#tab_1_1_2" data-toggle="tab" aria-expanded="false" onclick="asistenciaalumno()">
                            Asistencia Alumno </a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab_1_1_1">

                        <span class="caption-subject uppercase">Mes: </span>
                        <select class="bs-select form-control" id="selectMes">
                            @foreach($meses as $item)
                                <option value="{{$item->id}}">{{$item->nombre}}</option>
                            @endforeach
                        </select>

                        <div class=" row" style="padding-top: 3%;">
                            <div class="col-lg-12 ">
                                <div class="row">
                                    <div class="col-lg-6" style="text-align: center;">
                                        <span class="caption-subject font-green sbold uppercase"> Asistencias del personal </span>
                                        <div id="graphasistencia">
                                        </div>
                                        <div id="legend" class="donut-legend">
                                        </div>

                                    </div>

                                    <div class="col-lg-6" style="text-align: center;">
                                        <span class="caption-subject font-green sbold uppercase"> Personal con mas tardanzas </span>
                                        <div id="tbtardanza">
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>

                        <div class=" row" style="padding-top: 5%;">
                            <div class="col-lg-12 ">
                                <div class="row">

                                    <div class="col-lg-6" style="text-align: center;">
                                        <span class="caption-subject font-green sbold uppercase"> Personal con mas faltas </span>
                                        <div id="tbfaltas">
                                        </div>
                                    </div>

                                    <div class="col-lg-6" style="text-align: center;">
                                        <span class="caption-subject font-green sbold uppercase"> Personal con permiso</span>
                                        <div id="tbpermisos">
                                        </div>
                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>
                    <div class="tab-pane" id="tab_1_1_2">
                        <span class="caption-subject uppercase">Mes: </span>
                        <select class="bs-select form-control" id="selectMestab2">
                            @foreach($meses as $item)
                                <option value="{{$item->id}}">{{$item->nombre}}</option>
                            @endforeach
                        </select>

                        <div class=" row" style="padding-top: 3%;">
                            <div class="col-lg-12 ">
                                <div class="row">
                                    <div class="col-lg-12" style="text-align: center;">
                                        <span class="caption-subject font-green sbold uppercase"> Carreras con alumnos con mayor número de faltas y tardanzas </span>
                                        <div class="col-lg-12" style="text-align: center;">
                                            <div id="graphasistenciaespecialidad">
                                            </div>
                                        </div>

                                    </div>


                                </div>

                            </div>

                        </div>

                        <div class=" row" style="padding-top: 5%;">
                            <div class="col-lg-12 ">
                                <div class="row">

                                    <div class="col-lg-6" style="text-align: center;">
                                        <span class="caption-subject font-green sbold uppercase"> Alumnos con mayor número de tardanzas </span>
                                        <div id="tbtardanzatab2">
                                        </div>
                                    </div>

                                    <div class="col-lg-6" style="text-align: center;">
                                        <span class="caption-subject font-green sbold uppercase"> Alumnos que excedieron el 30% de faltas</span>
                                        <div id="tbfaltastab2">
                                        </div>
                                    </div>


                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>


@endsection
@section('scripts')
    <script>

        $(document).ready(function () {

            var mes = $("#selectMes").val();
            var color_array = ['#03658C', '#7CA69E', '#F2594A', '#F28C4B', '#7E6F6A', '#36AFB2', '#9c6db2', '#d24a67', '#89a958', '#00739a', '#BDBDBD'];

            //--------------tab 1----------------

            //-------------Graph-----------------
            $.ajax({
                url: "{{ url('graph/asistencia') }}" + "/" + mes,
                type: "GET",
                success: function (result) {
                    $("#graphasistencia").empty();
                    $("#legend").empty();

                    if (result[0]["value"] == 0 && result[1]["value"] == 0 && result[2]["value"] == 0 && result[3]["value"] == 0) {
                        $("#graphasistencia").html("<div class='well' style='text-align: center;'> No se tiene información registrada</div>");
                    } else {
                        var browsersChart = Morris.Donut({
                            element: 'graphasistencia',
                            data: result,
                            colors: color_array,
                            resize: true,
                            parseTime:false
                        });
                        browsersChart.options.data.forEach(function (label, i) {
                            var legendItem = $('<span></span>').text(label['label']).prepend('<i>&nbsp;</i>');
                            legendItem.find('i').css('backgroundColor', browsersChart.options.colors[i]);
                            $('#legend').append(legendItem)
                        });
                    }
                }
            });
            //-------------Fin Graph-------------

            //---------------tablas--------------
            $.ajax({
                url: "{{ url('tabla/asistencia/tardanza') }}" + "/" + mes,
                type: "GET",
                success: function (result) {
                    $("#tbtardanza").empty();
                    $("#tbtardanza").html(result);
                }
            });

            $.ajax({
                url: "{{ url('tabla/asistencia/falta') }}" + "/" + mes,
                type: "GET",
                success: function (result) {
                    $("#tbfaltas").empty();
                    $("#tbfaltas").html(result);
                }
            });

            $.ajax({
                url: "{{ url('tabla/asistencia/permiso') }}" + "/" + mes,
                type: "GET",
                success: function (result) {
                    $("#tbpermisos").empty();
                    $("#tbpermisos").html(result);
                }
            });
            //---------------Fin tablas-------------

            //---------------Fin tab 1--------------


            //---------------tab 2---------------
            //-------------Graph-----------------
            $.ajax({
                url: "{{ url('graph/asistencia/especialidad') }}" + "/" + mes,
                type: "GET",
                success: function (result) {
                    $("#graphasistenciaespecialidad").empty();
                    if (result[0]["a"] == 0) {
                        $("#graphasistenciaespecialidad").html("<div class='well' style='text-align: center;'> No se tiene información registrada</div>");
                    } else {

                        var data = result;
                        var config = {
                            data: data,
                            xkey: 'y',
                            ykeys: ['a', 'b'],
                            labels: ['Falta', 'Tardanza'],
                            behaveLikeLine: true,
                            resize: true,
                            pointFillColors: ['#ffffff'],
                            pointStrokeColors: ['black'],
                            lineColors: ['gray', 'red'],
                            parseTime:false
                        };
                        config.element = 'graphasistenciaespecialidad';
                        Morris.Bar(config);
                        config.stacked = true;

                    }

                }
            });
            //-------------Fin Graph-------------
            //---------------tablas--------------
            $.ajax({
                url: "{{ url('tabla/asistencia/tardanza/alumno') }}" + "/" + mes,
                type: "GET",
                success: function (result) {
                    $("#tbtardanzatab2").empty();
                    $("#tbtardanzatab2").html(result);
                }
            });

            $.ajax({
                url: "{{ url('tabla/asistencia/falta/alumno') }}" + "/" + mes,
                type: "GET",
                success: function (result) {
                    $("#tbfaltastab2").empty();
                    $("#tbfaltastab2").html(result);
                }
            });
            //---------------Fin tablas-------------
            //---------------Fin tab 2--------------
        });

        $("#selectMes").change(function () {

            var mes = $("#selectMes").val();
            var color_array = ['#03658C', '#7CA69E', '#F2594A', '#F28C4B', '#7E6F6A', '#36AFB2', '#9c6db2', '#d24a67', '#89a958', '#00739a', '#BDBDBD'];

            $.ajax({
                url: "{{ url('graph/asistencia') }}" + "/" + mes,
                type: "GET",
                success: function (result) {
                    $("#graphasistencia").empty();
                    $("#legend").empty();

                    if (result[0]["value"] == 0 && result[1]["value"] == 0 && result[2]["value"] == 0 && result[3]["value"] == 0) {
                        $("#graphasistencia").html("<div class='well' style='text-align: center;'> No se tiene información registrada</div>");
                    } else {
                        var browsersChart = Morris.Donut({
                            element: 'graphasistencia',
                            data: result,
                            colors: color_array,
                            resize: true,
                            parseTime:false
                        });
                        browsersChart.options.data.forEach(function (label, i) {
                            var legendItem = $('<span></span>').text(label['label']).prepend('<i>&nbsp;</i>');
                            legendItem.find('i').css('backgroundColor', browsersChart.options.colors[i]);
                            $('#legend').append(legendItem)
                        });
                    }
                }
            });

            $.ajax({
                url: "{{ url('tabla/asistencia/tardanza') }}" + "/" + mes,
                type: "GET",
                success: function (result) {
                    $("#tbtardanza").empty();
                    $("#tbtardanza").html(result);
                }
            });

            $.ajax({
                url: "{{ url('tabla/asistencia/falta') }}" + "/" + mes,
                type: "GET",
                success: function (result) {
                    $("#tbfaltas").empty();
                    $("#tbfaltas").html(result);
                }
            });

            $.ajax({
                url: "{{ url('tabla/asistencia/permiso') }}" + "/" + mes,
                type: "GET",
                success: function (result) {
                    $("#tbpermisos").empty();
                    $("#tbpermisos").html(result);
                }
            });

        });

        $("#selectMestab2").change(function () {

            var mes = $("#selectMestab2").val();

            $.ajax({
                url: "{{ url('graph/asistencia/especialidad') }}" + "/" + mes,
                type: "GET",
                success: function (result) {
                    $("#graphasistenciaespecialidad").empty();

                    var data = result,
                        config = {
                            data: data,
                            xkey: 'y',
                            ykeys: ['a', 'b'],
                            labels: ['Falta', 'Tardanza'],
                            fillOpacity: 0.6,
                            hideHover: 'auto',
                            behaveLikeLine: true,
                            resize: true,
                            pointFillColors: ['#ffffff'],
                            pointStrokeColors: ['black'],
                            lineColors: ['gray', 'red'],
                            parseTime:false
                        };
                    config.element = 'graphasistenciaespecialidad';
                    Morris.Bar(config);
                    config.stacked = true;

                }
            });

            $.ajax({
                url: "{{ url('tabla/asistencia/tardanza/alumno') }}" + "/" + mes,
                type: "GET",
                success: function (result) {
                    $("#tbtardanzatab2").empty();
                    $("#tbtardanzatab2").html(result);
                }
            });

            $.ajax({
                url: "{{ url('tabla/asistencia/falta/alumno') }}" + "/" + mes,
                type: "GET",
                success: function (result) {
                    $("#tbfaltastab2").empty();
                    $("#tbfaltastab2").html(result);
                }
            });


        });

        function asistenciapersonal() {
            var mes = $("#selectMes").val();
            var color_array = ['#03658C', '#7CA69E', '#F2594A', '#F28C4B', '#7E6F6A', '#36AFB2', '#9c6db2', '#d24a67', '#89a958', '#00739a', '#BDBDBD'];

            //--------------tab 1----------------
            //-------------Graph-----------------
            $.ajax({
                url: "{{ url('graph/asistencia') }}" + "/" + mes,
                type: "GET",
                success: function (result) {
                    $("#graphasistencia").empty();
                    $("#legend").empty();

                    if (result[0]["value"] == 0 && result[1]["value"] == 0 && result[2]["value"] == 0 && result[3]["value"] == 0) {
                        $("#graphasistencia").html("<div class='well' style='text-align: center;'> No se tiene información registrada</div>");
                    } else {
                        var browsersChart = Morris.Donut({
                            element: 'graphasistencia',
                            data: result,
                            colors: color_array,
                            resize: true,
                            parseTime:false

                        });
                        browsersChart.options.data.forEach(function (label, i) {
                            var legendItem = $('<span></span>').text(label['label']).prepend('<i>&nbsp;</i>');
                            legendItem.find('i').css('backgroundColor', browsersChart.options.colors[i]);
                            $('#legend').append(legendItem)
                        });
                    }
                }
            });
            //-------------Fin Graph-------------

            //---------------tablas--------------
            $.ajax({
                url: "{{ url('tabla/asistencia/tardanza') }}" + "/" + mes,
                type: "GET",
                success: function (result) {
                    $("#tbtardanza").empty();
                    $("#tbtardanza").html(result);
                }
            });

            $.ajax({
                url: "{{ url('tabla/asistencia/falta') }}" + "/" + mes,
                type: "GET",
                success: function (result) {
                    $("#tbfaltas").empty();
                    $("#tbfaltas").html(result);
                }
            });

            $.ajax({
                url: "{{ url('tabla/asistencia/permiso') }}" + "/" + mes,
                type: "GET",
                success: function (result) {
                    $("#tbpermisos").empty();
                    $("#tbpermisos").html(result);
                }
            });
            //---------------Fin tablas-------------

            //---------------Fin tab 1--------------
        }

        function asistenciaalumno() {
            var mes = $("#selectMes").val();
            var color_array = ['#03658C', '#7CA69E', '#F2594A', '#F28C4B', '#7E6F6A', '#36AFB2', '#9c6db2', '#d24a67', '#89a958', '#00739a', '#BDBDBD'];
//---------------tab 2---------------
            //-------------Graph-----------------
            $.ajax({
                url: "{{ url('graph/asistencia/especialidad') }}" + "/" + mes,
                type: "GET",
                success: function (result) {
                    $("#graphasistenciaespecialidad").empty();

                    if (result.length == 0) {
                        $("#graphasistenciaespecialidad").html("<div class='well' style='text-align: center;'> No se tiene información registrada</div>");
                    } else {

                        var data = result;
                        var config = {
                            data: data,
                            xkey: 'y',
                            ykeys: ['a', 'b'],
                            labels: ['Falta', 'Tardanza'],
                            behaveLikeLine: true,
                            resize: true,
                            pointFillColors: ['#ffffff'],
                            pointStrokeColors: ['black'],
                            lineColors: ['gray', 'red'],
                            parseTime:false
                        };
                        config.element = 'graphasistenciaespecialidad';
                        Morris.Bar(config);
                        config.stacked = true;

                    }

                }
            });

            //-------------Fin Graph-------------
            //---------------tablas--------------
            $.ajax({
                url: "{{ url('tabla/asistencia/tardanza/alumno') }}" + "/" + mes,
                type: "GET",
                success: function (result) {
                    $("#tbtardanzatab2").empty();
                    $("#tbtardanzatab2").html(result);
                }
            });

            $.ajax({
                url: "{{ url('tabla/asistencia/falta/alumno') }}" + "/" + mes,
                type: "GET",
                success: function (result) {
                    $("#tbfaltastab2").empty();
                    $("#tbfaltastab2").html(result);
                }
            });
            //---------------Fin tablas-------------
            //---------------Fin tab 2--------------
        }

    </script>
@endsection