<?php
use App\Modules\Academies\Models\Academy;
use App\Modules\Academies\Models\AcademySchedule;
$__template->layout('Layout.main');
?>
<?php $__template->section('title'); ?><?= e($academy->name_ar) ?><?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<?php if (can('sa.academy.manage')): ?>
<a href="/academies/<?= (int) $academy->id ?>/edit" class="btn btn-outline"><i data-lucide="edit-3" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> تعديل</a>
<?php endif; ?>
<a href="/academies" 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
$typeColor = Academy::getTypeColor($academy->academy_type ?? '');
$typeLabel = Academy::getTypeLabel($academy->academy_type ?? '');
$isActive = (int) $academy->is_active;
$ageMin = $config['age_min'] ?? null;
$ageMax = $config['age_max'] ?? null;
$capacity = $config['capacity'] ?? null;
$dayLabels = AcademySchedule::getDayLabels();
?>

<!-- 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, <?= $typeColor ?>15, <?= $typeColor ?>30);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
            <i data-lucide="graduation-cap" style="width:36px;height:36px;color:<?= $typeColor ?>;"></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($academy->name_ar) ?></h2>
                <span style="display:inline-block;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600;background:<?= $typeColor ?>15;color:<?= $typeColor ?>;"><?= e($typeLabel) ?></span>
                <?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 ($academy->name_en): ?>
            <div style="font-size:14px;color:#6B7280;margin-bottom:8px;"><?= e($academy->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($academy->code) ?></code>
                </span>
                <?php if (!empty($discipline)): ?>
                <a href="/disciplines/<?= (int) $discipline->id ?>" style="display:inline-flex;align-items:center;gap:4px;color:#0D7377;text-decoration:none;">
                    <i data-lucide="activity" style="width:14px;height:14px;"></i>
                    <?= e($discipline->name_ar ?? '') ?>
                </a>
                <?php endif; ?>
                <span style="display:inline-flex;align-items:center;gap:4px;">
                    <i data-lucide="arrow-up-down" style="width:14px;height:14px;"></i>
                    ترتيب: <?= (int) $academy->sort_order ?>
                </span>
            </div>
            <?php if ($academy->description_ar): ?>
            <p style="margin:12px 0 0;font-size:14px;color:#4B5563;line-height:1.7;"><?= e($academy->description_ar) ?></p>
            <?php endif; ?>
        </div>
        <div style="flex-shrink:0;">
            <form method="POST" action="/academies/<?= (int) $academy->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(4, 1fr);gap:15px;margin-bottom:20px;">
    <div class="card" style="padding:20px;text-align:center;">
        <div style="font-size:28px;font-weight:700;color:#0D7377;"><?= count($levels) ?></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:#7C3AED;">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:#0284C7;"><?= count($schedules) ?></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;">
            <?php if ($ageMin !== null && $ageMax !== null): ?>
            <?= (int) $ageMin ?> - <?= (int) $ageMax ?>
            <?php else: ?>
            —
            <?php endif; ?>
        </div>
        <div style="font-size:12px;color:#6B7280;margin-top:4px;">الفئة العمرية</div>
    </div>
</div>

<!-- Config Card -->
<?php
$hasConfig = $ageMin !== null || $ageMax !== null || $capacity !== null;
?>
<?php if ($hasConfig): ?>
<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 ($ageMin !== null): ?>
            <div style="padding:15px;background:#EFF6FF;border-radius:10px;display:flex;align-items:center;gap:10px;">
                <i data-lucide="user-check" 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) $ageMin ?> سنة</div>
                </div>
            </div>
            <?php endif; ?>
            <?php if ($ageMax !== null): ?>
            <div style="padding:15px;background:#FFF7ED;border-radius:10px;display:flex;align-items:center;gap:10px;">
                <i data-lucide="user-x" 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) $ageMax ?> سنة</div>
                </div>
            </div>
            <?php endif; ?>
            <?php if ($capacity !== null): ?>
            <div style="padding:15px;background:#ECFDF5;border-radius:10px;display:flex;align-items:center;gap:10px;">
                <i data-lucide="users" style="width:20px;height:20px;color:#059669;"></i>
                <div>
                    <div style="font-size:13px;font-weight:600;color:#059669;">السعة الاستيعابية</div>
                    <div style="font-size:11px;color:#6B7280;"><?= (int) $capacity ?> لاعب</div>
                </div>
            </div>
            <?php endif; ?>
        </div>
    </div>
