@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($row = mysqli_fetch_array($DB)){
$dbname = $row ['dbname'];
$Condominio = $row['Condominio'];
}


$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");

$sql21= mysqli_query($conn,"SELECT * FROM ordendetrabajo WHERE DATE_FORMAT(NOW(),'%Y-%m-%d') > DATE_FORMAT(Fechafinal,'%Y-%m-%d') AND Status = 'En Progreso' AND Condominio = '".$Condominio."' ");
$trabajosatrasados = mysqli_num_rows($sql21);

$sql7= mysqli_query($conn,"SELECT * FROM gastos WHERE  Status != 'Pagado' AND  Condominio = '".$Condominio."' ");
$pagospendientes = mysqli_num_rows($sql7);

$sql4= mysqli_query($conn,"SELECT * FROM mantenimientopago WHERE  Pagostatus != 'Pagado' AND Mes2 != DATE_FORMAT(DATE_SUB( NOW(), INTERVAL 30 DAY),'%M-%Y')  AND  Condominio = '".$Condominio."' ");
$cuotasatrasadas = mysqli_num_rows($sql4);

?>


<div  style="margin-left:-10px">
<div style="text-align: center; margin-bottom:-80px;margin-top:12px"><img class="imagen2" src="dashboardimage/logo.png">
<div id="titulo" style="font-weight:500;margin-top:-12px;margin-bottom:80px;"><img class="imagen4" src="dashboardimage/adm3.png"></div>

<!--<div style="margin:4px"><fieldset style="border-color:#7fb3e3;"><legend style="font-weight:900;font-size:13px;color:gray;">MÓDULOS</legend></fieldset>
</div>-->

</div>

<!--<fieldset  style="border-color:#7fb3e3;margin:9px;margin-left:17px;margin-bottom:-130px;"><legend style="font-weight: 600;"> INDICADORES </legend></fieldset>-->  


<div id="indice3">
    
<div id="indice2">
      
<div id="indice" class="row pb-4 " style="margin:7px;" >
 
<div class=" col-lg-4 col-xs-4 col-md-4  col-4" >
  
<div class="ancho" style="text-align: center;border-color:#3c9bfa; border-style: solid;border-width: thin; border-radius: 10px;box-shadow: 0px 0px 3px #888;">
                                       
                                        <h1 class="h1indice" style="font-weight: 500;text-align: center;" ><i class="las la-tools icon" style="color:#ffa106;float:left;margin-top:5px;margin-left:5px;"></i><?php echo $trabajosatrasados;?></h1>
                                       <div class="indice" >TRABAJOS PENDIENTES</div>
                                        
</div>
</div>        
<div class=" col-lg-4 col-xs-4 col-md-4 col-4">
    
<div class="ancho" style="text-align: center;border-color:#3c9bfa; border-style: solid;border-width: thin; border-radius: 10px;box-shadow: 0px 0px 3px #888;">
                                       
                                        <h1 class="h1indice" style="font-weight: 500;text-align: center;" ><i class="las la-hand-holding-usd icon" style="color:#ffa106;float:left;margin-top:5px;margin-left:5px;"></i><?php echo $pagospendientes;?></h1>
                                       <div class="indice" >PAGOS PENDIENTES</div>
                                        
</div>
</div>        
    
<div class=" col-lg-4 col-xs-4 col-md-4  col-4" >
    
<div class="ancho" style="text-align: center;border-color:#3c9bfa; border-style: solid;border-width: thin; border-radius: 10px;box-shadow: 0px 0px 3px #888;">
                                       
                                        <h1 class="h1indice" style="font-weight: 500;text-align: center;" ><i class="las la-file-invoice-dollar icon" style="color:#ffa106;float:left;margin-top:5px;margin-left:5px;"></i><?php echo $cuotasatrasadas;?></h1>
                                       <div class="indice" >CUOTAS PENDIENTES</div>
                                        
                                        
                                        
                                        
</div>
</div>           

   


</div>

</div>

</div>
</div>


