<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>تسجيل حضور الحصة<?php $__template->endSection(); ?>

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

<!-- Booking Info -->
<div class="card" style="margin-bottom:20px;padding:15px;">
    <div style="display:flex;gap:20px;flex-wrap:wrap;font-size:14px;">
        <div><strong>المجموعة:</strong> <?= e($booking['group_name'] ?? '—') ?></div>
        <div><strong>المدرب:</strong> <?= e($booking['coach_name'] ?? '—') ?></div>
        <div><strong>التاريخ:</strong> <?= e($booking['booking_date'] ?? '') ?></div>
        <div><strong>الوقت:</strong> <?= e($booking['start_time'] ?? '') ?> - <?= e($booking['end_time'] ?? '') ?></div>
        <div><strong>المرفق:</strong> <?= e($booking['facility_name'] ?? '') ?> / <?= e($booking['unit_name'] ?? '') ?></div>
    </div>
</div>

<!-- Attendance Form -->
<div class="card">
    <form method="POST" action="/sa/attendance/record/<?= (int) $booking['id'] ?>">
        <?= csrf_field() ?>

        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th style="width:40px;">#</th>
                        <th>اللاعب</th>
                        <th>الكود</th>
                        <th style="text-align:center;">حاضر</th>
                        <th style="text-align:center;">غائب</th>
                        <th style="text-align:center;">متأخر</th>
                        <th style="text-align:center;">معذور</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if (!empty($players)): ?>
                    <?php foreach ($players as $i => $player): ?>
                    <?php
                        $playerId = (int) $player['player_id'];
                        $currentStatus = $attendanceMap[$playerId] ?? 'present';
                    ?>
                    <tr>
                        <td><?= $i + 1 ?></td>
                        <td style="font-weight:600;"><?= e($player['player_name'] ?? '') ?></td>
                        <td><code style="font-size:11px;background:#F3F4F6;padding:2px 6px;border-radius:4px;"><?= e($player['player_code'] ?? '') ?></code></td>
                        <td style="text-align:center;">
                            <input type="hidden" name="player_ids[<?= $i ?>]" value="<?= $playerId ?>">
                            <input type="radio" name="statuses[<?= $i ?>]" value="present" <?= $currentStatus === 'present' ? 'checked' : '' ?>>
                        </td>
                        <td style="text-align:center;">
                            <input type="radio" name="statuses[<?= $i ?>]" value="absent" <?= $currentStatus === 'absent' ? 'checked' : '' ?>>
                        </td>
                        <td style="text-align:center;">
                            <input type="radio" name="statuses[<?= $i ?>]" value="late" <?= $currentStatus === 'late' ? 'checked' : '' ?>>
                        </td>
                        <td style="text-align:center;">
                            <input type="radio" name="statuses[<?= $i ?>]" value="excused" <?= $currentStatus === 'excused' ? 'checked' : '' ?>>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                    <?php else: ?>
                    <tr>
                        <td colspan="7" style="text-align:center;padding:30px;color:#6B7280;">
                            لا يوجد لاعبون مسجلون في هذه المجموعة
                        </td>
                    </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>

        <?php if (!empty($players)): ?>
        <div style="padding:15px;display:flex;gap:10px;justify-content:flex-start;">
            <button type="submit" class="btn btn-primary">
                <i data-lucide="save" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> حفظ الحضور
            </button>
            <button type="button" class="btn btn-outline" onclick="selectAll('present');">تحديد الكل حاضر</button>
            <button type="button" class="btn btn-outline" onclick="selectAll('absent');">تحديد الكل غائب</button>
        </div>
        <?php endif; ?>
    </form>
</div>

<script>
function selectAll(status) {
    var radios = document.querySelectorAll('input[type=radio][value=' + status + ']');
    radios.forEach(function(r) { r.checked = true; });
}

document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') { lucide.createIcons(); }
});
</script>
<?php $__template->endSection(); ?>
