@extends('layouts.app')
@section('titulo','Mi perfil')
@section('contenido')
<h4><i class="fa fa-id-card"></i> Mi perfil</h4>
<form method="POST" action="{{ route('perfil.update') }}" enctype="multipart/form-data" class="card p-3">
  @csrf @method('PUT')
  <div class="row g-3">
    <div class="col-md-3"><label class="form-label small">Usuario</label>
      <input value="{{ $u->usuario }}" disabled class="form-control"></div>
    <div class="col-md-6"><label class="form-label small">Nombres *</label>
      <input name="nombres" value="{{ old('nombres',$u->nombres) }}" class="form-control" required></div>
    <div class="col-md-3"><label class="form-label small">Apellidos</label>
      <input name="apellidos" value="{{ old('apellidos',$u->apellidos) }}" class="form-control"></div>
    <div class="col-md-3"><label class="form-label small">Teléfono</label>
      <input name="telefono" value="{{ old('telefono',$u->telefono) }}" class="form-control"></div>
    <div class="col-md-6"><label class="form-label small">Email</label>
      <input type="email" name="email" value="{{ old('email',$u->email) }}" class="form-control"></div>

    <div class="col-12"><hr><h6>Cambiar contraseña</h6></div>
    <div class="col-md-4"><label class="form-label small">Contraseña actual</label>
      <input type="password" name="password_actual" class="form-control" autocomplete="current-password"></div>
    <div class="col-md-4"><label class="form-label small">Nueva contraseña</label>
      <input type="password" name="password" class="form-control" autocomplete="new-password" minlength="6"></div>
    <div class="col-md-4"><label class="form-label small">Confirmar nueva</label>
      <input type="password" name="password_confirmation" class="form-control" autocomplete="new-password" minlength="6"></div>
    <div class="col-md-4"><label class="form-label small">Nueva clave de firma</label>
      <input type="password" name="clave_firma" class="form-control" minlength="3" autocomplete="new-password"></div>

    <div class="col-12"><hr><h6><i class="fa fa-pen-nib"></i> Firma manuscrita</h6>
      <small class="text-muted d-block mb-2">Sube una imagen PNG o JPG de tu firma escaneada. Tu firma aparecerá automáticamente en el PDF de las OT que firmes con tu clave personal.</small>
    </div>
    <div class="col-md-5">
      <label class="form-label small">Imagen de firma</label>
      <input type="file" name="firma_imagen" accept="image/png,image/jpeg" class="form-control">
      <small class="text-muted">PNG con fondo transparente, máx 1 MB, recomendado 400×120 px.</small>
    </div>
    <div class="col-md-4">
      <label class="form-label small">Firma actual</label>
      <div class="border rounded p-2 bg-light text-center" style="min-height:80px;">
        @if($u->firma_imagen)
          <img src="{{ asset('storage/'.$u->firma_imagen) }}" alt="firma" style="max-height:70px; max-width:100%;">
        @else
          <small class="text-muted">— Aún no has subido tu firma —</small>
        @endif
      </div>
    </div>
    <div class="col-md-3 d-flex align-items-end">
      <div class="form-check">
        <input type="hidden" name="eliminar_firma" value="0">
        <input type="checkbox" name="eliminar_firma" value="1" id="elimFirma" class="form-check-input" {{ $u->firma_imagen ? '' : 'disabled' }}>
        <label for="elimFirma" class="form-check-label small">Eliminar firma actual</label>
      </div>
    </div>
  </div>
  <div class="mt-3 text-end">
    <button class="btn btn-primario"><i class="fa fa-save"></i> Guardar</button>
  </div>
</form>
@endsection