import DatePicker from "./datepicker.js";
class AlbaranComponent {

    constructor(item) {
        this.item = item;
        this.id = item.id;
        this.numero = item.numero_albaran;
        this.cliente = item.cliente;
        this.att = item.att;
        this.direccion = item.direccion;
        this.envio_id = item.envio_id;
        this.fecha = null;
        if(this.item.fecha_albaran != null){
            const [dia, mes, anio] = item.fecha_albaran.split('/');
            this.fecha = `${anio}-${mes.padStart(2, '0')}-${dia.padStart(2, '0')}`;
        }
        this.selectorTabla = `#tablaAlbaran${this.id}`;

        this.table = null;
        this.fechaAlbaran = null;
    }

    mount(selector) {
        const dom = this.render();
        $(selector).append(dom);
        requestAnimationFrame(() => this.init());
    }

    render() {
        const { id, numero } = this;

        const accordion = $('<div>', {
            class: 'accordion accordion-bordered mt-3 accordion-albaran',
            id: 'accordioAlbaran' + id,
            albaran: id
        });

        const card = $('<div>', { class: 'card accordion-item active' });

        const header = $('<h2>', {
            class: 'accordion-header',
            id: 'headingAlbaran' + id
        });

        const button = $('<button>', {
            type: 'button',
            class: 'accordion-button collapsed',
            'data-bs-toggle': 'collapse',
            'data-bs-target': '#accordionAlbaranTip' + id,
            'aria-expanded': 'false',
            'aria-controls': 'accordionAlbaranTip' + id,
            'albaran': id,
        }).css({ 'background-color': '#F0F8FF' }).append($('<h5>').html(numero));

        const collapseDiv = $('<div>', {
            id: 'accordionAlbaranTip' + id,
            class: 'accordion-collapse collapse',
            'data-bs-parent': '#accordioAlbaran' + id
        });

        const body = $('<div>', { class: 'accordion-body' });

        // Cabecera HTML
        const cabecera = this._buildCabecera();
        const tableWrapper = $('<div>', {
            class: 'table-responsive'
        }).append(this._buildTable());
        const botones = this._buildBotonera();

        header.append(button);
        card.append(header);
        collapseDiv.append(body);
        body.append(cabecera, tableWrapper, botones);
        card.append(collapseDiv);
        accordion.append(card);

        return accordion;
    }

    _buildCabecera() {

        return $(`
            <div class="col-12 d-flex justify-content-between align-items-center my-3">
                <!-- Fechas a la izquierda pegadas -->
                <div class="d-flex align-items-center">
                    <div class="d-flex align-items-center me-3">
                        <label class="me-2 mb-0 white-space-nowrap">${window.language.Albaran.fechaCreacion}:</label>
                        <label class="mb-0">${this.item.fecha_creacion}</label>
                    </div>
                    <div class="d-flex align-items-center ml-5">
                        <label class="me-2 mb-0 white-space-nowrap">${window.language.Albaran.fechaAlbaran}:</label>
                        <input id="fecha_albaran_${this.id}" class="cambios-albaran form-control form-control-sm" 
                            style="max-width: 130px;" albaran_id=${this.id} value="${this.item.fecha_albaran == null ? '' : this.item.fecha_albaran}">
                    </div>
                </div>

                <!-- Envío a la derecha -->
                <div class="d-flex align-items-center ms-auto">
                    <label class="me-1 mb-0">${window.language.Albaran.numEnvio}:</label>
                    <label class="mb-0">${this.envio_id}</label>
                </div>
            </div>


            <div class="col-12 d-flex justify-content-between align-items-center mb-3">
                <!-- Cliente a la izquierda -->
                <div class="d-flex align-items-center">
                    <label class="me-2 mb-0">${window.language.Albaran.cliente}:</label>
                    <label class="mb-0 text-left">${this.cliente}</label>
                </div>

                <!-- Nº Albarán a la derecha -->
                <div class="d-flex align-items-center ms-auto">
                    <label class="me-2 mb-0">${window.language.Albaran.albaran}:</label>
                    <label class="mb-0 text-end">${this.item.numero_albaran}</label>
                </div>
            </div>

            <div class="col-12 d-flex justify-content-between mb-3">
                <div class="col-1">
                    <label>${window.language.Albaran.att}:</label>
                </div>
                <div class="col-11">
                    <input id="att_${this.item.id}" class="cambios-albaran form-control" data-albaranId=${this.item.id} value="${this.att}">
                </div>
            </div>
            <div class="col-12 d-flex justify-content-between mb-3">
                <div class="col-1">
                    <label>${window.language.Albaran.direccion}:</label>
                </div>
                <div class="col-11">
                    <input id="direccion_${this.item.id}" class="cambios-albaran form-control" data-albaranId=${this.item.id} value="${this.direccion}">
                </div>
            </div>
        `);
    }

