{% extends 'base.html' %}

{% block content %}
	<div class="container-fluid" id="app">
		{% csrf_token %}
		<div class="header">
			<h1 class="header-title">Departamentos</h1>
			<nav class="" aria-label="breadcrumb">
				<ol class="breadcrumb">
					<!-- <li class="breadcrumb-item">
						<a href="/dashboard">Dashboard</a>
					</li>
					<li class="breadcrumb-item">
						<a href="/dashboard">Pages</a>
					</li>
					<li class="active breadcrumb-item" aria-current="page">
						Departamentos
					</li> -->
				</ol>
			</nav>
		</div>
		<div class="row">
			<div class="col-lg-12"> 
				<div class="card">
					<div class="card-header">
						<div class="card-actions float-right">
							<span class="cursor-pointer mr-1">
								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
									<polyline points="23 4 23 10 17 10"></polyline>
									<polyline points="1 20 1 14 7 14"></polyline>
									<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
								</svg>
							</span>
							<div class="d-inline-block dropdown" data-toggle="modal" data-target="#agregarDepto" style="cursor: pointer;">
								<i class="fas fa-plus"></i>
							</div>
						</div>
						<h5 class="mb-0 card-title">Departamentos</h5>
					</div>

					<!-- Modal Actualizar Departamentos -->
				    <div class="modal fade" id="actualizarDepto" tabindex="-1">
				        <div class="modal-dialog" role="document">
				            <div class="modal-content" style="border: #d5d5d5 2px solid;">
				                <div class="modal-header" style="background-color: white; border-top-left-radius: 10px; border-top-right-radius: 10px; ">
				                    <h5 class="modal-title text-center" id="exampleModalLabel" style="color: black;">Actualizar Departamento</h5>
				                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
				                      <span aria-hidden="true" style="color: black;">&times;</span>
				                    </button>
				                </div>
			                    <div class="modal-body">
			                    	<input type="hidden" id="deptoActualizarId" name="" :value="deptoActualizar.id">
			                        <div class="form-group">
			                            <label for="aplicativoURL">Aplicativo URL</label>
			                            <input type="text" id="deptoActualizarAplicativoURL" required="" class="form-control" placeholder="" name="aplicativoURL" :value="deptoActualizar.aplicativoURL">
			                        </div>
			                        <div class="form-group">
			                            <label for="bd">BD</label>
			                            <input type="text" id="deptoActualizarBD" class="form-control" required="" name="bd" :value="deptoActualizar.bd">
			                        </div>
			                        <div class="form-group">
			                            <label for="campoBuscar">Campo Buscar</label>
			                            <input type="text" id="deptoActualizarCampo" required="" class="form-control" name="campo" :value="deptoActualizar.campo">
			                        </div>
			                        <div class="form-group">
			                            <label for="celular">Nombre Aplicativo</label>
			                            <input type="text" id="deptoActualizarNombre" required="" class="form-control" name="departamento" :value="deptoActualizar.nombre_aplicativo">
			                        </div>
			                        <div class="form-group">
			                            <label for="celular">Icono</label>
			                            <input type="text" id="deptoActualizarIcono" required="" class="form-control" name="icono" :value="deptoActualizar.icono">
			                        </div>
			                        <div class="form-group">
			                            <label for="celular">Tabla</label>
			                            <input type="text" id="deptoActualizarTabla" required="" class="form-control" id="tabla" placeholder="" name="tabla" :value="deptoActualizar.tabla">
			                        </div>
			                    </div>
			                    <div class="modal-footer">
									<button type="submit" class="btn btn-info" @click="actualizarDeptos">Guardar</button>
			                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
			                    </div>
				            </div>
				        </div>
				    </div>

				    <!-- Modal Agregar Departamentos-->
				    <div class="modal fade" id="agregarDepto" tabindex="-1">
				        <div class="modal-dialog" role="document">
				            <div class="modal-content" style="border: #909497 2px solid;">
				                <div class="modal-header" style="background-color: white; border-top-left-radius: 10px; border-top-right-radius: 10px; ">
				                    <h5 class="modal-title text-center" id="exampleModalLabel" style="color: black;">Agregar Departamento</h5>
				                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
				                      <span aria-hidden="true" style="color: black;">&times;</span>
				                    </button>
				                </div>
			                    <div class="modal-body">
			                    	<input type="hidden" id="deptoActualizarId" name="" :value="deptoActualizar.id">
			                        <div class="form-group">
			                            <label for="aplicativoURL">Aplicativo URL</label>
			                            <input type="text" id="deptoActualizarAplicativoURLAgre" required="" class="form-control" placeholder="" name="aplicativoURL">
			                        </div>
			                        <div class="form-group">
			                            <label for="bd">BD</label>
			                            <input type="text" id="deptoActualizarBDAgre" class="form-control" required="" name="bd">
			                        </div>
			                        <div class="form-group">
			                            <label for="campoBuscar">Campo Buscar</label>
			                            <input type="text" id="deptoActualizarCampoAgre" required="" class="form-control" name="campo">
			                        </div>
			                        <div class="form-group">
			                            <label for="celular">Nombre Aplicativo</label>
			                            <input type="text" id="deptoActualizarNombreAgre" required="" class="form-control" name="nombre_aplicativo" :value="deptoActualizar.nombre_aplicativo">
			                        </div>
			                        <div class="form-group">
			                            <label for="celular">Icono</label>
			                            <input type="text" id="deptoActualizarIconoAgre" required="" class="form-control" name="icono" :value="deptoActualizar.icono">
			                        </div>
			                        <div class="form-group">
			                            <label for="celular">Tabla</label>
			                            <input type="text" id="deptoActualizarTablaAgre" required="" class="form-control" placeholder="" name="tabla">
			                        </div>
			                    </div>
			                    <div class="modal-footer">
									<button type="submit" class="btn btn-info" @click="agregarDeptos">Guardar</button>
			                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
			                    </div>
				            </div>
				        </div>
				    </div>

					<div class="card-body">
						<div style="overflow-x: auto;">
							<table class="mb-0 table">
								<thead>
									<tr>
										<th>Acciones</th>
										<th style="text-align: center;">Aplicativo URL</th>
										<th>BD</th>
										<th>Campo Buscar</th>
										<th>Nombre Aplicativo</th>
										<th>Icono</th>
										<th>Tabla</th>
										<th>Estado</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="depto in departamentos">
										<td>
											<button  style="width: 50%;" class="btn-sm btn btn-primary btn-sm"data-toggle="modal" data-target="#actualizarDepto" @click="deptoActualizar=depto"><i class="fas fa-edit"></i>
											</button>

											<template v-if="depto.estado == 1">
												<button style="width: 50%;"  @click="cambiarEstado(depto.estado, depto.id)" class="btn-sm btn btn-danger"><i class="fas fa-times"></i></button>
											</template>
											<template v-else="">
												<button style="width: 50%;" @click="cambiarEstado(depto.estado, depto.id)" class="btn-sm btn btn-success"><i class="fas fa-check"></i></button>
											</template>
										</td>
										<td>${depto.aplicativoURL}</td>
										<td>${depto.bd}</td>
										<td>${depto.campo}</td>
										<td>${depto.nombre_aplicativo}</td>
										<td>${depto.icono}</td>
										<td>${depto.tabla}</td>
										<template v-if="depto.estado == 1">
											<td>
												<span class="badge badge-success">Activo</span>
											</td>
										</template>
										<template v-else="">
											<td>
												<span class="badge badge-danger">Inactivo</span>
											</td>
										</template>
									</tr>
								</tbody>
							</table>
							<div style="float: right;">
								<a>
									<i class="fas fa-arrow-left" @click="listarDepartamentos(1)" style="font-size: 17px"></i>
								</a>
								<a>
									<i class="fas fa-arrow-right" @click="listarDepartamentos(1)" style="font-size: 17px"></i>
								</a>
							</div>
							<br>
							<br>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block scripts %}
	<script type="text/javascript">
		Vue.http.headers.common['X-CSRFToken'] = "{{ csrf_token }}";
		const headers = {"X-CSRFTOKEN":  Vue.http.headers.common['X-CSRFToken']}

	    new Vue({
	      	el: '#app',
	      	delimiters: ['${','}'],
	      	data: {
	      		departamentos: [],
	      		deptoActualizar: {},
	      		page: 0
	      	},
	      	methods: {
	      		cambiarEstado(estado, idDepto)
	      		{
	      			var url = '/departamentos/cambiarEstado';
	      			var text = '';
	      			var accion = '';

	      			if(estado == 1)
	      			{
	      				text = 'Desea Inactivar este Depto?';
	      				accion = 'Depto Inactivado Correctamente';
	      			}
	      			else
	      			{
	      				text = 'Desea Activar este Depto?';
	      				accion = 'Depto Activado Correctamente';
	      			}

	      			Swal.fire({
					  title: text,
					  text: "",
					  icon: 'warning',
					  showCancelButton: true,
					  confirmButtonColor: '#3085d6',
					  cancelButtonColor: '#d33',
					  cancelButtonText: 'No',
					  confirmButtonText: 'Si'
					}).then((result) => {
					  if (result.isConfirmed) {

				  		if(estado == 1){
							estado = 0
				  		}
						else
						{
							estado = 1
						}

					  	axios.post(url, 
	                	{
	                		'estado': estado,
					  		'idDepto': idDepto
	                	},
	                	{headers: headers})
	                	.then(response => 
	                	{
						    Swal.fire(
						      '',
						      accion,
						      'success'
						    )
							this.listarDepartamentos(0);
	                	})

					  }
					})
	      		},
	      		agregarDeptos()
	      		{
	      			var accion = 'Depto Agregado Correctamente';
	      			var url = '/departamentos/agregar';

	      			axios.post(url,
	      			{
	      				'id': $('#deptoActualizarIdAgre').val(),
	      				'aplicativoURL': $('#deptoActualizarAplicativoURLAgre').val(),
					  	'bd': $('#deptoActualizarBDAgre').val(),
					  	'campo':$('#deptoActualizarCampoAgre').val(),
					  	'nombre_aplicativo': $('#deptoActualizarNombreAgre').val(),
					  	'icono': $('#deptoActualizarIconoAgre').val(),
					  	'tabla': $('#deptoActualizarTablaAgre').val(),
	      			},
	      			{headers: headers})
	      			.then(response =>
	      			{
	      				$('#agregarDepto').modal('hide');

	      				if(response.data == 'ok')
	      				{
		      				Swal.fire(
		      					'',
		      					accion,
		      					'success'
		      				)
							this.listarDepartamentos(0);
	      				}
	      			})
	      		},
	      		actualizarDeptos()
	      		{
	      			var accion = 'Depto Actualizado Correctamente';
	      			var url = '/departamentos/actualizar';

	      			axios.post(url,
	      			{
	      				'id': $('#deptoActualizarId').val(),
	      				'aplicativoURL': $('#deptoActualizarAplicativoURL').val(),
					  	'bd': $('#deptoActualizarBD').val(),
					  	'campo':$('#deptoActualizarCampo').val(),
					  	'nombre_aplicativo': $('#deptoActualizarNombre').val(),
					  	'icono': $('#deptoActualizarIcono').val(),
					  	'tabla': $('#deptoActualizarTabla').val(),
	      			},
	      			{headers: headers})
	      			.then(response =>
	      			{
	      				$('#actualizarDepto').modal('hide');

	      				if(response.data == 'ok')
	      				{
		      				Swal.fire(
		      					'',
		      					accion,
		      					'success'
		      				)
							  this.listarDepartamentos(0);
	      				}
	      			})
	      		},
		      	listarDepartamentos(page_new)
		      	{
		      		var page_actual = this.page + page_new
		      		page_fin = page_actual + 1
		      		page_fin = page_fin + '0'

		      		page_ini = page_fin - 10;

	                $('#loading_div').addClass('d-flex');
	                $('#loading_div').css('display', 'block');
	                //Consultar Usuarios
	                var url= '/departamentos/consultar';

	                axios.post(url, 
	                	{
	                		'page_ini': page_ini,
							'page_fin': page_fin,
	                	},
	                	{headers: headers}
	                ).then(response => {
	                    this.departamentos = response.data;
	                	$('#loading_div').removeClass('d-flex');
	                	$('#loading_div').css('display', 'none');
	                })
	                .catch(error => {
	                    console.log(error);
	                });

		      	}
	      	},
		    mounted() { // Se llama el Metodo de listar para que se renderice cada vez que se cargue el componente
	            this.listarDepartamentos(0);
	        }
	    });
	</script>
{% endblock %}