<!doctype html>
<html lang="en">

<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="public/css/bootstrap.min.css">
	<link rel="stylesheet" href="public/css/style.css">
	<link rel="stylesheet" href="public/css/style_foter.css">
	<link rel="shortcut icon" href="public/dist_admin/img/apple-touch-icon.png">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.7.2/font/bootstrap-icons.min.css">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
	<title>Mesa de parte virtual</title>
</head>

<body class="bg-light">
	<header class="container-fluid bg-verdedark">
		<nav class="container navbar navbar-light p-1" style="flex-direction:column">
			<a class="navbar-brand p-0" href="#">
				<img src="public/galeria/logo_empresa.png" width="600" alt="" loading="lazy" style="padding-bottom: 10px;">
			</a>
			<div class="text-white">
				<!-- <p class="m-0 text-center text-uppercase">{{empresa.nombre}}</p> -->
				<!--<h4 class="text-center" style="font-size: 2em;">MESA DE PARTES VIRTUAL</h4>-->
			</div>
			<div class="align-self-center"></div>
		</nav>
	</header>

	<div class="container ">
		<div class="row">
			<div class=" col-md-8 col-6 border container_titu text-center border border-bottom-0 top-rounded-custom py-3 mt-2 mb-0">
				<h4 class="text-device-index">MESA DE PARTES VIRTUAL</h4>
			</div>
			<div class="seguimiento-btn col-md-4 col-6 border mt-2 top-rounded-custom bg-custom-green mb-0">
				<a  class="text-decoration-none" href="buscador.php" type="button" style="color: #3e0b20"><h4  class="seguimiento-btn mb-0 text-device-index">SEGUIMIENTO DE TRAMITE <i class="bi bi-arrow-right-circle-fill ml-2" style="font-size: 30px;"></i></h4></a>
			</div>
		</div>
	</div>

	<div class="container cont_border border rounded-bottom bg-white">
		<p class="mt-4">
			Estimados usuarios, para mayor facilidad, se ha puesto a su disposici&oacute;n este formulario, que le
			permitirá el env&iacute;o de sus documentos a la Municipalidad. <br>El horario de
			recepci&oacute;n de documentos es de 08:00am - 01:00pm y 03:00pm - 6:00pm, de Lunes a Viernes.
		</p>

		<div class="row justify-content-center">
			<div class="col-12 col-md-10 col-lg-8">
				<form class="mt-3 formulario-solicitante" id="solicitante-form" action="envio_de_documento.php" 
					method="post" enctype="multipart/form-data">
					<h4 class="titulo_datos border p-2">Datos del solicitante</h4>
					<div class="container cont_border mt-4">
						<div class="form-row">
							<div class="form-group col-12 col-sm-6 col-md-6 col-lg-4">
								<label for="tipo_personas">Tipo de persona</label>
								<select name="tipo_personas" id="tipo_personas" class="form-control">
									{% for tipo_persona in tipo_personas %}
									<option value="{{tipo_persona.id}}">{{tipo_persona.nombre}}</option>
									{% endfor %}
								</select>
							</div>
							<div class="form-group col-12 col-sm-6 col-md-6 col-lg-4" id="control-documento">
								<label for="documento">N° DNI</label>
								<div class="input-group mb-3">
									<input type="text" class="form-control" name="documento" id="documentodni" maxlength="8" required>
									<div class="input-group-append">
										<button class="btn btn-verdedark" type="button"
											id="btn-consultareniecdni">Buscar</button>
									</div>
								</div>
							</div>
							<div class="form-group col-12 col-lg-4" id="control-documentoruc">
								<label for="documento">N° RUC</label>
								<div class="input-group mb-3">
									<input type="text" class="form-control" id="documentoruc" name="documentoruc" maxlength="11">
									<div class="input-group-append">
										<button class="btn btn-verdedark" type="button"
											id="btn-consultareniecruc">Buscar</button>
									</div>
								</div>
							</div>
						</div>
						<div class="form-group" id="control-razonsocial">
							<label for="razon_social">Razon Social</label>
							<input class="form-control" type="text" name="razon_social" id="razon_social">
						</div>
						<div class="form-row">
							<div class="form-group col-6 col-sm-4">
								<label for="apellido_paterno">Apellido Paterno</label>
								<input class="form-control" type="text" name="apellido_paterno" id="apellido_paterno"
									required>
							</div>
							<div class="form-group col-6 col-sm-4">
								<label for="apellido_materno">Apellido Materno</label>
								<input class="form-control" type="text" name="apellido_materno" id="apellido_materno"
									required>
							</div>
							<div class="form-group col-12 col-sm-4">
								<label for="nombre">Nombres</label>
								<input class="form-control" type="text" name="nombre" id="nombre" required>
							</div>
						</div>
						<div class="form-row">
							<div class="form-group col-12 col-sm-4">
								<label for="telefono">Celular</label>
								<input class="form-control" type="text" name="telefono" id="telefono" maxlength="9" required>
							</div>
							<div class="form-group col-12 col-sm-8">
								<label for="correo">Correo</label>
								<input class="form-control" type="email" name="correo" id="correo" required>
							</div>
						</div>
						<div class="form-group">
							<label for="direccion">Dirección</label>
							<input class="form-control" type="text" name="direccion" id="direccion" required>
						</div>
						<div class="form-row">
							<div class="form-group col-12 col-sm-4">
								<label for="provincia">Provincia</label>
								<select name="provincia" id="provincia" class="form-control">
									<option value="all" selected>--seleccionar--</option>
									{% for provincia in provincias %}
									<option value="{{provincia.id}}">{{provincia.nombre}}</option>
									{% endfor %}
								</select>
							</div>
							<div class="form-group col-12 col-sm-4">
								<label for="distrito">Distrito</label>
								<select name="distrito" id="distrito" class="form-control">
									<option value="all" selected>--seleccionar--</option>
									{% for distrito in distritos %}
									<option class="distrito_option" padre="{{distrito.padre}}" value="{{distrito.id}}">
										{{distrito.nombre}}</option>
									{% endfor %}
								</select>
							</div>
							<div class="form-group col-12 col-sm-4">
								<label for="anexo">CCNN / CCPP</label>
								<select name="anexo" id="anexo" class="form-control">
									<option value="all" selected>--seleccionar--</option>
									{% for anexo in anexos %}
									<option class="anexo_option" padre="{{anexo.padre}}" value="{{anexo.id}}">
										{{anexo.nombre}}
									</option>
									{% endfor %}
								</select>
							</div>
						</div>

					</div>
					<h4 class="titulo_datos  border p-2 mt-5">Datos del Documento</h4>
					<div class="container cont_border mt-4">
						<div class="form-row">
							<div class="form-group col-6 col-sm-8">
								<label for="tipo_documento">Tipo documento</label>
								<select name="tipo_documento" id="tipo_documento" class="form-control">
									{% for documento in tipo_documentos %}
									<option value="{{documento.id}}">{{documento.nombre}}</option>
									{% endfor %}
								</select>
							</div>
							<div class="form-group col-6 col-sm-4">
								<label for="numero_folio">N° de folio</label>
								<input class="form-control" type="number" name="numero_folio" id="numero_folio"
									required>
							</div>
						</div>
						<div class="form-group">
							<label for="asunto">Asunto</label>
							<textarea class="form-control" name="asunto" id="asunto" cols="30" rows="3"
								required></textarea>
						</div>
						<div class="form-group">
							<label class="col-sm-2">Documentos</label>
							<input class="bg-verdelight" type="file" name="documentos[]" id="file_documentos" multiple
								required>
						</div>
						<p id="tamanoArchivo_documentos"></p>
						<div class="form-group">
							<label class="col-sm-2">Anexos</label>
							<input class="bg-verdelight" type="file" name="anexos[]" id="file_anexos" multiple>
						</div>
						<p id="tamanoArchivo_anexos"></p>
						<p class="text-danger" id="mensage-form"></p>
						<div class="d-flex justify-content-center">
							<button class="btn btn-primary" type="submit" id="btn-enviodocumentos">Enviar</button>

							<div class="spinner-border text-verdedark ml-3 d-none" id="enviodocumentos-estatus"
								role="status">
								<span class="sr-only">Enviar</span>
							</div>
						</div>

						<div class="row mt-4">
							<div class="col-2">
								<b>Nota</b>
							</div>
							<div class="col">
								<ul>
								    <li>
								    <a href="https://drive.google.com/file/d/1dnzLOs-6K5QYGGK5inKTYLEFzjZM5vGb/view?usp=sharing" target="_blank">Puede Descargar aqui un Modelo de solitud</a> </li>
									<li>Para el documento principal el formato debe ser pdf</li>
									<li>Para los anexos el formato puede ser pdf, word, jpg y png</li>
									<li>Tamaño máximo de los archivos debe ser menor o igual a 10MB</li>
								</ul>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>

	<footer class="footer spad set-bg" data-setbg="images/footer-bg.png">
		<div class="container">
			<div class="row">
				<div class="col-lg-3 col-md-6">
					<div class="footer__address text-center">
						<ul>
							<li>
								<i class="fa fa-phone"></i>
								<h4>Celular</h4>
								<h6><a href="https://wa.me/51950866847" target="_blank" style="color: rgb(245, 238, 234);;">950 866 847</a></h6>
							</li>
							<li>
								<i class="fa-solid fa-globe"></i>
								<h4>P&aacutegina Web</h4>
								<h6><a href="https://www.gob.pe/munimazamari" target="_blank" style="color: rgb(245, 238, 234);;">munimazamari.gob.pe</a>
								</h6>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-lg-4 offset-lg-1 col-md-6">
					<div class="footer__social text-center">
						<h2>Municipalidad Distrital de Mazamari</h2>
						<div class="footer__social__links ">
							<a href="https://www.facebook.com/MunicipalidadDistritalMazamariOficial"><i
									class="fa fa-facebook"></i></a>
							<a href="https://www.youtube.com/channel/UCtnVfVb-x1_wQNJCwt_Bgng"><i
									class="fa-brands fa-youtube"></i></a>
							<a href="https://www.instagram.com/muni_mazamari/"><i class="fa fa-instagram"></i></a>
							<a href="https://www.tiktok.com/@municipalidad_mazamari?_t=8dE19ukegKb&_r=1"><i
									class="fa-brands fa-tiktok"></i></a>
						</div>
					</div>
				</div>
				<div class="col-lg-3 offset-lg-1 col-md-6">
					<div class="footer__newslatter text-center">
						<h4>Hazme una consulta</h4>
						<form action="https://wa.me/51950866847">
							<input type="text" placeholder="Quiero hacer una consulta">
							<button type="submit"><i class="fa-brands fa-whatsapp"></i></i></button>
						</form>
					</div>
				</div>
			</div>
			<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
			<div class="footer__copyright__text">
				<p>Copyright &copy; <script>
						document.write(new Date().getFullYear());
					</script> Todos los derechos reservados | Municipalidad Distrital <i class="fa fa-heart"
						aria-hidden="true"></i> <a href="https://www.gob.pe/munimazamari" target="_blank">Mazamari</a>
				</p>
			</div>
			<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
		</div>
	</footer>
	<!-- Footer Section End -->


	<div class="modal fade" tabindex="-1" role="dialog" id="exampleModal">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="titulo-modalj">Modal title</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body" id="mensage-modalj">
					<p>Modal body text goes here.</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-verdedark" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>
	<!-- Optional JavaScript -->
	<!-- jQuery first, then Bootstrap JS -->
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="public/js/jquery-3.5.1.min.js"></script>
	<script src="public/js/bootstrap.min.js"></script>
	<script src="public/js/main.js"></script>
	<script>
		$.get("app/Controller/ActualizarContador.php")
			.done(function (request) {
				cantidad = JSON.parse(request);
				$('#numero-visitas').text(cantidad.cantidad);
			})
	</script>
	<script src="https://kit.fontawesome.com/84e760954d.js" crossorigin="anonymous"></script>
</body>

</html>