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

<div class="space-y-6" data-animate>
    {{-- 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

    {{-- 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 Majukumu</h1>
            <p class="text-gray-600 dark:text-gray-400 mt-1">Ongeza, hariri na ufute majukumu ya watumiaji</p>
        </div>
        
        {{-- Add Role Button --}}
        <button type="button" 
                @click="$dispatch('open-modal', 'addRoleModal')"
                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">admin_panel_settings</span>
            Ongeza Jukumu Jipya
        </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 Majukumu</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $roles->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">security</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 Mapya Mwezi</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $roles->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">Jukumu la Hivi Karibuni</p>
                    <p class="text-sm font-medium text-gray-900 dark:text-white mt-1">{{ $roles->sortByDesc('created_at')->first()->role ?? 'Hakuna' }}</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">schedule</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">Aina za Majukumu</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $roles->pluck('role')->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">diversity_3</span>
                </div>
            </div>
        </div>
    </div>

    {{-- Roles Table --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden" x-data="{ 
        searchQuery: '',
        filteredRoles: [],
        roles: {{ $roles->toJson() }},
        init() {
            this.filteredRoles = this.roles;
            this.filterRoles();
        },
        filterRoles() {
            this.filteredRoles = this.roles.filter(role => {
                const matchesSearch = this.searchQuery === '' || 
                    role.role.toLowerCase().includes(this.searchQuery.toLowerCase());
                
                return matchesSearch;
            });
        }
    }">
        <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 items-center justify-between">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Majukumu Yaliyopo</h3>
                <div class="flex items-center space-x-3">
                    <div class="relative">
                        <input type="text" 
                               placeholder="Tafuta jukumu..." 
                               x-model="searchQuery"
                               @input="filterRoles()"
                               class="pl-10 pr-4 py-2 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>
                    <button class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors" title="Uchunguzi zaidi">
                        <span class="material-icons">tune</span>
                    </button>
                </div>
            </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">
                            ID
                        </th>
                        <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Jina la Jukumu
                        </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-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Hali
                        </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 ($roles as $role)
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
                                #{{ $role->id }}
                            </td>
                            <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-purple-100 to-purple-200 dark:from-purple-900/20 dark:to-purple-800/20 rounded-lg flex items-center justify-center">
                                        <span class="material-icons text-purple-600 dark:text-purple-400 text-lg">badge</span>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium text-gray-900 dark:text-white">{{ ucfirst($role->role) }}</p>
                                        <p class="text-xs text-gray-500 dark:text-gray-400">Jukumu la Mtumiaji</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                <div class="flex items-center space-x-2">
                                    <span class="material-icons text-gray-400 text-sm">calendar_today</span>
                                    <span>{{ $role->created_at->format('d/m/Y') }}</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300">
                                    <span class="w-1.5 h-1.5 bg-green-400 rounded-full mr-1.5"></span>
                                    Amilifu
                                </span>
                            </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">
                                    {{-- View/Details Button --}}
                                    <button type="button" 
                                            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>

                                    {{-- Edit Button --}}
                                    <button type="button" 
                                            @click="$dispatch('open-modal', 'editRoleModal'); $dispatch('set-edit-data', { id: {{ $role->id }}, role: '{{ $role->role }}' })"
                                            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>

                                    {{-- Delete Button --}}
                                    <button type="button" 
                                            @click="$dispatch('open-modal', 'deleteRoleModal'); $dispatch('set-delete-data', { id: {{ $role->id }}, role: '{{ $role->role }}' })"
                                            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="5" 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">security</span>
                                    </div>
                                    <div>
                                        <h3 class="text-sm font-medium text-gray-900 dark:text-white">Hakuna majukumu yalipopatikana</h3>
                                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Anza kwa kuongeza jukumu la kwanza</p>
                                    </div>
                                    <button type="button" 
                                            @click="$dispatch('open-modal', 'addRoleModal')"
                                            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">admin_panel_settings</span>
                                        Ongeza Jukumu
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Simple Pagination Info --}}
        @if($roles->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">{{ $roles->count() }}</span> ya jumla ya majukumu
                </div>
                <div class="text-sm text-gray-500 dark:text-gray-400" x-show="filteredRoles.length !== {{ $roles->count() }}">
                    <span class="font-medium text-gray-900 dark:text-white" x-text="filteredRoles.length"></span> yalipopatikana baada ya kuchuja
                </div>
            </div>
        </div>
        @endif
    </div>
</div>

{{-- Add Role Modal --}}
<div x-data="{ 
    open: false, 
    role: '',
    errors: {}
}" 
@open-modal.window="if ($event.detail === 'addRoleModal') { open = true; role = ''; errors = {}; }" 
@close-modal.window="if ($event.detail === 'addRoleModal') { open = false; }" 
@keydown.escape.window="open = false"
x-show="open" 
class="fixed inset-0 z-50 overflow-y-auto" 
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">

    <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="open = false"></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"
             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('roles.store') }}" method="POST">
                @csrf
                <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-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 Jukumu Jipya</h3>
                        </div>
                        <button type="button" @click="open = false" 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>
                            <label for="add_role" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Jina la Jukumu <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <input type="text" 
                                       name="role" 
                                       id="add_role" 
                                       x-model="role"
                                       class="w-full px-4 py-3 pl-12 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"
                                       :class="{ 'border-red-500 focus:ring-red-500': errors.role }"
                                       placeholder="Mfano: Msimamizi, Mfanyakazi"
                                       required>
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center">
                                    <span class="material-icons text-gray-400 text-lg">badge</span>
                                </div>
                            </div>
                            <p x-show="errors.role" x-text="errors.role" class="mt-1 text-sm text-red-600 dark:text-red-400"></p>
                            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Ingiza jina la jukumu kwa ufupi na wazi</p>
                        </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">
                    <button type="submit" 
                            class="w-full inline-flex justify-center items-center px-4 py-2.5 bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-lg 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-800 transition-all duration-200 sm:ml-3 sm:w-auto">
                        <span class="material-icons text-lg mr-2">save</span>
                        Hifadhi Jukumu
                    </button>
                    <button type="button" 
                            @click="open = false"
                            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>
            </form>
        </div>
    </div>
</div>

{{-- Edit Role Modal --}}
<div x-data="{ 
    open: false, 
    roleId: null,
    role: '',
    errors: {}
}" 
@open-modal.window="if ($event.detail === 'editRoleModal') { open = true; errors = {}; }" 
@set-edit-data.window="roleId = $event.detail.id; role = $event.detail.role;"
@close-modal.window="if ($event.detail === 'editRoleModal') { open = false; }" 
@keydown.escape.window="open = false"
x-show="open" 
class="fixed inset-0 z-50 overflow-y-auto" 
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">

    <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="open = false"></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"
             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="`/roles/${roleId}`" method="POST">
                @csrf
                @method('PUT')
                <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-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 Jukumu</h3>
                        </div>
                        <button type="button" @click="open = false" 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>
                            <label for="edit_role" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Jina la Jukumu <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <input type="text" 
                                       name="role" 
                                       id="edit_role" 
                                       x-model="role"
                                       class="w-full px-4 py-3 pl-12 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"
                                       :class="{ 'border-red-500 focus:ring-red-500': errors.role }"
                                       placeholder="Mfano: Msimamizi, Mfanyakazi"
                                       required>
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center">
                                    <span class="material-icons text-gray-400 text-lg">badge</span>
                                </div>
                            </div>
                            <p x-show="errors.role" x-text="errors.role" class="mt-1 text-sm text-red-600 dark:text-red-400"></p>
                        </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">
                    <button type="submit" 
                            class="w-full inline-flex justify-center items-center px-4 py-2.5 bg-gradient-to-r from-yellow-500 to-yellow-600 text-white rounded-lg hover:from-yellow-600 hover:to-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-all duration-200 sm:ml-3 sm:w-auto">
                        <span class="material-icons text-lg mr-2">save</span>
                        Hifadhi Mabadiliko
                    </button>
                    <button type="button" 
                            @click="open = false"
                            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>
            </form>
        </div>
    </div>
</div>

{{-- Delete Role Modal --}}
<div x-data="{ 
    open: false, 
    roleId: null,
    roleName: ''
}" 
@open-modal.window="if ($event.detail === 'deleteRoleModal') { open = true; }" 
@set-delete-data.window="roleId = $event.detail.id; roleName = $event.detail.role;"
@close-modal.window="if ($event.detail === 'deleteRoleModal') { open = false; }" 
@keydown.escape.window="open = false"
x-show="open" 
class="fixed inset-0 z-50 overflow-y-auto" 
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">

    <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="open = false"></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"
             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">

            <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 Jukumu</h3>
                    </div>
                    <button type="button" @click="open = false" 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 jukumu la <strong x-text="roleName"></strong>? 
                                    Hatua hii haiwezi kubadilishwa na watumiaji wote wenye jukumu hili watakuwa bila majukumu.
                                </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="`/roles/${roleId}`" 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 Jukumu
                    </button>
                </form>
                <button type="button" 
                        @click="open = false"
                        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>

@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Show Add Role Modal if there are validation errors
        @if ($errors->any() && old('role') !== null && !session('success') && !session('error'))
            window.dispatchEvent(new CustomEvent('open-modal', { detail: 'addRoleModal' }));
        @endif
    });
</script>
@endpush