@extends('layouts.app', ['activePage' => 'productos', 'titlePage' => __('Catalogos/Productos')])

@section('content')


<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card card-nav-tabs card-plain">
                        <div class="card-header card-header-primary">
                            <h4 class="card-title ">Atributos proyectos</h4>
                            <div class="nav-tabs-navigation">
                                <div class="nav-tabs-wrapper">
                                    <ul class="nav nav-pills nav-pills-primary" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link active" data-toggle="tab" href="#canales" role="tablist" aria-expanded="false">
                                                Canales
                                            </a>
                                        </li>
                                        <li class="nav-item" onclick="loadGridGiros()">
                                            <a class="nav-link" data-toggle="tab" href="#giros" role="tablist" aria-expanded="false">
                                                Tipo de proyecto
                                            </a>
                                        </li>
                                        <li class="nav-item" onclick="loadGridNiveles()">
                                            <a class="nav-link" data-toggle="tab" href="#niveles" role="tablist" aria-expanded="false">
                                                Niveles interlocutores
                                            </a>
                                        </li>
                                        <li class="nav-item" onclick="loadGridAvances()">
                                            <a class="nav-link" data-toggle="tab" href="#avances" role="tablist" aria-expanded="false">
                                                Avances de proyecto
                                            </a>
                                        </li>
                                        <li class="nav-item" onclick="loadGridPrioridades()">
                                            <a class="nav-link" data-toggle="tab" href="#prioridades" role="tablist" aria-expanded="false">
                                                Prioridades de proyecto
                                            </a>
                                        </li>
                                        <li class="nav-item" onclick="loadGridAlertas()">
                                            <a class="nav-link" data-toggle="tab" href="#alertas" role="tablist" aria-expanded="false">
                                                Alertas de proyecto
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="card-body">
                            <div class="tab-content tab-space">
                                <div class="tab-pane active" id="canales" aria-expanded="true">
                                    <div class="row">

                                        <div class="col-md-12 mt-3 text-right">
                                            <button type="button" class="btn btn-primary" id="addCanal">
                                                Nuevo canal
                                            </button>
                                        </div>
                                    </div>
                                    <div class="row ">
                                        <table class="table table-bordered table-hover" width="100%" id="gridCanales">
                                            <thead>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">ID</th>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">Descripción</th>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">Descripción corta</th>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">Fecha creación</th>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">Acciones</th>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="tab-pane" id="giros" aria-expanded="true">
                                    <div class="row">
                                        <div class="col-md-12 mt-3 text-right">
                                            <button type="button" class="btn btn-primary" id="addGiro">
                                                Nuevo tipo
                                            </button>
                                        </div>
                                    </div>
                                    <div class="row ">
                                        <table class="table table-bordered table-hover" width="100%" id="gridGiros">
                                            <thead>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">ID</th>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">Descripción</th>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">Descripción corta</th>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">Fecha creación</th>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">Acciones</th>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                                <div class="tab-pane" id="niveles" aria-expanded="true">
                                    <div class="row">
                                        <div class="col-md-12 mt-3 text-right">
                                            <button type="button" class="btn btn-primary" id="addNivel">
                                                Nuevo nivel
                                            </button>
                                        </div>
                                    </div>
                                    <div class="row ">
                                        <table class="table table-bordered table-hover" width="100%" id="gridNiveles">
                                            <thead>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">ID</th>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">Descripción</th>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">Descripción corta</th>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">Fecha creación</th>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">Acciones</th>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                                <div class="tab-pane" id="avances" aria-expanded="true">
                                    <div class="row">
                                        <div class="col-md-12 mt-3 text-right">
                                            <button type="button" class="btn btn-primary" id="addAvance">
                                                Nuevo porcentaje de avance
                                            </button>
                                        </div>
                                    </div>
                                    <div class="row ">
                                        <table class="table table-bordered table-hover" width="100%" id="gridAvances">
                                            <thead>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">ID</th>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">Porcentaje</th>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">Color</th>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">Fecha de creación</th>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">Acciones</th>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                                <div class="tab-pane" id="prioridades" aria-expanded="true">
                                    <div class="row">
                                        <div class="col-md-12 mt-3 text-right">
                                            <button type="button" class="btn btn-primary" id="addPrioridad">
                                                Nueva prioridad de proyecto
                                            </button>
                                        </div>
                                    </div>
                                    <div class="row ">
                                        <table class="table table-bordered table-hover" width="100%" id="gridPrioridades">
                                            <thead>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">ID</th>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">Prioridad</th>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">Periodo</th>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">Color</th>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">Fecha de creación</th>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">Acciones</th>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                                <div class="tab-pane" id="alertas" aria-expanded="true">
                                    <div class="row">
                                        <div class="col-md-12 mt-3 text-right">
                                            <button type="button" class="btn btn-primary" id="addAlerta">
                                                Nueva alerta de proyecto
                                            </button>
                                        </div>
                                    </div>
                                    <div class="row ">
                                        <table class="table table-bordered table-hover" width="100%" id="gridAlertas">
                                            <thead>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">ID</th>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">Días termino</th>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">Color</th>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">Fecha de creación</th>
                                                <th class="text-white  text-xxs font-weight-bolder opacity-7">Acciones</th>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalCanales" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-normal" id="titleModal">Agregar canal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <form id="form-save-canales" method="post">
                <input type="hidden" id="idCanal" name="idCanal">

                <div class="modal-body">
                    <div class="input-group input-group-static ">
                        <label for="">Descripción: <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="Descripcion" name="Descripcion" required>
                    </div>
                    <div class="input-group input-group-static">
                        <label for="">Descripción corta: <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="DescripcionCorta" name="DescripcionCorta" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>


