<?php
use App\Modules\News\Models\NewsArticle;
$__template->layout('Layout.main');
?>
<?php $__template->section('title'); ?>الأخبار<?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/news/create" class="btn btn-primary"><i data-lucide="plus" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> إضافة خبر جديد</a>
<?php $__template->endSection(); ?>

<?php $__template->section('content'); ?>

<!-- Filters -->
<div class="card" style="margin-bottom:20px;padding:15px 20px;">
    <form method="GET" action="/news" style="display:flex;flex-wrap:wrap;gap:10px;align-items:end;">
        <div style="flex:1;min-width:200px;">
            <label class="form-label" style="font-size:12px;">بحث</label>
            <input type="text" name="q" value="<?= e($filters['q'] ?? '') ?>" placeholder="ابحث بالعنوان..." class="form-input">
        </div>
        <div style="min-width:150px;">
            <label class="form-label" style="font-size:12px;">الفئة</label>
            <select name="category" class="form-select">
                <option value="">الكل</option>
                <?php foreach ($categories as $key => $label): ?>
                <option value="<?= e($key) ?>" <?= ($filters['category'] ?? '') === $key ? 'selected' : '' ?>><?= e($label) ?></option>
                <?php endforeach; ?>
            </select>
        </div>
        <div style="min-width:150px;">
            <label class="form-label" style="font-size:12px;">حالة النشر</label>
            <select name="is_published" class="form-select">
                <option value="">الكل</option>
                <option value="1" <?= ($filters['is_published'] ?? '') === '1' ? 'selected' : '' ?>>منشور</option>
                <option value="0" <?= ($filters['is_published'] ?? '') === '0' ? 'selected' : '' ?>>مسودة</option>
            </select>
        </div>
        <button type="submit" class="btn btn-outline"><i data-lucide="search" style="width:16px;height:16px;vertical-align:middle;"></i> بحث</button>
        <a href="/news" class="btn btn-sm btn-outline" style="color:#6B7280;">مسح</a>
    </form>
</div>

<!-- Articles Grid -->
<?php if (!empty($articles)): ?>
<div style="display:grid;grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));gap:20px;margin-bottom:20px;">
    <?php foreach ($articles as $article):
        $catColor = NewsArticle::getCategoryColor($article['category'] ?? 'general');
        $catLabel = $categories[$article['category'] ?? 'general'] ?? 'عام';
        $isPublished = (int) ($article['is_published'] ?? 0);
    ?>
    <a href="/news/<?= (int) $article['id'] ?>" style="text-decoration:none;color:inherit;">
        <div class="card" style="overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;height:100%;">
            <?php if (!empty($article['cover_image_path'])): ?>
            <div style="height:180px;background:url('<?= e($article['cover_image_path']) ?>') center/cover no-repeat;"></div>
            <?php else: ?>
            <div style="height:80px;background:linear-gradient(135deg, <?= $catColor ?>20, <?= $catColor ?>05);display:flex;align-items:center;justify-content:center;">
                <i data-lucide="newspaper" style="width:32px;height:32px;color:<?= $catColor ?>;opacity:0.5;"></i>
            </div>
            <?php endif; ?>

            <div style="padding:20px;">
                <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
                    <span style="display:inline-block;padding:2px 10px;border-radius:10px;font-size:11px;font-weight:600;background:<?= $catColor ?>15;color:<?= $catColor ?>;"><?= e($catLabel) ?></span>
                    <?php if ($isPublished): ?>
                    <span style="display:inline-block;padding:2px 10px;border-radius:10px;font-size:11px;font-weight:600;background:#D1FAE5;color:#10B981;">منشور</span>
                    <?php else: ?>
                    <span style="display:inline-block;padding:2px 10px;border-radius:10px;font-size:11px;font-weight:600;background:#F3F4F6;color:#6B7280;">مسودة</span>
                    <?php endif; ?>
                </div>

                <h3 style="margin:0 0 8px;font-size:16px;font-weight:700;color:#1A1A2E;line-height:1.4;"><?= e($article['title_ar']) ?></h3>

                <p style="margin:0;font-size:13px;color:#6B7280;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">
                    <?= e(mb_substr(strip_tags($article['body_ar']), 0, 120)) ?>...
                </p>

                <div style="margin-top:12px;font-size:11px;color:#9CA3AF;">
                    <?= e($article['created_at'] ?? '') ?>
                </div>
            </div>
        </div>
    </a>
    <?php endforeach; ?>
</div>

<!-- Pagination -->
<?php if (isset($pagination) && $pagination['last_page'] > 1): ?>
<div style="display:flex;justify-content:center;gap:5px;margin-top:20px;">
    <?php for ($p = 1; $p <= $pagination['last_page']; $p++): ?>
    <a href="/news?page=<?= $p ?><?= ($filters['q'] ?? '') !== '' ? '&q=' . urlencode($filters['q']) : '' ?><?= ($filters['category'] ?? '') !== '' ? '&category=' . urlencode($filters['category']) : '' ?><?= ($filters['is_published'] ?? '') !== '' ? '&is_published=' . urlencode((string) $filters['is_published']) : '' ?>"
       class="btn btn-sm <?= $p === ($pagination['current_page'] ?? 1) ? 'btn-primary' : 'btn-outline' ?>"
       style="min-width:36px;text-align:center;">
        <?= $p ?>
    </a>
    <?php endfor; ?>
</div>
<?php endif; ?>

<?php else: ?>
<div class="card" style="padding:60px;text-align:center;">
    <i data-lucide="newspaper" style="width:48px;height:48px;color:#D1D5DB;margin:0 auto 15px;display:block;"></i>
    <p style="color:#6B7280;font-size:16px;margin-bottom:15px;">لا توجد أخبار حتى الآن</p>
    <a href="/news/create" class="btn btn-primary">إضافة أول خبر</a>
</div>
<?php endif; ?>

<?php $__template->endSection(); ?>
