@extends('layouts.app')

@section('title', 'Ombi la Kuongeza Makato')
@section('page-title', 'Ombi la Kuongeza Makato')

@section('content')


<div x-data="{
        formData: {
            check_number: ''
        },
        isValid: true,
        isComplete: false,
        
        validateInput(value) {
            // Remove any non-numeric characters
            const cleaned = value.replace(/[^0-9]/g, '');
            
            // Update the model
            this.formData.check_number = cleaned;
            
            // Validation logic
            this.isValid = cleaned.length === 0 || (cleaned.length >= 3 && cleaned.length <= 10);
            this.isComplete = cleaned.length >= 6 && cleaned.length <= 15;
            
            return cleaned;
        },
        
        formatDisplay(value) {
            // Add formatting for better readability
            if (value.length > 6) {
                return value.slice(0, 3) + '-' + value.slice(3, 6) + '-' + value.slice(6);
            } else if (value.length > 3) {
                return value.slice(0, 3) + '-' + value.slice(3);
            }
            return value;
        }
    }" class="">



<!-- Enhanced Notification Container -->
<div id="notification-container" class="fixed top-20 right-4 z-50 space-y-3" style="max-width: 420px;">
    <!-- Clear All Button -->
    <div id="clear-all-btn" class="hidden text-center">
        <button onclick="clearAllNotifications()" class="text-xs bg-slate-800 text-white px-4 py-2 rounded-full hover:bg-slate-900 transition-all duration-200 shadow-lg hover:shadow-xl">
            <span class="material-icons text-sm mr-1">clear_all</span>
            Funga Zote
        </button>
    </div>
</div>

