<script type="text/javascript" src="{$SITE_URL}/libs/jquery/jquery.ui.core.js"></script>
<script type="text/javascript" src="{$SITE_URL}/libs/jquery/plugins/jquery.ui.datepicker.js"></script>
<link type="text/css" 	rel="stylesheet"	href="{$SITE_URL}/libs/jquery/css/ui-lightness/jquery-ui-1.8.23.custom.css" />

<style>


#paymentform_form{
	
	width:100%;
	height:auto;
	position:relative;
	padding:50px;}
				
			#btn_submit{
				font-family:Arial, Helvetica, sans-serif;
				font-size:10pt;
				font-weight:bold;
				background:#0CC;
				margin:10px auto;
				padding:20px 50px;
				border:0px solid #428931;
				color:#FFF !important;
				width:auto;
				max-width:100%;
				height:100%;
				cursor:pointer;
				}	
				
			#error_validate{
				padding:6px;
				background-color:#ffed77;
				color:#f48814;
				border:1px solid #ffc586;
				font-family:Tahoma, Geneva, sans-serif;
				font-size:8pt;
				font-weight:bold;
				overflow:hidden;
				display:none;
				width:100%;
				height:auto;
				float:left;
				margin:10px 0 0 0px;
			}	
			
			#error_validate label{
				font-family:Tahoma, Geneva, sans-serif;
				font-size:8pt;
				font-weight:bold;
				color:#f48814;
			}	
			
			
			#loading_form {
				position:absolute;
				display:none;
				left:0px;
				width:650px;
				height:246px;
				overflow:hidden;
				background:url("{$TEMPLATE_URL}/img/layer_form.png");
				
				}
				
			#loading_form img{
				position:absolute;
				width:66px;
				min-height:66px;
				top:50%;
				left:50%;
				margin-top:-33px;
				margin-left:-33px;}
				
				
			#message_send{
				
				position:absolute;
				left:200px;
				font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
				font-size:12pt;
				font-weight:bold;
				text-align:center;
				padding:100px 200px;
				}
				
				
			label.error{
				display:none;}
				
		/* FORMULARIOS
		=========================================================================*/
					
		.error
		{
			color:#fc4800;}
			
		.label_tit{
			padding:5px 0;}
																																																																																				   
	</style>
	
		<div id="paymentform_form" class="col-md-12">
			<form>
			<fieldset>
			
							<label class="label_tit col-md-12" for="nombre" id="nombre_label">Nombre / Empresa: </label>
                                <div class="col-md-12">
                                    <input type="textform" name="nombre" id="nombre" size="50" value="" class="form-control" />
                                </div>
							<label class="label_tit col-md-12" for="email" id="email_label">Email: </label>
                                <div class="col-md-12">
                                    <input type="textform" name="email" id="email" size="50" value="" class="form-control" />
                                </div>
							<label class="label_tit col-md-12" for="dominio" id="dominio_label">Dominio: </label>
                                <div class="col-md-12">
                                    <input type="textform" name="dominio" id="dominio" size="30" value="" class="form-control" />
                                </div>
							<label class="label_tit col-md-12" for="factura" id="factura_label"># Recibo/Factura: </label>
                                <div class="col-md-12">
									<input type="textform" name="factura" id="factura" size="50" value="" class="form-control" />
                                </div>
							<label class="label_tit col-md-12" for="formapago" id="formapago_label">Forma de Pago: </label>
                                <div class="col-md-12">
                                    <select name="formapago" size="1" id="formapago" class="form-control">
                                            <option value="">-- Seleccione su forma de pago</option>
                                            <option value="Dep&oacute;sito Bancario">Dep&oacute;sito ó Transferencia</option>
                                            <option value="MercadoPago_oxxo">MercadoPago (OXXO)</option>
                                            <option value="MercadoPago_credito">MercadoPago (Tarjeta de Crédito)</option>
                                            <option value="MercadoPago_debito">MercadoPago (Tarjeta de Débito)</option>
                                            <option value="MercadoPago_deposito">MercadoPago (Depósito)</option>
                                            <option value="PayPal">PayPal</option>
                                    </select>
                                </div>
							<label class="label_tit col-md-12" for="monto" id="monto_label">Monto $: </label>
                                <div class="col-md-12">
                                    <input type="textform" name="monto" id="monto" value="" class="form-control" />
                                </div>
							<label class="label_tit col-md-12" for="consecutivo" id="consecutivo_label">No. Consecutivo / PayPal ID Transaction: </label>
                                <div class="col-md-12">
                                    <input type="textform" name="consecutivo" id="consecutivo" size="50" value="" class="form-control" />
                                </div>
							<label class="label_tit col-md-12" for="fecha" id="fecha_label">Fecha del Pago: </label>
                                <div class="col-md-12">
                                    <input type="textform" name="fecha" id="fecha" size="30" value="" class="form-control" />
                                </div>
							<label class="label_tit col-md-12" for="comentario" id="comentario_label">Mensaje: </label>
                                <div class="col-md-12">
                                    <textarea name="comentario" id="comentario" class="form-control" ></textarea>
                                </div>
							   <div id="error_validate">Por favor verifique sus Datos.</div>
                                <div id="paymentform_contactinfo">
                                            <div class="submit">
                                            	<input type="hidden" name="paymentform" value="paymentform" />
                                            	<input id="btn_submit" type="submit" value="Confirmar mi Pago" class="form-control" />
                                            </div>
                                </div>
			
				</fieldset>
			  </form>

																								
			<div id="loading_form">
				<div id="loading_cont_form">
					<img src="{$TEMPLATE_URL}/img/loader3.gif" />
				</div>                            
			</div>
			
		</div>
	

    
{literal}<script>

	$(document).ready(function() {
		
		$('.contenido_ajax').show();
		$('#loading').hide();
		$('#fecha').datepicker();

		$("#nav ul").tabs("#panes > div", {effect: 'fade', fadeOutSpeed: 200, initialIndex: 0});
	});
	

	$.validator.setDefaults({
		submitHandler: function() {
			
				$('#loading').show();
				$('.contenido_ajax').hide();
				
				var formdata = $('#paymentform_form form').serialize();
				$.ajax({
				  type: "POST",
				  url: "{/literal}{$SITE_URL}/{$SEO}{literal}",
				  data: formdata,
				  success: function(){
					$('#paymentform_form').html("Hemos recibido tu información, en breve tu pago será confirmado. Gracias!").hide('').fadeIn(1500, function(){$('#mensaje').append('')});
					$('#loading').hide();
					$('.contenido_ajax').show();
					}
				
				 })
				 
		  return false;	
		 }
	});



	$("#paymentform_form form").validate({
		
		rules: {
			nombre: {
				required: true,
			},
			email: {
				required: true,
				email: true
			},
			factura: {
				required: true,
			},
			fecha: {
				required: true,
			},
			formapago: {
				required: true,
			},
			monto: {
				required: true,
			},
		},
		
		
		messages: {
			nombre: {
				required: "",
			},
			email: {
				required: "",
				email: "",
			},
			factura: {
				required: "",
			},
			fecha: {
				required: "",
			},
			formapago: {
				required: "",
			},
			monto: {
				required: "",
			},
		},

		errorLabelContainer: $("#error_validate")
	});



</script>{/literal}
    
    


