@php
  use App\Models\Endpoint;

  $legendaStati = [
    Endpoint::NON_REGISTRATO => 'Hai generato il product key da FEST, ma FestAgent su quel PC non ha ancora finito la registrazione.',
    Endpoint::REGISTRATO => 'Il PC si è collegato con il codice. Manca ancora la configurazione (nome postazione, stampanti, avvio worker).',
    Endpoint::ATTIVO => 'Tutto configurato: FestAgent è in esecuzione e le stampe da FEST possono arrivare alle stampanti.',
    Endpoint::DISABILITATO => 'Collegamento sospeso da chi gestisce FEST. Le stampe non partono finché non viene riattivato.',
    Endpoint::ELIMINATO => 'Postazione non più usata. Non compare tra quelle utilizzabili per le stampe.',
  ];
@endphp

<style>
  .endpoint-istruzioni .istruzioni-intro {
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(67, 89, 113, 0.06);
  }
  .endpoint-istruzioni .istruzioni-box {
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
  }
  .endpoint-istruzioni .istruzioni-box--attenzione {
    background: #fff;
    border: 1px solid rgba(var(--bs-danger-rgb), 0.35);
    border-radius: 0.375rem;
  }
  .endpoint-istruzioni .istruzioni-passo-num {
    width: 2rem;
    height: 2rem;
    font-size: 0.85rem;
    font-weight: 600;
  }
  .endpoint-istruzioni .accordion-item {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem !important;
    overflow: hidden;
    margin-bottom: 0.5rem;
  }
  .endpoint-istruzioni .accordion-button {
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.85rem 1rem;
    box-shadow: none;
  }
  .endpoint-istruzioni .accordion-button:not(.collapsed) {
    background: rgba(var(--bs-primary-rgb), 0.06);
    color: var(--bs-primary);
  }
  .endpoint-istruzioni .accordion-button--danger:not(.collapsed) {
    background: rgba(var(--bs-danger-rgb), 0.06);
    color: var(--bs-danger);
  }
  .endpoint-istruzioni .accordion-body {
    padding: 0.75rem 1rem 1rem;
    background: #fafbfc;
  }
</style>

