<?php
// views/partials/course-card.php

require_once __DIR__ . '/../../src/Helpers/Language.php';

$lang = Language::current();
$currency = Language::currency();
$symbol = Language::currencySymbol();

$title = $lang === 'ar' ? $course['title_ar'] : $course['title_en'];
$desc = $lang === 'ar' ? $course['description_ar'] : $course['description_en'];
$category = $lang === 'ar' ? $course['category_ar'] : $course['category_en'];
$instructor = $lang === 'ar' ? $course['instructor_ar'] : $course['instructor_en'];
$duration = $lang === 'ar' ? $course['duration_ar'] : $course['duration_en'];
$modules = $lang === 'ar' ? $course['modules_ar'] : $course['modules_en'];
$price = $currency === 'USD' ? $course['price_usd'] : $course['price_ngn'];

$isEnrolled = isset($enrolledCourseIds) && in_array($course['id'], $enrolledCourseIds);
?>

<div class="bg-white rounded-2xl shadow-md hover:shadow-xl transition-all border border-gray-150 overflow-hidden flex flex-col h-full group" dir="<?= Language::dir() ?>">
  
  <!-- Image Header -->
  <div class="relative overflow-hidden aspect-video">
    <img src="<?= htmlspecialchars($course['image']) ?>" alt="<?= htmlspecialchars($title) ?>" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
    <div class="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent opacity-60"></div>
    <span class="absolute top-3 left-3 bg-teal-900/90 backdrop-blur-md text-white text-[10px] font-bold px-3 py-1 rounded-full uppercase tracking-wider">
      <?= htmlspecialchars($category) ?>
    </span>
  </div>

  <!-- Content Body -->
  <div class="p-5 flex-1 flex flex-col justify-between space-y-4">
    <div class="space-y-2">
      <p class="text-xs text-amber-600 font-semibold">
        <?= Language::t('instructor') ?>: <span class="text-gray-700"><?= htmlspecialchars($instructor) ?></span>
      </p>
      <h3 class="font-bold text-gray-900 text-base md:text-lg leading-snug group-hover:text-teal-700 transition-colors line-clamp-2">
        <?= htmlspecialchars($title) ?>
      </h3>
      <p class="text-xs text-gray-500 leading-relaxed line-clamp-2">
        <?= htmlspecialchars($desc) ?>
      </p>
    </div>

    <!-- Rating & Duration -->
    <div class="flex items-center justify-between text-xs text-gray-500 border-t border-b border-gray-100 py-2.5">
      <div class="flex items-center gap-1">
        <span class="text-amber-500 font-bold">★ <?= number_format($course['rating'], 1) ?></span>
        <span class="text-gray-400">(<?= $course['reviews_count'] ?> <?= Language::t('reviews') ?>)</span>
      </div>
      <div class="font-semibold text-teal-700">
        ⏱ <?= htmlspecialchars($duration) ?>
      </div>
    </div>

    <!-- Modules Collapsible preview -->
    <details class="text-xs text-gray-600 bg-gray-50 p-2.5 rounded-xl border border-gray-100 cursor-pointer">
      <summary class="font-bold text-teal-800 focus:outline-none">
        <?= Language::t('courseDetails') ?> (<?= count($modules) ?> <?= $lang === 'ar' ? 'فصول' : 'Modules' ?>)
      </summary>
      <ul class="mt-2 space-y-1 text-[11px] text-gray-500">
        <?php foreach ($modules as $mod): ?>
          <li class="flex items-start gap-1">
            <span class="text-teal-600 font-bold">✓</span>
            <span class="line-clamp-1"><?= htmlspecialchars($mod) ?></span>
          </li>
        <?php endforeach; ?>
      </ul>
    </details>

    <!-- Bottom Pricing & Action Button -->
    <div class="flex items-center justify-between gap-4 pt-2 mt-auto">
      <div>
        <span class="text-[10px] text-gray-400 block uppercase font-bold tracking-wider">
          <?= $lang === 'ar' ? 'الرسوم الدراسية' : 'Tuition Fee' ?>
        </span>
        <span class="text-lg font-black text-teal-900">
          <?= $symbol ?><?= number_format($price) ?>
        </span>
      </div>

      <?php if ($isEnrolled): ?>
        <a href="index.php?page=portal" class="bg-emerald-100 border border-emerald-300 text-emerald-800 text-xs font-bold py-2.5 px-4 rounded-xl flex items-center gap-1 shadow-sm">
          <span>✓</span>
          <span><?= $lang === 'ar' ? 'مسجل (افتح البوابة)' : 'Enrolled (Portal)' ?></span>
        </a>
      <?php else: ?>
        <button onclick="openPaystackModal('<?= $course['id'] ?>', '<?= addslashes(htmlspecialchars($title)) ?>', <?= $price ?>)" class="bg-teal-700 hover:bg-teal-800 text-white font-bold text-xs py-2.5 px-4 rounded-xl shadow-md transition-all">
          <?= Language::t('enrollNow') ?>
        </button>
      <?php endif; ?>
    </div>

  </div>
</div>
