@extends('layouts.app')
@section('title', 'Manage Employees')
@section('page-title', 'Simamia Wafanyakazi')
@section('content')

<div class="space-y-6" data-animate x-data="employeeManager()">
    {{-- Success and Error Messages --}}
    @if (session('success'))
        <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-xl p-4 flex items-center justify-between animate-fade-in" x-data="{ show: true }" x-show="show" x-transition>
            <div class="flex items-center space-x-3">
                <div class="w-8 h-8 bg-green-100 dark:bg-green-800 rounded-full flex items-center justify-center">
                    <span class="material-icons text-green-600 dark:text-green-300 text-sm">check_circle</span>
                </div>
                <p class="text-green-800 dark:text-green-200 font-medium">{{ session('success') }}</p>
            </div>
            <button @click="show = false" class="text-green-600 dark:text-green-300 hover:text-green-800 dark:hover:text-green-100 transition-colors">
                <span class="material-icons text-lg">close</span>
            </button>
        </div>
    @endif

    @if (session('error'))
        <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-4 flex items-center justify-between animate-fade-in" x-data="{ show: true }" x-show="show" x-transition>
            <div class="flex items-center space-x-3">
                <div class="w-8 h-8 bg-red-100 dark:bg-red-800 rounded-full flex items-center justify-center">
                    <span class="material-icons text-red-600 dark:text-red-300 text-sm">error</span>
                </div>
                <p class="text-red-800 dark:text-red-200 font-medium">{{ session('error') }}</p>
            </div>
            <button @click="show = false" class="text-red-600 dark:text-red-300 hover:text-red-800 dark:hover:text-red-100 transition-colors">
                <span class="material-icons text-lg">close</span>
            </button>
        </div>
    @endif

    @if ($errors->any())
        <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-4">
            <div class="flex items-start space-x-3">
                <div class="w-8 h-8 bg-red-100 dark:bg-red-800 rounded-full flex items-center justify-center">
                    <span class="material-icons text-red-600 dark:text-red-300 text-sm">error</span>
                </div>
                <div>
                    <h4 class="text-red-800 dark:text-red-200 font-medium mb-2">Makosa yamejitokeza:</h4>
                    <ul class="list-disc list-inside text-red-700 dark:text-red-300 space-y-1">
                        @foreach ($errors->all() as $error)
                            <li class="text-sm">{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    @endif

    {{-- Page Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Simamia Wafanyakazi</h1>
            <p class="text-gray-600 dark:text-gray-400 mt-1">Ona, hariri na simamia wafanyakazi wote</p>
        </div>
        
        <button type="button" 
                @click="openAddModal()"
                class="inline-flex items-center px-4 py-2.5 bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-xl hover:from-primary-600 hover:to-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-all duration-200 shadow-lg hover:shadow-xl hover:scale-105">
            <span class="material-icons text-lg mr-2">person_add</span>
            Ongeza Mfanyakazi
        </button>
    </div>

    {{-- Statistics Cards --}}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-gray-700 hover-lift">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-400 font-medium">Jumla ya Wafanyakazi</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $employees->count() }}</p>
                </div>
                <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/20 rounded-xl flex items-center justify-center">
                    <span class="material-icons text-blue-600 dark:text-blue-400">groups</span>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-gray-700 hover-lift">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-400 font-medium">Wafanyakazi Wapya</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $employees->where('created_at', '>=', now()->startOfMonth())->count() }}</p>
                </div>
                <div class="w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-xl flex items-center justify-center">
                    <span class="material-icons text-green-600 dark:text-green-400">trending_up</span>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-gray-700 hover-lift">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-400 font-medium">Vituo Vyenye Wafanyakazi</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $employees->pluck('post_id')->unique()->count() }}</p>
                </div>
                <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/20 rounded-xl flex items-center justify-center">
                    <span class="material-icons text-purple-600 dark:text-purple-400">place</span>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-gray-700 hover-lift">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-400 font-medium">Majukumu Mbalimbali</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $employees->pluck('role_id')->unique()->count() }}</p>
                </div>
                <div class="w-12 h-12 bg-orange-100 dark:bg-orange-900/20 rounded-xl flex items-center justify-center">
                    <span class="material-icons text-orange-600 dark:text-orange-400">admin_panel_settings</span>
                </div>
            </div>
        </div>
    </div>

  {{-- Login Activity Dashboard --}}
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
    <div class="flex items-center justify-between mb-6">
        <div class="flex items-center space-x-3">
            <div class="w-10 h-10 bg-gradient-to-r from-indigo-100 to-purple-100 dark:from-indigo-900/20 dark:to-purple-900/20 rounded-xl flex items-center justify-center">
                <span class="material-icons text-indigo-600 dark:text-indigo-400">analytics</span>
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Takwimu za Uongozi</h3>
                <p class="text-sm text-gray-500 dark:text-gray-400">Ufuatiliaji wa shughuli za watumiaji</p>
            </div>
        </div>
        <div class="flex items-center space-x-2">
            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400">
                <span class="w-2 h-2 bg-green-400 rounded-full mr-2 animate-pulse"></span>
                Live
            </span>
        </div>
    </div>

    {{-- Real-time Online Status --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        {{-- Currently Online Users --}}
        <div class="bg-gradient-to-br from-green-50 via-emerald-50 to-teal-50 dark:from-green-900/20 dark:via-emerald-900/20 dark:to-teal-900/20 rounded-xl p-6 border border-green-200 dark:border-green-700/30 relative overflow-hidden">
            <div class="absolute top-0 right-0 w-32 h-32 bg-green-200/20 dark:bg-green-700/10 rounded-full -mr-16 -mt-16"></div>
            <div class="relative">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center space-x-3">
                        <div class="w-12 h-12 bg-green-500 rounded-xl flex items-center justify-center shadow-lg">
                            <span class="material-icons text-white text-xl">radio_button_checked</span>
                        </div>
                        <div>
                            <h4 class="text-sm font-medium text-green-800 dark:text-green-200 uppercase tracking-wide">Walio Online Sasa</h4>
                            <p class="text-3xl font-bold text-green-900 dark:text-green-100">{{ $loginStats['online_now'] }}</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-1">
                        <span class="w-3 h-3 bg-green-400 rounded-full animate-pulse"></span>
                        <span class="text-xs text-green-700 dark:text-green-300">Wakati huu</span>
                    </div>
                </div>
                
                {{-- Online Users List Preview --}}
                <div class="space-y-2">
                    <div class="flex items-center justify-between text-xs">
                        <span class="text-green-700 dark:text-green-300">Watumiaji wanashiriki:</span>
                        <span class="text-green-600 dark:text-green-400">{{ $loginStats['online_now'] > 0 ? 'Wako' : 'Hakuna' }}</span>
                    </div>
                    
                    {{-- Sample online indicators --}}
                    @if($loginStats['online_now'] > 0)
                    <div class="flex items-center space-x-2">
                        @for($i = 0; $i < min($loginStats['online_now'], 5); $i++)
                        <div class="flex items-center space-x-1">
                            <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                            <span class="text-xs text-green-700 dark:text-green-300">User {{ $i + 1 }}</span>
                        </div>
                        @endfor
                        @if($loginStats['online_now'] > 5)
                        <span class="text-xs text-green-600 dark:text-green-400">+{{ $loginStats['online_now'] - 5 }} zaidi</span>
                        @endif
                    </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Recently Online Users --}}
        <div class="bg-gradient-to-br from-yellow-50 via-amber-50 to-orange-50 dark:from-yellow-900/20 dark:via-amber-900/20 dark:to-orange-900/20 rounded-xl p-6 border border-yellow-200 dark:border-yellow-700/30 relative overflow-hidden">
            <div class="absolute top-0 right-0 w-32 h-32 bg-yellow-200/20 dark:bg-yellow-700/10 rounded-full -mr-16 -mt-16"></div>
            <div class="relative">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center space-x-3">
                        <div class="w-12 h-12 bg-yellow-500 rounded-xl flex items-center justify-center shadow-lg">
                            <span class="material-icons text-white text-xl">history</span>
                        </div>
                        <div>
                            <h4 class="text-sm font-medium text-yellow-800 dark:text-yellow-200 uppercase tracking-wide">Hivi Karibuni</h4>
                            <p class="text-3xl font-bold text-yellow-900 dark:text-yellow-100">{{ $loginStats['recently_online'] }}</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-1">
                        <span class="w-3 h-3 bg-yellow-400 rounded-full"></span>
                        <span class="text-xs text-yellow-700 dark:text-yellow-300">Dakika 30</span>
                    </div>
                </div>
                
                {{-- Recently online activity --}}
                <div class="space-y-2">
                    <div class="flex items-center justify-between text-xs">
                        <span class="text-yellow-700 dark:text-yellow-300">Shughuli za hivi karibuni:</span>
                        <span class="text-yellow-600 dark:text-yellow-400">{{ $loginStats['recently_online'] > 0 ? 'Kuna' : 'Hakuna' }}</span>
                    </div>
                    
                    {{-- Recent activity timeline --}}
                    @if($loginStats['recently_online'] > 0)
                    <div class="space-y-1">
                        @for($i = 0; $i < min($loginStats['recently_online'], 3); $i++)
                        <div class="flex items-center space-x-2 text-xs">
                            <div class="w-2 h-2 bg-yellow-400 rounded-full"></div>
                            <span class="text-yellow-700 dark:text-yellow-300">User aliondoka dakika {{ rand(1, 30) }} zilizopita</span>
                        </div>
                        @endfor
                        @if($loginStats['recently_online'] > 3)
                        <div class="text-xs text-yellow-600 dark:text-yellow-400 ml-4">+{{ $loginStats['recently_online'] - 3 }} wengine</div>
                        @endif
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Today's Login Activity & Password Changes --}}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        {{-- Today's Logins - List Style --}}
        <div class="space-y-3">
            <div class="flex items-center space-x-3 pb-3 border-b border-gray-200 dark:border-gray-700">
                <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900/20 rounded-lg flex items-center justify-center">
                    <span class="material-icons text-blue-600 dark:text-blue-400 text-lg">today</span>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-900 dark:text-white">Walioingia Leo</h4>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Shughuli za leo</p>
                </div>
            </div>
            
            <div class="flex items-center justify-between py-3 px-4 bg-blue-50 dark:bg-blue-900/10 rounded-lg border-l-4 border-blue-400">
                <div class="flex items-center space-x-3">
                    <div class="text-2xl font-bold text-blue-600 dark:text-blue-400">{{ $loginStats['today'] }}</div>
                    <div class="text-sm text-blue-700 dark:text-blue-300">watumiaji</div>
                </div>
                <div class="text-xs text-blue-600 dark:text-blue-400 bg-blue-100 dark:bg-blue-900/20 px-2 py-1 rounded-full">
                    {{ date('d M Y') }}
                </div>
            </div>
        </div>

        {{-- Password Changes - List Style --}}
        <div class="space-y-3">
            <div class="flex items-center space-x-3 pb-3 border-b border-gray-200 dark:border-gray-700">
                <div class="w-8 h-8 bg-purple-100 dark:bg-purple-900/20 rounded-lg flex items-center justify-center">
                    <span class="material-icons text-purple-600 dark:text-purple-400 text-lg">key</span>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-900 dark:text-white">Mabadiliko ya Nenosiri</h4>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Usalama wa akaunti</p>
                </div>
            </div>
            
            <div class="flex items-center justify-between py-3 px-4 bg-purple-50 dark:bg-purple-900/10 rounded-lg border-l-4 border-purple-400">
                <div class="flex items-center space-x-3">
                    <div class="text-2xl font-bold text-purple-600 dark:text-purple-400">{{ $loginStats['password_changed'] }}</div>
                    <div class="text-sm text-purple-700 dark:text-purple-300">walibadilisha</div>
                </div>
                <div class="text-xs text-purple-600 dark:text-purple-400 bg-purple-100 dark:bg-purple-900/20 px-2 py-1 rounded-full">
                    Hii wiki
                </div>
            </div>
        </div>
    </div>

    {{-- Extended Period Stats - Horizontal Layout --}}
    <div class="space-y-4">
        <h4 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center">
            <span class="material-icons text-gray-500 dark:text-gray-400 mr-2 text-lg">insights</span>
            Takwimu za Kipindi
        </h4>
        
        <div class="space-y-3">
            {{-- This Week --}}
            <div class="flex items-center justify-between py-4 px-5 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-700/30 dark:to-gray-600/30 rounded-lg border border-gray-200 dark:border-gray-600/50 hover:shadow-md transition-shadow">
                <div class="flex items-center space-x-4">
                    <div class="w-10 h-10 bg-indigo-100 dark:bg-indigo-900/20 rounded-lg flex items-center justify-center">
                        <span class="material-icons text-indigo-600 dark:text-indigo-400">view_week</span>
                    </div>
                    <div>
                        <div class="text-lg font-bold text-gray-900 dark:text-white">{{ $loginStats['this_week'] }}</div>
                        <div class="text-sm text-gray-600 dark:text-gray-400">walioingia wiki hii</div>
                    </div>
                </div>
                <div class="flex items-center space-x-2">
                    <div class="text-xs text-gray-500 dark:text-gray-400">{{ date('M d') }} - {{ date('M d', strtotime('+6 days')) }}</div>
                    <span class="material-icons text-gray-400 text-lg">trending_up</span>
                </div>
            </div>

            {{-- This Month --}}
            <div class="flex items-center justify-between py-4 px-5 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-700/30 dark:to-gray-600/30 rounded-lg border border-gray-200 dark:border-gray-600/50 hover:shadow-md transition-shadow">
                <div class="flex items-center space-x-4">
                    <div class="w-10 h-10 bg-teal-100 dark:bg-teal-900/20 rounded-lg flex items-center justify-center">
                        <span class="material-icons text-teal-600 dark:text-teal-400">calendar_view_month</span>
                    </div>
                    <div>
                        <div class="text-lg font-bold text-gray-900 dark:text-white">{{ $loginStats['this_month'] }}</div>
                        <div class="text-sm text-gray-600 dark:text-gray-400">walioingia mwezi huu</div>
                    </div>
                </div>
                <div class="flex items-center space-x-2">
                    <div class="text-xs text-gray-500 dark:text-gray-400">{{ date('M Y') }}</div>
                    <span class="material-icons text-gray-400 text-lg">calendar_month</span>
                </div>
            </div>

            {{-- This Year --}}
            <div class="flex items-center justify-between py-4 px-5 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-700/30 dark:to-gray-600/30 rounded-lg border border-gray-200 dark:border-gray-600/50 hover:shadow-md transition-shadow">
                <div class="flex items-center space-x-4">
                    <div class="w-10 h-10 bg-orange-100 dark:bg-orange-900/20 rounded-lg flex items-center justify-center">
                        <span class="material-icons text-orange-600 dark:text-orange-400">calendar_view_year</span>
                    </div>
                    <div>
                        <div class="text-lg font-bold text-gray-900 dark:text-white">{{ $loginStats['this_year'] }}</div>
                        <div class="text-sm text-gray-600 dark:text-gray-400">walioingia mwaka huu</div>
                    </div>
                </div>
                <div class="flex items-center space-x-2">
                    <div class="text-xs text-gray-500 dark:text-gray-400">{{ date('Y') }}</div>
                    <span class="material-icons text-gray-400 text-lg">trending_up</span>
                </div>
            </div>
        </div>
    </div>

    {{-- Quick Actions Footer --}}
    <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
        <div class="flex items-center justify-between">
            <div class="flex items-center space-x-4">
                <button class="inline-flex items-center px-3 py-2 text-xs font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">
                    <span class="material-icons mr-1 text-sm">refresh</span>
                    Sasisha
                </button>
                <button class="inline-flex items-center px-3 py-2 text-xs font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">
                    <span class="material-icons mr-1 text-sm">download</span>
                    Pakua Ripoti
                </button>
            </div>
            <div class="text-xs text-gray-500 dark:text-gray-400">
                Imesasishwa: {{ date('H:i:s') }}
            </div>
        </div>
    </div>
</div>

{{-- Auto-refresh script for real-time updates --}}
<script>
// Auto-refresh online status every 30 seconds
setInterval(function() {
    // You can implement AJAX call here to refresh online status
    const timestamp = new Date().toLocaleTimeString();
    const timestampElements = document.querySelectorAll('[data-timestamp]');
    timestampElements.forEach(el => {
        el.textContent = `Imesasishwa: ${timestamp}`;
    });
}, 30000);

// Add pulse animation to online indicators
document.addEventListener('DOMContentLoaded', function() {
    const onlineIndicators = document.querySelectorAll('.animate-pulse');
    onlineIndicators.forEach(indicator => {
        setInterval(() => {
            indicator.style.opacity = indicator.style.opacity === '0.5' ? '1' : '0.5';
        }, 1000);
    });
});
</script>

    {{-- Search and Filter --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-4">
        <form method="GET" action="{{ route('employees.index') }}" class="flex flex-col sm:flex-row gap-4">
            <div class="flex-1">
                <div class="relative">
                    <input type="text" 
                           name="search" 
                           value="{{ request('search') }}"
                           placeholder="Tafuta kwa jina, barua pepe, simu, jukumu..." 
                           class="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <span class="material-icons text-gray-400 text-lg">search</span>
                    </div>
                </div>
            </div>
            <div class="flex gap-2">
                <button type="submit" 
                        class="px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 transition-colors flex items-center space-x-2">
                    <span class="material-icons text-lg">search</span>
                    <span>Tafuta</span>
                </button>
                @if(request('search'))
                <a href="{{ route('employees.index') }}" 
                   class="px-6 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 transition-colors flex items-center space-x-2">
                    <span class="material-icons text-lg">clear</span>
                    <span>Ondoa</span>
                </a>
                @endif
            </div>
        </form>
    </div>

    {{-- Employees Table --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                    Wafanyakazi Wote
                    @if(request('search'))
                        <span class="text-sm font-normal text-gray-500 dark:text-gray-400">
                            (Matokeo ya utafutaji: "{{ request('search') }}")
                        </span>
                    @endif
                </h3>
            </div>
        </div>
        
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50 dark:bg-gray-700/50">
                    <tr>
                        <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Mfanyakazi
                        </th>
                        <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Mawasiliano
                        </th>
                        <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Jukumu
                        </th>
                        <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Kituo & Wilaya
                        </th>
                        <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Mwisho Kuingia
                        </th>
                        <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Nenosiri Lilibadilishwa
                        </th>
                        <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Tarehe ya Usajili
                        </th>
                        <th class="px-6 py-4 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Vitendo
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                    @forelse ($employees as $employee)
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center space-x-3">
                                    <div class="w-10 h-10 bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900/20 dark:to-blue-800/20 rounded-full flex items-center justify-center relative">
                                        <span class="material-icons text-blue-600 dark:text-blue-400 text-lg">person</span>
                                        @if($employee->user->last_login && $employee->user->last_login >= now()->subMinutes(15))
                                            <div class="absolute -top-1 -right-1 w-3 h-3 bg-green-400 border-2 border-white dark:border-gray-800 rounded-full" title="Online Sasa"></div>
                                        @elseif($employee->user->last_login && $employee->user->last_login >= now()->subHour())
                                            <div class="absolute -top-1 -right-1 w-3 h-3 bg-yellow-400 border-2 border-white dark:border-gray-800 rounded-full" title="Alikuwa Online Hivi Karibuni"></div>
                                        @endif
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium text-gray-900 dark:text-white">{{ $employee->user->name }}</p>
                                        <div class="flex items-center space-x-2 mt-1">
                                            @if($employee->force_number)
                                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300">
                                                    {{ $employee->force_number }}
                                                </span>
                                            @endif
                                            @if($employee->rank)
                                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 dark:bg-purple-900/20 text-purple-800 dark:text-purple-300">
                                                    {{ $employee->rank }}
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="space-y-1">
                                    <div class="flex items-center space-x-2">
                                        <span class="material-icons text-gray-400 text-sm">email</span>
                                        <span class="text-sm text-gray-500 dark:text-gray-400">{{ $employee->user->email }}</span>
                                    </div>
                                    @if($employee->phone)
                                    <div class="flex items-center space-x-2">
                                        <span class="material-icons text-gray-400 text-sm">phone</span>
                                        <span class="text-sm text-gray-500 dark:text-gray-400">{{ $employee->phone }}</span>
                                    </div>
                                    @endif
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @if($employee->role)
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 dark:bg-primary-900/20 text-primary-800 dark:text-primary-300">
                                        <span class="material-icons text-xs mr-1">badge</span>
                                        {{ $employee->role->role }}
                                    </span>
                                @else
                                    <span class="text-sm text-gray-400">Hakuna jukumu</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="space-y-1">
                                    @if($employee->post)
                                        <div class="flex items-center space-x-2">
                                            <span class="material-icons text-gray-400 text-sm">place</span>
                                            <span class="text-sm font-medium text-gray-900 dark:text-white">{{ $employee->post->name }}</span>
                                        </div>
                                    @endif
                                    @if($employee->district)
                                        <div class="flex items-center space-x-2">
                                            <span class="material-icons text-gray-400 text-sm">location_on</span>
                                            <span class="text-sm text-gray-500 dark:text-gray-400">{{ $employee->district->name }}</span>
                                        </div>
                                    @endif
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @if($employee->user->last_login)
                                    <div class="space-y-1">
                                        <span class="text-sm text-gray-900 dark:text-white">
                                            {{ $employee->user->last_login->format('d/m/Y') }}
                                        </span>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">
                                            {{ $employee->user->last_login->format('H:i') }}
                                            @if($employee->user->last_login >= now()->subMinutes(15))
                                                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300 ml-1">
                                                    Online
                                                </span>
                                            @elseif($employee->user->last_login >= now()->subHour())
                                                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-300 ml-1">
                                                    Hivi Karibuni
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                @else
                                    <span class="text-sm text-gray-400">Hajapatikana</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @if($employee->user->last_password_change)
                                    <div class="space-y-1">
                                        <span class="text-sm text-gray-900 dark:text-white">
                                            {{ $employee->user->last_password_change->format('d/m/Y') }}
                                        </span>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">
                                            {{ $employee->user->last_password_change->diffForHumans() }}
                                        </div>
                                    </div>
                                @else
                                    <span class="text-sm text-gray-400">Hajapatikana</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                {{ $employee->created_at }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <div class="flex items-center justify-end space-x-2">
                                    <button type="button" 
                                            @click="viewEmployee({{ $employee->id }})"
                                            class="inline-flex items-center p-2 text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-all duration-200"
                                            title="Ona maelezo">
                                        <span class="material-icons text-lg">visibility</span>
                                    </button>
                                    <button type="button" 
                                            @click="editEmployee({{ $employee->id }})"
                                            class="inline-flex items-center p-2 text-yellow-600 hover:text-yellow-700 dark:text-yellow-400 dark:hover:text-yellow-300 hover:bg-yellow-50 dark:hover:bg-yellow-900/20 rounded-lg transition-all duration-200"
                                            title="Hariri">
                                        <span class="material-icons text-lg">edit</span>
                                    </button>
                                    <button type="button" 
                                            @click="openDeleteModal({{ $employee->id }}, '{{ addslashes($employee->user->name) }}')"
                                            class="inline-flex items-center p-2 text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-all duration-200"
                                            title="Futa">
                                        <span class="material-icons text-lg">delete</span>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-6 py-12 text-center">
                                <div class="flex flex-col items-center justify-center space-y-3">
                                    <div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center">
                                        <span class="material-icons text-gray-400 text-2xl">groups</span>
                                    </div>
                                    <div>
                                        <h3 class="text-sm font-medium text-gray-900 dark:text-white">
                                            @if(request('search'))
                                                Hakuna matokeo ya utafutaji
                                            @else
                                                Hakuna wafanyakazi
                                            @endif
                                        </h3>
                                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                            @if(request('search'))
                                                Jaribu kutumia maneno mengine ya utafutaji
                                            @else
                                                Anza kwa kuongeza mfanyakazi wa kwanza
                                            @endif
                                        </p>
                                    </div>
                                    @if(!request('search'))
                                    <button type="button" 
                                            @click="openAddModal()"
                                            class="inline-flex items-center px-3 py-2 text-sm font-medium text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 transition-colors">
                                        <span class="material-icons text-sm mr-1">person_add</span>
                                        Ongeza Mfanyakazi
                                    </button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Pagination Info --}}
        @if($employees->count() > 0)
        <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
            <div class="flex items-center justify-between">
                <div class="text-sm text-gray-500 dark:text-gray-400">
                    Inaonyesha <span class="font-medium text-gray-900 dark:text-white">{{ $employees->count() }}</span> 
                    @if(request('search'))
                        matokeo ya utafutaji
                    @else
                        ya jumla ya wafanyakazi
                    @endif
                </div>
            </div>
        </div>
        @endif
    </div>

    {{-- Add Employee Modal --}}
    <div x-show="addModal.open" 
         x-transition:enter="ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 z-50 overflow-y-auto"
         style="display: none;">

        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-85 transition-opacity" @click="closeAddModal()"></div>

            <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full"
                 x-transition:enter="ease-out duration-300"
                 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                 x-transition:leave="ease-in duration-200"
                 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">

                <form action="{{ route('employees.store') }}" method="POST">
                    @csrf
                    <div class="bg-white dark:bg-gray-800">
                        {{-- Modal Header --}}
                        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-3">
                                    <div class="w-10 h-10 bg-primary-100 dark:bg-primary-900/20 rounded-lg flex items-center justify-center">
                                        <span class="material-icons text-primary-600 dark:text-primary-400">person_add</span>
                                    </div>
                                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Ongeza Mfanyakazi Mpya</h3>
                                </div>
                                <button type="button" @click="closeAddModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors">
                                    <span class="material-icons">close</span>
                                </button>
                            </div>
                        </div>

                        {{-- Tab Navigation --}}
                        <div class="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
                            <nav class="flex px-6" aria-label="Tabs">
                                <button type="button" 
                                        @click="addModal.activeTab = 'user-details'"
                                        :class="{ 
                                            'border-primary-500 text-primary-600 dark:text-primary-400': addModal.activeTab === 'user-details',
                                            'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300': addModal.activeTab !== 'user-details'
                                        }"
                                        class="py-4 px-6 border-b-2 font-medium text-sm transition-all duration-200 flex items-center space-x-2">
                                    <span class="material-icons text-lg">person</span>
                                    <span>Maelezo ya Mtumiaji</span>
                                </button>
                                
                                <button type="button" 
                                        @click="addModal.activeTab = 'employee-details'"
                                        :class="{ 
                                            'border-primary-500 text-primary-600 dark:text-primary-400': addModal.activeTab === 'employee-details',
                                            'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300': addModal.activeTab !== 'employee-details'
                                        }"
                                        class="py-4 px-6 border-b-2 font-medium text-sm transition-all duration-200 flex items-center space-x-2">
                                    <span class="material-icons text-lg">badge</span>
                                    <span>Maelezo ya Kazi</span>
                                </button>
                                
                                <button type="button" 
                                        @click="addModal.activeTab = 'organizational-info'"
                                        :class="{ 
                                            'border-primary-500 text-primary-600 dark:text-primary-400': addModal.activeTab === 'organizational-info',
                                            'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300': addModal.activeTab !== 'organizational-info'
                                        }"
                                        class="py-4 px-6 border-b-2 font-medium text-sm transition-all duration-200 flex items-center space-x-2">
                                    <span class="material-icons text-lg">business</span>
                                    <span>Maelezo ya Shirika</span>
                                </button>
                            </nav>
                        </div>

                        {{-- Tab Content --}}
                        <div class="p-6 max-h-96 overflow-y-auto">
                            {{-- Tab 1: User Details --}}
                            <div x-show="addModal.activeTab === 'user-details'" class="space-y-4">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Jina Kamili <span class="text-red-500">*</span>
                                        </label>
                                        <input type="text" name="name" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder="Ingiza jina kamili" required>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Barua Pepe <span class="text-red-500">*</span>
                                        </label>
                                        <input type="email" name="email" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder="mfanyakazi@example.com" required>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Nenosiri <span class="text-red-500">*</span>
                                        </label>
                                        <input type="password" name="password" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" value="polisi@1234" required>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Thibitisha Nenosiri <span class="text-red-500">*</span>
                                        </label>
                                        <input type="password" name="password_confirmation" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" value="polisi@1234" required>
                                    </div>
                                </div>
                            </div>

                            {{-- Tab 2: Employee Details --}}
                            <div x-show="addModal.activeTab === 'employee-details'" class="space-y-4">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Jukumu <span class="text-red-500">*</span>
                                        </label>
                                        <select name="role_id" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" required>
                                            <option value="">Chagua Jukumu</option>
                                            @foreach($roles as $role)
                                                <option value="{{ $role->id }}">{{ $role->role }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Nambari ya Simu <span class="text-red-500">*</span>
                                        </label>
                                        <input type="text" name="phone" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder="+255 XXX XXX XXX" required>
                                    </div>
                                </div>
                            </div>

                            {{-- Tab 3: Organizational Information --}}
                            <div x-show="addModal.activeTab === 'organizational-info'" class="space-y-4">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Kituo <span class="text-red-500">*</span>
                                        </label>
                                        <select name="post_id" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" required>
                                            <option value="">Chagua Kituo</option>
                                            @foreach($posts as $post)
                                                <option value="{{ $post->id }}">{{ $post->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Wilaya <span class="text-red-500">*</span>
                                        </label>
                                        <select name="district_id" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" required>
                                            <option value="">Chagua Wilaya</option>
                                            @foreach($districts as $district)
                                                <option value="{{ $district->id }}">{{ $district->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Nambari ya Jeshi
                                        </label>
                                        <input type="text" name="force_number" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder="FN/XXXX/2024">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Cheo
                                        </label>
                                        <input type="text" name="rank" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder="Ingiza cheo">
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Modal Footer --}}
                        <div class="bg-gray-50 dark:bg-gray-700/50 px-6 py-4 flex items-center justify-between">
                            <button type="button" @click="closeAddModal()" class="px-4 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-500 transition-colors">
                                Ghairi
                            </button>
                            
                            <div class="flex items-center space-x-3">
                                <button type="button" @click="nextTab()" 
                                        x-show="addModal.activeTab !== 'organizational-info'"
                                        class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors">
                                    Endelea
                                </button>
                                
                                <button type="submit" x-show="addModal.activeTab === 'organizational-info'" 
                                        class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                                    Hifadhi
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- View Employee Modal --}}
    <div x-show="viewModal.open" 
         x-transition:enter="ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 z-50 overflow-y-auto"
         style="display: none;">
        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-85 transition-opacity" @click="closeViewModal()"></div>
            <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
                <div x-html="viewModal.content"></div>
            </div>
        </div>
    </div>

    {{-- Edit Employee Modal --}}
    <div x-show="editModal.open" 
         x-transition:enter="ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 z-50 overflow-y-auto"
         style="display: none;">
        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-85 transition-opacity" @click="closeEditModal()"></div>
            <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
                <div x-html="editModal.content"></div>
            </div>
        </div>
    </div>

    {{-- Delete Employee Modal --}}
    <div x-show="deleteModal.open" 
         x-transition:enter="ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 z-50 overflow-y-auto"
         style="display: none;">

        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-85 transition-opacity" @click="closeDeleteModal()"></div>

            <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="flex items-center justify-between mb-6">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-red-100 dark:bg-red-900/20 rounded-lg flex items-center justify-center">
                                <span class="material-icons text-red-600 dark:text-red-400">warning</span>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Futa Mfanyakazi</h3>
                        </div>
                        <button type="button" @click="closeDeleteModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors">
                            <span class="material-icons">close</span>
                        </button>
                    </div>

                    <div class="space-y-4">
                        <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
                            <div class="flex items-start space-x-3">
                                <span class="material-icons text-red-600 dark:text-red-400 mt-0.5">info</span>
                                <div>
                                    <h4 class="text-sm font-medium text-red-800 dark:text-red-300">Onyo!</h4>
                                    <p class="text-sm text-red-700 dark:text-red-300 mt-1">
                                        Una uhakika unataka kufuta mfanyakazi <strong x-text="deleteModal.employeeName"></strong>? 
                                        Hatua hii haiwezi kubadilishwa na data yote ya mtumiaji na mfanyakazi itafutwa.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-gray-50 dark:bg-gray-700/50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <form :action="`/employees/${deleteModal.employeeId}`" method="POST" class="sm:ml-3">
                        @csrf
                        @method('DELETE')
                        <button type="submit" 
                                class="w-full inline-flex justify-center items-center px-4 py-2.5 bg-gradient-to-r from-red-500 to-red-600 text-white rounded-lg hover:from-red-600 hover:to-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-all duration-200 sm:w-auto">
                            <span class="material-icons text-lg mr-2">delete</span>
                            Futa Mfanyakazi
                        </button>
                    </form>
                    <button type="button" 
                            @click="closeDeleteModal()"
                            class="mt-3 w-full inline-flex justify-center items-center px-4 py-2.5 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-all duration-200 sm:mt-0 sm:w-auto">
                        Ghairi
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
function employeeManager() {
    return {
        searchQuery: '',
        
        // Add Modal
        addModal: {
            open: false,
            activeTab: 'user-details',
        },
        
        // View Modal
        viewModal: {
            open: false,
            content: ''
        },
        
        // Edit Modal
        editModal: {
            open: false,
            content: ''
        },
        
        // Delete Modal
        deleteModal: {
            open: false,
            employeeId: null,
            employeeName: ''
        },

        init() {
            console.log('Employee Manager Initialized');
        },

        // Add Modal Functions
        openAddModal() {
            this.addModal.open = true;
            this.addModal.activeTab = 'user-details';
            console.log('Add modal opened');
        },

        closeAddModal() {
            this.addModal.open = false;
            console.log('Add modal closed');
        },

        nextTab() {
            if (this.addModal.activeTab === 'user-details') {
                this.addModal.activeTab = 'employee-details';
            } else if (this.addModal.activeTab === 'employee-details') {
                this.addModal.activeTab = 'organizational-info';
            }
            console.log('Switched to tab:', this.addModal.activeTab);
        },

        // View Employee
        async viewEmployee(employeeId) {
            console.log('Viewing employee:', employeeId);
            try {
                const response = await fetch(`/employees/${employeeId}`, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                const employee = await response.json();
                console.log('Employee data:', employee);
                
                this.viewModal.content = this.generateViewContent(employee);
                this.viewModal.open = true;
            } catch (error) {
                console.error('Error:', error);
                alert('Hitilafu katika kupata taarifa za mfanyakazi: ' + error.message);
            }
        },

        generateViewContent(employee) {
            return `
                <div class="bg-white dark:bg-gray-800 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-blue-100 dark:bg-blue-900/20 rounded-lg flex items-center justify-center">
                                <span class="material-icons text-blue-600 dark:text-blue-400">visibility</span>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Maelezo ya Mfanyakazi</h3>
                        </div>
                        <button type="button" @click="closeViewModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors">
                            <span class="material-icons">close</span>
                        </button>
                    </div>
                </div>
                <div class="p-6 space-y-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Maelezo ya Msingi</h4>
                            <div class="space-y-3">
                                <div>
                                    <span class="text-sm text-gray-500 dark:text-gray-400">Jina:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white ml-2">${employee.user.name}</span>
                                </div>
                                <div>
                                    <span class="text-sm text-gray-500 dark:text-gray-400">Barua Pepe:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white ml-2">${employee.user.email}</span>
                                </div>
                                <div>
                                    <span class="text-sm text-gray-500 dark:text-gray-400">Simu:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white ml-2">${employee.phone || 'Hakuna'}</span>
                                </div>
                                <div>
                                    <span class="text-sm text-gray-500 dark:text-gray-400">Mwisho Kuingia:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white ml-2">${employee.user.last_login ? new Date(employee.user.last_login).toLocaleString('sw-TZ') : 'Hajapatikana'}</span>
                                </div>
                                <div>
                                    <span class="text-sm text-gray-500 dark:text-gray-400">Nenosiri Lilibadilishwa:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white ml-2">${employee.user.last_password_change ? new Date(employee.user.last_password_change).toLocaleString('sw-TZ') : 'Hajapatikana'}</span>
                                </div>
                            </div>
                        </div>
                        <div>
                            <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Maelezo ya Kazi</h4>
                            <div class="space-y-3">
                                <div>
                                    <span class="text-sm text-gray-500 dark:text-gray-400">Jukumu:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white ml-2">${employee.role?.role || 'Hakuna'}</span>
                                </div>
                                <div>
                                    <span class="text-sm text-gray-500 dark:text-gray-400">Kituo:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white ml-2">${employee.post?.name || 'Hakuna'}</span>
                                </div>
                                <div>
                                    <span class="text-sm text-gray-500 dark:text-gray-400">Wilaya:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white ml-2">${employee.district?.name || 'Hakuna'}</span>
                                </div>
                                <div>
                                    <span class="text-sm text-gray-500 dark:text-gray-400">Nambari ya Jeshi:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white ml-2">${employee.force_number || 'Hakuna'}</span>
                                </div>
                                <div>
                                    <span class="text-sm text-gray-500 dark:text-gray-400">Cheo:</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white ml-2">${employee.rank || 'Hakuna'}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 dark:bg-gray-700/50 px-6 py-4">
                    <button type="button" @click="closeViewModal()" class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors">
                        Funga
                    </button>
                </div>
            `;
        },

        closeViewModal() {
            this.viewModal.open = false;
            console.log('View modal closed');
        },

        // Edit Employee
        async editEmployee(employeeId) {
            console.log('Editing employee:', employeeId);
            try {
                const response = await fetch(`/employees/${employeeId}/edit`, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                const data = await response.json();
                console.log('Edit data:', data);
                
                this.editModal.content = this.generateEditContent(data);
                this.editModal.open = true;
            } catch (error) {
                console.error('Error:', error);
                alert('Hitilafu katika kupata taarifa za mfanyakazi: ' + error.message);
            }
        },

        generateEditContent(data) {
            const employee = data.employee;
            const roles = data.roles;
            const posts = data.posts;
            const districts = data.districts;

            let roleOptions = '';
            roles.forEach(role => {
                const selected = role.id == employee.role_id ? 'selected' : '';
                roleOptions += `<option value="${role.id}" ${selected}>${role.role}</option>`;
            });

            let postOptions = '';
            posts.forEach(post => {
                const selected = post.id == employee.post_id ? 'selected' : '';
                postOptions += `<option value="${post.id}" ${selected}>${post.name}</option>`;
            });

            let districtOptions = '';
            districts.forEach(district => {
                const selected = district.id == employee.district_id ? 'selected' : '';
                districtOptions += `<option value="${district.id}" ${selected}>${district.name}</option>`;
            });

            return `
                <form action="/employees/${employee.id}" method="POST">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="_method" value="PUT">
                    <div class="bg-white dark:bg-gray-800 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-3">
                                <div class="w-10 h-10 bg-yellow-100 dark:bg-yellow-900/20 rounded-lg flex items-center justify-center">
                                    <span class="material-icons text-yellow-600 dark:text-yellow-400">edit</span>
                                </div>
                                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Hariri Mfanyakazi</h3>
                            </div>
                            <button type="button" @click="closeEditModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors">
                                <span class="material-icons">close</span>
                            </button>
                        </div>
                    </div>
                    <div class="p-6 space-y-4 max-h-96 overflow-y-auto">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jina Kamili</label>
                                <input type="text" name="name" value="${employee.user.name}" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500" required>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Barua Pepe</label>
                                <input type="email" name="email" value="${employee.user.email}" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500" required>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jukumu</label>
                                <select name="role_id" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500" required>
                                    ${roleOptions}
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Simu</label>
                                <input type="text" name="phone" value="${employee.phone || ''}" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500" required>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Kituo</label>
                                <select name="post_id" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500" required>
                                    ${postOptions}
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Wilaya</label>
                                <select name="district_id" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500" required>
                                    ${districtOptions}
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Nambari ya Jeshi</label>
                                <input type="text" name="force_number" value="${employee.force_number || ''}" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Cheo</label>
                                <input type="text" name="rank" value="${employee.rank || ''}" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500">
                            </div>
                        </div>

                        <!-- Password Update Section -->
                        <div class="border-t border-gray-200 dark:border-gray-700 pt-4 mt-6">
                            <div class="flex items-center space-x-2 mb-4">
                                <span class="material-icons text-yellow-600 dark:text-yellow-400 text-lg">lock</span>
                                <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300">Badilisha Nenosiri (Hiari)</h4>
                            </div>
                            <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-3 mb-4">
                                <p class="text-xs text-yellow-800 dark:text-yellow-300">
                                    <span class="material-icons text-xs mr-1">info</span>
                                    Acha sehemu hizi tupu ikiwa hutaki kubadilisha nenosiri la mfanyakazi huyu.
                                </p>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Nenosiri Jipya
                                    </label>
                                    <input type="password" 
                                           name="password" 
                                           class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" 
                                           placeholder="Ingiza nenosiri jipya">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Thibitisha Nenosiri
                                    </label>
                                    <input type="password" 
                                           name="password_confirmation" 
                                           class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" 
                                           placeholder="Rudia nenosiri jipya">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 dark:bg-gray-700/50 px-6 py-4 flex items-center justify-between">
                        <button type="button" @click="closeEditModal()" class="px-4 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-500 transition-colors">
                            Ghairi
                        </button>
                        <button type="submit" class="px-6 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition-colors">
                            Hifadhi Mabadiliko
                        </button>
                    </div>
                </form>
            `;
        },

        closeEditModal() {
            this.editModal.open = false;
            console.log('Edit modal closed');
        },

        // Delete Modal Functions
        openDeleteModal(employeeId, employeeName) {
            this.deleteModal.employeeId = employeeId;
            this.deleteModal.employeeName = employeeName;
            this.deleteModal.open = true;
            console.log('Delete modal opened for:', employeeName);
        },

        closeDeleteModal() {
            this.deleteModal.open = false;
            this.deleteModal.employeeId = null;
            this.deleteModal.employeeName = '';
            console.log('Delete modal closed');
        }
    };
}
</script>
@endpush