<?= message_box('success'); ?>
<?= message_box('error'); ?>
<?php $selected_year = !empty($year) ? $year : date('Y'); ?>
<style>
.js-month-pill {
    cursor: pointer;
}

.js-month-panel {
    display: none;
}

.js-month-panel[open] {
    display: block;
}
</style>

<div class="space-y-4">
<div id="advance_salary" class="space-y-4">
    <div class="rounded-2xl border border-border bg-card shadow-sm">
        <div class="p-5">
            <div class="space-y-4">
                <div class="flex flex-col gap-4 border-b border-border pb-4 lg:flex-row lg:items-start lg:justify-between">
                    <div class="min-w-0 flex-1 hidden-print">
                        <div class="flex flex-wrap gap-2">
                            <?php foreach ($provident_fund_info as $key => $v_provident_fund):
                                $month_name = date('F', safe_strtotime($selected_year . '-' . $key));
                                $is_active = ($current_month == $key);
                                ?>
                                <span
                                    class="js-month-pill rounded-full px-3 py-1 text-xs font-semibold <?= $is_active ? 'bg-indigo-600 text-white shadow-sm' : 'text-muted-foreground' ?>"
                                    data-month="<?= $month_name ?>">
                                    <?= $month_name; ?>
                                </span>
                            <?php endforeach; ?>
                        </div>
                    </div>

                    <div class="w-full lg:w-auto lg:min-w-[280px]">
                        <form id="existing_customer" action="<?php echo base_url() ?>admin/payroll/provident_fund" method="post" class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-end">
                            <label for="provident-fund-year" class="block w-full space-y-1 text-sm font-medium text-foreground sm:max-w-[180px]">                                
                                <input id="provident-fund-year" name="year" type="text"
                                    value="<?= html_escape($selected_year) ?>"
                                    class="years w-full rounded-lg border border-border bg-input px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/30 dark:focus:border-secondary dark:focus:ring-3 dark:focus:ring-secondary/30"
                                    data-format="Y">
                            </label>
                            <div class="sm:self-end">
                                <button type="submit" data-toggle="tooltip" data-placement="top" title="<?= lang('search') ?>"
                                        class="inline-flex w-full items-center justify-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 sm:w-auto">
                                    <i data-lucide="search" class="h-4 w-4"></i>
                                    <?= lang('search') ?>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="">
                <?php
                foreach ($provident_fund_info as $key => $v_provident_fund):
                    $month_name = date('F', safe_strtotime($selected_year . '-' . $key));
                    ?>
                    <div class="js-month-panel" data-month="<?php echo $month_name ?>">
                        <div class="rounded-xl border border-border bg-card shadow-sm">
                            <div class="border-b border-border px-4 py-3">
                                <div class="flex flex-wrap items-center justify-between gap-2 text-sm font-semibold text-foreground">
                                    <span class="inline-flex items-center gap-2">
                                        <i data-lucide="calendar" class="h-4 w-4"></i>
                                        <?php echo $month_name . ' ' . $selected_year; ?>
                                    </span>
                                    <div class="hidden-print">
                                        <?php echo btn_pdf('admin/payroll/provident_fund_pdf/' . $selected_year . '/' . $key); ?>
                                    </div>
                                </div>
                            </div>
                            <div class="overflow-x-auto">
                            <table class="min-w-full text-sm">
                                <thead class="bg-muted/40 text-xs uppercase tracking-wide text-muted-foreground">
                                <tr>
                                    <th class="px-4 py-3 text-left"><?= lang('emp_id') ?></th>
                                    <th class="px-4 py-3 text-left"><?= lang('name') ?></th>
                                    <th class="px-4 py-3 text-left"><?= lang('payment_date') ?></th>
                                    <th class="px-4 py-3 text-left"><?= lang('amount') ?></th>
                                </tr>
                                </thead>
                                <tbody class="divide-y divide-border [&>tr>td]:px-4 [&>tr>td]:py-3">
                                <?php
                                $total_amount = 0;
                                $curency = $this->db->where('code', config_item('default_currency'))->get('tbl_currencies')->row();
                                ?>
                                <?php if (!empty($v_provident_fund)): foreach ($v_provident_fund as $provident_fund) : ?>
                                    <tr>
                                        <td><?php echo $provident_fund->employment_id ?></td>
                                        <td><?php echo $provident_fund->fullname ?></td>
                                        <td><?= display_date($provident_fund->paid_date) ?></td>
                                        <td><?php echo display_money($provident_fund->salary_payment_deduction_value, $curency->symbol);
                                            $total_amount += $provident_fund->salary_payment_deduction_value;
                                            ?></td>

                                    </tr>
                                    <?php
                                    $key++;
                                endforeach;
                                    ?>
                                    <tr class="total_amount bg-muted/30">
                                        <td colspan="3" class="text-right">
                                            <strong><?= lang('total') . ' ' . lang('provident_fund') ?>
                                                : </strong></td>
                                        <td colspan="3" class="pl-2"><strong><?php
                                                echo display_money($total_amount, $curency->symbol);
                                                ?></strong></td>
                                    </tr>
                                <?php else : ?>
                                    <tr><td colspan="6"><strong><?= lang('nothing_to_display') ?></strong></td></tr>
                                <?php endif; ?>
                                </tbody>
                            </table>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div><!-- ************ Expense Report List End ************-->

    </div>
</div>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        var panels = Array.prototype.slice.call(document.querySelectorAll('.js-month-panel'));
        var pills = Array.prototype.slice.call(document.querySelectorAll('.js-month-pill'));

        function setActivePill(month) {
            pills.forEach(function(pill) {
                var isActive = pill.getAttribute('data-month') === month;
                pill.classList.toggle('bg-indigo-600', isActive);
                pill.classList.toggle('text-white', isActive);
                pill.classList.toggle('shadow-sm', isActive);
                pill.classList.toggle('bg-gray-200', !isActive);
                pill.classList.toggle('dark:bg-gray-700', !isActive);
                pill.classList.toggle('text-muted-foreground', !isActive);
            });
        }

        function openPanel(month) {
            panels.forEach(function(panel) {
                var isActive = panel.getAttribute('data-month') === month;
                if (isActive) {
                    panel.setAttribute('open', 'open');
                } else {
                    panel.removeAttribute('open');
                }
            });
            setActivePill(month);
        }

        panels.forEach(function(panel) {
            panel.addEventListener('toggle', function() {
                if (panel.open) {
                    openPanel(panel.getAttribute('data-month'));
                }
            });
        });

        pills.forEach(function(pill) {
            pill.addEventListener('click', function() {
                openPanel(pill.getAttribute('data-month'));
            });
        });

        panels.forEach(function(panel) {
            panel.removeAttribute('open');
        });
        var current = panels.find(function(panel) {
            return panel.getAttribute('data-month') ===
                '<?= date('F', safe_strtotime($selected_year . '-' . $current_month)) ?>';
        });
        if (current) {
            openPanel(current.getAttribute('data-month'));
        } else if (panels[0]) {
            openPanel(panels[0].getAttribute('data-month'));
        }
    });

    function advance_salary(advance_salary) {
        var printContents = document.getElementById(advance_salary).innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
    }
</script>
