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

<?php $__template->section('page_actions'); ?>
<a href="/training-groups/<?= (int) $group->id ?>/edit" class="btn btn-outline"><i data-lucide="edit-3" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> تعديل</a>
<form method="POST" action="/training-groups/<?= (int) $group->id ?>/toggle" style="display:inline;">
    <?= csrf_field() ?>
    <button type="submit" class="btn btn-outline" style="color:<?= $group->is_active ? '#DC2626' : '#059669' ?>;">
        <i data-lucide="<?= $group->is_active ? 'x-circle' : 'check-circle' ?>" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i>
        <?= $group->is_active ? 'إيقاف' : 'تفعيل' ?>
    </button>
</form>
<a href="/training-groups" 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
$typeColors = [
    'private'     => '#7C3AED',
    'small_group' => '#2563EB',
    'group'       => '#059669',
    'team'        => '#D97706',
];
$gType = $group->group_type ?? 'group';
$gColor = $typeColors[$gType] ?? '#6B7280';
$gTypeLabel = $groupTypes[$gType] ?? $gType;
$currentCount = (int) $group->current_count;
$maxCapacity = (int) $group->max_capacity;
$capacityPct = $maxCapacity > 0 ? min(100, (int) round(($currentCount / $maxCapacity) * 100)) : 0;
$capacityColor = $capacityPct >= 90 ? '#DC2626' : ($capacityPct >= 70 ? '#D97706' : '#059669');
?>

<!-- Group Header -->
<div class="card" style="margin-bottom:20px;">
    <div style="padding:25px;display:flex;align-items:center;gap:20px;">
        <div style="width:70px;height:70px;border-radius:16px;background:<?= $gColor ?>15;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
            <i data-lucide="users" style="width:32px;height:32px;color:<?= $gColor ?>;"></i>
        </div>
        <div style="flex:1;">
            <div style="display:flex;align-items:center;gap:10px;margin-bottom:6px;">
                <h2 style="margin:0;font-size:22px;color:#1A1A2E;"><?= e($group->name_ar) ?></h2>
                <span style="padding:4px 12px;border-radius:10px;font-size:12px;font-weight:600;background:<?= $gColor ?>15;color:<?= $gColor ?>;"><?= e($gTypeLabel) ?></span>
                <?php if (!$group->is_active): ?>
                <span style="padding:4px 12px;border-radius:10px;font-size:12px;background:#FEE2E2;color:#DC2626;">معطّل</span>
                <?php endif; ?>
            </div>
            <?php if (!empty($group->name_en)): ?>
            <div style="font-size:14px;color:#6B7280;margin-bottom:6px;"><?= e($group->name_en) ?></div>
            <?php endif; ?>
            <div style="display:flex;gap:15px;font-size:13px;color:#6B7280;flex-wrap:wrap;">
                <span style="display:flex;align-items:center;gap:4px;"><i data-lucide="graduation-cap" style="width:14px;height:14px;"></i> <?= e($academyName) ?></span>
                <span style="display:flex;align-items:center;gap:4px;"><i data-lucide="layers" style="width:14px;height:14px;"></i> <?= e($levelName) ?></span>
                <?php if ($coachName): ?>
                <span style="display:flex;align-items:center;gap:4px;"><i data-lucide="user" style="width:14px;height:14px;"></i> <?= e($coachName) ?></span>
                <?php endif; ?>
                <?php if ($facilityName): ?>
                <span style="display:flex;align-items:center;gap:4px;"><i data-lucide="map-pin" style="width:14px;height:14px;"></i> <?= e($facilityName) ?></span>
                <?php endif; ?>
            </div>
        </div>
        <div style="text-align:left;">
            <code style="font-size:12px;color:#9CA3AF;background:#F9FAFB;padding:4px 8px;border-radius:4px;"><?= e($group->code) ?></code>
        </div>
    </div>
</div>

<!-- Stats -->
<div style="display:grid;grid-template-columns:repeat(4, 1fr);gap:15px;margin-bottom:20px;">
    <div class="card" style="padding:15px;text-align:center;">
        <div style="font-size:24px;font-weight:700;color:<?= $capacityColor ?>;"><?= $currentCount ?> / <?= $maxCapacity ?></div>
        <div style="font-size:12px;color:#6B7280;">اللاعبين / السعة</div>
        <div style="margin-top:8px;height:6px;background:#E5E7EB;border-radius:3px;overflow:hidden;">
            <div style="height:100%;width:<?= $capacityPct ?>%;background:<?= $capacityColor ?>;border-radius:3px;"></div>
        </div>
    </div>
    <div class="card" style="padding:15px;text-align:center;">
        <div style="font-size:24px;font-weight:700;color:#2563EB;"><?= e($pricingTiers[$group->pricing_tier] ?? $group->pricing_tier) ?></div>
        <div style="font-size:12px;color:#6B7280;">فئة التسعير</div>
    </div>
    <div class="card" style="padding:15px;text-align:center;">
        <?php if ($group->day_of_week !== null): ?>
        <div style="font-size:18px;font-weight:700;color:#7C3AED;"><?= e($dayNames[(int) $group->day_of_week] ?? '—') ?></div>
        <?php else: ?>
        <div style="font-size:18px;font-weight:700;color:#9CA3AF;">—</div>
        <?php endif; ?>
        <div style="font-size:12px;color:#6B7280;">اليوم</div>
    </div>
    <div class="card" style="padding:15px;text-align:center;">
        <?php if (!empty($group->start_time) && !empty($group->end_time)): ?>
        <div style="font-size:18px;font-weight:700;color:#059669;direction:ltr;"><?= e(substr($group->start_time, 0, 5)) ?> - <?= e(substr($group->end_time, 0, 5)) ?></div>
        <?php else: ?>
        <div style="font-size:18px;font-weight:700;color:#9CA3AF;">—</div>
        <?php endif; ?>
        <div style="font-size:12px;color:#6B7280;">الوقت</div>
    </div>
