$( document ).ready(function() {
    $('#send-mail').html(`<form action="" method="post" id="formData" onsubmit="return verCaptcha();">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <h5 class="m-b-0"><label for="name" style="color:#265571;"><strong>Nombre<span class="text-danger">*</span></strong></label></h5>
                                        <input class="form-control form-control-lg" id="name" name="name" placeholder="Nombre" type="text" require>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <h5 class="m-b-0"><label for="email" style="color:#265571;"><strong>Email<span class="text-danger">*</span></strong></label></h5>
                                        <input class="form-control form-control-lg" id="email" name="email" placeholder="Email" type="email" require>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <h5 class="m-b-0"><label for="subject" style="color:#265571;"><strong>Asunto<span class="text-danger">*</span></strong></label></h5>
                                        <input class="form-control form-control-lg" id="subject" name="subject" placeholder="Asunto" type="text" require>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <h5 class="m-b-0"><label for="message" style="color:#265571;"><strong>Mensaje<span class="text-danger">*</span></strong></label></h5>
                                        <textarea class="form-control form-control-lg" id="message"  name="message" placeholder="Escribe tu mensaje" rows="3" require>&nbsp;</textarea>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group error" style="color:red"></div>
                                    <div class="form-group">
                                        <div class="g-recaptcha" data-sitekey="6LfGMhAcAAAAANx-pE6MdFa_ooWWCRF4lcS_pQRA"></div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group"><button class="btn btn-primary w-100" type="submit" id="enviar">Enviar</button></div>
                                </div>
                            </div>
                        </form>`);
});


function verCaptcha(){
    if (grecaptcha.getResponse() == ""){
        $(".error").html("*Los campos marcados son obligatorios");
        return false;
    } else {
        $("#enviar").attr("disabled",true);
        var formData = $("#formData").serializeArray();

  		$.post("https://www6.ucol.mx/redcaleidoscopio/sendmail.php",{sendval:"contacto", data:formData},function data(res){
  			if (res.status ==  "error" ){
  				$("#mensaje").html("<div class='alert alert-danger'>Lo sentimos, el mensaje no fue enviado.</div>");
  			}else {
  				$("#mensaje").html("<div class='alert alert-success'>Gracias por contactarnos, el mensaje fue enviado correctamente.</div>");
                $(".form-control").val("");
  			}
            $("#enviar").attr("disabled",false);
  		});
        return false;
    }
}