<!DOCTYPE html>
<html lang="es">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Formulario Leasing/Factory</title>
</head>
<body>

<div id="captchaJS"></div>
<form id="__vtigerWebForm" name="crea cuentas contactos y oportunidades" action="https://creantiscrm.lat/720leasingtotal01/modules/Webforms/capture_view.php" method="post" accept-charset="utf-8" enctype="multipart/form-data">
<!-- <form id="__vtigerWebForm" name="crea cuentas contactos y oportunidades" action="http://localhost/720leasingtotal01/modules/Webforms/capture.php" method="post" accept-charset="utf-8" enctype="multipart/form-data"> -->
<!-- <form id="__vtigerWebForm" name="crea cuentas contactos y oportunidades" action="http://creantiscrm.com/720leasingtotal01/modules/Webforms/capture.php" method="post" accept-charset="utf-8" enctype="multipart/form-data"> -->
    <input type="hidden" name="__vtrftk" value="sid:a0e7393308598dd7db1905355a71b651d5b80436,1599493030" />
    <input type="hidden" name="urlencodeenable" value="1" />
    <input type="hidden" name="name" value="crea cuentas contactos y oportunidades" />
    <input type="hidden" name="VTIGER_RECAPTCHA_PUBLIC_KEY" value="RECAPTCHA PUBLIC KEY FOR THIS DOMAIN" />
    <!-- publicid: identifica el formulario, cambia por JS de acuerdo al servicio que seleccione -->
    <input type="hidden" name="publicid" value="Factoring" required="" id="publicid" />
    <!-- UTM -->
    <input type="hidden" id="utmsource" name="utmsource" data-label="UTM Source" value="" />
    <input type="hidden" id="utmmedium" name="utmmedium" data-label="UTM Medium" value="" />
    <input type="hidden" id="utmcampaign" name="utmcampaign" data-label="UTM Campaign" value="" />
    <!-- CAMPAIGN_NO : Aquí debe ir el código de la campaña creada en el CRM  -->
    <input type="hidden" id="CAMPAIGN_NO" name="CAMPAIGN_NO" data-label="Campaign No" value="CAM1" />

    <!-- Aquí se debe ingresar el response del formulario, si esta vacio tomara por default el del CRM -->
    <input type="hidden" id="RESPONSE_FORM" name="RESPONSE_FORM" data-label="Response No" value="" />
    
    <table>
        <tbody>
            <tr>
                <td><label>Nombre*</label></td>
                <td><input type="text" name="firstname" data-label="" value="" required="" /></td>
            </tr>
            <tr>
                <td><label>Apellido*</label></td>
                <td><input type="text" name="lastname" data-label="" value="" required="" /></td>
            </tr>
            <tr>
                <td><label>RUC*</label></td>
                <td><input type="text" name="siccode" data-label="" value="" required="" /></td>
            </tr>
            <tr>
                <td><label>Email*</label></td>
                <td><input type="text" name="email" data-label="" value="" required="" /></td>
            </tr>
            <tr>
                <td><label>Teléfono*</label></td>
                <td><input type="text" name="mobile" data-label="" value="" required="" /></td>
            </tr>

            <tr style="display: none;">
                <td><label>Servicio*</label></td>
                <td><input type="text" id="opportunity_type" name="opportunity_type" data-label="opportunity_type" required="" value="Factoring" /></td>
            </tr>


            <tr>
                <td><label>Tipo Bien*</label></td>
                <td>
                    <select id="tipobien" name="tipobien" required="">
                        <option value="Tipo Bien">Tipo Bien</option>
                        <option value="Camiones Livianos">Camiones Livianos</option>
                        <option value="Camiones Pesados">Camiones Pesados</option>
                        <option value="Camionetas">Camionetas</option>
                        <option value="Maquinaria y Equipos de Construcción">Maquinaria y Equipos de Construcción</option>
                        <option value="Maquinarias y Equipos Mineros">Maquinarias y Equipos Mineros</option>
                        <option value="Otros">Otros</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td><label>Comentarios*</label></td>
                <td><input type="text" id="comentario" name="comentario"/></td>
            </tr>

            <tr style="display: none;">
                <td><label>Oportunidad*</label></td>
                <td><input type="text" name="potentialname" data-label="" value="" /></td>
            </tr>
            <tr style="display: none;">
                <td><label>Fecha estimada de cierre*</label></td>
                <td><input type="date" name="closingdate" data-label="" value="" />(yyyy-mm-dd)</td>
            </tr>
            <tr style="display: none;">
                <td><label>Fase de venta*</label></td>
                <td>
                    <select name="sales_stage" data-label="sales_stage">
                        <option value="">Seleccione el valor</option>
                        <option value="Lead Nuevo" selected>Lead Nuevo</option>
                        <option value="En Gestion">En Gestion</option>
                        <option value="Documentacion">Documentacion</option>
                        <option value="Ingreso a Riesgos">Ingreso a Riesgos</option>
                        <option value="En Comite">En Comite</option>
                        <option value="Aprobada">Aprobada</option>
                        <option value="Ingreso a Operaciones">Ingreso a Operaciones</option>
                        <option value="Closed Won">Operacion Ganada</option>
                        <option value="Closed Lost">Operacion Perdida</option>
                    </select>
                </td>
            </tr>
            <tr style="display: none;">
                <td><label>Origen de Oportunidad*</label></td>
                <td>
                    <select name="leadsource" data-label="leadsource" required="">
                        <option value="">Seleccione el valor</option>
                        <option value="Referido del Aceptante">Referido del Aceptante</option>
                        <option value="Referidos del Ejecutivo">Referidos del Ejecutivo</option>
                        <option value="Referido del Dealer">Referido del Dealer</option>
                        <option value="Asignado por Gerencia">Asignado por Gerencia</option>
                        <option value="Landing Page" selected>Landing Page</option>
                        <option value="WhatsApp">WhatsApp</option>
                        <option value="Chatbot">Chatbot</option>
                        <option value="Mailing">Mailing</option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
    <input type="submit" value="Submit" />