</div>

<!-- Details -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;">
    <div class="card">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
            <i data-lucide="info" style="width:16px;height:16px;color:#1e3a5f;"></i>
            <h3 style="margin:0;font-size:14px;color:#1e3a5f;">تفاصيل المجموعة</h3>
        </div>
        <div style="padding:15px 20px;">
            <table style="width:100%;font-size:13px;">
                <tr><td style="padding:6px 0;color:#6B7280;width:130px;">الحد الأدنى</td><td><?= (int) $group->min_capacity ?> لاعب</td></tr>
                <tr><td style="padding:6px 0;color:#6B7280;">الحد الأقصى</td><td><?= (int) $group->max_capacity ?> لاعب</td></tr>
                <?php if ($group->age_from !== null || $group->age_to !== null): ?>
                <tr><td style="padding:6px 0;color:#6B7280;">الفئة العمرية</td><td><?= $group->age_from ?? '—' ?> - <?= $group->age_to ?? '—' ?> سنة</td></tr>
                <?php endif; ?>
                <?php if ($group->gender_restriction): ?>
                <tr><td style="padding:6px 0;color:#6B7280;">قيد النوع</td><td><?= $group->gender_restriction === 'male' ? 'ذكور فقط' : 'إناث فقط' ?></td></tr>
                <?php endif; ?>
            </table>
        </div>
    </div>
    <div class="card">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
            <i data-lucide="bar-chart-3" style="width:16px;height:16px;color:#059669;"></i>
            <h3 style="margin:0;font-size:14px;color:#059669;">الإشغال</h3>
        </div>
        <div style="padding:20px;text-align:center;">
            <div style="font-size:48px;font-weight:700;color:<?= $capacityColor ?>;"><?= $capacityPct ?>%</div>
            <div style="font-size:13px;color:#6B7280;margin-top:4px;">نسبة الإشغال</div>
            <div style="margin-top:12px;height:10px;background:#E5E7EB;border-radius:5px;overflow:hidden;">
                <div style="height:100%;width:<?= $capacityPct ?>%;background:<?= $capacityColor ?>;border-radius:5px;transition:width 0.3s;"></div>
            </div>
            <?php if ((int) $group->is_full): ?>
            <div style="margin-top:10px;padding:4px 12px;display:inline-block;border-radius:8px;background:#FEE2E2;color:#DC2626;font-size:12px;font-weight:600;">المجموعة ممتلئة</div>
            <?php endif; ?>
        </div>
    </div>
</div>

