<?php $__env->startSection('main-content'); ?>
<div class="max-w-7xl mx-auto pb-20 px-4" x-data="napsaManager()">
    
    <div class="flex justify-between items-end mb-8 border-b border-slate-900 pb-4">
        <div>
            <h1 class="text-3xl font-black text-slate-900">NAPSA Configuration</h1>
            <p class="text-[10px] font-bold text-slate-400 mt-1 ">Statutory Pension Management</p>
        </div>
        <button @click="openCreateModal()" class="bg-slate-900 text-white px-6 py-2.5 text-[10px] font-black hover:bg-slate-800 transition shadow-lg">
            <i class="fas fa-plus mr-2"></i> New Configuration
        </button>
    </div>

    
    <div class="bg-white border border-slate-200 rounded-sm overflow-hidden shadow-sm">
        <table class="w-full text-left border-collapse">
            <thead>
                <tr class="bg-slate-50 border-b border-slate-200">
                    <th class="px-6 py-3 text-[10px] font-black text-slate-500 ">Year</th>
                    <th class="px-6 py-3 text-[10px] font-black text-slate-500  text-right">EE Rate</th>
                    <th class="px-6 py-3 text-[10px] font-black text-slate-500  text-right">ER Rate</th>
                    <th class="px-6 py-3 text-[10px] font-black text-slate-500  text-right">Monthly Ceiling</th>
                    <th class="px-6 py-3 text-[10px] font-black text-slate-500  text-center">Status</th>
                    <th class="px-6 py-3 text-[10px] font-black text-slate-500  text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                <?php $__currentLoopData = $napsaConfigs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $config): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <tr class="hover:bg-slate-50 transition-colors">
                    <td class="px-6 py-4 text-xs font-bold text-slate-900"><?php echo e($config->financial_year); ?></td>
                    <td class="px-6 py-4 text-xs text-slate-600 text-right"><?php echo e(number_format($config->employee_rate, 2)); ?>%</td>
                    <td class="px-6 py-4 text-xs text-slate-600 text-right"><?php echo e(number_format($config->employer_rate, 2)); ?>%</td>
                    <td class="px-6 py-4 text-xs text-slate-600 text-right">K<?php echo e(number_format($config->monthly_ceiling, 2)); ?></td>
                    <td class="px-6 py-4 text-center">
                        <span class="px-2 py-1 text-[9px] font-black <?php echo e($config->is_active ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-400'); ?> rounded-full ">
                            <?php echo e($config->is_active ? 'Active' : 'Inactive'); ?>

                        </span>
                    </td>
                    <td class="px-6 py-4 text-right">
                        <div class="flex justify-end gap-3">
                            <button @click="openViewModal(<?php echo e(json_encode($config)); ?>)" class="text-slate-400 hover:text-blue-600 transition"><i class="fas fa-eye"></i></button>
                            <button @click="openEditModal(<?php echo e(json_encode($config)); ?>)" class="text-slate-400 hover:text-slate-900 transition"><i class="fas fa-edit"></i></button>
                        </div>
                    </td>
                </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </tbody>
        </table>
    </div>

    
    <div x-show="formModalOpen" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm" x-cloak>
        <div class="bg-white rounded-sm shadow-2xl w-full max-w-2xl overflow-hidden" @click.away="formModalOpen = false">
            <div class="p-6 border-b border-slate-100 flex justify-between items-center bg-slate-50">
                <h3 class="text-sm font-black text-slate-900 " x-text="isEdit ? 'Edit Configuration' : 'New Configuration'"></h3>
                <button @click="formModalOpen = false" class="text-slate-400 hover:text-slate-900"><i class="fas fa-times"></i></button>
            </div>
            <form :action="formAction" method="POST" class="p-6">
                <?php echo csrf_field(); ?>
                <template x-if="isEdit"><?php echo method_field('PUT'); ?></template>
                
                <div class="grid grid-cols-2 gap-6">
                    <div class="col-span-2">
                        <label class="block text-[10px] font-black text-slate-500 mb-1">Financial Year</label>
                        <select name="financial_year_id" x-model="formData.financial_year_id" class="quickbooks-input" required>
                            <?php $__currentLoopData = $financialYears; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $fy): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($fy->id); ?>"><?php echo e($fy->year); ?></option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                    </div>
                    <div>
                        <label class="block text-[10px] font-black text-slate-500 mb-1">Employee Rate (%)</label>
                        <input type="number" step="0.01" name="employee_rate" x-model="formData.employee_rate" class="quickbooks-input font-bold" required>
                    </div>
                    <div>
                        <label class="block text-[10px] font-black text-slate-500 mb-1">Employer Rate (%)</label>
                        <input type="number" step="0.01" name="employer_rate" x-model="formData.employer_rate" class="quickbooks-input font-bold" required>
                    </div>
                    <div class="col-span-2">
                        <label class="block text-[10px] font-black text-slate-500 mb-1">Monthly Ceiling (K)</label>
                        <input type="number" step="0.01" name="monthly_ceiling" x-model="formData.monthly_ceiling" class="quickbooks-input font-bold text-blue-600" required>
                    </div>
                </div>

                <div class="mt-8 flex justify-end gap-3">
                    <button type="button" @click="formModalOpen = false" class="px-6 py-2.5 text-[10px] font-black text-slate-500 hover:bg-slate-50 transition">Cancel</button>
                    <button type="submit" class="bg-slate-900 text-white px-8 py-2.5 text-[10px] font-black shadow-lg" x-text="isEdit ? 'Update Changes' : 'Save Configuration'"></button>
                </div>
            </form>
        </div>
    </div>

    
    <div x-show="viewModalOpen" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm" x-cloak>
        <div class="bg-white rounded-sm shadow-2xl w-full max-w-md overflow-hidden" @click.away="viewModalOpen = false">
            <div class="p-6 border-b border-slate-100 bg-slate-50 flex justify-between items-center">
                <h3 class="text-sm font-black text-slate-900 ">Configuration Details</h3>
                <button @click="viewModalOpen = false" class="text-slate-400 hover:text-slate-900"><i class="fas fa-times"></i></button>
            </div>
            <div class="p-8 space-y-6">
                <div class="flex justify-between border-b border-slate-50 pb-2">
                    <span class="text-[10px] font-bold text-slate-400 ">Year</span>
                    <span class="text-xs font-black text-slate-900" x-text="viewData.financial_year"></span>
                </div>
                <div class="flex justify-between border-b border-slate-50 pb-2">
                    <span class="text-[10px] font-bold text-slate-400 ">Employee Contribution</span>
                    <span class="text-xs font-black text-slate-900" x-text="viewData.employee_rate + '%'"></span>
                </div>
                <div class="flex justify-between border-b border-slate-50 pb-2">
                    <span class="text-[10px] font-bold text-slate-400 ">Employer Contribution</span>
                    <span class="text-xs font-black text-slate-900" x-text="viewData.employer_rate + '%'"></span>
                </div>
                <div class="bg-blue-50 p-4 rounded text-center">
                    <span class="block text-[9px] font-black text-blue-400  mb-1">Max Monthly Deduction</span>
                    <span class="text-2xl font-black text-blue-600" x-text="'K' + ( (viewData.employee_rate * viewData.monthly_ceiling) / 100 ).toLocaleString()"></span>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function napsaManager() {
        return {
            formModalOpen: false,
            viewModalOpen: false,
            isEdit: false,
            formAction: "<?php echo e(route('payroll.napsa.store')); ?>",
            formData: { financial_year_id: '', employee_rate: '5.00', employer_rate: '5.00', monthly_ceiling: '0.00' },
            viewData: {},

            openCreateModal() {
                this.isEdit = false;
                this.formData = { financial_year_id: '', employee_rate: '5.00', employer_rate: '5.00', monthly_ceiling: '6300.00' };
                this.formAction = "<?php echo e(route('payroll.napsa.store')); ?>";
                this.formModalOpen = true;
            },

            openEditModal(config) {
                this.isEdit = true;
                this.formData = { ...config };
                // Ensure your route is set up for updates
                this.formAction = `/payroll/napsa/${config.id}`; 
                this.formModalOpen = true;
            },

            openViewModal(config) {
                this.viewData = config;
                this.viewModalOpen = true;
            }
        }
    }
</script>

<style>
    .quickbooks-input { border: 1px solid #e2e8f0; border-radius: 2px; padding: 10px; font-size: 13px; width: 100%; }
    .quickbooks-input:focus { outline: none; border-color: #000; }
    [x-cloak] { display: none !important; }
</style>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.aura-main', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/edugfqvw/auraaccountify.online/portal/resources/views/payroll/napsa/index.blade.php ENDPATH**/ ?>