<?php include '../config.php';?>
        <!-- Modal -->
        <div class="modal fade" id="FormularioCaracteristicasEsp" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Carta de Características Adicionales</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="modalForm">
      <hgroup>
        <h1>Complete los siguientes campos <br><span style="font-size:10px;">Los campos marcados con * son requeridos</span> </h1>
        </hgroup>
        <form id="caractform">

        <div class="group">
            <input onkeyup="habilitaBoton();" onblur="habilitaBoton();" class="forminput" id="tipo_valor" type="text"><span class="highlight"></span><span class="bar"></span>
            <label>Tipo de valor*</label>
        </div>

        <div class="group">
            <input onkeyup="habilitaBoton();" onblur="habilitaBoton();" class="forminput" id="emisora" type="text"><span class="highlight"></span><span class="bar"></span>
            <label>Emisora*</label>
        </div>

        <div class="group">
            <input onkeyup="habilitaBoton();" onblur="habilitaBoton();" class="forminput" id="serie" type="text"><span class="highlight"></span><span class="bar"></span>
            <label>Serie*</label>
        </div>

        <h1 style="    padding: 30px 0 30px;
    text-align: center;
    width: 100%;
    display: inline-block;">Seleccione las características que defina su instrumento de acuerdo a las opciones que se muestran en los catálogos para cada uno de los criterios:</h1>

            <div class="selects">
                <div class="group">
                    <label>Característica 1*</label>
                    <select id="caracteristica1" onchange="updatec2();">
                            <?php
                        $curl = curl_init();

                        curl_setopt_array($curl, array(
                        CURLOPT_URL => $endpoint_graph_cms,
                        CURLOPT_RETURNTRANSFER => true,
                        CURLOPT_ENCODING => '',
                        CURLOPT_MAXREDIRS => 10,
                        CURLOPT_TIMEOUT => 0,
                        CURLOPT_FOLLOWLOCATION => true,
                        CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
                        CURLOPT_CUSTOMREQUEST => 'POST',
                        CURLOPT_POSTFIELDS =>'{"query":"query MyQuery {\\r\\n  caracteristicaAdicional(where: {id: \\"ckoue6y34dspz0b754xn2enr2\\"}) {\\r\\n    id\\r\\n    localizations {\\r\\n      codigo\\r\\n    }\\r\\n    codigo\\r\\n  }\\r\\n}\\r\\n","variables":{}}',
                        CURLOPT_HTTPHEADER => array(
                            'Content-Type: application/json'
                        ),
                        ));

                        $response = curl_exec($curl);

                        curl_close($curl);
                        //echo $response;

                        $arrayselects = json_decode($response, true);
                        $code = $arrayselects['data']['caracteristicaAdicional']['localizations'][0]['codigo'];

                        echo $code;
                    ?>
                </select>
            </div>

            <div class="group">
                <label>Característica 2*</label>
                <select id="caracteristica2" onchange="updatec3();"></select>
            </div>

            <div class="group">
                <label>Característica 3*</label>
                <select id="caracteristica3" onchange="updatec4();"></select>
            </div>

            <div class="group">
                <label>Característica 4*</label>
                <select id="caracteristica4" onchange="updatec5();"></select>
            </div>

            <div class="group">
                <label>Característica 5*</label>
                <select id="caracteristica5" onchange="updatec6();"></select>
            </div>

            <div class="group">
                <label>Característica 6*</label>
                <select id="caracteristica6" onchange="habilitaBoton();"></select>
            </div>
        </div>




        <div class="datos">
            <div class="group">
                <input onkeyup="habilitaBoton();" onblur="habilitaBoton();" class="forminput" id="nombre_completo" type="text"><span class="highlight"></span><span class="bar"></span>
                <label>Nombre completo*</label>
            </div>

            <div class="group">
                <input onkeyup="habilitaBoton();" onblur="habilitaBoton();" class="forminput" id="puesto" type="text"><span class="highlight"></span><span class="bar"></span>
                <label>Puesto*</label>
            </div>

            <div class="group">
                <input class="forminput" id="nombre_completo2" type="text"><span class="highlight"></span><span class="bar"></span>
                <label>Nombre completo <span>(Opcional)</span></label>
            </div>

            <div class="group">
                <input class="forminput" id="puesto2" type="text"><span class="highlight"></span><span class="bar"></span>
                <label>Puesto <span>(Opcional)</span></label>
            </div>
        </div>
  
    
            <button style="pointer-events:none; opacity:.5;" type="button" class="button buttonBlue" onclick="sendCaracteristicas();">Generar
                <div class="ripples buttonRipples"><span class="ripplesCircle"></span></div>
            </button>

            <div id="respuestaform"></div>
        </form>


      </div>

      <div class="modal-body" id="resultsForm" style="display:none;">

      <a class="btn btn-primary btn-xl  js-scroll-trigger" onclick="guardaPDF();"><i class="descarga-icon fas fa-file-pdf" aria-hidden="true"></i> Generar PDF</a>
      <br>
        <div class="infofinal">
            <p id="tipo_valor_text"><b>Tipo valor:</b> <span></span></p>
            <p id="emisora_text"><b>Emisora:</b> <span></span></p>
            <p id="serie_text"><b>Serie:</b> <span></span></p>

            <p id="c1_text"><b>Característica 1:</b> <span></span></p>
            <p id="c2_text"><b>Característica 2:</b> <span></span></p>
            <p id="c3_text"><b>Característica 3:</b> <span></span></p>

            <p id="c4_text"><b>Característica 4:</b> <span></span></p>
            <p id="c5_text"><b>Característica 5:</b> <span></span></p>
            <p id="c6_text"><b>Característica 6:</b> <span></span></p>


            <p id="nombre_completo_text"><b><span></span></b></p>
            <p id="puesto_text"><span></span></p>


            <p id="nombre_completo2_text"><b><span></span></b></p>
            <p id="puesto2_text"><span></span></p>
        
        </div>

        <a class="btn btn-primary btn-xl  js-scroll-trigger" onclick="volver();"><i class="descarga-icon fas fa-arrow-left" aria-hidden="true"></i> Volver</a>
      <br>

            
                                
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" data-toggle="modal" data-target="#FormularioCaracteristicasEsp" class="btn btn-primary"><?php echo $textoCerrar; ?></button>
      </div>
    </div>
  </div>
</div>


<style>

#caractform {
        width: 100%;
        margin: 10px auto;
        padding: 3em 2em 2em 2em;
        background: #fafafa;
        /* min-width: 1500px; */
        border-radius: 10px;
        font-size: 12px;
        font-family: "Montserrat";
    }
    #caractform .group {
        position: relative;
        margin-bottom: 35px;
        width: 33.33%;
        float: left;
        padding: 0 10px;
    }

    #caractform input, #caractform textarea  {
        font-size: 18px;
        padding: 10px 10px 10px 5px;
        -webkit-appearance: none;
        display: block;
        background: #fafafa;
        color: #636363;
        width: 100%;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid #757575;
    }

    #caractform input:focus { outline: none; }


    /* Label */

    #caractform label {
        color: #999; 
        font-size: 14px;
        font-weight: normal;
        position: absolute;
        pointer-events: none;
        left: 5px;
        top: 10px;
        transition: all 0.2s ease;
    }

    #caractform label span {
        font-size: 10px;

    }


    /* active */

    #caractform input:focus ~ label, #caractform input.used ~ label, #caractform textarea:focus ~ label, #caractform textarea.used ~ label  {
        top: -20px;
    transform: scale(.75); left: -2px;
        /* font-size: 14px; */
        color: #2b4365;
    }


    /* Underline */

    #caractform .bar {
        position: relative;
        display: block;
        width: 100%;
    }

    #caractform .bar:before, #caractform .bar:after {
        content: '';
        height: 2px; 
        width: 0;
        bottom: 1px; 
        position: absolute;
        background: #2b4365; 
        transition: all 0.2s ease;
    }

    #caractform .bar:before { left: 50%; }

    #caractform .bar:after { right: 50%; }


    /* active */

    #caractform input:focus ~ .bar:before, #caractform input:focus ~ .bar:after { width: 50%; }


    /* Highlight */

    #caractform .highlight {
        position: absolute;
        height: 60%; 
        width: 100px; 
        top: 25%; 
        left: 0;
        pointer-events: none;
        opacity: 0.5;
    }


    /* active */

    #caractform input:focus ~ .highlight {
        animation: inputHighlighter 0.3s ease;
    }


    /* Animations */

    @keyframes inputHighlighter {
        from { background: #2b4365; }
        to 	{ width: 0; background: transparent; }
    }


    /* Button */

    #caractform .button {
    position: relative;
    display: inline-block;
    padding: 12px 24px;
    margin: .3em 0 1em 0;
    width: 100%;
    vertical-align: middle;
    color: #fff;
    font-size: 16px;
    line-height: 20px;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    letter-spacing: 1px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid #48aa42;
    cursor: pointer;
    transition: all 0.15s ease;
    }
    #caractform .button:focus { outline: 0; }


    /* Button modifiers */

    #caractform .buttonBlue {
    background: #2b4365;
    text-shadow: 1px 1px 0 #48aa42;
    }

    #caractform .buttonBlue:hover { background: #48aa42; }


    /* Ripples container */

    #caractform .ripples {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
    }


    /* Ripples circle */

    #caractform .ripplesCircle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    }

    #caractform .ripples.is-active .ripplesCircle {
    animation: ripples .4s ease-in;
    }

    .btn-primary {
        font-family: "Montserrat", sans-serif;
    }
    /* Ripples animation */

    @keyframes ripples {
    0% { opacity: 0; }

    25% { opacity: 1; }

    100% {
        width: 200%;
        padding-bottom: 200%;
        opacity: 0;
    }
    }

    .selects select {
    word-wrap: normal;
    font-size: 14px;
    padding: 10px 10px 10px 5px;
    -webkit-appearance: none;
    display: block;
    background: #fafafa;
    color: #636363;
    width: 100%;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #757575;
}
#caractform .selects label {
    position: relative;
    color: #2b4365;
    font-weight: 600;
}
#caractform .datos .group {
    width: 50%;
}
.infofinal {
    width: 100%;
    padding: 30px 10%;
    color:222;
}
.infofinal b {
    color: #2b4365;
    font-family: "Montserrat";
}
p#c1_text {
    margin-top: 40px;
}
p#nombre_completo_text {
    margin-top: 40px;
    text-align: center;
    border-top: 1px solid #2b4365;
    padding-top: 10px;
    margin-bottom: 0;
}
p#nombre_completo2_text, #puesto_text, #puesto2_text {
    text-align: center;
}
p#nombre_completo2_text {
    margin-bottom: 0;
}
p#puesto2_text {
    text-align: center;
}

