@extends('layouts.app')

@section('css')
<link rel="stylesheet" type="text/css" href="{!! asset('files_custom/bower_components/datatables.net-bs4/css/dataTables.bootstrap4.min.css') !!}">

<link rel="stylesheet" type="text/css" href="{!! asset('files_custom/bower_components/bootstrap-daterangepicker/css/daterangepicker.css') !!}" />

<link rel="stylesheet" type="text/css" href="{!! asset('css/locales.css') !!}" />

<link rel="stylesheet" type="text/css" href="{!! asset('files_custom/bower_components/switchery/css/switchery.min.css') !!}">
<style>
    .card {
        border: 0;
        background: #fff;
        font-family: 'Poppins';
        color#67666a;
        padding: 50px 50px;
    }

    .card h4 {
        border: 0;
        background: #fff;
        font-family: 'Poppins';
        color#67666a;
    }

    .btn-info {
        background-color: #e15aa9;
        border-color: #e15aa9;
        font-family: 'Poppins';
        font-weight: 400;
        font-size: 13px;
        border-radius: 0px;
        color: #fff;
    }
</style>
@endsection

@section('content')



<div class="page-header">
    <h3 class="page-title">
        <span class="page-title-icon bg-gradient-primary_local text-white mr-2">
            <i class="mdi mdi-format-list-bulleted-type menu-icon"></i>
        </span> asistencias </h3>

    <nav aria-label="breadcrumb">
        <ul class="breadcrumb">
            <li class="breadcrumb-item active" aria-current="page">
                <span></span>vista general <i class="mdi mdi-alert-circle-outline icon-sm text-primary_local align-middle"></i>
            </li>
        </ul>
    </nav>
</div>



<div class="card">
    <div class="clearfix"></div>

    @include('flash::message')

    <div class="clearfix"></div>
    <div class="box box-primary">
        <div class="box-body">
            <div class="page-body">
                <div class="row">
                    <div class="col-sm-4 col-xl-4 m-b-30">
                        <div class="card-block">
                            <h4 class="card-title">Selecciona un rango de fechas</h4>
                            <input type="text" name="daterange" id="daterange" class="form-control" value="08/01/2019 - 08/31/2019" />
                        </div>
                    </div>

                    <div class="col-sm-4">
                        <div class="card-block">
                            <h4 class="card-title">tipo de Agrupado</h4>
                            <label for="">
                                <input type="radio" name="ordenanmiento" value="por_persona" checked="checked">
                                <i class="helper"></i>Por personas
                            </label>
                            <br />
                            <label for="">
                                <input type="radio" name="ordenanmiento" value="por_dia">
                                <i class="helper"></i>Por día
                            </label>
                            <br />
                            <label for="">
                                <input type="radio" name="ordenanmiento" value="individual">
                                <i class="helper"></i>Individual
                            </label>
                        </div>
                    </div>

                    <div class="col-sm-4">
                        <div id="sel_empleado_card" class="card-block" style="display:none">
                            <h4 class="sub-title">Por personal</h4>
                            <select name="sel_empleado" id="sel_empleado">
                                <option value="">Selecciona un colaborador</option>
                                @foreach($empleados as $empleado)
                                <option value="{!! $empleado->usuario->id !!}">
                                    {!! $empleado->usuario->name !!}
                                    {!! $empleado->usuario->a_paterno !!}
                                    {!! $empleado->usuario->a_materno!!}
                                </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-sm-12">
                        <div class="card-block float-right">
                            <button class="btn btn-primary_local" onclick="filtrado()">Filtrar</button>
                        </div>
                    </div>
                </div>



            </div>

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

<div class="card" id="content-taps"></div>



</div>
@endsection

@section('scripts')
<script src="{!! asset('files_custom/bower_components/datatables.net/js/jquery.dataTables.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-buttons/js/dataTables.buttons.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-buttons/js/buttons.print.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-buttons/js/buttons.html5.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-bs4/js/dataTables.bootstrap4.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-responsive/js/dataTables.responsive.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') !!}" type="text/javascript"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<script type="text/javascript" src="{!! asset('files_custom/bower_components/bootstrap-daterangepicker/js/daterangepicker.js') !!}"></script>


<script type="text/javascript" src="{!! asset('files_custom/bower_components/switchery/js/switchery.js')!!}"></script>


