<style>
#registro{
	padding:25px 10px;
	background:#fafbfc;
	border:1px solid #f0f2f5;
	border-radius:10px;
	overflow:hidden;}

#registro .campo{
	text-align:right;
	padding:5px 10px;}

#registro .col-md-2, .col-md-4, .col-md-9, .col-md-6{
	margin:3px 0;}
	
#registro .submit{
	float:right;}

#registro .requerido{
	color:#e52121;}

#error_validate{
	padding:15px;
	margin:5px 0;}
	
	
</style>

<div id="error_validate" class="col-md-12 alert alert-warning" style="display:none">Verifica tus Datos.</div>
<div id="registro" class="col-md-12">
            <form id="form_registro" class="col-md-12">
            <div class="col-md-12">
                        <div class="campo col-md-2 col-xs-3"><span class="requerido">*</span> Nombre: </div><div class="col-md-4 col-xs-9"><input name="nombre" value="{$POST_NOMBRE}" class="form-control" /></div>
                        <div class="campo col-md-2 col-xs-3"><span class="requerido">*</span> Apellido: </div><div class="col-md-4 col-xs-9"><input name="apellido" value="{$POST_APELLIDO}" class="form-control" /></div>
                        <div class="campo col-md-2 col-xs-3"><span class="requerido">*</span> Empresa: </div><div class="col-md-4 col-xs-9"><input name="empresa" value="{$POST_EMPRESA}" class="form-control" /></div>
                        <div class="campo col-md-2 col-xs-6">País:  </div>
                        										<div class="col-md-4 col-xs-6">
                                                                	<select name="pais" class="pais form-control">
                                                                    	{$RETURN_DATA1}
                                                                    </select>
                                                                </div>
                        <div class="campo col-md-2 col-xs-6">Estado:  </div>
                        										<div class="col-md-4 col-xs-6">
                                                                	<select name="estado" class="estado form-control" disabled="disabled">
                                                                    	{$RETURN_DATA2}
                                                                    </select>
                                                                </div>
                        <div class="campo col-md-2 col-xs-6">Ciudad:  </div>
                        										<div class="col-md-4 col-xs-6">
                                                                	<select name="ciudad" class="ciudad form-control" disabled="disabled">
                                                                    	{$RETURN_DATA3}
                                                                    </select>
                                                                </div>
                        <div class="campo col-md-2 col-xs-3"><span class="requerido">*</span> Dirección:  </div><div class="col-md-4 col-xs-9"><input name="direccion" value="{$POST_DIRECCION}" class="form-control" /></div>
                        <div class="campo col-md-2 col-xs-3"><span class="requerido">*</span> Código Postal:  </div><div class="col-md-4 col-xs-9"><input name="cp" value="{$POST_CP}" class="form-control" /></div>
                        <div class="campo col-md-2 col-xs-3"><span class="requerido">*</span> Email:  </div><div class="col-md-4 col-xs-9"><input name="email" value="{$POST_EMAIL}" class="form-control" /></div>
                	    <div class="campo col-md-2 col-xs-3"><span class="requerido">*</span> Teléfono: </div><div class="col-md-4 col-xs-9"><input name="telefono" value="{$POST_TELEFONO}" class="form-control" /></div>
                        <div class="campo col-md-2 col-xs-6">Recibir Boletín:  </div>
                        										<div class="col-md-4 col-xs-6">
                                                                	<select name="boletin" class="form-control">
                                                                    	<option value="1">Si</option>
                                                                        <option value="0">No</option>
                                                                    </select>
                                                                </div>
                        
                        <div class="col-md-6"> 
                            <div class="campo col-md-2 col-xs-3"> <span class="requerido">*</span>Captcha: </div>
                            <div class="col-md-2 col-xs-4"><img class="col-md-12 captcha" src="http://<?=DOMINIO?>/plugins/captcha.php" /></div>
                            <div class="col-md-7  col-xs-5">
                            	<input type="text" name="norobot" class="form-control captcha" maxlength="4" tabindex="10" />
                            	<div class="col-md-12"><h6>Escríbe los caractéres como aparecen en la imagen.</h6></div>
                            </div>
                            
                        </div>
                    
                    </div>
            
              <input type="hidden" name="register" class="hidden" id="hidden" value="register" />
              <input type="submit" name="submit" class="submit btn btn-lg btn-block btn-primary" id="submit" value="Registrarme!" />
            
            </form>
            
</div>
{literal}
<script>



$('select.pais').change(function(){
		var atrib = $(this).attr("value");
		
		$('#loading').show();
			$.post("{/literal}{$SITE_URL}/{$SEO}&display=ajax{literal}&mod_display=registro&var_data=estados", "&get_data="+ atrib, function(data) {
				$('.estado').removeAttr("disabled");
				$('.estado').hide().html(data).show();
				$('#loading').hide();
			});

	});
$('select.estado').change(function(){
		var atrib = $(this).attr("value");
		
		$('#loading').show();
			$.post("{/literal}{$SITE_URL}/{$SEO}&display=ajax{literal}&mod_display=registro&var_data=ciudades", "&get_data="+ atrib, function(data) {
				$('.ciudad').removeAttr("disabled");
				$('.ciudad').hide().html(data).show();
				$('#loading').hide();
			});

	});


$('input.captcha').change(function(){
			var atrib = $(this).attr("value");
			
					$.post("{/literal}{$SITE_URL}{literal}/plugins/captcha.php", "&verify="+ atrib, function(data) {
						if(data != 'VALIDATED'){
								$('input.captcha').val('');
							}
					});
			});
$.validator.setDefaults({
	submitHandler: function() {
		
		$('#loading').show();
		$('#form_registro').hide();
		
			var formdata = $('#form_registro').serialize();
			$.ajax({
			  type: "POST",
			  url: "{/literal}{$SITE_URL}/{$SEO}&display=ajax{literal}",
			  data: formdata,
			  success: function(res){
				$('.contenido_ajax').html(res);
				$('#loading').hide();
				}
			
			 })
					  
	  return false;	
	 }
});

$("#form_registro").validate({
	
	rules: {
		nombre: {
			required: true,
		},
		apellido: {
			required: true,
		},
		empresa: {
			required: true,
		},
		pais: {
			required: true,
		},
		estado: {
			required: true,
		},
		ciudad: {
			required: true,
		},
		direccion: {
			required: true,
		},
		cp: {
			required: true,
			number: true
		},
		email: {
			required: true,
			email: true
		},
		telefono: {
			required: true,
			number: true
		},
		norobot: {
			required: true,
		},
	},
	
	
	messages: {
		nombre: {
			required: "",
		},
		apellido: {
			required: "",
		},
		empresa: {
			required: "",
		},
		pais: {
			required: "",
		},
		estado: {
			required: "",
		},
		ciudad: {
			required: "",
		},
		direccion: {
			required: "",
		},
		cp: {
			required: "",
			number: "",
		},
		email: {
			required: "",
			email: ""
		},
		telefono: {
			required: "",
			number: "",
		},
		norobot: {
			required: "",
		},
	},
	
		errorLabelContainer: $("#error_validate")
});


</script>
{/literal}
