<?= message_box('success'); ?>
<?= message_box('error'); ?>
<?php
$created = can_action('86', 'created');
$edited = can_action('86', 'edited');
$can_manage = (!empty($created) || !empty($edited));
$is_edit = !empty($indicator_info_by_id);

$level_options_full = array(
    '' => lang('none'),
    '1' => lang('beginner'),
    '2' => lang('intermediate'),
    '3' => lang('advanced'),
    '4' => lang('expert_leader'),
);
$level_options_three = array(
    '' => lang('none'),
    '1' => lang('beginner'),
    '2' => lang('intermediate'),
    '3' => lang('advanced'),
);
$technical_fields = array(
    'customer_experiece_management' => array('label' => lang('customer_experience_management'), 'options' => $level_options_full, 'icon' => 'users'),
    'marketing' => array('label' => lang('marketing'), 'options' => $level_options_full, 'icon' => 'megaphone'),
    'management' => array('label' => lang('management'), 'options' => $level_options_full, 'icon' => 'briefcase-business'),
    'administration' => array('label' => lang('administration'), 'options' => $level_options_full, 'icon' => 'folders'),
    'presentation_skill' => array('label' => lang('presentation_skill'), 'options' => $level_options_full, 'icon' => 'presentation'),
    'quality_of_work' => array('label' => lang('quality_of_work'), 'options' => $level_options_full, 'icon' => 'badge-check'),
    'efficiency' => array('label' => lang('efficiency'), 'options' => $level_options_full, 'icon' => 'gauge'),
);
$behaviour_fields = array(
    'integrity' => array('label' => lang('integrity'), 'options' => $level_options_three, 'icon' => 'shield-check'),
    'professionalism' => array('label' => lang('professionalism'), 'options' => $level_options_three, 'icon' => 'badge-check'),
    'team_work' => array('label' => lang('team_work'), 'options' => $level_options_three, 'icon' => 'users-round'),
    'critical_thinking' => array('label' => lang('critical_thinking'), 'options' => $level_options_three, 'icon' => 'brain'),
    'conflict_management' => array('label' => lang('conflict_management'), 'options' => $level_options_three, 'icon' => 'scale'),
    'attendance' => array('label' => lang('attendance'), 'options' => $level_options_three, 'icon' => 'calendar-check-2'),
    'ability_to_meed_deadline' => array('label' => lang('ability_to_meet_deadline'), 'options' => $level_options_three, 'icon' => 'alarm-clock-check'),
);

$selected_designation_id = !empty($indicator_info_by_id->designations_id) ? $indicator_info_by_id->designations_id : '';
$selected_designation_label = '';
$designation_groups = array();
$designation_count = 0;
if (!empty($all_department_info)) {
    foreach ($all_department_info as $dept_name => $v_department_info) {
        if (empty($v_department_info)) {
            continue;
        }
        $group_label = !empty($all_dept_info[$dept_name]->deptname) ? $all_dept_info[$dept_name]->deptname : lang('undefined_department');
        $items = array();
        foreach ($v_department_info as $designation) {
            if (empty($designation->designations)) {
                continue;
            }
            $designation_count++;
            $items[] = array(
                'id' => (string) $designation->designations_id,
                'text' => (string) $designation->designations,
                'name' => (string) $designation->designations,
                'meta' => (string) $group_label,
            );
            if ((string) $designation->designations_id === (string) $selected_designation_id) {
                $selected_designation_label = $designation->designations;
            }
        }
        if (!empty($items)) {
            $designation_groups[] = array(
                'label' => $group_label,
                'items' => $items,
            );
        }
    }
}
?>

