<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>Restaurant</title>

	<!-- Normalize V8.0.1 -->
	<link rel="stylesheet" href="./css/normalize.css">

	<!-- MDBootstrap V5 -->
	<link rel="stylesheet" href="./css/mdb.min.css">

	<!-- Font Awesome V5.15.1 -->
	<link rel="stylesheet" href="./css/all.css">

	<!-- Sweet Alert V10.13.0 -->
	<script src="./js/sweetalert2.js" ></script>

	<!-- General Styles -->
	<link rel="stylesheet" href="./css/style.css">

</head>
<body>

	<!-- Header -->
	<!-- Header -->
	<header class="header full-box">

	    <div class="header-brand text-center full-box">
	        <a href="index.html">
	            <img src="./assets/img/logo.png" alt="logo" class="img-fluid">

	        </a>

	    </div>

	    <div class="header-options full-box">
	        <nav class="header-navbar full-box poppins-regular font-weight-bold" >
	            <ul class="list-unstyled full-box">
	                <li>
	                    <a href="index.html" >Inicio<span class="full-box" ></span></a>
	                </li>
	                <li>
	                    <a href="menu.html" >Menú<span class="full-box" ></span></a>
	                </li>
	                <li>
	                    <a href="contactanos.html" >Contactanos<span class="full-box" ></span></a>
	                </li>
	                 <li>
	                    <a href="registro.php" >Registrate<span class="full-box" ></span></a>
	                </li>
	            </ul>

	        </nav>
	        
	    </div>
	</header>


	<!-- Content -->
	<div class="container container-web-page">
	    <h3 class="font-weight-bold poppins-regular text-uppercase">Formulario de registro</h3>
	    <p class="text-justify">Al crear una cuenta en nuestro sitio web usted acepta nuestros <a href="#">términos y condiciones</a>. La información introducida en el formulario debe de ser clara, precisa y legitima. Para crear una cuenta debe de llenar todos los campos que son obligatorios marcados con el icono <i class="fab fa-font-awesome-alt"></i></p>
	    <hr>
	    <div class="row">
	        <div class="col-12">
	            <form method="POST" class="div-bordered" action="" style="padding: 15px;">

	                <fieldset>
				        <legend><i class="far fa-address-card"></i> &nbsp; Información personal de facturación</legend>
	                    <div class="container-fluid">
	                        <div class="row">
	                            <div class="col-12 col-md-6">
	                                <div class="">
	                                    <select class="form-control" name="cliente_tipo_documento_reg" id="cliente_tipo_documento">
	                                        <option value="" selected="" >Tipo de documento</option>
	                                        <option value="DNI" >1 - DNI</option>
	                                        <option value="Cedula" >2 - Cedula</option>
	                                        <option value="DUI" >3 - DUI</option>
	                                        <option value="Licencia" >4 - Licencia</option>
	                                        <option value="Pasaporte" >5 - Pasaporte</option>
	                                        <option value="Otro" >6 - Otro</option>
	                                    </select>
	                                    <label for="cliente_tipo_documento" class="form-label"></label>
	                                </div>
	                            </div>

	                            <div class="col-12 col-md-6">
	                                <div class="form-outline mb-4">
	                                    <input type="text" pattern="[a-zA-Z0-9-]{7,30}" class="form-control" name="cliente_numero_documento_reg" id="cliente_numero_documento" maxlength="30">
	                                    <label for="cliente_numero_documento" class="form-label">Numero de documento <i class="fab fa-font-awesome-alt"></i></label>
	                                </div>
	                            </div>

	                            <div class="col-12 col-md-4">
	                                <div class="form-outline mb-4">
	                                    <input type="text" pattern="[a-zA-ZáéíóúÁÉÍÓÚñÑ ]{4,35}" class="form-control" name="cliente_nombre_reg" id="cliente_nombre" maxlength="35">
	                                    <label for="cliente_nombre" class="form-label">Nombres <i class="fab fa-font-awesome-alt"></i></label>
	                                </div>
	                            </div>

	                            <div class="col-12 col-md-4">
	                                <div class="form-outline mb-4">
	                                    <input type="text" pattern="[a-zA-ZáéíóúÁÉÍÓÚñÑ ]{4,35}" class="form-control" name="cliente_apellido_reg" id="cliente_apellido" maxlength="35">
	                                    <label for="cliente_apellido" class="form-label">Apellidos <i class="fab fa-font-awesome-alt"></i></label>
	                                </div>
	                            </div>

	                            <div class="col-12 col-md-4">
	                                <div class="form-outline mb-4">
	                                    <input type="text" class="form-control" 
	                                    name="cliente_telefono_reg" id="cliente_telefono" maxlength="20">
	                                    <label for="cliente_telefono" class="form-label">Teléfono <i class="fab fa-font-awesome-alt"></i></label>
	                                </div>
	                            </div>
	                        </div>
	                    </div>
	                </fieldset>

	                <br><br>

	                <fieldset>
	                    <legend><i class="fas fa-map-marked-alt"></i> &nbsp; Información de envió</legend>
	                    <div class="container-fluid">
	                        <div class="row">
	                            
	                            <div class="col-12 col-md-4">
	                                <div class="form-outline mb-4">
	                                    <input type="text" class="form-control" name="cliente_direccion_reg" id="cliente_direccion" maxlength="70">
	                                    <label for="cliente_direccion" class="form-label">Calle o dirección de casa <i class="fab fa-font-awesome-alt"></i></label>
	                                </div>
	                            </div>
	                        </div>
	                    </div>
	                </fieldset>

	                <br><br>

	                <fieldset>
	                    <legend><i class="fas fa-user-lock"></i> &nbsp; Información de inicio de sesión</legend>
	                    <div class="container-fluid">
	                        <div class="row">
	                            <div class="col-12 col-md-4">
	                                <div class="form-outline mb-4">
	                                    <input type="email" class="form-control" name="cliente_email_reg" id="cliente_email" maxlength="47">
	                                    <label for="cliente_email" class="form-label">Email <i class="fab fa-font-awesome-alt"></i></label>
	                                </div>
	                            </div>
	                            <div class="col-12 col-md-4">
	                                <div class="form-outline mb-4">
	                                    <input type="password" class="form-control" name="cliente_clave_1_reg" id="cliente_clave_1" pattern="[a-zA-Z0-9$@.-]{7,100}" maxlength="100" >
	                                    <label for="cliente_clave_1" class="form-label">Contraseña <i class="fab fa-font-awesome-alt"></i></label>
	                                </div>
	                            </div>
	                            <div class="col-12 col-md-4">
	                                <div class="form-outline mb-4">
	                                    <input type="password" class="form-control" name="cliente_clave_2_reg" id="cliente_clave_2" pattern="[a-zA-Z0-9$@.-]{7,100}" maxlength="100" >
	                                    <label for="cliente_clave_2" class="form-label">Repetir contraseña <i class="fab fa-font-awesome-alt"></i></label>
	                                </div>
	                            </div>
	                        </div>
	                    </div>
	                </fieldset>

	                <p class="text-center" style="margin-top: 40px;">
	                    <button type="submit" name="register" class="btn btn-info btn-sm"><i class="far fa-paper-plane"></i> &nbsp; CREAR CUENTA</button>
	                </p>
	                <p class="text-center">
	                    <small>Los campos marcados con <i class="fab fa-font-awesome-alt"></i> son obligatorios</small>
	                </p>
	            </form>
 

	        </div>
	    </div>
	</div>


	<!-- Footer -->
	<footer class="footer">
	    <div class="container">
	        <div class="row">
	            <div class="col-12 col-md-4">
	                <ul class="list-unstyled" >
	                   <li><h5 class="font-weight-bold" ><i class="far fa-copyright"></i> Fast food</h5></li>
	                    <li> Restaurante de comidas rápidas.</li>
	                    <br>
	                    <li> Escribenos:</li>
	                    <br>
	                    <div class="header-button full-box text-center " >
	                     
	                <!-- Inicio de sesion -->
                       <form class="full-boxC" action="">
	                	<div class="form-outline mb-4">
	                        <input type="name" class="form-control" name="nombre" id="nombre" maxlength="100" required="" placeholder="Nombre" >
	                    </div>
	                    <div class="form-outline mb-4">
	                        <input type="email" class="form-control" name="login_email_cliente" id="login_email" maxlength="70" required="" placeholder="Correo" >
	                    </div>
	                    <div class="form-outline mb-4">
	                    	<textarea type="text" class="form-control" name="mensaje" id="mensaje" pattern="[a-zA-Z0-9$@.-]{7,1000}" maxlength="1000" required="" placeholder="Mensaje" rows="3"></textarea>
	                    </div>
	                    <p class="botonenviar text-left">
	                        <button class="btn btn-danger  w-40">enviar</button>
	                    </p>
	                </form>
	               

	                	                
	            
	        </div>
	        



	                </ul>
	            </div>
	            <div class="col-12 col-md-4">
	                <ul class="list-unstyled" >
	                    <li><h5 class="font-weight-bold" >Google Maps</h5></li>
	                    <li>
	                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d63822.77522886455!2d-77.31224216159782!3d1.2135252233966274!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e2ed48761b92a73%3A0x44a368566cc3a522!2zUGFzdG8sIE5hcmnDsW8!5e0!3m2!1ses-419!2sco!4v1645740650760!5m2!1ses-419!2sco" width="300" height="225 style="border:0;" allowfullscreen="" loading="lazy"></iframe>
	                    </li>
	                </ul>
	            </div>
	            <div class="col-12 col-md-4">
	                <ul class="list-unstyled" >


	                	<li><h5 class="font-weight-bold" >Ubicados en:</h5> </li>
						<li><i class="fas fa-map-marker-alt fa-fw"></i> Pasto, Nariño, Colombia</li>
						<br>
						<li><h5 class="font-weight-bold" >Telefono:</h5> </li>
						<li><i class="fas fa-solid fa-phone"></i> 7265148</li>
						<br> 
						<li><h5 class="font-weight-bold" >Horario de atención:</h5> </li>
						<li><i class="fas fa-clock"></i> Lunes - viernes : 10 am - 8 pm </li>
						<li><i class="fas fa-clock"></i> sabados : 10 am - 6 pm </li>
						<br>
						<li><h5 class="font-weight-bold" >Correo:</h5> </li>
						<li><i class="fas fa-solid fa-envelope"></i> fastfood@gmail.com</li>
						<br>
	                    <li><h5 class="font-weight-bold" >Siguenos en:</h5> </li>
	                    <li>
	                        <a href="https://www.facebook.com/" class="footer-link" target="_blank" >
	                            <i class="fab fa-facebook fa-fw"></i> Facebook
	                        </a>
	                    </li>

	                    <li>
	                        <a href="https://www.youtube.com/" class="footer-link" target="_blank" >
	                            <i class="fab fa-youtube fa-fw"></i>
	                                Youtube
	                        </a>
	                    </li>
	                </ul>
	            </div>
	        </div>
	    </div>
	</footer>

	
	<!-- MDBootstrap V5 -->
	<script src="./js/mdb.min.js" ></script>

	<!-- General scripts -->
	<script src="./js/main.js" ></script>
	
	<?php 
        include("registrar.php");
        ?>
</body>
</html>