<!--<fieldset style="border-color:#7fb3e3;margin:8px;margin-bottom:-70px;margin-top:25px;""><legend  style="font-weight: 600;"  > MODULOS </legend></fieldset>-->  

                    <div class="row pb-4">
                        
                        
                    
                     <div class="an col-lg-3 col-xs-6 col-md-6 mb-3 col-4" >
                        <div class="card " style="background-color:transparent;text-align: center;">
                            <div class="card-body">
                                    
                                    <div class="align-self-center" >
                                        <a href="{{ url('documentosmobile') }}" ><img class="imagen" src="dashboardimage/file3.png"></a>
                                       
                                </div>
                            </div><div style="margin-top:-20px;margin-bottom:-2px;"><p>DOCUMENTOS</p></div>
                        </div>
                    </div>
                    
                    <div class="bn col-lg-3 col-xs-6 col-md-6 mb-3 col-4" >
                         <div class="card " style="background-color:transparent;text-align: center;">
                            <div class="card-body">
                                   
                                    <div class="align-self-center">
                                        <a href="{{ url('pagosmantenimientos') }}" ><img class="imagen" src="dashboardimage/contract3.png"></a>
                                       
                                        
                                </div>
                            </div><div style="margin-top:-20px;margin-bottom:-2px;"><p>PAGOS</p></div>
                        </div>
                    </div>
                    
                    <div class="cn col-lg-3 col-xs-6 col-md-6 mb-3 col-4">
                        <div class="card " style="background-color:transparent;text-align: center;">
                            <div class="card-body">
                                   
                                    <div class="align-self-center">
                                        <a href="{{ url('reservacionesusuario') }}" ><img class="imagen" src="dashboardimage/reservacion2.png"></a>
                                       
                                        
                                </div>
                            </div><div style="margin-top:-20px;margin-bottom:-2px;"><p>RESERVACION</p></div>
                        </div>
                    </div>
                    
                    <div class="an col-lg-3 col-xs-6 col-md-6 mb-3 col-4" >
                         <div class="card " style="background-color:transparent;text-align: center;">
                            <div class="card-body">
                                   
                                    <div class="align-self-center">
                                        <a href="{{ url('comunicacion') }}" ><img class="imagen" src="dashboardimage/soporte3.png"></a>
                                       
                                        
                                </div>
                            </div><div style="margin-top:-20px;margin-bottom:-2px;"><p>COMUNICACION</p></div>
                        </div>
                    </div>
                    
                    <div class="bn col-lg-3 col-xs-6 col-md-6 mb-3 col-4" >
                         <div class="card " style="background-color:transparent;text-align: center;">
                            <div class="card-body">
                                    
                                    <div class="align-self-center">
                                        <a href="{{ url('mudanzas') }}" ><img class="imagen" src="dashboardimage/camion3.png"></a>
                                        
                                        
                                </div>
                            </div><div style="margin-top:-20px;margin-bottom:-2px;"><p>MUDANZAS</p></div>
                        </div>
                    </div>
                    
                    <div class="cn col-lg-3 col-xs-6 col-md-6 mb-3 col-4" >
                         <div class="card " style="background-color:transparent;text-align: center;">
                            <div class="card-body">
                                    <div class="m-r-20 align-self-center"></div>
                                    <div class="align-self-center">
                                        <a href="{{ url('reunionesmobile') }}" ><img class="imagen" src="dashboardimage/reunion3.png"></a>
                                        
                                        
                                </div>
                            </div><div style="margin-top:-20px;margin-bottom:-2px;"><p>REUNIONES</p></div>
                        </div>
                    </div>
                    
                    <div class="an col-lg-3 col-xs-6 col-md-6 mb-3 col-4" >
                         <div class="card " style="background-color:transparent;text-align: center;">
                            <div class="card-body">
                                    
                                    <div class="align-self-center">
                                        <a href="{{ url('reporteaveria') }}" ><img class="imagen" src="dashboardimage/head3.png"></a>
                                       
                                        
                                </div>
                            </div><div style="margin-top:-20px;margin-bottom:-2px;"><p>INCIDENCIAS</p></div>
                        </div>
                    </div>
                    
                   <div class="bn col-lg-3 col-xs-6 col-md-6 mb-3 col-4" >
                         <div class="card " style="background-color:transparent;text-align: center;">
                            <div class="card-body">
                                    
                                    <div class="align-self-center">
                                        <a href="{{ url('encuestasrespuestas') }}" ><img class="imagen" src="dashboardimage/test3.png"></a>
                                        
                                        
                                </div>
                            </div><div style="margin-top:-20px;margin-bottom:-2px;"><p>ENCUESTAS</p></div>
                        </div>
                    </div>
                   
                    <div class="cn col-lg-3 col-xs-6 col-md-6 mb-3 col-4" >
                         <div class="card " style="background-color:transparent;text-align: center;">
                            <div class="card-body">
                                    
                                    <div class="align-self-center">
                                        <a href="{{ url('reporteadm') }}" ><img class="imagen" src="dashboardimage/attachment3.png"></a>
                                        
                                        
                                </div>
                            </div><div style="margin-top:-20px;margin-bottom:-2px;"><p>REPORTES</p></div>
                        </div>
                    </div>
                    
        </div>          
                    
                    
                    
                    
