@extends('layouts.menu')

@section('title', 'Inicio Guardias')

@section('contenido')

    <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">
                    <div class="row justify-content-between">
                        <div class="col-6">
                            <h2><b>Pre - Nómina</b></h2>
                        </div>
                        <div class="col-6" style=" display: flex; justify-content: center; align-items: center; ">
                            <h4><b>
                                    <a href="{{route('guardia.dashboard',base64_encode($fechaAnterior))}}"
                                       class="ico-amarillo"><i
                                                class="fa-solid fa-circle-chevron-left"></i></a>
                                    {{$fecha->isoFormat('D')}} de {{$fecha->monthName}}
                                    del {{$fecha->isoFormat('YYYY')}}
                                    @if($fechaPosterior)
                                        <a href="{{route('guardia.dashboard',base64_encode($fechaPosterior))}}"
                                           class="ico-amarillo"><i class="fa-solid fa-circle-chevron-right"></i></a>
                                    @endif
                                </b></h4>
                        </div>
                    </div>
                </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>
            {{-- Tabla de Asistencia --}}

            <div class="table-responsive mt-2" style="overflow-x: clip;">
                <table id="tabla_asistencia" class="table table-striped compact">
                    <thead class="table-dark">
                    <tr>
                        <th width="20px">ID</th>
                        <th>
                            Lista
                        </th>
                        <th>Servicio</th>
                        <th>Puerta</th>
                        <th>Elemento</th>
                        <th>Puesto</th>
                        <th>Sueldo Quincenal</th>
                        <th>Bono</th>
                        {{-- <th width="200px">{{$now}}</th> --}}
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($empleados as $key => $empleado)
                        <tr>
                            <td>{{$empleado->id}}</td>
                            <td align="center">
                                <div style="display: flex; justify-content: space-evenly;">
                                    <div id="contenedorAsistencia_{{$empleado->id}}">
                                        @if ($empleado->dias_laborados)
                                            <div class="btn-group">
                                                <button type="button" class="card-asistencia dropdown-toggle"
                                                        data-bs-toggle="dropdown" aria-expanded="false">
                                                    <span style="Color:{{$empleado->dias_laborados->color}};"><b>{{$empleado->dias_laborados->nomenclatura?$empleado->dias_laborados->nomenclatura:'A '}}</b></span>
                                                    - {{$empleado->dias_laborados->concepto}}
                                                </button>
                                                <ul class="dropdown-menu dropdown-menu-dark">
                                                    @foreach ($opciones as $opcion)
                                                        <li><a class="dropdown-item"
                                                               onclick="Accion('{{$fecha}}','{{$opcion->concepto}}','{{$empleado->id}}')"><span
                                                                        style="Color:{{$opcion->color}};"><b>{{$opcion->nomenclatura}}</b></span>
                                                                - {{$opcion->concepto}}</a></li>
                                                    @endforeach

                                                </ul>
                                            </div>
                                    </div>
                                    @if($empleado->dias_laborados->comentario)
                                        <i class="fa-solid fa-comment-dots fa-2x ico-green"
                                           onclick="PonerComentario('{{$empleado->id}}','{{$empleado->dias_laborados->comentario}}')"></i>

                                    @else
                                        <i class="fa-solid fa-comment-dots fa-2x ico-amarillo"
                                           onclick="PonerComentario('{{$empleado->id}}','')"></i>

                                    @endif
                                    @else
                                        @if(isset($empleado->opcionBaja))
                                            <div class="card-asistencia">
                                                <span><b>{{$empleado->opcionBaja}}</b></span>
                                            </div>
                                        @elseif(isset($empleado->opcionAlta))
                                            <div class="card-asistencia">
                                                <span><b>{{$empleado->opcionAlta}}</b></span>
                                            </div>
                                        @else
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-sm btn-primary dropdown-toggle"
                                                        data-bs-toggle="dropdown" aria-expanded="false"
                                                        style="width: 130px;">
                                                    Acción
                                                </button>
                                                <ul class="dropdown-menu dropdown-menu-dark">
                                                    @foreach ($opciones as $opcion)
                                                        <li><a class="dropdown-item"
                                                               onclick="Accion('{{$fecha}}','{{$opcion->concepto}}','{{$empleado->id}}')"><span
                                                                        style="Color:{{$opcion->color}};"><b>{{$opcion->nomenclatura}}</b></span>
                                                                - {{$opcion->concepto}}</a></li>
                                                    @endforeach

                                                </ul>
                                            </div>
                                        @endif
                                </div>
                                <i class="fa-solid fa-comment-dots fa-2x ico-amarillo"
                                   onclick="PonerComentario('{{$empleado->id}}')"></i>
                @endif


            </div>
            </td>
                            <td>{{$empleado->servicio}}</td>
                            <td>{{$empleado->puerta}}</td>
                            <td>{{$empleado->nombre}} {{$empleado->apellido_paterno}} {{$empleado->apellido_materno}}</td>
                            <td>{{$empleado->puesto}} </td>
                            <td>$ {{number_format($empleado->sueldo_quincenal, 2, '.', ','); }} </td>
                            <td>$ {{number_format($empleado->bono, 2, '.', ','); }} </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>

        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade " id="asignarComentario" tabindex="-1" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog ">
            <div class="modal-content bg-light">
                <div class="modal-header card-header-pr77 pb-2 pt-4">
                    <h5 class="modal-title" id="exampleModalLabel" style="font-weight: 700;"><i
                                class="fa-regular fa-comment-dots"></i> Asignar Comentario</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form enctype="multipart/form-data" action="{{route('inicio.asignarComentario')}}" method="post">
                    @csrf
                    <div class="modal-body">
                        <input hidden id="idEmpleado" name="idEmpleado"/>
                        <input hidden id="fecha" name="fecha" value="{{$fecha}}"/>


                        {{-- Formulario de persona --}}
                        <div class="row">
                            <div class="col-12 mb-3">
                                <label for="comentario" class="form-label">Comentario</label>
                                <textarea type="text" class="form-control" id="comentario" name="comentario"
                                          rows="3"></textarea>
                            </div>
                        </div>

                        {{-- Fin editar persona --}}


                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                        <button type="submit" class="btn btn-primary btn-lg" onclick="$('#Loader').fadeIn();">
                            <i class="fa-solid fa-floppy-disk"></i>
                            Guardar
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>



