@extends('layouts.menu')

@section('title', "Nómina del ".$fechaInicio->format('d')." al ".$fechaFin->format('d')." de ".$fechaFin->monthName." del ".$fechaFin->format('Y'))

@section('contenido')
    {{-- Nómina del $fechaInicio->format('d') al $fechaFin->format('d') de $fechaFin->monthName del $fechaFin->format('Y') --}}

    <div class="card bg-light shadow">
        <div class="card-header card-header-pr77 mb-3">
            <div class="row justify-content-between">
                <div class="col-8">
                    <h2><b>Nómina del {{$fechaInicio->format('d')}} al {{$fechaFin->format('d')}}
                            de {{$fechaFin->monthName}} del {{$fechaFin->format('Y')}}</b></h2>
                </div>
                <div class="col-2" style="display: flex; justify-content: end;">
                    <a class="btn btn-lg btn-primary"
                       href="{{route('Nomina.generarNominaPDF',base64_encode($fecha->format('Y-m-d')))}}">
                        <i class="fa-solid fa-file-pdf"></i>
                        PDF
                    </a>
                </div>
            </div>


        </div>
        <div class="card-body">


            {{-- Filtros --}}
            <div class="row">
                <div class="col-sm-6 col-md-4 col-lg-2 my-2" style=" display: flex;  justify-content: end; ">
                </div>
                <h3 class="fs-title-secondary"><i class="fas fa-filter"></i> Filtros:
                </h3>
                <hr class="separator">
                <div class="col-sm-4 col-md-3 col-lg-1 my-2">
                    <div class="btn-group">
                        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
                                aria-expanded="false">
                            Servicios
                        </button>
                        <ul class="dropdown-menu dropdown-menu-dark" style="max-height: 300px; overflow: auto;">
                            @foreach ($servicios as $servicio)
                                <li class="mx-2">
                                    <div class="d-flex align-items-center dropdown-item">
                                        <input class="filtros mr-2" type="checkbox" name="servicios"
                                               id="servicio_{{str_replace(' ', '_', $servicio)}}"
                                               onChange="filtrar_tabla()" value="{{$servicio}}">
                                        <label class="form-check-label fontS12"
                                               for="servicio_{{str_replace(' ', '_', $servicio)}}"> {{$servicio}} </label>
                                    </div>
                                </li>
                            @endforeach

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

                <div class="col-sm-4 col-md-3 col-lg-1 my-2">
                    <div class="btn-group">
                        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
                                aria-expanded="false">
                            Puertas
                        </button>
                        <ul class="dropdown-menu dropdown-menu-dark" style="max-height: 300px; overflow: auto;">
                            @foreach ($puertas as $puerta)
                                <li class="mx-2">
                                    <div class="d-flex align-items-center dropdown-item">
                                        <input class="filtros mr-2" type="checkbox"
                                               id="puerta_{{str_replace(' ', '_', $puerta)}}" name="puertas"
                                               onChange="filtrar_tabla()" value="{{$puerta}}">
                                        <label class="form-check-label fontS12"
                                               for="puerta_{{str_replace(' ', '_', $puerta)}}"> {{$puerta}} </label>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>

            </div>
            <br>
            <div class="">
                <table id="table_id" class="table table-striped compact ">
                    <thead class="table-dark">
                    <tr>
                        <th width="20px">ID</th>
                        <th width="120px">Servicio</th>
                        <th width="120px">Puerta</th>
                        <th width="100px">Elemento</th>
                        <th width="20px">Puesto</th>
                        <th width="20px">Turnos</th>
                        <th width="95px">Sueldo Quincenal</th>
                        <th width="95px">Sueldo Mensual</th>
                        <th width="80px">Sueldo Diario</th>
                        <th width="80px">Bono</th>
                        <th width="80px">Sueldo Diario IMSS</th>
                        <th width="80px">Sueldo Quincenal IMSS</th>
                        <th width="80px">Capacitación Diaria</th>
                        <th width="80px">Capacitación Quincenal</th>
                        <th width="50px">Banco</th>
                        <th width="80px">No. Tarjeta</th>
                        <th width="20px">IMSS</th>
                        <th width="50px">Faltas</th>
                        <th width="50px">Retardos</th>
                        <th width="50px">Descuento Faltas</th>
                        <th width="50px">Descuento Retardos</th>
                        <th width="50px">Dobletes</th>
                        <th width="50px">Adicionales</th>
                        <th width="50px">Pago IMSS</th>
                        <th width="50px">Pago Capacitación</th>
                        <th width="100px">Total a pagar</th>
                        <th width="50px">Porcentaje</th>
                        <th>Observaciones</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($empleados as $key => $empleado)
                        <tr>
                            <td>{{$empleado->id}}</td>
                            <td>{{$empleado->servicio}}</td>
                            <td>{{$empleado->puerta}}</td>
                            <td>{{$empleado->nombre}} {{$empleado->apellido_paterno}} {{$empleado->apellido_materno}}</td>
                            <td align="center">{{$empleado->puesto}} </td>
                            <td align="center">{{8-($empleado->Faltas/1.875)}} </td>
                            <td>
                                <span style="@if($empleado->sueldo_quincenal>0) Color:green; font-weight: bold;@endif">$ {{number_format($empleado->sueldo_quincenal, 2, '.', ','); }}</span>
                            </td>
                            <td>$ {{number_format($empleado->sueldo_quincenal*2, 2, '.', ','); }} </td>
                            <td>$ {{number_format(($empleado->sueldo_diario), 2, '.', ','); }} </td>
                            <td>
                                <span style="@if($empleado->BonoRecibido>0) Color:green; font-weight: bold;@endif">$ {{number_format($empleado->BonoRecibido, 2, '.', ','); }}</span>
                            </td>
                            <td>$ {{number_format($empleado->sueldo_IMSS, 2, '.', ','); }} </td>
                            <td>$ {{number_format($empleado->sueldo_quincenal_IMSS, 2, '.', ','); }} </td>
                            <td>*</td>
                            <td>*</td>
                            <td>{{$empleado->banco}}</td>
                            <td>{{$empleado->no_tarjeta}} </td>
                            <td align="center">{{$empleado->IMSS}} </td>
                            <td align="center">{{$empleado->Faltas }} </td>
                            <td align="center">{{$empleado->Retardos }} </td>
                            <td>
                                <span style="@if($empleado->Faltas>0) Color:red; font-weight: bold;@endif">$ {{number_format($empleado->sueldo_diario*$empleado->Faltas, 2, '.', ',');  }}</span>
                            </td>
                            <td>
                                <span style="@if($empleado->descuento_retardos>0) Color:red; font-weight: bold;@endif">$ {{number_format($empleado->descuento_retardos, 2, '.', ',');  }}</span>
                            </td>
                            <td>
                                <span style="@if($empleado->dobletes>0) Color:green; font-weight: bold; @endif">$ {{number_format($empleado->dobletes, 2, '.', ',');  }}  </span>
                            </td>
                            <td>
                                <span style="@if($empleado->adicionales>0) Color:green; font-weight: bold;@endif">$ {{number_format($empleado->adicionales, 2, '.', ',');  }} </span>
                            </td>
                            <td>$ {{number_format($empleado->sueldo_quincenal_IMSS, 2, '.', ','); }} </td>
                            <td>$ {{number_format($empleado->total_capacitacion, 2, '.', ','); }} </td>
                            <td><b>$ {{number_format($empleado->total_pagar, 2, '.', ',');  }}</b></td>
                            <td>{{number_format($empleado->porcentaje_capacitacion, 2, '.', ','); }} %</td>

                            <td align="center" id="contenedorAsistencia_{{$empleado->id}}">

                                @foreach ($empleado->dias_laborados as $Concepto => $valor)
                                    {{-- @if($Concepto=="Falta"||$Concepto=="Retardos"||$Concepto=="Doblete"||$Concepto=="Alta") --}}
                                    @if($Concepto!="Asistencia")
                                        {{-- Tengo que hacer un dropdown donde muestre las fechas donde se hizo cada cosa para las observaciones --}}

                                        <div class="btn-group m-2">
                                            <button type="button" class="btn btn-sm card-asistencia dropdown-toggle"
                                                    data-bs-toggle="dropdown" aria-expanded="false"
                                                    style="width: 130px;">
                                                {{$Concepto?$Concepto:'Asistencia'}} ({{sizeOf($valor)}})
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-dark">
                                                @foreach ($valor as $dia)
                                                    <li>
                                                        <a class="dropdown-item"
                                                           href="{{route('Dashboard',base64_encode($dia->fecha))}}"
                                                           target="_blank"><span
                                                                    style="Color:{{$dia->color}};"><b>{{$dia->nomenclatura?$dia->nomenclatura:'A'}}</b></span>
                                                            - {{\Carbon\Carbon::parse($dia->fecha)->format('d / m / Y')}}
                                                            <span><small>{{$dia->comentario}}</small></span></a>
                                                    </li>
                                                @endforeach

                                            </ul>
                                        </div>
                                    @endif
                                @endforeach

                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

@stop

@section('scripts')
    <script>
        $(document).ready(function () {
            CrearTabla('table_id');

        });

        function filtrar_tabla() {
            var table = $('#table_id').dataTable();
            var servicios = $('input:checkbox[name="servicios"]:checked').map(function () {
                return this.value;
            }).get().join('|');
            //filter in column 0, with an regex, no smart filtering, no inputbox,not case sensitive
            //console.log("----------estados------------");
            //console.log(estados);
            table.fnFilter(servicios, 1, true, false, false, false);
            var puertas = $('input:checkbox[name="puertas"]:checked').map(function () {
                return this.value;
            }).get().join('|');
            //console.log("----------conceptos------------");
            //console.log(conceptos);
            table.fnFilter(puertas, 2, true, false, false, false);

        }
    </script>
@stop