<div id="surchargeModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/40 hidden transition-opacity duration-300 opacity-0 font-sans" onclick="closeSurchargeModalOutside(event)">
    <div class="bg-white rounded-xl shadow-xl border border-slate-200/80 max-w-md w-full overflow-hidden transform scale-95 transition-all duration-300 ease-out" id="modalCard">
        
        <div class="px-5 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-900 text-white">
            <div class="space-y-0.5">
                <h3 class="text-xs font-black tracking-tight uppercase" id="modalEmployeeName">Employee Name</h3>
                <p class="text-[10px] text-slate-300 font-bold tracking-wider uppercase">Fixed Surcharge Configuration</p>
            </div>
            <button type="button" onclick="closeSurchargeModal()" class="text-white/70 hover:text-white hover:bg-white/10 p-1.5 rounded-lg transition">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>

        <div class="p-5 space-y-4">
            <!-- Dynamic Quick Statistics Display -->
            <div class="grid grid-cols-3 gap-2 bg-slate-50 p-3 rounded-lg border border-slate-100 text-center">
                <div>
                    <span class="block text-[10px] font-black text-slate-400 uppercase tracking-wider">Late Arrivals</span>
                    <span id="modal_stat_late" class="text-xs font-black text-slate-700">0</span>
                </div>
                <div>
                    <span class="block text-[10px] font-black text-slate-400 uppercase tracking-wider">Incomplete</span>
                    <span id="modal_stat_incomplete" class="text-xs font-black text-slate-700">0</span>
                </div>
                <div>
                    <span class="block text-[10px] font-black text-slate-400 uppercase tracking-wider">Absents</span>
                    <span id="modal_stat_absent" class="text-xs font-black text-rose-600">0</span>
                </div>
            </div>

            <p class="text-xs text-slate-500 leading-relaxed font-medium">
                Surcharges are handled as fixed, direct adjustments for this payroll cycle. Enter a manual amount below or select one of the quick presets.
            </p>

            <div class="space-y-1.5">
                <label for="customSurchargeInput" class="text-[9px] font-black tracking-wider text-slate-400 uppercase block select-none">
                    Target Surcharge Amount (₦)
                </label>
                <div class="relative rounded-lg shadow-xs">
                    <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
                        <span class="text-slate-400 text-xs font-bold font-mono">₦</span>
                    </div>
                    <input type="number" id="customSurchargeInput" placeholder="0.00" min="0" step="100" class="w-full border border-slate-200 bg-slate-50 pl-8 pr-3 py-2 rounded-lg focus:ring-2 focus:ring-indigo-100 focus:border-indigo-500 outline-none text-xs text-slate-800 font-bold font-mono">
                </div>
            </div>

            <div>
                <span class="text-[9px] font-black tracking-wider text-slate-400 uppercase block mb-2 select-none">Quick Presets</span>
                <div class="grid grid-cols-4 gap-2">
                    <button type="button" onclick="presetSurcharge(1000)" class="bg-slate-50 hover:bg-slate-100 text-slate-700 font-black py-2 rounded-lg text-xs border border-slate-200 transition active:scale-95">₦1k</button>
                    <button type="button" onclick="presetSurcharge(2000)" class="bg-slate-50 hover:bg-slate-100 text-slate-700 font-black py-2 rounded-lg text-xs border border-slate-200 transition active:scale-95">₦2k</button>
                    <button type="button" onclick="presetSurcharge(5000)" class="bg-slate-50 hover:bg-slate-100 text-slate-700 font-black py-2 rounded-lg text-xs border border-slate-200 transition active:scale-95">₦5k</button>
                    <button type="button" onclick="presetSurcharge(0)" class="bg-rose-50 hover:bg-rose-100 text-rose-700 font-black py-2 rounded-lg text-xs border border-rose-100 transition active:scale-95">Waive</button>
                </div>
            </div>
        </div>

        <div class="px-5 py-3.5 bg-slate-50/60 border-t border-slate-100 flex gap-3">
            <button type="button" onclick="closeSurchargeModal()" class="flex-1 px-3.5 py-2 text-xs text-slate-500 hover:text-slate-700 hover:bg-slate-100/80 font-bold rounded-lg border border-slate-200 bg-white transition active:scale-95">
                Cancel
            </button>
            <button type="button" onclick="applySurchargeOverride()" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-bold px-4 py-2 rounded-lg text-xs transition active:scale-95 border border-indigo-700 shadow-xs">
                ✓ Apply Surcharge
            </button>
        </div>
    </div>
