<?php
   # Incluindo a classe
   require('googleTranslateTool.class.php');
   
   		$tempo_sessao =  120*300*120*50;
   		if (session_status() !== PHP_SESSION_ACTIVE) {//Verificar se a sessão não já está aberta.
   			ini_set('session.gc_maxlifetime', $tempo_sessao);
   			ini_set('session.cookie_lifetime', $tempo_sessao);
   			ini_set("session.cookie_secure", $tempo_sessao);
   			ini_set("session.sess_expiration", 0);
   			ini_set("session.sess_expire_on_close", TRUE);
   			ini_set('session.save_path',realpath(dirname(__FILE__).'/sessao'));
   			ini_set('session.gc_probability', 1);
   			session_start();
   		}
   		
   		//Obtendo o id da sessão iniciada: 
   		$idSession = session_id();
   		
   
   
   if(isset($_POST['pt_br'])){
   	
   	$_SESSION['language'] = 'pt-br';
   	$_SESSION['source'] = 'en';
   	$_SESSION['target'] = 'pt-br';
   	
   }elseif(isset($_POST['en'])){
   	
   	$_SESSION['language'] = 'en';
   	$_SESSION['source'] = 'pt-br';
   	$_SESSION['target'] = 'en';
   	
   }elseif(!isset($_POST['pt_br']) AND !isset($_POST['en'])){
   	
   	if(isset($_SESSION['language']) AND isset($_SESSION['source']) AND isset($_SESSION['target'])){
   
   		$_SESSION['language'] = $_SESSION['language'];
   		$_SESSION['source'] = $_SESSION['source'] ;
   		$_SESSION['target'] = $_SESSION['target'];
   
   	}else{
   		
   		$_SESSION['language'] = 'pt-br';
   		$_SESSION['source'] = 'en';
   		$_SESSION['target'] = 'pt-br';
   		
   	}
   	
   }
   		
   
 include_once('admin/conexao.php');
 include_once('admin/DAO/DAOclientes.php');
 $DaoClientes  = new DaoClientes();  
   
   
   ?>
<!DOCTYPE html>
<html lang="pt-nr">
   <head>
      <meta charset="utf-8" />
      <?php include "titulo.php" ?>
      <meta content="width=device-width, initial-scale=1.0" name="viewport" />
      <meta content="" name="keywords" />
      <meta content="" name="description" />
      <!-- Favicon -->
      <link href="img/favicon.ico" rel="icon" />
      <!-- Google Web Fonts -->
      <link rel="preconnect" href="https://fonts.googleapis.com" />
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
      <link
         href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&family=Poppins:wght@600;700&display=swap"
         rel="stylesheet"
         />
      <!-- Icon Font Stylesheet -->
      <link
         href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css"
         rel="stylesheet"
         />
      <link
         href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css"
         rel="stylesheet"
         />
      <!-- Libraries Stylesheet -->
      <link href="lib/animate/animate.min.css" rel="stylesheet" />
      <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet" />
      <!-- Customized Bootstrap Stylesheet -->
      <link href="css/bootstrap.min.css" rel="stylesheet" />
      <!-- Template Stylesheet -->
      <link href="css/style.css" rel="stylesheet" />
      <!--Tabs-->
      <script>
         $( function() {
           $( "#tabs" ).tabs();
         } );
      </script>
   </head>
   <style>
      .text-light {
      color: #052F59 !important;
      }
      /*
      //dispositivos móveis
      @media screen and (max-width: 480px) {
      .w-100-carrossel {
      width: 100% !important;
      height: 400px !important;
      }
      }　
      //iPads, tablets
      @media screen and (min-width: 481px) and (max-width: 768px) {
      .w-100-carrossel {
      width: 100% !important;
      height: 450px !important;
      }
      }　
      //telas pequenas, laptops
      @media screen and (min-width: 769px) and (max-width: 1024px) {
      .w-100-carrossel {
      width: 100% !important;
      height: 798px !important;
      }
      }　
      //desktops, telas grandes
      @media screen and (min-width: 1025px) and (max-width: 1200px) {
      .w-100-carrossel {
      width: 100% !important;
      height: 798px !important;
      }
      }　
      //telas muito grandes, TVs
      @media screen and (min-width: 1201px) {
      .w-100-carrossel {
      width: 100% !important;
      height: 798px !important;
      }
      }　
      */
      /*TELA CELULAR*/
      @media screen and (max-width: 600px) {
      .w-100-carrossel {
      width: 100% !important;
      height: 450px !important;
      }
      }
      /*TELA DESKTOP*/
      @media screen and (min-width: 900px) {
      .w-100-carrossel {
      width: 100% !important;
      height: 798px !important;
      }
      }
      .position-absolute {
      position: static !important;
      }
      /*Começo TAB*/
      .tab {
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
      }
      /* Style the buttons inside the tab */
      .tab button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
      font-size: 17px;
      }
      /* Change background color of buttons on hover */
      .tab button:hover {
      background-color: #ddd;
      }
      /* Create an active/current tablink class */
      .tab button.active {
      background-color: #ccc;
      }
      /* Style the tab content */
      .tabcontent {
      display: none;
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-top: none;
      }
	  
	  .tab {
  overflow: hidden;
  border: 1px solid #fffbfb;
  background-color: #f2f2f2;
}


.tabcontent {
 
  border: 1px solid #fff;
    border-top-color: rgb(255, 255, 255);
    border-top-style: solid;
    border-top-width: 1px;
 
}

.tab button.active {
  background-color: #FDA12B;
}
      /*Fim TAB*/
   </style>
   <body>
      <!-- Spinner Start -->
      <div
         id="spinner"
         class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center"
         >
         <div class="spinner-grow text-primary" role="status"></div>
      </div>
      <!-- Spinner End -->
      <!-- Topbar Start -->
      <!-- Topbar End -->
      <!-- Navbar Start -->
      <?php include "menu.php" ?>
      <!-- Navbar End -->
      <!-- Page Header Start -->
      <div
         class="container-fluid page-header py-5 mb-5 wow fadeIn"
         data-wow-delay="0.1s"
         >
         <div class="container text-center py-5">
            <h1 class="display-4 text-white animated slideInDown mb-4"><?php if($_SESSION['target'] == 'pt-br'){echo 'Projetos e Clientes';}else{echo GoogleTranslate::translate($_SESSION['source'], $_SESSION['target'],'Projetos e Clientes');} ?></h1>
            <nav aria-label="breadcrumb animated slideInDown">
               <ol class="breadcrumb justify-content-center mb-0">
                  <li class="breadcrumb-item">
                     <a class="text-white" href="index.php">Home</a>
                  </li>
               </ol>
            </nav>
         </div>
      </div>
      <!-- Page Header End -->
	  
	  <!--Clientes-->
	  	<div class="container-xxl py-5" style="background-color: #fff;max-width: 100% !important;padding-bottom: 10rem !important;padding-top: 7rem !important;">
   
      <div class="container">
        <div class="row g-12 align-items-end mb-12">
          <div class="col-lg-12 wow fadeInUp" data-wow-delay="0.1s">
            
              
             <h1 class="display-8 mb-0" style="text-align: center;color: rgb(36,62,99);font-weight: 900;"><?php if($_SESSION['target'] == 'pt-br'){echo 'Nossos Clientes';}else{echo GoogleTranslate::translate($_SESSION['source'], $_SESSION['target'],'Nossos Clientes');} ?></h1>
           
          </div>
        
        </div>
		<br>
		<br>
		<br>
        <div class="row g-4">
          <?php 

			$result =  $DaoClientes->Listarclientes();
			foreach($result as $row){

		  ?>
		  <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;text-align: center;">
            <div class="team-item position-relative">
              <img class="img-fluid" src="admin/uploads/clientes/<?php echo $row['cli_imagem'] ?>" alt="" style="width: 160px;height: 100%;text-align: center;">
             
            </div>
          </div>
			<?php } ?>
        </div>
      </div>
    </div>
	  
	  
      <div class="container">
         <div class="row row d-flex justify-content-center g-5">
            <div class="col-lg-12 wow fadeInUp" data-wow-delay="0.5s">
               <div class="h-100">
                  <h1 class="display-8 mb-0" style="text-align: center;color: rgb(36,62,99);font-weight: 900;margin-bottom: 40px !important;"><?php if($_SESSION['target'] == 'pt-br'){echo 'Nossos Projetos';}else{echo GoogleTranslate::translate($_SESSION['source'], $_SESSION['target'],'Nossos Projetos');} ?></h1>
                  <!--Tabs-->
                  <div class="tab">
					 <?php 
					 $cont = 1;
					 
					 foreach($result as $row){
					 ?>
                     <button class="tablinks" onclick="openCity(event, 'tab<?php echo $cont; ?>')"style="color: rgb(36,62,99);font-weight: 500;"><?php echo $row['cli_nome'] ?></button>
					<?php $cont++;} ?>
                  </div>
				  <?php 
					 $cont2 = 1;
					 foreach($result as $row){
					 ?>
                  <div id="tab<?php echo $cont2; ?>" class="tabcontent">
                       <p style="color: black;font-size: 1.1rem;text-align: justify;">
							<?php 
							if($row['cli_projeto']){
								$cli_projeto = $row['cli_projeto'];
								$cli_projeto = str_replace('>>>', '<a href="#" class="btn btn-primary py-3 px-5" style="background-color: rgb(34, 114, 227);border-color: #FFF;font-size: 15px;padding-bottom: 5px !important;padding-top:5px !important;">', $cli_projeto);
								
								$cli_projeto = str_replace('<<<', '</a>', $cli_projeto);
							
								if($_SESSION['target'] == 'pt-br'){echo $cli_projeto;}else{echo GoogleTranslate::translate($_SESSION['source'], $_SESSION['target'],$cli_projeto);}
								
							}
							
							?>
						</p>
                  </div>
				  <?php  $cont2++;} ?>

                  <!--Tabs-->
               
               </div>
            </div>
         </div>
      </div>
      <br><br>
      
   
      </div>
      </div>
      <!-- About End -->
      <!-- Team Start -->
      <!-- Team End -->
      <!-- Footer Start -->
      <?php include "rodape.php" ?>
      <!-- Footer End -->
      <!-- Back to Top -->
      <a href="#" class="btn btn-lg btn-primary btn-lg-square back-to-top"
         ><i class="bi bi-arrow-up"></i
         ></a>
      <!-- JavaScript Libraries -->
      <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
      <script src="lib/wow/wow.min.js"></script>
      <script src="lib/easing/easing.min.js"></script>
      <script src="lib/waypoints/waypoints.min.js"></script>
      <script src="lib/owlcarousel/owl.carousel.min.js"></script>
      <!--Tabs-->
      <script>
         function openCity(evt, cityName) {
           var i, tabcontent, tablinks;
           tabcontent = document.getElementsByClassName("tabcontent");
           for (i = 0; i < tabcontent.length; i++) {
             tabcontent[i].style.display = "none";
           }
           tablinks = document.getElementsByClassName("tablinks");
           for (i = 0; i < tablinks.length; i++) {
             tablinks[i].className = tablinks[i].className.replace(" active", "");
           }
           document.getElementById(cityName).style.display = "block";
           evt.currentTarget.className += " active";
         }
      </script>
      <!-- Template Javascript -->
      <script src="js/main.js"></script>
   </body>
</html>