<div class="max-w-12xl mx-auto space-y-8" x-data="deductionsApplication()">
    <!-- Enhanced Progress Steps -->
    <div class="mb-12">
        <div class="relative">
            <!-- Progress Line -->
            <div class="absolute top-8 left-0 w-full h-1 bg-slate-200 dark:bg-slate-700 rounded-full">
                <div class="h-full bg-gradient-to-r from-slate-600 to-slate-500 rounded-full transition-all duration-700 ease-in-out" 
                     :style="`width: ${((step - 1) / 2) * 100}%`"></div>
            </div>
            
            <!-- Steps -->
            <div class="relative flex justify-between items-center">
                <!-- Step 1 -->
                <div class="flex flex-col items-center">
                    <div class="w-16 h-16 rounded-full flex items-center justify-center text-lg font-bold shadow-lg transition-all duration-300"
                         :class="step >= 1 ? 'bg-gradient-to-br from-slate-600 to-slate-700 text-white shadow-slate-500/30' : 'bg-white dark:bg-slate-800 text-slate-400 border-2 border-slate-200 dark:border-slate-600'">
                        <span class="material-icons" x-show="step > 1">check</span>
                        <span x-show="step === 1">1</span>
                        <span x-show="step < 1">1</span>
                    </div>
                    <div class="mt-4 text-center">
                        <p class="text-sm font-semibold" :class="step >= 1 ? 'text-slate-900 dark:text-white' : 'text-slate-500 dark:text-slate-400'">Taarifa za Msingi</p>
                        <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Ingiza namba ya kumbukumbu</p>
                    </div>
                </div>
                
                <!-- Step 2 -->
                <div class="flex flex-col items-center">
                    <div class="w-16 h-16 rounded-full flex items-center justify-center text-lg font-bold shadow-lg transition-all duration-300"
                         :class="step >= 2 ? 'bg-gradient-to-br from-slate-600 to-slate-700 text-white shadow-slate-500/30' : 'bg-white dark:bg-slate-800 text-slate-400 border-2 border-slate-200 dark:border-slate-600'">
                        <span class="material-icons" x-show="step > 2">check</span>
                        <span x-show="step === 2">2</span>
                        <span x-show="step < 2">2</span>
                    </div>
                    <div class="mt-4 text-center">
                        <p class="text-sm font-semibold" :class="step >= 2 ? 'text-slate-900 dark:text-white' : 'text-slate-500 dark:text-slate-400'">Kiasi Kipya</p>
                        <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Chagua kiasi cha makato</p>
                    </div>
                </div>
                
                <!-- Step 3 -->
                <div class="flex flex-col items-center">
                    <div class="w-16 h-16 rounded-full flex items-center justify-center text-lg font-bold shadow-lg transition-all duration-300"
                         :class="step >= 3 ? 'bg-gradient-to-br from-slate-600 to-slate-700 text-white shadow-slate-500/30' : 'bg-white dark:bg-slate-800 text-slate-400 border-2 border-slate-200 dark:border-slate-600'">
                        <span class="material-icons" x-show="step > 3">check</span>
                        <span x-show="step === 3">3</span>
                        <span x-show="step < 3">3</span>
                    </div>
                    <div class="mt-4 text-center">
                        <p class="text-sm font-semibold" :class="step >= 3 ? 'text-slate-900 dark:text-white' : 'text-slate-500 dark:text-slate-400'">Uhakiki</p>
                        <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Thibitisha na wasilisha</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Step 1: Employee Information -->
    <div x-show="step === 1" 
         x-transition:enter="transition ease-out duration-500" 
         x-transition:enter-start="opacity-0 transform translate-x-8" 
         x-transition:enter-end="opacity-100 transform translate-x-0"
         x-transition:leave="transition ease-in duration-300"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0">
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-xl shadow-slate-200/50 dark:shadow-slate-900/50 border border-slate-200 dark:border-slate-700 overflow-hidden">
            <!-- Card Header -->
            <div class="bg-gradient-to-r from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-700 px-8 py-6 border-b border-slate-200 dark:border-slate-600">
                <div class="flex items-center space-x-4">
                  
                    <div>
                        <h2 class="text-2xl font-bold text-slate-900 dark:text-white">Taarifa za Msingi</h2>
                    </div>
                </div>
            </div>
            
            <!-- Card Content -->
            <div class="p-3">
                <div class="max-w-md mx-auto">
                    <div class="space-y-6">
                        <div>
                            <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
                                ingiza Check Number
                            </label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                    <span class="material-icons text-slate-400 text-xl">numbers</span>
                                </div>
                                 <input 
                        type="text" 
                        id="check_number"
                        name="check_number"
                        x-model="formData.check_number"
                        class="w-full pl-12 pr-16 py-4 border-2 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none transition-all duration-300 text-lg font-medium"
                        :class="{
                            'border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-500 focus:border-blue-500': isValid,
                            'border-red-400 dark:border-red-500 focus:ring-2 focus:ring-red-500 focus:border-red-500 animate-shake': !isValid,
                            'border-green-400 dark:border-green-500 focus:ring-2 focus:ring-green-500 focus:border-green-500 animate-pulse-success': isComplete
                        }"
                        placeholder=""
                        @input="validateInput($event.target.value)"
                        @paste="$nextTick(() => validateInput($event.target.value))"
                        maxlength="15"
                        autocomplete="off"
                        aria-describedby="check-help check-error"
                        :aria-invalid="!isValid">
                            </div>
                            
                        </div>

                        <!-- Action Buttons -->
                        <div class="flex justify-end pt-6">
                            <button @click="checkEmployee()" 
                                    :disabled="!formData.check_number || loading"
                                    class="px-8 py-4 bg-gradient-to-r from-slate-600 to-slate-700 hover:from-slate-700 hover:to-slate-800 text-white rounded-xl font-semibold disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 shadow-lg hover:shadow-xl hover:shadow-slate-500/25 transform hover:scale-105 disabled:hover:scale-100 flex items-center space-x-2">
                                <span x-show="!loading" class="flex items-center space-x-2">
                                    <span>Endelea</span>
                                    <span class="material-icons">arrow_forward</span>
                                </span>
                                <span x-show="loading" class="flex items-center space-x-2">
                                    <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                    </svg>
                                    <span>Inaangalia...</span>
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Step 2: New Amount -->
    <div x-show="step === 2" 
         x-transition:enter="transition ease-out duration-500" 
         x-transition:enter-start="opacity-0 transform translate-x-8" 
         x-transition:enter-end="opacity-100 transform translate-x-0"
         x-transition:leave="transition ease-in duration-300"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0">
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-xl shadow-slate-200/50 dark:shadow-slate-900/50 border border-slate-200 dark:border-slate-700 overflow-hidden">
            <!-- Card Header -->
            <div class="bg-gradient-to-r from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-700 px-8 py-6 border-b border-slate-200 dark:border-slate-600">
                <div class="flex items-center space-x-4">
                    <div class="w-12 h-12 bg-gradient-to-br from-slate-600 to-slate-700 rounded-xl flex items-center justify-center shadow-lg">
                        <span class="material-icons text-white text-xl">savings</span>
                    </div>
                    <div>
                        <h2 class="text-2xl font-bold text-slate-900 dark:text-white">Kiasi Kipya cha Makato</h2>
                        <p class="text-slate-600 dark:text-slate-400 mt-1">Chagua kiasi kipya unachotaka kukata</p>
                    </div>
                </div>
            </div>

            <!-- Employee Info Summary Card - UPDATED WITH NAMES -->
            <div class="mx-2 mt-8 bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-700 dark:to-slate-600 rounded-xl p-2 border border-slate-200 dark:border-slate-600">
                <div class="flex items-center space-x-3 mb-4">
                    <div class="w-8 h-8 bg-slate-600 rounded-lg flex items-center justify-center">
                        <span class="material-icons text-white text-sm">person</span>
                    </div>
                    <h3 class="text-lg font-semibold text-slate-900 dark:text-white">Muhtasari wa Mwombaji</h3>
                </div>
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div class="space-y-4">
                        <!-- ADDED NAMES FIELD DISPLAY -->
                        <div class="flex justify-between items-center p-3 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-600" x-show="employeeData.names">
                            <span class="text-sm font-medium text-slate-600 dark:text-slate-400">Jina</span>
                            <span class="font-bold text-slate-900 dark:text-white" x-text="employeeData.names"></span>
                        </div>
                        
                        <div class="flex justify-between items-center p-3 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-600">
                            <span class="text-sm font-medium text-slate-600 dark:text-slate-400">CheckNo</span>
                            <span class="font-bold text-slate-900 dark:text-white" x-text="employeeData.check_number"></span>
                        </div>
                        <div class="flex justify-between items-center p-3 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-600">
                            <span class="text-sm font-medium text-slate-600 dark:text-slate-400">Idara</span>
                            <span class="text-slate-900 dark:text-white text-right"
                                  x-text="employeeData.dept_name ? employeeData.dept_name.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join('') : ''"></span>
                        </div>
                    </div>
                    <div class="space-y-4">
                        <div class="flex justify-between items-center p-3 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-600">
                            <span class="text-sm font-medium text-slate-600 dark:text-slate-400">Mchango wa Sasa</span>
                            <span class="font-bold text-slate-600" x-text="`Tsh ${formatNumber(employeeData.current_contribution)}`"></span>
                        </div>
                        <div class="flex justify-between items-center p-3 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-600">
                            <span class="text-sm font-medium text-slate-600 dark:text-slate-400">Salio Lililopo</span>
                            <span class="font-bold text-green-600" x-text="`Tsh ${formatNumber(employeeData.salio_lililopo)}`"></span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Amount Input Section -->
            <div class="p-2">
                <div class="max-w-lg mx-auto space-y-6">
                    <div>
                        <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
                            Kiasi Kipya cha Makato (Tsh)
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <span class="text-slate-500 font-medium">TZS</span>
                            </div>
                            <input type="text" 
                                   x-model="formData.formatted_new_amount"
                                   @input="formatCurrencyInput($event)"
                                   @keydown="handleCurrencyKeydown($event)"
                                   class="w-full pl-16 pr-4 py-4 border-2 border-slate-300 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-900 dark:text-white placeholder-slate-400 focus:ring-2 focus:ring-slate-500 focus:border-slate-500 transition-all duration-200 text-xl font-bold text-center"
                                   placeholder="0">
                        </div>
                        
                        <!-- Real-time validation display -->
                        <div x-show="formData.new_amount > 0" 
                             x-transition:enter="transition ease-out duration-300"
                             x-transition:enter-start="opacity-0 transform translateY(-4)"
                             x-transition:enter-end="opacity-100 transform translateY(0)"
                             class="mt-4 p-4 rounded-xl border-2" 
                             :class="getRangeStatus().valid ? 'bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-700' : 'bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-700'">
                            <div class="flex items-start space-x-3">
                                <div class="flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center mt-0.5"
                                     :class="getRangeStatus().valid ? 'bg-green-100 dark:bg-green-800' : 'bg-red-100 dark:bg-red-800'">
                                    <span class="material-icons text-sm" 
                                          :class="getRangeStatus().valid ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'"
                                          x-text="getRangeStatus().valid ? 'check' : 'close'"></span>
                                </div>
                                <div class="flex-1">
                                    <p class="font-semibold" 
                                       :class="getRangeStatus().valid ? 'text-green-800 dark:text-green-400' : 'text-red-800 dark:text-red-400'"
                                       x-text="getRangeStatus().message"></p>
                                    <div x-show="getRangeStatus().valid" class="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
                                        <div class="bg-white dark:bg-slate-800 p-3 rounded-lg border border-green-200 dark:border-green-700">
                                            <p class="text-green-700 dark:text-green-300 font-medium">Ongezeko:</p>
                                            <p class="text-green-900 dark:text-green-100 font-bold" x-text="`Tsh ${formatNumber(formData.new_amount - employeeData.current_contribution)}`"></p>
                                        </div>
                                        <div class="bg-white dark:bg-slate-800 p-3 rounded-lg border border-green-200 dark:border-green-700">
                                            <p class="text-green-700 dark:text-green-300 font-medium">Salio Baada:</p>
                                            <p class="text-green-900 dark:text-green-100 font-bold" x-text="`Tsh ${formatNumber(employeeData.salio_lililopo - (formData.new_amount - employeeData.current_contribution))}`"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Navigation Buttons -->
                    <div class="flex space-x-4 pt-6">
                        <button @click="step = 1" 
                                class="flex-1 px-6 py-4 border-2 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-700 transition-all duration-200 font-semibold flex items-center justify-center space-x-2">
                            <span class="material-icons">arrow_back</span>
                            <span>Rudi</span>
                        </button>
                        <button @click="validateAmount()" 
                                :disabled="!formData.new_amount || formData.new_amount <= 0 || loading || !getRangeStatus().valid"
                                class="flex-1 px-6 py-4 bg-gradient-to-r from-slate-600 to-slate-700 hover:from-slate-700 hover:to-slate-800 text-white rounded-xl disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 font-semibold shadow-lg hover:shadow-xl hover:shadow-slate-500/25 transform hover:scale-105 disabled:hover:scale-100 flex items-center justify-center space-x-2">
                            <span x-show="!loading" class="flex items-center space-x-2">
                                <span>Endelea</span>
                                <span class="material-icons">arrow_forward</span>
                            </span>
                            <span x-show="loading" class="flex items-center space-x-2">
                                <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                                <span>Inahakiki...</span>
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Step 3: Review and Submit -->
    <div x-show="step === 3" 
         x-transition:enter="transition ease-out duration-500" 
         x-transition:enter-start="opacity-0 transform translate-x-8" 
         x-transition:enter-end="opacity-100 transform translate-x-0"
         x-transition:leave="transition ease-in duration-300"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0">
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-xl shadow-slate-200/50 dark:shadow-slate-900/50 border border-slate-200 dark:border-slate-700 overflow-hidden">
            <!-- Card Header -->
            <div class="bg-gradient-to-r from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-700 px-8 py-6 border-b border-slate-200 dark:border-slate-600">
                <div class="flex items-center space-x-4">
                    <div class="w-12 h-12 bg-gradient-to-br from-slate-600 to-slate-700 rounded-xl flex items-center justify-center shadow-lg">
                        <span class="material-icons text-white text-xl">summarize</span>
                    </div>
                    <div>
                        <h2 class="text-2xl font-bold text-slate-900 dark:text-white">Uhakiki wa Ombi</h2>
                        <p class="text-slate-600 dark:text-slate-400 mt-1">Hakiki taarifa zako kabla ya kuwasilisha ombi</p>
                    </div>
                </div>
            </div>

            <!-- Summary Section -->
            <div class="p-2">
                <div class="bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-700 dark:to-slate-600 rounded-xl p-6 mb-8 border border-slate-200 dark:border-slate-600">
                    <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 flex items-center">
                        <span class="material-icons mr-2">receipt</span>
                        Muhtasari wa Ombi
                    </h3>
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                        <div class="space-y-4">
                            <h4 class="font-semibold text-slate-700 dark:text-slate-300 text-sm uppercase tracking-wider">Taarifa za Mwombaji</h4>
                            <div class="space-y-3">
                                <!-- ADDED NAMES DISPLAY IN SUMMARY -->
                                <div class="flex justify-between items-center p-4 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-600" x-show="employeeData.names">
                                    <span class="text-slate-600 dark:text-slate-400 font-medium">Jina:</span>
                                    <span class="font-bold text-slate-900 dark:text-white" x-text="employeeData.names"></span>
                                </div>
                                
                                <div class="flex justify-between items-center p-4 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-600">
                                    <span class="text-slate-600 dark:text-slate-400 font-medium">Check Number:</span>
                                    <span class="font-bold text-slate-900 dark:text-white" x-text="employeeData.check_number"></span>
                                </div>
                                <div class="flex justify-between items-center p-4 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-600">
                                    <span class="text-slate-600 dark:text-slate-400 font-medium">Idara:</span>
                                    <span class="font-bold text-slate-900 dark:text-white" x-text="employeeData.dept_name"></span>
                                </div>
                            </div>
                        </div>
                        <div class="space-y-4">
                            <h4 class="font-semibold text-slate-700 dark:text-slate-300 text-sm uppercase tracking-wider">Taarifa za Mchango</h4>
                            <div class="space-y-3">
                                <div class="flex justify-between items-center p-4 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-600">
                                    <span class="text-slate-600 dark:text-slate-400 font-medium">Mchango wa Sasa:</span>
                                    <span class="font-bold text-slate-900 dark:text-white" x-text="`Tsh ${formatNumber(employeeData.current_contribution)}`"></span>
                                </div>
                                <div class="flex justify-between items-center p-4 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-600">
                                    <span class="text-slate-600 dark:text-slate-400 font-medium">Kiasi Kipya:</span>
                                    <span class="font-bold text-slate-600" x-text="`Tsh ${formatNumber(formData.new_amount)}`"></span>
                                </div>
                                <div class="flex justify-between items-center p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-700">
                                    <span class="text-green-700 dark:text-green-400 font-medium">Ongezeko:</span>
                                    <span class="font-bold text-green-800 dark:text-green-300" x-text="`+Tsh ${formatNumber(validationData.difference)}`"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Additional Information Form -->
                <div class="space-y-4">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                        <!-- Phone Number -->
                        <div>
                            <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
                                Namba ya Simu <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                    <span class="material-icons text-slate-400 text-xl">phone</span>
                                </div>
                                <input type="tel" 
                                       x-model="formData.phone_number"
                                       maxlength="10"
                                       pattern="[0-9]{10}"
                                       @input="$event.target.value = $event.target.value.replace(/[^0-9]/g, '')"
                                       class="w-full pl-12 pr-4 py-4 border-2 border-slate-300 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-900 dark:text-white placeholder-slate-400 focus:ring-2 focus:ring-slate-500 focus:border-slate-500 transition-all duration-200"
                                       placeholder="0712345678">
                            </div>
                            <p class="text-sm text-slate-500 dark:text-slate-400 mt-2 flex items-center">
                                <span class="material-icons text-sm mr-1">info</span>
                                Ingiza namba ya simu yenye tarakimu 10
                            </p>
                        </div>

                        <!-- File Upload -->
                        <div>
                            <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
                                Kiambatanisho 
                            </label>
                            <div class="relative">
                                <input type="file" 
                                       @change="handleFileUpload($event)"
                                       accept=".pdf,.jpg,.jpeg,.png"
                                       class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
                                       id="file-upload">
                                <div class="w-full py-8 border-2 border-dashed border-slate-300 dark:border-slate-600 rounded-xl bg-slate-50 dark:bg-slate-700 hover:bg-slate-100 dark:hover:bg-slate-600 transition-all duration-200 cursor-pointer">
                                    <div class="text-center">
                                        <span class="material-icons text-4xl text-slate-400 mb-2">cloud_upload</span>
                                        <p class="text-slate-600 dark:text-slate-400 font-medium">Bofya hapa kupakia faili</p>
                                        <p class="text-sm text-slate-500 dark:text-slate-500 mt-1">PDF, JPG au PNG (Hadi 2MB)</p>
                                    </div>
                                </div>
                            </div>
                            <div x-show="formData.document" class="mt-3 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-700">
                                <div class="flex items-center space-x-2">
                                    <span class="material-icons text-green-600 text-sm">check_circle</span>
                                    <span class="text-sm text-green-700 dark:text-green-400 font-medium">Faili limepakiwa</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Navigation Buttons -->
                    <div class="flex space-x-4 pt-8">
                        <button @click="step = 2" 
                                class="flex-1 px-6 py-4 border-2 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-700 transition-all duration-200 font-semibold flex items-center justify-center space-x-2">
                            <span class="material-icons">arrow_back</span>
                            <span>Rudi Nyuma</span>
                        </button>
                        <button @click="submitApplication()" 
                                :disabled="!formData.phone_number || formData.phone_number.length !== 10 || loading"
                                class="flex-1 px-6 py-4 bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white rounded-xl disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 font-semibold shadow-lg hover:shadow-xl hover:shadow-green-500/25 transform hover:scale-105 disabled:hover:scale-100 flex items-center justify-center space-x-2">
                            <span x-show="!loading" class="flex items-center space-x-2">
                                <span class="material-icons">send</span>
                                <span>Wasilisha Ombi</span>
                            </span>
                            <span x-show="loading" class="flex items-center space-x-2">
                                <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                                <span>Inawasilisha...</span>
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Enhanced Success Message -->
    <div x-show="submitted" 
         x-transition:enter="transition ease-out duration-500"
         x-transition:enter-start="opacity-0 scale-95"
         x-transition:enter-end="opacity-100 scale-100"
         class="bg-white dark:bg-slate-800 rounded-2xl shadow-xl shadow-slate-200/50 dark:shadow-slate-900/50 border border-slate-200 dark:border-slate-700 overflow-hidden">
        <div class="text-center p-12">
            <div class="w-24 h-24 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg shadow-green-500/25">
                <span class="material-icons text-white text-4xl">check_circle</span>
            </div>
            <h2 class="text-3xl font-bold text-slate-900 dark:text-white mb-4">Ombi Limewasilishwa!</h2>
            <p class="text-slate-600 dark:text-slate-400 mb-8 max-w-lg mx-auto leading-relaxed">
                Ombi lako la kuongeza makato limewasilishwa kikamilifu na linasubiri uidhinishaji. Utapokea ujumbe wa kuthibitisha hivi karibuni.
            </p>
            <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
                <a href="{{ route('deductions.my-applications') }}" 
                   class="px-8 py-4 bg-gradient-to-r from-slate-600 to-slate-700 hover:from-slate-700 hover:to-slate-800 text-white rounded-xl font-semibold transition-all duration-200 shadow-lg hover:shadow-xl hover:shadow-slate-500/25 transform hover:scale-105 flex items-center justify-center space-x-2">
                    <span class="material-icons">list</span>
                    <span>Ona Maombi Yangu</span>
                </a>
                <button @click="resetForm()" 
                        class="px-8 py-4 border-2 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-700 transition-all duration-200 font-semibold flex items-center justify-center space-x-2">
                    <span class="material-icons">add</span>
                    <span>Ombi Jingine</span>
                </button>
            </div>
        </div>
    </div>
</div>

<script>
// Enhanced notification system with better animations
function showNotification(message, type = 'info', duration = 0) {
    const container = document.getElementById('notification-container');
    const notification = document.createElement('div');
    const notificationId = 'notification-' + Date.now();
    notification.id = notificationId;
    
    const icons = {
        success: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
        </svg>`,
        error: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
        </svg>`,
        warning: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
        </svg>`,
        info: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
        </svg>`
    };
    
    const colors = {
        success: 'bg-green-500 border-green-400',
        error: 'bg-red-500 border-red-400',
        warning: 'bg-yellow-500 border-yellow-400',
        info: 'bg-slate-600 border-slate-500'
    };
    
    notification.className = `transform transition-all duration-500 ease-out translate-x-full opacity-0 ${colors[type]} text-white rounded-xl p-4 shadow-2xl backdrop-blur-sm border-2 notification-${type} min-w-80`;
    
    notification.innerHTML = `
        <div class="flex items-start space-x-3">
            <div class="flex-shrink-0 mt-0.5">
                ${icons[type]}
            </div>
            <div class="flex-1">
                <p class="font-semibold leading-relaxed">${message}</p>
                ${type === 'error' || type === 'warning' ? '<p class="text-xs mt-2 opacity-75">Bofya X kuifunga</p>' : ''}
            </div>
            <div class="flex-shrink-0">
                <button onclick="removeNotification('${notificationId}')" class="inline-flex text-white hover:bg-white/20 focus:outline-none transition-all duration-200 rounded-lg p-2">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                    </svg>
                </button>
            </div>
        </div>
    `;
    
    container.appendChild(notification);
    updateClearButton();
    
    // Enhanced animations
    setTimeout(() => {
        notification.classList.remove('translate-x-full', 'opacity-0');
        notification.classList.add('translate-x-0', 'opacity-100');
        
        // Add entrance animation based on type
        if (type === 'success') {
            notification.style.animation = 'successBounce 0.8s ease-out';
        } else if (type === 'error') {
            notification.style.animation = 'errorShake 0.6s ease-out';
        }
        
        // Haptic feedback for mobile
        if (navigator.vibrate) {
            if (type === 'error') {
                navigator.vibrate([100, 50, 100]);
            } else if (type === 'success') {
                navigator.vibrate(100);
            }
        }
    }, 100);
    
    // Auto remove with smart durations
    if (duration > 0) {
        setTimeout(() => {
            removeNotification(notificationId);
        }, duration);
    }
}

function removeNotification(notificationId) {
    const notification = document.getElementById(notificationId);
    if (notification) {
        notification.classList.add('translate-x-full', 'opacity-0', 'scale-95');
        setTimeout(() => {
            notification.remove();
            updateClearButton();
        }, 300);
    }
}

function clearAllNotifications() {
    const container = document.getElementById('notification-container');
    const notifications = container.querySelectorAll('[id^="notification-"]');
    
    notifications.forEach((notification, index) => {
        setTimeout(() => {
            notification.classList.add('translate-x-full', 'opacity-0', 'scale-95');
            setTimeout(() => {
                notification.remove();
                if (index === notifications.length - 1) {
                    updateClearButton();
                }
            }, 300);
        }, index * 100);
    });
}

function updateClearButton() {
    const container = document.getElementById('notification-container');
    const notifications = container.querySelectorAll('[id^="notification-"]');
    const clearBtn = document.getElementById('clear-all-btn');
    
    if (notifications.length > 2) {
        clearBtn.classList.remove('hidden');
    } else {
        clearBtn.classList.add('hidden');
    }
}

// Backward compatibility
function showToast(message, type = 'info', duration = null) {
    if (duration === null) {
        switch(type) {
            case 'error':
            case 'warning':
                duration = 0; // Persistent
                break;
            case 'success':
                duration = 6000;
                break;
            case 'info':
            default:
                duration = 5000;
                break;
        }
    }
    showNotification(message, type, duration);
}

