<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<?php
$currency = $this->db->where('code', config_item('default_currency'))->get('tbl_currencies')->row();
$currency_symbol = !empty($currency->symbol) ? $currency->symbol : '$';

$basic_salary = !empty($emp_salary_info->basic_salary) ? (float) $emp_salary_info->basic_salary : 0;
$overtime_salary = !empty($emp_salary_info->overtime_salary) ? (float) $emp_salary_info->overtime_salary : 0;
$total_allowance = 0;
$total_deduction = 0;

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

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

$gross_salary = $basic_salary + $total_allowance;
$net_salary = $gross_salary - $total_deduction;
$employee_id = !empty($emp_salary_info->employment_id) ? $emp_salary_info->employment_id : (!empty($emp_salary_info->user_id) ? 'EMP-' . str_pad($emp_salary_info->user_id, 5, '0', STR_PAD_LEFT) : '-');
$grade_label = !empty($emp_salary_info->salary_grade) ? $emp_salary_info->salary_grade : (!empty($emp_salary_info->hourly_grade) ? $emp_salary_info->hourly_grade : lang('not_set'));
$joining_date = !empty($emp_salary_info->joining_date) ? display_date($emp_salary_info->joining_date) : '-';
$department_name = !empty($emp_salary_info->deptname) ? $emp_salary_info->deptname : '-';
$designation_name = !empty($emp_salary_info->designations) ? $emp_salary_info->designations : '-';
$logo_path = base_url() . config_item('company_logo');
$company_name = config_item('company_name');
?>

