<?php $__env->startSection('main-content'); ?>
<style>
    .quickbooks-input { border: 1px solid #8C8C8C; border-radius: 4px; padding: 6px 12px; font-size: 14px; width: 100%; transition: all 0.2s; }
    .quickbooks-input:focus { outline: 2px solid #146CAA; border-color: #146CAA; box-shadow: 0 0 4px rgba(20, 108, 170, 0.2); }
    .quickbooks-table th { background-color: #F3F2F1; padding: 12px; text-align: left; font-size: 12px; color: #605E5C; font-weight: 700; }
    .quickbooks-table td { padding: 10px; border-bottom: 1px solid #EDEBE9; }
    
    .toast-notification {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        min-width: 320px;
        max-width: 450px;
        animation: slideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    @keyframes slideIn {
        from { transform: translateX(100%); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
</style>

<div class="max-w-7xl mx-auto pb-20">
    
    <?php if($errors->any() || session('error')): ?>
        <div class="toast-notification">
            <div class="bg-white border-l-4 border-red-500 shadow-2xl rounded-lg p-4 mb-3 flex items-start space-x-3">
                <div class="bg-red-100 p-2 rounded-full">
                    <i class="fas fa-exclamation-circle text-red-600"></i>
                </div>
                <div class="flex-1">
                    <h4 class="text-sm font-bold text-gray-900">Unable to Save Changes</h4>
                    <div class="text-xs text-red-700 mt-1">
                        <?php if($errors->any()): ?>
                            <ul class="list-disc list-inside">
                                <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <li><?php echo e($error); ?></li>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </ul>
                        <?php else: ?>
                            <?php echo e(session('error')); ?>

                        <?php endif; ?>
                    </div>
                </div>
                <button onclick="this.parentElement.parentElement.remove()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
    <?php endif; ?>

    
    <?php if(session('success')): ?>
        <div class="toast-notification">
            <div class="bg-white border-l-4 border-green-500 shadow-2xl rounded-lg p-4 flex items-center space-x-3">
                <div class="bg-green-100 p-2 rounded-full">
                    <i class="fas fa-check-circle text-green-600"></i>
                </div>
                <div class="flex-1">
                    <h4 class="text-sm font-bold text-gray-900">Success</h4>
                    <p class="text-xs text-green-700"><?php echo e(session('success')); ?></p>
                </div>
                <button onclick="this.parentElement.parentElement.remove()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
    <?php endif; ?>

    <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">PAYE Tax Bands</h1>
            <p class="text-[10px] font-bold text-slate-400 mt-1">Zambian Revenue Authority (ZRA) Settings</p>
        </div>
    </div>

    <div class="bg-white border border-slate-200 rounded-sm shadow-sm overflow-hidden p-6">
        <form id="payeForm" action="<?php echo e(route('payroll.paye.store')); ?>" method="POST">
            <?php echo csrf_field(); ?>
            
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8 bg-slate-50 p-4 rounded-lg border border-slate-100">
                <div>
                    <label class="block text-[10px] font-black text-slate-500 mb-2">Financial Year</label>
                    <select name="financial_year_id" class="quickbooks-input" required>
                        <?php $__currentLoopData = $financialYears; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $year): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option value="<?php echo e($year->id); ?>" <?php echo e(($currentFinancialYear && $year->id == $currentFinancialYear->id) ? 'selected' : ''); ?>>
                                <?php echo e($year->year); ?>

                            </option>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </select>
                </div>
                <div>
                    <label class="block text-[10px] font-black text-slate-500 mb-2">Display Name</label>
                    <input type="text" name="year" class="quickbooks-input" value="<?php echo e($payeSettings->year ?? date('Y')); ?>" required>
                </div>
                <div>
                    <label class="block text-[10px] font-black text-slate-500 mb-2">Effective Start</label>
                    <input type="date" name="start_date" class="quickbooks-input" value="<?php echo e(optional($payeSettings)->start_date?->format('Y-m-d') ?? date('Y-01-01')); ?>" required>
                </div>
                <div>
                    <label class="block text-[10px] font-black text-slate-500 mb-2">Effective End</label>
                    <input type="date" name="end_date" class="quickbooks-input" value="<?php echo e(optional($payeSettings)->end_date?->format('Y-m-d') ?? date('Y-12-31')); ?>" required>
                </div>
            </div>

            <div class="flex justify-between items-center mb-4">
                <h3 class="text-sm font-black text-slate-900">
                    <i class="fas fa-table text-blue-600 mr-2"></i> Configure Bands
                </h3>
                <button type="button" onclick="addRow()" class="text-[10px] font-black text-blue-600 border border-blue-200 px-4 py-2 bg-blue-50 hover:bg-blue-100 transition">
                    <i class="fas fa-plus mr-1"></i> Add New Band
                </button>
            </div>

            <div class="overflow-x-auto border border-slate-200 rounded-sm mb-6">
                <table class="w-full quickbooks-table">
                    <thead>
                        <tr class="border-b border-slate-900 bg-slate-50 text-[9px] font-black text-slate-500">
                            <th class="px-4 py-4 text-center">#</th>
                            <th class="px-6 py-4">Band Description</th>
                            <th class="px-6 py-4">Monthly (From - To)</th>
                            <th class="px-6 py-4">Annual (From - To)</th>
                            <th class="w-24 px-6 py-4">Rate %</th>
                            <th class="w-12 px-6 py-4"></th>
                        </tr>
                    </thead>
                    <tbody id="bandRows" class="text-[11px] font-medium divide-y divide-slate-100">
                        
                    </tbody>
                </table>
            </div>

            <div class="flex justify-end pt-4 border-t border-slate-100">
                <button type="submit" class="text-[10px] font-black text-white bg-slate-900 px-10 py-3 hover:bg-slate-800 shadow-md transition transform active:scale-95">
                    Update PAYE Configuration
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    let rowIdx = 0;

    function addRow(data = {}) {
        const container = document.getElementById('bandRows');
        const tr = document.createElement('tr');
        tr.className = 'hover:bg-slate-50 transition border-b border-slate-100';
        
        const displayNum = document.querySelectorAll('#bandRows tr').length + 1;
        
        tr.innerHTML = `
            <td class="px-4 py-4 text-center">
                <span class="font-bold text-slate-700 text-sm band-display-number">${displayNum}</span>
                <input type="hidden" name="tax_bands[${rowIdx}][band_number]" class="band-hidden-number" value="${displayNum}">
            </td>
            <td class="px-6 py-4">
                <input type="text" name="tax_bands[${rowIdx}][description]" value="${data.description || ''}" class="quickbooks-input" placeholder="e.g. Band 1" required>
            </td>
            <td class="px-6 py-4">
                <div class="flex items-center space-x-1">
                    <input type="number" step="0.01" name="tax_bands[${rowIdx}][monthly_from]" value="${data.monthly_from || 0}" class="quickbooks-input" oninput="calc(${rowIdx})">
                    <span class="text-slate-400 font-bold">-</span>
                    <input type="number" step="0.01" name="tax_bands[${rowIdx}][monthly_to]" value="${data.monthly_to || 0}" class="quickbooks-input" oninput="calc(${rowIdx})">
                </div>
            </td>
            <td class="px-6 py-4">
                <div class="flex items-center space-x-1 text-slate-500">
                    <input type="number" step="0.01" name="tax_bands[${rowIdx}][annual_from]" value="${data.annual_from || (data.monthly_from * 12) || 0}" class="w-full bg-transparent border-none text-[11px] p-0" readonly>
                    <span>-</span>
                    <input type="number" step="0.01" name="tax_bands[${rowIdx}][annual_to]" value="${data.annual_to || (data.monthly_to * 12) || 0}" class="w-full bg-transparent border-none text-[11px] p-0" readonly>
                </div>
            </td>
            <td class="px-6 py-4">
                <div class="relative">
                    <input type="number" step="0.01" name="tax_bands[${rowIdx}][tax_rate]" value="${data.tax_rate || 0}" class="quickbooks-input pr-6 font-bold text-blue-700" required>
                    <span class="absolute right-2 top-2 text-slate-400 font-bold">%</span>
                </div>
            </td>
            <td class="px-6 py-4 text-center">
                <button type="button" onclick="removeRow(this)" class="text-rose-300 hover:text-rose-600 transition">
                    <i class="fas fa-trash"></i>
                </button>
            </td>
        `;
        container.appendChild(tr);
        rowIdx++;
    }

    function removeRow(btn) {
        btn.closest('tr').remove();
        reIndexBands();
    }

    function reIndexBands() {
        const rows = document.querySelectorAll('#bandRows tr');
        rows.forEach((row, index) => {
            const newNum = index + 1;
            const span = row.querySelector('.band-display-number');
            const hidden = row.querySelector('.band-hidden-number');
            if (span) span.innerText = newNum;
            if (hidden) hidden.value = newNum;
        });
    }

    function calc(idx) {
        const mFrom = document.getElementsByName(`tax_bands[${idx}][monthly_from]`)[0].value || 0;
        const mTo = document.getElementsByName(`tax_bands[${idx}][monthly_to]`)[0].value || 0;
        
        const aFrom = document.getElementsByName(`tax_bands[${idx}][annual_from]`)[0];
        const aTo = document.getElementsByName(`tax_bands[${idx}][annual_to]`)[0];
        
        if(aFrom) aFrom.value = (parseFloat(mFrom) * 12).toFixed(2);
        if(aTo) aTo.value = (parseFloat(mTo) * 12).toFixed(2);
    }

    // Auto-dismiss alerts
    setTimeout(() => {
        const toasts = document.querySelectorAll('.toast-notification');
        toasts.forEach(t => {
            t.style.opacity = '0';
            setTimeout(() => t.remove(), 500);
        });
    }, 6000);

    window.onload = function() {
        <?php if(count($taxBands) > 0): ?>
            <?php $__currentLoopData = $taxBands; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $b): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                addRow({
                    band_number: "<?php echo e($b->band_number); ?>",
                    description: "<?php echo e($b->description); ?>",
                    monthly_from: "<?php echo e($b->monthly_from); ?>",
                    monthly_to: "<?php echo e($b->monthly_to); ?>",
                    annual_from: "<?php echo e($b->annual_from); ?>",
                    annual_to: "<?php echo e($b->annual_to); ?>",
                    tax_rate: "<?php echo e($b->tax_rate); ?>"
                });
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        <?php else: ?>
            addRow({description: 'Tax Free', monthly_from: 0, monthly_to: 5100, tax_rate: 0});
            addRow({description: 'Second Band', monthly_from: 5100.01, monthly_to: 7100, tax_rate: 20});
            addRow({description: 'Third Band', monthly_from: 7100.01, monthly_to: 9200, tax_rate: 30});
            addRow({description: 'Top Band', monthly_from: 9200.01, monthly_to: 999999, tax_rate: 37});
        <?php endif; ?>
    };
</script>
<?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/paye/index.blade.php ENDPATH**/ ?>