@extends('layouts.menu')

@section('title', 'Empleados Activos')

@section('contenido')

    <div class="card bg-light shadow-none p-3 mb-5 bg-light rounded">
        <div class="card-header card-header-pr77 mb-3">
            <div class="row justify-content-between">
                <div class="col-md-12">
                    <h2 class="text-center"><b>Empleados Activos</b></h2>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <h3 class="fs-title-secondary"><i class="fas fa-filter"></i> Filtros:
                </h3>
                <hr class="separator">
            </div>
            <div class="row">
                <div class="col-sm-4 col-md-3 col-lg-1 mr-3">
                    <div class="btn-group">
                        <button type="button" class="btn btn-secondary dropdown-toggle" data-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 mr-2">
                    <div class="btn-group">
                        <button type="button" class="btn btn-secondary dropdown-toggle" data-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 class="col-sm-4 col-md-3 col-lg-1 mr-2">
                    <div class="btn-group">
                        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
                                aria-expanded="false">
                            Turnos
                        </button>
                        <ul class="dropdown-menu dropdown-menu-dark" style="max-height: 300px; overflow: auto;">
                            @foreach ($turnos as $turno)
                                <li class="mx-2">
                                    <div class="d-flex align-items-center dropdown-item">
                                        <input class="filtros mr-2" type="checkbox"
                                               id="turno_{{str_replace(' ', '_', $turno)}}" name="turnos"
                                               onChange="filtrar_tabla()" value="{{$turno}}">
                                        <label class="form-check-label fontS12"
                                               for="turno_{{str_replace(' ', '_', $turno)}}"> {{$turno}} </label>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
            <br>
            <table id="tabla_listado_bajas" class="table table-striped compact text-uppercase">
                <thead class="thead-dark">
                <tr class="text-center">
                    <th>#</th>
                    <th>Nombre</th>
                    <th>Apellido Paterno</th>
                    <th>Apellido Materno</th>
                    <th>Puesto</th>
                    <th>Servicio</th>
                    <th>Puerta</th>
                    <th>Turno</th>
                    <th>Fecha Ingreso</th>
                </tr>
                </thead>
                <tbody>
                @if(!empty($empleados))
                    @foreach ($empleados as $key => $empleado)
                        <tr class="text-center">
                            <td>{{$empleado->id}}</td>
                            <td>{{$empleado->nombre}}</td>
                            <td>{{$empleado->apellido_paterno}}</td>
                            <td>{{$empleado->apellido_materno}}</td>
                            <td>{{$empleado->puesto}}</td>
                            <td>{{$empleado->servicio}}</td>
                            <td>{{$empleado->puerta}}</td>
                            <td>{{$empleado->turno}}</td>
                            <td>{{$empleado->fecha_ingreso}}</td>
                        </tr>
                    @endforeach
                @endif
                </tbody>
            </table>
        </div>
    </div>
@stop

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

        function filtrar_tabla() {
            var table = $('#tabla_listado_bajas').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, 5, 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, 6, true, false, false, false);
            var turnos = $('input:checkbox[name="turnos"]:checked').map(function () {
                return this.value;
            }).get().join('|');
            //console.log("----------conceptos------------");
            //console.log(conceptos);
            table.fnFilter(turnos, 7, true, false, false, false);

        }
    </script>
@stop