{% extends 'DAC_MAIN.html' %}


{% block title %} MOTIVOS VENTAS PERDIDAS {% endblock %}

{% block body %}

{% include 'complementos/btnBack.html' %}

<div class="container-margin p-3">
    <div class="row">
        <h4 class=""> <i class="material-icons nav__icon">monetization_on</i>
            MOTIVOS VENTAS PERDIDAS
        </h4>

        <input type="hidden" id="user_id" value="{{id}}">
        <input type="hidden" id="user_name" value="{{username}}">

        <div class="col-sm p-2 shadow-lg border m-2 rounded-4">

            <div class="row d-flex justify-content-end align-items-end">

                <div class="col-sm-2">
                    <button class="btn btn-sm btn-secondary create__buttons w-100" id="btnCrearMotivo"
                        title="Nuevo Motivo">Nuevo</button>
                </div>

            </div>

            <div class="row p-2">

                <div class="row d-flex justify-content-end">

                    <span><b>Filtros Rápidos</b></span>

                    <div class="mainFilters">

                        <div class="row f-flex justify-content-end">


                            <div class="col-sm">
                                <label for="">Motivo</label>
                                <input type="text" class="form-control form-control-sm tableMainFilters"
                                    id="filterMotivoTable" placeholder="Motivo">
                            </div>
                            <div class="col-sm">
                                <label for="">Descripcion</label>
                                <input type="text" class="form-control form-control-sm tableMainFilters"
                                    id="filterDescripcionTable" placeholder="Descripcion">
                            </div>
                            <div class="col-sm">
                                <label for="">Tipo</label>
                                <select class="form-select form-select-sm filterStyle text-nowrap"
                                    name="filterTipoTable" id="filterTipoTable">
                                    <option value="">TODOS</option>
                                    <option value="Seleccionables">SELECCIONABLE</option>
                                    <option value="NO Seleccionable">NO SELECCIONABLE</option>
                                </select>
                            </div>
                            <div class="col-sm">
                                <label for="">Estado</label>
                                <select class="form-select form-select-sm filterStyle text-nowrap"
                                    name="filterStatusTable" id="filterStatusTable">
                                    <option value="">TODOS</option>
                                    <option value="Activo">ACTIVOS</option>
                                    <option value="Anulado">ANULADOS</option>
                                </select>
                            </div>

                        </div>

                    </div>
                </div>

            </div>

            <br>

            <div class="row">


                <div class="table-responsive">

                    <table id="tablaMotivos"
                        class="table rounded-4 table-sm table-bordered table-striped align-middle mb-0 table-principal"
                        style="width:100%">
                        <thead class="bg-light">
                            <tr>
                                <th class="text-center">#</th>
                                <th class="text-center">Motivo</th>
                                <th class="text-center">Descripción</th>
                                <th class="text-center">Tipo</th>
                                <th class="text-center">Estado</th>
                                <th class="text-center">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>

                </div>


            </div>

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

{% include 'modales/modalMotivosVentasPerdidas.html' %}

{% endblock %}



{% block scripts %}