</div>

<script>
let activeEmployeeId = null;

function openSurchargeModal(triggerBtn) {
    if (!triggerBtn) return;
    
    activeEmployeeId = triggerBtn.getAttribute('data-employee-id');
    const name = triggerBtn.getAttribute('data-name') || 'Employee';
    const currentSurcharge = triggerBtn.getAttribute('data-surcharges') || '0';
    
    if (!activeEmployeeId) return;
    
    // Set text labels
    document.getElementById('modalEmployeeName').textContent = name;
    document.getElementById('customSurchargeInput').value = parseFloat(currentSurcharge).toFixed(2);

    // Bind metrics labels inside the statistics grid
    document.getElementById('modal_stat_late').textContent = triggerBtn.getAttribute('data-late-count') || '0';
    document.getElementById('modal_stat_incomplete').textContent = triggerBtn.getAttribute('data-incomplete-count') || '0';
    document.getElementById('modal_stat_absent').textContent = triggerBtn.getAttribute('data-absent-count') || '0';

    // Transition modal in
    const modal = document.getElementById('surchargeModal');
    const card = document.getElementById('modalCard');
    
    if (modal && card) {
        modal.classList.remove('hidden');
        requestAnimationFrame(() => {
            modal.classList.remove('opacity-0');
            card.classList.remove('scale-95');
            card.classList.add('scale-100');
        });
    }
}

function closeSurchargeModal() {
    const modal = document.getElementById('surchargeModal');
    const card = document.getElementById('modalCard');
    if (!modal || !card) return;
    
    modal.classList.add('opacity-0');
    card.classList.add('scale-95');
    card.classList.remove('scale-100');
    
    setTimeout(() => {
        modal.classList.add('hidden');
        activeEmployeeId = null;
    }, 300);
}

function closeSurchargeModalOutside(event) {
    if (event.target === document.getElementById('surchargeModal')) {
        closeSurchargeModal();
    }
}

function presetSurcharge(val) {
    document.getElementById('customSurchargeInput').value = val.toFixed(2);
}

function applySurchargeOverride() {
    if (!activeEmployeeId) return;

    const value = parseFloat(document.getElementById('customSurchargeInput').value || 0);
    
    // Update matching hidden input inside main form
    const hiddenInput = document.getElementById('surcharge_input_' + activeEmployeeId);
    if (hiddenInput) {
        hiddenInput.value = value.toFixed(2);
    }

    // Update data attribute on row button trigger
    const triggerBtn = document.querySelector(`button[data-employee-id="${activeEmployeeId}"]`);
    if (triggerBtn) {
        triggerBtn.setAttribute('data-surcharges', value.toFixed(2));
    }

    // Update row cell label
    const labelSpan = document.getElementById('surcharge_label_' + activeEmployeeId);
    if (labelSpan) {
        if (value > 0) {
            labelSpan.textContent = '₦' + value.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
            labelSpan.className = 'font-mono font-black text-xs text-rose-600 px-1.5 py-0.5 rounded bg-rose-50 border border-rose-100 inline-block';
        } else {
            labelSpan.textContent = '₦0.00';
            labelSpan.className = 'font-mono font-black text-xs text-slate-400';
        }
    }

    closeSurchargeModal();
}
</script>