@extends('layouts.dashboard')

@section('header_title', 'Usuarios y Permisos')

@section('content')
<style>
    .exec-container { font-family: 'Inter', 'Segoe UI', sans-serif; background-color: #f1f5f9; min-height: 100vh; margin: -2rem; padding: 50px 20px; }
    .exec-card { background: #ffffff; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); overflow: hidden; }
    .btn-exec { background-color: #1e293b; color: #ffffff; padding: 12px 24px; border-radius: 8px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; border: none; transition: background-color 0.2s; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
    .btn-exec:hover { background-color: #0f172a; color: white; }
    .exec-table { width: 100%; border-collapse: collapse; }
    .exec-table th { background: #f8fafc; padding: 16px 24px; text-align: left; font-size: 11px; font-weight: 800; text-transform: uppercase; color: #64748b; letter-spacing: 0.05em; border-bottom: 1px solid #e2e8f0; }
    .exec-table td { padding: 16px 24px; border-bottom: 1px solid #f1f5f9; font-size: 14px; color: #334155; vertical-align: middle; }
    .exec-table tr:hover td { background: #fcfcfd; }
    
    .status-badge { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: 6px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid transparent; }
    .status-admin { background: #f0f7ff; color: #1e3a8a; border-color: #dbeafe; }
    .status-emisor { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
    
    .action-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; transition: all 0.2s; color: #64748b; background: transparent; border: 1px solid transparent; }
    .action-btn:hover { background: #f1f5f9; color: #1e293b; border-color: #e2e8f0; }
    .action-btn.delete:hover { background: #fef2f2; color: #e11d48; border-color: #ffe4e6; }
    
    .user-avatar-sm { width: 32px; height: 32px; font-size: 12px; background: #e2e8f0; color: #475569; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; }
</style>

<div class="exec-container">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
        <div>
            <h1 style="font-size: 24px; font-weight: 800; color: #0f172a; margin: 0; letter-spacing: -0.02em;">Gestión de Usuarios</h1>
            <p style="font-size: 14px; color: #64748b; margin: 4px 0 0 0;">Control de accesos y roles del sistema.</p>
        </div>
        <a href="{{ route('users.create') }}" class="btn-exec">
            <i class="bi bi-person-plus-fill"></i> Nuevo Usuario
        </a>
    </div>

    <div class="exec-card">
        <div style="overflow-x: auto;">
            <table class="exec-table">
                <thead>
                    <tr>
                        <th>Usuario</th>
                        <th>Email</th>
                        <th style="text-align: center;">Rol / Acceso</th>
                        <th style="text-align: right;">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($users as $user)
                    <tr>
                        <td>
                            <div style="display: flex; align-items: center; gap: 12px;">
                                <div class="user-avatar-sm">{{ substr($user->name, 0, 1) }}</div>
                                <div style="font-weight: 700; color: #1e293b;">{{ $user->name }}</div>
                            </div>
                        </td>
                        <td style="color: #64748b; font-weight: 500; font-size: 13px;">{{ $user->email }}</td>
                        <td style="text-align: center;">
                            @if($user->role === 'admin')
                                <span class="status-badge status-admin">Administrador</span>
                            @else
                                <span class="status-badge status-emisor">Emisor</span>
                            @endif
                        </td>
                        <td style="text-align: right;">
                            <div style="display: flex; justify-content: flex-end; gap: 8px;">
                                <a href="{{ route('users.edit', $user) }}" class="action-btn" title="Editar">
                                    <i class="bi bi-pencil-square"></i>
                                </a>
                                @if($user->id !== Auth::id())
                                <form action="{{ route('users.destroy', $user) }}" method="POST" style="margin: 0;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="action-btn delete" onclick="return confirm('¿Eliminar usuario definitivamente?')" title="Eliminar">
                                        <i class="bi bi-trash3"></i>
                                    </button>
                                </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection