@extends('partials.layout')

@section('title', 'Gestión de Usuarios')
@section('subtitle', 'Listado de usuarios del sistema')

@section('content')
<div style="margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
    <h3 style="margin: 0;">Usuarios Registrados</h3>
    <button onclick="document.getElementById('createUserModal').style.display='block'" class="btn primary">
        + Nuevo Usuario
    </button>
</div>

@if($users->count() > 0)
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Nombre</th>
                <th>Usuario</th>
                <th>Rol</th>
                <th>Estado</th>
                <th>Creado</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>
            @foreach($users as $user)
            <tr>
                <td>{{ $user->id_usuario }}</td>
                <td>{{ $user->name }}</td>
                <td>{{ $user->usuario }}</td>
                <td>
                    <span style="padding: 4px 8px; border-radius: 6px; background: {{ $user->rol === 'ADMIN' ? '#fee2e2' : '#dbeafe' }}; color: {{ $user->rol === 'ADMIN' ? '#991b1b' : '#1e40af' }}; font-size: 12px; display: inline-block; margin-bottom: 8px;">
                        {{ $user->rol }}
                    </span>
                    @if(auth()->user()->rol === 'ADMIN')
                        <form action="{{ route('usuarios.update', $user->id_usuario) }}" method="POST" style="display:flex;gap:6px;align-items:center;flex-wrap:wrap;">
                            @csrf
                            @method('PUT')
                            <select name="rol" style="padding:6px 10px;border:1px solid #d1d5db;border-radius:8px;font-size:12px;">
                                <option value="OPERADOR" {{ $user->rol === 'OPERADOR' ? 'selected' : '' }}>Operador</option>
                                <option value="SUPERVISOR" {{ $user->rol === 'SUPERVISOR' ? 'selected' : '' }}>Supervisor</option>
                                <option value="ADMIN" {{ $user->rol === 'ADMIN' ? 'selected' : '' }}>Administrador</option>
                            </select>
                            <button type="submit" class="btn" style="padding:6px 10px;font-size:12px;">Guardar</button>
                        </form>
                    @endif
                </td>
                <td>
                    @if($user->must_change_password)
                        <span style="padding: 4px 8px; border-radius: 6px; background: #fef3c7; color: #92400e; font-size: 12px;">
                            Pendiente cambio de clave
                        </span>
                    @else
                        <span style="padding: 4px 8px; border-radius: 6px; background: #dcfce7; color: #166534; font-size: 12px;">
                            Activo
                        </span>
                    @endif
                </td>
                <td>{{ $user->fecha_creacion ? \Carbon\Carbon::parse($user->fecha_creacion)->format('d/m/Y') : 'N/A' }}</td>
                <td>
                    <form action="{{ route('usuarios.reset_password', $user->id_usuario) }}" method="POST" onsubmit="return confirm('¿Resetear la clave de {{ $user->usuario }} a 12345678?');" style="display:inline;">
                        @csrf
                        <button type="submit" class="btn" style="padding:6px 10px;font-size:12px;">Resetear clave</button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
@else
    <div style="text-align: center; padding: 40px; color: #64748b;">
        <p>No hay usuarios registrados en el sistema.</p>
    </div>
@endif

<!-- Modal para crear usuario -->
<div id="createUserModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; justify-content: center; align-items: center;">
    <div style="background: white; padding: 24px; border-radius: 14px; width: 90%; max-width: 500px; box-shadow: 0 20px 50px rgba(0,0,0,0.3);">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
            <h3 style="margin: 0;">Nuevo Usuario</h3>
            <button onclick="document.getElementById('createUserModal').style.display='none'" style="background: none; border: none; font-size: 24px; cursor: pointer; color: #64748b;">&times;</button>
        </div>
        
        <form action="{{ route('usuarios.store') }}" method="POST">
            @csrf
            
            <div style="margin-bottom: 16px;">
                <label style="display: block; margin-bottom: 6px; font-weight: 500;">Nombre</label>
                <input type="text" name="nombres" required style="width: 100%; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px;" placeholder="Nombre del usuario">
            </div>
            
            <div style="margin-bottom: 16px;">
                <label style="display: block; margin-bottom: 6px; font-weight: 500;">Usuario</label>
                <input type="text" name="usuario" required style="width: 100%; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px;" placeholder="nombre.usuario">
            </div>
            
            <div style="margin-bottom: 20px;">
                <label style="display: block; margin-bottom: 6px; font-weight: 500;">Rol</label>
                <select name="rol" required style="width: 100%; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px;">
                    <option value="">Seleccionar rol</option>
                    <option value="OPERADOR">Operador</option>
                    <option value="SUPERVISOR">Supervisor</option>
                    <option value="ADMIN">Administrador</option>
                </select>
            </div>
            
            <div style="background: #f0f9ff; padding: 12px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #bae6fd;">
                <p style="margin: 0; font-size: 13px; color: #0369a1;">
                    <strong>Nota:</strong> La clave por defecto será <strong>12345678</strong>. El usuario deberá cambiarla al iniciar sesión por primera vez.
                </p>
            </div>
            
            <div style="display: flex; gap: 10px; justify-content: flex-end;">
                <button type="button" onclick="document.getElementById('createUserModal').style.display='none'" class="btn">Cancelar</button>
                <button type="submit" class="btn primary">Crear Usuario</button>
            </div>
        </form>
    </div>
</div>
@endsection