    _buildTable() {
        return $('<table>', {
            id: 'tablaAlbaran' + this.id,
            width: '100%',
            class: 'table table-responsive table-striped table-hover table-albaran'
        }).append(
            $('<thead>').append(
                $('<tr>').append(
                    $('<th>').css({ 'max-width': '20px' }),
                    $('<th>'),
                    $('<th>', { class: 'lp-header', scope: 'col' }).css({ 'font-size': 'smaller', 'max-width':'8%' }).text(window.language.Albaran.pedido),
                    $('<th>', { class: 'lp-header', scope: 'col' }).css({ 'font-size': 'smaller', 'max-width':'8%' }).text(window.language.Albaran.unidades),
                    $('<th>', { class: 'lp-header', scope: 'col' }).css({ 'font-size': 'smaller' }).text(window.language.Albaran.titulo),
                    $('<th>', { class: 'lp-header', scope: 'col' }).css({ 'font-size': 'smaller', 'max-width':'15%' }).text(window.language.Albaran.ISBN),
                    $('<th>', { class: 'lp-header', scope: 'col' }).css({ 'font-size': 'smaller', 'max-width':'15%' }).text(window.language.Albaran.refCliente),
                    $('<th>', { class: 'lp-header', scope: 'col' }).css({ 'font-size': 'smaller', 'max-width':'8%' }).text(window.language.Albaran.precioU),
                    $('<th>', { class: 'lp-header', scope: 'col' }).css({ 'font-size': 'smaller', 'max-width':'8%' }).text(window.language.Albaran.subtotal),
                    $('<th>'),
                )
            ),
            $('<tbody>')
        );
    }

    _buildBotonera() {
        const id = this.id;
        const mostrarPreciosChecked = this.item.mostrar_precios == 1 ? 'checked' : '';

        return $(`
            <div class="row mt-5">
                <div class="col-12 d-flex align-items-center">
                    
                    <div class="d-flex align-items-center">
                        <label for="mostrar_precios_${id}" class="me-2 mb-0">${window.language.Albaran.mostrarPrecios}:</label>
                        <input type="checkbox" id="mostrar_precios_${id}" class="form-check-input mostrar-precios" albaran_id="${id}" ${mostrarPreciosChecked}>
                    </div>
                    <div class="d-flex align-items-center mx-5">
                        <label for="cajas_albaran_${id}" class="me-2 mb-0">${window.language.Albaran.cajas}:</label>
                        <input type="number" id="cajas_albaran_${id}" class="form-control" albaran_id="${id}" value="${this.item.cajas}" min="0" max="200" step="1">
                    </div>
    
                    <!-- Botones alineados a la derecha -->
                    <div class="ms-auto d-flex gap-2 flex-wrap justify-content-end">
                        <button id="add_iva_albaran_${id}" class="add-iva-albaran btn btn-sm btn-light" type="button">
                            ${window.language.Albaran.addIva} <i class="ti ti-plus"></i>
                        </button>
                        <button id="nueva_linea_albaran_${id}" class="nueva-linea-albaran btn btn-sm btn-light" type="button">
                            ${window.language.Albaran.nuevaLinea} <i class="ti ti-plus"></i>
                        </button>
                        <button id="imprimir_albaran_${id}" class="imprimir-albaran btn btn-sm btn-light" type="button">
                            ${window.language.Albaran.imprimirAlbaran} <i class="ti ti-printer"></i>
                        </button>
                        <button id="borrar_albaran_${id}" class="borrar-albaran btn btn-sm btn-danger" type="button">
                            ${window.language.Albaran.borrarAlbaran} <i class="ti ti-trash"></i>
                        </button>
                    </div>
                </div>
            </div>
        `);
    }

