@extends('layouts.admin')

@section('admin-content')
<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem;">
    <a href="{{ route('admin.users.index') }}" style="color: var(--text-muted); display: inline-flex; align-items: center;" title="Volver al listado">
        <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
    </a>
    <h2 style="font-size: 1.5rem; font-weight: 800;">Editar Usuario: {{ $user->name }}</h2>
</div>

@if ($errors->any())
    <div class="alert alert-error" style="font-size: 0.85rem; padding: 0.75rem 1rem; margin-bottom: 1.5rem;">
        <div style="flex: 1;">
            @foreach ($errors->all() as $error)
                <span style="display:block;">{{ $error }}</span>
            @endforeach
        </div>
    </div>
@endif

<form action="{{ route('admin.users.update', $user) }}" method="POST">
    @csrf
    @method('PUT')

    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
        <div class="form-group">
            <label for="name" class="form-label">Nombre Completo <span style="color: var(--color-error);">*</span></label>
            <input type="text" id="name" name="name" value="{{ old('name', $user->name) }}" required class="form-control" placeholder="Ej. Ana Morales">
        </div>

        <div class="form-group">
            <label for="email" class="form-label">Correo Electrónico <span style="color: var(--color-error);">*</span></label>
            <input type="email" id="email" name="email" value="{{ old('email', $user->email) }}" required class="form-control" placeholder="ana@ejemplo.com">
        </div>
    </div>

    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
        <div class="form-group">
            <label for="phone" class="form-label">Número de Celular / WhatsApp</label>
            <input type="tel" id="phone" name="phone" value="{{ old('phone', $user->phone) }}" class="form-control" placeholder="Ej. 04141234567">
        </div>

        <div class="form-group">
            <label for="role" class="form-label">Rol del Usuario <span style="color: var(--color-error);">*</span></label>
            <select id="role" name="role" required class="form-control" {{ $user->id === auth()->id() ? 'disabled' : '' }}>
                @foreach($roles as $r)
                    <option value="{{ $r->name }}" {{ old('role', $user->role) === $r->name ? 'selected' : '' }}>{{ $r->display_name }}</option>
                @endforeach
            </select>
            @if($user->id === auth()->id())
                <input type="hidden" name="role" value="admin">
                <small style="color: var(--text-muted); font-size: 0.75rem;">No puedes modificar tu propio rol de administrador.</small>
            @endif
        </div>
    </div>

    <div style="background: rgba(0, 0, 0, 0.02); border: 1px dashed var(--border-color); border-radius: var(--radius-md); padding: 1.25rem; margin-top: 1rem; margin-bottom: 1.25rem;">
        <h4 style="font-size: 0.95rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-primary);">Cambiar Contraseña (Opcional)</h4>
        <p style="color: var(--text-muted); font-size: 0.8rem; margin-bottom: 1rem;">Deja estos campos vacíos si deseas conservar la contraseña actual del usuario.</p>
        
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
            <div class="form-group" style="margin-bottom: 0;">
                <label for="password" class="form-label">Nueva Contraseña</label>
                <input type="password" id="password" name="password" class="form-control" placeholder="Dejar en blanco para no cambiar">
            </div>

            <div class="form-group" style="margin-bottom: 0;">
                <label for="password_confirmation" class="form-label">Confirmar Nueva Contraseña</label>
                <input type="password" id="password_confirmation" name="password_confirmation" class="form-control" placeholder="Repite la nueva contraseña">
            </div>
        </div>
    </div>

    <div style="margin-top: 2rem; display: flex; gap: 1rem;">
        <button type="submit" class="btn btn-primary">
            <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
            Guardar Cambios
        </button>
        <a href="{{ route('admin.users.index') }}" class="btn btn-outline">Cancelar</a>
    </div>
</form>
@endsection