Mi Perfil

Gestiona tu información personal y configuración empresarial

{#if activeTab === 'personal'}

Información Personal

Actualiza tu información básica

Nombre * {#if profileErrors.firstName}

{profileErrors.firstName}

{/if}

Apellido * {#if profileErrors.lastName}

{profileErrors.lastName}

{/if}

Correo Electrónico

El correo electrónico no puede ser modificado. Contacta al administrador si necesitas cambiarlo.

{/if} {#if activeTab === 'general'}

Información Empresarial

Datos generales de tu empresa

Información General

Razón Social

Nombre Comercial

Clave de Cliente

Tipo de Cliente

RFC {#if businessProfileErrors.rfc}

{businessProfileErrors.rfc}

{/if}

ID Fiscal (Otros países)

Ubicación

País

Estado

Ciudad

Dirección

Número Exterior

Número Interior

Código Postal {#if businessProfileErrors.postal_code}

{businessProfileErrors.postal_code}

{/if}

Colonia

Representantes

Encargado/Representante

Representante Legal

Configuración

Moneda Preferida

Nacionalidad

Notas Adicionales

</div>
              </div>

<div class="mt-4 space-y-3">
                <label class="flex items-center space-x-2">
                  <input
                    type="checkbox"
                    class="form-checkbox"
                    bind:checked={businessProfile.send_to_billing}
                  />
                  <span class="text-sm text-gray-700">Enviar a Facturación</span>
                </label>

<label class="flex items-center space-x-2">
                  <input
                    type="checkbox"
                    class="form-checkbox"
                    bind:checked={businessProfile.is_prospect}
                  />
                  <span class="text-sm text-gray-700">Es Prospecto</span>
                </label>
              </div>
            </div>

<div class="flex justify-end pt-6">
              <button
                type="submit"
                class="btn-primary px-8 py-2"
                disabled={isSavingBusinessProfile}
              >
                {#if isSavingBusinessProfile}
                  <div class="flex items-center space-x-2">
                    <div class="spinner w-4 h-4" />
                    <span>Guardando...</span>
                  </div>
                {:else}
                  💾 Guardar Perfil Empresarial
                {/if}
              </button>
            </div>
          </form>
        </div>
      </div>
    {/if}

{#if activeTab === 'contact'}
      <div class="card">
        <div class="card-header">
          <h2 class="text-xl font-semibold text-gray-900">Información de Contacto</h2>
          <p class="text-gray-600 mt-1">Datos de contacto y comunicación</p>
        </div>

<div class="card-content">
          <form on:submit|preventDefault={handleBusinessProfileSave} class="space-y-6">
            
            <div class="bg-blue-50 p-4 rounded-lg">
              <h3 class="font-medium text-gray-900 mb-4">📞 Teléfonos</h3>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label class="form-label">Teléfono Principal</label>
                  <input
                    type="tel"
                    class="form-input"
                    bind:value={businessProfile.main_phone}
                    placeholder="+52 656 123 4567"
                  />
                </div>

<div>
                  <label class="form-label">Teléfono Secundario</label>
                  <input
                    type="tel"
                    class="form-input"
                    bind:value={businessProfile.secondary_phone}
                    placeholder="+52 656 123 4568"
                  />
                </div>

<div>
                  <label class="form-label">Teléfono Directo</label>
                  <input
                    type="tel"
                    class="form-input"
                    bind:value={businessProfile.direct_phone}
                    placeholder="+52 656 123 4569"
                  />
                </div>

<div>
                  <label class="form-label">Extensión</label>
                  <input
                    type="text"
                    class="form-input"
                    bind:value={businessProfile.phone_extension}
                    placeholder="101"
                    maxlength="10"
                  />
                </div>

<div class="bg-green-50 p-4 rounded-lg">
              <h3 class="font-medium text-gray-900 mb-4">✉️ Correos Electrónicos</h3>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label class="form-label">Email Principal</label>
                  <input
                    type="email"
                    class="form-input {businessProfileErrors.main_email ? 'border-red-300' : ''}"
                    bind:value={businessProfile.main_email}
                    placeholder="contacto@empresa.com"
                  />
                  {#if businessProfileErrors.main_email}
                    <p class="form-error">{businessProfileErrors.main_email}</p>
                  {/if}
                </div>

<div>
                  <label class="form-label">Email de Facturación</label>
                  <input
                    type="email"
                    class="form-input {businessProfileErrors.billing_email ? 'border-red-300' : ''}"
                    bind:value={businessProfile.billing_email}
                    placeholder="facturacion@empresa.com"
                  />
                  {#if businessProfileErrors.billing_email}
                    <p class="form-error">{businessProfileErrors.billing_email}</p>
                  {/if}
                </div>
              </div>
            </div>

<div class="bg-purple-50 p-4 rounded-lg">
              <h3 class="font-medium text-gray-900 mb-4">🌐 Web y Horarios</h3>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label class="form-label">Página Web</label>
                  <input
                    type="url"
                    class="form-input"
                    bind:value={businessProfile.website}
                    placeholder="https://www.empresa.com"
                  />
                </div>

<div>
                  <label class="form-label">Horario de Atención</label>
                  <input
                    type="text"
                    class="form-input"
                    bind:value={businessProfile.business_hours}
                    placeholder="Lun-Vie 9:00-18:00"
                  />
                </div>

<div class="md:col-span-2">
                  <label class="form-label">Medio de Publicidad</label>
                  <input
                    type="text"
                    class="form-input"
                    bind:value={businessProfile.advertising_medium}
                    placeholder="¿Cómo nos conoció?"
                  />
                </div>
              </div>
            </div>

<div class="flex justify-end pt-6">
              <button
                type="submit"
                class="btn-primary px-8 py-2"
                disabled={isSavingBusinessProfile}
              >
                {#if isSavingBusinessProfile}
                  <div class="flex items-center space-x-2">
                    <div class="spinner w-4 h-4" />
                    <span>Guardando...</span>
                  </div>
                {:else}
                  💾 Guardar Información de Contacto
                {/if}
              </button>
            </div>
          </form>
        </div>
      </div>
    {/if}

{#if activeTab === 'security'}
      <div class="card">
        <div class="card-header">
          <h2 class="text-xl font-semibold text-gray-900">Configuración de Seguridad</h2>
          <p class="text-gray-600 mt-1">Gestiona tu contraseña y configuración de seguridad</p>
        </div>

<div class="card-content space-y-6">
          
          <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
            <div>
              <h3 class="font-medium text-gray-900">Autenticación de dos factores (2FA)</h3>
              <p class="text-sm text-gray-600">
                {$auth.user?.is_two_factor_enabled
                  ? 'La autenticación de dos factores está habilitada'
                  : 'Mejora la seguridad habilitando 2FA'}
              </p>
            </div>
            <div>
              {#if $auth.user?.is_two_factor_enabled}
                <span
                  class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800"
                >
                  <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M5 13l4 4L19 7"
                    />
                  </svg>
                  Habilitado
                </span>
              {:else}
                <span
                  class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800"
                >
                  <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M6 18L18 6M6 6l12 12"
                    />
                  </svg>
                  Deshabilitado
                </span>
              {/if}
            </div>
          </div>

<form on:submit|preventDefault={handlePasswordChange} class="space-y-6">
            <h3 class="text-lg font-medium text-gray-900">Cambiar Contraseña</h3>

<div>
              <label for="current-password" class="form-label">
                Contraseña Actual <span class="text-red-500">*</span>
              </label>
              <input
                id="current-password"
                type="password"
                class="form-input {passwordErrors.currentPassword ? 'border-red-300' : ''}"
                bind:value={currentPassword}
                disabled={isChangingPassword}
              />
              {#if passwordErrors.currentPassword}
                <p class="form-error">{passwordErrors.currentPassword}</p>
              {/if}
            </div>

<div>
              <label for="new-password" class="form-label">
                Nueva Contraseña <span class="text-red-500">*</span>
              </label>
              <input
                id="new-password"
                type="password"
                class="form-input {passwordErrors.newPassword ? 'border-red-300' : ''}"
                bind:value={newPassword}
                disabled={isChangingPassword}
              />
              {#if passwordErrors.newPassword}
                <p class="form-error">{passwordErrors.newPassword}</p>
              {/if}
            </div>

<div>
              <label for="confirm-password" class="form-label">
                Confirmar Nueva Contraseña <span class="text-red-500">*</span>
              </label>
              <input
                id="confirm-password"
                type="password"
                class="form-input {passwordErrors.confirmPassword ? 'border-red-300' : ''}"
                bind:value={confirmPassword}
                disabled={isChangingPassword}
              />
              {#if passwordErrors.confirmPassword}
                <p class="form-error">{passwordErrors.confirmPassword}</p>
              {/if}
            </div>

<div class="flex justify-end">
              <button type="submit" class="btn-primary px-6 py-2" disabled={isChangingPassword}>
                {#if isChangingPassword}
                  <div class="flex items-center space-x-2">
                    <div class="spinner w-4 h-4" />
                    <span>Cambiando...</span>
                  </div>
                {:else}
                  Cambiar Contraseña
                {/if}
              </button>
            </div>
          </form>
        </div>
      </div>
    {/if}

{#if activeTab === 'account'}
      <div class="card">
        <div class="card-header">
          <h2 class="text-xl font-semibold text-gray-900">Información de la Cuenta</h2>
          <p class="text-gray-600 mt-1">Detalles sobre tu cuenta y organización</p>
        </div>

<div class="card-content">
          <dl class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <dt class="text-sm font-medium text-gray-500">ID de Usuario</dt>
              <dd class="text-sm text-gray-900 font-mono mt-1">
                #{$auth.user?.id.substring(0, 8)}
              </dd>
            </div>

<div>
              <dt class="text-sm font-medium text-gray-500">Rol</dt>
              <dd class="text-sm text-gray-900 mt-1">
                {$auth.user?.role === 'CLIENT_ADMIN'
                  ? 'Administrador de Cliente'
                  : 'Usuario de Cliente'}
              </dd>
            </div>

<div>
              <dt class="text-sm font-medium text-gray-500">Estado de la Cuenta</dt>
              <dd class="text-sm mt-1">
                {#if $auth.user?.is_active}
                  <span
                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"
                  >
                    Activa
                  </span>
                {:else}
                  <span
                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800"
                  >
                    Inactiva
                  </span>
                {/if}
              </dd>
            </div>

<div>
              <dt class="text-sm font-medium text-gray-500">Miembro desde</dt>
              <dd class="text-sm text-gray-900 mt-1">
                {$auth.user?.created_at
                  ? new Date($auth.user.created_at).toLocaleDateString('es-ES', {
                      day: '2-digit',
                      month: 'long',
                      year: 'numeric'
                    })
                  : 'N/A'}
              </dd>
            </div>
          </dl>
        </div>
      </div>
    {/if}
  </div>
</div>

@keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

.form-checkbox {
    @apply rounded border-gray-300 text-primary-600 focus:ring-primary-500 focus:border-primary-500;
  }
</style>