<?php
use App\Modules\Disciplines\Models\SportDiscipline;
$__template->layout('Layout.main');
?>
<?php $__template->section('title'); ?><?= e($discipline->name_ar) ?><?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/disciplines/<?= (int) $discipline->id ?>/edit" class="btn btn-outline"><i data-lucide="edit-3" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> تعديل</a>
<a href="/disciplines" class="btn btn-outline"><i data-lucide="arrow-right" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> العودة للقائمة</a>
<?php $__template->endSection(); ?>

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

<?php
$catColor = SportDiscipline::getCategoryColor($discipline->category ?? '');
$catLabel = SportDiscipline::getCategoryLabel($discipline->category ?? '');
$isActive = (int) $discipline->is_active;
?>

<!-- Header Card -->
<div class="card" style="margin-bottom:20px;overflow:hidden;">
    <div style="padding:25px;display:flex;align-items:start;gap:20px;">
        <div style="width:72px;height:72px;border-radius:16px;background:linear-gradient(135deg, <?= $catColor ?>15, <?= $catColor ?>30);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
            <i data-lucide="<?= e($discipline->icon ?? 'activity') ?>" style="width:36px;height:36px;color:<?= $catColor ?>;"></i>
        </div>
        <div style="flex:1;">
            <div style="display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap;">
                <h2 style="margin:0;font-size:22px;font-weight:700;color:#1A1A2E;"><?= e($discipline->name_ar) ?></h2>
                <?php if ($isActive): ?>
                <span class="badge" style="background:#ECFDF5;color:#059669;font-size:12px;padding:4px 12px;border-radius:12px;font-weight:600;">فعّال</span>
                <?php else: ?>
                <span class="badge" style="background:#FEE2E2;color:#DC2626;font-size:12px;padding:4px 12px;border-radius:12px;font-weight:600;">معطّل</span>
                <?php endif; ?>
            </div>
            <?php if ($discipline->name_en): ?>
            <div style="font-size:14px;color:#6B7280;margin-bottom:8px;"><?= e($discipline->name_en) ?></div>
            <?php endif; ?>
            <div style="display:flex;gap:12px;flex-wrap:wrap;font-size:13px;color:#6B7280;">
                <span style="display:inline-flex;align-items:center;gap:4px;">
                    <i data-lucide="tag" style="width:14px;height:14px;"></i>
                    <code style="font-size:11px;background:#F3F4F6;padding:1px 6px;border-radius:4px;"><?= e($discipline->code) ?></code>
                </span>
                <span style="display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:10px;font-size:12px;font-weight:600;background:<?= $catColor ?>15;color:<?= $catColor ?>;">
                    <?= e($catLabel) ?>
                </span>
                <span style="display:inline-flex;align-items:center;gap:4px;">
                    <i data-lucide="arrow-up-down" style="width:14px;height:14px;"></i>
                    ترتيب: <?= (int) $discipline->sort_order ?>
                </span>
            </div>
            <?php if ($discipline->description_ar): ?>
            <p style="margin:12px 0 0;font-size:14px;color:#4B5563;line-height:1.7;"><?= e($discipline->description_ar) ?></p>
            <?php endif; ?>
        </div>
        <div style="flex-shrink:0;">
            <form method="POST" action="/disciplines/<?= (int) $discipline->id ?>/toggle" style="display:inline;">
                <?= csrf_field() ?>
                <?php if ($isActive): ?>
                <button type="submit" class="btn btn-outline" style="color:#DC2626;border-color:#DC2626;" onclick="return confirm('هل أنت متأكد من إيقاف هذا النشاط؟')">
                    <i data-lucide="pause-circle" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> إيقاف
                </button>
                <?php else: ?>
                <button type="submit" class="btn btn-primary" onclick="return confirm('هل أنت متأكد من تفعيل هذا النشاط؟')">
                    <i data-lucide="play-circle" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> تفعيل
                </button>
                <?php endif; ?>
            </form>
        </div>
    </div>
</div>

