const text_color_button = "#FFFFFF";
const background_color_button = "#000000";
const errores = {
    afinanciar:"El mínimo a financiar son 500 y el máximo permitido son 21.000",
    aportacion: "La aportación debe estar entre 0 y 21000",
    nombre:"El nombre es requerido",
    tel1:"El teléfono es requerido",
    correo:"El correo es requerido",
    acepto:"Debe aceptar los términos y condiciones"
}
const placeholders = {
    afinanciar:"Escriba el importe a financiar",
    aportacion: "Cuánto aportará",
    nombre:"Nombre y Apellidos del Paciente",
    tel1:"Teléfono del Paciente",
    correo:"Correo electrónico del Paciente",
    acepto:"Acepto la política de privacidad.",
}
const getConfiguration = token => {
    let data = {
        "id_cliente": 439,
        "id_tarifa": 141,
        "text1": "Calcula tu cuota",
        "text11": "(pulsa aquí)",
        "text2": "Gracias por su interés. Le hemos remitido un eMail con la simulación que ha solicitado.",
        "text3": "Si está interesado en iniciar el trámite para solicitar su financiación, debe indicárselo a su centro médico.",
        "url": "https:\/\/www.simuladortmf.com\/",
        "logo1": "https:\/\/simuladortmf.com\/applettmf\/logotmf-2.png",
        "logo2": "https:\/\/simuladortmf.com\/applettmf\/logotmf-1.png",
        "color1": "fff",
        "color2": "08c",
        "activo": 1
    };
    return data;

    /*
    const getConfiguration = async token => {
        let data = await fetch('https://www.simuladortmf.com/api/?token=ywkwBeKjYxL33czQAwhAF5tLFtremPpsnjbJkj8z&accion=applet')
              .then(response => response.json())
              .then(data => data);
        return data;
    }    
    */
}


