@extends('layouts.app')
@section('title', 'Buscar Inmueble')
@section('content')
@guest
@else
<div class="row">  
	<div class="col md-12"> 
   		<form class="needs-validation" method="GET" action="{{route('Factura.muestra')}}" role="form" novalidate="">
        @csrf
			<div class="card text-white bg-secondary mt-5">
				<div class="card-header">Busca el periodo</div>
			  		<div class="card-body">
			    	    <p class="card-text">
			    		   <div class="form-row">
         						 <div class="form-group col-md-7">
            						<label for="cboMes">Mes</label>
						              <select id="cboMes" name="cboMes" class="form-control" required>
						                  <option selected disabled value=" ">Selecciona el mes...</option>
						                  <option value="1">Enero</option>
						                  <option value="2">Febrero</option>
						                  <option value="3">Marzo</option>
						                  <option value="4">Abril</option>
						                  <option value="5">Mayo</option>
						                  <option value="6">Junio</option>
						                  <option value="7">Julio</option>
						                  <option value="8">Agosto</option>
						                  <option value="9">Septiembre</option>
						                  <option value="10">Octubre</option>
						                  <option value="11">Noviembre</option>
						                  <option value="12">Diciembre</option>
						              </select>
						          </div>
						        <div class="form-group col-md-4">  
						            <label for="cboAnio">Año</label>
						            <select id="cboAnio" name="cboAnio" class="form-control" required="">
						                <option value="2020" >2020</option>
						                <option value="2021">2021</option>
										<option value="2022">2022</option>
										<option value="2023" selected="">2023</option>
						            </select>
						        </div>
						    </div>    
						    <div class="center-block">
						        <button type="submit" class="btn btn-primary center-block">Buscar</button>
						    </div>
						</p>					
					</div>
				</div>
			</form>		
		</div>
	</div>	
  @isset($PAGADAS,$NOPAGADAS)
  <div class="row mt-4">
  	<div class="col-sm mt-4"></div>
		<div class="col-sm-8">
      		<div class="table-responsive">
      			<table class="table">
	               <thead class="thead-dark">
				    <tr>
				      <th scope="col">Estado</th>
				      <th scope="col">Usuarios</th>
				      <th scope="col">Importe</th>
				      <th scope="col">Estadística</th>
				    </tr>
			  		</thead>
			  	<tbody>
               		<tr>
		               	<td>Pagadas</td>
		               	<td>
		               		@foreach ($PAGADAS as $nopa)
			            	 	{{ number_format($nopa->USUARIOSNP,2) }}
		               	</td>
		           		<td>
		            		${{ number_format($nopa->IMPORTE,2)}} 
		            	@endforeach
		               	</td>
		               	<td>
		               		<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Modal2">Ver</button>

		               	</td>
            		</tr> 
            		<tr>
	            		<td>No Pagadas</td> 
	            	@foreach($NOPAGADAS as $usuario)
	                    <td>{{ number_format(@$usuario->USUARIOSP ,2)}}</td>
	                    <td>${{ number_format($usuario->IMPORTE,2) }} </td> 
	                    <td>
		               		<button type="button" class="btn btn-primary"  data-toggle="modal"  data-target="#Modal">Ver</button>

		               	</td>
	           		@endforeach 
           			</tr>  
           		</tbody> 
            </table> 
          @endisset  
         </div>
        </div>
        <div class="col md-1 mt-4"></div>  
    </div>

</div>			
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" arial-labelledby="Modal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="Muestra"></h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				 <span aria-hidden="true">&times;</span>	
				</button>
			</div>
			<div class="modal-body">
				@isset($ESTADISTICA)
			<table class="table">
	               <thead class="thead-dark">
				    <tr>
				      <th scope="col">Estado</th>
				      <th scope="col">Usuarios</th>
				      <th scope="col">Importe</th>
				  
				    </tr>
			  		</thead>
			  	<tbody>
			  		@foreach ($ESTADISTICA AS $NOPAGADAS)
               		<tr>

		               	<td>{{$NOPAGADAS->SERVICIO_D}}</td>
		               	<td>
		               		
			            	 	{{ number_format($NOPAGADAS->USUARIOSP,2) }}
		               	</td>
		           		<td>
		            		${{ number_format($NOPAGADAS->IMPORTE)}} 
		            	
		               	</td>
	           		</tr> 
            	@endforeach
           		</tbody> 
            </table> 
			@endisset
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal" >close</button>
			</div>
		</div>		
	</div>
</div>	
<div class="modal fade" id="Modal2" tabindex="-1" role="dialog" arial-labelledby="Modal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="Muestra"></h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				 <span aria-hidden="true">&times;</span>	
				</button>
			</div>
			<div class="modal-body">
				@isset($ESTADISTICA2)
			<table class="table">
	               <thead class="thead-dark">
				    <tr>
				      <th scope="col">Estado</th>
				      <th scope="col">Usuarios</th>
				      <th scope="col">Importe</th>
				  
				    </tr>
			  		</thead>
			  	<tbody>
			  		@foreach ($ESTADISTICA2 AS $NOPAGADAS)
               		<tr>

		               	<td>{{$NOPAGADAS->SERVICIO_D}}</td>
		               	<td>
		               		
			            	 	{{ number_format($NOPAGADAS->USUARIOSP,2) }}
		               	</td>
		           		<td>
		            		${{ number_format($NOPAGADAS->IMPORTE)}} 
		            	
		               	</td>
	           		</tr> 
            	@endforeach
           		</tbody> 
            </table> 
			@endisset
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">close</button>
			</div>
		</div>		
	</div>
</div>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>
@endguest		
@endsection