@extends('layouts.app')

@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-receipt menu-icon"></i>
        </span> nominas </h3>
    <nav aria-label="breadcrumb">
        <ul class="breadcrumb">
            <li class="breadcrumb-item active" aria-current="page">
                <a href="{!! URL('/nominaGenerales')!!}"><span>vista general</span> </a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
                <span>detalle nomina</span><i class="mdi mdi-alert-circle-outline icon-sm text-primary_local align-middle"></i>
            </li>
        </ul>
    </nav>
</div>

<div class="row">
    <div class="col-12 grid-margin">
        <div class="card">
            <div class="card-body">
                <div class="clearfix">
                    <div class="float-left">
                        <h4 class="card-title">detalle de nomina</h4>
                        <p class="card-description"> <strong>Periodo que comprende </strong>{!! date_format($nominaGenerales->fecha_inicio,"Y/m/d"); !!} -- {!! date_format($nominaGenerales->fecha_fin,"Y/m/d"); !!}</p>
                    </div>


                    <div id="visit-sale-chart-legend" class="rounded-legend legend-horizontal legend-top-right float-right">
                        <ul>
                            <li>
                                <a href="{!! URL('/nomina_pdf/'.$nominaGenerales->id)!!}">
                                    <i class="mdi mdi mdi-file-pdf mdi-24px color_principal"></i>PDF
                                </a>
                                </li>
                            <!-- <li><i class="mdi mdi mdi-file-excel mdi-24px color_principal"></i>EXCEL</li> -->
                        </ul>
                    </div>
                </div>


                <div class="espacio_vertical"></div>
                
                <div>
                    <h2 class="text-right my-5">
                        Gran Total: $ {!! money_format("%.2n", $grantotal); !!}
                    </h2>
                </div>

                @include('flash::message')
                <div class="table-responsive">
                    @include('nomina_generales.detelle_nomina_table')
                </div>
                <div class="espacio_vertical"></div>

                <a href="{!! route('nominaGenerales.index') !!}" id="btnRegresar" class="btn btn-secondary">Regresar</a>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="ver_retardos_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <form action="{!! URL('/update_estatus') !!}" method="POST" role="form">
            {{ csrf_field() }}
            <input type="hidden" name="id_nomina" id="id_nomina">
            <input type="hidden" name="id_nomina_detalle" id="id_nomina_detalle">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Retardos</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="col-lg-12 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body" id="tabla_retardos"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btnCancelModal" data-dismiss="modal">cerrar</button>
                    <button type="submit" class="btn btn-primary_local btnAcceptModal">aceptar</button>
                </div>
            </div>
        </form>
    </div>

</div>
@endsection


@section('scripts')

<script>
    var fecha_inicio = '{!! date_format($nominaGenerales->fecha_inicio,"Y-m-d"); !!}';
    var fecha_fin = '{!! date_format($nominaGenerales->fecha_fin,"Y-m-d"); !!}';


    $(document).ready(function() {
        $('.modal_retardos').on('click', function() {
            var id_empleado = $(this).attr("data-id");
            var id_nomina_detalle = $(this).attr("data-detalle");
            $('#id_nomina_detalle').val(id_nomina_detalle);
            var id_nomina = $(this).attr("data-nomina");
            $('#id_nomina').val(id_nomina);

            $.ajax({
                url: url_dinamica + "/api/asistencias/retardos/" + id_empleado + "/" + fecha_inicio + "/" + fecha_fin,
                type: "GET",
                dataType: "json",
                success: function(data) {
                    var tabla = armaTabla(data.data);
                    $('#tabla_retardos').html(tabla);
                },
                error: function(xhr, estado, error) {
                    console.log(xhr);
                    console.log(estado);
                    console.log(error);
                }
            });
        });
    });


    function armaTabla(data) {
        var table = '<table class="table"><thead><tr><th>Nombre</th><th>Fecha</th><th>Hora</th><th>Comentario</th><th>Estatus</th></tr></thead><tbody>';

        data.forEach(function(item, index) {
            console.log(index);
            console.log(item);
            table += '<tr>' +
                '<td>' + item.id + '</td>' +
                '<td>' + item.fecha + '</td>' +
                '<td>' + item.hora + '</td>' +
                '<td>' + item.comentario + '</td>' +
                '<td>' +
                '<select name="estatus_' + item.id + '" id="estatus_' + item.id + '">' +
                '<option value="Aplicar"' + ((item.estatus == "Aplicar") ? "selected" : " ") + '>Aplicar</option>' +
                '<option value="Cancelar"' + ((item.estatus == "Cancelar") ? "selected" : " ") + '>Cancelar</option>' +
                '<option value="Validacion"' + ((item.estatus == "Validacion") ? "selected" : " ") + '>Validación</option>' +
                '</select>' +
                '</td>' +
                '</tr>';
        });

        table += "</tbody></table>"
        return table;
    }
</script>

@endsection