import ClassSelect from '../../components/select2.js';

$(() => {

    let otsFilter = '';

    const selectOts = new ClassSelect($('#buscadorPedidos'), '/etiquetasTitulos/otList', "", true);
    selectOts.init();

    const selectDirecciones = new ClassSelect($('#selectDirecciones'), '/etiquetasTitulos/addList', "", true, {
        ot_id: () => selectOts.getVal()
    });
    selectDirecciones.init();

    selectOts.item.on('select2:open', () => {
        $('.select-direcciones').addClass('d-none');
        $('.add-etiqueta').addClass('d-none');
    })
    selectOts.item.on('change', () => {
        selectDirecciones.empty();
        $('.add-etiqueta').addClass('d-none');
        $('.select-direcciones').removeClass('d-none');
    })
    selectDirecciones.item.on('select2:open', () => {
        $('.add-etiqueta').addClass('d-none');
    })

    selectDirecciones.item.on('change', () => {
        $('.add-etiqueta').removeClass('d-none');
    })

    $('#btnAddEtiqueta').on('click', () => {

        Swal.fire({
            title: 'Unidades por caja',
            text: 'Seleccione la cantidad de unidades por caja',
            icon: 'info',
            input: 'text',
            inputLabel: 'Unidades/caja',
            inputValue: 0,
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            confirmButtonText: 'Aceptar',
            cancelButtonText: 'Cancelar',
            customClass: {
                confirmButton: 'btn btn-primary me-1',
                cancelButton: 'btn btn-secondary'
            },
            buttonsStyling: false
        }).then((result) => {
            if (result.isConfirmed) {
                const unidades_caja = result.value;
                const url = '/etiquetasTitulos/newEtiquetaTitulos';
                const data = {
                    ot_id: selectOts.getVal(),
                    direccion: selectDirecciones.getText(),
                    unidades_caja: unidades_caja
                };
                $.post(
                    url,
                    data,
                    function (response) {
                        if (response.status) {
                            tableEtiquetas.ajax.reload();
                            // open the new etiqueta in a new tab
                            window.open(`${window.location.origin}/etiquetasTitulos/edit/${response.etiqueta}`, '_blank');
                        } else {
                            popErrorAlert('Error en la respuesta');
                        }
                    }
                ).fail(function (xhr, status, error) {
                    popErrorAlert(error);
                });
            }
        });
    })

    const tableEtiquetas = $('#tableOfEquiquetas').DataTable({
        processing: true,
        serverSide: true,
        autoWidth: true,
        responsive: true,
        scrollX: true,
        orderCellsTop: true,
        lengthMenu: [5, 10, 25, 50, 75, 100, 250, 500, 1000, 2500],
        pageLength: 50,
        "dom": 'lBrtip',
        "ajax": {
            "url": "/etiquetasTitulos/datatable",
            "data": function (d) {
                d.otsFilter = otsFilter;
            }
        },
        "columns": [
            { "data": "id" },
            { "data": "lista_ots" },
            { "data": "cajas" },
            { "data": "att" },
            { "data": "direccion" },
            { "data": "action" }

        ],
        "language": {
            url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
        },
        "columnDefs": [
            {
                orderable: false,
                searchable: false,
                targets: [5]
            },
        ],
        "order": [[0, "desc"]],
    });

    $(document).on('click', '.btn-edit', function (e) {
        window.location.href = '/etiquetasTitulos/edit/' + $(this).attr('data-id');
    });

    $(document).on('click', '.btn-delete', function (e) {
        Swal.fire({
            title: '¿Está seguro de eliminar la etiqueta?',
            text: "No podrá revertir esta acción",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Sí',
            cancelButtonText: 'Cancelar',
            customClass: {
                confirmButton: 'btn btn-danger me-1',
                cancelButton: 'btn btn-secondary'
            },
            buttonsStyling: false
        }).then((result) => {
            if (result.isConfirmed) {
                $.post(
                    '/etiquetasTitulos/delete',
                    {
                        id: $(this).attr('data-id')
                    },
                    function (response) {
                        if (response.status) {
                            tableEtiquetas.ajax.reload();
                            popSuccessAlert(response.message);
                        } else {
                            popErrorAlert('Error borrando la etiqueta');
                        }
                    }
                ).fail(function (xhr, status, error) {
                    popErrorAlert(error);
                });
            }
        })

    });

    $(document).on("keyup", ".envio-filter", (event) => {
        let columnName = $(event.currentTarget).attr("name");
        let columnIndex = $('#tableOfEquiquetas').DataTable().columns().eq(0).filter(function (index) {
            return $('#tableOfEquiquetas').DataTable().column(index).dataSrc() === columnName;
        })[0];
        $('#tableOfEquiquetas').DataTable().column(columnIndex).search($(event.currentTarget).val()).draw()
    })


    $(document).on("keyup", ".envio-filter-ots", (event) => {
        otsFilter = $(event.currentTarget).val();
        $('#tableOfEquiquetas').DataTable().ajax.reload();
    })

    $(document).on("change", ".envio-filter-select", (event) => {
        let columnName = $(event.currentTarget).attr("name");
        let columnIndex = $('#tableOfEquiquetas').DataTable().columns().eq(0).filter(function (index) {
            return $('#tableOfEquiquetas').DataTable().column(index).dataSrc() === columnName;
        })[0];
        $('#tableOfEquiquetas').DataTable().column(columnIndex).search($(event.currentTarget).val()).draw();
    });
})
