@extends('layouts.app')

@section('content')

<?php
include 'dbconnection.php';
$Email = Auth::user()->email;

$DB = mysqli_query($mysql,"SELECT dbname,Condominio FROM tb_users WHERE email ='$Email'");
while($row100 = mysqli_fetch_array($DB)){
$dbname = $row100 ['dbname'];

}


$hostname2 = "localhost";
$username2 = "tempdpe5_nicolas";
$password2= "(Made7575)";
$conn = mysqli_connect($hostname2,$username2,$password2,$dbname);
if (mysqli_connect_errno()){
  printf("Connect failed: %s\n", mysqli_connect_error());
  exit();
} 
mysqli_set_charset($conn ,"utf8");


$Group = Auth::user()->group_id;

$Username = Auth::user()->username;
$Condominio = $_GET['Condominio']; 



?>

<!--<div class="page-header"><h2>{{ $pageTitle }} <small> {{ $pageNote }} </small> </h2></div>-->
<div  class="p-3 table-responsive" style="background-color: #ffffff;">
<!--Inicio--->
<div class="x" style ="transform-origin:top;">
 <div class="row" style="margin-bottom: -60px;">
    <div class=" col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6" style="text-align: left; margin-top:5px;">
 	
 	<button style="border: none;background: none;border-color: transparent;" onclick="location.href='{{ url('reportegastosusuario') }}'"><img class="imagen" src="dashboardimage/salir.png" style="width:50%;"></button>
 	</div>
    
    <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6" style="text-align: right;margin-top: 5px;">
    <button style="border: none;background: none;border-color: transparent;outline-style: none;" onclick="generatePDF()"><img class="imagen" src="dashboardimage/sendreport.png" style="width:40%; float: right;"></button>
    </div> 
  </div>
<div id="reporte" class="p-3" >
    
  <div style="font-size:30px;color: #7a7a7a;font-weight:900;font-family: 'Rubik', sans-serif;text-align: center;text-shadow:0px 0px 2px #3b3b3b;margin-top:10px">RESIDENCIAL <?php echo $Condominio; ?></div>
    


<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12" style="text-align: center;">
<hr class="line_break1"> 
<div class="huge4">INFORMACIONES DE GASTOS PENDIENTES POR SUPLIDOR</div> 
<hr class="line_break2">
</div>  

<div class="container-fluid">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> 
<?php
mysqli_query($conn,"UPDATE gastos SET Mes = STR_TO_DATE(Fecha,'%Y-%m-%d')");

mysqli_query($conn,"UPDATE gastos SET Ano = STR_TO_DATE(Fecha,'%Y-%m-%d')");

mysqli_query($conn,"UPDATE gastos SET Mes = DATE_FORMAT(Mes, '%M')");

mysqli_query($conn,"UPDATE gastos SET Ano = DATE_FORMAT(Ano, '%Y')");


mysqli_query($conn,"UPDATE gastos SET Mes = 'Enero' WHERE Mes = 'January'");
mysqli_query($conn,"UPDATE gastos SET Mes = 'Febrero' WHERE Mes = 'February'");
mysqli_query($conn,"UPDATE gastos SET Mes = 'Marzo' WHERE Mes = 'March'");
mysqli_query($conn,"UPDATE gastos SET Mes = 'Abril' WHERE Mes = 'April'");
mysqli_query($conn,"UPDATE gastos SET Mes = 'Mayo' WHERE Mes = 'May'");
mysqli_query($conn,"UPDATE gastos SET Mes = 'Junio' WHERE Mes = 'June'");
mysqli_query($conn,"UPDATE gastos SET Mes = 'Julio' WHERE Mes = 'July'");
mysqli_query($conn,"UPDATE gastos SET Mes = 'Agosto' WHERE Mes = 'August'");
mysqli_query($conn,"UPDATE gastos SET Mes = 'Septiembre' WHERE Mes = 'September'");
mysqli_query($conn,"UPDATE gastos SET Mes = 'Octubre' WHERE Mes = 'October'");
mysqli_query($conn,"UPDATE gastos SET Mes = 'Noviembre' WHERE Mes = 'November'");
mysqli_query($conn,"UPDATE gastos SET Mes = 'Diciembre' WHERE Mes = 'December'");
mysqli_query($conn,"UPDATE gastos SET mesano = CONCAT(Mes,' -- ',Ano)");