<script>
    $(document).ready(function () {
        var buttons = "Bfrtlip";

        var csrfToken = "{{ csrf_token }}";

        tablaMotivos = $('#tablaMotivos').DataTable({
            scrollX: true,
            scrollCollapse: true,
            scrollY: '400px',
            pageLength: 50,
            initComplete: function () {

            },
            ajax: {
                beforeSend: function (xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader(
                            'X-CSRF-Token',
                            $(
                                'meta[name="csrf-token"]'
                            ).attr('content'));
                    }
                },
                url: `{% url 'listMotivosVentasPerdidas' %}`,
                type: "GET",
                dataScr: 'data',
                /* data: {
                    csrfmiddlewaretoken: csrfToken
                }, */
            },
            dom: "Bfrtip",
            language: {
                url: "//cdn.datatables.net/plug-ins/1.11.5/i18n/es-ES.json",
            },
            buttons: [{
                extend: 'excel',
                text: '<i class="fas fa-file-excel"></i>',
                titleAttr: 'Excel',
                className: 'btn btn-success',
            },
            {
                extend: 'pdf',
                text: '<i class="fas fa-file-pdf"></i>',
                titleAttr: 'PDF',
                className: 'btn btn-danger',
            },
            {
                extend: 'print',
                text: '<i class="fas fa-print"></i>',
                titleAttr: 'Imprimir',
                className: 'btn btn-null',
                orientation: 'landscape'
            }
            ],
            columns: [
                {
                    data: 'id_motivo',
                    width: '8%'
                },
                {
                    data: 'nombre_motivo'
                },
                {
                    data: 'descripcion_motivo'
                },
                {
                    data: "tipo",
                    className: "text-center",
                    render: function (data, type, row) {
                        var badge = "";
                        if (data == "1" || data == 1) {
                            badge +=
                                '<span class="badge badge-pill badge-success">Seleccionables</span>';
                        } else {
                            badge +=
                                '<span class="badge badge-pill badge-disabled">NO Seleccionable</span>';
                        }

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

                        return badge;
                    },
                },
                {
                    defaultContent: "<div class='text-center'><div class='btn-group'><button class='btn btn-sm btn-warning btnEdit' title='Editar'><i class='material-icons'>edit</i></button>  <button class='btn btn-sm btn-danger btnStatus' title='Cambiar Estado'><i class='material-icons'>change_circle</i></button>  </div></div>",
                }
            ],
            order: [[1, "asc"]]
        });

        $('#filterMotivoTable').keyup(function () {
            tablaMotivos.column(1).search(this.value).draw();
        });
        $('#filterDescripcionTable').keyup(function () {
            tablaMotivos.column(2).search(this.value).draw();
        });
        $('#filterTipoTable').change(function () {
            tablaMotivos.column(3).search(this.value, true, false).draw();
        });
        $('#filterStatusTable').change(function () {
            tablaMotivos.column(4).search(this.value).draw();
        });

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

            $('#motivosForm').trigger('reset');
            $('#modalMotivosVP').modal('show');
            $('#modalMotivosVPLabel').text('NUEVO MOTIVO VENTA PERDIDA');

            id_motivo = null;
            $('#opcion').val(1);

        });



        $(document).on('click', '.btnEdit', function () {
            fila = $(this).closest('tr');

            $('#motivosForm').trigger('reset');

            id_motivo = fila.find("td:eq(0)").text();
            motivo = fila.find("td:eq(1)").text();
            descripcion = fila.find("td:eq(2)").text();
            tipo = fila.find("td:eq(3)").text();

            if (tipo == "Seleccionable") {
                tipo = 1;
            } else {
                tipo = 2;
            }

            $('#id_motivo').val(id_motivo);
            $('#nombreMotivo').val(motivo);
            $('#descripcionMotivo').val(descripcion);
            $('#tipoMotivo').val(tipo).change();
            $('#opcion').val(2);

            $('#modalMotivosVP').modal('show');
            $('#modalMotivosVPLabel').text('EDITAR MOTIVO ' + motivo);
        });


        $('#motivosForm').submit(function (e) {
            e.preventDefault();


            id_motivo = $('#id_motivo').val();
            motivo = $('#nombreMotivo').val();
            descripcion = $('#descripcionMotivo').val();
            tipo = $('#tipoMotivo').val();
            opcion = $('#opcion').val();

            username = $('#user_name').val();

            if (!$('#nombreMotivo').val() || !$('#descripcionMotivo').val() || tipo == "#") {
                Swal.fire("", "Debes llenar y/o seleccionar TODOS los campos!", "warning");
            } else {
                try {
                    $.ajax({
                        url: "{% url 'saveEditMotivosVP' %}",
                        type: "POST",
                        datatype: "json",
                        async: false,
                        data: {
                            id_motivo: id_motivo,
                            motivo: motivo,
                            descripcion: descripcion,
                            tipo: tipo,
                            username: username,
                            opcion: opcion,
                            csrfmiddlewaretoken: csrfToken
                        },
                        success: function (data) {
                            if (data.save == 1) {

                                if (opcion == 1) {
                                    if (data.existe == 1) {
                                        Swal.fire("", "Ya EXISTE este Motivo!", "warning");
                                    } else {
                                        Swal.fire("", "Motivo Creado!", "success");

                                        $('#motivosForm').trigger('reset');
                                        $('#modalMotivosVP').modal('hide');
                                    }
                                } else {
                                    Swal.fire("", "Motivo Editado!", "success");

                                    $('#motivosForm').trigger('reset');
                                    $('#modalMotivosVP').modal('hide');
                                }

                                tablaMotivos.ajax.reload(null, false);


                            } else {

                                Swal.fire("", "Error D: " + data.error,
                                    "error");

                            }
                        },
                    });
                } catch (error) {
                    Swal.fire("", "Error A: " + error, "error")
                }
            }



        });


        $(document).on('click', '.btnStatus', function () {
            fila = $(this).closest('tr');

            id_motivo = fila.find("td:eq(0)").text();
            motivo = fila.find("td:eq(1)").text();
            descripcion = fila.find("td:eq(2)").text();
            estado = fila.find("td:eq(4)").text();

            username = $('#user_name').val();

            if (estado == 'Activo') {
                value = 3;
                alert = 'ANULAR';
                message = 'Motivo Anulado!';
            } else {
                value = 2;
                alert = 'HABILITAR';
                message = 'Motivo Habilitado!';
            }


            Swal.fire({
                title: "Estás Seguro de " + alert + " este Motivo?",
                text: "Al confirmar debes esperar el mensaje de finalización para poder continuar!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Confirmar!',
                didOpen: () => {
                    Swal.getConfirmButton().addEventListener('click', function () {
                        this.disabled = true;
                    });
                }
            }).then((result) => {
                if (result.isConfirmed) {

                    try {
                        $.ajax({
                            url: "{% url 'updateStatusMotivos' %}",
                            type: "POST",
                            datatype: "json",
                            async: false,
                            data: {
                                id_motivo: id_motivo,
                                value: value,
                                username: username,
                                csrfmiddlewaretoken: csrfToken
                            },
                            success: function (data) {
                                if (data.save == 1) {

                                    Swal.fire("", message, "success");
                                    tablaMotivos.ajax.reload(null, false);

                                } else {

                                    Swal.fire("", "Error L: " + data.error,
                                        "error");

                                }
                            },
                        });
                    } catch (error) {
                        Swal.fire("", "Error A: " + error, "error")
                    }

                }
            });


        });

    });
</script>



{% endblock %}