import Ajax from "../../components/ajax.js";

class ClientePresupuestos {
    constructor() {

        this.clienteId = $('#clienteForm').attr('data-cliente');
        this.fecha = $('#fechaPresupuesto_filter');
    }

    init() {

        const self = this;

        $(document).on('click', '.presupuestos-btn', function (e) {
            e.preventDefault();
            $('#tableOfPresupuestosCliente').DataTable().columns.adjust().draw();
            $(this).tab('show');
        });

        $('#tableOfPresupuestosCliente').on('click', '.btn-edit', function (e) {
            window.location.href = $('#clienteForm').attr('data-url') + $(this).attr('data-id');
        });

        const lastColNr = $('#tableOfPresupuestosCliente').find("tr:first th").length - 1;

        let datatableColumns = [];

        datatableColumns = [
            { 'data': 'id' },
            { 'data': 'fecha' },
            { 'data': 'comercial' },
            { 'data': 'titulo', orderable: false },
            { 'data': 'paginas', searchable: false },
            { 'data': 'tirada', searchable: false },
            { 'data': 'total', searchable: false },
            { 'data': 'estado' },
            { 'data': 'action' }
        ];

        $('#tableOfPresupuestosCliente').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: 250,
            "dom": 'lBrtip',
            order: [[0, 'desc']],
            language: {
                url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
            },
            ajax: {
                url: '/presupuestoadmin/presupuestosCliente',
                type: 'GET',
                data: function (d) {
                    d.cliente_id = self.clienteId;
                    d.fecha = self.getDate(self.fecha);
                }
            },
            columnDefs: [
                {
                    orderable: false,
                    searchable: false,
                    targets: [lastColNr]
                },
            ],
            columns: datatableColumns,
        });

        new Ajax('/presupuestoadmin/getSumCliente/' + this.clienteId,
            {},
            {},
            function (response) {
                if (response.status == 'success') {
                    AutoNumeric.getAutoNumericElement('#presupuestosImpresion').set(response.totales['total_impresion']);
                    AutoNumeric.getAutoNumericElement('#presupuestosMaquetacion').set(response.totales['total_maquetacion']);
                    AutoNumeric.getAutoNumericElement('#totalPresupuestos').set(response.totales['total']);
                }
                else {
                    console.log("Error data:", response);
                }

            },
            function (error) {
                console.log("Error data:", error);
            }).get();

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

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

        this.fecha.daterangepicker({
            ranges: {
                [window.language.datePicker.hoy]: [moment(), moment()],
                [window.language.datePicker.ayer]: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                [window.language.datePicker.ultimos7]: [moment().subtract(6, 'days'), moment()],
                [window.language.datePicker.ultimos30]: [moment().subtract(29, 'days'), moment()],
                [window.language.datePicker.esteMes]: [moment().startOf('month'), moment().endOf('month')],
                [window.language.datePicker.ultimoMes]: [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },
            opens: 'right',
            language: window.language.datePickerLocale,
            "locale": {
                "customRangeLabel": window.language.datePicker.rangoPersonalizado,
                "format": "YYYY-MM-DD",
                "separator": " ",
                "applyLabel": window.language.datePicker.aplicar,
                "cancelLabel": window.language.datePicker.limpiar,

            },
            "alwaysShowCalendars": true,
            autoUpdateInput: false,

        });


        this.fecha.on('apply.daterangepicker', function (ev, picker) {

            $(this).val(picker.startDate.format('DD/MM/YYYY') + ' ' + picker.endDate.format('DD/MM/YYYY'));
            let table = $('#tableOfPresupuestosCliente').DataTable();
            table.column(1).draw();
        });

        this.fecha.on('cancel.daterangepicker', function (ev, picker) {
            $(this).val('');
            $('#tableOfPresupuestosCliente').DataTable().column(1).search('').draw();
        });
    }


    getDate(datepicker) {

        let picker = datepicker.data('daterangepicker');

        if (!picker || !picker.startDate || !picker.endDate || datepicker.val() == '') {
            return '';
        }

        let startDate = picker.startDate.format('YYYY-MM-DD');
        let endDate = picker.endDate.format('YYYY-MM-DD');

        return startDate + "|" + endDate;
    }

}

export default ClientePresupuestos;