const checkError = element => {
    let name = element.name;
    let texto_de_error = errores[name];
    let label = document.querySelector(".error_" + name);
    label.innerText = isValid(element) ? '' : texto_de_error;
}
const isValid = element => {
    let form = element.closest('form');
    return form[element.name].checkValidity();
}
const financiaOperacion = token => {
    let conf = getConfiguration(token);
    let elementos = `<div class="financia_1234" onclick="cambiarMini();">
        <!--
        <div style="clear-after:none;width: 25%; display: inline-block;">
            <img class="financia_1234_logo" src="${conf.logo2 || 'https://simuladortmf.com/applettmf/logo.gif'}" width="90">
        </div>
        -->
        <div style="clear:none;width:60%; display:inline-block; margin-left: 5%;">
            <span style="position:absolute;margin-top: -9px; margin-left: 0px; font-size:26px;">${conf.text1 || 'financiar tu operacion?'}</span>
            <!--<span style="position:absolute;margin-top: 30px; margin-left: 45px; font-size:16px;">${conf.text11}</span>-->
        </div>
    </div>
    <div class="financia_12345" style="display:none;" >
        <div style="text-align: right;"> <span onclick="cambiarMega();" style="font-size: 30px; cursor:pointer;">&times;</span></div>
        <div style="width: 100%; background-color:white!important; heigth:100px; margin-top:-10px;text-align: center; padding: 5px;"> <img src="${conf.logo1}" style='width:260px;  object-fit: contain' /></div>
        <form class="financia_form_1">
            <input type="hidden" name="applet" value="1">
            <input type="hidden" name="id_cliente" value="${conf.id_cliente}">
            <input type="hidden" name="tarifa" value="${conf.id_tarifa}">
            <div style="width: 100%">
                <label class="error_afinanciar"  style="background-color:white; color:red; margin-top:5px; width:100%;"></label>
                <input required onkeyup="checkError(this);" onchange="validarRango();" min=500 max=21000 type="number" placeholder="${placeholders.afinanciar}" id="afinanciar" name="afinanciar" style="border: 0px!important; width: 100%; height: 28px; font-size:16px!important; margin-top: 20px!important; padding-left: 10px!important;">
                <label for="afinanciar"  data-error="El mínimo a financiar son 500 € y el máximo permitido son 21.000 €." data-success="ok">
                </label>
            </div>
            <div style="width: 100%; margin-top: -15px;">
                <label class="error_aportacion" style="background-color:white; color:red; margin-top:5px; width:100%;"></label>
                <input required  onkeyup="checkError(this);" min=0 max=20500 type="number" placeholder="${placeholders.aportacion}" name="aportacion" style="border: 0px!important; width: 100%; height: 28px; font-size:16px!important; margin-top: 20px!important;padding-left: 10px!important;">
            </div>
            <div style="width: 100%">
                <label class="error_nombre"  style="background-color:white; color:red; margin-top:5px; width:100%;"></label>
                <input required  onkeyup="checkError(this);" min=6 type="text" placeholder="${placeholders.nombre}" name="nombre" style="width: 100%; height: 28px; font-size:16px!important; margin-top: 10px!important;padding-left: 10px!important;">
            </div>
            <div style="width: 100%">
                <label class="error_tel1"  style="background-color:white; color:red; margin-top:5px; width:100%;"></label>
                <input required  onkeyup="checkError(this);" min=6 type="text" placeholder="${placeholders.tel1}" name="tel1" style="width: 100%; height: 28px; font-size:16px!important; margin-top: 10px!important;padding-left: 10px!important;">
            </div>
            <div style="width: 100%">
                <label class="error_correo"  style="background-color:white; color:red; margin-top:5px; width:100%;"></label>
                <input required  onkeyup="checkError(this);" type="email" placeholder="${placeholders.correo}" name="correo" style="width: 100%; height: 28px; font-size:16px!important; margin-top: 10px!important;padding-left: 10px!important;">
            </div>
            <div style="width: 100%;padding-top: 0px!important;">
                <label class="error_acepto"  style="background-color:white; color:red; margin-top:5px; width:100%;"></label><br/>
                <div style="float: left; margin: 0px!important; padding: 0px!important;">
                <input required  onclick="checkError(this);" type="checkbox" id="acepto" placeholder="" name="acepto" style="cursor:pointer; zoom: 2;height: 18px!important;">
                </div>
                <div style="float: left; margin: 10px 0 0 10px!important; padding: 0px!important;"><a onclick="marcar()" style="text-decoration: none; color: white;">${placeholders.acepto}</a> 
                <a href="https://institutodeobesidad.com/legal/" target="_blank" style="text-decoration: none; color: white; font-weight: bold;">(Ver)</a>
                </div>
            </div>
            <div style="width: 100%">
                <button onclick="enviarPeticion(this);" type="button" style="cursor:pointer; color:${text_color_button}; background-color: ${background_color_button}; width: 100%; height: 40px; margin-top: 1px; font-size: 25px">CALCULAR</button>
            </div>
        </form>
        <form style="display:none;" class="financia_form_2">
            <div style="width: 100%; padding: 10px;"><br><br>${conf.text2}</div>
            <div style="width: 100%; padding: 10px;">${conf.text3}</div>
            <div style="width: 100%;padding-top: 10px;">
                <button 
                    disabled=true
                    id="financiacion_12345_enlace"
                    class="financiacion_12345_enlace"
                    data-href="enlace"
                    onclick="visualizar_pdf()" 
                    type="button" 
                    style="cursor:pointer; font-size:1.4em;color:#005bad; color:${text_color_button}; background-color: ${background_color_button}; width: 100%; height: 40px; margin-top: 50px;  ">
                    <b>VISUALIZAR SIMULACIÓN</b>
                </button>
            </div>
            <div style="width: 100%">
                <button 
                    onclick="realizar_otra_simulacion();" 
                    type="button" 
                    style="cursor:pointer; color:#005bad; color:${text_color_button}; background-color: ${background_color_button}; width: 100%; font-size:1.2em;height: 40px; margin-top: 50px;">
                    <b>VOLVER</b>
                </button>
            </div>
        </form>
        <div id="miModal" class="sweet-alert showSweetAlert visible">
            <div class="modal-contenido">
                <a href="#close">Cerrar</a>
                <h2 style="font-size: 20px;  padding-bottom: 10%;">Recogida de datos.</h2>
                <p>La recogida de datos de carácter personal se realizará única y exclusivamente a través de los formularios publicados en la web y de los correos electrónicos que los usuarios puedan remitir a­­­­­­­­­­­­­­­ SURGICENTER, S.L. que serán incluidos en un fichero automatizado.</p>

            <p>Los ficheros titularidad de SURGICENTER, S.L. figuran inscritos en el Registro General de la Agencia Española de Protección de Datos, al que podrá acceder el usuario o visitante para comprobar la situación de aquellos.</p>

            <p>SURGICENTER, S.L. conservará sus datos una vez finalizada la relación con el usuario para cumplir las obligaciones legales necesarias. A su vez, procederá a la cancelación de los datos recogidos cuando dejen de ser necesarios para la finalidad para la que fueron recabados.</p>
            </div>  
        </div>
    </div>
    <style>
        @import url('https://fonts.cdnfonts.com/css/aldo-the-apache');   
        .financia_1234_logo {
            /*border-radius: 80%;*/
        }
        .img-fondo{
            height:200px;
            background: url(${conf.logo1}) cover cover fixed;
        }
        .financia_1234 {
            background: #${conf.color2};
            /*background: linear-gradient(309deg, #${conf.color2} 0%, rgba(0, 127, 255, 1) 35%, rgba(0, 212, 255, 1) 100%);*/
            display: block;
            width: 160px;
            height: 80px;
            position: fixed;
            float: right;
            bottom: 25px;
            right: 20px;
            color: white;
            padding: 10px!important;
            /*font-family: Arial;*/
            z-index: 10000;
            /* Nuevo */
            line-height: 1.1!important;
            bottom: 100px;            
            border-radius: 10px;
            font-family: 'Aldo', sans-serif;
        }
        .financia_12345{
            background: #${conf.color2};
            /*background: linear-gradient(309deg, #${conf.color2} 0%, rgba(0, 127, 255, 1) 35%, rgba(0, 212, 255, 1) 100%);*/
            display: block;
            width: 320px;
            height: 440px;
            position: fixed;
            float: right;
            bottom: 25px;
            right: 20px;
            color: white;
            padding: 20px!important;
            /*font-family: Arial;*/
            z-index: 10000;
            /* Nuevo */
            line-height: 1.2!important;
            font-size: 12px;
            bottom: 100px;
            border-radius: 10px;
            font-family: 'Aldo', sans-serif;
            
        }

        .financia_12345 input {
            color: black!important;
            background: #fff!important;
            height: 28px!important;
            padding-bottom: 5px!important;
        }
        
        .financia_1234:after {
            border-right: solid 0px transparent!important;
            border-left: solid 25px transparent!important;
            border-top: solid 15px #${conf.color2}!important;
            transform: translateX(0%);
            position: absolute;
            z-index: -1;
            content: '';
            top: 100%;
            left: 80%;
            height: 0;
            width: 0;
            font-family: Arial;
        }

    </style>`;
    let div = document.createElement("div");
    div.id = "financiacion_1234";
    let body = document.querySelector("body");
    body.appendChild(div);
    document.getElementById('financiacion_1234').innerHTML = elementos;
}
const enviarPeticion = async element => {
    let form = element.closest('form');
    let inputs = form.querySelectorAll('input');
    let validated = true;
    let URL_PETICION = ''; //URL A LA QUE SE HARÁ LA PETICIÓN POR POST
    let data = {};
    inputs.forEach(element => {
        if (element.checkValidity() == false) {
            validated = false;
        }
        data[element.name] = element.value;
    });
    if (validated == false) {
        alert("Debe rellenar todos los campos de una forma válida");
        return false;
    }
    document.querySelector('.financia_form_1').style['display'] = 'none';
    document.querySelector('.financia_form_2').style['display'] = 'block';
    document.getElementById("financiacion_12345_enlace").innerText = 'CALCULANDO SIMULACIÓN...'
    let url = await fetch("https://simuladortmf.com/informe.php", {
        method:"POST",
        body:JSON.stringify(data)
    })
    .then(response => response.text())
    .then(response => {
        document.getElementById("financiacion_12345_enlace").setAttribute("data-href", response);
        document.getElementById("financiacion_12345_enlace").disabled = false;
        document.getElementById("financiacion_12345_enlace").innerText = 'VISUALIZAR SIMULACIÓN';
        return response
    })
    console.log(url);
    
}
const marcar = _ => {
    document.getElementById("acepto").checked = true;
}
const cambiarMini = _ => {
    let element = document.querySelector('.financia_1234');
    element.style.display = 'none';

    let element2 = document.querySelector('.financia_12345');
    element2.style.display = 'block';

}
const cambiarMega = _ => {
    let element = document.querySelector('.financia_1234');
    element.style.display = 'block';

    let element2 = document.querySelector('.financia_12345');
    element2.style.display = 'none';

}
const realizar_otra_simulacion = _ => {
    let form = document.querySelector('.financia_form_1');
    let inputs = form.querySelectorAll('input[type="text"], input[type="number"], input[type="email"]');
    inputs.forEach(element => {
        element.value = "";
    });
    document.querySelector('.financia_form_2').style['display'] = 'none';
    document.querySelector('.financia_form_1').style['display'] = 'block';
}
const visualizar_pdf = _ => {
    let enlace = document.querySelector('.financiacion_12345_enlace');
    window.open(enlace.dataset.href, '_blank');

}


window.addEventListener("load", _ => financiaOperacion("ywkwBeKjYxL33czQAwhAF5tLFtremPpsnjbJkj8z"));
function validarRango() {
    const inputImporte = document.getElementById("afinanciar");
    const inputAportacion = document.getElementById("aportacion");
    const valor = parseInt(inputImporte.value, 10);

    if (valor < 500 || valor > 21000) {
        alert("El número debe estar entre 500 y 21,000 €");
        inputImporte.value = "";  
        inputAportacion.value = "";
    }
}