    init() {

        this.table = $('#tablaAlbaran' + this.id).DataTable({
            processing: true,
            serverSide: true,
            autoWidth: true,
            responsive: true,
            scrollX: true,
            order: [[1, 'asc']],
            orderable: false,
            lengthMenu: [5, 10, 25, 50, 75, 100, 250, 500, 1000, 2500],
            pageLength: 50,
            dom: 'lrtip',
            ajax: {
                url: "/albaranes/datatablesAlbaranLinea?albaranId",
                data: {
                    albaranId: this.id
                },
                type: 'GET',
            },
            language: {
                url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
            },
            columns: [
                { data: "action" },
                { data: "id", visible: false },
                { data: "pedido"},
                { data: "unidades" },
                { data: "titulo" },
                { data: "isbn" },
                { data: "ref_cliente" },
                { data: "precio_unidad" },
                { data: "total" },
                { data: "iva_reducido", visible: false },
            ],
            columnDefs: [
                {
                    orderable: false,
                    searchable: false,
                    targets: [0]
                }
            ],
            drawCallback: (settings) => {
                if ($('#mostrar_precios_' + this.id).is(':checked')) {
                    this.table
                        .column(7).visible(true)
                        .column(8).visible(true);
                }
                else {
                    this.table
                        .column(7).visible(false)
                        .column(8).visible(false);
                }
                
                requestAnimationFrame(() => {
                    this._initAutoNumericInputs();
                });
            }

            
        });

        $('#accordionAlbaranTip' + this.id).on('shown.bs.collapse', () => {
            if (this.table) {
                this.table.columns.adjust().draw(false);
            }
        });

        const option = {
            altInput: true,
            altFormat: "d/m/Y",
            dateFormat: "Y-m-d",
            allowInput: true,
        }
        this.fechaAlbaran = new DatePicker($('#fecha_albaran_' + this.id), option);
        this.fechaAlbaran.setDate(this.fecha);

        $('#tablaAlbaran' + this.id).on('click', '.btn-delete-albaran-lineas', (e) => {
            e.preventDefault();
            const table = $('#tablaAlbaran' + this.id).DataTable();
            const id = $(e.currentTarget).attr('data-id');
            const url = `/albaranes/borrarAlbaranLinea`;
            const data = { linea: id };

            $.ajax({
                url: url,
                type: 'POST',
                data: data,
                success: (response) => {
                    if (response.success) {
                        table.draw(false);
                    } else {
                        Swal.fire({
                            title: 'Error',
                            text: 'No se ha podido borrar la línea del albarán',
                            icon: 'error',
                            showCancelButton: false,
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'Ok',
                            customClass: {
                                confirmButton: 'btn btn-primary me-1',
                            },
                            buttonsStyling: false
                        });
                        table.draw(false);
                    }
                },
                error: (xhr, status, error) => {
                    console.error(error);
                }
            });
        });

        $('#mostrar_precios_' + this.id).on('change', (e) => {
            const checked = $(e.currentTarget).is(':checked');
            if (checked) {
                this.table
                    .column(7).visible(true)
                    .column(8).visible(true);
            } else {
                this.table
                    .column(7).visible(false)
                    .column(8).visible(false);
            }

            $.post('/albaranes/updateAlbaran', {
                albaranId: this.id,
                fieldName: 'mostrar_precios',
                fieldValue: checked ? 1 : 0
            }, (response) => {
                if (response.success) {
                    this.table.ajax.reload(null, false);
                } else {
                    Swal.fire({
                        title: 'Error',
                        text: 'No se ha podido actualizar el albarán',
                        icon: 'error',
                        showCancelButton: false,
                        confirmButtonColor: '#3085d6',
                        confirmButtonText: 'Ok',
                        customClass: {
                            confirmButton: 'btn btn-primary me-1',
                        },
                        buttonsStyling: false
                    });
                }
            }
            )
        });

        $('#direccion_' + this.item.id).on('change', (e) => {
            const value = $(e.currentTarget).val();
            const albaranId = $(e.currentTarget).attr('data-albaranId');

            $.post('/albaranes/updateAlbaran', {
                albaranId: albaranId,
                fieldName: 'direccion_albaran',
                fieldValue: value
            }, (response) => {
                if (response.success) {
                    this.table.ajax.reload(null, false);
                } else {
                    Swal.fire({
                        title: 'Error',
                        text: 'No se ha podido actualizar el albarán',
                        icon: 'error',
                        showCancelButton: false,
                        confirmButtonColor: '#3085d6',
                        confirmButtonText: 'Ok',
                        customClass: {
                            confirmButton: 'btn btn-primary me-1',
                        },
                        buttonsStyling: false
                    });
                }
            });
        });

        $('#att_' + this.item.id).on('change', (e) => {
            const value = $(e.currentTarget).val();
            const albaranId = $(e.currentTarget).attr('data-albaranId');

            $.post('/albaranes/updateAlbaran', {
                albaranId: albaranId,
                fieldName: 'att_albaran',
                fieldValue: value
            }, (response) => {
                if (response.success) {
                    this.table.ajax.reload(null, false);
                } else {
                    Swal.fire({
                        title: 'Error',
                        text: 'No se ha podido actualizar el albarán',
                        icon: 'error',
                        showCancelButton: false,
                        confirmButtonColor: '#3085d6',
                        confirmButtonText: 'Ok',
                        customClass: {
                            confirmButton: 'btn btn-primary me-1',
                        },
                        buttonsStyling: false
                    });
                }
            });
        });

        $('#fecha_albaran_' + this.item.id).on('change', (e) => {
            const value = $(e.currentTarget).val();
            const albaranId = this.id;

            $.post('/albaranes/updateAlbaran', {
                albaranId: albaranId,
                fieldName: 'fecha_albaran',
                fieldValue: value
            }, (response) => {
                if (response.success) {
                    this.table.ajax.reload(null, false);
                } else {
                    Swal.fire({
                        title: 'Error',
                        text: 'No se ha podido actualizar el albarán',
                        icon: 'error',
                        showCancelButton: false,
                        confirmButtonColor: '#3085d6',
                        confirmButtonText: 'Ok',
                        customClass: {
                            confirmButton: 'btn btn-primary me-1',
                        },
                        buttonsStyling: false
                    });
                }
            });
        });

        $("#borrar_albaran_" + this.item.id).on('click', (e) => {
            e.preventDefault();
            const albaranId = this.id;
            const url = `/albaranes/borrarAlbaran`;
            const data = { albaranId: albaranId };

            Swal.fire({
                title: window.language.Albaran.borrarAlbaran,
                text: window.language.Albaran.borrarAlbaranConfirm,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: window.language.Albaran.borrar,
                cancelButtonText: window.language.Albaran.cancelar,
                customClass: {
                    confirmButton: 'btn btn-primary me-1',
                    cancelButton: 'btn btn-outline-secondary'
                },
                buttonsStyling: false
            }).then((result) => {


                $.ajax({
                    url: url,
                    type: 'POST',
                    data: data,
                    success: (response) => {
                        if (response.success) {
                            // quitar del dom el albarán
                            $(`#accordioAlbaran${albaranId}`).remove();
                        } else {
                            Swal.fire({
                                title: 'Error',
                                text: 'No se ha podido borrar el albarán',
                                icon: 'error',
                                showCancelButton: false,
                                confirmButtonColor: '#3085d6',
                                confirmButtonText: 'Ok',
                                customClass: {
                                    confirmButton: 'btn btn-primary me-1',
                                },
                                buttonsStyling: false
                            });
                        }
                    },
                    error: (xhr, status, error) => {
                        console.error(error);
                    }
                });
            });

        });

        $('#tablaAlbaran' + this.id).on('change', '.input-albaran-linea', (e) => {

            const fieldName = $(e.currentTarget).attr('data-field');
            const fieldValue = $(e.currentTarget).val();
            const albaranId = this.id;
            const lineaId = $(e.currentTarget).attr('data-id');

            $.post('/albaranes/updateAlbaranLinea', {
                fieldName: fieldName,
                fieldValue: fieldValue,
                lineaId: lineaId
            }, (response) => {
                if (response.success) {
                    this.table.ajax.reload(null, false);
                } else {
                    Swal.fire({
                        title: 'Error',
                        text: 'No se ha podido actualizar el albarán',
                        icon: 'error',
                        showCancelButton: false,
                        confirmButtonColor: '#3085d6',
                        confirmButtonText: 'Ok',
                        customClass: {
                            confirmButton: 'btn btn-primary me-1',
                        },
                        buttonsStyling: false
                    });
                }
            });
        });

        $('#add_iva_albaran_' + this.id).on('click', (e) => {

            e.preventDefault();
            const albaranId = this.id;
            const url = `/albaranes/addIvaAlbaran`;
            const data = { albaranId: albaranId };

            $.ajax({
                url: url,
                type: 'POST',
                data: data,
                success: (response) => {
                    if (response.success) {
                        this.table.ajax.reload(null, false);
                    } else {
                        Swal.fire({
                            title: 'Error',
                            text: 'No se ha podido añadir el IVA al albarán',
                            icon: 'error',
                            showCancelButton: false,
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'Ok',
                            customClass: {
                                confirmButton: 'btn btn-primary me-1',
                            },
                            buttonsStyling: false
                        });
                    }
                },
                error: (xhr, status, error) => {
                    console.error(error);
                }
            });
        });

        $('#nueva_linea_albaran_' + this.id).on('click', (e) => {

            e.preventDefault();
            const albaranId = this.id;
            const url = `/albaranes/nuevaLineaAlbaran`;
            const data = { albaranId: albaranId };

            $.ajax({
                url: url,
                type: 'POST',
                data: data,
                success: (response) => {
                    if (response.success) {
                        this.table.ajax.reload(null, false);
                    } else {
                        Swal.fire({
                            title: 'Error',
                            text: 'No se ha podido añadir la línea al albarán',
                            icon: 'error',
                            showCancelButton: false,
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'Ok',
                            customClass: {
                                confirmButton: 'btn btn-primary me-1',
                            },
                            buttonsStyling: false
                        });
                    }
                },
                error: (xhr, status, error) => {
                    console.error(error);
                }
            });
        });

        $('#imprimir_albaran_' + this.id).on('click', (e) => {

            var albaran_id = this.id;
            window.open('/print-albaran/generar/'+ albaran_id  , '_blank');

        });        
    }

    _initAutoNumericInputs() {
        const config_2 = {
            decimalPlaces: 2,
            digitGroupSeparator: '.',
            decimalCharacter: ',',
            unformatOnSubmit: true,
            decimalPlacesShownOnFocus: 2,
            decimalPlacesShownOnBlur: 2,
            watchExternalChanges: true
        };
    
        const config_4 = {
            decimalPlaces: 4,
            digitGroupSeparator: '.',
            decimalCharacter: ',',
            unformatOnSubmit: true,
            decimalPlacesShownOnFocus: 4,
            decimalPlacesShownOnBlur: 4,
            watchExternalChanges: true
        };
    
        // 🔥 Forzar limpieza completa de instancias anteriores
        document.querySelectorAll('.autonumeric-2, .autonumeric-4').forEach(el => {
            if (AutoNumeric.getAutoNumericElement(el)) {
                AutoNumeric.getAutoNumericElement(el).remove();
            }
        });
    
        // Inicializar nuevos
        AutoNumeric.multiple('.autonumeric-2', config_2);
        AutoNumeric.multiple('.autonumeric-4', config_4);
    }
    
    
}

export default AlbaranComponent;