<?= message_box('success'); ?>
<?= message_box('error'); ?>
<style>
.js-month-pill {
    cursor: pointer;
}

.js-month-panel {
    display: none;
}

.js-month-panel[open] {
    display: block;
}
</style>
<div class="space-y-6">
    <div class="rounded-2xl border border-border bg-card shadow-sm">        
        <div class="p-5 space-y-4">
            <div class="flex items-center justify-between gap-3">
                <div class="px-4 pb-4 pt-2">
                    <div class="flex flex-wrap gap-2">
                        <?php foreach ($all_performance_info as $key => $v_performance_info):
							$month_name = date('F', safe_strtotime($year . '-' . $key));
							$active_month = ($current_month == $key);
						?>
                        <span
                            class="js-month-pill rounded-full px-3 py-1 text-xs font-semibold <?= $active_month ? 'bg-indigo-600 text-white shadow-sm' : 'bg-muted text-muted-foreground' ?>"
                            data-month="<?= $month_name ?>">
                            <?= $month_name; ?>
                        </span>
                        <?php endforeach; ?>
                    </div>
                </div>
                <form data-parsley-validate="" novalidate=""
                    action="<?php echo base_url() ?>admin/performance/performance_report" method="post" class="">
                    <div class="flex items-center gap-2 text-sm font-semibold text-foreground">
                        <?= form_datepicker('year', '', !empty($year) ? $year : date('Y'), true, array(
						'class' => 'years',
						'data-type' => 'month',
						'data-format' => 'Y',
						'data-auto-close' => 'true',
					)); ?>
                        <button type="submit" data-toggle="tooltip" data-placement="top" title="<?= lang('search') ?>"
                            class="inline-flex items-center gap-2 rounded-lg border border-border bg-card px-3 py-2.5 text-xs font-semibold text-foreground hover:bg-muted">
                            <i data-lucide="search" class="h-4 w-4"></i>
                            <?= lang('search') ?>
                        </button>
                    </div>
                </form>
            </div>


            <div class="space-y-3">
                <?php foreach ($all_performance_info as $key => $v_performance_info):
					$month_name = date('F', safe_strtotime($year . '-' . $key));
					$open = false;
				?>
                <details class="rounded-2xl border border-border bg-card shadow-sm js-month-panel"
                    data-month="<?= $month_name ?>" <?= $open ? 'open' : '' ?>>
                    <summary
                        class="flex cursor-pointer items-center justify-between gap-3 border-b border-border px-5 py-4 text-sm font-semibold text-foreground js-month-trigger">
                        <span class="flex items-center gap-2">
                            <i data-lucide="calendar" class="h-4 w-4"></i>
                            <?= $month_name . ' ' . $year; ?>
                        </span>
                        <i data-lucide="chevron-down" class="h-4 w-4"></i>
                    </summary>
                    <div class="p-4">
                        <?php if (!empty($v_performance_info)): ?>
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                            <?php foreach ($v_performance_info as $appraisal_info) : ?>
                            <div class="rounded-xl border border-border bg-card p-4 shadow-sm space-y-3">
                                <div class="flex items-start justify-between gap-3">
                                    <div class="flex items-center gap-3">
                                        <span
                                            class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-muted text-xs font-semibold text-muted-foreground">
                                            <?= strtoupper(substr($appraisal_info->fullname, 0, 2)) ?>
                                        </span>
                                        <div>
                                            <div class="text-sm font-semibold text-foreground">
                                                <?= btn_modal(
																'admin/performance/appraisal_details/' . $appraisal_info->performance_appraisal_id,
																html_escape($appraisal_info->fullname),
																lang('performance_appraisal_details'),
																'lg',
																'',
																array('class' => 'inline text-sm font-semibold text-foreground hover:text-primary')
															) ?>
                                            </div>
                                            <div class="text-xs text-muted-foreground"><?= lang('emp_id') ?>:
                                                <?= $appraisal_info->employment_id ?></div>
                                        </div>
                                    </div>
                                    <?= btn_modal(
													'admin/performance/appraisal_details/' . $appraisal_info->performance_appraisal_id,
													'',
													lang('performance_appraisal_details'),
													'lg',
													'eye',
													array('class' => 'inline-flex items-center justify-center rounded-md border border-border bg-card px-2 py-1 text-xs font-semibold text-foreground hover:bg-muted')
												) ?>
                                </div>
                                <div class="text-xs text-muted-foreground">
                                    <?= (!empty($appraisal_info->deptname) ? $appraisal_info->deptname . ' > ' . $appraisal_info->designations : $appraisal_info->designations)	 ?>
                                </div>
                                <?php if (!empty($appraisal_info->general_remarks)) { ?>
                                <div class="text-xs text-muted-foreground line-clamp-3">
                                    <?= $appraisal_info->general_remarks; ?></div>
                                <?php } ?>
                            </div>
                            <?php endforeach; ?>
                        </div>
                        <?php else : ?>
                        <div
                            class="rounded-xl border border-border bg-muted/30 p-6 text-sm font-semibold text-muted-foreground">
                            <?= lang('nothing_to_display') ?>
                        </div>
                        <?php endif; ?>
                    </div>
                </details>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
    var panels = Array.prototype.slice.call(document.querySelectorAll('.js-month-panel'));
    var pills = Array.prototype.slice.call(document.querySelectorAll('.js-month-pill'));

    function setActivePill(month) {
        pills.forEach(function(pill) {
            var isActive = pill.getAttribute('data-month') === month;
            pill.classList.toggle('bg-indigo-600', isActive);
            pill.classList.toggle('text-white', isActive);
            pill.classList.toggle('shadow-sm', isActive);
            pill.classList.toggle('bg-muted', !isActive);
            pill.classList.toggle('text-muted-foreground', !isActive);
        });
    }

    function openPanel(month) {
        panels.forEach(function(panel) {
            var isActive = panel.getAttribute('data-month') === month;
            if (isActive) {
                panel.setAttribute('open', 'open');
            } else {
                panel.removeAttribute('open');
            }
        });
        setActivePill(month);
    }

    panels.forEach(function(panel) {
        panel.addEventListener('toggle', function() {
            if (panel.open) {
                openPanel(panel.getAttribute('data-month'));
            }
        });
    });

    pills.forEach(function(pill) {
        pill.addEventListener('click', function() {
            openPanel(pill.getAttribute('data-month'));
        });
    });

    panels.forEach(function(panel) {
        panel.removeAttribute('open');
    });
    var current = panels.find(function(panel) {
        return panel.getAttribute('data-month') ===
            '<?= date('F', safe_strtotime($year . '-' . $current_month)) ?>';
    });
    if (current) {
        openPanel(current.getAttribute('data-month'));
    } else if (panels[0]) {
        openPanel(panels[0].getAttribute('data-month'));
    }
});
</script>