</div>
<?php endif; ?>

<!-- Levels Section -->
<div class="card" style="margin-bottom:20px;">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between;">
        <div style="display:flex;align-items:center;gap:8px;">
            <i data-lucide="layers" style="width:18px;height:18px;color:#0D7377;"></i>
            <h3 style="margin:0;color:#0D7377;font-size:15px;">المستويات</h3>
        </div>
        <button type="button" class="btn btn-sm btn-outline" id="toggleAddLevelBtn" onclick="toggleAddLevel()">
            <i data-lucide="plus" style="width:14px;height:14px;vertical-align:middle;"></i> إضافة مستوى
        </button>
    </div>

    <!-- Add Level Inline Form (hidden by default) -->
    <div id="addLevelForm" style="display:none;padding:20px;background:#F9FAFB;border-bottom:1px solid #E5E7EB;">
        <form method="POST" action="/academies/<?= (int) $academy->id ?>/levels">
            <?= csrf_field() ?>
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;">
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">الاسم بالعربي <span style="color:#DC2626;">*</span></label>
                    <input type="text" name="name_ar" class="form-input" required placeholder="مثال: مبتدئ">
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">الاسم بالإنجليزي</label>
                    <input type="text" name="name_en" class="form-input" placeholder="e.g. Beginner" style="direction:ltr;text-align:left;">
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">الكود</label>
                    <input type="text" name="code" class="form-input" placeholder="مثال: LVL01" style="direction:ltr;text-align:left;text-transform:uppercase;">
                </div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:15px;margin-top:15px;">
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">ترتيب المستوى</label>
                    <input type="number" name="level_order" class="form-input" value="0" min="0" style="direction:ltr;text-align:left;">
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">من سن</label>
                    <input type="number" name="age_min" class="form-input" min="0" max="99" placeholder="0" style="direction:ltr;text-align:left;">
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">إلى سن</label>
                    <input type="number" name="age_max" class="form-input" min="0" max="99" placeholder="99" style="direction:ltr;text-align:left;">
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">الحد الأقصى</label>
                    <input type="number" name="max_capacity" class="form-input" min="1" placeholder="30" style="direction:ltr;text-align:left;">
                </div>
            </div>
            <div style="margin-top:15px;display:flex;gap:8px;">
                <button type="submit" class="btn btn-primary" style="font-size:13px;padding:8px 20px;">
                    <i data-lucide="check" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> حفظ المستوى
                </button>
                <button type="button" class="btn btn-outline" style="font-size:13px;padding:8px 20px;" onclick="toggleAddLevel()">إلغاء</button>
            </div>
        </form>
    </div>

    <?php if (!empty($levels)): ?>
    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr>
                    <th>الترتيب</th>
                    <th>الكود</th>
                    <th>الاسم بالعربي</th>
                    <th>الاسم بالإنجليزي</th>
                    <th>الفئة العمرية</th>
                    <th>الحد الأقصى</th>
                    <th style="width:60px;"></th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($levels as $level): ?>
                <tr>
                    <td style="text-align:center;font-weight:600;"><?= (int) ($level['level_order'] ?? 0) ?></td>
                    <td><code style="font-size:11px;background:#F3F4F6;padding:2px 6px;border-radius:4px;"><?= e($level['code'] ?? '') ?></code></td>
                    <td style="font-weight:600;"><?= e($level['name_ar'] ?? '') ?></td>
                    <td style="color:#6B7280;direction:ltr;text-align:left;"><?= e($level['name_en'] ?? '') ?></td>
                    <td style="text-align:center;">
                        <?php if (isset($level['age_min']) && isset($level['age_max'])): ?>
                        <?= (int) $level['age_min'] ?> - <?= (int) $level['age_max'] ?>
                        <?php else: ?>
                        —
                        <?php endif; ?>
                    </td>
                    <td style="text-align:center;"><?= isset($level['max_capacity']) ? (int) $level['max_capacity'] : '—' ?></td>
                    <td>
                        <form method="POST" action="/academies/<?= (int) $academy->id ?>/levels/remove" style="display:inline;">
                            <?= csrf_field() ?>
                            <input type="hidden" name="level_id" value="<?= (int) $level['id'] ?>">
                            <button type="submit" class="btn btn-sm" style="color:#DC2626;padding:4px 8px;border:1px solid #FCA5A5;border-radius:6px;background:#FEF2F2;cursor:pointer;" onclick="return confirm('هل أنت متأكد من حذف هذا المستوى؟')">
                                <i data-lucide="trash-2" style="width:14px;height:14px;"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
    <?php else: ?>
    <div style="padding:30px;text-align:center;color:#9CA3AF;font-size:14px;">
        <i data-lucide="info" style="width:20px;height:20px;margin-bottom:8px;"></i>
        <div>لم يتم إضافة مستويات بعد</div>
    </div>
    <?php endif; ?>
