<?php
use App\Modules\Sessions\Models\SessionAttendance;
$__template->layout('Layout.main');
?>
<?php $__template->section('title'); ?>تسجيل الحضور<?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/sessions/<?= (int) $session['id'] ?>" 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'); ?>

<?php
$statusColors = [
    'scheduled'   => '#3B82F6',
    'in_progress' => '#F59E0B',
    'completed'   => '#10B981',
    'cancelled'   => '#EF4444',
];
$sStatus = $session['status'] ?? 'scheduled';
$sColor = $statusColors[$sStatus] ?? '#6B7280';
?>

<!-- Session Info Header -->
<div class="card" style="margin-bottom:20px;">
    <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
        <div style="width:40px;height:40px;border-radius:10px;background:<?= $sColor ?>15;display:flex;align-items:center;justify-content:center;">
            <i data-lucide="clipboard-check" style="width:20px;height:20px;color:<?= $sColor ?>;"></i>
        </div>
        <div>
            <h2 style="margin:0;font-size:18px;font-weight:700;color:#1A1A2E;">
                تسجيل حضور: <?= e($session['group_name'] ?? '—') ?>
            </h2>
            <p style="margin:4px 0 0;font-size:13px;color:#6B7280;">
                <?= e($session['session_date']) ?> | <?= e(substr($session['start_time'], 0, 5)) ?> - <?= e(substr($session['end_time'], 0, 5)) ?>
                <?php if (!empty($session['coach_name'])): ?>
                | المدرب: <?= e($session['coach_name']) ?>
                <?php endif; ?>
            </p>
        </div>
    </div>
</div>

<!-- Attendance Form -->
<?php if (!empty($players)): ?>
<form method="POST" action="/sessions/<?= (int) $session['id'] ?>/attendance">
    <?= csrf_field() ?>

    <!-- Quick Actions -->
    <div class="card" style="margin-bottom:16px;padding:12px 16px;">
        <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
            <span style="font-size:13px;font-weight:600;color:#374151;">تحديد سريع:</span>
            <button type="button" class="btn btn-sm btn-outline" onclick="setAllStatus('present')" style="font-size:12px;">
                <i data-lucide="check" style="width:13px;height:13px;vertical-align:middle;margin-left:3px;"></i> حضور الجميع
            </button>
            <button type="button" class="btn btn-sm btn-outline" onclick="setAllStatus('absent')" style="font-size:12px;color:#EF4444;border-color:#EF4444;">
                <i data-lucide="x" style="width:13px;height:13px;vertical-align:middle;margin-left:3px;"></i> غياب الجميع
            </button>
        </div>
    </div>

    <div class="card" style="padding:0;overflow:hidden;">
        <div style="overflow-x:auto;">
            <table style="width:100%;border-collapse:collapse;font-size:14px;">
                <thead>
                    <tr style="background:#F9FAFB;border-bottom:2px solid #E5E7EB;">
                        <th style="padding:12px 16px;text-align:right;font-weight:600;color:#374151;width:40px;">#</th>
                        <th style="padding:12px 16px;text-align:right;font-weight:600;color:#374151;">اللاعب</th>
                        <th style="padding:12px 16px;text-align:center;font-weight:600;color:#374151;width:160px;">الحالة</th>
                        <th style="padding:12px 16px;text-align:center;font-weight:600;color:#374151;width:130px;">وقت الحضور</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($players as $i => $player):
                        $playerId = (int) $player['player_id'];
                        $existingStatus = $attendanceMap[$playerId]['status'] ?? 'present';
                        $existingTime = $attendanceMap[$playerId]['check_in_time'] ?? '';
                    ?>
                    <tr style="border-bottom:1px solid #F3F4F6;">
                        <td style="padding:10px 16px;color:#6B7280;">
                            <?= $i + 1 ?>
                            <input type="hidden" name="player_ids[<?= $i ?>]" value="<?= $playerId ?>">
                            <input type="hidden" name="enrollment_ids[<?= $i ?>]" value="<?= (int) ($player['enrollment_id'] ?? 0) ?>">
                        </td>
                        <td style="padding:10px 16px;">
                            <div style="font-weight:500;color:#1A1A2E;"><?= e($player['player_name'] ?? '—') ?></div>
                            <?php if (!empty($player['phone'])): ?>
                            <div style="font-size:11px;color:#9CA3AF;"><?= e($player['phone']) ?></div>
                            <?php endif; ?>
                        </td>
                        <td style="padding:10px 16px;text-align:center;">
                            <select name="statuses[<?= $i ?>]" class="form-input status-select" style="font-size:13px;padding:6px 10px;min-width:120px;" data-row="<?= $i ?>">
                                <?php foreach ($statuses as $key => $label): ?>
                                <option value="<?= e($key) ?>" <?= $existingStatus === $key ? 'selected' : '' ?>><?= e($label) ?></option>
                                <?php endforeach; ?>
                            </select>
                        </td>
                        <td style="padding:10px 16px;text-align:center;">
                            <input type="time" name="check_in_times[<?= $i ?>]" value="<?= e($existingTime ? substr($existingTime, 0, 5) : '') ?>" class="form-input" style="font-size:13px;padding:6px 10px;width:110px;">
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>

    <div style="margin-top:20px;display:flex;gap:10px;justify-content:end;">
        <a href="/sessions/<?= (int) $session['id'] ?>" class="btn btn-outline">إلغاء</a>
        <button type="submit" class="btn btn-primary">
            <i data-lucide="save" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> حفظ الحضور
        </button>
    </div>
</form>

<?php else: ?>
<div class="card" style="padding:60px 20px;text-align:center;">
    <div style="margin-bottom:15px;">
        <i data-lucide="users" style="width:48px;height:48px;color:#D1D5DB;"></i>
    </div>
    <h3 style="color:#6B7280;margin:0 0 8px;">لا يوجد لاعبون في هذه المجموعة</h3>
    <p style="color:#9CA3AF;font-size:14px;margin:0;">
        يجب إضافة لاعبين إلى المجموعة التدريبية أولاً قبل تسجيل الحضور.
    </p>
</div>
<?php endif; ?>

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

function setAllStatus(status) {
    var selects = document.querySelectorAll('.status-select');
    selects.forEach(function(select) {
        select.value = status;
    });
}
</script>
<?php $__template->endSection(); ?>