<div class="modal fade" id="modalGiros" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-normal" id="titleModal">Agregar tipo de proyecto</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <form id="form-save-giro" method="post">
                <div class="modal-body">
                    <input type="hidden" name="idGiro" id="idGiro">
                    <div class="input-group input-group-static">
                        <label for="">Descripción: <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="DescripcionGiro" name="Descripcion" required>
                    </div>
                    <div class="input-group input-group-static">
                        <label for="">Descripción corta: <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="DescripcionCortaGiro" name="DescripcionCorta" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="modalNiveles" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-normal" id="titleModalNiveles">Agregar nivel</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <form id="form-save-niveles" method="post">
                <input type="hidden" id="idNivel" name="idNivel">

                <div class="modal-body">
                    <div class="input-group input-group-static ">
                        <label for="">Descripción: <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="DescripcionNivel" name="Descripcion" required>
                    </div>
                    <div class="input-group input-group-static">
                        <label for="">Descripción corta: <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="DescripcionCortaNivel" name="DescripcionCorta" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="modalAvances" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-normal" id="titleModalAvance">Agregar porcentaje de avance</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <form id="form-save-avances" method="post">
                <input type="hidden" id="idAvance" name="idAvance">

                <div class="modal-body">
                    <div class="input-group input-group-static ">
                        <label for="">Porcentaje: <span class="text-danger">*</span></label>
                        <input type="number" class="form-control" id="porcentaje" name="porcentaje" required>
                    </div>
                    <div class="input-group input-group-static">
                        <label for="">Color: <span class="text-danger">*</span></label>
                        <input type="color" class="form-control" id="color" name="color" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="modalPrioridades" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-normal" id="titleModalPrioridad">Agregar prioridad</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <form id="form-save-prioridades" method="post">
                <input type="hidden" id="idPrioridad" name="idPrioridad">

                <div class="modal-body">
                    <div class="input-group input-group-static ">
                        <label for="">Prioridad: <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="prioridad" name="prioridad" required>
                    </div>
                    <div class="input-group input-group-static ">
                        <label for="">Periodo: <span class="text-danger">*</span></label>
                        <input type="number" class="form-control" id="periodo" name="periodo" required>
                    </div>
                    <div class="input-group input-group-static">
                        <label for="">Color: <span class="text-danger">*</span></label>
                        <input type="color" class="form-control" id="color_p" name="color" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="modalAlertas" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-normal" id="titleModalAlerta">Agregar alerta</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <form id="form-save-alertas" method="post">
                <input type="hidden" id="idAlerta" name="idAlerta">

                <div class="modal-body">
                    <div class="input-group input-group-static ">
                        <label for="">Días de termino: <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="dias_termino" name="dias_termino" required>
                    </div>
                    <div class="input-group input-group-static">
                        <label for="">Color: <span class="text-danger">*</span></label>
                        <input type="color" class="form-control" id="color_al" name="color" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        loadGrid();
    });

    function loadGrid() {
        //$('#').DataTable();
        $('#gridCanales').dataTable().fnDestroy();
        $('#gridCanales td').css('white-space', 'initial');
        var table = $('#gridCanales').DataTable({
            dom: 'Bfrtip',
            processing: true,
            scrollX: true,
            scrollY: '50vh',
            scrollCollapse: true,
            ajax: {
                url: "{{url('catalogos/atributos-proyectos/get_canales')}}",
                type: "POST",
            },
            columns: [{
                    data: "Id"
                },
                {
                    data: "Descripcion"
                },
                {
                    data: "DescripcionCorta"
                },
                {
                    data: "fecha_creacion"
                },
                {
                    data: "acciones"
                },
            ],

            order: [
                [0, "desc"]
            ],
            buttons: [{
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copiar'
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel'
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fa fa-file-text-o"></i>',
                    titleAttr: 'CSV'
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF'
                }

            ],
        });


    }


    $('#addCanal').click(function() {
        $('#idCanal').val('');
        $('#Descripcion').val('');
        $('#DescripcionCorta').val('');
        $('#modalCanales').modal('show')
        $('#titleModal').text('Agregar canal')

    })


    $("#form-save-canales").on("submit", function(e) {
        e.preventDefault();
        var f = $(this);
        var formData = new FormData(document.getElementById("form-save-canales"));
        $('#loadingSave').modal('show');
        $.ajax({
                url: "{{ url('catalogos/atributos-proyectos/save_canal')}}",
                type: "post",
                data: formData,
                cache: false,
                contentType: false,
                processData: false
            })
            .done(function(resp) {
                setTimeout(() => {
                    showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje, 3000)
                    $('#gridCanales').DataTable().ajax.reload();
                    $('#modalCanales').modal('hide');
                }, 2000);

            }).fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
                setTimeout(() => {
                    $('#loadingSave').modal('hide')
                }, 2000);
            });

    });


    function editarCanal(id) {

        $.ajax({
                url: "{{url('catalogos/atributos-proyectos/get_canal')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    Id: id,
                }
            })
            .done(function(resp) {
                $('#idCanal').val(resp.data['Id']);
                $('#Descripcion').val(resp.data['Descripcion']);
                $('#DescripcionCorta').val(resp.data['DescripcionCorta']);

                $('#titleModal').text('Editar canal')
                $('#modalCanales').modal('show')
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function eliminarCanal(id, cliente) {
        var text = '';
        if (cliente == undefined)
            text = 'Existen clientes con el canal asignado.';

        Swal.fire({
            title: '¿Estas seguro de eliminar el canal?',
            text: text,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: 'Cancelar',
            confirmButtonText: 'Si, ¡hazlo!'
        }).then((result) => {
            if (result.value) {
                $('#loadingLoad').modal('show');

                $.ajax({
                        url: "{{url('catalogos/atributos-proyectos/delete_canal')}}",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            Id: id,
                        }
                    })
                    .done(function(resp) {
                        setTimeout(() => {
                            showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje, 3000)
                            $('#gridCanales').DataTable().ajax.reload();
                        }, 2000);
                    })
                    .fail(function() {
                        console.log("error");
                    })
                    .always(function() {
                        setTimeout(() => {
                            $('#loadingLoad').modal('hide')
                        }, 2000);
                    });
            }
        })
    }


    function loadGridGiros() {
        //$('#').DataTable();
        $('#gridGiros').dataTable().fnDestroy();
        $('#gridGiros td').css('white-space', 'initial');
        var table = $('#gridGiros').DataTable({
            dom: 'Bfrtip',
            processing: true,
            scrollX: true,
            scrollY: '50vh',
            scrollCollapse: true,
            ajax: {
                url: "{{url('catalogos/atributos-proyectos/get_giros')}}",
                type: "POST",
            },
            columns: [{
                    data: "Id"
                },
                {
                    data: "Descripcion"
                },
                {
                    data: "DescripcionCorta"
                },
                {
                    data: "fecha_creacion"
                },
                {
                    data: "acciones"
                },
            ],

            order: [
                [0, "desc"]
            ],
            buttons: [{
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copiar'
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel'
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fa fa-file-text-o"></i>',
                    titleAttr: 'CSV'
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF'
                }

            ],
        });


    }

    $('#addGiro').click(function() {
        $('#idGiro').val('');
        $('#DescripcionGiro').val('');
        $('#DescripcionCortaGiro').val('');
        $('#modalGiros').modal('show')
        $('#titleModalLista').text('Agregar tipo de proyecto')

    })

    $("#form-save-giro").on("submit", function(e) {
        e.preventDefault();
        var f = $(this);
        var formData = new FormData(document.getElementById("form-save-giro"));
        $('#loadingSave').modal('show');
        $.ajax({
                url: "{{ url('catalogos/atributos-proyectos/save_giro')}}",
                type: "post",
                data: formData,
                cache: false,
                contentType: false,
                processData: false
            })
            .done(function(resp) {

                setTimeout(() => {
                    if (resp.result == 1) {

                        showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje, 3000)
                        $('#gridGiros').DataTable().ajax.reload();
                        $('#modalGiros').modal('hide');
                    } else {
                        showNotification('error', 'top', 'center', 'warning', '¡ERROR!', resp.mensaje, 3000)

                    }
                }, 2000);

            }).fail(function(xhr, textStatus, errorThrown) {
                console.log("error");
                showNotification('error', 'top', 'center', 'warning', '¡ERROR!', xhr.responseText, 3000)

            })
            .always(function() {
                console.log("complete");
                setTimeout(() => {
                    $('#loadingSave').modal('hide')
                }, 2000);
            });

    });

    function editarGiro(id) {

        $.ajax({
                url: "{{url('catalogos/atributos-proyectos/get_giro')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    Id: id,
                }
            })
            .done(function(resp) {

                $('#idGiro').val(resp.data['Id']);
                $('#DescripcionGiro').val(resp.data['Descripcion']);
                $('#DescripcionCortaGiro').val(resp.data['DescripcionCorta']);
                $('#titleModalLista').text('Editar tipo de proyecto')
                $('#modalGiros').modal('show')
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function eliminarGiro(id) {
        Swal.fire({
            title: '¿Estas seguro de eliminar el giro?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: 'Cancelar',
            confirmButtonText: 'Si, ¡hazlo!'
        }).then((result) => {
            if (result.value) {
                $('#loadingLoad').modal('show');

                $.ajax({
                        url: "{{url('catalogos/atributos-proyectos/delete_giro')}}",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            Id: id,
                        }
                    })
                    .done(function(resp) {
                        setTimeout(() => {
                            showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje, 3000)
                            $('#gridGiros').DataTable().ajax.reload();
                        }, 2000);
                    })
                    .fail(function() {
                        console.log("error");
                    })
                    .always(function() {
                        setTimeout(() => {
                            $('#loadingLoad').modal('hide')
                        }, 2000);
                    });
            }
        })
    }

    function loadGridNiveles() {
        //$('#').DataTable();
        $('#gridNiveles').dataTable().fnDestroy();
        $('#gridNiveles td').css('white-space', 'initial');
        var table = $('#gridNiveles').DataTable({
            dom: 'Bfrtip',
            processing: true,
            scrollX: true,
            scrollY: '50vh',
            scrollCollapse: true,
            ajax: {
                url: "{{url('catalogos/atributos-proyectos/get_niveles')}}",
                type: "POST",
            },
            columns: [{
                    data: "Id"
                },
                {
                    data: "Descripcion"
                },
                {
                    data: "DescripcionCorta"
                },
                {
                    data: "fecha_creacion"
                },
                {
                    data: "acciones"
                },
            ],

            order: [
                [0, "desc"]
            ],
            buttons: [{
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copiar'
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel'
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fa fa-file-text-o"></i>',
                    titleAttr: 'CSV'
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF'
                }

            ],
        });


    }


    $('#addNivel').click(function() {
        $('#idNivel').val('');
        $('#DescripcionNivel').val('');
        $('#DescripcionCortaNivel').val('');
        $('#modalNiveles').modal('show')
        $('#titleModalNiveles').text('Agregar niveles')

    })


    $("#form-save-niveles").on("submit", function(e) {
        e.preventDefault();
        var f = $(this);
        var formData = new FormData(document.getElementById("form-save-niveles"));
        $('#loadingSave').modal('show');
        $.ajax({
                url: "{{ url('catalogos/atributos-proyectos/save_nivel')}}",
                type: "post",
                data: formData,
                cache: false,
                contentType: false,
                processData: false
            })
            .done(function(resp) {
                setTimeout(() => {
                    showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje, 3000)
                    $('#gridNiveles').DataTable().ajax.reload();
                    $('#modalNiveles').modal('hide');
                }, 2000);

            }).fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
                setTimeout(() => {
                    $('#loadingSave').modal('hide')
                }, 2000);
            });

    });


    function editarNivel(id) {

        $.ajax({
                url: "{{url('catalogos/atributos-proyectos/get_nivel')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    Id: id,
                }
            })
            .done(function(resp) {
                $('#idNivel').val(resp.data['Id']);
                $('#DescripcionNivel').val(resp.data['Descripcion']);
                $('#DescripcionCortaNivel').val(resp.data['DescripcionCorta']);

                $('#titleModalNiveles').text('Editar nivel')
                $('#modalNiveles').modal('show')
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function eliminarNivel(id) {
        Swal.fire({
            title: '¿Estas seguro de eliminar el nivel?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: 'Cancelar',
            confirmButtonText: 'Si, ¡hazlo!'
        }).then((result) => {
            if (result.value) {
                $('#loadingLoad').modal('show');

                $.ajax({
                        url: "{{url('catalogos/atributos-proyectos/delete_nivel')}}",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            Id: id,
                        }
                    })
                    .done(function(resp) {
                        setTimeout(() => {
                            showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje, 3000)
                            $('#gridNiveles').DataTable().ajax.reload();
                        }, 2000);
                    })
                    .fail(function() {
                        console.log("error");
                    })
                    .always(function() {
                        setTimeout(() => {
                            $('#loadingLoad').modal('hide')
                        }, 2000);
                    });
            }
        })
    }

    function loadGridAvances() {
        //$('#').DataTable();
        $('#gridAvances').dataTable().fnDestroy();
        $('#gridAvances td').css('white-space', 'initial');
        var table = $('#gridAvances').DataTable({
            dom: 'Bfrtip',
            processing: true,
            scrollX: true,
            scrollY: '50vh',
            scrollCollapse: true,
            ajax: {
                url: "{{url('catalogos/atributos-proyectos/get_avances')}}",
                type: "POST",
            },
            columns: [{
                    data: "id"
                },
                {
                    data: "porcentaje"
                },
                {
                    data: "color"
                },
                {
                    data: "fecha_creacion"
                },
                {
                    data: "acciones"
                },
            ],

            order: [
                [1, "asc"]
            ],
            buttons: [{
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copiar'
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel'
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fa fa-file-text-o"></i>',
                    titleAttr: 'CSV'
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF'
                }

            ],
        });


    }


    $('#addAvance').click(function() {
        $('#idAvance').val('');
        $('#porcentaje').val('');
        $('#color').val('');
        $('#modalAvances').modal('show')
        $('#titleModalAvance').text('Agregar porcentaje de avance')

    })


    $("#form-save-avances").on("submit", function(e) {
        e.preventDefault();
        var f = $(this);
        var formData = new FormData(document.getElementById("form-save-avances"));
        $('#loadingSave').modal('show');
        $.ajax({
                url: "{{ url('catalogos/atributos-proyectos/save_avance')}}",
                type: "post",
                data: formData,
                cache: false,
                contentType: false,
                processData: false
            })
            .done(function(resp) {
                setTimeout(() => {
                    showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje, 3000)
                    $('#gridAvances').DataTable().ajax.reload();
                    $('#modalAvances').modal('hide');
                }, 2000);

            }).fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
                setTimeout(() => {
                    $('#loadingSave').modal('hide')
                }, 2000);
            });

    });


    function editarAvance(id) {

        $.ajax({
                url: "{{url('catalogos/atributos-proyectos/get_avance')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    Id: id,
                }
            })
            .done(function(resp) {
                $('#idAvance').val(resp.data['id']);
                $('#porcentaje').val(resp.data['porcentaje']);
                $('#color').val(resp.data['color']);

                $('#titleModalAvance').text('Editar porcentaje de avance')
                $('#modalAvances').modal('show')
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function eliminarAvance(id) {
        Swal.fire({
            title: '¿Estas seguro de eliminar el porcentaje avance?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: 'Cancelar',
            confirmButtonText: 'Si, ¡hazlo!'
        }).then((result) => {
            if (result.value) {
                $('#loadingLoad').modal('show');

                $.ajax({
                        url: "{{url('catalogos/atributos-proyectos/delete_avance')}}",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            id: id,
                        }
                    })
                    .done(function(resp) {
                        setTimeout(() => {
                            showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje, 3000)
                            $('#gridAvances').DataTable().ajax.reload();
                        }, 2000);
                    })
                    .fail(function() {
                        console.log("error");
                    })
                    .always(function() {
                        setTimeout(() => {
                            $('#loadingLoad').modal('hide')
                        }, 2000);
                    });
            }
        })
    }



    function loadGridPrioridades() {
        //$('#').DataTable();
        $('#gridPrioridades').dataTable().fnDestroy();
        $('#gridPrioridades td').css('white-space', 'initial');
        var table = $('#gridPrioridades').DataTable({
            dom: 'Bfrtip',
            processing: true,
            scrollX: true,
            scrollY: '50vh',
            scrollCollapse: true,
            ajax: {
                url: "{{url('catalogos/atributos-proyectos/get_prioridades')}}",
                type: "POST",
            },
            columns: [{
                    data: "id"
                },
                {
                    data: "prioridad"
                },
                {
                    data: "periodo"
                },
                {
                    data: "color"
                },
                {
                    data: "fecha_creacion"
                },
                {
                    data: "acciones"
                },
            ],

            order: [
                [1, "asc"]
            ],
            buttons: [{
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copiar'
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel'
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fa fa-file-text-o"></i>',
                    titleAttr: 'CSV'
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF'
                }

            ],
        });


    }


    $('#addPrioridad').click(function() {
        $('#idPrioridad').val('');
        $('#prioridad').val('');
        $('#periodo').val('');
        $('#color_p').val('');
        $('#modalPrioridades').modal('show')
        $('#titleModalPrioridad').text('Agregar prioridad de proyecto')

    })


    $("#form-save-prioridades").on("submit", function(e) {
        e.preventDefault();
        var f = $(this);
        var formData = new FormData(document.getElementById("form-save-prioridades"));
        $('#loadingSave').modal('show');
        $.ajax({
                url: "{{ url('catalogos/atributos-proyectos/save_prioridad')}}",
                type: "post",
                data: formData,
                cache: false,
                contentType: false,
                processData: false
            })
            .done(function(resp) {
                setTimeout(() => {
                    showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje, 3000)
                    $('#gridPrioridades').DataTable().ajax.reload();
                    $('#modalPrioridades').modal('hide');
                }, 2000);

            }).fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
                setTimeout(() => {
                    $('#loadingSave').modal('hide')
                }, 2000);
            });

    });


    function editarPrioridad(id) {

        $.ajax({
                url: "{{url('catalogos/atributos-proyectos/get_prioridad')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                }
            })
            .done(function(resp) {
                $('#idPrioridad').val(resp.data['id']);
                $('#prioridad').val(resp.data['prioridad']);
                $('#periodo').val(resp.data['periodo']);
                $('#color_p').val(resp.data['color']);

                $('#titleModalPrioridad').text('Editar prioridad de proyecto')
                $('#modalPrioridades').modal('show')
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function eliminarPrioridad(id) {
        Swal.fire({
            title: '¿Estas seguro de eliminar la prioridad de proyectos?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: 'Cancelar',
            confirmButtonText: 'Si, ¡hazlo!'
        }).then((result) => {
            if (result.value) {
                $('#loadingLoad').modal('show');

                $.ajax({
                        url: "{{url('catalogos/atributos-proyectos/delete_prioridad')}}",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            id: id,
                        }
                    })
                    .done(function(resp) {
                        setTimeout(() => {
                            showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje, 3000)
                            $('#gridPrioridades').DataTable().ajax.reload();
                        }, 2000);
                    })
                    .fail(function() {
                        console.log("error");
                    })
                    .always(function() {
                        setTimeout(() => {
                            $('#loadingLoad').modal('hide')
                        }, 2000);
                    });
            }
        })
    }


    function loadGridAlertas() {
        //$('#').DataTable();
        $('#gridAlertas').dataTable().fnDestroy();
        $('#gridAlertas td').css('white-space', 'initial');
        var table = $('#gridAlertas').DataTable({
            dom: 'Bfrtip',
            processing: true,
            scrollX: true,
            scrollY: '50vh',
            scrollCollapse: true,
            ajax: {
                url: "{{url('catalogos/atributos-proyectos/get_alertas')}}",
                type: "POST",
            },
            columns: [{
                    data: "id"
                },
                {
                    data: "dias_termino"
                },
                {
                    data: "color"
                },
                {
                    data: "fecha_creacion"
                },
                {
                    data: "acciones"
                },
            ],

            order: [
                [1, "asc"]
            ],
            buttons: [{
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copiar'
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel'
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fa fa-file-text-o"></i>',
                    titleAttr: 'CSV'
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF'
                }

            ],
        });


    }


    $('#addAlerta').click(function() {
        $('#idAlerta').val('');
        $('#dias_termino').val('');
        $('#color_al').val('');
        $('#modalAlertas').modal('show')
        $('#titleModalAlerta').text('Agregar alerta de proyecto')

    })


    $("#form-save-alertas").on("submit", function(e) {
        e.preventDefault();
        var f = $(this);
        var formData = new FormData(document.getElementById("form-save-alertas"));
        $('#loadingSave').modal('show');
        $.ajax({
                url: "{{ url('catalogos/atributos-proyectos/save_alerta')}}",
                type: "post",
                data: formData,
                cache: false,
                contentType: false,
                processData: false
            })
            .done(function(resp) {
                setTimeout(() => {
                    showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje, 3000)
                    $('#gridAlertas').DataTable().ajax.reload();
                    $('#modalAlertas').modal('hide');
                }, 2000);

            }).fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
                setTimeout(() => {
                    $('#loadingSave').modal('hide')
                }, 2000);
            });

    });


    function editarAlerta(id) {

        $.ajax({
                url: "{{url('catalogos/atributos-proyectos/get_alerta')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                }
            })
            .done(function(resp) {
                $('#idAlerta').val(resp.data['id']);
                $('#dias_termino').val(resp.data['dias_termino']);
                $('#color_al').val(resp.data['color']);

                $('#titleModalAlerta').text('Editar alerta de proyecto')
                $('#modalAlertas').modal('show')
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function eliminarAlerta(id) {
        Swal.fire({
            title: '¿Estas seguro de eliminar la alerta de proyectos?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: 'Cancelar',
            confirmButtonText: 'Si, ¡hazlo!'
        }).then((result) => {
            if (result.value) {
                $('#loadingLoad').modal('show');

                $.ajax({
                        url: "{{url('catalogos/atributos-proyectos/delete_alerta')}}",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            id: id,
                        }
                    })
                    .done(function(resp) {
                        setTimeout(() => {
                            showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje, 3000)
                            $('#gridAlertas').DataTable().ajax.reload();
                        }, 2000);
                    })
                    .fail(function() {
                        console.log("error");
                    })
                    .always(function() {
                        setTimeout(() => {
                            $('#loadingLoad').modal('hide')
                        }, 2000);
                    });
            }
        })
    }
</script>
@endsection