@extends('partials.layout')

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

@section('content')
<div style="max-width: 1000px; margin: auto; padding: 20px;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
        <h1 style="margin:0">Gestión de Usuarios</h1>
        <a href="{{ route('dashboard') }}" style="text-decoration: none; color: #3b82f6; font-weight: bold;">&larr; Volver al Dashboard</a>
    </div>

    @if(session('success'))
        <div style="padding:12px;background:#dcfce7;color:#166534;border-radius:10px;border:1px solid #bbf7d0;margin-bottom:20px;font-size:14px">
            {{ session('success') }}
        </div>
    @endif

    <div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); margin-bottom: 30px;">
        <h3 style="margin-top:0">Registrar Nuevo Usuario</h3>
        <p style="font-size: 13px; color: #64748b; margin-bottom: 15px;">La contraseña por defecto será: <strong>12345678</strong></p>
        <form method="POST" action="{{ route('usuarios.store') }}" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; align-items: end;">
            @csrf
            <div>
                <label style="display:block; margin-bottom: 5px; font-weight: bold; font-size: 14px;">Nombres</label>
                <input type="text" name="nombres" style="width:100%; padding:8px; border:1px solid #cbd5e1; border-radius:6px; box-sizing: border-box;" required placeholder="Ej. Juan Pérez">
            </div>
            <div>
                <label style="display:block; margin-bottom: 5px; font-weight: bold; font-size: 14px;">Usuario</label>
                <input type="text" name="usuario" style="width:100%; padding:8px; border:1px solid #cbd5e1; border-radius:6px; box-sizing: border-box;" required placeholder="jperez">
            </div>
            <div>
                <label style="display:block; margin-bottom: 5px; font-weight: bold; font-size: 14px;">Rol</label>
                <select name="rol" style="width:100%; padding:8px; border:1px solid #cbd5e1; border-radius:6px; box-sizing: border-box;" required>
                    <option value="OPERADOR">OPERADOR</option>
                    <option value="ADMIN">ADMINISTRADOR</option>
                </select>
            </div>
            <button type="submit" style="background: #3b82f6; color: white; padding: 10px; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; height: 38px;">Crear Usuario</button>
        </form>
    </div>

    <div style="background: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); overflow: hidden;">
        <table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 14px;">
            <thead style="background: #f8fafc; border-bottom: 2px solid #e2e8f0; color: #475569;">
                <tr>
                    <th style="padding: 12px 15px;">Nombre</th>
                    <th style="padding: 12px 15px;">Usuario</th>
                    <th style="padding: 12px 15px;">Rol</th>
                    <th style="padding: 12px 15px; text-align: center;">Primer Login</th>
                    <th style="padding: 12px 15px; text-align: center;">Estado</th>
                </tr>
            </thead>
            <tbody>
                @foreach($users as $user)
                <tr style="border-bottom: 1px solid #e2e8f0;">
                    <td style="padding: 12px 15px; font-weight: 500;">{{ $user->name }}</td>
                    <td style="padding: 12px 15px; color: #64748b;">{{ $user->usuario }}</td>
                    <td style="padding: 12px 15px;">
                        <span style="padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: bold; background: {{ $user->rol === 'ADMIN' ? '#dbeafe' : '#f1f5f9' }}; color: {{ $user->rol === 'ADMIN' ? '#1e40af' : '#475569' }}; border: 1px solid {{ $user->rol === 'ADMIN' ? '#bfdbfe' : '#e2e8f0' }};">
                            {{ $user->rol }}
                        </span>
                    </td>
                    <td style="padding: 12px 15px; text-align: center;">
                        <span style="color: {{ $user->must_change_password ? '#e11d48' : '#16a34a' }};">
                            {{ $user->must_change_password ? 'Pendiente' : 'Completado' }}
                        </span>
                    </td>
                    <td style="padding: 12px 15px; text-align: center;">
                        <span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: {{ $user->estado ? '#22c55e' : '#94a3b8' }}; margin-right: 5px;"></span>
                        {{ $user->estado ? 'Activo' : 'Inactivo' }}
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection