<?php
$edited = can_action('94', 'edited');
$curency = $this->db->where('code', config_item('default_currency'))->get('tbl_currencies')->row();
$currency_symbol = !empty($curency->symbol) ? $curency->symbol : '$';
$basic_salary = !empty($salary_template_info->basic_salary) ? (float) $salary_template_info->basic_salary : 0;
$overtime_salary = !empty($salary_template_info->overtime_salary) ? (float) $salary_template_info->overtime_salary : 0;

$total_allowance = 0;
if (!empty($salary_allowance_info)) {
    foreach ($salary_allowance_info as $v_allowance_info) {
        $total_allowance += (float) $v_allowance_info->allowance_value;
    }
}

$total_deduction = 0;
if (!empty($salary_deduction_info)) {
    foreach ($salary_deduction_info as $v_deduction_info) {
        $total_deduction += (float) $v_deduction_info->deduction_value;
    }
}

$gross_salary = $basic_salary + $total_allowance;
$net_salary = $gross_salary - $total_deduction;
?>
<div id="printableArea">
    <div class="modal-header hidden-print flex items-center justify-between border-b border-border px-4 py-3">
        <h4 class="text-sm font-semibold text-foreground" id="myModalLabel"><?= lang('salary_template_details') ?></h4>
        <div class="flex items-center gap-2">
            <?php if (!empty($edited)) { ?>
                <a href="<?= base_url('admin/payroll/create_salarytemplate/' . $salary_template_info->salary_template_id) ?>" class="inline-flex items-center justify-center rounded-lg border border-indigo-200 bg-indigo-50 p-2 text-indigo-600 hover:bg-indigo-100 h-7" title="<?= lang('edit') ?>">
                    <i data-lucide="pencil" class="h-4 w-4"></i>
                </a>
            <?php } ?>
            <a href="<?= base_url('admin/payroll/salary_template_pdf/' . $salary_template_info->salary_template_id) ?>" class="inline-flex items-center justify-center rounded-lg border border-slate-200 bg-slate-50 p-2 text-slate-600 hover:bg-slate-100 h-7" title="<?= lang('download') ?>">
                <i data-lucide="file-down" class="h-4 w-4"></i>
            </a>
            <button class="inline-flex items-center justify-center rounded-lg border border-red-200 bg-red-50 p-2 text-red-600 hover:bg-red-100 h-7" type="button" data-toggle="tooltip" title="<?= lang('print') ?>" data-salary-template-print="1" data-print-target="printableArea"><i data-lucide="printer" class="h-4 w-4"></i></button>
        </div>
    </div>
    <div class="modal-body pb-5 space-y-6">

        <div class="show_print border-b dark:border-b-gray-600 pb-3">
            <table style="width: 100%; vertical-align: middle;">
                <tr>
                    <td style="width: 50px; border: 0px;">
                        <img style="width: 50px;height: 50px;margin-bottom: 5px;"
                            src="<?= base_url() . config_item('company_logo') ?>" alt="" class="img-circle" />
                    </td>

                    <td style="border: 0px;">
                        <p style="margin-left: 10px; font: 14px lighter;"><?= config_item('company_name') ?></p>
                    </td>
                </tr>
            </table>
        </div>

        <div class="rounded-2xl border border-border bg-card p-4 shadow-sm">
            <h5 class="mb-4 text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('salary_template_details') ?></h5>
            <div class="grid gap-3 sm:grid-cols-3">
                <div class="rounded-lg border border-border bg-background p-3">
                    <p class="text-[11px] uppercase tracking-wide text-muted-foreground"><?= lang('salary_grade') ?></p>
                    <p class="mt-1 text-sm font-semibold text-foreground"><?= html_escape($salary_template_info->salary_grade) ?></p>
                </div>
                <div class="rounded-lg border border-border bg-background p-3">
                    <p class="text-[11px] uppercase tracking-wide text-muted-foreground"><?= lang('basic_salary') ?></p>
                    <p class="mt-1 text-sm font-semibold text-foreground"><?= display_money($basic_salary, $currency_symbol) ?></p>
                </div>
                <div class="rounded-lg border border-border bg-background p-3">
                    <p class="text-[11px] uppercase tracking-wide text-muted-foreground"><?= lang('overtime') ?> (<?= lang('per_hour') ?>)</p>
                    <p class="mt-1 text-sm font-semibold text-foreground"><?= $overtime_salary > 0 ? display_money($overtime_salary, $currency_symbol) : '-' ?></p>
                </div>
            </div>
        </div>

        <div class="grid gap-5 lg:grid-cols-2">
            <div class="rounded-2xl border border-border bg-card shadow-sm">
                <div class="border-b border-border px-4 py-3">
                    <h5 class="text-sm font-semibold text-foreground"><?= lang('allowances') ?></h5>
                </div>
                <div class="space-y-2 p-4">
                    <?php if (!empty($salary_allowance_info)) : foreach ($salary_allowance_info as $v_allowance_info) : ?>
                        <div class="flex items-center justify-between rounded-lg border border-border bg-background px-3 py-2">
                            <span class="text-sm text-foreground"><?= html_escape($v_allowance_info->allowance_label) ?></span>
                            <span class="text-sm font-semibold text-foreground"><?= display_money($v_allowance_info->allowance_value, $currency_symbol) ?></span>
                        </div>
                    <?php endforeach;
                    else : ?>
                        <p class="text-sm text-muted-foreground"><?= lang('nothing_to_display') ?></p>
                    <?php endif; ?>
                </div>
            </div>

            <div class="rounded-2xl border border-border bg-card shadow-sm">
                <div class="border-b border-border px-4 py-3">
                    <h5 class="text-sm font-semibold text-foreground"><?= lang('deductions') ?></h5>
                </div>
                <div class="space-y-2 p-4">
                    <?php if (!empty($salary_deduction_info)) : foreach ($salary_deduction_info as $v_deduction_info) : ?>
                        <div class="flex items-center justify-between rounded-lg border border-border bg-background px-3 py-2">
                            <span class="text-sm text-foreground"><?= html_escape($v_deduction_info->deduction_label) ?></span>
                            <span class="text-sm font-semibold text-foreground"><?= display_money($v_deduction_info->deduction_value, $currency_symbol) ?></span>
                        </div>
                    <?php endforeach;
                    else : ?>
                        <p class="text-sm text-muted-foreground"><?= lang('nothing_to_display') ?></p>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <div class="rounded-2xl border border-border bg-muted/40 shadow-sm">
            <div class="border-b border-border px-4 py-3">
                <h5 class="text-sm font-semibold text-foreground"><?= lang('total_salary_details') ?></h5>
            </div>
            <div class="grid gap-3 p-4 sm:grid-cols-3">
                <div class="rounded-lg border border-border bg-background p-3">
                    <p class="text-[11px] uppercase tracking-wide text-muted-foreground"><?= lang('gross_salary') ?></p>
                    <p class="mt-1 text-sm font-semibold text-foreground"><?= display_money($gross_salary, $currency_symbol) ?></p>
                </div>
                <div class="rounded-lg border border-border bg-background p-3">
                    <p class="text-[11px] uppercase tracking-wide text-muted-foreground"><?= lang('total_deduction') ?></p>
                    <p class="mt-1 text-sm font-semibold text-foreground"><?= display_money($total_deduction, $currency_symbol) ?></p>
                </div>
                <div class="rounded-lg border border-emerald-200 bg-emerald-50 p-3 dark:border-emerald-900/50 dark:bg-emerald-950/25">
                    <p class="text-[11px] uppercase tracking-wide text-emerald-700 dark:text-emerald-300"><?= lang('net_salary') ?></p>
                    <p class="mt-1 text-sm font-semibold text-emerald-700 dark:text-emerald-300"><?= display_money($net_salary, $currency_symbol) ?></p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal-footer hidden-print flex items-center justify-end border-t border-border px-4 py-3">
    <button type="button" class="inline-flex items-center gap-2 rounded-lg border border-border bg-card px-3 py-2 text-xs font-semibold text-foreground hover:bg-muted" data-dismiss="modal">
        <i data-lucide="x" class="h-4 w-4"></i>
        <?= lang('close') ?>
    </button>
