<?php
declare(strict_types=1);

require_once __DIR__ . "/config/db.php";
function e($s): string { return htmlspecialchars((string)$s, ENT_QUOTES, 'UTF-8'); }

/* Fayl yolu helper:
   cover/pdf_file DB-də sadəcə fayl adıdırsa -> prefiks əlavə edirik.
   Əgər artıq / ilə başlayırsa və ya http-dirsə -> olduğu kimi saxlayırıq.
*/
function file_url(string $base, ?string $name): string {
  $name = trim((string)$name);
  if ($name === '') return '';
  if (preg_match('~^(https?://|/)~i', $name)) return $name;
  return rtrim($base, '/') . '/' . ltrim($name, '/');
}

/* Sən öz serverində jurnalların harada saxlandığını bilirsən:
   upload.php hansı qovluğa yazırsa, buranı ona uyğun et.
*/
$COVER_BASE = "/v2/uploads/journals";  // lazım olsa dəyiş: /v2/img/journals
$PDF_BASE   = "/v2/uploads/journals";  // lazım olsa dəyiş: /v2/files/journals

$stmt = $pdo->query("
  SELECT id, title, slug, cover, pdf_file, created_at
  FROM journals
  WHERE is_active = 1
  ORDER BY created_at DESC, id DESC
");
$jurnals = $stmt->fetchAll(PDO::FETCH_ASSOC) ?: [];

$page_title = "Jurnal";
?>

<?php include __DIR__ . "/header.php"; ?>

<!-- PAGE HEADER -->
<section class="page-header" style="background-image:url('/v2/img/ortho-bg.jpg');">
  <div class="page-header__overlay"></div>
  <div class="container page-header__content">
    <h1 class="page-title">Jurnal</h1>

    <nav class="breadcrumb" aria-label="breadcrumb">
      <a class="breadcrumb__link" href="/v2/">Ana səhifə</a>
      <span class="breadcrumb__sep">/</span>
      <span class="breadcrumb__link">Jurnal</span>
    </nav>
  </div>
</section>

<section class="container" style="max-width:960px; padding:40px 0;">
  <?php if (!$jurnals): ?>
    <div class="content-area">Hələ jurnal əlavə edilməyib.</div>
  <?php else: ?>

    <!-- 2 KOLUM: SOL 70% (mövcud content) + SAĞ 30% (maddələr) -->
    <div class="jr-2col">

      <!-- SOL -->
      <div class="jr-left">

        <div style="display:grid; grid-template-columns: repeat(3, 1fr); gap:16px;">
          <?php foreach ($jurnals as $j): ?>
            <?php
              $id    = (int)($j['id'] ?? 0);
              $title = (string)($j['title'] ?? 'Jurnal');
              $cover = file_url($COVER_BASE, $j['cover'] ?? '');
              $pdf   = file_url($PDF_BASE, $j['pdf_file'] ?? '');
            ?>
            <article style="border:1px solid rgba(0,0,0,.08); border-radius:16px; overflow:hidden; background:#fff;">
              <a href="/v2/jurnal_detal.php?id=<?= $id ?>" style="display:block;">
                <div style="aspect-ratio: 4/5; background: rgba(0,0,0,.04); overflow:hidden;">
                  <?php if ($cover !== ''): ?>
                    <img src="<?= e($cover) ?>" alt="<?= e($title) ?>" style="width:100%; height:100%; object-fit:cover; display:block;">
                  <?php else: ?>
                    <div style="width:100%; height:100%; display:grid; place-items:center; color:#6b7a90;">
                      Cover yoxdur
                    </div>
                  <?php endif; ?>
                </div>
              </a>

              <div style="padding:14px;">
                <div style="font-weight:700; line-height:1.25; margin-bottom:10px;">
                  <?= e($title) ?>
                </div>

                <div style="display:flex; gap:10px; align-items:center; flex-wrap:wrap;">
                  <a class="btn" href="/v2/jurnal_detal.php?id=<?= $id ?>">Bax</a>

                  <?php if ($pdf !== ''): ?>
                    <a class="btn" href="<?= e($pdf) ?>" target="_blank" rel="noopener">PDF aç</a>
                  <?php endif; ?>
                </div>
              </div>
            </article>
          <?php endforeach; ?>
        </div>

        <!-- mobil üçün grid -->
        <style>
          @media (max-width: 900px){
            .container > div[style*="grid-template-columns"]{ grid-template-columns: repeat(2, 1fr) !important; }
          }
          @media (max-width: 560px){
            .container > div[style*="grid-template-columns"]{ grid-template-columns: 1fr !important; }
          }
        </style>

      </div>

      <!-- SAĞ -->
      <aside class="jr-right">
        <div class="jr-box">
          <div class="jr-link"><a href="/v2/br1.php">BAŞ REDAKTORDAN №1</a></div><hr>
          <div class="jr-link"><a href="/v2/br2.php">BAŞ REDAKTORDAN №2</a></div><hr>
          <div class="jr-link"><a href="/v2/br3.php">BAŞ REDAKTORDAN №3</a></div><hr>
          <div class="jr-link"><a href="/v2/br4.php">BAŞ REDAKTORDAN №4</a></div><hr>

         
          <div class="jr-link"><a href="/v2/redaksiya.php">REDAKSİYA HEYƏTİ / EDITORIAL BOARD</a></div>

          <hr>

          <div class="jr-link"><a href="/v2/mqaze.php">Məqalələr üçün tələblər</a></div><hr>
          <div class="jr-link"><a href="/v2/mqtur.php">Yayınlar için gereksinimler</a></div><hr>
          <div class="jr-link"><a href="/v2/mqrus.php">Требования к публикациям</a></div><hr>
          <div class="jr-link"><a href="/v2/mqeng.php">Requirements for publications</a></div>
        </div>
      </aside>

    </div>

    <!-- Mövcud CSS qalır, sadəcə 2 kolum üçün minimal əlavə -->
    <style>
      .jr-2col{
        display:flex;
        gap:20px;
        align-items:flex-start;
      }
      .jr-left{ width:70%; }
      .jr-right{ width:30%; }

      .jr-box{
        border:1px solid rgba(0,0,0,.08);
        border-radius:14px;
        padding:14px;
        background:#fff;
      }
      .jr-link{
        padding:8px 4px;
        font-weight:600;
      }
      .jr-box hr{
        border:none;
        border-top:1px solid rgba(0,0,0,.08);
        margin:10px 0;
      }

      @media (max-width: 900px){
        .jr-2col{ flex-direction:column; }
        .jr-left, .jr-right{ width:100%; }
      }
    </style>

  <?php endif; ?>
</section>

<?php include __DIR__ . "/footer.php"; ?>