<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>تسجيل حضور: <?= e($group['name_ar']) ?><?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/sa/training-attendance?date=<?= e($date) ?>" class="btn btn-outline"><i data-lucide="arrow-right" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> العودة</a>
<?php $__template->endSection(); ?>

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

<div class="card" style="margin-bottom:15px;padding:15px;background:#EFF6FF;border-right:4px solid #2563EB;">
    <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;">
        <div>
            <strong><?= e($group['name_ar']) ?></strong>
            <span style="color:#6B7280;margin-right:8px;"><?= e($group['discipline_name'] ?? '') ?> — <?= e($group['coach_name'] ?? '') ?></span>
        </div>
        <div style="font-size:13px;color:#4B5563;">
            <strong>التاريخ:</strong> <?= e($date) ?>
            <?php if (!empty($sessions)): ?>
            | <strong>الوقت:</strong> <?= e($sessions[0]['start_time'] ?? '') ?> - <?= e($sessions[0]['end_time'] ?? '') ?>
            | <strong>المرفق:</strong> <?= e($sessions[0]['unit_name'] ?? '') ?>
            <?php endif; ?>
        </div>
    </div>
</div>

<?php if (empty($players)): ?>
<div class="card" style="padding:40px;text-align:center;color:#6B7280;">
    <i data-lucide="users" style="width:36px;height:36px;color:#D1D5DB;display:block;margin:0 auto 10px;"></i>
    لا يوجد لاعبين مسجلين في هذه المجموعة
</div>
<?php else: ?>

<form method="POST" action="/sa/training-attendance/record/<?= (int) $group['id'] ?>">
    <?= csrf_field() ?>
    <input type="hidden" name="session_date" value="<?= e($date) ?>">

    <div class="card" style="margin-bottom:15px;padding:10px 15px;display:flex;gap:15px;align-items:center;flex-wrap:wrap;">
        <button type="button" onclick="setAll('present')" class="btn btn-sm" style="background:#ECFDF5;color:#059669;border:1px solid #059669;">تحضير الكل</button>
        <button type="button" onclick="setAll('absent')" class="btn btn-sm" style="background:#FEF2F2;color:#DC2626;border:1px solid #DC2626;">غياب الكل</button>
        <span style="color:#6B7280;font-size:13px;">عدد اللاعبين: <strong><?= count($players) ?></strong></span>
    </div>

    <div class="card">
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th style="width:40px;">#</th>
                        <th>اللاعب</th>
                        <th>الكود</th>
                        <th>الحالة الطبية</th>
                        <th style="min-width:180px;">الحضور</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($players as $i => $p): ?>
                    <?php
                    $existing = $existingAttendance[(int) $p['player_id']] ?? null;
                    $currentStatus = $existing ? $existing['status'] : 'present';
                    $medicalBadge = match($p['medical_status'] ?? 'pending') {
                        'fit' => '<span style="background:#ECFDF5;color:#059669;padding:2px 8px;border-radius:8px;font-size:11px;">لائق</span>',
                        'conditional' => '<span style="background:#FEF3C7;color:#92400E;padding:2px 8px;border-radius:8px;font-size:11px;">مشروط</span>',
                        'expired' => '<span style="background:#FEF2F2;color:#DC2626;padding:2px 8px;border-radius:8px;font-size:11px;">منتهي</span>',
                        default => '<span style="background:#F3F4F6;color:#6B7280;padding:2px 8px;border-radius:8px;font-size:11px;">بانتظار</span>',
                    };
                    ?>
                    <tr>
                        <td><?= $i + 1 ?></td>
                        <td style="font-weight:500;"><?= e($p['full_name_ar']) ?></td>
                        <td style="font-size:12px;color:#6B7280;"><?= e($p['registration_serial'] ?? '—') ?></td>
                        <td><?= $medicalBadge ?></td>
                        <td>
                            <input type="hidden" name="player_ids[]" value="<?= (int) $p['player_id'] ?>">
                            <div style="display:flex;gap:4px;">
                                <?php
                                $options = [
                                    'present' => ['label' => 'حاضر', 'color' => '#059669', 'bg' => '#ECFDF5'],
                                    'absent'  => ['label' => 'غائب', 'color' => '#DC2626', 'bg' => '#FEF2F2'],
                                    'late'    => ['label' => 'متأخر', 'color' => '#D97706', 'bg' => '#FEF3C7'],
                                    'excused' => ['label' => 'عذر', 'color' => '#6B7280', 'bg' => '#F3F4F6'],
                                ];
                                foreach ($options as $val => $opt): ?>
                                <label style="cursor:pointer;">
                                    <input type="radio" name="statuses[<?= $i ?>]" value="<?= $val ?>" <?= $currentStatus === $val ? 'checked' : '' ?> class="status-radio" data-index="<?= $i ?>" style="display:none;">
                                    <span class="att-btn att-btn-<?= $val ?>" style="display:inline-block;padding:4px 10px;border-radius:8px;font-size:12px;border:2px solid transparent;transition:all 0.15s;"><?= $opt['label'] ?></span>
                                </label>
                                <?php endforeach; ?>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>

    <div style="margin-top:15px;display:flex;justify-content:end;">
        <button type="submit" class="btn btn-primary" style="padding:10px 30px;font-size:15px;">
            <i data-lucide="save" style="width:16px;height:16px;vertical-align:middle;margin-left:6px;"></i> حفظ الحضور
        </button>
    </div>
</form>
<?php endif; ?>

<style>
.att-btn { background:#F9FAFB; color:#6B7280; }
.att-btn-present { background:#ECFDF5; color:#059669; }
.att-btn-absent { background:#FEF2F2; color:#DC2626; }
.att-btn-late { background:#FEF3C7; color:#D97706; }
.att-btn-excused { background:#F3F4F6; color:#6B7280; }
input.status-radio:checked + .att-btn { border-color:currentColor; font-weight:600; box-shadow:0 0 0 1px currentColor; }
</style>

<script>
function setAll(status) {
    document.querySelectorAll('.status-radio[value="' + status + '"]').forEach(r => { r.checked = true; });
}
document.addEventListener('DOMContentLoaded', function() { if (typeof lucide !== 'undefined') lucide.createIcons(); });
</script>
<?php $__template->endSection(); ?>
