@extends('layouts.master')
@section('title')
    @lang('translation.crm')
@endsection
@section('content')
@component('components.breadcrumb')
    @slot('li_1')Usuario @endslot
    @slot('title')Ayuda @endslot
@endcomponent
    
  
<!-- Encabezado principal -->
  <div class="help-header">
    <div class="container">
      <div class="d-flex flex-wrap align-items-center justify-content-between">
        <div>
          <h1 class="display-6 fw-semibold"><i class="bi bi-question-circle-fill me-2"></i>Centro de ayuda</h1>
          <p class="lead mb-0">Todo lo que necesitas para gestionar clientes, productos, cotizaciones y facturación.</p>
        </div>
        <div class="mt-3 mt-sm-0">
          <div class="top-bar-simulation">
            <i class="bi bi-plus-circle"></i> <strong>Más timbres</strong> 
            <span class="badge bg-secondary rounded-pill">Top bar</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container mb-5">
    <!-- Guía rápida en cards -->
    <div class="row g-4">
      
      <!-- Tarjeta 1: Importaciones masivas -->
      <div class="col-md-6 col-lg-4">
        <div class="card h-100 shadow-sm border-0 card-hover">
          <div class="card-body">
            <div class="d-flex align-items-center mb-3">
              <div class="bg-primary bg-opacity-10 p-3 rounded-circle me-3">
                <i class="bi bi-upload fs-3 text-primary"></i>
              </div>
              <h5 class="card-title fw-bold mb-0">Altas masivas</h5>
            </div>
            <p class="card-text">Da de alta <strong>clientes, productos o servicios</strong> de forma rápida y masiva.</p>
            <hr>
            <div class="d-flex align-items-center text-dark">
              <i class="bi bi-menu-button-wide fs-5 me-2 text-secondary"></i>
              <span><strong>Menú lateral →</strong> <code class="bg-light p-1 rounded">Importaciones</code></span>
            </div>
            <small class="text-muted mt-2 d-block">Sigue el formato del archivo requerido y el sistema procesará todo automáticamente.</small>
          </div>
        </div>
      </div>

      <!-- Tarjeta 2: Cotizar (Catálogos) -->
      <div class="col-md-6 col-lg-4">
        <div class="card h-100 shadow-sm border-0 card-hover">
          <div class="card-body">
            <div class="d-flex align-items-center mb-3">
              <div class="bg-success bg-opacity-10 p-3 rounded-circle me-3">
                <i class="bi bi-tags fs-3 text-success"></i>
              </div>
              <h5 class="card-title fw-bold mb-0">Cotizar</h5>
            </div>
            <p class="card-text">Arma presupuestos y revisa precios antes de facturar.</p>
            <hr>
            <div class="d-flex align-items-center text-dark">
              <i class="bi bi-menu-button-wide fs-5 me-2 text-secondary"></i>
              <span><strong>Menú lateral →</strong> <code class="bg-light p-1 rounded">Catálogos</code></span>
            </div>
            <small class="text-muted mt-2 d-block">Consulta productos/servicios, selecciona cantidades y genera tu cotización.</small>
          </div>
        </div>
      </div>

      <!-- Tarjeta 3: Facturación + timbres -->
      <div class="col-md-6 col-lg-4">
        <div class="card h-100 shadow-sm border-0 card-hover">
          <div class="card-body">
            <div class="d-flex align-items-center mb-3">
              <div class="bg-danger bg-opacity-10 p-3 rounded-circle me-3">
                <i class="bi bi-receipt fs-3 text-danger"></i>
              </div>
              <h5 class="card-title fw-bold mb-0">Facturar</h5>
            </div>
            <p class="card-text">Requisito indispensable: tener <strong class="text-warning">timbres fiscales disponibles</strong>.</p>
            <hr>
            <div class="alert alert-warning py-2 px-3 mb-2 d-flex align-items-center" role="alert">
              <i class="bi bi-exclamation-triangle-fill me-2"></i>
              <span>Sin timbres <strong>no podrás facturar</strong>.</span>
            </div>
            <div class="d-flex flex-wrap align-items-center gap-2 mt-2">
              <span class="badge bg-light text-dark p-2"><i class="bi bi-plus-circle"></i> "Más timbres"</span>
              <span class="text-muted">→ en la <strong>barra superior (top bar)</strong></span>
            </div>
            <small class="text-muted mt-2 d-block">Compra timbres cuando sea necesario y después genera tus comprobantes normalmente.</small>
          </div>
        </div>
      </div>
    </div>

    <!-- Recordatorio visual y paso a paso adicional -->
    <div class="row mt-5">
      <div class="col-12">
        <div class="card border-0 shadow-sm bg-white">
          <div class="card-body">
            <h5 class="card-title fw-semibold"><i class="bi bi-check2-circle text-primary me-2"></i>Pasos rápidos para facturar sin contratiempos</h5>
            <ol class="list-group list-group-numbered mt-3">
              <li class="list-group-item bg-transparent border-0 ps-0">Verifica tu saldo de timbres en el panel superior.</li>
              <li class="list-group-item bg-transparent border-0 ps-0">Si no tienes suficientes, haz clic en <strong>“Más timbres”</strong> (top bar) y completa la compra.</li>
              <li class="list-group-item bg-transparent border-0 ps-0">Una vez con timbres disponibles, ve a la sección <strong>Facturación</strong> y emite tus CFDIs.</li>
              <li class="list-group-item bg-transparent border-0 ps-0">Recuerda que puedes dar de alta clientes/productos vía <strong>Importaciones</strong> y cotizar desde <strong>Catálogos</strong>.</li>
            </ol>
            <div class="mt-4 p-3 bg-light rounded">
              <i class="bi bi-info-circle-fill text-info"></i> <strong>¿Necesitas más ayuda?</strong> Contacta a nuestro soporte técnico desde el chat en vivo o envía un correo a <a href="mailto:soporte@tuempresa.com">soporte@tuempresa.com</a>.
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Nota adicional: ubicación de elementos en la interfaz -->
    <div class="row mt-4">
      <div class="col-md-6 mx-auto">
        <div class="text-center text-muted small border-top pt-3">
          <i class="bi bi-layout-sidebar"></i> Menú lateral | 
          <i class="bi bi-bar-chart-steps"></i> Top bar con "Más timbres" | 
          <i class="bi bi-file-spreadsheet"></i> Importaciones masivas
        </div>
      </div>
    </div>
  </div>

  <footer class="py-3 mt-2">
    <div class="container text-center text-muted small">
      <i class="bi bi-shield-check"></i> Sistema de gestión empresarial – Ayuda interactiva
    </div>
  </footer>
@endsection
@section('script')
    <script src="{{ URL::asset('build/js/app.js') }}"></script>
@endsection