@stop

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

        });

        function PonerComentario(id, comentario) {
            console.log("Comentario para:" + id + " Tiene: " + comentario)
            $("#idEmpleado").val(id);
            $("#comentario").val(comentario);

            $("#asignarComentario").modal('toggle');
        }


        function Accion(fecha, accion, empleado) {
            // $("#Loader").fadeIn();
            if (accion == "Adicional") {
                Swal.fire({
                    title: 'Ingresa el monto adicional para este dia',
                    input: 'text',
                    inputLabel: 'Precio adicional',
                    inputValue: "0",
                    showCancelButton: true,
                    inputValidator: (value) => {
                        console.log(value * 1)
                        if (value * 1 != value) {
                            return 'Escribe un número'
                        }
                    },
                    confirmButtonText: 'Aceptar',
                    cancelButtonText: 'Cancelar',
                    confirmButtonColor: '#F1C40F'
                }).then((result) => {
                    console.log(result);
                    if (result.isConfirmed) {
                        fetch("{{route('Inicio.asignarAccion')}}", {
                            headers: {
                                "Content-Type": "application/json",
                                "Accept": "application/json",
                                "X-Requested-With": "XMLHttpRequest",
                                "X-CSRF-Token": '{{csrf_token()}}',
                            },
                            method: "post",
                            credentials: "same-origin",
                            body: JSON.stringify({
                                empleado: empleado,
                                accion: accion,
                                fecha: fecha,
                                costo: result.value
                            })
                        }).then(res => res.json())
                            .catch(function (error) {
                                console.error('Error:', error);
                                swal("Error", "Intente denuevo mas tarde!", "error");
                            })
                            .then(function (response) {
                                console.log(response)
                                if (response.error) {
                                    $("#Loader").fadeOut();
                                    setTimeout(function () {
                                        Swal.fire({
                                            title: 'Error!',
                                            html: response.error,
                                            icon: 'error',
                                            timer: 2000,
                                            timerProgressBar: true,
                                            confirmButtonText: 'Entendido',
                                            confirmButtonColor: '#F1C40F'
                                        }).then((result) => {
                                            if (result.isConfirmed || result.isDismissed) {
                                                //console.log('se cerro')
                                            }
                                        });
                                    }, 500);
                                }
                                if (response.success) {
                                    $("#Loader").fadeOut();
                                    let opcionesAsistencias = "";
                                    @foreach ($opciones as $opcion)
                                        opcionesAsistencias += `<li><a class="dropdown-item" onclick="Accion('{{$fecha}}','{{$opcion->concepto}}','${empleado}')"><span style="Color:{{$opcion->color}};"><b>{{$opcion->nomenclatura}}</b></span> - {{$opcion->concepto}}</a></li>`;
                                    @endforeach
                                    $("#contenedorAsistencia_" + response.Accion.id_empleados).html(`
                <div class="btn-group" >
                <button type="button" class="card-asistencia dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                <span style="Color:${response.Accion.color};"><b>${response.Accion.nomenclatura}</b></span> - ${response.Accion.concepto}
                </button>
                <ul class="dropdown-menu dropdown-menu-dark">
                ${opcionesAsistencias}
                </ul>
                </div>`);
                                }

                            }).finally(function () {
                        });
                    }
                });

            } else {
                console.log(`El empleado ${empleado} tiene ${accion} el dia ${fecha}`);
                fetch("{{route('Inicio.asignarAccion')}}", {
                    headers: {
                        "Content-Type": "application/json",
                        "Accept": "application/json",
                        "X-Requested-With": "XMLHttpRequest",
                        "X-CSRF-Token": '{{csrf_token()}}',
                    },
                    method: "post",
                    credentials: "same-origin",
                    body: JSON.stringify({
                        empleado: empleado,
                        accion: accion,
                        fecha: fecha
                    })
                }).then(res => res.json())
                    .catch(function (error) {
                        console.error('Error:', error);
                        swal("Error", "Intente denuevo mas tarde!", "error");
                    })
                    .then(function (response) {
                        console.log(response)
                        if (response.error) {
                            $("#Loader").fadeOut();
                            setTimeout(function () {
                                Swal.fire({
                                    title: 'Error!',
                                    html: response.error,
                                    icon: 'error',
                                    timer: 2000,
                                    timerProgressBar: true,
                                    confirmButtonText: 'Entendido',
                                    confirmButtonColor: '#F1C40F'
                                }).then((result) => {
                                    if (result.isConfirmed || result.isDismissed) {

                                    }
                                });
                            }, 500);
                            //location.reload()
                        }
                        if (response.success) {
                            $("#Loader").fadeOut();
                            let opcionesAsistencias = "";
                            @foreach ($opciones as $opcion)
                                opcionesAsistencias += `<li><a class="dropdown-item" onclick="Accion('{{$fecha}}','{{$opcion->concepto}}','${empleado}')"><span style="Color:{{$opcion->color}};"><b>{{$opcion->nomenclatura}}</b></span> - {{$opcion->concepto}}</a></li>`;
                            @endforeach
                            $("#contenedorAsistencia_" + response.Accion.id_empleados).html(`
              <div class="btn-group" >
              <button type="button" class="card-asistencia dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
              <span style="Color:${response.Accion.color};"><b>${response.Accion.nomenclatura}</b></span> - ${response.Accion.concepto}
              </button>
              <ul class="dropdown-menu dropdown-menu-dark">
              ${opcionesAsistencias}
              </ul>
              </div>`);
                        }

                    }).finally(function () {
                });
            }
        }

        function filtrar_tabla() {
            var table = $('#tabla_asistencia').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, 2, 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, 3, true, false, false, false);

        }

    </script>
@stop