<!-- Stats Cards Row -->
<div style="display:grid;grid-template-columns:repeat(2, 1fr);gap:15px;margin-bottom:20px;">
    <div class="card" style="padding:20px;text-align:center;">
        <div style="font-size:28px;font-weight:700;color:#0284C7;">0</div>
        <div style="font-size:12px;color:#6B7280;margin-top:4px;">لاعب مسجل</div>
    </div>
    <div class="card" style="padding:20px;text-align:center;">
        <div style="font-size:28px;font-weight:700;color:#D97706;">0</div>
        <div style="font-size:12px;color:#6B7280;margin-top:4px;">أكاديمية</div>
    </div>
</div>

<!-- Additional Config -->
<?php
$requiresMedical = !empty($config['requires_medical_cert']);
$guardianAge = $config['requires_guardian_consent_under'] ?? null;
$maxPlayers = $config['max_players_per_session'] ?? null;
$hasExtraConfig = $requiresMedical || $guardianAge || $maxPlayers;
?>
<?php if ($hasExtraConfig): ?>
<div class="card" style="margin-bottom:20px;">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
        <i data-lucide="settings" style="width:18px;height:18px;color:#D97706;"></i>
        <h3 style="margin:0;color:#D97706;font-size:15px;">إعدادات إضافية</h3>
    </div>
    <div style="padding:20px;">
        <div style="display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:15px;">
            <?php if ($requiresMedical): ?>
            <div style="padding:15px;background:#FEF2F2;border-radius:10px;display:flex;align-items:center;gap:10px;">
                <i data-lucide="heart-pulse" style="width:20px;height:20px;color:#DC2626;"></i>
                <div>
                    <div style="font-size:13px;font-weight:600;color:#DC2626;">شهادة طبية مطلوبة</div>
                    <div style="font-size:11px;color:#6B7280;">يجب تقديم شهادة طبية للتسجيل</div>
                </div>
            </div>
            <?php endif; ?>
            <?php if ($guardianAge): ?>
            <div style="padding:15px;background:#FFF7ED;border-radius:10px;display:flex;align-items:center;gap:10px;">
                <i data-lucide="shield-check" style="width:20px;height:20px;color:#D97706;"></i>
                <div>
                    <div style="font-size:13px;font-weight:600;color:#D97706;">موافقة ولي الأمر</div>
                    <div style="font-size:11px;color:#6B7280;">مطلوبة لمن هم أقل من <?= (int) $guardianAge ?> سنة</div>
                </div>
            </div>
            <?php endif; ?>
            <?php if ($maxPlayers): ?>
            <div style="padding:15px;background:#EFF6FF;border-radius:10px;display:flex;align-items:center;gap:10px;">
                <i data-lucide="users" style="width:20px;height:20px;color:#0284C7;"></i>
                <div>
                    <div style="font-size:13px;font-weight:600;color:#0284C7;">الحد الأقصى للاعبين</div>
                    <div style="font-size:11px;color:#6B7280;"><?= (int) $maxPlayers ?> لاعب لكل حصة</div>
                </div>
            </div>
            <?php endif; ?>
        </div>
    </div>
</div>
<?php endif; ?>

<!-- Metadata -->
<div class="card" style="margin-bottom:20px;">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
        <i data-lucide="info" style="width:18px;height:18px;color:#6B7280;"></i>
        <h3 style="margin:0;color:#6B7280;font-size:15px;">معلومات النظام</h3>
    </div>
    <div style="padding:15px 20px;">
        <table style="width:100%;font-size:13px;">
            <tr>
                <td style="padding:6px 0;color:#6B7280;width:30%;">رقم السجل</td>
                <td style="padding:6px 0;font-weight:600;">#<?= (int) $discipline->id ?></td>
            </tr>
            <?php if ($discipline->created_at): ?>
            <tr>
                <td style="padding:6px 0;color:#6B7280;">تاريخ الإنشاء</td>
                <td style="padding:6px 0;"><?= e($discipline->created_at) ?></td>
            </tr>
            <?php endif; ?>
            <?php if ($discipline->updated_at): ?>
            <tr>
                <td style="padding:6px 0;color:#6B7280;">آخر تحديث</td>
                <td style="padding:6px 0;"><?= e($discipline->updated_at) ?></td>
            </tr>
            <?php endif; ?>
        </table>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }
});
</script>
<?php $__template->endSection(); ?>