function deductionsApplication() {
    return {
        step: 1,
        loading: false,
        submitted: false,
        formData: {
            check_number: '',
            new_amount: '',
            formatted_new_amount: '',
            phone_number: '',
            document: null
        },
        employeeData: {},
        validationData: {},

        // Enhanced currency formatting
        formatCurrencyInput(event) {
            let value = event.target.value;
            let numericValue = value.replace(/[^\d]/g, '');
            
            if (!numericValue) {
                this.formData.new_amount = '';
                this.formData.formatted_new_amount = '';
                return;
            }
            
            let number = parseInt(numericValue);
            let formatted = number.toLocaleString();
            
            this.formData.formatted_new_amount = formatted;
            this.formData.new_amount = number;
        },

        handleCurrencyKeydown(event) {
            if ([8, 9, 27, 13, 46].indexOf(event.keyCode) !== -1 ||
                (event.keyCode === 65 && event.ctrlKey === true) ||
                (event.keyCode === 67 && event.ctrlKey === true) ||
                (event.keyCode === 86 && event.ctrlKey === true) ||
                (event.keyCode === 88 && event.ctrlKey === true)) {
                return;
            }
            
            if ((event.shiftKey || (event.keyCode < 48 || event.keyCode > 57)) && (event.keyCode < 96 || event.keyCode > 105)) {
                event.preventDefault();
            }
        },

        getRangeStatus() {
            if (!this.formData.new_amount || !this.employeeData.current_contribution) {
                return { valid: false, message: 'Ingiza kiasi cha makato' };
            }
            
            const newAmount = parseFloat(this.formData.new_amount);
            const currentContribution = parseFloat(this.employeeData.current_contribution);
            const availableBalance = parseFloat(this.employeeData.salio_lililopo);
            
            if (newAmount <= currentContribution) {
                return { 
                    valid: false, 
                    message: `Kiasi lazima kiwe kikubwa kuliko mchango wa sasa (Tsh ${this.formatNumber(currentContribution)})` 
                };
            }
            
            const increase = newAmount - currentContribution;
            if (increase > availableBalance) {
                return { 
                    valid: false, 
                    message: `Ongezeko (Tsh ${this.formatNumber(increase)}) linazidi salio lililopo (Tsh ${this.formatNumber(availableBalance)})` 
                };
            }
            
            return { 
                valid: true, 
                message: `Kiasi kimekubaliwa! Ongezeko la Tsh ${this.formatNumber(increase)} ni sahihi.` 
            };
        },

        async checkEmployee() {
            this.loading = true;
            
            try {
                const response = await axios.post('{{ route("deductions.check-employee") }}', {
                    check_number: this.formData.check_number
                });
                
                if (response.data.success) {
                    this.employeeData = response.data.data;
                    console.log('Employee data received:', this.employeeData); // DEBUG LOG
                    console.log('Names field:', this.employeeData.names); // DEBUG LOG
                    this.step = 2;
                    showNotification('Taarifa za mfanyakazi zimepatikana kikamilifu!', 'success', 5000);
                } else {
                    showNotification(response.data.message, 'error');
                }
            } catch (error) {
                showNotification('Hitilafu imetokea wakati wa kuangalia taarifa. Jaribu tena.', 'error');
                console.error('Error checking employee:', error);
            }
            
            this.loading = false;
        },

        async validateAmount() {
            this.loading = true;
            
            try {
                const response = await axios.post('{{ route("deductions.validate-amount") }}', {
                    new_amount: this.formData.new_amount,
                    current_contribution: this.employeeData.current_contribution,
                    salio_lililopo: this.employeeData.salio_lililopo
                });
                
                if (response.data.success) {
                    this.validationData = response.data.data;
                    this.step = 3;
                    showNotification('Kiasi kimehakikiwa na kimekubaliwa!', 'success', 5000);
                } else {
                    showNotification(response.data.message, 'warning');
                }
            } catch (error) {
                showNotification('Hitilafu imetokea wakati wa kuhakiki kiasi. Jaribu tena.', 'error');
                console.error('Error validating amount:', error);
            }
            
            this.loading = false;
        },

        handleFileUpload(event) {
            const file = event.target.files[0];
            if (file) {
                if (file.size > 2048 * 1024) {
                    showNotification('Ukubwa wa faili hauwezi kuzidi 2MB. Tafadhali chagua faili dogo zaidi.', 'warning');
                    event.target.value = '';
                    return;
                }
                
                const allowedTypes = ['application/pdf', 'image/jpeg', 'image/jpg', 'image/png'];
                if (!allowedTypes.includes(file.type)) {
                    showNotification('Aina ya faili haikubaliwa. Tumia PDF, JPG, au PNG tu.', 'warning');
                    event.target.value = '';
                    return;
                }
                
                this.formData.document = file;
                showNotification(`Faili "${file.name}" limepakiwa kikamilifu!`, 'success', 3000);
            }
        },

        async submitApplication() {
            this.loading = true;
            
            const formData = new FormData();
            formData.append('check_number', this.employeeData.check_number);
            formData.append('vote_code', this.employeeData.vote_code);
            formData.append('vote_name', this.employeeData.vote_name);
            formData.append('dept_name', this.employeeData.dept_name);
            formData.append('basic_salary', this.employeeData.basic_salary);
            formData.append('allowances', this.employeeData.allowances);
            formData.append('net_amount', this.employeeData.net_amount);
            formData.append('current_contribution', this.employeeData.current_contribution);
            formData.append('new_contribution', this.formData.new_amount);
            formData.append('difference', this.validationData.difference);
            formData.append('available_balance', this.employeeData.salio_lililopo);
            formData.append('moja_ya_tatu_mshahara', this.employeeData.moja_ya_tatu_mshahara);
            formData.append('phone_number', this.formData.phone_number);
            formData.append('month', this.employeeData.month);
            formData.append('year', this.employeeData.year);
            
            // FIXED: Include names field in form submission
            if (this.employeeData.names) {
                formData.append('names', this.employeeData.names);
                console.log('Sending names field:', this.employeeData.names); // DEBUG LOG
            }
            
            if (this.formData.document) {
                formData.append('document', this.formData.document);
            }
            
            try {
                const response = await axios.post('{{ route("deductions.store") }}', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                });
                
                if (response.data.success) {
                    this.submitted = true;
                    showNotification(response.data.message, 'success', 8000);
                } else {
                    showNotification(response.data.message, 'error');
                }
            } catch (error) {
                if (error.response?.data?.errors) {
                    let errorMessages = [];
                    Object.values(error.response.data.errors).forEach(errors => {
                        errors.forEach(error => errorMessages.push(error));
                    });
                    
                    showNotification(errorMessages[0], 'error');
                    
                    if (errorMessages.length > 1) {
                        setTimeout(() => {
                            errorMessages.slice(1).forEach((msg, index) => {
                                setTimeout(() => showNotification(msg, 'warning'), index * 1000);
                            });
                        }, 1000);
                    }
                } else {
                    showNotification('Hitilafu imetokea wakati wa kuhifadhi ombi. Jaribu tena.', 'error');
                }
                console.error('Error submitting application:', error);
            }
            
            this.loading = false;
        },

        resetForm() {
            this.step = 1;
            this.submitted = false;
            this.formData = {
                check_number: '',
                new_amount: '',
                formatted_new_amount: '',
                phone_number: '',
                document: null
            };
            this.employeeData = {};
            this.validationData = {};
            
            const fileInput = document.querySelector('input[type="file"]');
            if (fileInput) {
                fileInput.value = '';
            }
            
            showNotification('Fomu imerejeshwa kwenye hali ya awali. Unaweza kuanza upya.', 'info', 4000);
        },

        formatNumber(num) {
            if (!num) return '0';
            return new Intl.NumberFormat().format(num);
        }
    }
}

