<?php 
/**
 * home.php
 */
?>

<?php include 'template/header.php'; ?>
<div id="main">
	<div id="top-banner" class="banner position-relative">
		<div class="layer"></div>
		<div class="container-fluid banner-content text-center text-white">
			<div class="row">
				<div class="col-12">
					<h1>Experiencia en el Futuro...</h1>
				</div>
				<div class="col-md-8 offset-md-2 my-4 fs-4">
					Solucionando tus necesidades para la carga de vehiculos electricos.
				</div>
			</div>
		</div>
	</div>
	<div id="araltec" class="container py-5">
		<div class="col-lg-10 offset-lg-1">
			<div class="row flex-lg-row-reverse">
				<div class="col-lg-7 pt-lg-2 pt-xl-5 d-flex pb-5 pb-lg-0">
					<div>
						<h1 class="text-center text-lg-start">Araltec Energia</h1>
						<div class="fs-5 py-4">
							En Araltec Energía, somos una empresa mexicana fundada por un equipo de expertos en energía e infraestructura de carga para vehículos eléctricos. Con una sólida trayectoria en desarrollo, construcción, ingeniería y gestión de proyectos, ahora canalizamos nuestra experiencia para ofrecer equipo de carga, así como soluciones completas de carga eléctrica que satisfacen las necesidades del mercado mexicano.
						</div>
					</div>
				</div>
				<div class="col-lg-5 d-flex">
					<div class="px-4 text-center text-xl-start w-100">
						<img src="images/charge_araltec.jpg" class="img-fluid rounded">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="text-banner d-none">
		<div class="text-background">
			<div class="container h2 px-lg-5">
				<div class="col-lg-8 offset-lg-2 text-secondary">
					Soluciones para la implementacion de Infraestructura de carga para Vehiculos Electricos
				</div>
			</div>
		</div>
	</div>
	<div id="alcance" class="p-5 bg-yellow10 box">
		<div class="container bg-white rounded">
			<div class="px-4 py-5 px-xl-0 px-xxl-4">
				<div class="pb-5 text-center">
					<h1>Soluciones Integrales</h1>
					<h3>Araltec Energía es tu asesor experto para una solución completa</h3>
					<div class="py-2 fs-5">
						Araltec Energía es tu asesor experto en soluciones completas para la carga de vehículos eléctricos. Con experiencia en selección y suministro de equipos, infraestructura, y desarrollo de estrategias personalizadas, ofrecemos lo siguiente:
					</div>
				</div>
				<div class="row justify-content-center pb-5">
					<div class="col-xl-2 col-md-4  py-2">
						<div class="card  text-center d-block d-xxl-flex" >
						  	<img src="/images/alcance-desarrollo_200.png" class="img-fluid" alt="...">
							<div class="card-body p-2 text-center ff-semibold">
								Desarrollo<br> de estrategia<br> de negocio
							</div>
						</div>
					</div>
					<div class="col-xl-2 col-md-4  py-2">
						<div class="card text-center d-block d-xxl-flex" >
						  	<img src="/images/alcance-suministro_200.png" class="img-fluid" alt="...">
							<div class="card-body p-2 text-center ff-semibold">
								Suministro<br> de equipos<br> de carga
							</div>
						</div>
					</div>
					<div class="col-xl-2 col-md-4  py-2">
						<div class="card text-center d-block d-xxl-flex" >
						  	<img src="/images/alcance-instalacion_200.png" class="img-fluid" alt="...">
							<div class="card-body p-2 text-center ff-semibold">
								Instalación<br> calificada<br>  del equipo
							</div>
						</div>
					</div>
					<div class="col-xl-2 col-md-4  py-2">
						<div class="card text-center d-block d-xxl-flex" >
						  	<img src="/images/alcance-mejoras_200.png" class="img-fluid" alt="...">
							<div class="card-body p-2 text-center ff-semibold">
								Mejoras<br> de infraestructura<br> eléctrica
							</div>
						</div>
					</div>
					<div class="col-xl-2 col-md-4  py-2">
						<div class="card text-center d-block d-xxl-flex" >
						  	<img src="/images/alcance-servicio_200.png" class="img-fluid" alt="...">
							<div class="card-body p-2 text-center ff-semibold">
								Servicio y<br> Mantenimiento
							</div>
						</div>
					</div>
				</div>
				    <div class="py-3 text-center">
					    <a href="/alcance" class="btn btn-blue">Conocer mas</a>
					</div>
			</div>
		</div>
	</div>
	<div id="mercados" class="bg-blue py-5 banner">
		<div class="layer"></div>
		<div class="text-center">
			<div class="pb-1 text-white">
				<h1>Mercados</h1>
			</div>
			<div class=" container text-white fs-5 pb-5">
				Impulsa tu hogar, comercio, desarrollo multifamiliar, o cualquier tipo de estacionamiento, con equipo de carga para vehículos eléctricos. Atrae clientela, reduce costos, aumenta la eficiencia y mejora tu imagen. ¡Descubre cómo podemos ayudarte a dar el siguiente paso hacia un futuro!
			</div>
		</div>
			<?php include 'mercados-slide.php'; ?>
		</div>
	</div>

	<div id="socios">
		<a href="/socios-venta">
			<div class="bg-banner4 py-5">
				<div class="container  text-center">
					<div class="h1 text-white pt-5 mt-5">
						Programa de asociados de venta
					</div>
					<div class="fs-5 text-white pt-4">
						<div class="fs-4">Asociese con</div>
						<div class="row">
							<div  class="col-md-8 offset-md-2  col-lg-6 offset-lg-3 my-4 fs-4">
								<img src="/images/logo-02.png" class="img-fluid">
							</div>
						</div>
					</div>
					<div class="text-white pt-5 text-center mt-5 fs-5 ff-semibold">
						Conviértete en Asociado de Venta y Expande Tus Oportunidades!
					</div>
				</div>
			</div>
		</a>
	</div>

	<div id="contacto" class="bg-gray py-5">
		<div class="text-center">
			<h1>Contactar</h1>
		</div>
		<div class="container text-gray contact-dark">
			<div id="contactMessage"></div>
			<form id="contactForm" method="post" action='send-contact'>
				<input id="position" type="text" name="position" class="d-none" />
				<div class="row justify-content-md-center">
					<div class="col-12 required">
						<label for="contact-type">
							Tipo de Contacto
						</label>
						<label class="text-red-araltec ff-semibold">*</label>
						<label class="error ff-semibold px-2 text-red-araltec d-none">Campo requerido</label>
						<select id="contact-type" name="contact-type"
						class="form-control field">
							<option value="">Seleccione tipo de contacto</option>
							<option value="1">A – Me interesa comprar equipo – pero tengo algunas preguntas</option>
							<option value="2">B – Me interesa platicar con Araltec Energía acerca de una instalación de cargadores para vehículos eléctricos</option>
							<option value="3">C – Me interesa una asesoría para determinar una estrategia de carga de vehículos de acuerdo a mis requisitos.</option>
							<option value="4">D – Me interesa participar en este sector  a través del programa de asociados de venta de Araltec Energía</option>
							<option value="5">E – Soy contratista eléctrico (calificado) y quiero participar en el programa de instalación, o de servicio y mantenimiento de Araltec Energía</option>
							<option value="6">F- Soy proveedor de materiales o servicios y me gustaría trabajar con Araltec Energía</option>
							<option value="7">G – Represento a un negocio relacionado al sector y me gustaría trabajar con Araltec Energía</option>
							<option value="8">H – Me interesa saber de oportunidades de empleo con Araltec Energía</option>
							<option value="9">I – Tengo problemas con mi orden de equipo</option>
							<option value="10">J – Soy operador de una flotilla y necesito asesorarme acerca de una estrategia con vehículos eléctricos</option>
							<option value="11">K – Necesito consultar con Araltec Energía acerca de otros temas</option>
						</select>
					</div>
					<div class="col-md-6">
						<div class="form-group required" data-id="firstname">
							<label for="firstname">
								Nombre
							</label>
							<label class="text-red-araltec ff-semibold">*</label>
							<label class="error ff-semibold px-2 text-red-araltec d-none">
								Campo requerido
							</label>
							<input type="text" id="firstname" name="firstname" 
							class="form-control field">
						</div>
					</div>
					<div class="col-md-6">
						<div class="form-group required" data-id="lastname">
							<label for="lastname">Apellido</label>
							<label class="text-red-araltec ff-semibold">*</label>
							<label class="error ff-semibold px-2 text-red-araltec d-none">
								Campo requerido
							</label>
							<input type="text" id="lastname" name="lastname" 
							class="form-control field">
						</div>
					</div>
				
					<div class="col-md-6">
						<div class="form-group" data-id="company">
							<label for="company">Empresa</label>
							<input type="text" id="company" name="company" 
							class="form-control field">
						</div>
					</div>
					<div class="col-md-6">
						<div class="form-group required" data-id="email">
							<label for="email">Email</label>
							<label class="text-red-araltec ff-semibold">*</label>
							<label class="error ff-semibold px-2 text-red-araltec d-none">
								Campo requerido
							</label>
							<label id="validateEmail" class="px-2 text-red-araltec d-none ff-semibold">
								El email no es valido
							</label>
							<input type="text" id="email" name="email" 
							class="form-control field">
						</div>
					</div>
					<div class="col-12">
						<div class="form-group required" data-id="message">
							<label for="message">Mensaje</label>
							<label class="text-red-araltec ff-semibold">*</label>
							<label class="error ff-semibold px-2 text-red-araltec d-none">
								Campo requerido
							</label>
							<textarea class="form-control field" id="message" name="message"></textarea>
						</div>
					</div>
					<div class="col-12 py-2">
						<div id="sendContact" class="btn btn-blue form-control">
							Enviar	
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
<script type="text/javascript">

	$("#email").focusout(function(){
		var email = $('#email').val();
		validate = validateEmail(email);
		if (validate) {
			$('#validateEmail').addClass('d-none');
		} else {
			$('#validateEmail').removeClass('d-none');
		}
	});

	$('#sendContact').on('click', function(){
		console.log('debug contact');
		var position = $('#position').val(); 
		var type = $('#contact-type').val();
		var firstname = $('#firstname').val();
		var lastname = $('#lastname').val();
		var company = $('#company').val();
		var email = $('#email').val();
		var message = $('#message').val();

		var validate = checkForm();
		if (validate) {
			console.log('debug validate');
			$.ajax({
				type	: 'POST',
				url		: '/sendcontact',
				data	: {
					'position'  : position,
					'type'		: type,
					'firstname'	: firstname,
					'lastname' 	: lastname,
					'email' 	: email,
					'company' 	: company,
					'message'	: message
                },
				success	: function(json) {
					console.log(json);
					var response = $.parseJSON(json);
					console.log(response);
					//$('#contactMessage').html(response.message);
					$('#contact-type').val('');
					$('#firstname').val('');
					$('#lastname').val('');
					$('#company').val('');
					$('#email').val('');
					$('#message').val('');
				}
			});
		}

	});

	function checkForm() {
		var error = 0;
		$('.error').addClass('d-none');
		$('.required').each(function (i, el) {
			var data = $(this).find(' .field').val();
			var id = $(this).find(' .field').attr('id');
			console.log(i + ': ' + id);
			var len = data.length;
			if (len<1) {
				$(this).find('.error').removeClass('d-none');
				error = 1;
				return;
			}
			if (id == 'email') {
				if (!validateEmail(data)) {
					error = 1;
				}
			}
		});
		if (error == 0) {
			return true;
		} else {
			return false;
		}
	}

	function validateEmail(email) {
	    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
	    if( !emailReg.test( email ) ) {
	        return false;
	    } else {
	        return true;
	    }
	}
</script>
<?php include 'template/footer.php'; ?>