<!--<div class="col-xl-12 col-md-12">
<div class="card">
    <div class="card-body">
        <h5>Monthly View</h5>
        <span class="text-muted">For more details about usage, please refer <a href="https://www.amcharts.com/online-store/" target="_blank">amCharts</a> licences.</span>
        <div id="monthly-graph" style="height: 300px;"></div>
    </div>-->



<script src="{{ asset('') }}assets/js/dashboard/amchart/js/amcharts.js" type="text/javascript"></script>
<script src="{{ asset('') }}assets/js/dashboard/amchart/js/serial.js" type="text/javascript"></script>
<script src="{{ asset('') }}assets/js/dashboard/amchart/js/light.js" type="text/javascript"></script>
<script src="{{ asset('') }}assets/js/dashboard/crm-dashboard.min.js" type="text/javascript"></script>
<style>



 @media (max-width: 350px) {
     
 .icon{
   font-size:30px;  
     
 }
     
  #indice3 {
  margin-left:-10px;
  margin-top:90px;
  margin-bottom:-40px;    
      
  }   
     
     
  .h1indice {
   font-size:15px 
}   
     
     
  #indice2{
  margin:15px;
     
 }          
     
     
  .indice{
  font-size:7px;
  padding:5px;
  font-weight: 600;
  color:#5c5c5c;
  margin-top:-10px;
  text-align: right;
     
 }        
     
  .ancho{
  width:138%;
  
      
  } 
     
     

 .imagen {
    width:90%; /* you can use % */
    height: auto;
    margin:7px;
    
}  
 p {
  font-size: 7px;
  font-weight: 600; 
  margin-left: 8px;
 } 

.imagen2 {
    width:60%; /* you can use % */
    height: auto;
    margin-bottom:15px;
}


.card{
 margin-bottom:-40px;   
}
.page-wrapper{
    background-image:url({{url('login.jpg')}});
    background-size: auto 100%;
    background-repeat: no-repeat;
    
}

.imagen4{
   width:70%; /* you can use % */
    height: auto;
    margin-bottom:10px;
}

.an{ margin-left:10px;}
.bn{ margin-left:-10px;}
.cn{ margin-left:-15px;}

} 

 @media (min-width: 351px) and (max-width: 399px) {
  .icon{
   font-size:35px;   
  }
     
   #indice3 {
  margin-left:-10px;
  margin-top:90px;
  margin-bottom:-40px;    
      
  }   
         
     
     
     
  .h1indice {
   font-size:20px 
}   
     
     
  #indice2{
  margin:15px;
     
 }          
     
     
  .indice{
  font-size:9px;
  padding:8px;
  font-weight: 900;
  color:#5c5c5c;
   margin-top:-15px;
  text-align: right;
     
 }        
     
  .ancho{
  width:120%;
  
      
  }   
     
     

 .imagen {
    width:75%; /* you can use % */
    height: auto;
    margin:10px;
    
}  
 p {
  font-size: 8.5px;
  font-weight: 500; 
  margin-left: 4px;
  
 } 

.imagen2 {
    width:65%; /* you can use % */
    height: auto;
    margin-bottom:15px;
}


.card{
 margin-bottom:-40px;   
}
.page-wrapper{
    background-image:url({{url('login.jpg')}});
    background-size: auto 100%;
    background-repeat: no-repeat;
}
.imagen4{
   width:75%; /* you can use % */
    height: auto;
    margin-bottom:10px;
}

