@extends('layouts.dashboard')

@section('header_title', 'Editar Usuario')

@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 { max-width: 600px; margin: 0 auto; background: #ffffff; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); padding: 40px; }
    .exec-title { font-size: 20px; font-weight: 700; color: #0f172a; margin-bottom: 20px; border-bottom: 1px solid #f8fafc; padding-bottom: 12px; letter-spacing: -0.01em; }
    .exec-label { display: block; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
    .exec-input { width: 100%; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 6px; padding: 10px 14px; font-size: 13px; font-weight: 500; color: #0f172a; outline: none; transition: all 0.2s; box-sizing: border-box; margin-bottom: 16px; }
    .exec-input:focus { background: #ffffff; border-color: #1e293b; box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.1); }
    
    .btn-exec { background: #1e293b; color: #ffffff; padding: 10px 24px; border-radius: 6px; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; border: none; cursor: pointer; transition: background 0.2s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
    .btn-exec:hover { background: #0f172a; }
    .btn-exec-outline { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
    .btn-exec-outline:hover { background: #e2e8f0; color: #1e293b; }
    
    /* Micro Role Selector */
    .role-group { display: flex; gap: 10px; margin-bottom: 20px; }
    .role-card { position: relative; cursor: pointer; }
    .role-card input { display: none; }
    .role-box { border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 16px; text-align: center; background: #ffffff; transition: all 0.2s ease; display: flex; align-items: center; gap: 8px; width: auto; max-width: 180px; }
    .role-card:hover .role-box { border-color: #94a3b8; }
    .role-card input:checked + .role-box { border-color: #1e293b; background: #1e293b; color: #ffffff; }
    .role-text { font-size: 12px; font-weight: 600; transition: color 0.2s; color: #475569; }
    .role-card input:checked + .role-box .role-text { color: #ffffff; }
    .role-icon { font-size: 14px; transition: color 0.2s; color: #64748b; }
    .role-card input:checked + .role-box .role-icon { color: #ffffff; }
</style>

<div class="exec-container">
    <div class="exec-card">
        <form action="{{ route('users.update', $user) }}" method="POST">
            @csrf
            @method('PUT')
            
            <div style="margin-bottom: 24px; border-bottom: 1px solid #e2e8f0; padding-bottom: 16px;">
                <h2 class="exec-title" style="border: none; padding: 0; margin-bottom: 4px;">Modificar Usuario</h2>
                <p style="font-size: 12px; color: #64748b; margin: 0; font-weight: 500;">Editando a: {{ $user->name }}</p>
            </div>

            <div>
                <label class="exec-label">Nombre Completo</label>
                <input type="text" name="name" class="exec-input" required value="{{ $user->name }}">
            </div>

            <div>
                <label class="exec-label">Correo Electrónico</label>
                <input type="email" name="email" class="exec-input" required value="{{ $user->email }}">
            </div>

            <div>
                <label class="exec-label">Rol / Permisos</label>
                <div class="role-group">
                    <label class="role-card">
                        <input type="radio" name="role" value="admin" {{ $user->role === 'admin' ? 'checked' : '' }} autocomplete="off">
                        <div class="role-box">
                            <i class="bi bi-shield-lock role-icon"></i>
                            <span class="role-text">Administrador</span>
                        </div>
                    </label>
                    <label class="role-card">
                        <input type="radio" name="role" value="emisor" {{ $user->role === 'emisor' ? 'checked' : '' }} autocomplete="off">
                        <div class="role-box">
                            <i class="bi bi-person-gear role-icon"></i>
                            <span class="role-text">Emisor</span>
                        </div>
                    </label>
                </div>
            </div>

            <div>
                <label class="exec-label">Nueva Contraseña (Opcional)</label>
                <input type="password" name="password" class="exec-input" placeholder="Dejar en blanco para no cambiar" style="margin-bottom: 4px;">
                <span style="font-size: 11px; color: #94a3b8; font-weight: 500;">Mínimo 8 caracteres si desea actualizar.</span>
            </div>

            <div style="margin-top: 30px; display: flex; justify-content: flex-end; gap: 12px; border-top: 1px solid #e2e8f0; padding-top: 20px;">
                <a href="{{ route('users.index') }}" class="btn-exec btn-exec-outline">Cancelar</a>
                <button type="submit" class="btn-exec">Guardar Cambios</button>
            </div>
        </form>
    </div>
</div>
@endsection