<?php
// Définir le nom de la page pour le SEO
$current_page = 'telechargement';

// Inclure le head avec SEO
include 'includes/head.php'; 
?>
<body id="default_theme" class="telechargement">
<!-- loader -->
<div class="bg_load"> <img class="loader_animation" src="images/loaders/loader_1.png" alt="#" /> </div>
<!-- end loader -->

<?php include 'includes/topbar.php'; ?>
<?php include 'includes/navbar.php'; ?>

<!-- inner page banner avec image de fond aléatoire et overlay noir -->
<?php
$bg_images = glob('images/bg/*.{jpg,jpeg,png,gif}', GLOB_BRACE);
$random_bg = !empty($bg_images) ? $bg_images[array_rand($bg_images)] : 'images/bg/inner_page_banner.jpg';
?>
<style>
  #inner_banner.overlay-black {
    position: relative;
    overflow: hidden;
  }
  #inner_banner.overlay-black::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1;
  }
  #inner_banner.overlay-black > .container {
    position: relative;
    z-index: 2;
  }
</style>
<div id="inner_banner" class="section inner_banner_section overlay-black" style="background: url('<?php echo $random_bg; ?>') center center/cover no-repeat;">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="full">
          <div class="title-holder">
            <div class="title-holder-cell text-left">
              <h1 class="page-title">Téléchargements</h1>
              <ol class="breadcrumb">
                <li><a href="index.php">Accueil</a></li>
                <li class="active">Téléchargements</li>
              </ol>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- end inner page banner -->

<
<!-- Téléchagrement -->
<div class="section padding_layout_1" style="background: #f8f9fa;">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="full">
          <div class="main_heading text_align_center">
            <h2 style="text-transform: none;">Téléchargements</h2>
            <p class="large"></p>
          </div>
        </div>
      </div>
    </div>
    <?php
    require_once 'config/db.php';
    $db = getDbConnection();
    $downloads = $db->query('SELECT * FROM telechargements WHERE afficher = 1 ORDER BY date_ajout DESC')->fetchAll(PDO::FETCH_ASSOC);
    ?>
    <div class="row margin_top_30">
      <?php foreach ($downloads as $dl): ?>
        <div class="col-md-4">
          <div class="value_card">
            <div class="value_icon">
              <?php if (!empty($dl['image'])): ?>
                <img src="downloads/<?php echo htmlspecialchars($dl['image']); ?>" alt="Image fichier" style="height:150px;margin-bottom:20px;object-fit:cover;">
              <?php endif; ?>
            </div>
            <h4 style="color: #011f3e;"><?php echo htmlspecialchars($dl['titre']); ?></h4>
            <p><?php echo nl2br(htmlspecialchars($dl['description'])); ?></p>
            <?php if (!empty($dl['fichier'])): ?>
              <a class="btn btn-primary" href="downloads/<?php echo htmlspecialchars($dl['fichier']); ?>" download>Télécharger</a>
            <?php elseif (!empty($dl['lien'])): ?>
              <a class="btn btn-primary" href="<?php echo htmlspecialchars($dl['lien']); ?>" target="_blank">Télécharger</a>
            <?php endif; ?>
          </div>
        </div>
      <?php endforeach; ?>
    </div>
  </div>
</div>





<?php include 'includes/footer.php'; ?>

<!-- Modal -->
<div class="modal fade" id="search_bar" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-lg-8 col-md-8 col-sm-8 offset-lg-2 offset-md-2 offset-sm-2 col-xs-10 col-xs-offset-1">
            <div class="navbar-search">
              <form action="#" method="get" id="search-global-form" class="search-global">
                <input type="text" placeholder="Type to search" autocomplete="off" name="s" id="search" value="" class="search-global__input">
                <button class="search-global__btn"><i class="fa fa-search"></i></button>
                <div class="search-global__note">Begin typing your search above and press return to search.</div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End Model search bar -->

<!-- js section -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- menu js -->
<script src="js/menumaker.js"></script>
<!-- wow animation -->
<script src="js/wow.js"></script>
<!-- custom js -->
<script src="js/custom.js"></script>
<!-- zoom effect -->
<script src='js/hizoom.js'></script>
<script>
        $('.hi1').hiZoom({
            width: 300,
            position: 'right'
        });
        $('.hi2').hiZoom({
            width: 400,
            position: 'right'
        });
</script>

<style>
.value_card, .team_member, .advantage_item {
    padding: 20px;
    text-align: center;
}

.value_card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    transition: transform 0.3s ease;
}

.value_card:hover {
    transform: translateY(-5px);
}

.team_member {
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    padding: 30px 20px;
}

.contact_info_member p {
    margin: 5px 0;
    color: #666;
}

.stat_item {
    margin-bottom: 30px;
}

.advantage_item {
    padding: 0;
}

.margin_top_50 {
    margin-top: 50px;
}

@media (max-width: 768px) {
    .team_member img {
        width: 150px !important;
        height: 150px !important;
    }
    
    .stat_item h3 {
        font-size: 2em !important;
    }
}
</style>
</body>
</html>