<?php
// Connect DB
require_once 'config.php';

// Fetch expos
$expoStmt = $dbh->prepare("SELECT * FROM wiki_expos ORDER BY event_date DESC");
$expoStmt->execute();
$expos = $expoStmt->fetchAll(PDO::FETCH_ASSOC);

// Fetch research reports
$researchStmt = $dbh->prepare("SELECT * FROM wiki_research ORDER BY report_date DESC");
$researchStmt->execute();
$researches = $researchStmt->fetchAll(PDO::FETCH_ASSOC);

function normalize_media_src($path, $defaultPrefix = '') {
  $path = trim((string)$path);
  if ($path === '') {
    return '';
  }

  // Keep absolute/data URLs untouched.
  if (preg_match('/^(https?:)?\/\//i', $path) || stripos($path, 'data:') === 0) {
    return $path;
  }

  $path = str_replace('\\', '/', $path);
  $path = ltrim($path, '/');

  if ($defaultPrefix !== '') {
    $prefix = trim($defaultPrefix, '/') . '/';
    if (strpos($path, $prefix) !== 0) {
      $path = $prefix . $path;
    }
  }

  return $path;
}
?>
<!-- Swiper CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<style>
  *,
  body,
  html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Yeh bohot zaroori hai padding/width balance karne ke liye */
  }

  .home-expo-section {
    width: 100%;
    padding: 32px 16px 40px;
    background: #fafafa;
  }

  .home-expo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
  }

  .home-expo-row > * {
    min-width: 0;
  }

  .home-expo-left,
  .home-expo-right {
    flex: 1 1 48%;
    min-width: 300px;
  }

  /* Card styles */
  .expo-card,
  .research-item,
  .research-item-pdf {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* Thoda better shadow diya hai */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    /* 90% se 100% kar diya taaki swiper slide poori cover ho */
    padding: 15px;
    /* Research item ke liye default padding */
  }

  .expo-card {
    padding: 0;
    /* Expo card me image upar chahiye isliye yahan padding zero rakhi */
  }

  /* Image section */
  .expo-img-wrap {
    position: relative;
    overflow: hidden;
  }

  .expo-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
  }

  /* Badge */
  .expo-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    color: #fff;
    z-index: 2;
  }

  .badge-blue {
    background: #007bff;
  }

  .badge-black {
    background: #333;
  }

  .expo-card-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .expo-card-title-row,
  .research-meta-row,
  .research-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }

  .expo-flag,
  .research-flag {
    width: 24px;
    height: 16px;
    object-fit: contain;
  }

  .expo-card-title,
  .research-title {
    font-weight: bold;
    font-size: 15px;
    color: #333;
  }

  .expo-card-desc {
    font-size: 13px;
    color: #666;
    margin-bottom: 15px;
    flex-grow: 1;
    /* Yeh description ko jagah lene dega taaki footer neeche rahe */
  }

  .expo-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    font-size: 13px;
  }

  .status-blue {
    color: #007bff;
  }

  .status-grey {
    color: #666;
  }

  .expo-date,
  .research-date {
    color: #888;
    font-size: 12px;
  }

  /* PDF card specific fixes */
  .research-item-pdf {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: center;
    min-height: 170px;
  }

  .research-pdf-thumb {
    position: relative;
    width: 110px;
    /* Sahi width di hai */
    flex-shrink: 0;
  }

  .research-pdf-img {
    width: 100%;
    /* 1200px ki jagah 100% kiya hai */
    height: 140px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    /* Thoda gol corner */
  }

  .research-pdf-icon {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 28px;
  }

  .research-pdf-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .research-pdf-actions {
    margin: 12px 0;
  }

  /* Buttons */
  .research-btn {
    display: inline-block;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
    margin-right: 5px;
    text-decoration: none;
    transition: 0.2s ease;
    font-weight: bold;
  }

  .research-btn-green {
    background: #28a745;
    color: #fff;
  }

  .research-btn-green:hover {
    background: #218838;
  }

  .research-btn-outline {
    border: 1px solid #28a745;
    color: #28a745;
    background: transparent;
  }

  .research-btn-outline:hover {
    background: #28a745;
    color: #fff;
  }

  /* Swipers */
  /* Swipers */
  .expo-swiper {
    width: 100%;
    padding-bottom: 40px;
  }

  /* Vertical swiper ke liye height dena zaroori hai */
  .research-swiper {
    width: 100%;
    height: 370px;
    /* Yeh height Left side ke card ke barabar rakhegi dono ko */
    padding-bottom: 0;
  }

  .expo-header {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eaeaea;
  }

  .expo-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }

  /* Responsive tweaks */
  @media (max-width: 1024px) {

    .home-expo-left,
    .home-expo-right {
      flex: 1 1 100%;
    }

    .research-swiper {
      height: 320px;
    }
  }

  @media (max-width: 768px) {
    .home-expo-row {
      flex-direction: column;
      gap: 20px;
    }

    .home-expo-left,
    .home-expo-right {
      min-width: 0;
    }

    .expo-card,
    .research-item,
    .research-item-pdf {
      border-radius: 14px;
    }

    .research-item-pdf {
      flex-direction: column;
      align-items: flex-start;
      min-height: 0;
    }

    .research-pdf-thumb {
      width: 100%;
      max-width: 250px;
      margin: 0 auto 15px auto;
      /* Image ko center kiya mobile me */
    }

    .research-pdf-img {
      width: 100%;
      height: 120px;
      /* 140px se 120px kar diya taaki dabe nahi */
      object-fit: cover;
      display: block;
      border-radius: 8px;
    }

    .research-pdf-content {
      width: 100%;
      text-align: center;
    }

    .research-meta-row,
    .research-title-row {
      justify-content: center;
    }

    .expo-img {
      height: 170px;
    }

    .research-swiper {
      height: 290px;
    }

    .research-title-row,
    .research-meta-row {
      justify-content: center;
    }
  }

  @media (max-width: 480px) {
    .home-expo-section {
      padding: 20px 10px 28px;
    }

    .home-expo-row {
      gap: 16px;
    }

    .expo-header {
      margin-bottom: 14px;
      padding-bottom: 8px;
    }

    .expo-title {
      font-size: 16px;
    }

    .expo-card-content,
    .research-item {
      padding: 12px;
    }

    .expo-card-title,
    .research-title {
      font-size: 14px;
    }

    .expo-card-desc {
      font-size: 12px;
      margin-bottom: 12px;
    }

    .expo-card-footer {
      flex-direction: column;
      gap: 8px;
      align-items: flex-start;
    }

    .research-swiper {
      height: 250px;
    }

    .research-pdf-thumb {
      max-width: 100%;
    }

    .research-pdf-img {
      height: 110px;
    }

    .research-btn {
      padding: 6px 10px;
      font-size: 11px;
      margin-right: 4px;
    }
  }
