<?php
$selected_department_label = '';
if (!empty($departments_id) && !empty($all_department[$departments_id])) {
    $selected_department_label = $all_department[$departments_id];
}
$type_options = array(
    'month' => lang('by') . ' ' . lang('month'),
    'period' => lang('by') . ' ' . lang('period'),
);
$current_type = !empty($search_type) ? $search_type : 'month';
$month_value = '';
if (!empty($date) && !is_array($date)) {
    $month_value = date('Y-m', safe_strtotime($date));
}
$period_start = !empty($start_date) ? date('Y-m-d', safe_strtotime($start_date)) : '';
$period_end = !empty($end_date) ? date('Y-m-d', safe_strtotime($end_date)) : '';
?>

<section class="mb-4 overflow-hidden rounded-2xl border border-border bg-card shadow-sm">
    <div class="border-b border-border px-5 py-4">
        <div class="space-y-1">
            <h2 class="text-xl font-semibold tracking-tight text-foreground"><?= lang('attendance_report') ?></h2>
            <p class="max-w-3xl text-sm text-muted-foreground">Department attendance summary by month or date range.</p>
        </div>
    </div>

    <div class="px-5 py-4">
        <form id="attendance-form" action="<?= base_url() ?>admin/attendance/attendance_report" method="post" class="space-y-4">
            <div class="grid grid-cols-1 gap-4 xl:grid-cols-12">
                <div class="xl:col-span-4">
                    <?= form_lookup_group('departments_id', lang('department'), !empty($departments_id) ? $departments_id : '', $selected_department_label, true, array('id' => 'attendance_department'), '', array('type' => 'department', 'limit' => 4, 'min_length' => 0)) ?>
                </div>
                <div class="xl:col-span-3">
                    <?= form_select_group('search_type', lang('type'), $type_options, $current_type, true, array('id' => 'search_type')) ?>
                </div>
                <div class="js-attendance-month xl:col-span-3" style="<?= $current_type === 'period' ? 'display:none;' : '' ?>">
                    <?= form_datepicker('date', lang('month'), $month_value, $current_type !== 'period', array('data-type' => 'month', 'data-format' => 'Y-m')); ?>
                </div>
                <div class="js-attendance-period xl:col-span-2" style="<?= $current_type === 'period' ? '' : 'display:none;' ?>">
                    <?= form_datepicker('start_date', lang('start_date'), $period_start, $current_type === 'period', ['data-max' => '#end_date', 'data-auto-close' => 'true']); ?>
                </div>
                <div class="js-attendance-period xl:col-span-2" style="<?= $current_type === 'period' ? '' : 'display:none;' ?>">
                    <?= form_datepicker('end_date', lang('end_date'), $period_end, $current_type === 'period', ['data-min' => '#start_date', 'data-auto-close' => 'true']); ?>
                </div>
            </div>

            <div class="flex flex-col gap-3 border-t border-border pt-4 sm:flex-row sm:items-center sm:justify-between">
                <p class="text-sm text-muted-foreground">Choose a department and range, then load the report.</p>
                <button type="submit" id="sbtn" class="inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-primary-foreground transition hover:bg-primary/90">
                    <i data-lucide="search" class="h-4 w-4"></i>
                    <?= lang('search') ?>
                </button>
            </div>
        </form>
    </div>
</section>

<script>
    (function() {
        const typeSelect = document.getElementById('search_type');
        if (!typeSelect) return;

        function toggleAttendanceSearchMode() {
            const isPeriod = typeSelect.value === 'period';
            document.querySelectorAll('.js-attendance-month').forEach((el) => {
                el.style.display = isPeriod ? 'none' : '';
            });
            document.querySelectorAll('.js-attendance-period').forEach((el) => {
                el.style.display = isPeriod ? '' : 'none';
            });

            const monthInput = document.querySelector('[name="date"]');
            const startInput = document.querySelector('[name="start_date"]');
            const endInput = document.querySelector('[name="end_date"]');

            if (monthInput) {
                monthInput.required = !isPeriod;
            }
            if (startInput) {
                startInput.required = isPeriod;
            }
            if (endInput) {
                endInput.required = isPeriod;
            }
        }

        typeSelect.addEventListener('change', toggleAttendanceSearchMode);
        toggleAttendanceSearchMode();
    })();
</script>