<!-- Members -->
<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="user-check" style="width:16px;height:16px;color:#2563EB;"></i>
            <h3 style="margin:0;font-size:14px;color:#2563EB;">الأعضاء (<?= count($members) ?>)</h3>
        </div>
    </div>
    <div style="padding:15px 20px;">
        <?php if (!empty($members)): ?>
        <table style="width:100%;font-size:13px;border-collapse:collapse;">
            <thead>
                <tr style="background:#F9FAFB;color:#6B7280;font-size:12px;">
                    <th style="padding:8px;text-align:right;border-bottom:1px solid #E5E7EB;">#</th>
                    <th style="padding:8px;text-align:right;border-bottom:1px solid #E5E7EB;">اللاعب</th>
                    <th style="padding:8px;text-align:right;border-bottom:1px solid #E5E7EB;">تاريخ الانضمام</th>
                    <th style="padding:8px;text-align:right;border-bottom:1px solid #E5E7EB;">الهاتف</th>
                    <th style="padding:8px;text-align:center;border-bottom:1px solid #E5E7EB;">إجراءات</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($members as $i => $member): ?>
                <tr>
                    <td style="padding:8px;border-bottom:1px solid #F3F4F6;"><?= $i + 1 ?></td>
                    <td style="padding:8px;border-bottom:1px solid #F3F4F6;font-weight:600;"><?= e($member['player_name'] ?? '—') ?></td>
                    <td style="padding:8px;border-bottom:1px solid #F3F4F6;"><?= e(substr($member['joined_at'] ?? '', 0, 10)) ?></td>
                    <td style="padding:8px;border-bottom:1px solid #F3F4F6;direction:ltr;text-align:right;"><?= e($member['phone'] ?? '—') ?></td>
                    <td style="padding:8px;border-bottom:1px solid #F3F4F6;text-align:center;">
                        <div style="display:flex;gap:4px;justify-content:center;">
                            <!-- Remove -->
                            <form method="POST" action="/training-groups/<?= (int) $group->id ?>/remove-player" style="display:inline;" onsubmit="return confirm('هل أنت متأكد من إزالة اللاعب؟');">
                                <?= csrf_field() ?>
                                <input type="hidden" name="membership_id" value="<?= (int) $member['id'] ?>">
                                <button type="submit" class="btn btn-sm btn-outline" style="color:#DC2626;font-size:11px;padding:3px 8px;" title="إزالة">
                                    <i data-lucide="user-minus" style="width:12px;height:12px;"></i>
                                </button>
                            </form>
                            <!-- Transfer -->
                            <?php if (!empty($otherGroups)): ?>
                            <button type="button" class="btn btn-sm btn-outline" style="color:#7C3AED;font-size:11px;padding:3px 8px;" title="نقل" onclick="showTransfer(<?= (int) $member['id'] ?>, '<?= e($member['player_name'] ?? '') ?>')">
                                <i data-lucide="move" style="width:12px;height:12px;"></i>
                            </button>
                            <?php endif; ?>
                        </div>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
        <?php else: ?>
        <p style="color:#9CA3AF;font-size:13px;margin:0;">لا يوجد أعضاء في هذه المجموعة حالياً.</p>
        <?php endif; ?>

        <!-- Add Player Form -->
        <?php if (!empty($players) && !(int) $group->is_full): ?>
        <div style="margin-top:15px;padding-top:15px;border-top:1px solid #E5E7EB;">
            <form method="POST" action="/training-groups/<?= (int) $group->id ?>/add-player" style="display:flex;gap:10px;align-items:end;flex-wrap:wrap;">
                <?= csrf_field() ?>
                <div style="flex:1;min-width:200px;">
                    <label class="form-label" style="font-size:11px;">إضافة لاعب</label>
                    <select name="player_id" class="form-select" style="font-size:12px;" required id="addPlayerSelect"
                            data-searchable="true"
                            data-placeholder="ابحث عن لاعب بالاسم...">
                        <option value="">-- اختر لاعب --</option>
                        <?php foreach ($players as $p): ?>
                        <option value="<?= (int) $p['player_id'] ?>" data-enrollment="<?= (int) $p['enrollment_id'] ?>"><?= e($p['player_name']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <input type="hidden" name="enrollment_id" id="enrollmentIdInput" value="">
                <button type="submit" class="btn btn-primary" style="font-size:12px;padding:8px 14px;">
                    <i data-lucide="user-plus" style="width:13px;height:13px;vertical-align:middle;"></i> إضافة
                </button>
            </form>
        </div>
        <?php endif; ?>
    </div>
</div>

<!-- Transfer Modal -->
<?php if (!empty($otherGroups)): ?>
<div id="transferModal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:1000;align-items:center;justify-content:center;">
    <div style="background:white;border-radius:12px;padding:25px;width:90%;max-width:450px;margin:auto;">
        <h3 style="margin:0 0 15px;font-size:16px;color:#1A1A2E;">نقل لاعب</h3>
        <p id="transferPlayerName" style="font-size:13px;color:#6B7280;margin:0 0 15px;"></p>
        <form method="POST" action="/training-groups/<?= (int) $group->id ?>/transfer-player" id="transferForm">
            <?= csrf_field() ?>
            <input type="hidden" name="membership_id" id="transferMembershipId" value="">
            <div class="form-group" style="margin-bottom:15px;">
                <label class="form-label">المجموعة المستهدفة</label>
                <select name="target_group_id" class="form-select" required>
                    <option value="">-- اختر مجموعة --</option>
                    <?php foreach ($otherGroups as $og): ?>
                    <option value="<?= (int) $og['id'] ?>"><?= e($og['name_ar']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="form-group" style="margin-bottom:15px;">
                <label class="form-label">سبب النقل</label>
                <textarea name="transfer_reason" class="form-input" rows="2" placeholder="اختياري..."></textarea>
            </div>
            <div style="display:flex;gap:10px;justify-content:flex-end;">
                <button type="button" class="btn btn-outline" onclick="hideTransfer()">إلغاء</button>
                <button type="submit" class="btn btn-primary">تأكيد النقل</button>
            </div>
        </form>
    </div>
</div>
<?php endif; ?>

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

    // Set enrollment_id when player is selected
    var addPlayerSelect = document.getElementById('addPlayerSelect');
    if (addPlayerSelect) {
        addPlayerSelect.addEventListener('change', function() {
            var opt = this.options[this.selectedIndex];
            document.getElementById('enrollmentIdInput').value = opt.getAttribute('data-enrollment') || '';
        });
    }
});

function showTransfer(membershipId, playerName) {
    document.getElementById('transferMembershipId').value = membershipId;
    document.getElementById('transferPlayerName').textContent = 'نقل اللاعب: ' + playerName;
    document.getElementById('transferModal').style.display = 'flex';
}

function hideTransfer() {
    document.getElementById('transferModal').style.display = 'none';
}
</script>

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