</style>


<section class="home-expo-section">
  <div class="container">
    <div class="home-expo-row">

      <div class="home-expo-left">
        <div class="expo-header">
          <span class="expo-title">Trader Safety EXPO</span>
        </div>
        <div class="swiper expo-swiper">
          <div class="swiper-wrapper">
            <?php foreach ($expos as $expo): ?>
              <?php
                $expoImage = normalize_media_src($expo['image_url']);
                $expoFlag = normalize_media_src($expo['country_flag'], 'image');
              ?>
              <div class="swiper-slide">
                <div class="expo-card">
                  <div class="expo-img-wrap">
                    <img src="<?= htmlspecialchars($expoImage) ?>" alt="<?= htmlspecialchars($expo['location']) ?>" class="expo-img" />
                    <span class="expo-badge <?= htmlspecialchars($expo['badge_class']) ?>"><?= htmlspecialchars($expo['badge']) ?></span>
                  </div>
                  <div class="expo-card-content">
                    <div class="expo-card-title-row">
                      <img src="<?= htmlspecialchars($expoFlag) ?>" class="expo-flag" />
                      <span class="expo-card-title"><?= htmlspecialchars($expo['location']) ?></span>
                    </div>
                    <div class="expo-card-desc"><?= htmlspecialchars($expo['description']) ?></div>
                    <div class="expo-card-footer">
                      <span class="expo-date"><i class="far fa-clock"></i> <?= htmlspecialchars($expo['event_date']) ?></span>
                      <span class="expo-status <?= htmlspecialchars($expo['status_class']) ?>"><?= htmlspecialchars($expo['status']) ?></span>
                    </div>
                  </div>
                </div>
              </div>
            <?php endforeach; ?>
          </div>
        </div>
      </div>

      <div class="home-expo-right">
        <div class="expo-header">
          <span class="expo-title">Trader Safety Research</span>
        </div>
        <div class="swiper research-swiper">
          <div class="swiper-wrapper">
            <?php foreach ($researches as $res): ?>
              <?php
                $researchImage = normalize_media_src($res['image_url']);
                $researchFlag = normalize_media_src($res['flag_url'], 'image');
              ?>
              <div class="swiper-slide">
                <?php if ($res['has_pdf']): ?>
                  <div class="research-item research-item-pdf">
                    <div class="research-pdf-thumb">
                      <img src="<?= htmlspecialchars($researchImage) ?>" class="research-pdf-img" />
                      <img src="https://resources1.interface003.com/web20/img/download/pdficon.svg" class="research-pdf-icon" />
                    </div>
                    <div class="research-pdf-content">
                      <span class="research-title"><?= htmlspecialchars($res['title']) ?></span>
                      <div class="research-pdf-actions">
                        <a class="research-btn research-btn-green" href="<?= htmlspecialchars($res['pdf_url']) ?>" target="_blank">View</a>
                        <a class="research-btn research-btn-outline" href="<?= htmlspecialchars($res['pdf_url']) ?>" download>Download</a>
                      </div>
                      <div class="research-meta-row">
                        <img src="<?= htmlspecialchars($researchFlag) ?>" class="research-flag" />
                        <span class="research-country"><?= htmlspecialchars($res['country']) ?></span>
                        <span class="research-date"><i class="far fa-clock"></i> <?= htmlspecialchars($res['report_date']) ?></span>
                      </div>
                    </div>
                  </div>
                <?php else: ?>
                  <div class="research-item">
                    <div class="research-title-row">
                      <span class="research-title"><?= htmlspecialchars($res['title']) ?></span>
                      <span class="research-date"><i class="far fa-clock"></i> <?= htmlspecialchars($res['report_date']) ?></span>
                    </div>
                    <div class="research-meta-row">
                      <img src="<?= htmlspecialchars($researchFlag) ?>" class="research-flag" />
                      <span class="research-country"><?= htmlspecialchars($res['country']) ?></span>
                    </div>
                  </div>
                <?php endif; ?>
              </div>
            <?php endforeach; ?>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

<script>
  // Left Side (EXPO) - Horizontal
  const expoSwiper = new Swiper('.expo-swiper', {
    slidesPerView: 1,
    spaceBetween: 20,
    loop: true,
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },
    pagination: {
      el: '.expo-swiper .swiper-pagination',
      clickable: true,
    },
  });

  // Right Side (Research) - Vertical & Downward
  const researchSwiper = new Swiper('.research-swiper', {
    direction: 'vertical', // Slide up/down
    slidesPerView: 2, // Ek baar mein 2 cards dikhenge (1 ke niche 1)
    spaceBetween: 20, // Dono cards ke beech ka gap
    loop: true,
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
      reverseDirection: true, // Yeh downward slide karwayega (top to bottom)
    },
    breakpoints: {
      0: {
        slidesPerView: 1,
        spaceBetween: 14,
      },
      769: {
        slidesPerView: 2,
        spaceBetween: 20,
      },
    },
  });
</script>