</div>

<!-- Schedules Section -->
<div class="card" style="margin-bottom:20px;">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between;">
        <div style="display:flex;align-items:center;gap:8px;">
            <i data-lucide="calendar-clock" style="width:18px;height:18px;color:#7C3AED;"></i>
            <h3 style="margin:0;color:#7C3AED;font-size:15px;">جدول التدريب</h3>
        </div>
        <button type="button" class="btn btn-sm btn-outline" id="toggleAddScheduleBtn" onclick="toggleAddSchedule()">
            <i data-lucide="plus" style="width:14px;height:14px;vertical-align:middle;"></i> إضافة جدول
        </button>
    </div>

    <!-- Add Schedule Inline Form (hidden by default) -->
    <div id="addScheduleForm" style="display:none;padding:20px;background:#F9FAFB;border-bottom:1px solid #E5E7EB;">
        <form method="POST" action="/academies/<?= (int) $academy->id ?>/schedules">
            <?= csrf_field() ?>
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;">
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">اليوم <span style="color:#DC2626;">*</span></label>
                    <select name="day_of_week" class="form-select" required>
                        <option value="">-- اختر اليوم --</option>
                        <?php foreach ($dayLabels as $dayKey => $dayLabel): ?>
                        <option value="<?= (int) $dayKey ?>"><?= e($dayLabel) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">وقت البداية <span style="color:#DC2626;">*</span></label>
                    <input type="time" name="start_time" class="form-input" required style="direction:ltr;text-align:left;">
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">وقت النهاية <span style="color:#DC2626;">*</span></label>
                    <input type="time" name="end_time" class="form-input" required style="direction:ltr;text-align:left;">
                </div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:15px;margin-top:15px;">
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">المستوى</label>
                    <select name="level_id" class="form-select">
                        <option value="">— الكل —</option>
                        <?php foreach ($levels as $lvl): ?>
                        <option value="<?= (int) $lvl['id'] ?>"><?= e($lvl['name_ar'] ?? '') ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">رقم المنشأة</label>
                    <input type="number" name="facility_id" class="form-input" min="1" placeholder="رقم المنشأة" style="direction:ltr;text-align:left;">
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">اسم المدرب</label>
                    <input type="text" name="coach_name" class="form-input" placeholder="اسم المدرب">
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">الموسم</label>
                    <input type="text" name="season" class="form-input" placeholder="مثال: 2025-2026" style="direction:ltr;text-align:left;">
                </div>
            </div>
            <div style="margin-top:15px;display:flex;gap:8px;">
                <button type="submit" class="btn btn-primary" style="font-size:13px;padding:8px 20px;">
                    <i data-lucide="check" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> حفظ الجدول
                </button>
                <button type="button" class="btn btn-outline" style="font-size:13px;padding:8px 20px;" onclick="toggleAddSchedule()">إلغاء</button>
            </div>
        </form>
    </div>

    <?php if (!empty($schedules)): ?>
    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr>
                    <th>اليوم</th>
                    <th>وقت البداية</th>
                    <th>وقت النهاية</th>
                    <th>المستوى</th>
                    <th>المنشأة</th>
                    <th>المدرب</th>
                    <th>الموسم</th>
                    <th style="width:60px;"></th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($schedules as $schedule):
                    $dayName = $dayLabels[(int) ($schedule['day_of_week'] ?? 0)] ?? '—';
                    // Find level name
                    $levelName = '—';
                    if (!empty($schedule['level_id'])) {
                        foreach ($levels as $lvl) {
                            if ((int) $lvl['id'] === (int) $schedule['level_id']) {
                                $levelName = $lvl['name_ar'] ?? '—';
                                break;
                            }
                        }
                    }
                ?>
                <tr>
                    <td style="font-weight:600;"><?= e($dayName) ?></td>
                    <td style="direction:ltr;text-align:left;"><?= e($schedule['start_time'] ?? '') ?></td>
                    <td style="direction:ltr;text-align:left;"><?= e($schedule['end_time'] ?? '') ?></td>
                    <td><?= e($levelName) ?></td>
                    <td><?= !empty($schedule['facility_id']) ? '#' . (int) $schedule['facility_id'] : '—' ?></td>
                    <td><?= !empty($schedule['coach_name']) ? e($schedule['coach_name']) : '—' ?></td>
                    <td style="direction:ltr;text-align:left;"><?= !empty($schedule['season']) ? e($schedule['season']) : '—' ?></td>
                    <td>
                        <form method="POST" action="/academies/<?= (int) $academy->id ?>/schedules/remove" style="display:inline;">
                            <?= csrf_field() ?>
                            <input type="hidden" name="schedule_id" value="<?= (int) $schedule['id'] ?>">
                            <button type="submit" class="btn btn-sm" style="color:#DC2626;padding:4px 8px;border:1px solid #FCA5A5;border-radius:6px;background:#FEF2F2;cursor:pointer;" onclick="return confirm('هل أنت متأكد من حذف هذا الجدول؟')">
                                <i data-lucide="trash-2" style="width:14px;height:14px;"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
    <?php else: ?>
    <div style="padding:30px;text-align:center;color:#9CA3AF;font-size:14px;">
        <i data-lucide="info" style="width:20px;height:20px;margin-bottom:8px;"></i>
        <div>لم يتم إضافة جداول تدريب بعد</div>
    </div>
    <?php endif; ?>
</div>

<!-- 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) $academy->id ?></td>
            </tr>
            <?php if ($academy->created_at): ?>
            <tr>
                <td style="padding:6px 0;color:#6B7280;">تاريخ الإنشاء</td>
                <td style="padding:6px 0;"><?= e($academy->created_at) ?></td>
            </tr>
            <?php endif; ?>
            <?php if ($academy->updated_at): ?>
            <tr>
                <td style="padding:6px 0;color:#6B7280;">آخر تحديث</td>
                <td style="padding:6px 0;"><?= e($academy->updated_at) ?></td>
            </tr>
            <?php endif; ?>
        </table>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }
});

function toggleAddLevel() {
    var form = document.getElementById('addLevelForm');
    if (form.style.display === 'none') {
        form.style.display = 'block';
    } else {
        form.style.display = 'none';
    }
}

function toggleAddSchedule() {
    var form = document.getElementById('addScheduleForm');
    if (form.style.display === 'none') {
        form.style.display = 'block';
    } else {
        form.style.display = 'none';
    }
}
</script>
<?php $__template->endSection(); ?>