$Tabla4 = mysqli_query($conn,"SELECT count(GastosID) AS num3 FROM gastos WHERE Status = 'No Pagado' AND Condominio = '$Condominio' ");
while($row34 = mysqli_fetch_array($Tabla4)){
$count5 = $row34 ['num3'];

}  

if($count5 == 0){ 
 echo"<img class='imagen4' src='dashboardimage/nodatos.png'>";    
}else{

$Tabla5 = mysqli_query($conn,"SELECT * FROM gastos WHERE Status = 'No Pagado' AND Condominio = '$Condominio' GROUP BY Suplidor ORDER BY Fecha");
$count6 = mysqli_num_rows ( $Tabla5 );
while($row35 = mysqli_fetch_array($Tabla5 )){
$Suplidor[] = $row35['Suplidor'];
}  


for($x=0;$x<$count6;$x++){

echo"<table class='table table-striped' style='table-layout:fixed;'>";
			    echo"<tr style='background: #bdbdbd; color: #121212 ;text-align: center;vertical-align: middle'>";
			    echo"<th class='align-middle ' style='vertical-align: middle;font-size:16px;font-weight:900;font-family: 'Rubik', sans-serif;' colspan='5'>$Suplidor[$x]</th>";
			    echo"</tr>";
				echo"<tr style='background: #436e8f; color: #fff;text-align: center;border: 1px solid #436e8f;vertical-align: middle'>";
					echo"<th class='align-middle' style='vertical-align: middle;'    width='20'>FECHA</th>";
					echo"<th class='align-middle'  style='vertical-align: middle;'     width='25'>CONCEPTO</th>";
					echo"<th class='align-middle'  style='vertical-align: middle;'     width='30'>DESCRIPCIÓN</th>";
					echo"<th class='align-middle'  style='vertical-align: middle;'     width='25'>TOTAL</th>";
					echo"<th class='align-middle'  style='vertical-align: middle;'     width='20'>ESTATUS</th>";
					
				echo"</tr>";

$Tabla4x = mysqli_query($conn,"SELECT * FROM gastos WHERE Status ='No Pagado' AND Condominio = '$Condominio' AND Suplidor='$Suplidor[$x]'");
$count7 = mysqli_num_rows ( $Tabla4x );

$Fecha = array();
$Descripcion = array();
$Concepto = array();
$Totalgastos = array();
$Estatusgastos = array();

while($row36 = mysqli_fetch_array($Tabla4x)){
$Fecha[] = $row36 ['Fecha'];
$Descripcion[] = $row36 ['Descripcion'];
$Concepto[] = $row36 ['Concepto'];
$Totalgastos[] = number_format($row36 ['Totalreporte'],2);
$Estatusgastos[] = $row36 ['Status'];

}
 
   
for($i=0;$i<$count7;$i++){
    
echo"<tr style='text-align:center;word-wrap:break-word;center;font-size:18px;'>"; 
echo"<td style='font-size:11px;'>$Fecha[$i]</td>";
echo"<td style='font-size:11px;'>$Concepto[$i]</td>";
echo"<td style='font-size:11px;'>$Descripcion[$i]</td>";
echo"<td style='font-size:11px;'>$ $Totalgastos[$i]</td>";
echo"<td style='font-size:11px;'>$Estatusgastos[$i]</td>";

echo"</tr>";

}

echo"</table>"; 


}








}

?> 
</div>   
</div>
</div>
</div>
<!--Final--->
</div>


<div>
<!-- Modal -->
  <div class="modal fade p-5 " id="myModal" role="dialog" style="margin-top:-60px;">
    <div class="modal-dialog modal-dialog-centered">
    
      <!-- Modal content-->
      <div class="modal-content modal-sm text-center" >
       
        <div class="modal-body">
        	<img src="sximo5/images/send2.png" style="width: 40%;" />
          <H5>Proceso de Envío Completado !</H5>
          <button type="button" class="btn btn-default" data-dismiss="modal" style="border-color: #f29f41;margin-bottom: -1px;margin-top: 5px;font-size:13px;">Cerrar</button>
        </div>
        
      </div>
      
    </div>
  </div>
