<?php
$__template->layout('Layout.main');
?>
<?php $__template->section('title'); ?>تسجيل لاعب في نشاط<?php $__template->endSection(); ?>

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

<div style="max-width:800px;margin:0 auto;">

    <!-- Page Header with Guide -->
    <div style="margin-bottom:24px;">
        <h2 style="margin:0 0 8px;font-size:22px;font-weight:800;">تسجيل لاعب في نشاط رياضي</h2>
        <p style="margin:0;font-size:13px;color:#6B7280;line-height:1.7;">
            <i data-lucide="info" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;color:#0D7377;"></i>
            اختر النشاط الرياضي والمستوى ونوع الخدمة. النظام يحسب السعر تلقائيا ويعين اللاعب في مجموعة متاحة مع مدرب.
        </p>
    </div>

    <!-- Step indicator -->
    <div style="display:flex;align-items:center;gap:0;margin-bottom:24px;">
        <div class="step-item active" id="step1indicator">
            <span class="step-num">1</span>
            <span class="step-label">اللاعب</span>
        </div>
        <div class="step-line"></div>
        <div class="step-item" id="step2indicator">
            <span class="step-num">2</span>
            <span class="step-label">النشاط</span>
        </div>
        <div class="step-line"></div>
        <div class="step-item" id="step3indicator">
            <span class="step-num">3</span>
            <span class="step-label">الخدمة</span>
        </div>
        <div class="step-line"></div>
        <div class="step-item" id="step4indicator">
            <span class="step-num">4</span>
            <span class="step-label">التأكيد</span>
        </div>
    </div>

    <form method="POST" action="/activity-subscriptions/enroll" id="enrollForm">
        <?= csrf_field() ?>

        <!-- Step 1: Player -->
        <div class="card" style="padding:24px;margin-bottom:16px;" id="step1">
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;">
                <i data-lucide="user" style="width:20px;height:20px;color:#0D7377;"></i>
                <h3 style="margin:0;font-size:16px;font-weight:700;">اختيار اللاعب</h3>
            </div>
            <p style="margin:0 0 12px;font-size:12px;color:#6B7280;">
                <i data-lucide="arrow-left" style="width:12px;height:12px;vertical-align:middle;margin-left:4px;"></i>
                ابحث باسم اللاعب او رقم العضوية. نوع العضوية يؤثر على السعر.
            </p>
            <div style="display:grid;grid-template-columns:1fr auto;gap:12px;">
                <div style="position:relative;">
                    <input type="text" id="playerSearch" placeholder="اكتب اسم اللاعب او رقم العضوية..." style="width:100%;padding:12px 16px 12px 40px;border:1px solid #D1D5DB;border-radius:8px;font-size:14px;">
                    <i data-lucide="search" style="width:16px;height:16px;position:absolute;top:14px;left:14px;color:#9CA3AF;"></i>
                    <div id="playerResults" style="display:none;position:absolute;top:100%;right:0;left:0;background:white;border:1px solid #E5E7EB;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.1);z-index:10;max-height:200px;overflow-y:auto;margin-top:4px;"></div>
                </div>
                <input type="hidden" name="player_id" id="selectedPlayerId" required>
            </div>
            <div id="selectedPlayerCard" style="display:none;margin-top:12px;padding:12px 16px;background:#F0FDFA;border:1px solid #99F6E4;border-radius:8px;">
                <div style="display:flex;align-items:center;justify-content:space-between;">
                    <div>
                        <span style="font-weight:700;color:#111;" id="selectedPlayerName"></span>
                        <span style="font-size:12px;color:#6B7280;margin-right:8px;" id="selectedPlayerType"></span>
                    </div>
                    <button type="button" onclick="clearPlayer()" style="background:none;border:none;cursor:pointer;color:#DC2626;">
                        <i data-lucide="x" style="width:16px;height:16px;"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- Step 2: Sport/Discipline -->
        <div class="card" style="padding:24px;margin-bottom:16px;opacity:0.5;" id="step2">
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;">
                <i data-lucide="trophy" style="width:20px;height:20px;color:#0D7377;"></i>
                <h3 style="margin:0;font-size:16px;font-weight:700;">اختيار النشاط والمستوى</h3>
            </div>
            <p style="margin:0 0 12px;font-size:12px;color:#6B7280;">
                <i data-lucide="arrow-left" style="width:12px;height:12px;vertical-align:middle;margin-left:4px;"></i>
                اختر النشاط الرياضي ثم المستوى المناسب لقدرات اللاعب.
            </p>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                <div>
                    <label style="display:block;font-size:12px;font-weight:600;margin-bottom:6px;color:#374151;">النشاط الرياضي</label>
                    <select name="discipline_id" id="disciplineSelect" style="width:100%;padding:10px 12px;border:1px solid #D1D5DB;border-radius:8px;font-size:13px;" onchange="onDisciplineChange()">
                        <option value="">-- اختر النشاط --</option>
                        <?php foreach ($disciplines as $d): ?>
                        <option value="<?= (int) $d['id'] ?>"><?= e($d['name_ar']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div>
                    <label style="display:block;font-size:12px;font-weight:600;margin-bottom:6px;color:#374151;">المستوى</label>
                    <select name="level_id" id="levelSelect" style="width:100%;padding:10px 12px;border:1px solid #D1D5DB;border-radius:8px;font-size:13px;" disabled>
                        <option value="">-- اختر النشاط اولا --</option>
                    </select>
                    <span style="font-size:11px;color:#9CA3AF;margin-top:4px;display:block;">
                        <i data-lucide="help-circle" style="width:11px;height:11px;vertical-align:middle;margin-left:2px;"></i>
                        المستوى يحدد بناء على تقييم المدرب
                    </span>
                </div>
            </div>
        </div>

        <!-- Step 3: Service Type -->
        <div class="card" style="padding:24px;margin-bottom:16px;opacity:0.5;" id="step3">
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;">
                <i data-lucide="users" style="width:20px;height:20px;color:#0D7377;"></i>
                <h3 style="margin:0;font-size:16px;font-weight:700;">نوع الخدمة (حجم المجموعة)</h3>
            </div>
            <p style="margin:0 0 12px;font-size:12px;color:#6B7280;">
                <i data-lucide="arrow-left" style="width:12px;height:12px;vertical-align:middle;margin-left:4px;"></i>
                كل ما قل عدد المجموعة، زاد الاهتمام الفردي وارتفع السعر.
            </p>
            <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;" id="groupTypeCards">
                <?php foreach ($groupTypes as $key => $gt): ?>
                <label style="display:block;cursor:pointer;">
                    <input type="radio" name="group_type" value="<?= e($key) ?>" style="display:none;" onchange="onGroupTypeChange()">
                    <div class="service-card" data-type="<?= e($key) ?>">
                        <div style="font-size:13px;font-weight:700;color:#111;margin-bottom:4px;"><?= e($gt['label']) ?></div>
                        <div style="font-size:11px;color:#6B7280;">اقصى <?= $gt['max'] ?> لاعب</div>
                        <div class="service-price" style="margin-top:8px;font-size:16px;font-weight:800;color:#0D7377;" data-type="<?= e($key) ?>">--</div>
                        <div style="font-size:10px;color:#9CA3AF;">ج.م / شهر</div>
                    </div>
                </label>
                <?php endforeach; ?>
            </div>
        </div>

        <!-- Step 4: Confirmation -->
        <div class="card" style="padding:24px;margin-bottom:16px;opacity:0.5;" id="step4">
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;">
                <i data-lucide="check-circle" style="width:20px;height:20px;color:#0D7377;"></i>
                <h3 style="margin:0;font-size:16px;font-weight:700;">ملخص وتأكيد</h3>
            </div>
            <p style="margin:0 0 12px;font-size:12px;color:#6B7280;">
                <i data-lucide="arrow-left" style="width:12px;height:12px;vertical-align:middle;margin-left:4px;"></i>
                النظام يعين المجموعة والمدرب والموعد تلقائيا بناء على المتاح. الاشتراك الشهري يتولد في اول كل شهر.
            </p>

            <div id="summaryBox" style="display:none;padding:16px;background:#F9FAFB;border-radius:8px;border:1px solid #E5E7EB;">
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:13px;">
                    <div><span style="color:#6B7280;">اللاعب:</span> <strong id="sumPlayer">--</strong></div>
                    <div><span style="color:#6B7280;">النشاط:</span> <strong id="sumDiscipline">--</strong></div>
                    <div><span style="color:#6B7280;">المستوى:</span> <strong id="sumLevel">--</strong></div>
                    <div><span style="color:#6B7280;">نوع الخدمة:</span> <strong id="sumGroupType">--</strong></div>
                    <div style="grid-column:1/-1;padding-top:12px;border-top:1px solid #E5E7EB;">
                        <span style="color:#6B7280;">السعر الشهري:</span>
                        <strong style="font-size:18px;color:#0D7377;" id="sumPrice">--</strong>
                        <span style="font-size:12px;color:#9CA3AF;">ج.م</span>
                    </div>
                </div>
            </div>

            <div style="margin-top:16px;padding:12px 16px;background:#FEF3C7;border-radius:8px;font-size:12px;color:#92400E;line-height:1.7;">
                <i data-lucide="lightbulb" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i>
                <strong>ماذا يحدث بعد التسجيل؟</strong><br>
                1. يتم تعيين اللاعب في مجموعة متاحة تلقائيا<br>
                2. في اول كل شهر يتولد اشتراك شهري بالسعر المتفق عليه<br>
                3. الاشتراك يستحق الدفع في اليوم السابع من كل شهر<br>
                4. لو التسجيل بعد يوم 15 في الشهر، يحسب نصف شهر فقط
            </div>

            <button type="submit" class="btn btn-primary" style="width:100%;padding:14px;margin-top:16px;font-size:15px;" id="submitBtn" disabled>
                <i data-lucide="check" style="width:16px;height:16px;vertical-align:middle;margin-left:6px;"></i>
                تسجيل اللاعب
            </button>
        </div>
    </form>
</div>

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

<?php $__template->section('styles'); ?>
<style>
.step-item { display:flex;align-items:center;gap:6px; }
.step-item .step-num {
    width:28px;height:28px;border-radius:50%;background:#E5E7EB;color:#6B7280;
    display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
}
.step-item.active .step-num { background:#0D7377;color:white; }
.step-item.done .step-num { background:#059669;color:white; }
.step-item .step-label { font-size:12px;font-weight:600;color:#6B7280; }
.step-item.active .step-label { color:#0D7377; }
.step-line { flex:1;height:2px;background:#E5E7EB;margin:0 8px; }

.service-card {
    padding:16px;border:2px solid #E5E7EB;border-radius:10px;text-align:center;
    transition:all .15s;
}
.service-card:hover { border-color:#0D7377;background:#F0FDFA; }
input[type="radio"]:checked + .service-card { border-color:#0D7377;background:#F0FDFA;box-shadow:0 0 0 3px rgba(13,115,119,.15); }
</style>
<?php $__template->endSection(); ?>

<?php $__template->section('scripts'); ?>
<script>
const CSRF = document.querySelector('meta[name="csrf-token"]')?.content || '';
let selectedPlayer = null;
let searchTimeout = null;

// Player search
document.getElementById('playerSearch').addEventListener('input', function() {
    clearTimeout(searchTimeout);
    const q = this.value.trim();
    if (q.length < 2) { document.getElementById('playerResults').style.display = 'none'; return; }

    searchTimeout = setTimeout(() => {
        fetch(`/api/players/search?q=${encodeURIComponent(q)}`)
            .then(r => r.json())
            .then(data => {
                const results = document.getElementById('playerResults');
                if (!data.players || data.players.length === 0) {
                    results.innerHTML = '<div style="padding:12px;color:#9CA3AF;font-size:13px;text-align:center;">لا توجد نتائج</div>';
                } else {
                    results.innerHTML = data.players.map(p => `
                        <div style="padding:10px 16px;cursor:pointer;border-bottom:1px solid #F3F4F6;font-size:13px;"
                             onmouseenter="this.style.background='#F9FAFB'" onmouseleave="this.style.background=''"
                             onclick="selectPlayer(${p.id}, '${p.name}', '${p.player_type}')">
                            <strong>${p.name}</strong>
                            <span style="color:#6B7280;margin-right:8px;">${p.player_type === 'member' ? 'عضو' : 'غير عضو'}</span>
                        </div>
                    `).join('');
                }
                results.style.display = 'block';
            });
    }, 300);
});

function selectPlayer(id, name, playerType) {
    selectedPlayer = {id, name, playerType};
    document.getElementById('selectedPlayerId').value = id;
    document.getElementById('selectedPlayerName').textContent = name;
    document.getElementById('selectedPlayerType').textContent = playerType === 'member' ? '(عضو)' : '(غير عضو)';
    document.getElementById('selectedPlayerCard').style.display = 'block';
    document.getElementById('playerResults').style.display = 'none';
    document.getElementById('playerSearch').value = '';
    activateStep(2);
    updatePrices();
}

function clearPlayer() {
    selectedPlayer = null;
    document.getElementById('selectedPlayerId').value = '';
    document.getElementById('selectedPlayerCard').style.display = 'none';
    deactivateFrom(2);
}

function onDisciplineChange() {
    const disciplineId = document.getElementById('disciplineSelect').value;
    if (!disciplineId) return;

    fetch(`/activity-subscriptions/enroll/levels?discipline_id=${disciplineId}`)
        .then(r => r.json())
        .then(data => {
            const sel = document.getElementById('levelSelect');
            sel.innerHTML = '<option value="">-- اختر المستوى --</option>';
            if (data.levels) {
                data.levels.forEach(l => {
                    sel.innerHTML += `<option value="${l.id}">${l.name_ar}</option>`;
                });
            }
            sel.disabled = false;
        });

    activateStep(3);
    updatePrices();
}

function onGroupTypeChange() {
    activateStep(4);
    updateSummary();
}

function updatePrices() {
    const disciplineId = document.getElementById('disciplineSelect').value;
    if (!disciplineId || !selectedPlayer) return;

    const isMember = selectedPlayer.playerType === 'member' ? '1' : '0';
    ['private','small_group','group','team'].forEach(gt => {
        fetch(`/activity-subscriptions/enroll/price?discipline_id=${disciplineId}&group_type=${gt}&is_member=${isMember}`)
            .then(r => r.json())
            .then(data => {
                const el = document.querySelector(`.service-price[data-type="${gt}"]`);
                if (el) el.textContent = data.price > 0 ? data.price.toLocaleString() : '--';
            });
    });
}

function updateSummary() {
    const dSel = document.getElementById('disciplineSelect');
    const lSel = document.getElementById('levelSelect');
    const gtSel = document.querySelector('input[name="group_type"]:checked');

    document.getElementById('sumPlayer').textContent = selectedPlayer ? selectedPlayer.name : '--';
    document.getElementById('sumDiscipline').textContent = dSel.selectedOptions[0]?.text || '--';
    document.getElementById('sumLevel').textContent = lSel.selectedOptions[0]?.text || '--';
    document.getElementById('sumGroupType').textContent = gtSel ? gtSel.closest('label').querySelector('.service-card div').textContent : '--';

    const priceEl = document.querySelector(`.service-price[data-type="${gtSel?.value}"]`);
    document.getElementById('sumPrice').textContent = priceEl ? priceEl.textContent : '--';

    document.getElementById('summaryBox').style.display = 'block';
    document.getElementById('submitBtn').disabled = false;
}

function activateStep(n) {
    for (let i = 1; i <= 4; i++) {
        const step = document.getElementById('step' + i);
        const ind = document.getElementById('step' + i + 'indicator');
        if (i <= n) {
            step.style.opacity = '1';
            if (i < n) ind.classList.add('done');
            if (i === n) { ind.classList.add('active'); ind.classList.remove('done'); }
        }
    }
}

function deactivateFrom(n) {
    for (let i = n; i <= 4; i++) {
        const step = document.getElementById('step' + i);
        const ind = document.getElementById('step' + i + 'indicator');
        step.style.opacity = '0.5';
        ind.classList.remove('active', 'done');
    }
    document.getElementById('submitBtn').disabled = true;
    document.getElementById('summaryBox').style.display = 'none';
}

// Click outside to close search results
document.addEventListener('click', function(e) {
    if (!e.target.closest('#playerSearch') && !e.target.closest('#playerResults')) {
        document.getElementById('playerResults').style.display = 'none';
    }
});
</script>
<?php $__template->endSection(); ?>
