<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>تصنيف وتعيين: <?= e($registration['full_name_ar']) ?><?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/sa/coach-assessment" 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'); ?>

<!-- Player Info Card -->
<div class="card" style="margin-bottom:16px;">
    <div style="padding:16px 20px;display:flex;align-items:center;gap:14px;">
        <div style="width:64px;height:64px;border-radius:10px;overflow:hidden;background:#F3F4F6;flex-shrink:0;">
            <?php if (!empty($registration['photo_path'])): ?>
            <img src="/<?= e($registration['photo_path']) ?>" style="width:100%;height:100%;object-fit:cover;">
            <?php else: ?>
            <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#9CA3AF;"><i data-lucide="user" style="width:28px;height:28px;"></i></div>
            <?php endif; ?>
        </div>
        <div style="flex:1;">
            <div style="font-size:18px;font-weight:700;color:#1A1A2E;"><?= e($registration['full_name_ar']) ?></div>
            <div style="font-size:13px;color:#6B7280;margin-top:4px;">
                <span style="padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;background:<?= ($registration['p_type'] ?? 'non_member') === 'member' ? '#ECFDF5' : '#FEF3C7' ?>;color:<?= ($registration['p_type'] ?? 'non_member') === 'member' ? '#059669' : '#D97706' ?>;">
                    <?= ($registration['p_type'] ?? 'non_member') === 'member' ? 'عضو' : 'غير عضو' ?>
                </span>
                <?php if (!empty($registration['player_nid'])): ?>
                <span style="margin-right:8px;direction:ltr;display:inline-block;"><?= e($registration['player_nid']) ?></span>
                <?php endif; ?>
                <?php if (!empty($registration['date_of_birth'])): ?>
                <?php
                $age = (int) ((time() - strtotime($registration['date_of_birth'])) / (365.25 * 86400));
                ?>
                <span style="margin-right:8px;"><?= $age ?> سنة</span>
                <?php endif; ?>
            </div>
        </div>
        <div style="text-align:left;">
            <div style="font-size:11px;color:#6B7280;">رقم التسجيل</div>
            <div style="font-size:13px;font-weight:600;direction:ltr;"><?= e($registration['registration_number']) ?></div>
        </div>
    </div>
    <?php
    $selectedDisc = [];
    if (!empty($registration['selected_disciplines'])) {
        $decoded = json_decode($registration['selected_disciplines'], true);
        if (is_array($decoded)) $selectedDisc = $decoded;
    }
    if (!empty($selectedDisc)):
    ?>
    <div style="padding:0 20px 16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
        <span style="font-size:12px;color:#6B7280;font-weight:600;">الأنشطة المطلوبة:</span>
        <?php foreach ($selectedDisc as $disc): ?>
        <span style="padding:4px 10px;border-radius:6px;background:#EFF6FF;color:#2563EB;font-size:12px;font-weight:600;"><?= e($disc['name'] ?? $disc) ?></span>
        <?php endforeach; ?>
    </div>
    <?php endif; ?>
</div>