<div class="space-y-6">
    <?php if ($can_manage) { ?>
        <div class="grid gap-6 xl:grid-cols-[minmax(0,1.9fr)_300px]">
            <div class="rounded-2xl border border-border bg-card shadow-sm">
                <div class="p-5">
                    <form role="form" data-parsley-validate="" novalidate="" enctype="multipart/form-data"
                          action="<?php echo base_url() ?>admin/performance/save_performance_indicator/<?php
                          if (!empty($indicator_info_by_id->performance_indicator_id)) {
                              echo $indicator_info_by_id->performance_indicator_id;
                          }
                          ?>"
                          method="post" class="space-y-6">
                        <div class="rounded-2xl border border-border bg-background/60 p-5">
                            <div class="mb-4">
                                <p class="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('designation') ?></p>
                                <h3 class="mt-1 text-base font-semibold text-foreground">Select the role benchmark profile</h3>
                                <p class="mt-1 text-sm text-muted-foreground">Choose the designation first, then define the required technical and behavioural levels for that role.</p>
                            </div>
                            <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_220px]">
                                <?= form_grouped_lookup_group(
                                    'designations_id',
                                    lang('designation'),
                                    $designation_groups,
                                    $selected_designation_id,
                                    $selected_designation_label,
                                    true,
                                    array('id' => 'indicator_designation_id'),
                                    '',
                                    array('helper' => 'Search and select the designation to assign this indicator set.')
                                ); ?>
                                <div class="rounded-xl border border-border bg-card px-4 py-4 shadow-sm">
                                    <p class="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">Available Roles</p>
                                    <p class="mt-2 text-2xl font-semibold text-foreground"><?= $designation_count ?></p>
                                    <p class="mt-1 text-xs text-muted-foreground">Designation options across all departments</p>
                                </div>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 gap-6 2xl:grid-cols-2">
                            <div class="rounded-2xl border border-border bg-card shadow-sm">
                                <div class="border-b border-border px-5 py-4">
                                    <div class="flex items-center justify-between gap-3">
                                        <div>
                                            <h3 class="text-base font-semibold text-foreground"><?= lang('technical_competency') ?></h3>
                                            <p class="mt-1 text-xs text-muted-foreground">Set the expected functional capability for this designation.</p>
                                        </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">1-4 scale</span>
                                    </div>
                                </div>
                                <div class="space-y-3 p-5">
                                    <?php foreach ($technical_fields as $name => $config) :
                                        $selected = !empty($indicator_info_by_id->{$name}) ? $indicator_info_by_id->{$name} : '';
                                        ?>
                                        <div class="rounded-xl border border-border bg-background/70 p-4">
                                            <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                                                <div class="flex items-center gap-3">
                                                    <span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10 text-primary">
                                                        <i data-lucide="<?= $config['icon'] ?>" class="h-4 w-4"></i>
                                                    </span>
                                                    <div>
                                                        <p class="text-sm font-semibold text-foreground"><?= $config['label'] ?></p>
                                                        <p class="mt-1 text-xs text-muted-foreground">Target proficiency level</p>
                                                    </div>
                                                </div>
                                                <div class="w-full lg:w-44">
                                                    <?= form_select_group($name, '', $config['options'], $selected, false, array('multiple' => false, 'data-search' => false), '', ''); ?>
                                                </div>
                                            </div>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                            </div>

                            <div class="rounded-2xl border border-border bg-card shadow-sm">
                                <div class="border-b border-border px-5 py-4">
                                    <div class="flex items-center justify-between gap-3">
                                        <div>
                                            <h3 class="text-base font-semibold text-foreground"><?= lang('behavioural_competency') ?> / <?= lang('organizational') ?></h3>
                                            <p class="mt-1 text-xs text-muted-foreground">Set the expected behavioural standard for team and culture alignment.</p>
                                        </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">1-3 scale</span>
                                    </div>
                                </div>
                                <div class="space-y-3 p-5">
                                    <?php foreach ($behaviour_fields as $name => $config) :
                                        $selected = !empty($indicator_info_by_id->{$name}) ? $indicator_info_by_id->{$name} : '';
                                        ?>
                                        <div class="rounded-xl border border-border bg-background/70 p-4">
                                            <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                                                <div class="flex items-center gap-3">
                                                    <span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-500/10 text-emerald-600">
                                                        <i data-lucide="<?= $config['icon'] ?>" class="h-4 w-4"></i>
                                                    </span>
                                                    <div>
                                                        <p class="text-sm font-semibold text-foreground"><?= $config['label'] ?></p>
                                                        <p class="mt-1 text-xs text-muted-foreground">Expected behavioural standard</p>
                                                    </div>
                                                </div>
                                                <div class="w-full lg:w-44">
                                                    <?= form_select_group($name, '', $config['options'], $selected, false, array('multiple' => false, 'data-search' => false), '', ''); ?>
                                                </div>
                                            </div>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                        </div>

                        <div class="flex items-center justify-end gap-2 border-t border-border pt-4">
                            <?php if ($is_edit) { ?>
                                <button type="submit"
                                        class="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-xs font-semibold text-primary-foreground shadow-sm hover:opacity-90">
                                    <i data-lucide="save" class="h-4 w-4"></i>
                                    <?= lang('updates') ?>
                                </button>
                                <a href="<?= base_url('admin/performance/performance_indicator') ?>"
                                   class="inline-flex items-center gap-2 rounded-lg border border-border bg-background px-4 py-2 text-xs font-semibold text-foreground hover:bg-muted">
                                    <i data-lucide="arrow-left" class="h-4 w-4"></i>
                                    <?= lang('cancel') ?>
                                </a>
                            <?php } else { ?>
                                <button type="submit"
                                        class="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-xs font-semibold text-primary-foreground shadow-sm hover:opacity-90">
                                    <i data-lucide="save" class="h-4 w-4"></i>
                                    <?= lang('save') ?>
                                </button>
                            <?php } ?>
                        </div>
                    </form>
                </div>
            </div>

            <div class="space-y-4">
                <div class="rounded-2xl border border-border bg-card shadow-sm">
                    <div class="border-b border-border px-5 py-4">
                        <div class="flex items-center gap-2 text-sm font-semibold text-foreground">
                            <i data-lucide="badge-help" class="h-5 w-5"></i>
                            <span>Scoring Guide</span>
                        </div>
                    </div>
                    <div class="space-y-3 p-5 text-sm text-muted-foreground">
                        <div class="rounded-xl border border-border bg-background/70 p-4">
                            <p class="font-semibold text-foreground">Technical scale</p>
                            <p class="mt-1">1 = beginner, 2 = intermediate, 3 = advanced, 4 = expert/leader.</p>
                        </div>
                        <div class="rounded-xl border border-border bg-background/70 p-4">
                            <p class="font-semibold text-foreground">Behavioural scale</p>
                            <p class="mt-1">1 = beginner, 2 = intermediate, 3 = advanced for behavioural consistency.</p>
                        </div>
                        <div class="rounded-xl border border-border bg-background/70 p-4">
                            <p class="font-semibold text-foreground">Recommendation</p>
                            <p class="mt-1">Keep scores realistic to the designation level so appraisals remain comparable across teams.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <?php } ?>
</div>