<script>
    var fecha_inicio;
    var fecha_final;
    var id_empleado = 0;
    var url_dinamica = "{!! URL::to('/') !!}";

    function filtrado() {

        var tipo_de_agrupado = $('input[type=radio][name=ordenanmiento]:checked')[0].value;

        if (tipo_de_agrupado == 'individual') {
            id_empleado = $("#sel_empleado option:selected").val();
        }

        var parametros = {
            fecha_inicio: fecha_inicio,
            fecha_final: fecha_final,
            tipo_de_agrupado: tipo_de_agrupado,
            id_empleado: id_empleado,
        };

        console.log(url_dinamica);
        console.log(parametros);
        console.log(url_dinamica + "/api/asistencia/filtros", parametros);

        $.get(url_dinamica + "/api/asistencia/filtros", parametros)
            .done(function(data) {
                console.log(data);
                var taps = armar_taps(tipo_de_agrupado, data.data);
                // TODO: poner las taps
                $('#content-taps').html(taps);
            });
    }

    function armar_taps(tipo_de_agrupado, data) {
        var taps = '';
        //console.log(data);

        var agrupado = ''



        var groupBy = function(xs, key) {
            return xs.reduce(function(rv, x) {
                (rv[x[key]] = rv[x[key]] || []).push(x);
                return rv;
            }, {});
        };

        if (tipo_de_agrupado == "por_dia") {
            //agrupado = _.mapValues(_.groupBy(data, "fecha"), x => x.map(y => _.omit(y, "fecha") )) ;
            agrupado = groupBy(data, 'fecha')
        } else {
            //agrupado = _.mapValues(_.groupBy(data, "user_id"), x => x.map(y => _.omit(y, "user_id") )) ;
            agrupado = groupBy(data, 'user_id')
        }

        console.log('agrupado +++++++++++++++++++++');
        console.log(agrupado);


        taps += '<div class="card-block"><div class="sub-title">Lista de asistencias</div>';

        var taps_ul = ' <ul class="nav nav-tabs md-tabs tabs-left b-none" role="tablist">';

        var taps_content = ' <div class="tab-content tabs-left-content card-block tab-content-vertical">';

        var cont = 0;
        console.log(agrupado);

        var tab_completa = '<div class="card-body"><h4 class="card-title">Vertical Tabs</h4><div class="row">';

        var cabecera = '<div class="col-4"><ul class="nav nav-tabs nav-tabs-vertical" role="tablist">';

        var contenido = '<div class="col-8"><div class="tab-content tab-content-vertical">';

        var taps_content2 = '';
        for (var item in agrupado) {

            console.log('item');
            console.log(item);
            console.log(agrupado[item]);
            console.log(agrupado[item].length);


            contenido += '<div class="tab-pane fade" id="home-' + cont + '" role="tabpanel" aria-labelledby="home-tab">';

            if (tipo_de_agrupado == "por_dia") {
                cabecera += '<li class="nav-item"><a class="nav-link" id="home-tab ' + cont + '" data-toggle="tab" href="#home-' + cont + '" role="tab" aria-controls="home" aria-selected="false"> ' + item + ' <i class="mdi mdi-home-outline text-info ml-2"></i></a></li>';

                taps_content2 += '<table class="table table-hover"><thead><tr><th>Persona</th><th>hora</th></tr></thead><tbody>';
                for (let index = 0; index < agrupado[item].length; index++) {
                    taps_content2 += '<tr><td>' + agrupado[item][index].usuario.name + ' ' + agrupado[item][index].usuario.a_paterno + '</td><td>' + agrupado[item][index].hora + '</td></tr>'
                }
            } else {
                cabecera += '<li class="nav-item"><a class="nav-link" id="home-tab ' + cont + '" data-toggle="tab" href="#home-' + cont + '" role="tab" aria-controls="home" aria-selected="false"> ' + agrupado[item][0].usuario.name + ' ' + agrupado[item][0].usuario.a_paterno + ' <i class="mdi mdi-home-outline text-info ml-2"></i></a></li>';


                taps_content2 += '<table class="table table-hover"><thead><tr><th>Fecha</th><th>hora</th></tr></thead><tbody>';
                for (let index = 0; index < agrupado[item].length; index++) {
                    taps_content2 += '<tr><td>' + agrupado[item][index].fecha + '</td><td>' + agrupado[item][index].hora + '</td></tr>'
                }
            }

            taps_content2 += '</tbody></table>';
            //taps_content2  += '</div></div></div></div>';

            contenido += taps_content2 + '</div>';
            taps_content2 = '';

            cont++;
        }

        taps_ul += '</ul>';
        taps = taps + taps_ul + taps_content + '</div></div>';

        cabecera += '</ul></div>';
        contenido += '</div></div>'
        tab_completa += cabecera + contenido + '</div></div>';

        console.log(taps);
        console.log('cabecera ++++++++++++++++++');
        console.log(tab_completa);

        return tab_completa;
    }


    $(document).ready(function() {
        $('#asistencias-table').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"
                }
            }
        });

        $('input[name="daterange"]').daterangepicker({}, function(start, end, label) {
            fecha_inicio = start.format('YYYY-MM-DD');
            fecha_final = end.format('YYYY-MM-DD');
        });

        $('input[type=radio][name=ordenanmiento]').change(function() {
            if (this.value == 'individual') {
                $('#sel_empleado_card').show();
            } else {
                $('#sel_empleado_card').hide();
            }
        });
    });
</script>
@endsection