<div class="endpoint-istruzioni">

  <div class="istruzioni-intro d-flex align-items-start gap-3 p-4 mb-3">
    <div class="avatar avatar-md flex-shrink-0">
      <span class="avatar-initial rounded bg-label-primary">
        <i class="bx bx-printer bx-sm"></i>
      </span>
    </div>
    <div>
      <h6 class="mb-2 text-primary">Cos’è FestAgent?</h6>
      <p class="mb-2 text-body">
        È il programma che tieni acceso sul PC dove sono collegate le stampanti.
        Quando ordini o stampi da FEST, <strong>è lui che manda il lavoro alle stampanti giuste</strong>.
      </p>
      <p class="mb-0 text-muted" style="font-size: 0.9rem;">
        Lo installi su <strong>Windows</strong> o <strong>Linux</strong>, una volta per ogni postazione (cassa, cucina, bar…).
      </p>
    </div>
  </div>

  <p class="small text-muted mb-3">
    <i class="bx bx-chevron-down me-1"></i> Apri la sezione che ti serve:
  </p>

  <div class="accordion" id="accordionIstruzioniFestAgent">

    {{-- 1. Prima di iniziare --}}
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button
          class="accordion-button"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#istruzioniPrima"
          aria-expanded="true"
        >
          <i class="bx bx-list-check text-primary me-2"></i>
          Prima di iniziare
        </button>
      </h2>
      <div id="istruzioniPrima" class="accordion-collapse collapse show" data-bs-parent="#accordionIstruzioniFestAgent">
        <div class="accordion-body">
          <div class="d-flex flex-column gap-2">
            <div class="istruzioni-box d-flex align-items-start gap-3 p-3">
              <span class="avatar avatar-sm flex-shrink-0 mt-1">
                <span class="avatar-initial rounded bg-label-success"><i class="bx bx-printer"></i></span>
              </span>
              <div>
                <p class="mb-1 fw-medium text-body">Stampanti pronte sul PC</p>
                <p class="mb-0 text-body" style="font-size: 0.925rem;">
                  Sul computer che userai per FestAgent le stampanti devono essere già installate e funzionanti.
                  Fai una <strong>stampa di prova</strong> da Windows o Linux prima di aprire il programma.
                </p>
              </div>
            </div>
            <div class="istruzioni-box d-flex align-items-start gap-3 p-3">
              <span class="avatar avatar-sm flex-shrink-0 mt-1">
                <span class="avatar-initial rounded bg-label-warning"><i class="bx bx-key"></i></span>
              </span>
              <div>
                <p class="mb-1 fw-medium text-body">Codice da FEST (product key)</p>
                <p class="mb-0 text-body" style="font-size: 0.925rem;">
                  Su questa pagina clicca <strong>Richiedi nuovo product key</strong>, copia il codice con l’icona
                  <i class="bx bx-copy text-primary"></i> e tienilo pronto per incollarlo in FestAgent.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- 2. Passo per passo --}}
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button
          class="accordion-button collapsed"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#istruzioniPassi"
        >
          <i class="bx bx-walk text-primary me-2"></i>
          Cosa fare, passo per passo
        </button>
      </h2>
      <div id="istruzioniPassi" class="accordion-collapse collapse" data-bs-parent="#accordionIstruzioniFestAgent">
        <div class="accordion-body">
          <div class="d-flex flex-column gap-2">
            <div class="istruzioni-box d-flex align-items-start gap-3 p-3">
              <span class="istruzioni-passo-num badge rounded-pill bg-primary d-flex align-items-center justify-content-center flex-shrink-0 mt-1">1</span>
              <div>
                <p class="mb-1 fw-medium text-body">Apri FestAgent</p>
                <p class="mb-0 text-body" style="font-size: 0.925rem;">
                  Installa il programma sul PC delle stampanti (se non l’hai già fatto) e avvialo.
                </p>
              </div>
            </div>
            <div class="istruzioni-box d-flex align-items-start gap-3 p-3">
              <span class="istruzioni-passo-num badge rounded-pill bg-primary d-flex align-items-center justify-content-center flex-shrink-0 mt-1">2</span>
              <div>
                <p class="mb-1 fw-medium text-body">Incolla il product key</p>
                <p class="mb-0 text-body" style="font-size: 0.925rem;">
                  Scrivi o incolla il codice che hai copiato da FEST e conferma.
                </p>
              </div>
            </div>
            <div class="istruzioni-box d-flex align-items-start gap-3 p-3">
              <span class="istruzioni-passo-num badge rounded-pill bg-primary d-flex align-items-center justify-content-center flex-shrink-0 mt-1">3</span>
              <div>
                <p class="mb-1 fw-medium text-body">Dai un nome alla postazione</p>
                <p class="mb-0 text-body" style="font-size: 0.925rem;">
                  Se il codice è corretto, FestAgent ti chiede <strong>nome e dati</strong> per riconoscere questo PC (es. «Cassa 1», «Cucina»).
                </p>
              </div>
            </div>
            <div class="istruzioni-box d-flex align-items-start gap-3 p-3">
              <span class="istruzioni-passo-num badge rounded-pill bg-primary d-flex align-items-center justify-content-center flex-shrink-0 mt-1">4</span>
              <div>
                <p class="mb-1 fw-medium text-body">Scegli le stampanti</p>
                <p class="mb-0 text-body" style="font-size: 0.925rem;">
                  Spunta quelle che il server deve usare. Puoi aggiungere un’<strong>etichetta</strong> per ritrovarle subito (es. «Bar»).
                </p>
              </div>
            </div>
            <div class="istruzioni-box d-flex align-items-start gap-3 p-3">
              <span class="istruzioni-passo-num badge rounded-pill bg-primary d-flex align-items-center justify-content-center flex-shrink-0 mt-1">5</span>
              <div>
                <p class="mb-1 fw-medium text-body">Registra e avvia</p>
                <p class="mb-0 text-body" style="font-size: 0.925rem;">
                  Clicca <strong>Registra stampanti</strong>, poi <strong>Avvia worker</strong>.
                </p>
              </div>
            </div>
            <div class="istruzioni-box d-flex align-items-start gap-3 p-3 mb-0">
              <span class="avatar avatar-sm flex-shrink-0 mt-1">
                <span class="avatar-initial rounded bg-label-primary"><i class="bx bx-check-circle"></i></span>
              </span>
              <div>
                <p class="mb-1 fw-medium text-body">Controllo in FEST</p>
                <p class="mb-0 text-body" style="font-size: 0.925rem;">
                  Torna su questa pagina Endpoint: verifica stampanti e stato attivo, poi fai una <strong>stampa di prova</strong>.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- 3. Legenda stati --}}
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button
          class="accordion-button collapsed"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#istruzioniStati"
        >
          <i class="bx bx-info-circle text-primary me-2"></i>
          Legenda stati endpoint
        </button>
      </h2>
      <div id="istruzioniStati" class="accordion-collapse collapse" data-bs-parent="#accordionIstruzioniFestAgent">
        <div class="accordion-body">
          <p class="small text-muted mb-3">
            Nella tabella Endpoint la colonna <strong>Status</strong> indica a che punto è ogni collegamento:
          </p>
          <div class="d-flex flex-column gap-2">
            @foreach(Endpoint::getStati() as $chiave => $stato)
              @if(isset($legendaStati[$chiave]))
                <div class="istruzioni-box d-flex align-items-start gap-3 p-3">
                  <span class="badge {{ $stato['class'] }} flex-shrink-0 mt-1">
                    <i class="{{ $stato['icon'] }}"></i>
                    {{ $stato['label'] }}
                  </span>
                  <p class="mb-0 text-body" style="font-size: 0.925rem;">
                    {{ $legendaStati[$chiave] }}
                  </p>
                </div>
              @endif
            @endforeach
          </div>
          <p class="small text-muted mb-0 mt-3">
            <i class="bx bx-bulb me-1"></i>
            Obiettivo: portare ogni postazione allo stato <span class="badge bg-label-success text-success">Attivo</span>.
          </p>
        </div>
      </div>
    </div>

    {{-- 4. Cosa non fare --}}
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button
          class="accordion-button accordion-button--danger collapsed"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#istruzioniAttenzione"
        >
          <i class="bx bx-error-circle text-danger me-2"></i>
          Cosa non fare
        </button>
      </h2>
      <div id="istruzioniAttenzione" class="accordion-collapse collapse" data-bs-parent="#accordionIstruzioniFestAgent">
        <div class="accordion-body">
          <div class="istruzioni-box--attenzione p-3 mb-0">
            <div class="d-flex align-items-start gap-3 mb-3">
              <span class="avatar avatar-sm flex-shrink-0">
                <span class="avatar-initial rounded bg-label-danger"><i class="bx bx-power-off"></i></span>
              </span>
              <div>
                <p class="mb-2 fw-medium text-body">Sul PC dove gira FestAgent</p>
                <ul class="mb-0 ps-3 text-body" style="font-size: 0.925rem;">
                  <li class="mb-2">non spegnerlo;</li>
                  <li class="mb-2">non metterlo in sospensione o in standby;</li>
                  <li>non staccarlo dalla corrente e non togliere la connessione di rete.</li>
                </ul>
              </div>
            </div>
            <div class="d-flex align-items-center gap-2 pt-2 border-top" style="border-color: rgba(var(--bs-danger-rgb), 0.2) !important;">
              <i class="bx bx-printer text-danger"></i>
              <p class="mb-0 text-danger fw-medium" style="font-size: 0.925rem;">
                Se lo fai, non stampa nulla.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

</div>
