import * as Summary from "./summary.js";
import { formateaMoneda } from "../utils.js";


let valoresAcabados = [];

$(document).on('change', '#maquetacion', function (e) {
    e.preventDefault();
    if ($('#maquetacion').is(':checked')) {
        $.get("/presupuesto/public/maquetacion/form", function (data) {
            $("#maquetacionModalBody").html(data);
            valoresAcabados = $("#acabado-marcapaginas").html();
            if($('#caras-impresion').val() === 'una_cara') {
                $("#acabado-marcapaginas").html($(valoresAcabados).filter('.marcapaginas-1cara'));
            }
            else {
                $("#acabado-marcapaginas").html($(valoresAcabados).filter('.marcapaginas-2caras'));
            }
            $("#maquetacionModal").modal("show");
        });
    } else {
        const calcularStr = $('#div-extras').data('language-calcular');
        $('#maquetacion').data('price', calcularStr);
        $('label[for="maquetacion"] .service-price')
            .text(calcularStr);
        $('#maquetacion').prop('checked', false);
    }
});

$(document).on("submit", "#maquetacionForm", function (e) {
    e.preventDefault();

    const $form = $(this);

    $.ajax({
        url: $form.attr("action"),
        type: $form.attr("method"),
        data: $form.serialize(),
        dataType: "json",
        success: function (json) {

            const modalEl = document.getElementById("maquetacionModal");
            const modal = bootstrap.Modal.getInstance(modalEl) || new bootstrap.Modal(modalEl);
            modal.hide();


            const resumenHtml = `
        <div class="text-start">
          <p>${json.language.num_paginas_estimadas || 'Páginas calculadas'}: ${json.numPaginasEstimadas ?? "-"}</p>
          <p>${json.language.precio_por_pagina_estimado || 'Precio por página estimado'}: ${formateaMoneda(json.precioPaginaEstimado) || "-"}</p>
          <hr class="my-2">
          ${json.precio ?
                    `<h3 class="mb-0"><strong>Precio:</strong> ${formateaMoneda(json.precio)}</h3>` : ""}
        </div>
      `;

            Swal.fire({
                title: json.language.presupuesto_maquetacion || 'Presupuesto Maquetación',
                html: resumenHtml,
                icon: 'info',
                showCancelButton: true,
                confirmButtonText: json.language.add_to_presupuesto || 'Añadir al presupuesto',
                cancelButtonText: json.language.cancel || 'Cancelar',
                customClass: {
                    confirmButton: 'btn btn-secondary me-2', // clases para el botón confirmar
                    cancelButton: 'btn btn-light' // clases para cancelar
                },
                buttonsStyling: false,
                reverseButtons: false,
                allowOutsideClick: false
            }).then((result) => {
                if (result.isConfirmed) {
                    $('#maquetacion').prop('checked', true);
                    $('#maquetacion').data('price', json.precio);
                    $('label[for="maquetacion"] .service-price')
                        .text(formateaMoneda(json.precio));
                    Summary.updateExtras();
                }
                else {
                    const calcularStr = $('#div-extras').data('language-calcular');
                    $('#maquetacion').prop('checked', false);
                    $('#maquetacion').data('price', calcularStr);
                    $('label[for="maquetacion"] .service-price').text(calcularStr);
                }
            });
        },
        error: function (xhr, status, error) {
            try {
                const errs = JSON.parse(xhr.responseText); // { numCaracteres: "…" , … }
                // limpia errores previos
                $form.find(".is-invalid").removeClass("is-invalid");
                $form.find(".invalid-feedback").text("");

                // recorre los errores y los muestra
                Object.entries(errs).forEach(([field, msg]) => {
                    const $input = $form.find(`[name="${field}"]`);
                    if ($input.length) {
                        $input.addClass("is-invalid");
                        $input.siblings(".invalid-feedback").text(msg);
                    }
                });
            } catch {
                $("#maquetacionModalBody").html(
                    "<div class='alert alert-danger'>" + xhr.responseText + "</div>"
                );
            }
        }
    });
});

$(document).on('change', '#caras-impresion', function (e) {
    e.preventDefault();
    if($('#caras-impresion').val() === 'una_cara') {
        $("#acabado-marcapaginas").html($(valoresAcabados).filter('.marcapaginas-1cara'));
    } else {
        $("#acabado-marcapaginas").html($(valoresAcabados).filter('.marcapaginas-2caras'));
    }
});

$(document).on('hidden.bs.modal', '#maquetacionModal', function () {

    const calcularStr = $('#div-extras').data('language-calcular');
    $('#maquetacion').prop('checked', false);
    $('#maquetacion').data('price', calcularStr);
    $('label[for="maquetacion"] .service-price').text(calcularStr);
});