.an{ margin-left:10px;}
.bn{ margin-left:-10px;}
.cn{ margin-left:-15px;}


} 

 @media (min-width: 400px) and (max-width: 450px) {

 .icon{
   font-size:37px; 
   
  }

  #indice3 {
  margin-left:-15px;
  margin-top:90px;
  margin-bottom:-40px;    
      
  }        
     
     
     
 .h1indice {
   font-size:20px 
   
  
}       
     

 #indice2{
 
  margin:20px;
     
 }          
     
     
  .indice{
  font-size:10px;
  padding:8px;
  font-weight: 900;
  color:#5c5c5c;
  margin-top:-15px;
  text-align: right;
  
     
 }        
     
  .ancho{
  width:120%;    
  
  }   


 .imagen {
    width:70%; /* you can use % */
    height: auto;
    margin:10px;
    
}  
 p {
  font-size: 9px;
  font-weight: 500; 
  margin-left: -4px;
  
 } 

.imagen2 {
    width:65%; /* you can use % */
    height: auto;
    margin-bottom:15px;
}


.card{
 margin-bottom:-40px;   
}
.page-wrapper{
    background-image:url({{url('login.jpg')}});
    background-size: auto 100%;
    background-repeat: no-repeat;
}
.imagen4{
   width:75%; /* you can use % */
    height: auto;
    margin-bottom:10px;
}

.an{ margin-left:10px;}
.bn{ margin-left:-10px;}
.cn{ margin-left:-15px;}


} 


@media (min-width: 451px) and (max-width: 499px) {
    
  .icon{
   font-size:38px;   
  }   
    
    
   #indice3 {
  margin-left: -15px;
  margin-top:90px;
  margin-bottom:-70px;    
      
  }      
    
    
    
 .h1indice {
   font-size:30px 
}       
     

 #indice2{
 
  margin:17px;
     
 }          
     
     
  .indice{
  font-size:11px;
  padding:6px;
  font-weight: 600;
  color:#5c5c5c;
  margin-top:-10px;
  text-align: right;
     
 }        
     
  .ancho{
  width:110%;    
  
  }   
    
    
    

 .imagen {
    width:45%; /* you can use % */
    height: auto;
    margin:28px;
    
}  
 p {
  font-size: 11px;
  font-weight: 600; 
  margin-top:-14px;
 } 

.imagen2 {
    width:60%; /* you can use % */
    height: auto;
    margin-bottom:15px;
}


.card{
 margin-bottom:-40px;   
}
.page-wrapper{
    background-image:url({{url('login.jpg')}});
    background-size: auto 100%;
    background-repeat: no-repeat;
}

.imagen4{
   width:70%; /* you can use % */
    height: auto;
    margin-bottom:10px;
}

.an{ margin-left:10px;}
.bn{ margin-left:-10px;}
.cn{ margin-left:-15px;}



} 

@media (min-width: 500px) and (max-width: 599px) {
    
   .icon{
   font-size:45px;   
  }     
    
    
  #indice3 {
  margin-left:-20px;
  margin-top:90px;
  margin-bottom:-70px;    
      
  }       
    
    
    
 .h1indice {
   font-size:30px 
}       
     

 #indice2{
 
  margin:35px;
     
 }          
     
     
  .indice{
  font-size:12px;
  padding:6px;
  font-weight: 600;
  color:#5c5c5c;
  margin-top:-10px;
   text-align: right;
     
 }        
     
  .ancho{
  width:115%;    
  
  }     
    
    

 .imagen {
    width:40%; /* you can use % */
    height: auto;
    margin:28px;
    
}  
 p {
  font-size: 11px;
  font-weight: 600; 
  margin-top:-14px;
  margin-left: -8px;
 } 

.imagen2 {
    width:60%; /* you can use % */
    height: auto;
    margin-bottom:15px;
}


.card{
 margin-bottom:-40px;   
}
.page-wrapper{
    background-image:url({{url('login.jpg')}});
    background-size: auto 100%;
    background-repeat: no-repeat;
}

.imagen4{
   width:70%; /* you can use % */
    height: auto;
    margin-bottom:10px;
}

.an{ margin-left:10px;}
.bn{ margin-left:-10px;}
.cn{ margin-left:-15px;}



} 

@media (min-width: 600px) and (max-width: 700px) {
  .icon{
   font-size:45px;   
  }       
    
    
    
 #indice3 {
  margin-left:-10px;
  margin-top:90px;
  margin-bottom:-70px;    
      
  }       
    
    
    
 .h1indice {
   font-size:30px 
}       
     

 #indice2{
 
  margin:35px;
     
 }          
     
     
  .indice{
  font-size:14px;
  padding:8px;
  font-weight: 600;
  color:#5c5c5c;
  margin-top:-10px;
   text-align: right;
     
 }        
     
  .ancho{
  width:105%;    
  
  }     
    
    

 .imagen {
    width:40%; /* you can use % */
    height: auto;
    margin:28px;
    
}  
 p {
  font-size: 11px;
  font-weight: 600; 
  margin-top:-14px;
  margin-left: -6px;
 } 