div#resultsForm .btn-primary {
    float: right;
    /* position: absolute; */
}
h5#exampleModalLabel {
    width: 100%;
    float: left;
    padding: 10px 20px 30px;
}
#caractform input:focus ~ label, #caractform input.used ~ label, #caractform textarea:focus ~ label, #caractform textarea.used ~ label {
	top: -20px;
	transform: scale(.75);
	left: -2px;
	/* font-size: 14px; */
	color: #2b4365;
}
@media(max-width:700px){
    .extendido {
        transform: none;
        position: relative;
    }
    .estadisticas .title {
        margin: 0;
        text-align: left!important;
    }
    .estadisticas .title h4.text-left {
        text-align: left!important;
        margin-bottom: 20px;
    }
    .extendido img {
        height: 100px;
        width: 100%;
        object-fit: cover;
    }
    h4, .h4 {
        font-size: 2rem;
        color: #2b4365;
    }
}
    </style>

    <script>
            function updatec2(){
                $("#caracteristica2").val("");
                $("#caracteristica3").val("");
                $("#caracteristica4").val("");
                $("#caracteristica5").val("");
                $("#caracteristica6").val("");
                var letra = $("#caracteristica1").val();
                $("#caracteristica2").load('/include/caracteristica?number=2&c='+letra);
                habilitaBoton();
            }

            function updatec3(){

                $("#caracteristica3").val("");
                $("#caracteristica4").val("");
                $("#caracteristica5").val("");
                $("#caracteristica6").val("");
                var letra = $("#caracteristica1").val();
                var letra2 = $("#caracteristica2").val();
                var l2 = letra2.charAt(0);
                $("#caracteristica3").load('/include/caracteristica?number=3&c='+letra+l2);
                habilitaBoton();
            }

            function updatec4(){

                $("#caracteristica4").val("");
                $("#caracteristica5").val("");
                $("#caracteristica6").val("");
                var letra = $("#caracteristica1").val();
                var letra2 = $("#caracteristica2").val();
                var l2 = letra2.charAt(0);
                var letra3 = $("#caracteristica3").val();
                var l3 = letra3.charAt(0);
                $("#caracteristica4").load('/include/caracteristica?number=4&c='+letra+l2+l3);
                habilitaBoton();
            }


            function updatec5(){
                $("#caracteristica5").val("");
                $("#caracteristica6").val("");
                var letra = $("#caracteristica1").val();
                var letra2 = $("#caracteristica2").val();
                var l2 = letra2.charAt(0);
                var letra3 = $("#caracteristica3").val();
                var l3 = letra3.charAt(0);
                var letra4 = $("#caracteristica4").val();
                var l4 = letra4.charAt(0);
                $("#caracteristica5").load('/include/caracteristica?number=5&c='+letra+l2+l3+l4);
                habilitaBoton();
            }

            function updatec6(){
                $("#caracteristica6").val("");
                var letra = $("#caracteristica1").val();
                var letra2 = $("#caracteristica2").val();
                var l2 = letra2.charAt(0);
                var letra3 = $("#caracteristica3").val();
                var l3 = letra3.charAt(0);
                var letra4 = $("#caracteristica4").val();
                var l4 = letra4.charAt(0);
                var letra5 = $("#caracteristica5").val();
                var l5 = letra5.charAt(0);
                $("#caracteristica6").load('/include/caracteristica?number=6&c='+letra+l2+l3+l4+l5);
                habilitaBoton();
            }

            function sendCaracteristicas(){
                var tipo_valor = $("#tipo_valor").val();
                var emisora = $("#emisora").val();
                var serie = $("#emisora").val();

                var c1 = $("#caracteristica1").val();
                var c2 = $("#caracteristica2").val();
                var c3 = $("#caracteristica3").val();

                var c4 = $("#caracteristica4").val();
                var c5 = $("#caracteristica5").val();
                var c6 = $("#caracteristica6").val();

                var nombre = $("#nombre_completo").val();
                var puesto = $("#puesto").val();


                var nombre2 = $("#nombre_completo2").val();
                var puesto2 = $("#puesto2").val();



                $("#tipo_valor_text span").text(tipo_valor);
                $("#emisora_text span").text(emisora);
                $("#serie_text span").text(serie);


                $("#c1_text span").text(c1);
                $("#c2_text span").text(c2);
                $("#c3_text span").text(c3);

                $("#c4_text span").text(c4);
                $("#c5_text span").text(c5);
                $("#c6_text span").text(c6);
                
                $("#nombre_completo_text span").text(nombre);
                $("#puesto_text span").text(puesto);

                $("#nombre_completo2_text span").text(nombre2);
                $("#puesto2_text span").text(puesto2);

                $("#modalForm").slideUp();
                $("#resultsForm").slideDown();
            }

            function volver(){
               
                $("#resultsForm").slideUp();
                $("#modalForm").slideDown();
            }

            function guardaPDF(){

                var tipo_valor = $("#tipo_valor").val();
                var emisora = $("#emisora").val();
                var serie = $("#emisora").val();

                var c1 = $("#caracteristica1").val();
                var c2 = $("#caracteristica2").val();
                var c3 = $("#caracteristica3").val();

                var c4 = $("#caracteristica4").val();
                var c5 = $("#caracteristica5").val();
                var c6 = $("#caracteristica6").val();

                var nombre = $("#nombre_completo").val();
                var puesto = $("#puesto").val();


                var nombre2 = $("#nombre_completo2").val();
                var puesto2 = $("#puesto2").val();

                
                var url = "pdf-formulario.php?tipo="+encodeURIComponent(tipo_valor)+"&emisora="+encodeURIComponent(emisora)+"&serie="+encodeURIComponent(serie)+"&c1="+encodeURIComponent(c1)+"&c2="+encodeURIComponent(c2)+"&c3="+encodeURIComponent(c3)+"&c4="+encodeURIComponent(c4)+"&c5="+encodeURIComponent(c5)+"&c6="+encodeURIComponent(c6)+"&nombre="+encodeURIComponent(nombre)+"&puesto="+encodeURIComponent(puesto)+"&nombre2="+encodeURIComponent(nombre2)+"&puesto2="+encodeURIComponent(puesto2);

                window.open(url, '_blank');

            }

            function habilitaBoton(){
                var tipo_valor = $("#tipo_valor").val();
                var emisora = $("#emisora").val();
                var serie = $("#serie").val();
                var c1 = $("#caracteristica1").val();
                var c2 = $("#caracteristica2").val();
                var c3 = $("#caracteristica3").val();
                var c4 = $("#caracteristica4").val();
                var c5 = $("#caracteristica5").val();
                var c6 = $("#caracteristica6").val();
                
                var nombre_completo = $("#nombre_completo").val();
                var puesto = $("#puesto").val();

                if(tipo_valor != "" && emisora != "" && serie != ""  && c1 != ""  && c2 != "" && c3 != ""  && c4 != ""  && c5 != "" && c6 != "" && nombre_completo != "" && puesto != "" ){
                    $(".buttonBlue").css("pointer-events", "inherit");
                    $(".buttonBlue").css("opacity", "1");
                }

                else{
                    $(".buttonBlue").css("pointer-events", "none");
                    $(".buttonBlue").css("opacity", ".5");
                }
                
            }

            
            $('.forminput').blur(function() {
            var $this = $(this);
            if ($this.val())
                $this.addClass('used');
            else
                $this.removeClass('used');
            });

    </script>