<!-- Assessment Form -->
<form method="POST" action="/sa/coach-assessment/<?= (int) $registration['id'] ?>/submit">
    <?= csrf_field() ?>

    <div class="card" style="margin-bottom:16px;">
        <div style="padding:16px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
            <i data-lucide="target" style="width:18px;height:18px;color:#0D7377;"></i>
            <h3 style="margin:0;color:#0D7377;font-size:15px;">تصنيف المستوى</h3>
        </div>
        <div style="padding:20px;">
            <!-- Skill Level -->
            <div class="form-group" style="margin-bottom:20px;">
                <label class="form-label">المستوى <span style="color:#DC2626;">*</span></label>
                <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;">
                    <label style="display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border:2px solid #E5E7EB;border-radius:10px;cursor:pointer;transition:all 0.2s;">
                        <input type="radio" name="skill_level" value="beginner" required style="accent-color:#2563EB;width:18px;height:18px;">
                        <span style="font-weight:600;font-size:14px;">مبتدئ</span>
                    </label>
                    <label style="display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border:2px solid #E5E7EB;border-radius:10px;cursor:pointer;transition:all 0.2s;">
                        <input type="radio" name="skill_level" value="intermediate" style="accent-color:#059669;width:18px;height:18px;">
                        <span style="font-weight:600;font-size:14px;">متوسط</span>
                    </label>
                    <label style="display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border:2px solid #E5E7EB;border-radius:10px;cursor:pointer;transition:all 0.2s;">
                        <input type="radio" name="skill_level" value="advanced" style="accent-color:#7C3AED;width:18px;height:18px;">
                        <span style="font-weight:600;font-size:14px;">متقدم</span>
                    </label>
                </div>
            </div>

            <!-- Assessment Notes -->
            <div class="form-group" style="margin-bottom:20px;">
                <label class="form-label">ملاحظات المدرب</label>
                <textarea name="assessment_notes" class="form-input" rows="3" placeholder="ملاحظات عن مستوى اللاعب..."></textarea>
            </div>
        </div>
    </div>

    <!-- Group Selection by Discipline -->
    <div class="card" style="margin-bottom:16px;">
        <div style="padding:16px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
            <i data-lucide="users" style="width:18px;height:18px;color:#0D7377;"></i>
            <h3 style="margin:0;color:#0D7377;font-size:15px;">تعيين في مجموعة <span style="color:#DC2626;">*</span></h3>
        </div>
        <div style="padding:16px;">
            <?php
            $groupsByDiscipline = [];
            foreach ($groups as $g) {
                $dId = (int) ($g['discipline_id'] ?? 0);
                $dName = $g['discipline_name'] ?? 'بدون نشاط';
                if (!isset($groupsByDiscipline[$dId])) {
                    $groupsByDiscipline[$dId] = ['name' => $dName, 'groups' => []];
                }
                $groupsByDiscipline[$dId]['groups'][] = $g;
            }
            ?>
            <?php if (count($groupsByDiscipline) > 1): ?>
            <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;">
                <?php foreach ($groupsByDiscipline as $dId => $dData): ?>
                <button type="button" class="disc-tab btn btn-outline" data-disc="<?= $dId ?>" style="padding:8px 16px;font-size:13px;border-radius:8px;">
                    <?= e($dData['name']) ?> <span style="font-size:11px;color:#6B7280;">(<?= count($dData['groups']) ?>)</span>
                </button>
                <?php endforeach; ?>
                <button type="button" class="disc-tab btn btn-outline" data-disc="all" style="padding:8px 16px;font-size:13px;border-radius:8px;">الكل</button>
            </div>
            <?php endif; ?>
            <input type="text" id="groupSearch" class="form-input" placeholder="ابحث عن مجموعة..." style="margin-bottom:12px;padding:12px;font-size:14px;border-radius:10px;">
            <div style="max-height:400px;overflow-y:auto;display:grid;gap:8px;" id="groupsList">
                <?php foreach ($groups as $g): ?>
                <label class="group-radio-option" data-disc-id="<?= (int) ($g['discipline_id'] ?? 0) ?>" data-name="<?= e($g['name_ar'] . ' ' . ($g['discipline_name'] ?? '') . ' ' . ($g['program_name'] ?? '')) ?>"
                       style="display:flex;align-items:center;gap:12px;padding:14px;border:2px solid #E5E7EB;border-radius:10px;cursor:pointer;transition:all 0.2s;">
                    <input type="radio" name="group_id" value="<?= (int) $g['id'] ?>" required style="accent-color:#2563EB;width:20px;height:20px;flex-shrink:0;">
                    <div style="flex:1;min-width:0;">
                        <div style="font-weight:600;font-size:14px;"><?= e($g['name_ar']) ?></div>
                        <div style="font-size:12px;color:#6B7280;margin-top:2px;">
                            <?= e($g['discipline_name'] ?? '') ?> — <?= e($g['program_name'] ?? '') ?>
                            <?php if (!empty($g['coach_name'])): ?> | مدرب: <?= e($g['coach_name']) ?><?php endif; ?>
                        </div>
                    </div>
                    <div style="text-align:left;flex-shrink:0;">
                        <div style="font-size:14px;font-weight:700;color:#059669;">
                            <?= number_format(($registration['p_type'] ?? 'non_member') === 'member' ? (float) $g['monthly_fee_member'] : (float) $g['monthly_fee_nonmember'], 0) ?> ج.م
                        </div>
                        <div style="font-size:11px;color:#6B7280;"><?= (int) $g['current_count'] ?>/<?= (int) $g['max_capacity'] ?></div>
                    </div>
                </label>
                <?php endforeach; ?>
            </div>
        </div>
    </div>

    <button type="button" id="btnShowConfirm" class="btn btn-primary" style="width:100%;padding:16px;font-size:16px;font-weight:700;border-radius:12px;">
        <i data-lucide="check-circle" style="width:18px;height:18px;vertical-align:middle;margin-left:6px;"></i> تأكيد التصنيف والتعيين
    </button>

    <!-- Confirmation Overlay -->
    <div id="confirmOverlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9999;align-items:center;justify-content:center;">
        <div style="background:#fff;border-radius:16px;padding:24px;width:90%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,0.3);">
            <h3 style="margin:0 0 16px;font-size:17px;font-weight:700;color:#1A1A2E;text-align:center;">
                <i data-lucide="send" style="width:20px;height:20px;vertical-align:middle;margin-left:6px;color:#0D7377;"></i> تأكيد الإرسال للخزنة
            </h3>
            <div style="background:#F9FAFB;border-radius:10px;padding:16px;margin-bottom:16px;">
                <div style="display:grid;gap:10px;font-size:14px;">
                    <div style="display:flex;justify-content:space-between;"><span style="color:#6B7280;">اللاعب:</span><strong id="confPlayer"><?= e($registration['full_name_ar']) ?></strong></div>
                    <div style="display:flex;justify-content:space-between;"><span style="color:#6B7280;">المجموعة:</span><strong id="confGroup">—</strong></div>
                    <div style="display:flex;justify-content:space-between;"><span style="color:#6B7280;">النشاط:</span><strong id="confDisc">—</strong></div>
                    <div style="display:flex;justify-content:space-between;"><span style="color:#6B7280;">البرنامج:</span><strong id="confProg">—</strong></div>
                    <div style="display:flex;justify-content:space-between;"><span style="color:#6B7280;">المستوى:</span><strong id="confLevel">—</strong></div>
                    <div style="display:flex;justify-content:space-between;border-top:1px dashed #E5E7EB;padding-top:10px;margin-top:4px;">
                        <span style="color:#6B7280;font-weight:600;">مبلغ الاشتراك الشهري:</span>
                        <strong id="confAmount" style="color:#059669;font-size:16px;">—</strong>
                    </div>
                </div>
            </div>
            <p style="font-size:12px;color:#6B7280;text-align:center;margin:0 0 16px;">سيتم إرسال طلب دفع الاشتراك للخزنة — اللاعب يتوجه للكاشير لإتمام الدفع</p>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
                <button type="button" id="btnCancelConfirm" class="btn btn-outline" style="padding:12px;font-size:14px;border-radius:10px;">رجوع</button>
                <button type="submit" class="btn btn-primary" style="padding:12px;font-size:14px;border-radius:10px;">
                    <i data-lucide="check" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> تأكيد وإرسال
                </button>
            </div>
        </div>
    </div>