.imagen2 {
    width:60%; /* you can use % */
    height: auto;
    margin-bottom:15px;
}


.card{
 margin-bottom:-40px;   
}
.page-wrapper{
    background-image:url({{url('login.jpg')}});
   background-size: auto 100%;
    background-repeat: no-repeat;
}

.imagen4{
   width:70%; /* you can use % */
    height: auto;
    margin-bottom:10px;
}

.an{ margin-left:10px;}
.bn{ margin-left:-10px;}
.cn{ margin-left:-15px;}



} 



@media (min-width: 701px) and (max-width: 799px) {
    
 .icon{
   font-size:55px;   
  }        
    

 #indice3 {
  margin-left:-10px;
  margin-top:90px;
  margin-bottom:-70px;    
      
  }       
    
    
    
 .h1indice {
   font-size:30px 
}       
     

 #indice2{
 
  margin:35px;
     
 }          
     
     
  .indice{
  font-size:15px;
  padding:8px;
  font-weight: 600;
  color:#5c5c5c;
  margin-top:-10px;
   text-align: right;
     
 }        
     
  .ancho{
  width:110%;    
  
  }      


 .imagen {
    width:24%; /* you can use % */
    height: auto;
    margin:57px;
    
}  
 p {
  font-size: 10px;
  font-weight: 600; 
  margin-top:-40px;
  margin-left: -8px;
 } 

.imagen2 {
    width:60%; /* you can use % */
    height: auto;
    margin-bottom:15px;
}


.card{
 margin-bottom:-40px;   
}
.page-wrapper{
    background-image:url({{url('login.jpg')}});
    background-size: auto 100%;
    background-repeat: no-repeat;
}

.imagen4{
   width:70%; /* you can use % */
    height: auto;
    margin-bottom:10px;
}

} 

@media (min-width: 800px) and (max-width: 900px) {
    
 .icon{
   font-size:55px;   
  }     
       
    
 #indice3 {
  margin-left:-10px;
  margin-top:90px;
  margin-bottom:-70px;    
      
  }       
    
    
    
 .h1indice {
   font-size:30px 
}       
     

 #indice2{
 
  margin:35px;
     
 }          
     
     
  .indice{
  font-size:19px;
  padding:18px;
  font-weight: 600;
  color:#5c5c5c;
  margin-top:-10px;
   text-align: right;
     
 }        
     
  .ancho{
  width:110%;    
  
  }   



 .imagen {
    width:24%; /* you can use % */
    height: auto;
    margin:57px;
    
}  
 p {
  font-size: 16px;
  font-weight: 600; 
  margin-top:-40px;
  margin-left: -8px;
 } 

.imagen2 {
    width:60%; /* you can use % */
    height: auto;
    margin-bottom:15px;
}


.card{
 margin-bottom:-40px;   
}
.page-wrapper{
    background-image:url({{url('login.jpg')}});
    background-size: auto 100%;
    background-repeat: no-repeat;
}

.imagen4{
   width:70%; /* you can use % */
    height: auto;
    margin-bottom:10px;
}

} 

@media (min-width: 901px) {
    
.icon{
   font-size:70px;   
  }     
    
    
#indice3 {
  margin-left:10px;
  margin-top:90px;
  margin-bottom:-20px;    
      
  }       
    
    
    
 .h1indice {
   font-size:40px
   margin-top:-20px;
   
   
}       
     

 #indice2{
 
  margin:-5px;
     
 }          
     
     
  .indice{
  font-size:19px;
  padding:18px;
  font-weight: 600;
  color:#5c5c5c;
  margin-top:-10px;
   text-align: right;
     
 }        
     
  .ancho{
  width:100%;    
  
  }       
    
    
    
    
    
    
.page-wrapper{
    background: #f4f6f9;
}

p{
margin-top:10px;    
    
}
.imagen4{
 margin-bottom:20px;
 margin-top:10px;
 width:35%;
    
}
.imagen2{
  width:30%; /* you can use % */   
}

</style>
@stop