@extends('layouts.menu')

@section('tittle')
    GESTIÓN DE GRUPOS
@endsection

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

            <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">GESTIÓN DE GRUPOS</h3>
                        </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="gruposTable" 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">Nombre</th>
                                    <th class="text-center">Resuelve Ticket Común</th>
                                    <th class="text-center">Prioridad</th>
                                    <th class="text-center">Departamento</th>
                                    <th class="text-center">Estado</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>

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

        </div>
    </div>

    {{-- MODAL PARA NUEVA INFRAESTRUCTURA --}}
    <div class="modal fade" id="modalGrupos" data-bs-keyboard="false" data-bs-backdrop="static" role="dialog"
        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>
                </div>
                <form id="formGrupos">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for="">Nombre del Grupo:</label>
                                    <input type="text" class="form-control form-control-sm" id="groupName">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for="">Prioridad:</label>
                                    <select type="text" class="form-select form-select-sm" name="prioridad"
                                        id="prioridad">
                                        <option value="0">Seleccione una Prioridad</option>
                                        @foreach ($prioridadesData as $prioridad)
                                            <option value="{{ $prioridad->id_prioridad }}">
                                                {{ $prioridad->prioridad }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for="">Departamento:</label>
                                    <select type="text" class="form-select form-select-sm" name="departamento"
                                        id="departamento">
                                        <option value="0">Seleccione un Departamento</option>
                                        @foreach ($deptosData as $depto)
                                            <option value="{{ $depto->id_departamento }}">
                                                {{ $depto->departamento }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="text-right">
                            <input class="form-check-input" type="checkbox" value="0" id="resuelveTicketComun">
                            <label class="form-check-label" for="resuelveTicketComun">
                                <b> Puede Resolver Ticket Comun </b>
                            </label>
                        </div>
                        <div class="modal-footer">
                            <input type="hidden" id="hidden_id">
                            <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() {
            $('#settingsMenu, #gestionGruposMenu').addClass('active');

            //$('#groupName').lettersOnly();

            gruposTable = $("#gruposTable").DataTable({
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                ajax: {
                    url: "{{ url('/admin/configuraciones/gestionGrupos/getCreatedGroups') }}",
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "id_grupo"
                    },
                    {
                        data: "nombre"
                    },
                    {
                        data: "resuelve_ticket_comun",
                        className: "text-center",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "0") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">NO PUEDE RESOLVER</span>';
                            } else if (data == "1") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">PUEDE RESOLVER</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "prioridadGrupo",
                        className: "text-center",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "URGENTE") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' +
                                    data +
                                    "</span>";
                            } else if (data == "ALTA") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' +
                                    data +
                                    "</span>";
                            } else if (data == "MEDIA") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            } else if (data == "BAJA") {
                                badge +=
                                    '<span class="badge badge-pill badge-info">' +
                                    data +
                                    "</span>";
                            } else {
                                badge +=
                                    '<span class="badge badge-pill badge-light">' +
                                    data +
                                    "</span>";
                            }

                            return badge;
                        },
                    },
                    {
                        data: "departamento"
                    },
                    {
                        data: "estado",
                        className: "text-center",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "ACTIVO") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' +
                                    data +
                                    "</span>";
                            } else if (data == "EN INACTIVO") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' +
                                    data +
                                    "</span>";
                            }

                            return badge;
                        },
                    },
                    {
                        defaultContent: "<div class='text-center'><div class='btn-group'><button class='btn btn-primary btn-sm btnEdit' data-aos='fade-in' type='button' data-toggle='modal' title='Editar' alt='Editar'><i class='material-icons'>edit</i></button><button class='btn btn-warning btn-sm btnUsers' data-aos='fade-in' type='button' data-toggle='modal' title='Usuarios del Grupo' alt='Usuarios del Grupo'><i class='material-icons'>group</i></button></div></div>",
                    },
                ],
                /* columnDefs: [{
                    targets: invisibleColumns,
                    visible: false,
                }, ], */
            });

            $("#resuelveTicketComun").click(function() {
                var x = $("#resuelveTicketComun").is(":checked");

                if (x == true) {
                    $("#resuelveTicketComun").val(1);
                } else if (x == false) {
                    $("#resuelveTicketComun").val(0);
                }
            });

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

            /* FUNCTION OPEN MODAL + EDIT GROUP */
            $('#btnNuevo').click(function(e) {
                group_id = $('#hidden_id').val();
                estado = 1;

                $("#formGrupos").trigger("reset");
                $(".modal-header").css("background-color", "#17a2b8");
                $(".modal-header").css({
                    color: "white",
                    "font-weight": "900",
                });
                $(".modal-title").text("Nuevo Grupo");
                $('#modalGrupos').modal("show");
            });

            $(document).on("click", ".btnEdit", function() {
                $("#formGrupos").trigger("reset");

                fila = $(this).closest("tr");
                group_id = $.trim(fila.find("td:eq(0)").text());
                group_name = $.trim(fila.find("td:eq(1)").text());
                resuelve = $.trim(fila.find("td:eq(2)").text());
                prioridad = $.trim(fila.find("td:eq(3)").text());
                departamento = $.trim(fila.find("td:eq(4)").text());
                estado = 2;

                $('#prioridad option').each(function() {
                    if ($(this).text() === prioridad) {
                        $(this).prop('selected', true);
                        prioridad = true;
                        return false; // Break the loop
                    }
                });
                $('#departamento option').each(function() {
                    if ($(this).text() === departamento) {
                        $(this).prop('selected', true);
                        departamento = true;
                        return false; // Break the loop
                    }
                });

                var x = $("#resuelveTicketComun").is(":checked");

                if (resuelve == "NO PUEDE RESOLVER") {
                    $('#resuelveTicketComun').val(0);
                    $("#resuelveTicketComun").prop("checked", false);
                } else {
                    $("#resuelveTicketComun").val(1);
                    $("#resuelveTicketComun").prop("checked", true);
                }

                $('#hidden_id').val(group_id);
                $('#groupName').val(group_name);

                $(".modal-header").css("background-color", "#007bff");
                $(".modal-header").css({
                    color: "white",
                    "font-weight": "900",
                });
                $(".modal-title").text("Editar Grupo: " + group_name);
                $('#modalGrupos').modal("show");
            });

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

                groupName = $.trim($('#groupName').val());
                resuelveTicketComun = $('#resuelveTicketComun').val();
                prioridad = $('#prioridad').val();
                departamento = $('#departamento').val();

                if (!$.trim($('#groupName').val()) || prioridad == 0 || departamento == 0) {
                    Swal.fire("", "Debe llenar y/o seleccionar 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: "{{ url('/admin/configuraciones/gestionGrupos/createGroup') }}",
                            type: "POST",
                            datatype: "json",
                            data: {
                                group_id: group_id,
                                groupName: groupName,
                                resuelveTicketComun: resuelveTicketComun,
                                estado: estado,
                                prioridad: prioridad,
                                departamento: departamento
                            },
                            success: function(data) {
                                if (data.result == 1 || data.result == "1") {
                                    Swal.fire("", "Ya existe un grupo con este nombre!",
                                        "warning");
                                } else if (data.result == 0 || data.result == "0") {
                                    $("#modalGrupos").modal("hide");
                                    $('#hidden_id').val('0');

                                    gruposTable.ajax.reload(null, false);

                                    Swal.fire("", "Grupo Creado!", "success");
                                } else {
                                    $("#modalGrupos").modal("hide");
                                    $('#hidden_id').val('0');

                                    gruposTable.ajax.reload(null, false);

                                    Swal.fire("", "Grupo Editado!", "success");
                                }

                                $('#resuelveTicketComun').val(0);
                            }
                        });
                    } catch (error) {
                        Swal.fire("", "Error: " + error, "danger");
                    }
                }
            });

            $(document).on("click", ".btnUsers", function() {

                fila = $(this).closest("tr");
                group_id = $.trim(fila.find("td:eq(0)").text());
                groupName = $.trim(fila.find("td:eq(1)").text());

                window.location = "gestionGrupos/usuariosGrupo/" + group_id + "/" + groupName;
            });

        });
    </script>
@endsection