<!-- Modal -->
</div>


<script type="text/javascript" src="{{ asset('sximo5/js/jquery.js') }}"></script>
<script type="text/javascript" src="{{ asset('html2pdf.bundle.min.js') }}"></script>

<script> 


function generatePDF() {
 
 var email = '<?=$Email?>';
    console.log(email); 
    
  var condominio = '<?=$Condominio?>';
    console.log(condominio);  

 $("#myModal").modal('show');

let el = document.getElementById('reporte');
let opt = {
    margin:      [0.2, 0.1, 1, -0.7],
              filename:     'myfile.pdf',
              pagebreak: {avoid: 'tr'},
              image:        { type: 'jpeg', quality: 0.98 },
              html2canvas:  { scale: 2,width: 1200,windowWidth: 1024 },
              jsPDF:        { unit: 'in', format: 'letter', orientation: 'landscape' }
                                       };
html2pdf().set( opt ).from( el ).toPdf().output('datauristring').then(function( pdfAsString ) {
   
   // $("#myModal").modal('hide');
    
    let data = {'fileDataURI': pdfAsString, 'Email':email, 'Condominio':condominio};
    $.post( "mail5.php", data);
    console.log( data );
} );
};
      
 
			
</script>





<style>
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@900&display=swap');



@media (max-width: 200px) {
.table-responsive {
   overflow-x: auto !important;}
 
 .x { width:600%;
 
transform: scale(.7, .7);


margin-right: -145px;
margin-left:-125px;

 }
}   

@media (min-width: 201px) and (max-width: 225px) {
.table-responsive {
   overflow-x: auto !important;}
 
 .x { width:550%;
 
transform: scale(.7, .7);


margin-right: -145px;
margin-left:-125px;

 }
}  

@media (min-width: 226px) and (max-width: 250px) {
.table-responsive {
   overflow-x: auto !important;}
 
 .x { width:400%;
 
transform: scale(.7, .7);


margin-right: -145px;
margin-left:-105px;

 }
}  




@media (min-width: 251px) and (max-width: 275px) {
.table-responsive {
   overflow-x: auto !important;}
 
 .x { width:350%;
 
transform: scale(.7, .7);


margin-right: -145px;
margin-left:-105px;

 }
  
}   


@media (min-width: 276px) and (max-width: 300px) {
.table-responsive {
   overflow-x: auto !important;}
 
.x { width:330%;
 
transform: scale(.7, .7);


margin-right: -145px;
margin-left:-115px;

 }
}   

@media (min-width: 301px) and (max-width: 325px) {
.table-responsive {
   overflow-x: auto !important;}
 
 .x { width:300%;
 
transform: scale(.7, .7);


margin-right: -145px;
margin-left:-115px;

 }
}   

@media (min-width: 326px) and (max-width: 350px) {
.table-responsive {
   overflow-x: auto !important;}
 
 .x { width:270%;
 
transform: scale(.7, .7);


margin-right: -145px;
margin-left:-115px;

 }
}   

@media (min-width: 351px) and (max-width: 375px) {
.table-responsive {
   overflow-x: auto !important;}
 
 .x { width:250%;
 
transform: scale(.7, .7);


margin-right: -145px;
margin-left:-115px;

 }
}  

@media (min-width: 376px) and (max-width:400px) {
.table-responsive {
   overflow-x: auto !important;}
 
.x { width:230%;
 
transform: scale(.7, .7);


margin-right: -145px;
margin-left:-115px;

 }
}  

@media (min-width: 401px) and (max-width:425px) {
.table-responsive {
   overflow-x: auto !important;}
 
.x { width:200%;
 
transform: scale(.7, .7);


margin-right: -145px;
margin-left:-115px;

 }
}  

