@extends('layouts.menu')

@section('tittle')
    FALTAS A SOLICITUDES
@endsection

@section('contenido')
    <div class="row">
        <div class="col-lg-12">
            {{-- <div class="page-sub-header">
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><b class="menu-item-head" id="solicitudesFaltasMenu">TICKETS</b></li>
                    <li class="breadcrumb-item"><b class="menu-item-head" id="consultasFaltasMenu">CONSULTAS</b></li>
                </ul>
            </div> --}}

            {{-- FALTAS SOLICITUDES SECTION --}}
            <div class="faltasSolicitudes">
                <div class="card card-table comman-shadow shadow-lg bg-solicitudes">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="page-title">FALTAS A TICKETS</h3>
                            </div>
                            <div class="col-lg-2 text-end float-end ms-auto download-grp">
                                <label>Desde</label>
                                <input type="date" id="periodoInicioSolicitudes"
                                    class="form-control form-control-sm pickedDateSolicitudes" value="{{ $date1 }}">
                            </div>
                            <div class="col-lg-2 text-end float-end ms-auto download-grp">
                                <label>Hasta</label>
                                <input type="date" id="periodoFinalSolicitudes"
                                    class="form-control form-control-sm pickedDateSolicitudes" value="{{ $date }}">
                            </div>
                        </div>
                        <br>

                        <div class="table-responsive">
                            <table id="faltasSolicitudesTable"
                                class="table table-hover table-center table-bordered table-striped" style="width:100%">
                                <tfoot class="table-active" style="display: table-header-group;">
                                    <tr>
                                        <th class="text-center" colspan="8">Falta</th>
                                        <th class="text-center" colspan="3">Justificación</th>
                                        <th class="text-center"></th>
                                    </tr>
                                </tfoot>
                                <thead class="thead-light">
                                    <tr>
                                        <th class="text-center">#</th>
                                        <th class="text-center">N° Ticket</th>
                                        <th class="text-center">Asunto</th>
                                        <th class="text-center">Descripción</th>
                                        <th class="text-center">Asignado</th>
                                        <th class="text-wrap text-center">Tolerancia Regresar</th>
                                        <th class="text-wrap text-center">Asinado a Regresar</th>
                                        <th class="text-center">Diferencia</th>
                                        <th class="text-center">Justificación</th>
                                        <th class="text-wrap text-center">Tiempo Justificado</th>
                                        <th class="text-wrap text-center">Tiempo Final</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>

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

            {{-- FALTAS CONSULTAS SECTION --}}
            <div class="faltasConsultas">
                <div class="card card-table comman-shadow shadow-lg bg-consultas">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="page-title">FALTAS A CONSULTAS</h3>
                            </div>
                            <div class="col-lg-2 text-end float-end ms-auto download-grp">
                                <label>Desde</label>
                                <input type="date" id="periodoInicioConsultas"
                                    class="form-control form-control-sm pickedDateConsultas" value="{{ $date1 }}">
                            </div>
                            <div class="col-lg-2 text-end float-end ms-auto download-grp">
                                <label>Hasta</label>
                                <input type="date" id="periodoFinalConsultas"
                                    class="form-control form-control-sm pickedDateConsultas" value="{{ $date }}">
                            </div>
                        </div>
                        <br>

                        <div class="table-responsive">
                            <table id="faltasConsultasTable"
                                class="table table-hover table-center table-bordered table-striped" style="width:100%">
                                <tfoot class="table-active" style="display: table-header-group;">
                                    <tr>
                                        <th class="text-center" colspan="8">Falta</th>
                                        <th class="text-center" colspan="3">Justificación</th>
                                        <th class="text-center"></th>
                                    </tr>
                                </tfoot>
                                <thead class="thead-light">
                                    <tr>
                                        <th class="text-center">#</th>
                                        <th class="text-center">N° Consulta</th>
                                        <th class="text-center">Asunto</th>
                                        <th class="text-center">Descripción</th>
                                        <th class="text-center">Asignado</th>
                                        <th class="text-wrap text-center">Tolerancia Regresar</th>
                                        <th class="text-wrap text-center">Asinado a Regresar</th>
                                        <th class="text-center">Diferencia</th>
                                        <th class="text-center">Justificación</th>
                                        <th class="text-wrap text-center">Tiempo Justificado</th>
                                        <th class="text-wrap text-center">Tiempo Final</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>

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

        </div>
    </div>

    {{-- MODAL EDIT CONSULTAS --}}
    <div class="modal fade" id="modalFaltas" role="dialog" data-bs-keyboard="false" data-bs-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"></h5>
                </div>
                <div class="modal-body">
                    <div class="editIT">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="" class="col-form-label" for="tiempoFalta">Tiempo Falta:</label>
                                    <input type="text" name="tiempoFalta" id="tiempoFalta"
                                        class="form-control form-control-sm resetForm" readonly>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="" class="col-form-label" for="tiempoJustificar">Tiempo a
                                        Justificar:</label>
                                    <input type="text" name="tiempoJustificar" id="tiempoJustificar"
                                        class="form-control form-control-sm resetForm" placeholder="0 min">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="" class="col-form-label"
                                        for="comentarioPausa">Justifificación:</label>
                                    <textarea name="commentJustificacion" id="commentJustificacion" class="form-control form-control-sm resetForm" cols="20"
                                        rows="3"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" class="resetForm" id="hidden_falta_id">
                        <input type="hidden" class="resetForm" id="hidden_secuencia_id">

                        <button type="submit" id="btnGuardar" class="btn btn-success">Guardar</button>
                        <button type="button" class="btn btn-secondary" id="btnCancelar"
                            data-dismiss="modal">Cancelar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('#solicitudesMenu, #faltasSolicitudesMenu').addClass('active');

            $('#tiempoJustificar').numbersOnly();

            $('.faltasSolicitudes').css("display", "contents");
            $('.faltasConsultas').css("display", "none");

            $('#solicitudesFaltasMenu').click(function(e) {
                e.preventDefault();

                $('.faltasSolicitudes').css("display", "contents");
                $('.faltasConsultas').css("display", "none");
            });
            $('#consultasFaltasMenu').click(function(e) {
                e.preventDefault();

                $('.faltasSolicitudes').css("display", "none");
                $('.faltasConsultas').css("display", "contents");
            });

            getFaltasSolicitudes();
            getFaltasConsultas();

            $('.pickedDateSolicitudes').change(function(e) {
                e.preventDefault();

                getFaltasSolicitudes();
            });

            $('.pickedDateConsultas').change(function(e) {
                e.preventDefault();

                getFaltasConsultas();
            });

            function getFaltasSolicitudes() {
                var periodoInicio = $('#periodoInicioSolicitudes').val();
                var periodoFinal = $('#periodoFinalSolicitudes').val();

                faltasSolicitudesTable = $("#faltasSolicitudesTable").DataTable({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                                'content'));
                        }
                    },
                    ajax: {
                        url: "{{ url('/admin/ticket/faltas/tickets') }}" + "/" + periodoInicio + "/" + periodoFinal + "/12/1",
                    },
                    language: {
                        url: "{{ asset('json/es-ES.json') }}",
                    },
                    columns: [{
                            data: "id_falta"
                        },
                        {
                            data: "id_solicitud"
                        },
                        {
                            data: "asunto",
                            className: "text-wrap"
                        },
                        {
                            data: "descripcion",
                            className: "text-wrap"
                        },
                        {
                            data: "name_asignado_por",
                            className: "text-wrap"
                        },
                        {
                            data: "tiempo_puede_regresar",
                            className: "text-center"
                        },
                        {
                            data: "tiempo_asignado_regresado",
                            className: "text-center"
                        },
                        {
                            data: "diferencia",
                            className: "text-center"
                        },
                        {
                            data: "justificacion",
                            className: "text-wrap"
                        },
                        {
                            data: "tiempoJustificado",
                            className: "text-center"
                        },
                        {
                            data: "tiempoTotal",
                            className: "text-center"
                        },
                        {
                            defaultContent: "<div class='text-center'><div class='btn-group'><button class='btn btn-primary btn-sm btnJustificar' title='Añadir Justifificación' alt='Añadir Justificación'><i class='material-icons'>add</i></button></div></div>",
                        },
                    ],
                    /* columnDefs: [{
                        targets: invisibleColumns,
                        visible: false,
                    }, ], */
                });
            }

            function getFaltasConsultas() {
                var periodoInicio = $('#periodoInicioConsultas').val();
                var periodoFinal = $('#periodoFinalConsultas').val();

                faltasConsultasTable = $("#faltasConsultasTable").DataTable({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                                'content'));
                        }
                    },
                    ajax: {
                        url: "faltas/solicitudes/" + periodoInicio + "/" + periodoFinal + "/13/1",
                    },
                    language: {
                        url: "{{ asset('json/es-ES.json') }}",
                    },
                    columns: [{
                            data: "id_falta"
                        },
                        {
                            data: "id_solicitud"
                        },
                        {
                            data: "asunto",
                            className: "text-wrap"
                        },
                        {
                            data: "descripcion",
                            className: "text-wrap"
                        },
                        {
                            data: "name_asignado_por",
                            className: "text-wrap"
                        },
                        {
                            data: "tiempo_puede_regresar",
                            className: "text-center"
                        },
                        {
                            data: "tiempo_asignado_regresado",
                            className: "text-center"
                        },
                        {
                            data: "diferencia",
                            className: "text-center"
                        },
                        {
                            data: "justificacion",
                            className: "text-wrap"
                        },
                        {
                            data: "tiempoJustificado",
                            className: "text-center"
                        },
                        {
                            data: "tiempoTotal",
                            className: "text-center"
                        },
                        {
                            defaultContent: "<div class='text-center'><div class='btn-group'><button class='btn btn-primary btn-sm btnJustificar' title='Añadir Justifificación' alt='Añadir Justificación'><i class='material-icons'>add</i></button></div></div>",
                        },
                    ],
                    /* columnDefs: [{
                        targets: invisibleColumns,
                        visible: false,
                    }, ], */
                });
            }

            /* --------------------------- FUNCTION CLOSE MODAL --------------------------- */
            $("#btnCancelar").click(function() {
                $("#modalFaltas").modal("hide");
            });

            /* FUNCTION OPEN MODAL CREATE JUSTIFICACION */
            $(document).on("click", ".btnJustificar", function(e) {
                e.preventDefault();

                fila = $(this).closest("tr");
                falta_id = $.trim(fila.find("td:eq(0)").text());
                secuencia_id = $.trim(fila.find("td:eq(1)").text());
                tiempoFalta = $.trim(fila.find("td:eq(7)").text());

                $('#hidden_optionReject').val(3);

                opcion = 1;

                $('#hidden_falta_id').val(falta_id);
                $('#hidden_secuencia_id').val(secuencia_id);
                $('#tiempoFalta').val(tiempoFalta);

                $(".modal-header").css("background-color", "#0D3728");
                $(".modal-title").css({
                    "color": "white",
                    "font-weight": "900",
                });
                $(".modal-title").text("Añadir Justificación #" + falta_id);
                $("#modalFaltas").modal("show");
            });

            /* FUNCTION SAVE JUSTIFICACION */
            $(document).on("click", "#btnGuardar", function(e) {
                e.preventDefault();

                hidden_falta_id = $('#hidden_falta_id').val();
                hidden_secuencia_id = $('#hidden_secuencia_id').val();

                tiempoJustificar = $('#tiempoJustificar').val();
                commentJustificacion = $('#commentJustificacion').val();

                if (!$.trim($('#tiempoJustificar').val()) || !$.trim($('#commentJustificacion').val())) {
                    Swal.fire("", "Llene todos los campos!", "warning");
                } else {
                    try {
                        $.ajax({
                            beforeSend: function(xhr, type) {
                                if (!type.crossDomain) {
                                    xhr.setRequestHeader('X-CSRF-Token', $(
                                        'meta[name="csrf-token"]').attr('content'));
                                }
                            },
                            url: "faltas/insertJustificacion",
                            type: "POST",
                            data: {
                                hidden_falta_id: hidden_falta_id,
                                hidden_secuencia_id: hidden_secuencia_id,
                                tiempoJustificar: tiempoJustificar,
                                commentJustificacion: commentJustificacion
                            },
                            success: function(data) {
                                if (data.existe == 0 || data.existe == "0") {
                                    Swal.fire("",
                                        "Ya has creado una justificación para esta falta!",
                                        "warning");
                                        $("#modalFaltas").modal("hide");
                                } else {
                                    Swal.fire("", "Justificación Creada!", "success");
                                    $('.resetForm').val('');
                                    $("#modalFaltas").modal("hide");
                                }

                                faltasSolicitudesTable.ajax.reload(null, false);
                                faltasConsultasTable.ajax.reload(null, false);
                            },
                        });
                    } catch (error) {
                        Swal.fire("", "Error: " + error, "error");
                    }
                }
            });
        });
    </script>
@endsection