<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>الحضور والغياب<?php $__template->endSection(); ?>

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

<!-- Filter Bar -->
<div class="card" style="margin-bottom:20px;padding:20px;">
    <form method="GET" action="/attendance" style="display:flex;gap:15px;align-items:end;flex-wrap:wrap;">
        <div class="form-group" style="margin:0;flex:1;min-width:200px;">
            <label class="form-label" style="font-size:12px;">الأكاديمية <span style="color:#DC2626;">*</span></label>
            <select name="academy_id" class="form-select" required onchange="this.form.submit()">
                <option value="">-- اختر الأكاديمية --</option>
                <?php foreach ($academies as $acad): ?>
                <option value="<?= (int) $acad['id'] ?>" <?= $selectedAcademyId === (int) $acad['id'] ? 'selected' : '' ?>>
                    <?= e($acad['name_ar']) ?> (<?= e($acad['discipline_name'] ?? '') ?>)
                </option>
                <?php endforeach; ?>
            </select>
        </div>
        <div class="form-group" style="margin:0;width:180px;">
            <label class="form-label" style="font-size:12px;">التاريخ</label>
            <input type="date" name="date" value="<?= e($selectedDate) ?>" class="form-input" style="direction:ltr;text-align:left;" onchange="this.form.submit()">
        </div>
        <button type="submit" class="btn btn-primary" style="height:38px;font-size:13px;">
            <i data-lucide="search" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> عرض
        </button>
    </form>
</div>

