@extends('layouts.app')

@section('title', 'Gestión de Usuarios')

@section('content')
    <div class="max-w-7xl mx-auto" x-data="userManagement()">

        <!-- Header -->
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
            <div>
                <h2 class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-2 tracking-tight">
                    Usuarios del <span
                        class="bg-clip-text text-transparent bg-gradient-to-r from-brand-orange to-brand-wine dark:from-orange-400 dark:to-pink-500">Sistema</span>
                </h2>
                <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Administra el acceso, roles y vehículos</p>
            </div>
            <div class="flex gap-3">
                <!-- Boton Datos (Dropdown Importar/Exportar) -->
                <div x-data="{ open: false }" class="relative">
                    <button type="button" @click="open = !open" @click.outside="open = false"
                        class="flex items-center gap-2 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 transition shadow-sm hover:shadow-md px-4 py-2.5 rounded-xl font-medium"
                        title="Opciones de Datos">
                        <svg class="w-5 h-5 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4">
                            </path>
                        </svg>
                        Datos
                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </button>

                    <!-- Dropdown Menu -->
                    <div x-show="open" x-transition.origin.top.right
                        class="absolute right-0 mt-2 w-48 bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-100 dark:border-slate-700 z-50 overflow-hidden">
                        <button type="button" @click="$dispatch('open-export-users'); open = false"
                            class="w-full flex items-center gap-3 px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-700 transition text-sm text-slate-700 dark:text-slate-300">
                            <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                            </svg>
                            Exportar Usuarios
                        </button>
                        <button type="button" @click="openImportModal(); open = false"
                            class="w-full flex items-center gap-3 px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-700 transition text-sm text-slate-700 dark:text-slate-300 border-t border-slate-100 dark:border-slate-700">
                            <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
                            </svg>
                            Importar Usuarios
                        </button>
                    </div>
                </div>

                <button @click="openCreateModal()"
                    class="flex items-center gap-2 bg-berry-red hover:bg-red-700 text-white px-5 py-2.5 rounded-xl font-bold transition shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                    </svg>
                    Nuevo Usuario
                </button>
            </div>
        </div>

        <!-- Feedback Messages -->


        <!-- Filters & Search (Inventory Style) -->
        <div class="glass-card-premium p-5 mb-6 border border-brand-orange/20 shadow-lg"
            style="box-shadow: 0 10px 15px -3px rgba(232, 99, 24, 0.1);">
            <form method="GET" action="{{ route('usuarios.index') }}" x-ref="filterForm">
                <div class="flex flex-col lg:flex-row items-start lg:items-center gap-3">
                    <div class="flex flex-wrap items-center gap-4 w-full lg:w-auto">
                        <!-- Search -->
                        <div class="flex items-center gap-2 flex-1 lg:flex-initial lg:min-w-[300px]">
                            <div class="relative flex-1">
                                <input type="text" name="search" value="{{ request('search') }}"
                                    placeholder="Buscar por nombre, email o teléfono..."
                                    @input.debounce.1000ms="$refs.filterForm.submit()"
                                    class="w-full px-4 py-3 bg-amber-50 dark:bg-slate-800 border-amber-200 dark:border-slate-700 rounded-2xl focus:ring-2 focus:ring-amber-500/20 outline-none transition-all font-semibold text-slate-800 dark:text-white placeholder-slate-400 pr-10">

                                <button type="submit"
                                    class="absolute inset-y-0 right-0 pr-3 flex items-center text-amber-500/70 hover:text-amber-600 transition-colors">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                                    </svg>
                                </button>
                            </div>
                        </div>

                        <!-- Role Filter -->
                        <div class="flex items-center gap-2">
                            <label
                                class="text-sm font-medium text-slate-600 dark:text-slate-400 whitespace-nowrap">Rol:</label>
                            <select name="rol_id" onchange="this.form.submit()"
                                class="input-premium py-2 min-w-[140px] px-3 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl outline-none focus:ring-2 focus:ring-amber-500/20 text-slate-700 dark:text-slate-300">
                                <option value="">Todos</option>
                                @foreach($roles as $rol)
                                    <option value="{{ $rol->id }}" {{ request('rol_id') == $rol->id ? 'selected' : '' }}>
                                        {{ ucfirst($rol->nombre) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Status Filter -->
                        <div class="flex items-center gap-2">
                            <label
                                class="text-sm font-medium text-slate-600 dark:text-slate-400 whitespace-nowrap">Estado:</label>
                            <select name="activo" onchange="this.form.submit()"
                                class="input-premium py-2 min-w-[140px] px-3 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl outline-none focus:ring-2 focus:ring-amber-500/20 text-slate-700 dark:text-slate-300">
                                <option value="" {{ request('activo') === null ? 'selected' : '' }}>Todos</option>
                                <option value="1" {{ request('activo') == '1' ? 'selected' : '' }}>Activos</option>
                                <option value="0" {{ request('activo') == '0' ? 'selected' : '' }}>Inactivos</option>
                            </select>
                        </div>

                        <!-- Availability Filter (Visible for Domiciliarios or All Roles) -->
                        @php
                            $selectedRole = $roles->find(request('rol_id'));
                        @endphp
                        @if(!$selectedRole || ($selectedRole && stripos($selectedRole->nombre, 'omiciliario') !== false))
                            <div class="flex items-center gap-2">
                                <label class="text-sm font-medium text-slate-600 dark:text-slate-400 whitespace-nowrap">Para
                                    Domicilios:</label>
                                <select name="disponible" onchange="this.form.submit()"
                                    class="input-premium py-2 min-w-[140px] px-3 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl outline-none focus:ring-2 focus:ring-amber-500/20 text-slate-700 dark:text-slate-300">
                                    <option value="" {{ request('disponible') === null ? 'selected' : '' }}>Todos</option>
                                    <option value="1" {{ request('disponible') == '1' ? 'selected' : '' }}>Disponibles
                                    </option>
                                    <option value="0" {{ request('disponible') == '0' ? 'selected' : '' }}>No Disponibles</option>
                                </select>
                            </div>
                        @endif

                        @if(request('search') || request('rol_id') || request('activo') !== null)
                            <a href="{{ route('usuarios.index') }}"
                                class="px-3 py-2 bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 rounded-lg font-medium transition-all text-sm flex items-center gap-1.5">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                                Limpiar
                            </a>
                        @endif
                    </div>
                </div>
            </form>
        </div>

        <!-- Bulk Actions Bar -->
        <!-- Bulk Actions Bar (WordPress Style) -->
        <div x-show="selectedUsers.length > 0" x-cloak
            class="mb-4 p-4 bg-white dark:bg-slate-800 border-l-4 border-amber-500 shadow-sm rounded-r-xl flex flex-col md:flex-row items-center justify-between gap-4">

            <div class="flex items-center gap-2">
                <span class="font-bold text-slate-700 dark:text-slate-200 text-sm">
                    <span x-text="selectedUsers.length" class="text-amber-600 font-extrabold text-lg"></span> elementos
                    seleccionados
                </span>
                <button @click="clearSelection()" class="text-xs text-slate-400 hover:text-slate-600 underline">
                    (Cancelar)
                </button>
            </div>

            <div class="flex items-center gap-2 w-full md:w-auto">
                <div class="relative">
                    <select x-model="bulkAction"
                        class="appearance-none bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 py-2 pl-3 pr-8 rounded-lg text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-amber-500/50 cursor-pointer min-w-[200px]">
                        <option value="">Acciones en Lote...</option>
                        <option value="activate" class="text-green-600 font-bold">Activar Usuarios</option>
                        <option value="deactivate" class="text-slate-600">Desactivar Usuarios</option>
                        <option value="toggleOn" class="text-blue-600">Marcar Disponibles (Domiciliarios)</option>
                        <option value="toggleOff" class="text-orange-600">Marcar No Disponibles (Domiciliarios)</option>
                        <option value="delete" class="text-red-600 font-bold bg-red-50">❌ Eliminar Permanentemente</option>
                    </select>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-500">
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </div>
                </div>

                <button @click="executeBulkAction()" :disabled="!bulkAction"
                    class="bg-amber-100 hover:bg-amber-200 text-amber-700 border border-amber-300 px-4 py-2 rounded-lg text-sm font-bold transition-all disabled:opacity-50 disabled:cursor-not-allowed">
                    Aplicar
                </button>
            </div>

            <!-- Hidden Forms for Bulk Actions -->
            <form x-ref="bulkDeactivateForm" action="{{ route('usuarios.bulk.deactivate') }}" method="POST" class="hidden">
                @csrf
                <input type="hidden" name="user_ids" x-bind:value="JSON.stringify(selectedUsers)">
                <input type="hidden" name="activo" value="0"> <!-- Default to 0, JS can change to 1 -->
            </form>
            <form x-ref="bulkDeleteForm" action="{{ route('usuarios.bulk.delete') }}" method="POST" class="hidden">
                @csrf <input type="hidden" name="user_ids" x-bind:value="JSON.stringify(selectedUsers)">
            </form>
            <form x-ref="bulkToggleOnForm" action="{{ route('usuarios.bulk.toggle-availability') }}" method="POST"
                class="hidden">
                @csrf <input type="hidden" name="user_ids" x-bind:value="JSON.stringify(selectedUsers)">
                <input type="hidden" name="disponible" value="1">
            </form>
            <form x-ref="bulkToggleOffForm" action="{{ route('usuarios.bulk.toggle-availability') }}" method="POST"
                class="hidden">
                @csrf <input type="hidden" name="user_ids" x-bind:value="JSON.stringify(selectedUsers)">
                <input type="hidden" name="disponible" value="0">
            </form>
        </div>

        <!-- Users Table Reconstruida -->
        <x-table>
            <x-table.thead>
                <tr>
                    <x-table.th class="text-center w-16">
                        <input type="checkbox" @change="toggleAll($event.target.checked)"
                            class="w-4 h-4 rounded border-slate-300 text-amber-500 focus:ring-amber-500">
                    </x-table.th>
                    <x-table.th class="text-center w-20">Avatar</x-table.th>
                    <x-table.th>
                        <a href="{{ request()->fullUrlWithQuery(['sort' => 'nombre', 'direction' => request('direction') == 'asc' ? 'desc' : 'asc']) }}"
                            class="flex items-center gap-1 hover:text-brand-orange transition-colors group">
                            Usuario
                            @if(request('sort', 'nombre') == 'nombre')
                                <span
                                    class="text-xs transition-transform {{ request('direction') == 'desc' ? 'rotate-180' : '' }}">
                                    ↓
                                </span>
                            @endif
                        </a>
                    </x-table.th>
                    <x-table.th>
                        <a href="{{ request()->fullUrlWithQuery(['sort' => 'rol_id', 'direction' => request('direction') == 'asc' ? 'desc' : 'asc']) }}"
                            class="flex items-center gap-1 hover:text-brand-orange transition-colors group">
                            Rol
                            @if(request('sort') == 'rol_id')
                                <span
                                    class="text-xs transition-transform {{ request('direction') == 'desc' ? 'rotate-180' : '' }}">
                                    ↓
                                </span>
                            @endif
                        </a>
                    </x-table.th>
                    <x-table.th>Dirección</x-table.th>
                    <x-table.th>Contacto</x-table.th>
                    <x-table.th>
                        <a href="{{ request()->fullUrlWithQuery(['sort' => 'tipo_vehiculo', 'direction' => request('direction') == 'asc' ? 'desc' : 'asc']) }}"
                            class="flex items-center gap-1 hover:text-brand-orange transition-colors group">
                            Vehículo
                            @if(request('sort') == 'tipo_vehiculo')
                                <span
                                    class="text-xs transition-transform {{ request('direction') == 'desc' ? 'rotate-180' : '' }}">
                                    ↓
                                </span>
                            @endif
                        </a>
                    </x-table.th>
                    <x-table.th class="text-right">Acciones</x-table.th>
                </tr>
            </x-table.thead>
            <x-table.tbody>
                @forelse($usuarios as $user)
                    <x-table.tr :index="$loop->index"
                        class="{{ !$user->activo ? 'grayscale opacity-60 bg-slate-50 dark:bg-slate-800/50' : '' }}">
                        <x-table.td class="text-center">
                            <input type="checkbox" :value="{{ $user->id }}"
                                @change="toggleUser({{ $user->id }}, $event.target.checked)"
                                :checked="selectedUsers.includes({{ $user->id }})"
                                class="w-4 h-4 rounded border-slate-300 text-amber-500 focus:ring-amber-500">
                        </x-table.td>
                        <x-table.td class="text-center">
                            @php
                                $initials = collect(explode(' ', $user->nombre))->map(fn($w) => strtoupper(substr($w, 0, 1)))->take(2)->join('');
                                $colors = ['bg-red-500', 'bg-orange-500', 'bg-amber-500', 'bg-yellow-500', 'bg-lime-500', 'bg-green-500', 'bg-emerald-500', 'bg-teal-500', 'bg-cyan-500', 'bg-sky-500', 'bg-blue-500', 'bg-indigo-500', 'bg-violet-500', 'bg-purple-500', 'bg-fuchsia-500', 'bg-pink-500', 'bg-rose-500'];
                                $colorIndex = crc32($user->nombre) % count($colors);
                                $bgColor = $colors[$colorIndex];
                            @endphp
                            <div
                                class="h-10 w-10 mx-auto rounded-xl {{ $user->avatar ? '' : $bgColor }} text-white overflow-hidden border border-white/20 shadow-sm group-hover:scale-110 transition-transform flex items-center justify-center">
                                @if($user->avatar)
                                    <img src="{{ asset('storage/' . $user->avatar) }}" class="h-full w-full object-cover">
                                @else
                                    <span class="font-bold text-sm tracking-widest">{{ $initials }}</span>
                                @endif
                            </div>
                        </x-table.td>
                        <x-table.td>
                            <button type="button" @click="openEditModal({{ json_encode($user) }})"
                                class="font-bold text-left text-slate-800 dark:text-slate-200 hover:text-amber-500 transition-colors focus:outline-none cursor-pointer"
                                title="Editar: {{ $user->nombre }}">
                                {{ $user->nombre }}
                            </button>
                            <div class="flex items-center gap-1.5 text-xs">
                                <span class="text-blue-600 dark:text-blue-400 font-mono">{{ $user->email }}</span>
                                <button @click="copyToClipboard('{{ $user->email }}')"
                                    class="text-slate-300 hover:text-blue-500 transition" title="Copiar">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">
                                        </path>
                                    </svg>
                                </button>
                            </div>
                        </x-table.td>
                        <x-table.td>
                            <span
                                class="font-mono font-bold text-slate-500 dark:text-slate-400 bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded-lg text-xs border border-slate-200 dark:border-slate-700">
                                {{ ucfirst($user->rol->nombre ?? 'N/A') }}
                            </span>
                        </x-table.td>
                        <x-table.td>
                            <span class="text-xs text-slate-600 dark:text-slate-400 truncate max-w-[150px] block"
                                title="{{ $user->direccion }}">
                                {{ $user->direccion ?? '-' }}
                            </span>
                        </x-table.td>
                        <x-table.td>
                            @if($user->telefono)
                                <div class="flex items-center gap-2">
                                    <button
                                        @click="openWhatsAppModal({{ json_encode(['nombre' => $user->nombre, 'telefono' => $user->telefono]) }})"
                                        class="inline-flex items-center justify-center p-1 rounded-full transition-all transform hover:scale-110"
                                        style="color: #25D366 !important;" title="Enviar WhatsApp">
                                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                            <path
                                                d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
                                        </svg>
                                    </button>
                                    <span
                                        class="text-xs font-medium text-slate-600 dark:text-slate-400">{{ $user->telefono }}</span>
                                </div>
                            @else
                                <span class="text-slate-400 text-xs italic">-</span>
                            @endif
                        </x-table.td>
                        <x-table.td>
                            @if($user->tiene_vehiculo)
                                <div class="flex items-center gap-2">
                                    <span class="text-lg uppercase" title="{{ $user->tipo_vehiculo }}">
                                        @if($user->tipo_vehiculo == 'Moto') 🏍️
                                        @elseif($user->tipo_vehiculo == 'Carro') 🚗
                                        @else 🚲 @endif
                                    </span>
                                    <span
                                        class="text-xs font-mono font-bold bg-orange-50 dark:bg-orange-900/20 text-orange-700 dark:text-orange-400 px-1.5 py-0.5 rounded border border-orange-100 dark:border-orange-900/30">
                                        {{ $user->placa }}
                                    </span>
                                </div>
                            @endif
                        </x-table.td>
                        <x-table.td class="text-right">
                            <div class="flex items-center justify-end gap-2">
                                <!-- Toggle Availability -->
                                <form action="{{ route('usuarios.toggle-availability', $user->id) }}" method="POST"
                                    class="inline">
                                    @csrf
                                    <button type="submit"
                                        class="p-1.5 rounded-lg transition {{ $user->disponible ? 'text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-500/10' : 'text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-700 grayscale' }}"
                                        title="{{ $user->disponible ? 'Disponible para Domicilios' : 'No Disponible' }}">
                                        <!-- Motorcycle SVG -->
                                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                            <path
                                                d="M5 17a3 3 0 1 0 0-6 3 3 0 0 0 0 6M19 17a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-9-6h3.5c-.17-1.07-.64-2.05-1.33-2.84L10.3 6.3A.98.98 0 0 0 9.6 6H6c-.55 0-1 .45-1 1s.45 1 1 1h2.8l1.2 1H9c-.55 0-1 .45-1 1s.45 1 1 1" />
                                            <path
                                                d="M19 9h-4.8c-.35-1.12-1.06-2.09-2.02-2.8L10.8 4.8a2.97 2.97 0 0 0-2.2-.8H6c-1.66 0-3 1.34-3 3v2h2V7c0-.55.45-1 1-1h2.6c.2.04.4.14.5.3l1.9 1.9c.74.74 1.1 1.76 1.2 2.8H7a5.02 5.02 0 0 0-5 5 5 5 0 0 0 5 5c2.5 0 4.6-1.85 4.9-4.2h2.2c.3 2.35 2.4 4.2 4.9 4.2 2.76 0 5-2.24 5-5s-2.24-5-5-5"
                                                opacity=".3" />
                                        </svg>
                                    </button>
                                </form>

                                <button @click="openEditModal({{ json_encode($user) }})"
                                    class="text-amber-500 hover:text-amber-600 dark:hover:text-amber-400 p-1.5 rounded-lg hover:bg-amber-50 dark:hover:bg-amber-500/10 transition"
                                    title="Editar">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z">
                                        </path>
                                    </svg>
                                </button>

                                @if($user->id !== auth()->id())
                                    @if($user->id !== auth()->id())
                                        <form action="{{ route('usuarios.destroy', ['usuario' => $user->id] + request()->query()) }}"
                                            method="POST" class="inline">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit"
                                                class="text-slate-400 hover:text-red-500 dark:text-slate-500 dark:hover:text-red-400 p-1.5 rounded-lg hover:bg-red-50 dark:hover:bg-red-500/10 transition"
                                                title="{{ $user->activo ? 'Desactivar' : 'Activar' }}">
                                                @if($user->activo)
                                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                            d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636">
                                                        </path>
                                                    </svg>
                                                @else
                                                    <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                            d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">
                                                        </path>
                                                    </svg>
                                                @endif
                                            </button>
                                        </form>
                                    @endif
                                @endif
                                <!-- Force Delete for Inactives (Protected) -->
                                @if(!$user->activo && $user->id !== auth()->id())
                                    <form x-ref="forceDeleteForm{{ $user->id }}" action="{{ route('usuarios.force-delete', $user->id) }}" method="POST" class="inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="button"
                                            @click="showConfirm('ELIMINACIÓN PERMANENTE', 'ATENCIÓN: Esto eliminará permanentemente al usuario y no se podrá deshacer. ¿Seguro que desea continuar?', () => $refs.forceDeleteForm{{ $user->id }}.submit())"
                                            class="text-red-400 hover:text-red-600 dark:text-red-500 dark:hover:text-red-400 p-1.5 rounded-lg hover:bg-red-50 dark:hover:bg-red-500/10 transition"
                                            title="Eliminar Definitivamente">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
                                                </path>
                                            </svg>
                                        </button>
                                    </form>
                                @endif
                            </div>
                        </x-table.td>
                    </x-table.tr>
                @empty
                    <x-table.tr>
                        <x-table.td colspan="8" class="text-center py-12 text-slate-400 dark:text-slate-500 italic">
                            No se encontraron usuarios con los filtros actuales.
                        </x-table.td>
                    </x-table.tr>
                @endforelse
            </x-table.tbody>
        </x-table>

        <!-- Pagination -->
        <div class="mt-6">
            {{ $usuarios->appends(request()->query())->links() }}
        </div>

        <!-- Create/Edit User Modal (Harvest Style) -->
        <div x-show="userModalOpen" class="fixed inset-0 z-[100] overflow-y-auto" role="dialog" aria-modal="true" x-cloak>
            <div class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity" @click="userModalOpen = false">
            </div>

            <div class="flex items-center justify-center min-h-screen p-4">
                <div
                    class="relative bg-white dark:bg-slate-800 backdrop-blur-xl border border-white/20 dark:border-slate-700/50 w-full max-w-lg p-0 transform transition-all rounded-xl shadow-2xl h-[85vh] flex flex-col">

                    <!-- Header (Blue Gradient for Users) -->
                    <div class="bg-blue-600 p-6 text-white relative overflow-hidden rounded-t-xl border-b border-white/10">
                        <div class="absolute top-0 right-0 p-4 opacity-10 pointer-events-none">
                            <svg class="w-24 h-24 transform rotate-12" fill="currentColor" viewBox="0 0 24 24">
                                <path
                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z" />
                            </svg>
                        </div>
                        <h3 class="text-2xl font-bold relative z-10"
                            x-text="isEditing ? 'Editar Usuario' : 'Nuevo Usuario'">
                        </h3>
                        <p class="text-blue-100 text-sm relative z-10 mt-1">Gestione la información personal y permisos.</p>
                        <button type="button" @click="userModalOpen = false"
                            class="absolute top-4 right-4 z-20 text-white/70 hover:text-white transition-colors bg-white/10 hover:bg-white/20 rounded-lg p-1">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M6 18L18 6M6 6l12 12">
                                </path>
                            </svg>
                        </button>
                    </div>

                    <!-- Content -->
                    <div class="flex-1 flex flex-col min-h-0 overflow-hidden">
                        <form :action="isEditing ? `/usuarios/${editId}` : '{{ route('usuarios.store') }}'" method="POST"
                            enctype="multipart/form-data" class="flex flex-col h-full">
                            @csrf
                            <template x-if="isEditing">
                                <div>
                                    <input type="hidden" name="_method" value="PUT">
                                    <input type="hidden" name="editId" :value="editId">
                                </div>
                            </template>

                            <!-- Scrollable Body -->
                            <div class="flex-1 overflow-y-auto p-6 space-y-6 min-h-0 custom-scrollbar">
                                
                                <!-- Error Display (Laravel Validation) - Top -->
                                @if($errors->any())
                                    <div class="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-2xl animate-pulse">
                                        <div class="flex items-center gap-2 text-red-700 dark:text-red-400 font-bold mb-2">
                                            <i class="fas fa-exclamation-circle"></i>
                                            <span>Atención: Revisa los siguientes campos</span>
                                        </div>
                                        <ul class="space-y-1">
                                            @foreach($errors->all() as $error)
                                                <li class="text-xs text-red-600 dark:text-red-300 font-medium flex items-center gap-2">
                                                    <span class="w-1 h-1 bg-red-400 rounded-full"></span>
                                                    {{ $error }}
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif

                                <!-- Avatar Section -->
                                <div class="flex items-center gap-4">
                                    <div class="relative group">
                                        <div class="h-16 w-16 rounded-2xl bg-slate-100 dark:bg-slate-700 flex items-center justify-center border-2 border-dashed border-slate-300 dark:border-slate-600 overflow-hidden relative cursor-pointer hover:border-blue-500 transition-colors"
                                            @click="$refs.avatarInput.click()">

                                            <!-- Image Preview -->
                                            <template x-if="newAvatarPreview">
                                                <img :src="newAvatarPreview" class="h-full w-full object-cover">
                                            </template>
                                            <template x-if="!newAvatarPreview && editAvatar">
                                                <img :src="'/storage/' + editAvatar" class="h-full w-full object-cover">
                                            </template>

                                            <!-- Placeholder Icon -->
                                            <template x-if="!newAvatarPreview && !editAvatar">
                                                <i
                                                    class="fas fa-camera text-slate-400 text-xl group-hover:text-blue-500 transition"></i>
                                            </template>
                                        </div>

                                        <!-- Hidden Input -->
                                        <input type="file" name="avatar" x-ref="avatarInput" class="hidden" accept="image/*"
                                            @change="previewAvatar($event)">

                                        <!-- Remove Button -->
                                        <div x-show="newAvatarPreview || editAvatar"
                                            class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1 cursor-pointer shadow-md hover:bg-red-600 transition"
                                            @click="removeAvatar()" title="Eliminar foto">
                                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M6 18L18 6M6 6l12 12"></path>
                                            </svg>
                                        </div>
                                        <!-- Hidden Field for Removal Logic -->
                                        <input type="hidden" name="remove_avatar" :value="avatarRemoved ? 1 : 0">
                                    </div>

                                    <div class="flex-1">
                                        <label for="nombre" class="block text-xs font-bold text-slate-500 uppercase mb-1">Nombre
                                            Completo</label>
                                        <input type="text" id="nombre" name="nombre" x-model="form.nombre"
                                            class="w-full px-4 py-2 rounded-xl bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 outline-none focus:ring-2 focus:ring-blue-500 dark:text-white"
                                            required placeholder="Ej: Pepito Perez">
                                    </div>
                                </div>

                                <!-- Contact & Role -->
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <label for="rol_id" class="block text-xs font-bold text-slate-500 uppercase mb-1">Rol de
                                            Usuario</label>
                                        <select id="rol_id" name="rol_id" x-model="form.rol_id"
                                            class="w-full px-4 py-2 rounded-xl bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 outline-none focus:ring-2 focus:ring-blue-500 dark:text-white"
                                            required>
                                            <option value="">Seleccionar Rol...</option>
                                            @foreach($roles as $rol)
                                                <option value="{{ $rol->id }}">{{ ucfirst($rol->nombre) }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <!-- Phone & International -->
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <div class="flex justify-between items-center mb-1">
                                            <label for="telefono"
                                                class="block text-xs font-bold text-slate-500 uppercase">Teléfono</label>
                                            <label class="flex items-center gap-1 cursor-pointer">
                                                <input type="checkbox" x-model="isInternational"
                                                    class="rounded border-slate-300 text-blue-600 focus:ring-blue-500 h-3 w-3">
                                                <span
                                                    class="text-[10px] text-slate-400 font-bold uppercase">Internacional</span>
                                            </label>
                                        </div>
                                        <input type="text" id="telefono" name="telefono" x-model="form.telefono"
                                            class="w-full px-4 py-2 rounded-xl bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 outline-none focus:ring-2 focus:ring-blue-500 dark:text-white"
                                            :placeholder="isInternational ? 'Ej: +123456789 (Con indicativo)' : 'Ej: 3001234567 (Sin indicativo)'">
                                        <p x-show="isInternational" class="text-[10px] text-slate-400 mt-1">
                                            Ingresa el número completo incluyendo el código de país (Ej: +52...).
                                        </p>
                                    </div>
                                </div>

                                <!-- Address -->
                                <div>
                                    <label for="direccion"
                                        class="block text-xs font-bold text-slate-500 uppercase mb-1">Dirección</label>
                                    <input type="text" id="direccion" name="direccion" x-model="form.direccion"
                                        class="w-full px-4 py-2 rounded-xl bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 outline-none focus:ring-2 focus:ring-blue-500 dark:text-white"
                                        placeholder="Dirección completa">
                                </div>

                                <!-- Email -->
                                <div>
                                    <label for="email" class="block text-xs font-bold text-slate-500 uppercase mb-1">Correo
                                        Electrónico</label>
                                    <input type="email" id="email" name="email" x-model="form.email" @blur="checkEmail"
                                        class="w-full px-4 py-2 rounded-xl bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 outline-none focus:ring-2 focus:ring-blue-500 dark:text-white"
                                        required>
                                    <span x-show="emailExists && !isEditing" class="text-xs text-red-500 font-bold block mt-1">⚠
                                        Este correo ya existe.</span>
                                </div>

                                <!-- Password Section with Validation -->
                                <div class="bg-slate-50 dark:bg-slate-800/50 p-4 rounded-xl border border-slate-100 dark:border-slate-700"
                                    x-data="{ showPass: false }">
                                    <div class="flex items-center justify-between mb-2">
                                        <label class="text-xs font-bold text-slate-500 uppercase">Seguridad</label>
                                        <div class="flex items-center gap-2" x-show="!isEditing">
                                            <input type="checkbox" id="auto_password" name="auto_password" value="1"
                                                x-model="autoPassword">
                                            <label for="auto_password"
                                                class="text-[10px] uppercase font-bold text-slate-500 cursor-pointer">Generar
                                                Automática</label>
                                        </div>
                                    </div>

                                    <div x-show="!autoPassword || isEditing" x-collapse>
                                        <div class="relative mb-2">
                                            <input :type="showPass ? 'text' : 'password'" id="password" name="password"
                                                x-model="form.password"
                                                class="w-full px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-900 dark:text-white text-sm pr-10"
                                                placeholder="Nueva contraseña (dejar en blanco para no cambiar)">
                                            <button type="button" @click="showPass = !showPass"
                                                class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 outline-none">
                                                <i class="fas" :class="showPass ? 'fa-eye-slash' : 'fa-eye'"></i>
                                            </button>
                                        </div>
                                        <div class="relative" x-show="form.password && form.password.length > 0">
                                            <input :type="showPass ? 'text' : 'password'" id="confirm_password" name="password_confirmation"
                                                x-model="form.password_confirmation"
                                                class="w-full px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-900 dark:text-white text-sm"
                                                placeholder="Confirmar contraseña"
                                                :class="{'border-red-500': form.password_confirmation && form.password_confirmation.length > 0 && form.password_confirmation !== form.password, 'border-green-500': form.password_confirmation && form.password_confirmation.length > 0 && form.password_confirmation === form.password}">

                                            <!-- Real-time Spanish Validation -->
                                            <p x-show="form.password !== form.password_confirmation"
                                                class="text-[10px] text-red-500 font-bold mt-1 flex items-center gap-1">
                                                <i class="fas fa-times"></i> Las contraseñas no coinciden
                                            </p>
                                            <p x-show="form.password === form.password_confirmation && form.password.length < 8"
                                                class="text-[10px] text-amber-500 font-bold mt-1 flex items-center gap-1">
                                                <i class="fas fa-exclamation-triangle"></i> Mínimo 8 caracteres
                                            </p>
                                            <p x-show="form.password === form.password_confirmation && form.password.length >= 8"
                                                class="text-[10px] text-emerald-500 font-bold mt-1 flex items-center gap-1">
                                                <i class="fas fa-check"></i> Contraseña válida
                                            </p>
                                        </div>
                                    </div>
                                </div>


                                <div class="pt-2">
                                    <div class="flex items-center gap-2 mb-2">
                                        <input type="checkbox" id="tiene_vehiculo" name="tiene_vehiculo" value="1"
                                            x-model="hasVehicle">
                                        <label for="tiene_vehiculo"
                                            class="text-sm font-bold text-slate-700 dark:text-slate-300 cursor-pointer">¿Tiene
                                            Vehículo?</label>
                                    </div>
                                    <div x-show="hasVehicle" x-collapse>
                                        <div
                                            class="grid grid-cols-2 gap-3 bg-orange-50 dark:bg-orange-900/10 p-3 rounded-xl border border-orange-100 dark:border-orange-900/20">
                                            <select id="tipo_vehiculo" name="tipo_vehiculo" x-model="form.tipo_vehiculo"
                                                class="px-2 py-1.5 rounded-lg bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 text-sm outline-none dark:text-white">
                                                <option value="">Tipo...</option>
                                                <option value="Moto">Moto</option>
                                                <option value="Carro">Carro</option>
                                                <option value="Bici">Bicicleta</option>
                                            </select>
                                            <input type="text" id="placa" name="placa" x-model="form.placa"
                                                class="px-2 py-1.5 rounded-lg bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 text-sm uppercase font-mono outline-none dark:text-white"
                                                placeholder="PLACA">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Fixed Footer -->
                            <div class="p-6 border-t border-slate-100 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 flex justify-end gap-3 rounded-b-xl">
                                <button type="button" @click="userModalOpen = false"
                                    class="px-4 py-2 bg-red-50 hover:bg-red-100 text-red-600 dark:bg-red-900/20 dark:hover:bg-red-900/30 dark:text-red-400 rounded-xl font-bold transition-colors">Cancelar</button>
                                <button type="submit"
                                    :disabled="(!autoPassword && (form.password !== form.password_confirmation || form.password.length < 8) && !isEditing)"
                                    class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-bold shadow-lg shadow-blue-500/30 transition-all transform hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed">
                                    Guardar Usuario
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Import Modal (Harvest Style - Emerald) -->
        <div x-show="importModalOpen" class="fixed inset-0 z-[100] overflow-y-auto" role="dialog" aria-modal="true" x-cloak>
            <div class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity" @click="importModalOpen = false">
            </div>
            <div class="flex min-h-screen items-center justify-center p-4">
                <div
                    class="relative bg-white dark:bg-slate-800 backdrop-blur-xl border border-white/20 dark:border-slate-700/50 w-full max-w-4xl p-0 transform transition-all rounded-xl shadow-2xl">
                    <form action="{{ route('usuarios.import') }}" method="POST">
                        @csrf

                        <!-- Header (Emerald Gradient) -->
                        <div class="bg-emerald-600 p-6 text-white relative overflow-hidden rounded-t-xl border-b border-white/10 text-left"
                            style="background-color: #059669 !important;">
                            <div class="absolute top-0 right-0 p-4 opacity-10 pointer-events-none">
                                <svg class="w-24 h-24 transform rotate-12" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
                                </svg>
                            </div>
                            <h3 class="text-2xl font-bold relative z-10">Importación Masiva</h3>
                            <p class="text-emerald-100 text-sm relative z-10 mt-1">Cargue usuarios desde Excel.</p>
                            <button type="button" @click="importModalOpen = false"
                                class="absolute top-4 right-4 z-20 text-white/70 hover:text-white transition-colors bg-white/10 hover:bg-white/20 rounded-lg p-1">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                            </button>
                        </div>

                        <div class="p-6 overflow-hidden flex-1 h-full max-h-[70vh]">
                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 h-full">
                                <!-- Input Area -->
                                <div class="flex flex-col h-96">
                                    <div class="flex justify-between items-center mb-2">
                                        <label for="import_data"
                                            class="block text-sm font-bold text-slate-700 dark:text-slate-300">
                                            Pegar datos de Excel <span class="text-red-500 text-lg leading-none">*</span>
                                        </label>
                                        <a href="{{ route('usuarios.import.template') }}"
                                            class="text-xs flex items-center gap-1 bg-white hover:bg-emerald-50 text-emerald-600 border border-emerald-200 px-2 py-1 rounded-lg transition-colors font-bold">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4">
                                                </path>
                                            </svg>
                                            Descargar Ejemplo
                                        </a>
                                    </div>
                                    <textarea name="data" id="import_data" x-model="importData" @input="parseUsersData()"
                                        required
                                        class="w-full flex-1 h-64 p-4 font-mono text-xs bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 resize-none custom-scrollbar shadow-inner"
                                        placeholder="Ejemplo:&#10;Juan Perez	juan@email.com	Vendedor	3001234567"></textarea>

                                    <!-- Aesthetic Instructions (Emerald Theme) -->
                                    <div
                                        class="mt-3 p-3 bg-emerald-50 dark:bg-slate-700 rounded-xl border border-emerald-100 dark:border-slate-600">
                                        <p
                                            class="text-[10px] font-bold text-emerald-800 dark:text-emerald-300 uppercase tracking-wider mb-1">
                                            Estructura de Columnas
                                        </p>
                                        <div
                                            class="flex flex-wrap gap-1 text-[10px] items-center text-slate-600 dark:text-slate-400 font-mono">
                                            <span
                                                class="px-1.5 py-0.5 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded">Nombre*</span>
                                            <span class="text-slate-300">|</span>
                                            <span
                                                class="px-1.5 py-0.5 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded">Email*</span>
                                            <span class="text-slate-300">|</span>
                                            <span
                                                class="px-1.5 py-0.5 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded">Rol*</span>
                                            <span class="text-slate-300">|</span>
                                            <span class="opacity-70">Teléfono</span>
                                            <span class="text-slate-300">|</span>
                                            <span class="opacity-70">Pass</span>
                                        </div>
                                    </div>
                                </div>

                                <!-- Preview Area -->
                                <div
                                    class="flex flex-col h-96 overflow-hidden bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm">
                                    <div
                                        class="p-3 bg-slate-100 dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 font-bold text-xs uppercase text-slate-500 flex justify-between items-center">
                                        <span>Vista Previa</span>
                                        <span x-show="previewData.length > 0" x-text="previewData.length + ' filas'"
                                            class="bg-emerald-100 text-emerald-700 px-2 py-0.5 rounded-full text-[10px]"></span>
                                    </div>
                                    <div class="overflow-auto flex-1 p-2 custom-scrollbar">
                                        <table class="w-full text-left border-collapse text-xs">
                                            <thead class="sticky top-0 bg-slate-100 z-10">
                                                <tr class="text-slate-500 border-b border-slate-200 dark:border-slate-700">
                                                    <th class="p-2">Nombre</th>
                                                    <th class="p-2">Email</th>
                                                    <th class="p-2 text-center">Rol</th>
                                                    <th class="p-2">Tel</th>
                                                </tr>
                                            </thead>
                                            <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
                                                <template x-for="(row, i) in previewData" :key="i">
                                                    <tr class="hover:bg-white dark:hover:bg-slate-800 transition-colors">
                                                        <td class="p-2 font-bold text-slate-800 dark:text-slate-200"
                                                            x-text="row[0] || '-'"></td>
                                                        <td class="p-2 font-mono text-slate-600 dark:text-slate-400"
                                                            x-text="row[1] || '-'"></td>
                                                        <td class="p-2 text-center text-emerald-600 font-bold"
                                                            x-text="row[2] || '-'"></td>
                                                        <td class="p-2 text-slate-500" x-text="row[3] || '-'"></td>
                                                    </tr>
                                                </template>
                                                <tr x-show="previewData.length === 0">
                                                    <td colspan="4" class="p-8 text-center text-slate-400 italic">
                                                        Nada para previsualizar...
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Footer -->
                        <div
                            class="bg-gray-50 dark:bg-slate-700/50 p-6 flex justify-end gap-3 rounded-b-xl border-t border-slate-100 dark:border-slate-700">
                            <button type="button" @click="importModalOpen = false"
                                class="px-4 py-2 bg-red-50 hover:bg-red-100 text-red-600 dark:bg-red-900/20 dark:hover:bg-red-900/30 dark:text-red-400 rounded-xl font-bold transition-colors">Cancelar</button>
                            <button type="submit" :disabled="previewData.length === 0"
                                class="px-6 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-bold shadow-lg shadow-emerald-500/30 transition-all transform hover:scale-[1.02] disabled:opacity-50 disabled:transform-none">
                                Importar Usuarios
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- WhatsApp Modal -->
        <div x-show="whatsappModal.open" class="fixed inset-0 z-[110] overflow-y-auto" role="dialog" aria-modal="true"
            x-cloak>
            <div class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity"
                @click="whatsappModal.open = false">
            </div>
            <div class="flex min-h-screen items-center justify-center p-4">
                <div
                    class="relative bg-white dark:bg-slate-800 border border-white/20 dark:border-slate-700 w-full max-w-lg rounded-2xl shadow-2xl overflow-hidden transform transition-all">

                    <!-- Header -->
                    <div class="bg-[#25D366] p-4 text-white flex justify-between items-center">
                        <div class="flex items-center gap-2">
                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                                <path
                                    d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
                            </svg>
                            <h3 class="font-bold text-lg">Enviar Mensaje</h3>
                        </div>
                        <button @click="whatsappModal.open = false"
                            class="text-white/80 hover:text-white bg-white/10 hover:bg-white/20 rounded p-1">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M6 18L18 6M6 6l12 12">
                                </path>
                            </svg>
                        </button>
                    </div>

                    <div class="p-6">
                        <!-- TABS -->
                        <div class="flex gap-2 mb-4 bg-slate-100 dark:bg-slate-700 p-1 rounded-xl">
                            <button @click="whatsappModal.mode = 'invite'"
                                class="flex-1 py-2 text-sm font-bold rounded-lg transition-all"
                                :class="whatsappModal.mode === 'invite' ? 'bg-white dark:bg-slate-600 shadow text-green-600 dark:text-green-400' : 'text-slate-500 dark:text-slate-400 hover:text-slate-700'">
                                Invitación Domiciliario
                            </button>
                            <button @click="whatsappModal.mode = 'custom'"
                                class="flex-1 py-2 text-sm font-bold rounded-lg transition-all"
                                :class="whatsappModal.mode === 'custom' ? 'bg-white dark:bg-slate-600 shadow text-blue-600 dark:text-blue-400' : 'text-slate-500 dark:text-slate-400 hover:text-slate-700'">
                                Mensaje Personal
                            </button>
                        </div>

                        <!-- Invite Content -->
                        <div x-show="whatsappModal.mode === 'invite'">
                            <div class="mb-2 flex justify-between items-center">
                                <label class="text-xs font-bold text-slate-500 uppercase">Plantilla de Invitación</label>
                                <div class="flex gap-2">
                                    <span
                                        class="text-[10px] bg-slate-100 dark:bg-slate-700 px-1.5 py-0.5 rounded text-slate-500 border border-slate-200 cursor-pointer hover:bg-slate-200 dark:text-slate-300 dark:hover:bg-slate-600 dark:border-slate-600"
                                        @click="insertShortcode('[NOMBRE]')">[NOMBRE]</span>
                                    <span
                                        class="text-[10px] bg-slate-100 dark:bg-slate-700 px-1.5 py-0.5 rounded text-slate-500 border border-slate-200 cursor-pointer hover:bg-slate-200 dark:text-slate-300 dark:hover:bg-slate-600 dark:border-slate-600"
                                        @click="insertShortcode('[FECHA]')">[FECHA]</span>
                                </div>
                            </div>
                            <textarea x-model="whatsappModal.inviteMessage" rows="5"
                                class="w-full p-3 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-900 focus:ring-2 focus:ring-green-500 outline-none text-sm dark:text-white"
                                placeholder="Escribe el mensaje de invitación..."></textarea>
                            <p class="text-[10px] text-slate-400 mt-1 italic">
                                * Este mensaje se guardará automáticamente para futuros envíos.
                            </p>
                        </div>

                        <!-- Custom Content -->
                        <div x-show="whatsappModal.mode === 'custom'">
                            <label class="block text-xs font-bold text-slate-500 uppercase mb-2">Mensaje Libre</label>
                            <textarea x-model="whatsappModal.customMessage" rows="5"
                                class="w-full p-3 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-900 focus:ring-2 focus:ring-blue-500 outline-none text-sm dark:text-white"
                                placeholder="Hola, te escribo para..."></textarea>
                        </div>

                        <!-- Preview Area (Dynamic) -->
                        <div
                            class="mt-4 bg-green-50 dark:bg-slate-700/50 p-3 rounded-xl border border-green-100 dark:border-slate-600">
                            <p class="text-xs font-bold text-green-800 dark:text-green-400 mb-1">Vista Previa:</p>
                            <p class="text-sm text-slate-700 dark:text-slate-300 italic whitespace-pre-wrap"
                                x-text="getPreviewMessage()"></p>
                        </div>

                        <div class="flex justify-end gap-3 pt-6">
                            <button @click="whatsappModal.open = false"
                                class="px-4 py-2 text-slate-500 font-bold hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition">Cancelar</button>
                            <button @click="sendWhatsApp()"
                                class="px-6 py-2 bg-[#25D366] hover:bg-[#20bd5a] text-white font-bold rounded-xl shadow-lg shadow-green-500/30 flex items-center gap-2 transition hover:scale-105">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                    <path
                                        d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
                                </svg>
                                Enviar WhatsApp
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Generic Bulk Confirm Modal -->
        <div x-show="bulkConfirm.open" class="fixed inset-0 z-[110] overflow-y-auto" role="dialog" aria-modal="true"
            x-cloak>
            <div class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity"
                @click="bulkConfirm.open = false"></div>
            <div class="flex min-h-screen items-center justify-center p-4">
                <div
                    class="relative bg-white dark:bg-slate-800 rounded-xl max-w-xs w-full p-6 shadow-2xl border border-slate-200 dark:border-slate-700 text-center">
                    <div
                        class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30 mb-4">
                        <svg class="h-8 w-8 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                        </svg>
                    </div>
                    <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-2" x-text="'Confirmación'"></h3>
                    <p class="text-sm text-slate-500 dark:text-slate-400 mb-6" x-text="bulkConfirm.message"></p>
                    <div class="flex gap-3 justify-center">
                        <button @click="bulkConfirm.open = false"
                            class="px-4 py-2 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600 dark:text-slate-300 font-bold transition">
                            Cancelar
                        </button>
                        <button @click="confirmBulkAction()"
                            class="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-bold shadow-lg shadow-blue-500/30 transition">
                            Confirmar
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Modal Exportar Usuarios (Premium) --}}
        @include('usuarios.modals.export')

    </div>

    <script>
        function userManagement() {
            return {
                init() {
                    @if($errors->any())
                        this.userModalOpen = true;
                        this.isEditing = {{ old('_method') === 'PUT' ? 'true' : 'false' }};
                        this.editId = '{{ old('editId') }}';
                        this.form = {
                            nombre: '{{ old('nombre') }}',
                            email: '{{ old('email') }}',
                            telefono: '{{ old('telefono') }}',
                            rol_id: '{{ old('rol_id') }}',
                            direccion: '{{ old('direccion') }}',
                            tipo_vehiculo: '{{ old('tipo_vehiculo') }}',
                            placa: '{{ old('placa') }}',
                            password: '',
                            password_confirmation: ''
                        };
                        this.hasVehicle = {{ old('tiene_vehiculo') ? 'true' : 'false' }};
                        
                        // Si estamos editando, intentar recuperar el avatar previo si es necesario
                        @if(old('editId'))
                            // Esto es opcional ya que el controller maneja el ID, 
                            // pero ayuda a la consistencia visual si fuera necesario.
                        @endif
                    @endif
                },
                // State
                userModalOpen: false,
                importModalOpen: false,
                isEditing: false,
                editId: null,
                editAvatar: null,
                // Import State
                importData: '',
                previewData: [],
                // Bulk Actions
                selectedUsers: [],
                bulkAction: '', // New State for Dropdown
                bulkConfirm: { open: false, action: null, message: '' },

                // WhatsApp Modal State
                whatsappModal: {
                    open: false,
                    user: null, // { nombre: '', telefono: '' }
                    mode: 'invite', // 'invite' | 'custom'
                    inviteMessage: localStorage.getItem('whatsapp_invite_template') || 'Hola [NOMBRE], te convocamos para trabajar el día de hoy [FECHA] en la repartición de domicilios.',
                    customMessage: ''
                },

                // Form Data
                autoPassword: true,
                hasVehicle: false,
                emailExists: false,
                avatarRemoved: false, // Flag for backend removal
                newAvatarPreview: null, // Client-side preview URL
                isInternational: false, // Phone flag
                form: { nombre: '', email: '', telefono: '', rol_id: '', tipo_vehiculo: '', placa: '', password: '', password_confirmation: '' },

                // Methods
                openCreateModal() {
                    this.isEditing = false;
                    this.resetForm();
                    this.avatarRemoved = false;
                    this.newAvatarPreview = null;
                    if (this.$refs.avatarInput) this.$refs.avatarInput.value = '';
                    this.userModalOpen = true;
                },
                openEditModal(user) {
                    this.isEditing = true;
                    this.editId = user.id;
                    this.editAvatar = user.avatar;
                    this.form = { ...user, password: '', password_confirmation: '' };
                    this.hasVehicle = !!user.tiene_vehiculo;
                    this.autoPassword = false;
                    this.isInternational = user.telefono && (user.telefono.startsWith('+') || user.telefono.length > 10);
                    this.avatarRemoved = false;
                    this.newAvatarPreview = null;
                    if (this.$refs.avatarInput) this.$refs.avatarInput.value = '';
                    this.userModalOpen = true;
                },
                openImportModal() {
                    this.importData = '';
                    this.previewData = [];
                    this.importModalOpen = true;
                },
                parseUsersData() {
                    if (!this.importData) { this.previewData = []; return; }
                    this.previewData = this.importData.trim().split('\n')
                        .map(line => line.split('\t'))
                        .filter(cols => cols.length >= 2);
                },

                // WhatsApp Methods
                openWhatsAppModal(user) {
                    this.whatsappModal.user = user;
                    this.whatsappModal.customMessage = '';
                    this.whatsappModal.open = true;
                },
                insertShortcode(code) {
                    if (this.whatsappModal.mode === 'invite') {
                        this.whatsappModal.inviteMessage += ' ' + code;
                    } else {
                        this.whatsappModal.customMessage += ' ' + code;
                    }
                },
                getPreviewMessage() {
                    if (!this.whatsappModal.user) return '';
                    let msg = this.whatsappModal.mode === 'invite' ? this.whatsappModal.inviteMessage : this.whatsappModal.customMessage;

                    const date = new Date().toLocaleDateString('es-ES', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
                    return msg.replace(/\[NOMBRE\]/g, this.whatsappModal.user.nombre).replace(/\[FECHA\]/g, date);
                },
                sendWhatsApp() {
                    let msg = this.getPreviewMessage();

                    if (this.whatsappModal.mode === 'invite') {
                        // Persist template
                        localStorage.setItem('whatsapp_invite_template', this.whatsappModal.inviteMessage);
                    }

                    if (!this.whatsappModal.user.telefono) return;

                    const cleanPhone = this.whatsappModal.user.telefono.replace(/\D/g, '');
                    const finalPhone = cleanPhone.length === 10 ? '57' + cleanPhone : cleanPhone;

                    const url = `https://api.whatsapp.com/send?phone=${finalPhone}&text=${encodeURIComponent(msg)}`;
                    window.open(url, '_blank');
                    this.whatsappModal.open = false;
                },

                resetForm() {
                    this.form = { nombre: '', email: '', telefono: '', rol_id: '', tipo_vehiculo: '', placa: '', password: '', password_confirmation: '' };
                    this.editAvatar = null;
                    this.hasVehicle = false;
                    this.autoPassword = true;
                    this.emailExists = false;
                    this.isInternational = false;
                },
                checkEmail() {
                    if (!this.form.email.includes('@') || this.isEditing) return;
                    fetch('{{ route("usuarios.check-email") }}', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                        body: JSON.stringify({ email: this.form.email })
                    }).then(r => r.json()).then(d => { this.emailExists = d.exists });
                },
                getWhatsAppUrl(phone) {
                    if (!phone) return '';
                    // Check if international (starts with + or length > 10 and doesn't start with 3) - simple heuristic
                    const isInt = phone.startsWith('+') || phone.length > 10;

                    let clean = phone.replace(/[^\d+]/g, ''); // Keep + and digits

                    if (isInt) {
                        // Use as is (removing + for whatsapp url usually works, but wa.me prefers digits)
                        return 'https://api.whatsapp.com/send?phone=' + clean.replace('+', '');
                    } else {
                        // Colombian Default
                        return clean.length === 10 ? 'https://api.whatsapp.com/send?phone=57' + clean : 'https://api.whatsapp.com/send?phone=' + clean;
                    }
                },
                copyToClipboard(text) { navigator.clipboard.writeText(text); },

                // Bulk Actions Methods
                toggleUser(userId, checked) {
                    if (checked) {
                        if (!this.selectedUsers.includes(userId)) {
                            this.selectedUsers.push(userId);
                        }
                    } else {
                        this.selectedUsers = this.selectedUsers.filter(id => id !== userId);
                    }
                },

                // Avatar Methods
                previewAvatar(event) {
                    const file = event.target.files[0];
                    if (file) {
                        this.newAvatarPreview = URL.createObjectURL(file);
                        this.avatarRemoved = false;
                    }
                },
                removeAvatar() {
                    this.editAvatar = null;
                    this.newAvatarPreview = null;
                    this.avatarRemoved = true;
                    // Reset file input
                    if (this.$refs.avatarInput) this.$refs.avatarInput.value = '';
                },

                toggleAll(checked) {
                    if (checked) {
                        // Select all visible users IDs
                        this.selectedUsers = @json($usuarios->pluck('id')->toArray());
                    } else {
                        this.selectedUsers = [];
                    }
                },

                triggerBulkAction(action, message) {
                    // Compatibility method or direct usage
                    this.bulkConfirm.action = action;
                    this.bulkConfirm.message = message;
                    this.bulkConfirm.open = true;
                },

                executeBulkAction() {
                    if (!this.bulkAction) return;

                    let message = '';
                    const count = this.selectedUsers.length;


                    switch (this.bulkAction) {
                        case 'activate': message = `¿Activar ${count} usuarios?`; break;
                        case 'deactivate': message = `¿Desactivar ${count} usuarios?`; break;
                        case 'toggleOn': message = `¿Marcar ${count} usuarios como DISPONIBLES?`; break;
                        case 'toggleOff': message = `¿Marcar ${count} usuarios como NO DISPONIBLES?`; break;
                        case 'delete': message = `¿Eliminar permanentemente ${count} usuarios?`; break;
                    }

                    this.bulkConfirm.action = this.bulkAction;
                    this.bulkConfirm.message = message;
                    this.bulkConfirm.open = true;
                },

                confirmBulkAction() {
                    if (!this.bulkConfirm.action) return;
                    const action = this.bulkConfirm.action;

                    if (action === 'activate') {
                        this.$refs.bulkDeactivateForm.querySelector('[name="activo"]').value = 1;
                        this.$refs.bulkDeactivateForm.submit();
                    } else if (action === 'deactivate') {
                        this.$refs.bulkDeactivateForm.querySelector('[name="activo"]').value = 0;
                        this.$refs.bulkDeactivateForm.submit();
                    } else if (action === 'toggleOn') {
                        this.$refs.bulkToggleOnForm.submit();
                    } else if (action === 'toggleOff') {
                        this.$refs.bulkToggleOffForm.submit();
                    } else if (action === 'delete') {
                        this.$refs.bulkDeleteForm.submit();
                    }
                },

                clearSelection() {
                    this.selectedUsers = [];
                    this.bulkAction = '';
                }
            }
        }
    </script>
@endsection