<?php $__env->startSection('main-content'); ?>
<div class="max-w-7xl mx-auto pb-20 px-4" x-data="nhimaManager()">
    
    
    <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">NHIMA Configuration</h1>
            <p class="text-[10px] font-bold text-slate-400 mt-1 uppercase">
                Year: <?php echo e($currentFinancialYear->year ?? 'None Selected'); ?> 
                <?php if($isEnabled): ?>
                    <span class="text-emerald-600 ml-2"><i class="fas fa-check-circle mr-1"></i> Module Enabled</span>
                <?php else: ?>
                    <span class="text-red-600 ml-2"><i class="fas fa-times-circle mr-1"></i> Module Disabled</span>
                <?php endif; ?>
            </p>
        </div>

        <div class="flex items-center gap-4">
            
            <form action="<?php echo e(route('payroll.nhima.index')); ?>" method="GET" id="yearFilterForm" class="flex items-center gap-2">
                <label class="text-[9px] font-black text-slate-500 uppercase">View Year:</label>
                <select name="financial_year_id" onchange="this.form.submit()" class="quickbooks-input py-1.5 bg-slate-50 text-xs font-bold w-32">
                    <?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($currentFinancialYear && $fy->id == $currentFinancialYear->id ? 'selected' : ''); ?>>
                            <?php echo e($fy->year); ?>

                        </option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </select>
            </form>

            <?php if($isEnabled): ?>
                <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>
            <?php else: ?>
                <button class="bg-slate-100 text-slate-400 px-6 py-2.5 text-[10px] font-black border border-slate-200 cursor-not-allowed" title="Enable in Payroll Console first">
                    <i class="fas fa-lock mr-2"></i> Creation Locked
                </button>
            <?php endif; ?>
        </div>
    </div>

    
    <?php if(!$isEnabled): ?>
        <div class="mb-8 p-4 bg-amber-50 border-l-4 border-amber-400 flex items-center gap-4">
            <i class="fas fa-exclamation-triangle text-amber-600"></i>
            <div>
                <p class="text-xs font-bold text-amber-900">Module is currently inactive</p>
                <p class="text-[10px] text-amber-700 font-medium">NHIMA is disabled for the selected year. Go to the <a href="<?php echo e(route('payroll.settings.index')); ?>" class="underline font-black">Payroll Console</a> to enable it.</p>
            </div>
        </div>
    <?php endif; ?>

    
    <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 uppercase">Financial Year</th>
                    <th class="px-6 py-3 text-[10px] font-black text-slate-500 uppercase text-right">Employee Rate</th>
                    <th class="px-6 py-3 text-[10px] font-black text-slate-500 uppercase text-right">Employer Rate</th>
                    <th class="px-6 py-3 text-[10px] font-black text-slate-500 uppercase text-center">Status</th>
                    <th class="px-6 py-3 text-[10px] font-black text-slate-500 uppercase text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                <?php $__empty_1 = true; $__currentLoopData = $nhimaConfigs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $config): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <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-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 uppercase">
                            <?php echo e($config->is_active ? 'Active' : 'Inactive'); ?>

                        </span>
                    </td>
                    <td class="px-6 py-4 text-right">
                        <div class="flex justify-end gap-4">
                            <button @click="openViewModal(<?php echo e(json_encode($config)); ?>)" class="text-slate-400 hover:text-blue-600 transition" title="View Details"><i class="fas fa-eye"></i></button>
                            <?php if($isEnabled && $config->financial_year == $currentFinancialYear->year): ?>
                                <button @click="openEditModal(<?php echo e(json_encode($config)); ?>)" class="text-slate-400 hover:text-slate-900 transition" title="Edit Rates"><i class="fas fa-edit"></i></button>
                            <?php endif; ?>
                        </div>
                    </td>
                </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <tr>
                    <td colspan="5" class="px-6 py-12 text-center text-xs text-slate-400 italic font-medium">
                        No configurations found for the selected criteria.
                    </td>
                </tr>
                <?php endif; ?>
            </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-xl 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 uppercase" x-text="isEdit ? 'Update NHIMA Rates' : 'Create NHIMA Rates'"></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-8">
                <?php echo csrf_field(); ?>
                <template x-if="isEdit"><?php echo method_field('PUT'); ?></template>
                
                <div class="grid grid-cols-2 gap-8">
                    <div class="col-span-2">
                        <label class="block text-[10px] font-black text-slate-500 mb-1">Financial Year Selection</label>
                        <select name="financial_year_id" x-model="formData.financial_year_id" class="quickbooks-input font-bold" 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>
                        <div class="relative">
                            <input type="number" step="0.01" name="employee_rate" x-model="formData.employee_rate" class="quickbooks-input font-bold text-lg" required>
                            <span class="absolute right-3 top-3 text-slate-300 font-bold">%</span>
                        </div>
                    </div>
                    <div>
                        <label class="block text-[10px] font-black text-slate-500 mb-1">Employer Rate (%)</label>
                        <div class="relative">
                            <input type="number" step="0.01" name="employer_rate" x-model="formData.employer_rate" class="quickbooks-input font-bold text-lg" required>
                            <span class="absolute right-3 top-3 text-slate-300 font-bold">%</span>
                        </div>
                    </div>
                </div>

                <div class="mt-8 p-4 bg-blue-50 border border-blue-100 rounded text-[11px] text-blue-700 leading-relaxed font-medium">
                    <i class="fas fa-info-circle mr-1"></i> NHIMA is typically 1% employee and 1% employer matching contribution for Zambian payroll.
                </div>

                <div class="mt-10 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-10 py-2.5 text-[10px] font-black shadow-lg shadow-slate-200" x-text="isEdit ? 'UPDATE RATES' : '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 text-slate-900">
                <h3 class="text-sm font-black uppercase">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 items-center border-b border-slate-50 pb-3">
                    <span class="text-[10px] font-black text-slate-400 uppercase">Financial Year</span>
                    <span class="text-xs font-black text-slate-900" x-text="viewData.financial_year"></span>
                </div>
                <div class="flex justify-between items-center border-b border-slate-50 pb-3">
                    <span class="text-[10px] font-black text-slate-400 uppercase">Employee Contribution</span>
                    <span class="text-xs font-black text-slate-900" x-text="viewData.employee_rate + '%'"></span>
                </div>
                <div class="flex justify-between items-center border-b border-slate-50 pb-3">
                    <span class="text-[10px] font-black text-slate-400 uppercase">Employer Contribution</span>
                    <span class="text-xs font-black text-slate-900" x-text="viewData.employer_rate + '%'"></span>
                </div>
                <div class="p-4 bg-slate-50 border border-slate-100 rounded text-center">
                    <span class="block text-[9px] font-black text-slate-400 uppercase mb-1">Status</span>
                    <span class="text-[11px] font-black uppercase" :class="viewData.is_active ? 'text-emerald-600' : 'text-slate-400'" x-text="viewData.is_active ? 'Active' : 'Archived'"></span>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function nhimaManager() {
        return {
            formModalOpen: false,
            viewModalOpen: false,
            isEdit: false,
            formAction: "<?php echo e(route('payroll.nhima.store')); ?>",
            formData: { financial_year_id: '<?php echo e($currentFinancialYear->id ?? ""); ?>', employee_rate: '1.00', employer_rate: '1.00' },
            viewData: {},

            openCreateModal() {
                this.isEdit = false;
                this.formData = { financial_year_id: '<?php echo e($currentFinancialYear->id ?? ""); ?>', employee_rate: '1.00', employer_rate: '1.00' };
                this.formAction = "<?php echo e(route('payroll.nhima.store')); ?>";
                this.formModalOpen = true;
            },

            openEditModal(config) {
                this.isEdit = true;
                this.formData = { ...config };
                this.formAction = `/payroll/nhima/${config.id}`; // Ensure your route matches this
                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%; transition: border-color 0.2s; }
    .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/nhima/index.blade.php ENDPATH**/ ?>