</div>
<textarea class="hidden" style="display:none" data-salary-template-print-html><?= html_escape(isset($salary_template_print_html) ? $salary_template_print_html : '') ?></textarea>
<script type="text/javascript">
window.salaryTemplatePrintHtml = <?= json_encode(isset($salary_template_print_html) ? $salary_template_print_html : '', JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP) ?>;
window.printSalaryTemplateDetails = window.printSalaryTemplateDetails || function(trigger, printableArea) {
    var source = trigger && trigger.closest ? trigger.closest('.modal-content, .modal, body') : document;
    var textarea = source && source.querySelector ? source.querySelector('[data-salary-template-print-html]') : document.querySelector('[data-salary-template-print-html]');
    var fallback = document.getElementById(printableArea || 'printableArea');
    var printHtml = (textarea ? textarea.value : '') || window.salaryTemplatePrintHtml || (fallback ? fallback.outerHTML : '');
    if (!printHtml) return false;

    var printWindow = window.open('', 'PRINT', 'height=900,width=1200');
    if (!printWindow) {
        if (typeof window.erpNativePrint === 'function') {
            window.erpNativePrint();
        } else if (typeof window.print === 'function') {
            window.print();
        }
        return false;
    }

    printWindow.document.open();
    printWindow.document.write(printHtml);
    printWindow.document.close();

    var printed = false;
    var doPrint = function() {
        if (printed || printWindow.closed) return;
        printed = true;
        printWindow.focus();
        if (typeof printWindow.print === 'function') {
            printWindow.print();
        }
        printWindow.close();
    };
    printWindow.onload = function() {
        printWindow.setTimeout(doPrint, 350);
    };
    printWindow.setTimeout(doPrint, 1000);
    return false;
};
function printDiv(printableArea) {
    return window.printSalaryTemplateDetails(document, printableArea);
}
if (!window.erpSalaryTemplatePrintBound) {
    window.erpSalaryTemplatePrintBound = true;
    document.addEventListener('click', function(event) {
        var trigger = event.target.closest ? event.target.closest('[data-salary-template-print]') : null;
        if (!trigger) return;
        event.preventDefault();
        window.printSalaryTemplateDetails(trigger, trigger.getAttribute('data-print-target') || 'printableArea');
    });
}
</script>