<div id="printableArea">
    <div class="border-b border-border bg-card px-5 py-4">
        <div class="flex items-start justify-between gap-4">
            <div class="flex min-w-0 items-center gap-3">
                <div class="flex h-10 w-10 items-center justify-center overflow-hidden rounded-lg bg-primary/10 text-primary">
                    <?php if (!empty(config_item('company_logo'))) : ?>
                        <img src="<?= $logo_path ?>" alt="<?= html_escape($company_name) ?>" class="h-full w-full object-contain">
                    <?php else : ?>
                        <span class="text-sm font-bold"><?= strtoupper(substr($company_name, 0, 1)) ?></span>
                    <?php endif; ?>
                </div>
                <div class="min-w-0">
                    <h4 class="truncate text-[1rem] font-semibold text-foreground"><?= html_escape($company_name) ?></h4>
                    <p class="text-[0.85rem] text-muted-foreground"><?= config_item('company_email') ? html_escape(config_item('company_email')) : 'Ultimate Project Manager CRM PRO' ?></p>
                </div>
            </div>

            <div class="flex items-center gap-2">
                <button class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border bg-background text-muted-foreground transition hover:bg-muted hover:text-foreground"
                    type="button"
                    title="<?= lang('print') ?>"
                    data-employee-salary-print="1"
                    data-print-target="printableArea">
                    <i data-lucide="printer" class="h-4 w-4"></i>
                </button>
                <a href="<?= base_url('admin/payroll/make_pdf/' . $emp_salary_info->user_id) ?>"
                    class="inline-flex items-center gap-2 rounded-xl border border-border bg-background px-4 py-2 text-[0.95rem] font-medium text-foreground shadow-sm transition hover:bg-muted"
                    title="<?= lang('download') ?>">
                    <i data-lucide="download" class="h-4 w-4"></i>
                    <span>Export PDF</span>
                </a>
            </div>
        </div>
    </div>

    <div class="bg-background px-5 py-6">
        <div class="space-y-6">
            <div class="rounded-2xl border border-border bg-card p-5 shadow-sm">
                <div class="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
                    <div class="flex min-w-0 items-center gap-5">
                        <div class="flex h-24 w-24 shrink-0 items-center justify-center overflow-hidden rounded-full border-4 border-background bg-muted shadow-sm">
                            <?php if (!empty($emp_salary_info->avatar)) : ?>
                                <img src="<?= base_url() . $emp_salary_info->avatar ?>" alt="<?= html_escape($emp_salary_info->fullname) ?>" class="h-full w-full object-cover">
                            <?php else : ?>
                                <img src="<?= base_url('img/user.png') ?>" alt="Employee" class="h-14 w-14 object-contain opacity-70">
                            <?php endif; ?>
                        </div>

                        <div class="min-w-0">
                            <h3 class="truncate text-[1.55rem] font-semibold text-foreground"><?= html_escape($emp_salary_info->fullname) ?></h3>
                            <div class="mt-2 inline-flex rounded-full border border-primary/15 bg-primary/10 px-3 py-1 text-[0.85rem] font-semibold text-primary">
                                <?= html_escape($grade_label) ?>
                            </div>
                        </div>
                    </div>

                    <div class="lg:text-right">
                        <div class="text-[0.8rem] font-semibold uppercase tracking-[0.12em] text-muted-foreground"><?= lang('emp_id') ?></div>
                        <div class="mt-1 text-[1.2rem] font-semibold text-foreground"><?= html_escape($employee_id) ?></div>
                    </div>
                </div>

                <div class="mt-5 border-t border-border pt-5">
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
                        <div>
                            <div class="flex items-center gap-2 text-[0.8rem] font-semibold uppercase tracking-[0.1em] text-muted-foreground">
                                <i data-lucide="briefcase-business" class="h-4 w-4"></i>
                                <span><?= lang('departments') ?></span>
                            </div>
                            <div class="mt-2 text-[1.1rem] font-semibold text-foreground"><?= html_escape($department_name) ?></div>
                        </div>

                        <div>
                            <div class="flex items-center gap-2 text-[0.8rem] font-semibold uppercase tracking-[0.1em] text-muted-foreground">
                                <i data-lucide="building-2" class="h-4 w-4"></i>
                                <span><?= lang('designation') ?></span>
                            </div>
                            <div class="mt-2 text-[1.1rem] font-semibold text-foreground"><?= html_escape($designation_name) ?></div>
                        </div>

                        <div>
                            <div class="flex items-center gap-2 text-[0.8rem] font-semibold uppercase tracking-[0.1em] text-muted-foreground">
                                <i data-lucide="calendar-days" class="h-4 w-4"></i>
                                <span><?= lang('joining_date') ?></span>
                            </div>
                            <div class="mt-2 text-[1.1rem] font-semibold text-foreground"><?= html_escape($joining_date) ?></div>
                        </div>

                        <div>
                            <div class="flex items-center gap-2 text-[0.8rem] font-semibold uppercase tracking-[0.1em] text-muted-foreground">
                                <i data-lucide="clock-3" class="h-4 w-4"></i>
                                <span><?= lang('overtime_rate') ?></span>
                            </div>
                            <div class="mt-2 text-[1.1rem] font-semibold text-foreground"><?= $overtime_salary > 0 ? display_money($overtime_salary, $currency_symbol) . ' / hr' : '-' ?></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
                <div>
                    <div class="flex items-center gap-2 text-[1.05rem] font-semibold uppercase tracking-[0.08em] text-foreground">
                        <i data-lucide="badge-dollar-sign" class="h-4 w-4 text-primary"></i>
                        <span><?= lang('earnings') ?></span>
                    </div>
                    <div class="mt-3 border-t border-border pt-4">
                        <div class="space-y-4">
                            <div class="flex items-center justify-between gap-4 text-[1.05rem] font-semibold text-foreground">
                                <span><?= lang('basic_salary') ?></span>
                                <span><?= display_money($basic_salary, $currency_symbol) ?></span>
                            </div>

                            <?php if (!empty($salary_allowance_info)) : ?>
                                <div class="pt-2">
                                    <div class="text-[0.8rem] font-semibold uppercase tracking-[0.1em] text-muted-foreground"><?= lang('allowances') ?></div>
                                    <div class="mt-3 space-y-3">
                                        <?php foreach ($salary_allowance_info as $allowance) : ?>
                                            <div class="flex items-center justify-between gap-4 text-[1rem] text-foreground">
                                                <span><?= html_escape($allowance->allowance_label) ?></span>
                                                <span class="font-medium"><?= display_money($allowance->allowance_value, $currency_symbol) ?></span>
                                            </div>
                                        <?php endforeach; ?>
                                    </div>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>

                <div>
                    <div class="flex items-center gap-2 text-[1.05rem] font-semibold uppercase tracking-[0.08em] text-foreground">
                        <i data-lucide="badge-percent" class="h-4 w-4 text-primary"></i>
                        <span><?= lang('deductions') ?></span>
                    </div>
                    <div class="mt-3 border-t border-border pt-4">
                        <?php if (!empty($salary_deduction_info)) : ?>
                            <div class="space-y-3">
                                <?php foreach ($salary_deduction_info as $deduction) : ?>
                                    <div class="flex items-center justify-between gap-4 text-[1rem] text-foreground">
                                        <span><?= html_escape($deduction->deduction_label) ?></span>
                                        <span class="font-medium text-destructive">- <?= display_money($deduction->deduction_value, $currency_symbol) ?></span>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        <?php else : ?>
                            <div class="text-[0.95rem] text-muted-foreground"><?= lang('nothing_to_display') ?></div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>

            <div class="rounded-2xl border border-border bg-card px-6 py-5 shadow-sm">
                <div class="grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_220px] lg:items-center">
                    <div class="grid gap-3 text-[1rem]">
                        <div class="flex items-center justify-between gap-4">
                            <span class="text-muted-foreground"><?= lang('gross_salary') ?></span>
                            <span class="font-semibold text-foreground"><?= display_money($gross_salary, $currency_symbol) ?></span>
                        </div>
                        <div class="flex items-center justify-between gap-4">
                            <span class="text-muted-foreground"><?= lang('total_deduction') ?></span>
                            <span class="font-semibold text-destructive">- <?= display_money($total_deduction, $currency_symbol) ?></span>
                        </div>
                    </div>

                    <div class="border-t border-border pt-4 text-right lg:border-l lg:border-t-0 lg:pl-8 lg:pt-0">
                        <div class="text-[0.8rem] font-semibold uppercase tracking-[0.14em] text-primary"><?= lang('net_salary') ?></div>
                        <div class="mt-2 text-[2.25rem] font-semibold tracking-[-0.03em] text-foreground"><?= display_money($net_salary, $currency_symbol) ?></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal-footer hidden-print flex items-center justify-end border-t border-border bg-card px-5 py-4">
    <button type="button" class="inline-flex items-center gap-2 rounded-xl border border-border bg-background px-4 py-2 text-[0.95rem] font-medium text-foreground shadow-sm transition hover:bg-muted" data-dismiss="modal">
        <i data-lucide="x" class="h-4 w-4"></i>
        Close
    </button>