@media (min-width: 426px) and (max-width:450px) {
.table-responsive {
   overflow-x: auto !important;}
 
 .x { width:200%;
 
transform: scale(.7, .7);


margin-right: -145px;
margin-left:-115px;

 }
} 

@media (min-width: 451px) and (max-width:475px) {
.table-responsive {
   overflow-x: auto !important;}
 
 .x { width:180%;
 
transform: scale(.7, .7);


margin-right: -145px;
margin-left:-115px;

 }
}  

@media (min-width: 476px) and (max-width:500px) {
.table-responsive {
   overflow-x: auto !important;}
 
.x { width:160%;
 
transform: scale(.7, .7);


margin-right: -145px;
margin-left:-105px;

 }
}  


@media (min-width: 501px) and (max-width:525px) {
.table-responsive {
   overflow-x: auto !important;}
 
 .x { width:150%;
 
transform: scale(.7, .7);


margin-right: -145px;
margin-left:-105px;

 }
}  

@media (min-width: 526px) and (max-width:550px) {
.table-responsive {
   overflow-x: auto !important;}
 
 .x { width:140%;
 
transform: scale(.7, .7);


margin-right: -145px;
margin-left:-105px;

 }
}  

@media (min-width: 551px) and (max-width:575px) {
.table-responsive {
   overflow-x: auto !important;}
 
.x { width:140%;
 
transform: scale(.7, .7);


margin-right: -145px;
margin-left:-105px;

 }
}  

@media (min-width: 576px) and (max-width:600px) {
.table-responsive {
   overflow-x: auto !important;}
 
 .x { width:140%;
 
transform: scale(.7, .7);


margin-right: -145px;
margin-left:-105px;

 }
 
 
}  

@media (min-width: 601px) and (max-width:700px) {
.table-responsive {
   overflow-x: auto !important;}
 
 .x { width:140%;
 
transform: scale(.7, .7);


margin-right: -145px;
margin-left:-115px;

 }
} 

@media (min-width: 701px) and (max-width:800px) {
.table-responsive {
   overflow-x: auto !important;}
 
.x { width:140%;
 
transform: scale(.7, .7);


margin-right: -145px;
margin-left:-130px;

 }
}  

@media (min-width: 801px) and (max-width:900px) {
.table-responsive {
   overflow-x: auto !important;}
 
 .x { width:140%;
 
transform: scale(.7, .7);


margin-right: -145px;
margin-left:-135px;

 }
}  

@media (min-width: 901px) and (max-width:1000px) {
.table-responsive {
   overflow-x: auto !important;}
 
.x { width:140%;
 
transform: scale(.7, .7);


margin-right: -145px;
margin-left:-145px;

 }
}  

@media (min-width: 1001px) and (max-width:1100px) {
.table-responsive {
   overflow-x: auto !important;}
 
 .x { width:140%;
 
transform: scale(.7, .7);


margin-right: -145px;
margin-left:-170px;

 }
}  



 .table th{
font-weight:600;  
font-size:11px;

 } 

 
.huge2{

font-family: 'Rubik', sans-serif;
font-weight: 900;
letter-spacing: -2px;  
/*-webkit-text-stroke: 2px #808080;*/
font-size: 32px;
margin-top:-1px;
color: #7d7d7d;

}    
.huge3{

font-family: 'Rubik', sans-serif;
font-weight: 900;
letter-spacing: -1px;  
/*-webkit-text-stroke: 2px #808080;*/
font-size: 15px;
margin-top:-1px;
color: #7d7d7d;
margin-bottom:7px;

} 

.huge4{

font-family: 'Rubik', sans-serif;
font-weight: 700;
letter-spacing: 0px;  
/*-webkit-text-stroke: 2px #808080;*/
font-size: 16px;
margin-top:5px;
color: #4879a1;
margin-bottom:15px;
text-shadow:0px 0px 2px #3b3b3b;
}       



.line_break1{
    width:100%;
    float: left;
    border-bottom: 1px solid #4879a1;
    margin-bottom: 6px;
    
 }
    
    .line_break2{
    width:100%;
    float: left;
    border-bottom: 1px solid #4879a1;
    margin-top:-11px;    
        
    }    
    
    
    
</style>


@endsection
