<?php
if(isset($_GET['s'])){
	$s = $_GET['s'];
} else {
	$s = 0;
}
?>

<!DOCTYPE html>
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if gt IE 9]> <html lang="en" class="ie"> <![endif]-->
<!--[if !IE]><!-->
<html dir="ltr" lang="en">
	<!--<![endif]-->

	<head>
		<meta charset="utf-8">
		<title>Sodired | Technology for All</title>
		<meta name="description" content="Ingeniería de Software, Soluciones Pymes, Desarrollo web y marca gráfica. Soñamos con el cambio y desarrollo tecnológico, combinamos diseño con tecnología de vanguardia.">
		<meta name="author" content="Sodired">

		<!-- Mobile Meta -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<!-- Favicon -->
		<link rel="shortcut icon" href="images/favicon.ico">

		<!-- Web Fonts -->
		<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic' rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=Raleway:700,400,300' rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=PT+Serif' rel='stylesheet' type='text/css'>

		<!-- Bootstrap core CSS -->
		<link href="bootstrap/css/bootstrap.css" rel="stylesheet">

		<!-- Font Awesome CSS -->
		<link href="fonts/font-awesome/css/font-awesome.css" rel="stylesheet">


		<!-- Fontello CSS -->
		<link href="fonts/fontello/css/fontello.css" rel="stylesheet">

		<!-- Plugins -->
		<link href="plugins/magnific-popup/magnific-popup.css" rel="stylesheet">
		<link href="css/animations.css" rel="stylesheet">
		<link href="plugins/owlcarousel2/assets/owl.carousel.min.css" rel="stylesheet">
		<link href="plugins/owlcarousel2/assets/owl.theme.default.min.css" rel="stylesheet">
		<link href="plugins/hover/hover-min.css" rel="stylesheet">		
		
		<!-- The Project's core CSS file -->
		<!-- Use css/rtl_style.css for RTL version -->
		<link href="css/style.css" rel="stylesheet" >
		<!-- The Project's Typography CSS file, includes used fonts -->
		<!-- Used font for body: Roboto -->
		<!-- Used font for headings: Raleway -->
		<!-- Use css/rtl_typography-default.css for RTL version -->
		<link href="css/typography-default.css" rel="stylesheet" >
		<!-- Color Scheme (In order to change the color scheme, replace the blue.css with the color scheme that you prefer)-->
		<link href="css/skins/light_blue.css" rel="stylesheet">
		<!-- Google recaptcha -->
		<script src='https://www.google.com/recaptcha/api.js'></script>

		<!-- Custom css --> 
		<link href="css/custom.css" rel="stylesheet">
		<script src='https://www.google.com/recaptcha/api.js'></script>
	</head>

	<!-- body classes:  -->
	<!-- "boxed": boxed layout mode e.g. <body class="boxed"> -->
	<!-- "pattern-1 ... pattern-9": background patterns for boxed layout mode e.g. <body class="boxed pattern-1"> -->
	<!-- "transparent-header": makes the header transparent and pulls the banner to top -->
	<!-- "gradient-background-header": applies gradient background to header -->
	<!-- "page-loader-1 ... page-loader-6": add a page loader to the page (more info @components-page-loaders.html) -->
	<body class="no-trans    ">

		<!-- scrollToTop -->
		<!-- ================ -->
		<div class="scrollToTop circle"><i class="icon-up-open-big"></i></div>
		
		<!-- page wrapper start -->
		<!-- ================ -->
		<div class="page-wrapper">
		
			<!-- header-container start -->
			<div class="header-container">
				
				
				<!-- header-top start -->
				<!-- classes:  -->
				<!-- "dark": dark version of header top e.g. class="header-top dark" -->
				<!-- "colored": colored version of header top e.g. class="header-top colored" -->
				<!-- ================ -->
				<div class="header-top dark ">
					<div class="container">
						<div class="row">
							<div class="col-xs-3 col-sm-6 col-md-9">
								<!-- header-top-first start -->
								<!-- ================ -->
								<div class="header-top-first clearfix">
									<ul class="social-links circle small clearfix hidden-xs">
										<li class="facebook"><a target="_blank" href="https://www.facebook.com/sodiredoficial/"><i class="fa fa-facebook"></i></a></li>
										<li class="linkedin"><a target="_blank" href="https://www.linkedin.com/company/sodiredspa/"><i class="fa fa-linkedin"></i></a></li>
										<li class="youtube"><a target="_blank" href="https://www.youtube.com/watch?v=Sp6n1zd61RI"><i class="fa fa-youtube-play"></i></a></li>
									</ul>
									<div class="social-links hidden-lg hidden-md hidden-sm circle small">
										<div class="btn-group dropdown">
											<button type="button" class="btn dropdown-toggle" data-toggle="dropdown"><i class="fa fa-share-alt"></i></button>
											<ul class="dropdown-menu dropdown-animation">
												<li class="linkedin"><a target="_blank" href="https://www.linkedin.com/company/sodiredspa/"><i class="fa fa-linkedin"></i></a></li>
												<li class="youtube"><a target="_blank" href="https://www.youtube.com/watch?v=Sp6n1zd61RI"><i class="fa fa-youtube-play"></i></a></li>
												<li class="facebook"><a target="_blank" href="https://www.facebook.com/sodiredoficial/"><i class="fa fa-facebook"></i></a></li>
											</ul>
										</div>
									</div>
									<ul class="list-inline hidden-sm hidden-xs">
										<li><i class="fa fa-map-marker pr-5 pl-10"></i>Avenida Andrés Sabella, 160 Parque Inglés</li>
										<li><i class="fa fa-phone pr-5 pl-10"></i>+569 6342 4158</li>
										<li><i class="fa fa-envelope-o pr-5 pl-10"></i> contacto@sodired.cl</li>
										<li><i class="fa fa-globe pr-5 pl-10"></i>Antofagasta, Chile</li>
									</ul>
								</div>
								<!-- header-top-first end -->
							</div>
						</div>
					</div>
				</div>
				<!-- header-top end -->
				
				<!-- header start -->
				<!-- classes:  -->
				<!-- "fixed": enables fixed navigation mode (sticky menu) e.g. class="header fixed clearfix" -->
				<!-- "dark": dark version of header e.g. class="header dark clearfix" -->
				<!-- "full-width": mandatory class for the full-width menu layout -->
				<!-- "centered": mandatory class for the centered logo layout -->
				<!-- ================ --> 
				<header class="header  fixed    clearfix">
					
					<div class="container">
						<div class="row">
							<div class="col-md-3 ">
								<!-- header-first start -->
								<!-- ================ -->
								<div class="header-first clearfix">
									
									<!-- logo -->
									<div id="logo" class="logo">
										<a href="index.html"><img id="logo_img" src="images/logo.png" alt="Sodired"></a>
									</div>
								</div>
								<!-- header-first end -->

							</div>
							<div class="col-md-9">
					
								<!-- header-second start -->
								<!-- ================ -->
								<div class="header-second clearfix">
									
								<!-- main-navigation start -->
								<!-- classes: -->
								<!-- "onclick": Makes the dropdowns open on click, this the default bootstrap behavior e.g. class="main-navigation onclick" -->
								<!-- "animated": Enables animations on dropdowns opening e.g. class="main-navigation animated" -->
								<!-- "with-dropdown-buttons": Mandatory class that adds extra space, to the main navigation, for the search and cart dropdowns -->
								<!-- ================ -->
								<div class="main-navigation  animated with-dropdown-buttons">

									<!-- navbar start -->
									<!-- ================ -->
									<nav class="navbar navbar-default navbar-right" role="navigation">
										<div class="container-fluid">

											<!-- Toggle get grouped for better mobile display -->
											<div class="navbar-header">
												<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
													<span class="sr-only">Toggle navigation</span>
													<span class="icon-bar"></span>
													<span class="icon-bar"></span>
													<span class="icon-bar"></span>
												</button>
												
											</div>

											<!-- Collect the nav links, forms, and other content for toggling -->
											<div class="collapse navbar-collapse" id="navbar-collapse-1">
												<!-- main-menu -->
												<ul class="nav navbar-nav ">

													<!-- mega-menu start -->
													<li>
														<a href="index.html">Inicio</a>
													</li>
													<!-- mega-menu end -->
													<!-- mega-menu start -->
													<li>
														<a href="nosotros.html">Acerca de</a>
													</li>
													<li class="dropdown ">
														<a href="servicios.html" class="dropdown-toggle" data-toggle="dropdown">Servicios</a>
														<ul class="dropdown-menu">
															<li ><a href="pymes.html">Soluciones Pymes</a></li>
															<li ><a href="ingenieria-de-software.html">Ingeniería de Software</a></li>
															<li ><a href="casino.html">Gestión Casino</a></li>
															<li ><a href="consultoria.html">Consultoría</a></li>
														</ul>
													</li>
													<li>
														<a href="portfolio.html">Portfolio</a>
													</li>
													<li>
														<a href="precios.html">Precios</a>
													</li>
													<li>
														<a href="contacto.php">Contacto</a>
													</li>
												</ul>
												<!-- main-menu end -->
												
											</div>

										</div>
									</nav>
									<!-- navbar end -->

								</div>
								<!-- main-navigation end -->
								</div>
								<!-- header-second end -->
					
							</div>
						</div>
					</div>
					
				</header>
				<!-- header end -->
			</div>
			<!-- header-container end -->

			<!-- main-container start -->
			<!-- ================ -->
			<section id="contenedorPrincipal" class="main-container">

				<div class="container">
					<div class="row">

						<!-- main start -->
						<!-- ================ -->
						<div class="main col-md-8 space-bottom">
							<p class="lead">Solicitud de Pedido</p>
							<h5 id="titulopayment">Ingresa la información para tu pedido</h5>
							<div class="alert hidden" id="MessageSent" style="border: 1px solid #e8e6e6; border-radius: 20px;">
								<h4 id="msg_titulo" style="font-size:30px;">¡Aún no hemos terminado!</h4> 
								<p id="msg_metodo">Pagar con WebPay:</p>
								<h5 id="msg_servicio"></h5>
								<div id="botonwebpay"></div>
							</div>
							<div class="alert alert-danger hidden" id="MessageNotSent">
								Oops! Algo anda mal, verifica que no eres un robot o actualiza la página e intenta nuevamente.
							</div>
							<div id="payment-form" class="contact-form">
								<form id="contact-form-with-recaptcha-payment" class="margin-clear" role="form">
									<div class="form-group has-feedback col-xs-12 col-sm-6 col-md-6 col-lg-6">
										<label for="name">Nombre*</label>
										<input type="text" class="form-control" id="name" name="name" placeholder="" required>
										<i style="margin-right:10px;" class="fa fa-user form-control-feedback"></i>
									</div>
									<div class="form-group has-feedback col-xs-12 col-sm-6 col-md-6 col-lg-6">
										<label for="apellido">Apellido*</label>
										<input type="text" class="form-control" id="apellido" name="apellido" placeholder="" required>
										<i style="margin-right:10px;" class="fa fa-user form-control-feedback"></i>
									</div>
									<div class="form-group has-feedback col-xs-12 col-sm-6 col-md-6 col-lg-6">
										<label for="email">Email*</label>
										<input type="email" class="form-control" id="email" name="email" placeholder="" required>
										<i style="margin-right:10px;" class="fa fa-envelope form-control-feedback"></i>
									</div>
									<div class="form-group has-feedback col-xs-12 col-sm-6 col-md-6 col-lg-6">
										<label for="telefono">Teléfono*</label>
										<input type="text" class="form-control" id="telefono" name="telefono" placeholder="" required>
										<i style="margin-right:10px;" class="fa fa-phone form-control-feedback"></i>
									</div>
									<div class="form-group has-feedback col-xs-12 col-sm-6 col-md-6 col-lg-6">
										<label for="empresa">Empresa</label>
										<input type="text" class="form-control" id="empresa" name="empresa" placeholder="">
										<i style="margin-right:10px;" class="fa fa-building form-control-feedback"></i>
									</div>
									<div class="form-group has-feedback col-xs-12 col-sm-6 col-md-6 col-lg-6">
										<label for="rubro">Rubro</label>
										<input type="text" class="form-control" id="rubro" name="rubro" placeholder="">
										<i style="margin-right:10px;" class="fa fa-building form-control-feedback"></i>
									</div>
									<div class="form-group has-feedback col-lg-12">
										<label for="servicio"><b>Servicio*</b></label>
										<select class="form-control" name="servicio" id="servicio" required>
											<option value="">Seleccionar...</option>
											<option <?php if($s === "emprende") { echo "selected"; } ?> value="865e2d60e45d46fa1d032bf8199b11d4">Plan Emprende - $55.000</option>
											<option <?php if($s === "sp1") { echo "selected"; } ?> value="bb2e12eb1a6ce3d8f57d4349a02af5bf">Plan Pyme Inicio - $380.800</option>
											<option <?php if($s === "sp2") { echo "selected"; } ?> value="8b7e5320d6c4616d420f532f9445b357">Plan Pyme Crece - $487.900</option>
											<option <?php if($s === "sp3") { echo "selected"; } ?> value="cb38180c58d60ab22671a9fe0c2e963a">Plan Pyme Evoluciona - $592.620</option>
											<option <?php if($s === "sp4") { echo "selected"; } ?> value="0137a6860866b2b6159ef9948b48ccd0">Plan Extra (Identidad Corporativa) - $235.620</option>
										</select>
									</div>
									<div class="form-group has-feedback col-lg-12">
										<label for="message">Comentario Adicional</label>
										<textarea class="form-control" rows="4" id="message" name="message" placeholder=""></textarea>
										<i style="margin-right:10px;" class="fa fa-pencil form-control-feedback"></i>
									</div>
									<p class="lead">Forma de Pago</p>
									<h5>Selecciona tu forma de pago</h5>
									<div class="form-group has-feedback col-lg-4">
										
									</div>
									<div class="form-group has-feedback col-lg-12">
										<div class="btn-group btn-group-toggle" data-toggle="buttons">
										    <label style="border:1px solid #CCC;" id="webpay" class="btn btn-light active">
										        <input id="input_webpay" type="radio" name="metodo_pago" autocomplete="off" value="webpay" checked>
										        <img style="height:62px; width:150px;" src="images/transbank.png">
										    </label>
										    <label style="height:78px; width:150px; border:1px solid #CCC; padding-top: 5px;" id="transferencia" class="btn btn-light">
										        <input id="input_transferencia" type="radio" name="metodo_pago" autocomplete="off" value="transferencia"> <h4>Transferencia <br> Bancaria</h4>
										    </label>
										</div>
										<h4><b>Método de pago:</b> <span style="color: #4CAF50;" id="metodo">WebPay</span></h4>
									</div>
									<div class="form-group has-feedback col-lg-12">
										<div class="g-recaptcha" data-sitekey="6Ldj_V8UAAAAABENag-z9S80mrG7zjr-UbE2P8oC"></div>
									</div>
									<input id="metodo_value" type="hidden" class="metodo" name="metodo" value="webpay">
									<div class="form-group has-feedback col-lg-12">
										<input type="submit" value="Realizar Pedido" class="submit-button btn btn-success">
									</div>
								</form>
							</div>
						</div>
						<!-- main end -->

						
						<!-- sidebar start -->
						<!-- ================ -->
						<aside class="col-md-3 col-lg-offset-1">
							<div class="sidebar">
								<div class="side vertical-divider-left">
									<div id="logo" class="logo">
										<a href="index.html"><img id="logo_img" src="images/logo.png" alt="Sodired"></a>
									</div>
									<div class="separator-2 mt-20"></div>
									<ul class="list">
										<li><i class="fa fa-home pr-10"></i>Andrés Sabella 160<br><span class="pl-20">Antofagasta, Chile</span></li>
										<li><i class="fa fa-mobile pr-10 pl-5"></i><abbr title="Phone">M:</abbr> (56) 9 6342 4158</li>
										<li><i class="fa fa-envelope pr-10"></i><a href="mailto:contacto@sodired.cl">contacto@sodired.cl</a></li>
									</ul>
									<ul class="social-links circle small margin-clear clearfix animated-effect-1">
										<li class="linkedin"><a target="_blank" href="https://www.linkedin.com/company/sodiredspa/"><i class="fa fa-linkedin"></i></a></li>
										<li class="youtube"><a target="_blank" href="https://www.youtube.com/channel/UCwGxy3Sc5wqxS1yFTOI2cYg"><i class="fa fa-youtube-play"></i></a></li>
										<li class="facebook"><a target="_blank" href="https://www.facebook.com/sodiredoficial/"><i class="fa fa-facebook"></i></a></li>
									</ul>
									<div class="separator-2 mt-20 "></div>
								</div>
							</div>
						</aside>
						<!-- sidebar end -->
						<!-- sidebar start -->
						<!-- ================ -->
						<aside class="col-md-3 col-lg-offset-1">
							<div class="sidebar">
								<div class="side vertical-divider-left">
									<div id="logo" class="logo">
										<a href="pymes.html"><img id="logo_img" src="images/aside1.jpg" alt="Plan Emprende"></a>
									</div>									
									<div class="separator-2 mt-20 "></div>
								</div>
							</div>
						</aside>
						<!-- sidebar end -->
					</div>
				</div>
			</section>
			<!-- main-container end -->

			<!-- section start -->
			<!-- ================ -->
				<div id="map-canvas"></div>
			<!-- section end -->

			<!-- section start -->
			<!-- ================ -->
			<section class="section default-bg clearfix">
				<div class="container">
					<div class="row">
						<div class="col-md-12">
							<div class="call-to-action text-center">
								<div class="row">
									<div class="col-sm-8">
										<h1 class="title">¡Conoce nuestros proyectos!</h1>
										<p>10 años de experiencia nos avalan, nuestros proyectos lo demuestran.</p>
									</div>
									<div class="col-sm-4">
										<br>
										<p><a href="portfolio.html" class="btn btn-lg btn-gray-transparent btn-animated">Portfolio<i class="fa fa-briefcase pl-20"></i></a></p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!-- section end -->

			<!-- footer start (Add "dark" class to #footer in order to enable dark footer) -->
			<!-- ================ -->
			<footer id="footer" class="clearfix ">

				<!-- .footer start -->
				<!-- ================ -->
				<div class="footer">
					<div class="container-fluid">
						<div class="footer-inner">
							<div class="row">
								<div class="col-sm-6 col-md-3 col-lg-2 col-lg-offset-1">
									<div class="footer-content">
										<h2 class="title">Encuéntranos</h2>
										<ul class="list-icons">
											<li><i class="fa fa-map-marker pr-10 text-default"></i> Avenida Andrés Sabella 160, Sector Parque Inglés</li>
											<li><i class="fa fa-phone pr-10 text-default"></i> +56 9 6342 4158</li>
											<li><a href="mailto:contacto@sodired.cl"><i class="fa fa-envelope-o pr-10"></i>contacto@sodired.cl</a></li>
										</ul>
									</div>
								</div>
								<div class="col-sm-6 col-md-3 col-lg-2 col-lg-offset-1">
									<div class="footer-content">
										<h2 class="title">Sociales</h2>
										<p>Síguenos y entérate de novedades y ofertas.</p>
										<ul class="social-links circle animated-effect-1">
											<li class="facebook"><a target="_blank" href="https://www.facebook.com/sodiredoficial/"><i class="fa fa-facebook"></i></a></li>
											<li class="linkedin"><a target="_blank" href="https://www.linkedin.com/company/sodiredspa/"><i class="fa fa-linkedin"></i></a></li>
											<li class="youtube"><a target="_blank" href="https://www.youtube.com/watch?v=Sp6n1zd61RI"><i class="fa fa-youtube"></i></a></li>
										</ul>
									</div>
								</div>
								<div class="clearfix visible-sm"></div>
								<div class="col-md-6 col-lg-4 col-lg-offset-1">
									<div class="footer-content">
										<h2 class="title">Contáctanos</h2>
										<div class="alert alert-success hidden" id="MessageSent2">
											Hemos recibido tu mensaje, nos pondremos en contacto.
										</div>
										<div class="alert alert-danger hidden" id="MessageNotSent2">
											Oops! Algo ha ido mal, porfavor actualiza la web y vuelve a intentarlo.
										</div>
										<form role="form" id="footer-form" class="margin-clear">
											<div class="row">
												<div class="col-sm-6">
													<div class="form-group has-feedback mb-10">
														<label class="sr-only" for="name2">Nombre</label>
														<input type="text" class="form-control" id="name2" placeholder="Nombre" name="name2">
														<i class="fa fa-user form-control-feedback"></i>
													</div>
												</div>
												<div class="col-sm-6">
													<div class="form-group has-feedback mb-10">
														<label class="sr-only" for="email2">Email</label>
														<input type="email" class="form-control" id="email2" placeholder="Ingresar email" name="email2">
														<i class="fa fa-envelope form-control-feedback"></i>
													</div>
												</div>
											</div>
											<div class="form-group has-feedback mb-10">
												<label class="sr-only" for="message2">Mensaje</label>
												<textarea class="form-control" rows="4" id="message2" placeholder="Mensaje" name="message2"></textarea>
												<i class="fa fa-pencil form-control-feedback"></i>
											</div>								
											<input type="submit" value="Enviar" class="margin-clear submit-button radius-50 btn btn-default">
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- .footer end -->

				<!-- .subfooter start -->
				<!-- ================ -->
				<div class="subfooter default-bg">
					<div class="container">
						<div class="subfooter-inner">
							<div class="row">
								<div class="col-md-12">
									<p class="text-center">
										Copyright © 2018 Sodired E.I.R.L. All Rights Reserved <br>
										<small>Revisa nuestras <a style="text-decoration: underline;" href="politicas-de-privacidad.html">Políticas de Privacidad</a></small>
									</p>

								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- .subfooter end -->

			</footer>
			<!-- footer end -->
			
		</div>
		<!-- page-wrapper end -->

		<!-- JavaScript files placed at the end of the document so the pages load faster -->
		<!-- ================================================== -->
		<!-- Jquery and Bootstap core js files -->
		<script type="text/javascript" src="plugins/jquery.min.js"></script>
		<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
		<!-- Modernizr javascript -->
		<script type="text/javascript" src="plugins/modernizr.js"></script>
		<!-- Magnific Popup javascript -->
		<script type="text/javascript" src="plugins/magnific-popup/jquery.magnific-popup.min.js"></script>
		<!-- Appear javascript -->
		<script type="text/javascript" src="plugins/waypoints/jquery.waypoints.min.js"></script>
		<!-- Count To javascript -->
		<script type="text/javascript" src="plugins/jquery.countTo.js"></script>
		<!-- Parallax javascript -->
		<script src="plugins/jquery.parallax-1.1.3.js"></script>
		<!-- Contact form -->
		<script src="plugins/jquery.validate.js"></script>
		<!-- Google Maps javascript -->
		<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;key=AIzaSyBmDt8KNdpJwPRaRa2i7fomCE2krCnD4Uc"></script>
		<script type="text/javascript" src="js/google.map.config.js"></script>
		<!-- Owl carousel javascript -->
		<script type="text/javascript" src="plugins/owlcarousel2/owl.carousel.min.js"></script>
		<!-- SmoothScroll javascript -->
		<script type="text/javascript" src="plugins/jquery.browser.js"></script>
		<script type="text/javascript" src="plugins/SmoothScroll.js"></script>
		<!-- Initialization of Plugins -->
		<script type="text/javascript" src="js/template.js"></script>
		<!-- Custom Scripts -->
		<script type="text/javascript" src="js/custom.js"></script>

		<script>
			$(document).ready(function(){
			    $("#webpay").click(function(){
			        $("#metodo").html("WebPay");
			        $("#metodo_value").attr("value","webpay");
			    });

			    $("#transferencia").click(function(){
			        $("#metodo").html("Transferencia");
			        $("#metodo_value").attr("value","transferencia");
			    });
			});
		</script>
	</body>
</html>