</div>

<textarea class="hidden" style="display:none" data-employee-salary-print-html><?= html_escape(isset($employee_salary_print_html) ? $employee_salary_print_html : '') ?></textarea>
<script type="text/javascript">
window.employeeSalaryPrintHtml = <?= json_encode(isset($employee_salary_print_html) ? $employee_salary_print_html : '', JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP) ?>;
window.printEmployeeSalaryDetails = window.printEmployeeSalaryDetails || function(trigger, printableArea) {
    var source = trigger && trigger.closest ? trigger.closest('.modal-content, .modal, body') : document;
    var textarea = source && source.querySelector ? source.querySelector('[data-employee-salary-print-html]') : document.querySelector('[data-employee-salary-print-html]');
    var fallback = document.getElementById(printableArea || 'printableArea');
    var printHtml = (textarea ? textarea.value : '') || window.employeeSalaryPrintHtml || (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.printEmployeeSalaryDetails(document, printableArea);
}
if (!window.erpEmployeeSalaryPrintBound) {
    window.erpEmployeeSalaryPrintBound = true;
    document.addEventListener('click', function(event) {
        var trigger = event.target.closest ? event.target.closest('[data-employee-salary-print]') : null;
        if (!trigger) return;
        event.preventDefault();
        window.printEmployeeSalaryDetails(trigger, trigger.getAttribute('data-print-target') || 'printableArea');
    });
}
</script>
