@extends('layouts.app')

@php
  $esEdicion = $cuenta->exists;
  $esPropia = $esEdicion && $cuenta->id === auth()->id();
@endphp

@section('titulo', $esEdicion ? 'Editar usuario' : 'Nuevo usuario')

@section('contenido')
  <div class="topbar">
    <div>
      <div class="eyebrow">Administración</div>
      <h2>{{ $esEdicion ? 'Editar usuario' : 'Nuevo usuario' }}</h2>
    </div>
  </div>

  @include('partials.alertas', ['anchoMaximo' => '640px'])

  <form method="post" action="{{ $esEdicion ? route('usuarios.update', $cuenta) : route('usuarios.store') }}" style="max-width:640px;" autocomplete="off">
    @csrf
    @if ($esEdicion) @method('PUT') @endif

    <div class="card-block">
      <h3><span class="idx">1</span> Datos de la cuenta</h3>
      <div class="field-sm">
        <label for="nombre">Nombre completo *</label>
        <input type="text" id="nombre" name="nombre" value="{{ old('nombre', $cuenta->nombre) }}" maxlength="120" required autofocus>
      </div>
      <div class="grid-2">
        <div class="field-sm">
          <label for="usuario">Usuario (para iniciar sesión) *</label>
          <input type="text" id="usuario" name="usuario" value="{{ old('usuario', $cuenta->usuario) }}" maxlength="50" pattern="[a-zA-Z0-9._-]{3,50}" required>
        </div>
        <div class="field-sm">
          <label for="email">Correo electrónico</label>
          <input type="email" id="email" name="email" value="{{ old('email', $cuenta->email) }}" maxlength="120">
        </div>
      </div>
      <div class="grid-2">
        <div class="field-sm">
          <label for="rol">Rol</label>
          <select id="rol" name="rol" @disabled($esPropia)>
            <option value="vendedor" @selected(old('rol', $cuenta->rol) === 'vendedor')>Vendedor(a)</option>
            <option value="administrador" @selected(old('rol', $cuenta->rol) === 'administrador')>Administrador</option>
          </select>
        </div>
        <div class="field-sm">
          <label for="password">{{ $esEdicion ? 'Nueva contraseña (opcional)' : 'Contraseña *' }}</label>
          <input type="password" id="password" name="password" minlength="8" placeholder="{{ $esEdicion ? 'Dejar en blanco para no cambiarla' : 'Mínimo 8 caracteres' }}" @required(! $esEdicion) autocomplete="new-password">
        </div>
      </div>
      @if (! $esPropia)
      <div class="field-sm" style="margin-bottom:0;">
        <input type="hidden" name="activo" value="0">
        <label class="check-linea">
          <input type="checkbox" name="activo" value="1" @checked(old('activo', $cuenta->activo))>
          Cuenta activa (puede iniciar sesión)
        </label>
      </div>
      @else
      <div class="sidenote" style="margin:4px 0 0;">
        <span>ⓘ</span>
        <span>Estás editando tu propia cuenta: el rol y el estado activo no se pueden cambiar para no perder el acceso de administración.</span>
      </div>
      @endif
    </div>

    <div class="form-actions">
      <a href="{{ route('usuarios.index') }}" class="btn-ghost">Cancelar</a>
      <button type="submit" class="btn-gold">{{ $esEdicion ? 'Guardar cambios' : 'Crear usuario' }}</button>
    </div>
  </form>
@endsection