// Enhanced page load notification
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(() => {
        showNotification('Mfumo umepakiwa kikamilifu. Karibu kwenye mfumo wa maombi ya makato!', 'info', 5000);
    }, 500);
});
</script>
@endsection

@push('styles')
<style>
/* Enhanced notification animations */
@keyframes successBounce {
    0%, 20%, 40%, 60%, 80%, 100% { transform: translateY(0); }
    10% { transform: translateY(-8px); }
    30% { transform: translateY(-4px); }
    50% { transform: translateY(-2px); }
    70% { transform: translateY(-1px); }
}

@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* Enhanced form animations */
.step-transition {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced button hover effects */
.btn-enhanced {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-enhanced:hover {
    transform: translateY(-1px);
}

.btn-enhanced:active {
    transform: translateY(0);
}

/* Custom file upload styling */
.file-upload-area {
    transition: all 0.3s ease;
}

.file-upload-area:hover {
    border-color: #475569;
    background-color: #f8fafc;
}

.dark .file-upload-area:hover {
    background-color: #334155;
}

/* Enhanced progress indicator */
.progress-step {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-step.active {
    box-shadow: 0 0 0 3px rgba(71, 85, 105, 0.2);
}

/* Enhanced focus styles */
input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 3px rgba(71, 85, 105, 0.1);
}

/* Mobile responsive improvements */
@media (max-width: 640px) {
    #notification-container {
        left: 1rem;
        right: 1rem;
        top: 5rem;
    }
    
    .step-mobile {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* Enhanced validation styling */
.validation-success {
    animation: slideInUp 0.4s ease-out;
}

.validation-error {
    animation: errorPulse 0.4s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes errorPulse {
    0%, 100% { 
        transform: scale(1); 
    }
    50% { 
        transform: scale(1.02); 
    }
}

/* Enhanced loading states */
.loading-overlay {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
}

.dark .loading-overlay {
    background: rgba(15, 23, 42, 0.9);
}

/* Enhanced card shadows */
.card-enhanced {
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(0, 0, 0, 0.05);
}

.dark .card-enhanced {
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.3),
        0 2px 4px -1px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Summary card enhancements */
.summary-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.dark .summary-card {
    background: linear-gradient(135deg, #334155 0%, #475569 100%);
}

/* Enhanced typography */
.text-enhanced {
    letter-spacing: -0.025em;
    line-height: 1.6;
}

/* Improved accessibility */
.focus-visible:focus {
    outline: 2px solid #475569;
    outline-offset: 2px;
}

/* Enhanced transitions */
.transition-enhanced {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
</style>
@endpush