@extends('layouts.auth_login')

@section('content')

<style>
    /* ===================================================================
       UI/UX MARKETPLUS - SISTEMA DE DISEÑO
       =================================================================== */
    :root {
        --mp-cyan: #00a2ff;      /* Color de "plus" */
        --mp-cyan-hover: #008ce6;
        --mp-orange: #ff7900;    /* Color de "Market" */
        --mp-dark: #1e293b;
        --mp-muted: #64748b;
        --mp-bg-soft: #f0f9ff;   /* Fondo celeste ultra claro */
    }

    /* Fondo general */
    .auth-shell {
        background: radial-gradient(circle at top left, #ffffff 0%, var(--mp-bg-soft) 100%);
        min-height: 100vh;
        font-family: 'Inter', system-ui, sans-serif;
    }

    /* Ocultar shapes por defecto de la plantilla anterior */
    .bg-shapes { display: none !important; }

    /* ============================================
       COLUMNA IZQUIERDA (CONTENIDO MARKETPLUS)
       ============================================ */
    .auth-aside {
        background: transparent !important;
        display: flex;
        align-items: center;
        padding: 3rem 4rem;
    }
    
    .mp-welcome-title {
        color: var(--mp-dark);
        font-weight: 800;
        font-size: 3.2rem;
        line-height: 1.1;
        margin-bottom: 1.5rem;
    }
    .mp-welcome-title span {
        color: var(--mp-cyan);
    }

    .mp-paragraph {
        color: #475569;
        font-size: 1.05rem;
        line-height: 1.6;
        margin-bottom: 2rem;
        max-width: 95%;
    }

    /* Caja de los 3 pasos */
    .mp-steps-box {
        background: #ffffff;
        border-left: 4px solid var(--mp-orange);
        padding: 1.5rem;
        border-radius: 0 16px 16px 0;
        box-shadow: 0 10px 25px rgba(0, 162, 255, 0.05);
        margin-bottom: 2.5rem;
        max-width: 95%;
    }
    
    .mp-steps-title {
        color: var(--mp-dark);
        font-weight: 700;
        font-size: 0.95rem;
        margin-bottom: 1rem;
        line-height: 1.5;
    }

    .mp-steps-list {
        list-style: none;
        padding: 0;
        margin: 0 0 1rem 0;
    }
    
    .mp-steps-list li {
        display: flex;
        align-items: center;
        margin-bottom: 0.8rem;
        color: #475569;
        font-weight: 500;
        font-size: 0.95rem;
    }
    
    .step-num {
        background-color: rgba(255, 121, 0, 0.1);
        color: var(--mp-orange);
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-weight: 800;
        margin-right: 12px;
        font-size: 0.85rem;
    }

    .mp-steps-footer {
        color: var(--mp-cyan);
        font-weight: 800;
        font-size: 1.1rem;
        margin: 0;
    }

    .mp-footer-quote {
        color: var(--mp-orange);
        font-style: italic;
        font-weight: 800;
        font-size: 1.5rem;
    }

    /* ============================================
       COLUMNA DERECHA (FORMULARIO)
       ============================================ */
    .auth-main {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem;
    }

    .auth-card {
        background: #ffffff;
        border-radius: 20px;
        padding: 3rem 2.5rem;
        width: 100%;
        max-width: 450px;
        box-shadow: 0 20px 40px rgba(0, 162, 255, 0.08);
        border: 1px solid rgba(255,255,255,0.8);
    }

    .auth-card__head .form-title {
        color: var(--mp-dark);
        font-weight: 800;
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }
    .auth-card__head .form-sub {
        color: var(--mp-muted);
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }

    /* Evitar doble borde en los inputs de la plantilla base */
    .field__input {
        position: relative;
        margin-bottom: 1.5rem;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .field__label {
        font-weight: 700;
        color: var(--mp-dark);
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
        display: block;
    }
    
    .field__input input {
        width: 100%;
        border-radius: 10px !important;
        border: 1px solid #cbd5e1 !important;
        padding: 12px 15px !important;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        background-color: #ffffff !important;
        outline: none !important;
        box-shadow: none !important;
        margin: 0 !important;
    }
    .field__input input:focus {
        border-color: var(--mp-cyan) !important;
        box-shadow: 0 0 0 4px rgba(0, 162, 255, 0.15) !important;
    }

    .field__row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }
    
    .link-soft {
        color: var(--mp-cyan);
        font-size: 0.85rem;
        text-decoration: none;
        font-weight: 600;
        transition: color 0.2s;
    }
    .link-soft:hover {
        color: var(--mp-orange);
    }

    .field__toggle {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #94a3b8;
        cursor: pointer;
        z-index: 10;
    }

    /* Botón corporativo Marketplus */
    .btn-primary-cta {
        background-color: var(--mp-cyan) !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 10px !important;
        width: 100%;
        padding: 14px !important;
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        transition: all 0.3s ease !important;
        cursor: pointer;
    }
    .btn-primary-cta:hover {
        background-color: var(--mp-cyan-hover) !important;
        box-shadow: 0 8px 20px rgba(0, 162, 255, 0.25) !important;
        transform: translateY(-2px);
    }

</style>

<main class="auth-shell">
  <div class="container-fluid g-0">
    <div class="row g-0 min-vh-100">

      <!-- ============================================
           IZQUIERDA: DISEÑO MARKETPLUS (solo lg+)
           ============================================ -->
      <aside class="col-lg-7 col-xl-7 d-none d-lg-flex auth-aside">
        <div class="auth-aside__inner w-100">

          <header class="mb-4">
            <a class="brand" aria-label="inicio">
                <img src="{{ asset('fondo/5.jpg') }}" style="height: 5rem; object-fit: contain;">
            </a>
          </header>

          <div>
            <h1 class="mp-welcome-title">
              Oficina <span>virtual</span>
            </h1>
            
            <p class="mp-paragraph">
              Te brindamos una plataforma donde podrás tener el control en tiempo real de tu negocio: Afiliados, rangos, comisiones, liquidación de pagos, tienda, material de apoyo y ¡muchas más herramientas para que puedas desarrollar tu negocio con éxito!
            </p>
            
            <div class="mp-steps-box">
                <p class="mp-steps-title">
                    Somos la primer tienda virtual monetizada de Colombia, con nosotros podrás convertir tus gastos en ingresos con tres simples pasos:
                </p>
                <ul class="mp-steps-list">
                    <li><span class="step-num">1</span> Afíliate a la tienda</li>
                    <li><span class="step-num">2</span> Compra cualquier producto</li>
                    <li><span class="step-num">3</span> Recomienda la tienda a tus conocidos</li>
                </ul>
                <p class="mp-steps-footer">¡Así de fácil podrás ganar!</p>
            </div>
            
            <div class="mp-footer-quote">
                Marketplus, compra, recomienda y gana!
            </div>
          </div>

        </div>
      </aside>

      <!-- ============================================
           DERECHA: FORMULARIO FLOTANTE
           ============================================ -->
      <section class="col-12 col-lg-5 col-xl-5 auth-main">
        <div class="auth-main__inner w-100 d-flex justify-content-center flex-column align-items-center">

          <!-- Marca solo visible en móvil/tablet -->
          <a href="#" class="brand brand--mobile d-lg-none mb-4" aria-label="Inicio">
            <img src="{{ asset('fondo/5.jpg') }}" alt="Marketplus" style="height: 4rem;">
          </a>

          <article class="auth-card">
            <header class="auth-card__head">
              <h2 class="form-title">Acceder al panel</h2>
              <p class="form-sub">Ingresa tus datos de acceso corporativo.</p>
            </header>

            <form class="login-form" novalidate autocomplete="on" method="POST" action="{{ route('login') }}">
              {{ csrf_field() }}

              <div class="field">
                <label for="email" class="field__label">Correo electrónico</label>
                <div class="field__input">
                  <input type="email" id="email" name="user_email" class="correo"
                         autocomplete="email"
                         placeholder="ejemplo@correo.com" required value="{{ old('user_email') }}">
                </div>
              </div>

              <div class="field">
                <div class="field__row">
                  <label for="password" class="field__label mb-0">Contraseña</label>
                    <a href="#" class="link-soft" data-bs-toggle="modal" data-bs-target="#modal-reset">
                      ¿Olvidaste tu contraseña?
                    </a>
                </div>
                <div class="field__input">
                  <input type="password" id="password" name="password" class="password"
                         autocomplete="current-password"
                         placeholder="Ingresa tu contraseña" required>
                  <button type="button" class="field__toggle"
                          data-toggle-password
                          aria-label="Mostrar u ocultar contraseña">
                    <i class="bi bi-eye" aria-hidden="true"></i>
                  </button>
                </div>
              </div>

              <button type="submit" class="btn-primary-cta mt-3">
                <span>Ingresar a mi oficina</span>
                <i class="bi bi-arrow-right" aria-hidden="true"></i>
              </button>

            </form>
          </article>

        </div>
      </section>

    </div>
  </div>

</main>


{{-- ============================================================
     Modal de recuperación · Bootstrap 5 nativo (Estilos Marketplus)
     ============================================================ --}}
<div class="modal fade modal-reset" id="modal-reset"
     tabindex="-1" aria-labelledby="resetTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content" style="border-radius: 20px; border: none; box-shadow: 0 15px 40px rgba(0,0,0,0.1);">

      <div class="modal-header border-bottom-0 pb-0">
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
      </div>

      <div class="modal-body p-4 pt-0">

        <div class="text-center mb-3">
          <i class="bi bi-envelope-paper" style="font-size: 3.5rem; color: var(--mp-orange);"></i>
        </div>

        <h3 class="text-center mb-2" id="resetTitle" style="color: var(--mp-dark); font-weight: 800;">
          Restablecer contraseña
        </h3>
        <p class="text-center text-muted mb-4" style="font-size: 0.95rem;">
          Te enviaremos un enlace seguro al correo asociado a tu cuenta. El enlace caduca en 30 minutos.
        </p>
        
        <form class="reset-form" action="{{route('autenticacion.clave')}}" method="post">
          {{ csrf_field() }}

          <div class="field mb-4">
            <label for="reset-email" class="field__label">Correo electrónico</label>
            <div class="field__input m-0">
              <input type="email" id="reset-email" name="email"
                     autocomplete="email"
                     placeholder="ejemplo@correo.com" required
                     value="{{ old('email') }}">
            </div>
          </div>

          <button type="submit" class="btn-primary-cta mb-3">
            <span>Enviar enlace de recuperación</span>
            <i class="bi bi-arrow-right" aria-hidden="true"></i>
          </button>

          <div class="text-center">
              <button type="button" class="btn btn-link text-muted" data-bs-dismiss="modal" style="text-decoration: none; font-size: 0.9rem; font-weight: 600;">
                <i class="bi bi-arrow-left me-1" aria-hidden="true"></i>
                Volver al inicio de sesión
              </button>
          </div>
        </form>

      </div>
    </div>
  </div>
</div>

@endsection