@extends('layouts.menu')

@section('tittle')
    FIRST CALL 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">FIRST CALL 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="firstCallTable" 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 First Call</th>
                                    <th class="text-center">First Call</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">Estado</th>
                                    <th class="text-center">ID Usuario</th>
                                    <th class="text-center">Usuario</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>

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

        </div>
    </div>

    {{-- MODAL --}}
    <div class="modal fade" id="modalFirstCall" 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>
                <div class="modal-body">
                    <form id="formFirstCall">
                        <div class="row tipoFirstCallView">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="" class="col-form-label">Tipo de First Call:</label>
                                    <select class="form-select form-select-sm" aria-label="Default select example"
                                        id="tipo_first_call" name="tipo_first_call">
                                        <!-- <option selected>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 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 class="row firsCallDescView">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="" class="col-form-label" for="motivoTextArea">Descripción:</label>
                                    <textarea name="firstCallTextArea" id="firstCallTextArea" 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>
    </div>
@endsection

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

            /* $('#usuario_solicita').select2({
                dropdownParent: $('#modalFirstCall')
            }); */

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

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

                getFirstCallIT();
            });

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

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

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

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

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

                firstCallTable = $("#firstCallTable").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_firstCallTable
                    },
                    ajax: {
                        url: "firstCallIT/myFirstCalls/" + periodoInicio + "/" + periodoFinal + "/" +
                            usuarioActual,
                        method: "GET",
                    },
                    language: {
                        url: "{{ asset('json/es-ES.json') }}",
                    },
                    columns: [{
                            data: "id_secuencia"
                        },
                        {
                            data: "id_first_call"
                        },
                        {
                            data: "descripcion_tipo",
                            className: "text-wrap"
                        },
                        {
                            data: "descripcion_first_call",
                            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: "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_usuario",
                            className: "text-wrap"
                        },
                        {
                            data: "nombre_usuario",
                            className: "text-wrap"
                        },
                        {
                            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"]
                    ],
                });
            }

            var fila;

            /*
             * --------------------------- FUNCTION NEW & EDIT PROYECTOS + OPEN MODAL ---------------------------
             */
            $("#btnNuevo").click(function() {
                opcion = 1;
                actionTrigg = 1;
                secuencia_id = null;
                $("#formFirstCall").trigger("reset");
                $(".modal-header").css("background-color", "#17a2b8");
                $(".modal-header").css({
                    color: "white",
                    "font-weight": "900",
                });
                $(".firsCallDescView").css("display", "none");
                $(".modal-title").text("NUEVO FIRST CALL IT");
                $("#modalFirstCall").modal("show");
            });

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

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

                tipo_first_call = $.trim($("#tipo_first_call").val());
                tipo_first_call_select = $("#tipo_first_call option:selected").text();

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

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

                if ($.trim(tipo_first_call).length > 0) {
                    try {
                        $.ajax({
                            beforeSend: function(xhr, type) {
                                if (!type.crossDomain) {
                                    xhr.setRequestHeader('X-CSRF-Token', $(
                                        'meta[name="csrf-token"]').attr(
                                        'content'));
                                }
                            },
                            url: "{{ URL::asset('php/firstCallAPI.php') }}",
                            type: "POST",
                            datatype: "json",
                            data: {
                                secuencia_id: secuencia_id,
                                tipo_first_call: tipo_first_call,
                                tipo_first_call_select: tipo_first_call_select,
                                idUsuarioActual: idUsuarioActual,
                                firstCallTextArea: firstCallTextArea,
                                usuarioActual: usuarioActual,
                                usuario_solicita: usuario_solicita,
                                usuario_solicita_select: usuario_solicita_select,
                                opcion: opcion,
                            },
                            success: function(data) {
                                if (data.result == "Existe") {
                                    Swal.fire("", "Ya iniciaste una First Call!", "warning");
                                } else {
                                    if (opcion == 1) {
                                        Swal.fire("", "First Call Creada!", "success");
                                    } else if (opcion == 2) {
                                        Swal.fire("", "First Call Finalizada!", "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: 1
                                            },
                                            dataType: "json",
                                            success: function(data) {
                                                console.log('Message Sent');
                                            }
                                        });
                                    } else if (opcion == 4) {
                                        Swal.fire("", "First Call Pausado!", "success");
                                    }

                                    $("#modalFirstCall").modal("hide");
                                    firstCallTable.ajax.reload(null, false);
                                    $(".tipoFirstCallView").css("display", "contents");
                                    $(".firsCallDescView").css("display", "none");
                                }
                            },
                        });
                    } catch (error) {
                        Swal.fire("", "Error: " + error, "error");
                    }
                } else {
                    Swal.fire("", "¡Llene todos los Campos!", "error");
                }
            });

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

                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());
                estado = $.trim(fila.find("td:eq(11)").text());

                if (usuarioActual == responsable) {
                    opcion = 2;
                    actionTrigg = 2;
                    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()));

                    $(".tipoFirstCallView").css("display", "none");
                    $(".firsCallDescView").css("display", "contents");
                    $(".modal-header").css("background-color", "#007bff");
                    $(".modal-header").css({
                        color: "white",
                        "font-weight": "900",
                    });
                    $(".modal-title").text("FINALIZAR FIRST CALL " + first_call);
                    $("#modalFirstCall").modal("show");

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

            /*
             * --------------------------- FUNCTION CHANGE PROYECTOS STATUS ---------------------------
             */
            $(document).on("click", ".btnBorrar", function() {
                fila = $(this).closest("tr");

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

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

                if (usuarioActual == responsable) {
                    if (estado == "ON-LINE") {
                        first_call_status = 3;
                        Swal.fire({
                            title: "¿Está seguro de deshabilitar este First Call " + first_call +
                                "?",
                            icon: "warning",
                            showCancelButton: true,
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'Confirmar'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                try {
                                    $.ajax({
                                        url: "{{ URL::asset('php/firstCallAPI.php') }}",
                                        type: "POST",
                                        datatype: "json",
                                        data: {
                                            opcion: opcion,
                                            first_call: first_call,
                                            usuarioActual: usuarioActual,
                                            first_call_status: first_call_status,
                                            secuencia_id: secuencia_id,
                                        },
                                        success: function() {
                                            Swal.fire("", "First Call Anulado!",
                                                "success");
                                            firstCallTable.ajax.reload(null, false);
                                        },
                                    });
                                } catch (error) {
                                    Swal.fire("", "Error: " + error, "error");
                                }
                            }
                        });
                    } else if (estado == "ANULADO") {
                        first_call_status = 1;
                        try {
                            $.ajax({
                                url: "{{ URL::asset('php/firstCallAPI.php') }}",
                                type: "POST",
                                datatype: "json",
                                data: {
                                    opcion: opcion,
                                    first_call: first_call,
                                    usuarioActual: usuarioActual,
                                    first_call_status: first_call_status,
                                    secuencia_id: secuencia_id,
                                },
                                success: function() {
                                    Swal.fire("", "First Call Habilitado!", "success");
                                    firstCallTable.ajax.reload(null, false);
                                },
                            });
                        } catch (error) {
                            Swal.fire("", "Error: " + error, "error");
                        }
                    } else {
                        Swal.fire(
                            "",
                            "First Call " +
                            first_call +
                            " Finalizado, NO puedes cambiar su Estado!",
                            "warning"
                        );
                    }
                } else {
                    Swal.fire(
                        "",
                        "NO puedes cambiar el estado del First Call " + first_call + "!",
                        "warning"
                    );
                }
            });




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

                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 = 4;
                    actionTrigg = 4;
                    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()));

                    $(".tipoFirstCallView").css("display", "none");
                    $(".firsCallDescView").css("display", "contents");
                    $(".modal-header").css("background-color", "yellow");
                    $(".modal-header").css({
                        color: "black",
                        "font-weight": "900",
                    });
                    $(".modal-title").text("PAUSAR FIRST CALL " + first_call);
                    $("#modalFirstCall").modal("show");

                } else {
                    Swal.fire(
                        "",
                        "NO puedes Pausar el First Call " + first_call + "!",
                        "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::asset('php/firstCallAPI.php') }}",
                            type: "POST",
                            datatype: "json",
                            data: {
                                secuencia_id: secuencia_id,
                                opcion: 5,
                            },
                            success: function(data) {
                                Swal.fire("", "First Call Reanudado!", "success");
                                firstCallTable.ajax.reload(null, false);
                            },
                        });
                    } catch (error) {
                        Swal.fire("", "Error: " + error, "error");
                    }


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














            /*  */
        });
    </script>
@endsection