</form>



<!-- Script nativo de formulario -->
<script type="text/javascript">
    window.onload = function () {
        var N = navigator.appName,
            ua = navigator.userAgent,
            tem;
        var M = ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
        if (M && (tem = ua.match(/version\/([\.\d]+)/i)) != null) M[2] = tem[1];
        M = M ? [M[1], M[2]] : [N, navigator.appVersion, "-?"];
        var browserName = M[0];
        var form = document.getElementById("__vtigerWebForm"),
            inputs = form.elements;
        form.onsubmit = function () {
            var required = [],
                att,
                val;
            for (var i = 0; i < inputs.length; i++) {
                att = inputs[i].getAttribute("required");
                val = inputs[i].value;
                type = inputs[i].type;
                if (type == "email") {
                    if (val != "") {
                        var elemLabel = inputs[i].getAttribute("label");
                        var emailFilter = /^[_/a-zA-Z0-9]+([!"#$%&()*+,./:;<=>?\^_`{|}~-]?[a-zA-Z0-9/_/-])*@[a-zA-Z0-9]+([\_\-\.]?[a-zA-Z0-9]+)*\.([\-\_]?[a-zA-Z0-9])+(\.?[a-zA-Z0-9]+)?$/;
                        var illegalChars = /[\(\)\<\>\,\;\:\"\[\]]/;
                        if (!emailFilter.test(val)) {
                            alert("For " + elemLabel + " field please enter valid email address");
                            return false;
                        } else if (val.match(illegalChars)) {
                            alert(elemLabel + " field contains illegal characters");
                            return false;
                        }
                    }
                }
                if (att != null) {
                    if (val.replace(/^\s+|\s+$/g, "") == "") {
                        required.push(inputs[i].getAttribute("label"));
                    }
                }
            }
            if (required.length > 0) {
                alert("The following fields are required: " + required.join());
                return false;
            }
            var numberTypeInputs = document.querySelectorAll("input[type=number]");
            for (var i = 0; i < numberTypeInputs.length; i++) {
                val = numberTypeInputs[i].value;
                var elemLabel = numberTypeInputs[i].getAttribute("label");
                var elemDataType = numberTypeInputs[i].getAttribute("datatype");
                if (val != "") {
                    if (elemDataType == "double") {
                        var numRegex = /^[+-]?\d+(\.\d+)?$/;
                    } else {
                        var numRegex = /^[+-]?\d+$/;
                    }
                    if (!numRegex.test(val)) {
                        alert("For " + elemLabel + " field please enter valid number");
                        return false;
                    }
                }
            }
            var dateTypeInputs = document.querySelectorAll("input[type=date]");
            for (var i = 0; i < dateTypeInputs.length; i++) {
                dateVal = dateTypeInputs[i].value;
                var elemLabel = dateTypeInputs[i].getAttribute("label");
                if (dateVal != "") {
                    var dateRegex = /^[1-9][0-9]{3}-(0[1-9]|1[0-2]|[1-9]{1})-(0[1-9]|[1-2][0-9]|3[0-1]|[1-9]{1})$/;
                    if (!dateRegex.test(dateVal)) {
                        alert("For " + elemLabel + " field please enter valid date in required format");
                        return false;
                    }
                }
            }
            var inputElems = document.getElementsByTagName("input");
            var totalFileSize = 0;
            for (var i = 0; i < inputElems.length; i++) {
                if (inputElems[i].type.toLowerCase() === "file") {
                    var file = inputElems[i].files[0];
                    if (typeof file !== "undefined") {
                        var totalFileSize = totalFileSize + file.size;
                    }
                }
            }
            if (totalFileSize > 52428800) {
                alert("Maximum allowed file size including all files is 50MB.");
                return false;
            }
        };
    };
</script>
<script type="text/javascript">
    /*
    Define el formulario de destino, cuando se trata del landing genérico de Leasing/Factoring
    */
    let opportunity_type = document.getElementById('opportunity_type');
    let publicid = document.getElementById('publicid');

    //Ahora decimos a que formulario envia los datos 
    if(publicid.value == "Leasing"){
        publicid.value = "LANDING_GENERICO_LEASING";
    }
    else if(publicid.value == 'Factoring'){
        publicid.value = "LANDING_GENERICO_FACTORING";
    }
    else{
        publicid.value = '';
    }
    
    // opportunity_type.addEventListener('change', (event) => {
    //     const value = event.target.value;
    //     if ( value == 'Leasing' ) {
    //         publicid.value = "LANDING_GENERICO_LEASING";
    //     } else if ( value == 'Factoring' ) {
    //         publicid.value = "LANDING_GENERICO_FACTORING";
    //     } else {
    //         publicid.value = '';
    //     }
    // });
    // var evt = document.createEvent("HTMLEvents");
    // evt.initEvent("change", false, true);
    // opportunity_type.dispatchEvent(evt);
</script>

</body>
</html>