</form>

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

    var search = document.getElementById('groupSearch');
    var activeDisc = 'all';

    function filterGroups() {
        var q = (search ? search.value.toLowerCase() : '');
        document.querySelectorAll('.group-radio-option').forEach(function(el) {
            var matchSearch = !q || el.dataset.name.toLowerCase().indexOf(q) >= 0;
            var matchDisc = activeDisc === 'all' || el.dataset.discId === activeDisc;
            el.style.display = (matchSearch && matchDisc) ? '' : 'none';
        });
    }

    if (search) {
        search.addEventListener('input', filterGroups);
    }

    document.querySelectorAll('.disc-tab').forEach(function(tab) {
        tab.addEventListener('click', function() {
            document.querySelectorAll('.disc-tab').forEach(function(t) {
                t.style.background = '';
                t.style.color = '';
            });
            this.style.background = '#0D7377';
            this.style.color = '#fff';
            activeDisc = this.dataset.disc;
            filterGroups();
        });
    });

    document.querySelectorAll('input[name="group_id"]').forEach(function(radio) {
        radio.addEventListener('change', function() {
            document.querySelectorAll('.group-radio-option').forEach(function(el) {
                el.style.borderColor = '#E5E7EB';
                el.style.background = '';
            });
            if (this.checked) {
                this.closest('.group-radio-option').style.borderColor = '#2563EB';
                this.closest('.group-radio-option').style.background = '#F0F7FF';
            }
        });
    });

    document.querySelectorAll('input[name="skill_level"]').forEach(function(radio) {
        radio.addEventListener('change', function() {
            document.querySelectorAll('input[name="skill_level"]').forEach(function(r) {
                r.closest('label').style.borderColor = '#E5E7EB';
                r.closest('label').style.background = '';
            });
            this.closest('label').style.borderColor = '#2563EB';
            this.closest('label').style.background = '#EFF6FF';
        });
    });

    // Confirmation overlay logic
    var overlay = document.getElementById('confirmOverlay');
    var btnShow = document.getElementById('btnShowConfirm');
    var btnCancel = document.getElementById('btnCancelConfirm');
    var levelLabels = {beginner: 'مبتدئ', intermediate: 'متوسط', advanced: 'متقدم'};

    btnShow.addEventListener('click', function() {
        var selectedGroup = document.querySelector('input[name="group_id"]:checked');
        var selectedLevel = document.querySelector('input[name="skill_level"]:checked');

        if (!selectedGroup) {
            alert('اختر مجموعة أولاً');
            return;
        }
        if (!selectedLevel) {
            alert('اختر المستوى أولاً');
            return;
        }

        var label = selectedGroup.closest('.group-radio-option');
        var groupName = label.querySelector('div[style*="font-weight:600"]').textContent.trim();
        var infoLine = label.querySelector('div[style*="color:#6B7280"]');
        var parts = infoLine ? infoLine.textContent.trim().split('—') : ['', ''];
        var discName = (parts[0] || '').trim();
        var progName = (parts[1] || '').split('|')[0].trim();
        var amountEl = label.querySelector('div[style*="color:#059669"]');
        var amount = amountEl ? amountEl.textContent.trim() : '—';

        document.getElementById('confGroup').textContent = groupName;
        document.getElementById('confDisc').textContent = discName;
        document.getElementById('confProg').textContent = progName;
        document.getElementById('confLevel').textContent = levelLabels[selectedLevel.value] || selectedLevel.value;
        document.getElementById('confAmount').textContent = amount;

        overlay.style.display = 'flex';
        if (typeof lucide !== 'undefined') lucide.createIcons();
    });

    btnCancel.addEventListener('click', function() {
        overlay.style.display = 'none';
    });

    overlay.addEventListener('click', function(e) {
        if (e.target === overlay) overlay.style.display = 'none';
    });
});
</script>
<?php $__template->endSection(); ?>
