@extends('layouts.menu')

@section('tittle')
    SUPPORT IT
@endsection

@section('contenido')
    <div class="row">
        <div class="col-lg-12">

            <div class="card card-table comman-shadow shadow-lg">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3 class="page-title">SUPPORT IT</h3>
                        </div>
                        <div class="col-lg-2 text-end float-end ms-auto download-grp">
                            <label>Desde</label>
                            <input type="date" id="periodoInicio" class="form-control form-control-sm pickedDate"
                                value="{{ $date1 }}">
                        </div>
                        <div class="col-lg-2 text-end float-end ms-auto download-grp">
                            <label>Hasta</label>
                            <input type="date" id="periodoFinal" class="form-control form-control-sm pickedDate"
                                value="{{ $date }}">
                        </div>
                        <div class="col-auto text-end float-end ms-auto download-grp">
                            <a href="#" type="button" class="btn btn-primary" id="btnNuevo" title="Crear Nuevo"
                                alt="Crear Nuevo"><i class="fas fa-plus"></i></a>
                        </div>
                    </div>
                    <br>
                    <div class="table-responsive">
                        <table id="onsiteTable" class="table table-hover table-center table-bordered table-striped"
                            style="width:100%">
                            <thead class="thead-light">
                                <tr>
                                    <th class="text-center">#</th>
                                    <th class="text-center">ID Support IT</th>
                                    <th class="text-center">Support IT</th>
                                    <th class="text-center">Descripción</th>
                                    <th class="text-center">ID Responsable</th>
                                    <th class="text-center">Responsable</th>
                                    <th class="text-center">Fecha Inicio</th>
                                    <th class="text-center">Fecha Pausado</th>
                                    <th class="text-center">Comentario Pausa</th>
                                    <th class="text-center">Fecha Reanudado</th>
                                    <th class="text-center">Tiempo Pausado</th>
                                    <th class="text-center">Fecha Finalizado</th>
                                    <th class="text-center">Tiempo Asistencia</th>
                                    <th class="text-center">Dificultad</th>
                                    <th class="text-center">ID Usuario</th>
                                    <th class="text-center">Usuario</th>
                                    <th class="text-center">Área</th>
                                    <th class="text-center">Estado</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>

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

        </div>
    </div>

    {{-- MODAL --}}
    <div class="modal fade" id="modalOnSiteSupport" role="dialog" data-bs-keyboard="false" data-bs-backdrop="static"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="formSupportONSITE">
                    <div class="modal-body">
                        <div class="row tipoOnSiteSupportView">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="" class="col-form-label">Tipo de Support:</label>
                                        <select class="form-select form-select-sm" aria-label="Default select example"
                                            id="tipo_onsite_support" name="tipo_onsite_support">
                                            <option selected value="0">Seleccione una opción</option>
                                            @foreach ($tiposData as $tipos)
                                                <option value="{{ $tipos->pk_tipo }}">{{ $tipos->descripcion_tipo }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="" class="col-form-label">Usuario:</label>
                                        <select class="form-select form-select-sm" aria-label="Default select example"
                                            id="usuario_solicita" name="usuario_solicita" style="width: 100%">
                                            <option selected value="0">Seleccione un Usuario</option>
                                            @foreach ($usersData as $user)
                                                <option value="{{ $user->PKUsuario }}">
                                                    {{ $user->Nombre . ' - ' . $user->Usuario }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row onsiteDescView">
                            <div class="col-lg-12">
                                <label for="" class="col-form-label" for="dificultadInicio">Dificultad:</label>
                                <select type="text" class="form-select form-select-sm" name="dificultad" id="dificultad">
                                    <option value="0">Seleccione una dificultad</option>
                                    @foreach ($dificultadesData as $dificultad)
                                        <option value="{{ $dificultad->id_dificultad }}">
                                            {{ $dificultad->tiempo }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="" class="col-form-label"
                                        for="motivoTextArea">Descripción:</label>
                                    <textarea name="OnSiteSupportTextArea" id="OnSiteSupportTextArea" class="form-control" cols="20"
                                        rows="3"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" id="btnGuardar" class="btn btn-success">Guardar</button>
                            <button type="button" class="btn btn-danger" id="btnCancelar"
                                data-dismiss="modal">Cancelar</button>
                        </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            var buttons = "Brtlip";

            $('#indicadoresITMenu, #onsiteMenu').addClass('active');

            $('#modalOnSiteSupport').on('shown.bs.modal', function(e) {
                $("#usuario_solicita").chosen({
                    width: "100%"
                });
            })


            var secuencia_id, opcion, invisibleColumns, actionTrigg;
            opcion = 4;
            /*
             * --------------------------- FILL PROYECTOS TABLE ---------------------------
             */
            getOnSiteSupport();
            $(".pickedDate").change(function(e) {
                e.preventDefault();

                getOnSiteSupport();
            });

            function getOnSiteSupport() {
                opcion = 4;
                invisibleColumns2 = [1, 4, 14];

                var periodoInicio = $("#periodoInicio").val();
                var periodoFinal = $("#periodoFinal").val();
                var usuarioActual = $.trim('{{ Session::get('userName') }}');

                $("#onsiteTable").DataTable().clear().destroy();

                var windowSize = $(window).width();

                if (windowSize <= 960) {
                    fixedColumns_onsiteTable = 0;
                } else if (windowSize > 960) {
                    fixedColumns_onsiteTable = 4;
                }

                onsiteTable = $("#onsiteTable").DataTable({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                                'content'));
                        }
                    },
                    scrollX: true,
                    scrollCollapse: true,
                    scrollY: '450px',
                    pageLength: 50,
                    fixedColumns: {
                        left: fixedColumns_onsiteTable
                    },
                    ajax: {
                        url: "{{ url('/api/list/onsite/support') }}" + "/" + periodoInicio + "/" +
                            periodoFinal,
                    },
                    language: {
                        url: "{{ asset('json/es-ES.json') }}",
                    },
                    columns: [{
                            data: "id_secuencia"
                        },
                        {
                            data: "id_onsite_support"
                        },
                        {
                            data: "descripcion_tipo",
                            className: "text-wrap"
                        },
                        {
                            data: "descripcion_onsite_support",
                            className: "text-wrap"
                        },
                        {
                            data: "id_responsable"
                        },
                        {
                            data: "responsable"
                        },
                        {
                            data: "fecha_hora_inicio",
                            className: "text-wrap"
                        },
                        {
                            data: "fecha_hora_pausado",
                            className: "text-wrap"
                        },
                        {
                            data: "comentario_pausado",
                            className: "text-wrap"
                        },
                        {
                            data: "fecha_hora_reanudado",
                            className: "text-wrap"
                        },
                        {
                            data: "tiempo_pausado",
                            className: "text-center",
                        },
                        {
                            data: "fecha_hora_finalizado",
                            className: "text-wrap"
                        },
                        {
                            data: "tiempo_asistencia",
                            className: "text-center",
                        },
                        {
                            data: "tiempo_dificultad",
                            className: "text-center",
                        },
                        {
                            data: "id_usuario",
                            className: "text-center",
                        },
                        {
                            data: "nombre_usuario",
                            className: 'text-wrap'
                        },
                        {
                            data: "area",
                            className: 'text-wrap'
                        },
                        {
                            data: "estado",
                            render: function(data, type, row) {
                                var badge = "";
                                if (data == "ON-LINE") {
                                    badge +=
                                        '<span class="badge badge-pill badge-success">' +
                                        data +
                                        "</span>";
                                } else if (data == "PROCESO") {
                                    badge +=
                                        '<span class="badge badge-pill badge-info">' + data +
                                        "</span>";
                                } else if (data == "ANULADO") {
                                    badge +=
                                        '<span class="badge badge-pill badge-danger">' +
                                        data +
                                        "</span>";
                                } else if (data == "PAUSADO") {
                                    badge +=
                                        '<span class="badge badge-pill badge-dark">' + data +
                                        "</span>";
                                } else if (data == "FINALIZADO") {
                                    badge +=
                                        '<span class="badge badge-pill badge-warning">' +
                                        data +
                                        "</span>";
                                }

                                return badge;
                            },
                        },
                        {
                            data: "id_estado",
                            render: function(data, type, row) {
                                var badge = "";

                                if (data == 1) {
                                    badge += `
                                        <div class='text-center'>
                                            <div class='btn-group'>

                                                <button class='btn btn-primary btn-sm btnEditar' data-aos='fade-in' type='button' data-toggle='modal' title='Finalizar' alt='Finalizar'><i class='material-icons'>done</i></button>

                                                <button class='btn btn-warning btn-sm btnPausar' type='button' title='Pausar' alt='Finalizar'><i class='material-icons'>pause</i></button>

                                                <button class='btn btn-danger btn-sm btnBorrar' title='Cambiar Estado' alt='Cambiar Estado'><i class='material-icons'>change_circle</i></button>

                                            </div>
                                        </div>`;
                                } else if (data == 2) {
                                    badge +=
                                        '<span class="badge badge-pill badge-success">Finalizado</span>';
                                } else if (data == 3) {
                                    badge +=
                                        '<span class="badge badge-pill badge-danger">Anulado</span>';
                                } else if (data == 4) {
                                    badge += `
                                        <div class='text-center'>
                                            <div class='btn-group'>

                                                <button class='btn btn-info btn-sm btnReanudar' type='button' title='Reanudar' alt='Reanudar'><i class='material-icons'>play_arrow</i></button>

                                                <button class='btn btn-danger btn-sm btnBorrar' title='Cambiar Estado' alt='Cambiar Estado'><i class='material-icons'>change_circle</i></button>

                                            </div>
                                        </div>`;
                                }

                                return badge;
                            },
                        }
                    ],
                    columnDefs: [{
                        targets: invisibleColumns2,
                        visible: false,
                    }, ],
                    order: [
                        [0, "DESC"]
                    ],
                });
            }



            /*
             * --------------------------- FUNCTION NEW & EDIT SUPPORT + OPEN MODAL ---------------------------
             */
            $("#btnNuevo").click(function() {
                opcion = 1;
                actionTrigg = 1;
                secuencia_id = 0;
                $("#formSupportONSITE").trigger("reset");
                $(".modal-header").css("background-color", "#17a2b8");
                $(".modal-header").css({
                    color: "white",
                    "font-weight": "900",
                });
                $(".modal-title").text("Nuevo Support");
                $("#modalOnSiteSupport").modal("show");

                $(".tipoOnSiteSupportView").css("display", "contents");
                $(".onsiteDescView").css("display", "none");
            });

            /*
             * --------------------------- FUNCTION CLOSE MODAL ---------------------------
             */
            $("#btnCancelar").click(function() {
                $("#modalOnSiteSupport").modal("hide");
                $(".onsiteDescView").css("display", "none");
            });


            $("#formSupportONSITE").submit(function(e) {
                e.preventDefault();

                tipo_onsite_support = $.trim($("#tipo_onsite_support").val());
                tipo_onsite_support_select = $("#tipo_onsite_support option:selected").text();

                usuario_solicita = $.trim($("#usuario_solicita").val());
                usuario_solicita_select = $("#usuario_solicita option:selected").text();

                dificultad = $.trim($("#dificultad").val());

                var OnSiteSupportTextArea = $.trim($("#OnSiteSupportTextArea").val());

                if (opcion == 1 && (tipo_onsite_support == 0 || usuario_solicita == 0)) {
                    Swal.fire("", "¡Llene todos los Campos!", "error");
                } else if (opcion == 2 && (!$("#OnSiteSupportTextArea").val() || dificultad == 0)) {
                    Swal.fire("", "¡Llene todos los Campos!", "error");
                } else {
                    try {
                        $.ajax({
                            beforeSend: function(xhr, type) {
                                if (!type.crossDomain) {
                                    xhr.setRequestHeader('X-CSRF-Token', $(
                                        'meta[name="csrf-token"]').attr(
                                        'content'));
                                }
                            },
                            url: "{{ url('/api/save/finish/onsite/support') }}",
                            type: "POST",
                            datatype: "json",
                            data: {
                                secuencia_id: secuencia_id,
                                tipo_onsite_support: tipo_onsite_support,
                                tipo_onsite_support_select: tipo_onsite_support_select,
                                usuario_solicita: usuario_solicita,
                                usuario_solicita_select: usuario_solicita_select,
                                OnSiteSupportTextArea: OnSiteSupportTextArea,
                                dificultad: dificultad,
                                opcion: opcion,
                            },
                            success: function(data) {
                                if (data.save == 1) {
                                    if (data.existe == 1) {
                                        Swal.fire("", "Ya iniciaste un Support IT!",
                                            "warning");
                                    } else {
                                        if (opcion == 1) {
                                            Swal.fire("", "Support IT Creado!", "success");
                                        } else if (opcion == 2) {
                                            Swal.fire("", "Support IT Finalizado!", "success");

                                            /* NOTIFICATION INDICADOR IT */
                                            $.ajax({
                                                beforeSend: function(xhr, type) {
                                                    if (!type.crossDomain) {
                                                        xhr.setRequestHeader(
                                                            'X-CSRF-Token', $(
                                                                'meta[name="csrf-token"]'
                                                            ).attr(
                                                                'content'));
                                                    }
                                                },
                                                type: "POST",
                                                url: "{{ url('/api/notification/indicadores/it') }}",
                                                data: {
                                                    secuencia_id: secuencia_id,
                                                    opcion: 2
                                                },
                                                dataType: "json",
                                                success: function(data) {
                                                    console.log('Message Sent');
                                                }
                                            });
                                        } else if (opcion == 4) {
                                            Swal.fire("", "Support IT Pausado!", "success");
                                        }

                                        onsiteTable.ajax.reload(null, false);
                                        $("#modalOnSiteSupport").modal("hide");
                                        $(".tipoOnSiteSupportView").css("display", "contents");
                                        $(".onsiteDescView").css("display", "none");
                                    }
                                } else if (data.save == 0) {
                                    Swal.fire("", "Error L: " + data.error, "error");
                                }
                            },
                        });
                    } catch (error) {
                        Swal.fire("", "Error: " + error, "error");
                    }
                }
            });


            /*
             * --------------------------- FUNCTION GET DATA TO EDIT ON SITE SUPPORT ---------------------------
             */
            $(document).on("click", ".btnEditar", function() {
                opcion = 2;

                fila = $(this).closest("tr");

                usuarioActual = $.trim('{{ Session::get('userName') }}');

                onsite_support = $.trim(fila.find("td:eq(1)").text());
                responsable = $.trim(fila.find("td:eq(3)").text());
                estado = $.trim(fila.find("td:eq(14)").text());

                if (usuarioActual == responsable) {
                    if (estado == "FINALIZADO") {
                        Swal.fire("", onsite_support + " ya está FINALIZADO!", "warning");
                    } else {
                        opcion = 2;
                        actionTrigg = 2;
                        fila = $(this).closest("tr");
                        var idUsuarioActual = $.trim($("#idUsuarioActual").val());
                        var usuarioActual = $.trim('{{ Session::get('userName') }}');

                        onsite_support = $.trim(fila.find("td:eq(1)").text());
                        secuencia_id = $.trim(parseInt(fila.find("td:eq(0)").text()));

                        $(".tipoOnSiteSupportView").css("display", "none");
                        $(".onsiteDescView").css("display", "contents");
                        $(".modal-header").css("background-color", "#007bff");
                        $(".modal-header").css({
                            color: "white",
                            "font-weight": "900",
                        });
                        $(".modal-title").text("FINALIZAR SUPPORT IT " + onsite_support);
                        $("#modalOnSiteSupport").modal("show");
                    }
                } else {
                    Swal.fire(
                        "",
                        "NO puedes Finalizar el Support IT " + onsite_support + "!",
                        "warning"
                    );
                }
            });



            /*
             * --------------------------- FUNCTION PAUSAR FIRST CALL ---------------------------
             */
            $(document).on("click", ".btnPausar", function() {
                opcion = 4;

                fila = $(this).closest("tr");

                usuarioActual = $.trim('{{ Session::get('userName') }}');

                onsite_support = $.trim(fila.find("td:eq(1)").text());
                responsable = $.trim(fila.find("td:eq(3)").text());
                estado = $.trim(fila.find("td:eq(14)").text());

                if (usuarioActual == responsable) {
                    opcion = 4;
                    actionTrigg = 4;

                    fila = $(this).closest("tr");
                    var idUsuarioActual = $.trim($("#idUsuarioActual").val());
                    var usuarioActual = $.trim('{{ Session::get('userName') }}');

                    onsite_support = $.trim(fila.find("td:eq(1)").text());
                    secuencia_id = $.trim(parseInt(fila.find("td:eq(0)").text()));

                    $(".tipoOnSiteSupportView").css("display", "none");
                    $(".onsiteDescView").css("display", "contents");
                    $(".modal-header").css("background-color", "yellow");
                    $(".modal-header").css({
                        color: "black",
                        "font-weight": "900",
                    });
                    $(".modal-title").text("PAUSAR SUPPORT IT " + onsite_support);
                    $("#modalOnSiteSupport").modal("show");
                } else {
                    Swal.fire(
                        "",
                        "NO puedes Finalizar el Support IT " + onsite_support + "!",
                        "warning"
                    );
                }
            });


            /*
             * --------------------------- FUNCTION REANUDAR FIRST CALL ---------------------------
             */
             $(document).on("click", ".btnReanudar", function() {
                opcion = 5;

                fila = $(this).closest("tr");

                usuarioActual = $.trim('{{ Session::get('userName') }}');

                first_call = $.trim(fila.find("td:eq(1)").text());
                responsable = $.trim(fila.find("td:eq(3)").text());

                if (usuarioActual == responsable) {
                    opcion = 5;
                    actionTrigg = 5;
                    fila = $(this).closest("tr");

                    var idUsuarioActual = $.trim($("#idUsuarioActual").val());
                    var usuarioActual = $.trim('{{ Session::get('userName') }}');
                    first_call = $.trim(fila.find("td:eq(1)").text());
                    secuencia_id = $.trim(parseInt(fila.find("td:eq(0)").text()));

                    try {
                        $.ajax({
                            beforeSend: function(xhr, type) {
                                if (!type.crossDomain) {
                                    xhr.setRequestHeader('X-CSRF-Token', $(
                                        'meta[name="csrf-token"]').attr(
                                        'content'));
                                }
                            },
                            url: "{{ url('/api/save/finish/onsite/support') }}",
                            type: "POST",
                            datatype: "json",
                            data: {
                                secuencia_id: secuencia_id,
                                opcion: 5,
                            },
                            success: function(data) {
                                Swal.fire("", "Support IT Reanudado!", "success");
                                onsiteTable.ajax.reload(null, false);
                            },
                        });
                    } catch (error) {
                        Swal.fire("", "Error: " + error, "error");
                    }


                } else {
                    Swal.fire(
                        "",
                        "NO puedes Reanudar el First Call " + first_call + "!",
                        "warning"
                    );
                }
            });



            /*
             * --------------------------- FUNCTION ANULAR ON SITE SUPPORT ---------------------------
             */
            $(document).on("click", ".btnBorrar", function() {
                fila = $(this).closest("tr");

                usuarioActual = $.trim('{{ Session::get('userName') }}');

                secuencia_id = $.trim(parseInt(fila.find("td:eq(0)").text()));
                onsite_support = $.trim(fila.find("td:eq(1)").text());
                responsable = $.trim(fila.find("td:eq(3)").text());
                estado = $.trim(fila.find("td:eq(14)").text());
                opcion = 3;

                if (usuarioActual == responsable) {
                    if (estado == "ON-LINE") {
                        onsite_support_status = 3;
                        Swal.fire({
                            title: "¿Está seguro de deshabilitar este Support IT " +
                                onsite_support +
                                "?",
                            icon: "warning",
                            showCancelButton: true,
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'Confirmar'
                        }).then((result) => {
                            if (result.isConfirmed) {


                                try {
                                    $.ajax({
                                        beforeSend: function(xhr, type) {
                                            if (!type.crossDomain) {
                                                xhr.setRequestHeader('X-CSRF-Token', $(
                                                        'meta[name="csrf-token"]')
                                                    .attr(
                                                        'content'));
                                            }
                                        },
                                        url: "{{ url('/api/anular/onsite/support') }}",
                                        type: "POST",
                                        datatype: "json",
                                        data: {
                                            opcion: opcion,
                                            onsite_support: onsite_support,
                                            secuencia_id: secuencia_id,
                                        },
                                        success: function(data) {
                                            if (data.save == 1) {
                                                Swal.fire("",
                                                    "Support IT Anulado!",
                                                    "success");
                                                onsiteTable.ajax.reload(null, false);
                                            } else if (data.save == 0) {
                                                Swal.fire("",
                                                    "Error: " + data.error,
                                                    "error");
                                            }
                                        },
                                    });
                                } catch (error) {
                                    Swal.fire("", "Error: " + error, "error");
                                }
                                

                            }
                        });
                    } else {
                        Swal.fire(
                            "",
                            "Support IT " +
                            onsite_support +
                            " Finalizado, NO puedes cambiar su Estado!",
                            "warning"
                        );
                    }
                } else {
                    Swal.fire(
                        "",
                        "NO puedes cambiar el estado del Support IT " + onsite_support + "!",
                        "warning"
                    );
                }
            });
        });
    </script>
@endsection