<?php if ($selectedAcademyId > 0): ?>

    <?php if ($summary): ?>
    <!-- Summary Bar -->
    <div style="display:grid;grid-template-columns:repeat(4, 1fr);gap:12px;margin-bottom:20px;">
        <div class="card" style="padding:15px;text-align:center;border-right:3px solid #059669;">
            <div style="font-size:22px;font-weight:700;color:#059669;"><?= $summary['present'] ?></div>
            <div style="font-size:11px;color:#6B7280;">حاضر</div>
        </div>
        <div class="card" style="padding:15px;text-align:center;border-right:3px solid #DC2626;">
            <div style="font-size:22px;font-weight:700;color:#DC2626;"><?= $summary['absent'] ?></div>
            <div style="font-size:11px;color:#6B7280;">غائب</div>
        </div>
        <div class="card" style="padding:15px;text-align:center;border-right:3px solid #D97706;">
            <div style="font-size:22px;font-weight:700;color:#D97706;"><?= $summary['late'] ?></div>
            <div style="font-size:11px;color:#6B7280;">متأخر</div>
        </div>
        <div class="card" style="padding:15px;text-align:center;border-right:3px solid #6B7280;">
            <div style="font-size:22px;font-weight:700;color:#6B7280;"><?= $summary['excused'] ?></div>
            <div style="font-size:11px;color:#6B7280;">معذور</div>
        </div>
    </div>
    <?php endif; ?>

    <?php if (!empty($players)): ?>
    <!-- Roll Call Form -->
    <div class="card" style="margin-bottom:20px;">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between;">
            <div style="display:flex;align-items:center;gap:8px;">
                <i data-lucide="clipboard-check" style="width:18px;height:18px;color:#0D7377;"></i>
                <h3 style="margin:0;color:#0D7377;font-size:15px;">تسجيل الحضور — <?= e($selectedDate) ?></h3>
            </div>
            <div style="display:flex;gap:6px;">
                <button type="button" class="btn btn-sm btn-outline" style="font-size:11px;color:#059669;border-color:#059669;" onclick="bulkSet('present')">الكل حاضر</button>
                <button type="button" class="btn btn-sm btn-outline" style="font-size:11px;color:#DC2626;border-color:#DC2626;" onclick="bulkSet('absent')">الكل غائب</button>
            </div>
        </div>

        <form method="POST" action="/attendance/record">
            <?= csrf_field() ?>
            <input type="hidden" name="academy_id" value="<?= $selectedAcademyId ?>">
            <input type="hidden" name="date" value="<?= e($selectedDate) ?>">

            <div style="overflow-x:auto;">
                <table style="width:100%;border-collapse:collapse;font-size:13px;">
                    <thead>
                        <tr style="background:#F9FAFB;border-bottom:2px solid #E5E7EB;">
                            <th style="padding:12px 15px;text-align:right;font-weight:600;color:#374151;width:30%;">اللاعب</th>
                            <th style="padding:12px 15px;text-align:center;font-weight:600;color:#059669;width:12%;">حاضر</th>
                            <th style="padding:12px 15px;text-align:center;font-weight:600;color:#DC2626;width:12%;">غائب</th>
                            <th style="padding:12px 15px;text-align:center;font-weight:600;color:#D97706;width:12%;">متأخر</th>
                            <th style="padding:12px 15px;text-align:center;font-weight:600;color:#6B7280;width:12%;">معذور</th>
                            <th style="padding:12px 15px;text-align:right;font-weight:600;color:#374151;">ملاحظات</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($players as $i => $pl):
                            $pid = (int) $pl['player_id'];
                            $existing = $existingAttendance[$pid] ?? null;
                            $currentStatus = $existing ? ($existing['status'] ?? 'present') : '';
                            $currentNotes = $existing ? ($existing['notes'] ?? '') : '';
                            $cardColor = ($pl['card_status'] ?? '') === 'active' ? '#059669' : '#D97706';
                        ?>
                        <tr style="border-bottom:1px solid #F3F4F6;<?= $i % 2 === 0 ? '' : 'background:#FAFAFA;' ?>">
                            <td style="padding:10px 15px;">
                                <div style="display:flex;align-items:center;gap:8px;">
                                    <span style="width:8px;height:8px;border-radius:50%;background:<?= $cardColor ?>;flex-shrink:0;"></span>
                                    <div>
                                        <a href="/players/<?= $pid ?>" style="font-weight:600;color:#1A1A2E;text-decoration:none;"><?= e($pl['full_name_ar']) ?></a>
                                        <?php if (!empty($pl['activity_id_number'])): ?>
                                        <div style="font-size:10px;color:#9CA3AF;"><?= e($pl['activity_id_number']) ?></div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </td>
                            <td style="padding:10px 8px;text-align:center;">
                                <input type="radio" name="status[<?= $pid ?>]" value="present" <?= $currentStatus === 'present' ? 'checked' : '' ?> style="accent-color:#059669;width:18px;height:18px;cursor:pointer;">
                            </td>
                            <td style="padding:10px 8px;text-align:center;">
                                <input type="radio" name="status[<?= $pid ?>]" value="absent" <?= $currentStatus === 'absent' ? 'checked' : '' ?> style="accent-color:#DC2626;width:18px;height:18px;cursor:pointer;">
                            </td>
                            <td style="padding:10px 8px;text-align:center;">
                                <input type="radio" name="status[<?= $pid ?>]" value="late" <?= $currentStatus === 'late' ? 'checked' : '' ?> style="accent-color:#D97706;width:18px;height:18px;cursor:pointer;">
                            </td>
                            <td style="padding:10px 8px;text-align:center;">
                                <input type="radio" name="status[<?= $pid ?>]" value="excused" <?= $currentStatus === 'excused' ? 'checked' : '' ?> style="accent-color:#6B7280;width:18px;height:18px;cursor:pointer;">
                            </td>
                            <td style="padding:10px 8px;">
                                <input type="text" name="notes[<?= $pid ?>]" value="<?= e($currentNotes) ?>" class="form-input" style="font-size:12px;padding:6px 10px;" placeholder="ملاحظات...">
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>

            <div style="padding:15px 20px;border-top:1px solid #E5E7EB;display:flex;justify-content:space-between;align-items:center;">
                <span style="font-size:12px;color:#6B7280;"><?= count($players) ?> لاعب في هذه الأكاديمية</span>
                <button type="submit" class="btn btn-primary" style="font-size:14px;padding:10px 30px;">
                    <i data-lucide="save" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> حفظ الحضور
                </button>
            </div>
        </form>
    </div>

    <?php else: ?>
    <div class="card" style="padding:40px;text-align:center;">
        <i data-lucide="users" style="width:40px;height:40px;color:#D1D5DB;margin-bottom:10px;"></i>
        <div style="color:#6B7280;font-size:14px;">لا يوجد لاعبون مسجلون في هذه الأكاديمية</div>
    </div>
    <?php endif; ?>

<?php else: ?>
<div class="card" style="padding:60px 20px;text-align:center;">
    <i data-lucide="clipboard-check" style="width:48px;height:48px;color:#D1D5DB;margin-bottom:15px;"></i>
    <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 bulkSet(status) {
    var radios = document.querySelectorAll('input[type="radio"][value="' + status + '"]');
    radios.forEach(function(r) { r.checked = true; });
}
</script>

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