<div id="printableArea">
    <div class="modal-header flex items-center justify-between border-b border-border px-4 py-3">
        <h4 class="text-sm font-semibold text-foreground" id="myModalLabel"><?= lang('payment_details') ?></h4>
        <button class="hidden-print inline-flex items-center justify-center rounded-lg border border-red-200 bg-red-50 p-2 text-red-600 hover:bg-red-100 dark:border-red-900/40 dark:bg-red-900/20 dark:text-red-300 dark:hover:bg-red-900/30" type="button" data-toggle="tooltip" title="<?= lang('print') ?>"
                data-payroll-payment-print="1" data-print-target="printableArea"><i data-lucide="printer" class="h-4 w-4"></i></button>
    </div>
    <div class="mb-4">
        <style>
            .payment-kv{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.4rem 0;border-bottom:1px dashed hsl(var(--border))}
            .payment-kv:last-child{border-bottom:0}
            .payment-kv-label{margin:0;color:hsl(var(--muted-foreground));font-size:.8125rem;font-weight:600}
            .payment-kv-value{margin:0;text-align:right;color:hsl(var(--foreground));font-size:.875rem;font-weight:500}
        </style>
        <div class="show_print border-b dark:border-gray-600" style="width: 100%; margin-bottom: 30px">
            <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><!-- show when print start-->

        <div class="rounded-xl border border-border bg-card p-4 shadow-sm">
            <div class="grid gap-4 md:grid-cols-[160px_1fr]">
                <div class="flex justify-center md:justify-start">
                    <div class="overflow-hidden rounded-xl border border-border bg-muted p-1">
                        <?php if ($employee_info->avatar): ?>
                            <img src="<?php echo base_url() . $employee_info->avatar; ?>"
                                 class="h-[148px] w-[142px] rounded-lg object-cover">
                        <?php else: ?>
                            <img src="<?php echo base_url() ?>/img/user.png" alt="Employee_Image" class="h-[148px] w-[142px] rounded-lg object-cover">
                        <?php endif; ?>
                    </div>
                </div>
                <div class="space-y-3">
                    <h3 class="text-lg font-semibold text-foreground"><?php echo $employee_info->fullname; ?></h3>
                    <div class="h-px bg-border"></div>
                    <div class="overflow-x-auto">
                            <table class="min-w-[320px] text-sm">
                                <tr>
                                    <td class="py-1 pr-2 text-muted-foreground"><strong><?= lang('emp_id') ?></strong> :</td>
                                    <td class="py-1 font-medium text-foreground"><?php echo "$employee_info->employment_id"; ?></td>
                                </tr>
                                <tr>
                                    <td class="py-1 pr-2 text-muted-foreground"><strong><?= lang('departments') ?></strong> :</td>
                                    <td class="py-1 font-medium text-foreground"><?php echo "$employee_info->deptname"; ?></td>
                                </tr>
                                <tr>
                                    <td class="py-1 pr-2 text-muted-foreground"><strong><?= lang('designation') ?></strong> :</td>
                                    <td class="py-1 font-medium text-foreground"><?php echo "$employee_info->designations"; ?></td>
                                </tr>
                                <tr>
                                    <td class="py-1 pr-2 text-muted-foreground"><strong><?= lang('joining_date') ?></strong> :</td>
                                    <td class="py-1 font-medium text-foreground"><?= display_date($employee_info->joining_date) ?></td>
                                </tr>
                            </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-4 space-y-4">
            <!-- ********************************* Salary Details Panel ***********************-->
            <div class="panel panel-custom rounded-xl border border-border bg-card shadow-sm">
                <div class="panel-heading border-b border-border px-4 py-3">
                    <div class="panel-title">
                        <strong><?= lang('salary_details') ?></strong>
                    </div>
                </div>
                <div class="panel-body p-4">
                    <div class="payment-kv">
                        <label for="field-1" class="payment-kv-label"><strong><?= lang('salary_month') ?>
                                :</strong></label>
                        <p class="payment-kv-value"><?php echo date('F Y', safe_strtotime($payment_month)); ?></p>
                    </div>
                    <div class="payment-kv">
                        <label for="field-1"
                               class="payment-kv-label"><strong><?= lang('total') . ' ' . lang('present') ?>
                                :</strong> </label>
                        <p class="payment-kv-value"><?php echo $total_present . ' ' . lang('days') ?></p>
                    </div>
                    <?php
                    if (!empty($total_absent)) {
                        ?>
                        <div class="payment-kv">
                            <label for="field-1"
                                   class="payment-kv-label"><strong><?= lang('total') . ' ' . lang('absent') ?>
                                    :</strong> </label>
                            <p class="payment-kv-value"><?php echo $total_absent . ' ' . lang('days') ?></p>
                        </div>
                    <?php } ?>
                    <?php
                    $curency = $this->db->where('code', config_item('default_currency'))->get('tbl_currencies')->row();
                    if (!empty($total_hours)) :
                        ?>
                        <div class="payment-kv">
                            <label for="field-1"
                                   class="payment-kv-label"><strong><?php echo lang('hourly_grade'); ?>
                                    :</strong> </label>
                            <p class="payment-kv-value"><?php
                                echo $employee_info->hourly_grade;
                                ?></p>
                        </div>
                        <div class="payment-kv">
                            <label for="field-1"
                                   class="payment-kv-label"><strong><?php echo lang('hourly_rates'); ?>
                                    :</strong> </label>
                            <p class="payment-kv-value"><?php
                                echo display_money($employee_info->hourly_rate, $curency->symbol);
                                ?></p>
                        </div>
                        <div class="payment-kv">
                            <label for="field-1"
                                   class="payment-kv-label"><strong><?php echo lang('total_hour'); ?>
                                    :</strong> </label>
                            <p class="payment-kv-value">
                                <strong><?php echo $total_hours['total_hours'] . ' : ' . $total_hours['total_minutes'] . ' ' . lang('m'); ?></strong>
                            </p>
                        </div>

                        <?php
                        $total_hour = $total_hours['total_hours'];
                        $total_minutes = $total_hours['total_minutes'];
                        if ($total_hour > 0) {
                            $hours_ammount = $total_hour * $employee_info->hourly_rate;
                        } else {
                            $hours_ammount = 0;
                        }
                        if ($total_minutes > 0) {
                            $amount = round($employee_info->hourly_rate / 60, 2);
                            $minutes_ammount = $total_minutes * $amount;
                        } else {
                            $minutes_ammount = 0;
                        }
                        $total_hours_amount = round($hours_ammount + $minutes_ammount, 2);
                        ?>
                    <?php else: ?>
                        <div class="payment-kv">
                            <label for="field-1" class="payment-kv-label"><strong><?= lang('salary_grade') ?>
                                    :</strong>
                            </label>
                            <p class="payment-kv-value"><?php
                                echo $employee_info->salary_grade;
                                ?></p>
                        </div>
                        <div class="payment-kv">
                            <label for="field-1" class="payment-kv-label"><strong><?= lang('basic_salary') ?>
                                    :</strong>
                            </label>
                            <p class="payment-kv-value"><?php
                                echo display_money($employee_info->basic_salary, $curency->symbol);
                                ?></p>
                        </div>
                        <?php if (!empty($employee_info->overtime_salary)): ?>
                            <div class="payment-kv">
                                <label for="field-1" class="payment-kv-label"><strong><?= lang('overtime') ?>
                                        <small> (<?= lang('per_hour') ?>)</small>
                                        :</strong> </label>
                                <p class="payment-kv-value"><?php
                                    echo display_money($employee_info->overtime_salary, $curency->symbol);
                                    ?></p>
                            </div>
                            <div class="payment-kv">
                                <label for="field-1"
                                       class="payment-kv-label"><strong><?php echo lang('overtime_hour'); ?>
                                        :</strong> </label>
                                <p class="payment-kv-value">
                                    <strong><?php echo $overtime_info['overtime_hours'] . ' : ' . $overtime_info['overtime_minutes'] . ' ' . lang('m'); ?></strong>
                                </p>
                            </div>
                            <div class="payment-kv">
                                <label for="field-1"
                                       class="payment-kv-label"><strong><?= lang('overtime_amount') ?>
                                        :</strong> </label>
                                <p class="payment-kv-value"><?php
                                    if (!empty($overtime_info)) {
                                        $overtime_hour = $overtime_info['overtime_hours'];
                                        $overtime_minutes = $overtime_info['overtime_minutes'];
                                        if ($overtime_hour > 0) {
                                            $ov_hours_ammount = $overtime_minutes * $employee_info->overtime_salary;
                                        } else {
                                            $ov_hours_ammount = 0;
                                        }
                                        if ($overtime_minutes > 0) {
                                            $ov_amount = round($employee_info->overtime_salary / 60, 2);
                                            $ov_minutes_ammount = $overtime_minutes * $ov_amount;
                                        } else {
                                            $ov_minutes_ammount = 0;
                                        }
                                        $overtime_amount = $ov_hours_ammount + $ov_minutes_ammount;
                                    }
                                    echo display_money($overtime_amount, $curency->symbol);
                                    ?></p>

                            </div>
                        <?php
                        endif;
                        ?>
                        <?php
                        if (!empty($overtime_amount)) {
                            $overtime_amount = $overtime_amount;
                        } else {
                            $overtime_amount = 0;
                        }
                        $total_hours_amount = $employee_info->basic_salary + $overtime_amount;
                    endif;
                    ?>

                    <?php
                    $total_award = 0;
                    if (!empty($award_info)) : foreach ($award_info as $v_award_info) :
                        ?>
                        <div class="payment-kv">
                            <label for="field-1" class="payment-kv-label"><strong><?= lang('award_name') ?>
                                    <small>( <?php echo $v_award_info->award_name; ?> )</small>
                                    :</strong> </label>
                            <p class="payment-kv-value"><?php
                                echo display_money($v_award_info->award_amount, $curency->symbol);
                                ?></p>
                        </div>
                        <?php
                        $total_award += $v_award_info->award_amount;
                    endforeach;
                        ?>
                    <?php endif; ?>

                    <!-- ******************-- Allowance Panel Start **************************-->
                    <?php
                    $total_allowance = 0;
                    if (!empty($allowance_info)):
                        ?>
                        <div class="mt-4">
                            <div class="panel panel-custom rounded-xl border border-border bg-card shadow-sm">
                                <div class="panel-heading border-b border-border px-4 py-3">
                                    <div class="panel-title">
                                        <strong><?= lang('allowances') ?></strong>
                                    </div>
                                </div>
                                <div class="panel-body p-4">
                                    <?php
                                    foreach ($allowance_info as $v_allowance) :
                                        ?>
                                        <div class="payment-kv">
                                            <label
                                                    class="payment-kv-label"><strong><?php echo $v_allowance->allowance_label ?>
                                                    : </strong></label>
                                            <p class="payment-kv-value">
                                                <?php echo display_money($v_allowance->allowance_value, $curency->symbol) ?></p>
                                        </div>
                                        <?php
                                        $total_allowance += $v_allowance->allowance_value;
                                    endforeach;
                                    ?>
                                </div>
                            </div>
                        </div><!-- ********************Allowance End ******************-->
                    <?php endif; ?>

                    <!-- ************** Deduction Panel Column  **************-->
                    <?php
                    $deduction = 0;
                    $advance_amount = 0;
                    if (!empty($advance_salary['advance_amount']) || !empty($deduction_info)):
                        ?>
                        <div class="mt-4">
                            <div class="panel panel-custom rounded-xl border border-border bg-card shadow-sm">
                                <div class="panel-heading border-b border-border px-4 py-3">
                                    <div class="panel-title">
                                        <strong><?= lang('deductions') ?></strong>
                                    </div>
                                </div>
                                <div class="panel-body p-4">
                                    <?php if (!empty($advance_salary['advance_amount'])) : ?>
                                        <div class="payment-kv">
                                            <label for="field-1"
                                                   class="payment-kv-label"><strong><?= lang('advance_salary') ?>
                                                    :</strong> </label>
                                            <p class="payment-kv-value"><?php
                                                echo display_money($advance_salary['advance_amount'], $curency->symbol);
                                                ?></p>
                                        </div>
                                    <?php endif;
                                    ?>
                                    <?php
                                    if (!empty($advance_salary['advance_amount'])) {
                                        $advance_amount = $advance_salary['advance_amount'];
                                    } else {
                                        $advance_amount = 0;
                                    }
                                    ?>
                                    <?php
                                    if (!empty($deduction_info)):foreach ($deduction_info as $v_deduction):
                                        ?>
                                        <div class="payment-kv">
                                            <label
                                                    class="payment-kv-label"><strong><?php echo $v_deduction->deduction_label; ?>
                                                    : </strong></label>
                                            <p class="payment-kv-value"><?php
                                                echo display_money($v_deduction->deduction_value, $curency->symbol)
                                                ?></p>
                                        </div>
                                        <?php
                                        $deduction += $v_deduction->deduction_value;
                                    endforeach;
                                        ?>
                                    <?php endif;
                                    $main_salary = $total_hours_amount + $total_allowance - $deduction;
                                    $per_day_salary = $main_salary / $total_working_days;
                                    $total_absent_salary = $per_day_salary * $total_absent;
                                    $deduction += $total_absent_salary;
                                    ?>
                                    <?php if (!empty($total_absent_salary)) : ?>
                                        <div class="payment-kv">
                                            <label for="field-1"
                                                   class="payment-kv-label"><strong><?= lang('absent') . ' ' . lang('deduction') ?>
                                                    :</strong> </label>
                                            <p class="payment-kv-value"><?php
                                                echo display_money($total_absent_salary, $curency->symbol);
                                                ?></p>
                                        </div>
                                    <?php endif;
                                    ?>
                                </div>
                            </div>
                        </div><!-- ****************** Deduction End  *******************-->
                    <?php endif; ?>
                </div>
            </div><!-- ***************** Salary Details  Ends *********************-->
            <!-- ************** Total Salary Details Start  **************-->
            <div class="md:ml-auto md:w-2/3">
                <div class="panel panel-info rounded-xl border border-border bg-muted/40">
                    <div class="panel-heading border-b border-border px-4 py-3">
                        <div class="panel-title">
                            <strong><?= lang('total_salary_details') ?></strong>
                        </div>
                    </div>
                    <div class="panel-body p-4">

                        <div class="payment-kv">
                            <label class="payment-kv-label"><strong><?= lang('gross_salary') ?>
                                    : </strong></label>
                            <p class="payment-kv-value"><?php
                                $gross = $total_hours_amount + $total_award + $total_allowance;
                                echo display_money($gross, $curency->symbol);
                                ?></p>
                        </div>
                        <div class="payment-kv">
                            <label class="payment-kv-label"><strong><?= lang('total_deduction') ?>
                                    : </strong></label>
                            <p class="payment-kv-value"><?php
                                $total_deduction = $advance_amount + $deduction;
                                echo display_money($total_deduction, $curency->symbol);
                                ?></p>
                        </div>

                        <div class="payment-kv">
                            <label class="payment-kv-label"><strong><?= lang('net_salary') ?> : </strong></label>
                            <p class="payment-kv-value"><?php
                                $net_salary = $gross - $total_deduction;
                                echo display_money($net_salary, $curency->symbol);
                                ?></p>
                        </div>
                        <?php if (!empty($salary_payment_info->fine_deduction)): ?>
                            <div class="payment-kv">
                                <label class="payment-kv-label"><strong> <?= lang('fine_deduction') ?> : </strong></label>
                                <p class="payment-kv-value"><?php
                                    echo display_money($salary_payment_info->fine_deduction, $curency->symbol);
                                    ?></p>
                            </div>
                        <?php endif; ?>
                        <div class="payment-kv">
                            <label class="payment-kv-label"><strong><?= lang('paid_amount') ?> : </strong></label>
                            <p class="payment-kv-value"><?php
                                if (!empty($salary_payment_info->fine_deduction)) {
                                    $paid_amount = $net_salary - $salary_payment_info->fine_deduction;
                                } else {
                                    $paid_amount = $net_salary;
                                }
                                echo display_money($paid_amount, $curency->symbol);
                                ?></p>
                        </div>
                    </div>
                </div>
            </div><!-- ****************** Total Salary Details End  *******************-->
        </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>
