<?= message_box('success'); ?>
<?= message_box('error'); ?>

<?php
$created = can_action('86', 'created');
$edited = can_action('86', 'edited');
$can_manage = (!empty($created) || !empty($edited));

$department_cards = array();

if (!empty($all_department_info)) {
    foreach ($all_department_info as $akey => $v_department_info) {
        if (empty($v_department_info)) {
            continue;
        }
        $deptname = !empty($all_dept_info[$akey]->deptname) ? $all_dept_info[$akey]->deptname : lang('undefined_department');
        $rows = array();
        foreach ($v_department_info as $designation) {
            if (empty($designation->designations)) {
                continue;
            }
            $rows[] = $designation;
        }
        if (!empty($rows)) {
            $department_cards[] = array(
                'name' => $deptname,
                'rows' => $rows,
            );
        }
    }
}
?>

<div class="space-y-6">
    <?php if (!empty($department_cards)) { ?>
        <div class="grid grid-cols-1 gap-6 2xl:grid-cols-2">
            <?php foreach ($department_cards as $department_card) { ?>
                <div class="rounded-2xl border border-border bg-card shadow-sm">
                    <div class="flex items-start justify-between gap-4 border-b border-border px-5 py-4">
                        <div>
                            <p class="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('department') ?></p>
                            <h3 class="mt-1 text-lg font-semibold text-foreground"><?= html_escape($department_card['name']) ?></h3>
                        </div>
                        <span class="inline-flex items-center rounded-full border border-border bg-background px-3 py-1 text-[11px] font-semibold text-muted-foreground">
                            <?= count($department_card['rows']) . ' ' . lang('designation') ?>
                        </span>
                    </div>
                    <div class="divide-y divide-border">
                        <?php foreach ($department_card['rows'] as $index => $designation) { ?>
                            <div class="flex items-center justify-between gap-4 px-5 py-4">
                                <div class="min-w-0">
                                    <div class="flex items-center gap-3">
                                        <span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-primary/10 text-xs font-semibold text-primary">
                                            <?= $index + 1 ?>
                                        </span>
                                        <div class="min-w-0">
                                            <p class="truncate text-sm font-semibold text-foreground"><?= html_escape($designation->designations) ?></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex shrink-0 items-center gap-2">
                                    <?= btn_modal(
                                        'admin/performance/indicator_details/' . $designation->designations_id,
                                        lang('view'),
                                        lang('view'),
                                        'lg',
                                        'eye',
                                        array('class' => 'btn_modal inline-flex items-center gap-2 rounded-lg border border-border bg-background px-3 py-2 text-xs font-semibold text-foreground hover:bg-muted mb-0')
                                    ) ?>
                                    <?php if ($can_manage) { ?>
                                        <a href="<?= base_url('admin/performance/create_indicator/' . $designation->designations_id) ?>"
                                           class="inline-flex items-center gap-2 rounded-lg bg-primary px-3 py-2 text-xs font-semibold text-primary-foreground shadow-sm hover:opacity-90">
                                            <i data-lucide="square-pen" class="h-4 w-4"></i>
                                            <?= lang('edit') ?>
                                        </a>
                                    <?php } ?>
                                </div>
                            </div>
                        <?php } ?>
                    </div>
                </div>
            <?php } ?>
        </div>
    <?php } else { ?>
        <div class="rounded-2xl border border-dashed border-border bg-card px-6 py-12 text-center shadow-sm">
            <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10 text-primary">
                <i data-lucide="clipboard-list" class="h-6 w-6"></i>
            </div>
            <h3 class="mt-4 text-lg font-semibold text-foreground"><?= lang('no_data_found') ?></h3>
            <p class="mt-2 text-sm text-muted-foreground">Create designations first, then define performance indicators for each role.</p>
        </div>
    <?php } ?>
</div>
