<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>مخالفات الحضور<?php $__template->endSection(); ?>

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

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

<?php
$violationLabels = [
    'late_arrival' => 'تأخر',
    'early_departure' => 'انصراف مبكر',
    'absence' => 'غياب',
];
$violationColors = [
    'late_arrival' => '#D97706',
    'early_departure' => '#2563EB',
    'absence' => '#DC2626',
];
$violationBgs = [
    'late_arrival' => '#FFF7ED',
    'early_departure' => '#EFF6FF',
    'absence' => '#FEE2E2',
];
?>

<!-- Filters -->
<div class="card" style="margin-bottom:20px;padding:15px;">
    <form method="GET" action="/hr/shifts/violations" style="display:flex;gap:10px;flex-wrap:wrap;align-items:end;">
        <div style="min-width:140px;">
            <label class="form-label" style="font-size:12px;">الشهر</label>
            <input type="month" name="month" value="<?= e($month ?? '') ?>" class="form-input">
        </div>
        <div style="min-width:140px;">
            <label class="form-label" style="font-size:12px;">نوع المخالفة</label>
            <select name="type" class="form-select">
                <option value="">الكل</option>
                <?php foreach ($violationLabels as $val => $label): ?>
                <option value="<?= e($val) ?>" <?= ($type ?? '') === $val ? 'selected' : '' ?>><?= e($label) ?></option>
                <?php endforeach; ?>
            </select>
        </div>
        <button type="submit" class="btn btn-outline"><i data-lucide="search" style="width:16px;height:16px;vertical-align:middle;"></i> بحث</button>
        <a href="/hr/shifts/violations" class="btn btn-sm btn-outline" style="color:#6B7280;">مسح</a>
    </form>
</div>

<!-- Violations Table -->
<div class="card">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
        <i data-lucide="alert-circle" style="width:18px;height:18px;color:#D97706;"></i>
        <h3 style="margin:0;font-size:15px;">سجل المخالفات</h3>
        <?php if (!empty($violations)): ?>
        <span style="background:#FFF7ED;color:#D97706;font-size:12px;padding:2px 8px;border-radius:10px;font-weight:600;margin-right:8px;"><?= count($violations) ?> مخالفة</span>
        <?php endif; ?>
    </div>
    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr>
                    <th>الموظف</th>
                    <th>التاريخ</th>
                    <th>نوع المخالفة</th>
                    <th>الوقت المحدد</th>
                    <th>الوقت الفعلي</th>
                    <th>الفرق (دقائق)</th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($violations)): ?>
                <tr><td colspan="6" style="text-align:center;padding:40px;color:#9CA3AF;">لا توجد مخالفات</td></tr>
                <?php else: ?>
                <?php foreach ($violations as $v): ?>
                <?php
                $vType = $v['violation_type'] ?? '';
                $vLabel = $violationLabels[$vType] ?? $vType;
                $vColor = $violationColors[$vType] ?? '#6B7280';
                $vBg = $violationBgs[$vType] ?? '#F3F4F6';
                ?>
                <tr>
                    <td style="font-weight:600;"><?= e($v['employee_name'] ?? '—') ?></td>
                    <td style="font-size:13px;"><?= e($v['date'] ?? '—') ?></td>
                    <td>
                        <span style="display:inline-block;padding:3px 10px;border-radius:10px;font-size:12px;font-weight:600;background:<?= $vBg ?>;color:<?= $vColor ?>;">
                            <?= e($vLabel) ?>
                        </span>
                    </td>
                    <td style="direction:ltr;text-align:center;"><?= e($v['scheduled_time'] ?? '—') ?></td>
                    <td style="direction:ltr;text-align:center;"><?= e($v['actual_time'] ?? '—') ?></td>
                    <td style="text-align:center;">
                        <span style="font-weight:700;color:<?= $vColor ?>;"><?= (int) ($v['difference_minutes'] ?? 0) ?> دقيقة</span>
                    </td>
                </tr>
                <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

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