<?php
/*** This text should be at the top of all code files ***
 * vejledning.php – used for the QR App Lite user guide
 * Made by: Morten Pilekær
 * Rev. 0.4.0 Owner: Morten Pilekær
 * Location: /qr-app-lite/vejledning.php
 ***/
declare(strict_types=1);

require_once __DIR__ . '/app-config.php';

$pageTitle = 'QR App Lite – Vejledning';
$activePage = 'vejledning';
$appVersion = QR_APP_VERSION;
require __DIR__ . '/app-header.php';
?>

  <main class="container app-container py-4">
    <div class="row justify-content-center">
      <div class="col-12 col-xl-10">
        <div class="app-page-header d-flex flex-column flex-md-row justify-content-between gap-3 align-items-md-end mb-4">
          <div>
            <h1 class="display-6 mb-1">Vejledning</h1>
            <p class="text-secondary mb-0">Brugervejledning til QR App Lite.</p>
          </div>
          <span class="badge text-bg-primary align-self-start align-self-md-end"><?= appE(QR_APP_VERSION) ?></span>
        </div>

        <section class="card shadow-sm mb-4">
          <div class="card-header bg-body-tertiary">
            <h2 class="h5 mb-0">Formål</h2>
          </div>
          <div class="card-body">
            <p class="mb-0">
              QR App Lite er et lokalt værktøj til at generere QR-koder som PNG-filer og scanne QR-koder via USB-webcam eller indbygget kamera. Programmet er beregnet til XAMPP og kører uden eksterne CDN-afhængigheder.
            </p>
          </div>
        </section>

        <div class="row g-4 mb-4">
          <div class="col-12 col-lg-6">
            <section class="card shadow-sm h-100">
              <div class="card-header bg-body-tertiary">
                <h2 class="h5 mb-0">Generator</h2>
              </div>
              <div class="card-body">
                <ol class="mb-3">
                  <li>Åbn <a href="index.php">Generator</a>.</li>
                  <li>Indsæt tekst, URL, serienummer eller anden værdi.</li>
                  <li>Vælg størrelse, margin og fejlkorrigering.</li>
                  <li>Klik på <strong>Generér og gem lokalt</strong>.</li>
                  <li>Kontrollér forhåndsvisningen og download PNG-filen.</li>
                </ol>
                <a class="btn btn-primary" href="index.php">Åbn generator</a>
              </div>
            </section>
          </div>

          <div class="col-12 col-lg-6">
            <section class="card shadow-sm h-100">
              <div class="card-header bg-body-tertiary">
                <h2 class="h5 mb-0">Scanner</h2>
              </div>
              <div class="card-body">
                <ol class="mb-3">
                  <li>Tilslut USB-webcam, hvis du ikke bruger indbygget kamera.</li>
                  <li>Åbn <a href="qr-scanner.php">Scanner</a>.</li>
                  <li>Giv Chrome/Edge adgang til kameraet.</li>
                  <li>Vælg kamera og klik på <strong>Start scanner</strong>.</li>
                  <li>Hold QR-koden roligt foran kameraet.</li>
                  <li>Kopiér resultatet, åbn det som URL eller genbrug det fra lokal historik.</li>
                </ol>
                <a class="btn btn-primary" href="qr-scanner.php">Åbn scanner</a>
              </div>
            </section>
          </div>
        </div>

        <section class="card shadow-sm mb-4">
          <div class="card-header bg-body-tertiary">
            <h2 class="h5 mb-0">GO 4 robusthed</h2>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-striped align-middle mb-0">
                <thead>
                  <tr>
                    <th>Område</th>
                    <th>Funktion</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>QR-filer</td>
                    <td>Genererede PNG-filer gemmes nu i <code><?= appE(QR_OUTPUT_DIR_NAME) ?>/</code> i stedet for direkte i projektroden.</td>
                  </tr>
                  <tr>
                    <td>Auto-oprydning</td>
                    <td>Ved brug af generatoren fjernes gamle QR-filer efter <?= (int)QR_OUTPUT_MAX_AGE_DAYS ?> dage, og mappen begrænses til <?= (int)QR_OUTPUT_MAX_FILES ?> filer.</td>
                  </tr>
                  <tr>
                    <td>Inputgrænse</td>
                    <td>Generatoren accepterer maks. <?= (int)QR_INPUT_MAX_LENGTH ?> tegn pr. QR-kode.</td>
                  </tr>
                  <tr>
                    <td>Scanner-historik</td>
                    <td>De seneste <?= (int)QR_SCAN_HISTORY_MAX_ITEMS ?> unikke scanninger gemmes lokalt i browserens <code>localStorage</code>.</td>
                  </tr>
                  <tr>
                    <td>Konfiguration</td>
                    <td>Fælles værdier ligger i <code>app-config.php</code>.</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </section>

        <section class="card shadow-sm mb-4">
          <div class="card-header bg-body-tertiary">
            <h2 class="h5 mb-0">Indstillinger i generatoren</h2>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-striped align-middle mb-0">
                <thead>
                  <tr>
                    <th>Felt</th>
                    <th>Gyldigt interval</th>
                    <th>Forklaring</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>Indhold</td>
                    <td>1–<?= (int)QR_INPUT_MAX_LENGTH ?> tegn</td>
                    <td>Tekst, URL, mailadresse, serienummer eller anden værdi.</td>
                  </tr>
                  <tr>
                    <td>Størrelse</td>
                    <td>100–2000 px</td>
                    <td>PNG-billedets størrelse i pixels.</td>
                  </tr>
                  <tr>
                    <td>Margin</td>
                    <td>0–64 px</td>
                    <td>Den hvide kant omkring QR-koden.</td>
                  </tr>
                  <tr>
                    <td>Fejlkorrigering</td>
                    <td>L, M, Q, H</td>
                    <td>Hvor robust QR-koden er over for skader, snavs eller lav printkvalitet. M er normalt passende.</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </section>

        <section class="card shadow-sm mb-4">
          <div class="card-header bg-body-tertiary">
            <h2 class="h5 mb-0">Krav</h2>
          </div>
          <div class="card-body">
            <ul class="mb-0">
              <li>PHP med GD-udvidelsen aktiveret.</li>
              <li>Composer-pakken <code>endroid/qr-code</code> installeret i <code>vendor/</code>.</li>
              <li>Lokale filer: <code>css/bootstrap.min.css</code>, <code>css/app.css</code>, <code>js/bootstrap.bundle.min.js</code>, <code>js/jsQR.js</code> og <code>js/qr-scanner-app.js</code>.</li>
              <li>Til scanning: Chrome eller Edge med kameraadgang.</li>
              <li>Programmet skal normalt åbnes via <code>http://localhost/qr-app-lite/</code>. Ved adgang fra anden maskine kan browseren kræve HTTPS for kamera.</li>
              <li>Mappen <code><?= appE(QR_OUTPUT_DIR_NAME) ?>/</code> skal kunne oprettes og skrives til af Apache/PHP.</li>
            </ul>
          </div>
        </section>

        <section class="card shadow-sm mb-4">
          <div class="card-header bg-body-tertiary">
            <h2 class="h5 mb-0">Kendte fejl og løsninger</h2>
          </div>
          <div class="card-body">
            <div class="accordion" id="helpAccordion">
              <div class="accordion-item">
                <h3 class="accordion-header">
                  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#missingVendor" aria-expanded="true" aria-controls="missingVendor">
                    Mangler vendor/autoload.php
                  </button>
                </h3>
                <div id="missingVendor" class="accordion-collapse collapse show" data-bs-parent="#helpAccordion">
                  <div class="accordion-body">
                    Kør <code>composer require endroid/qr-code:^5.0</code> i programmappen.
                  </div>
                </div>
              </div>

              <div class="accordion-item">
                <h3 class="accordion-header">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#missingGd" aria-expanded="false" aria-controls="missingGd">
                    PHP GD er ikke aktiv
                  </button>
                </h3>
                <div id="missingGd" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                  <div class="accordion-body">
                    Aktiver <code>extension=gd</code> i <code>php.ini</code>, og genstart Apache i XAMPP.
                  </div>
                </div>
              </div>

              <div class="accordion-item">
                <h3 class="accordion-header">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#generatedFolder" aria-expanded="false" aria-controls="generatedFolder">
                    Output-mappen kan ikke oprettes eller skrives til
                  </button>
                </h3>
                <div id="generatedFolder" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                  <div class="accordion-body">
                    Opret mappen <code><?= appE(QR_OUTPUT_DIR_NAME) ?></code> manuelt i projektroden, eller kontrollér at Apache/PHP har skriverettigheder i <code>qr-app-lite</code>.
                  </div>
                </div>
              </div>

              <div class="accordion-item">
                <h3 class="accordion-header">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#missingCss" aria-expanded="false" aria-controls="missingCss">
                    Layout ser forkert ud
                  </button>
                </h3>
                <div id="missingCss" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                  <div class="accordion-body">
                    Kontrollér at <code>css/bootstrap.min.css</code> og <code>css/app.css</code> findes i projektets <code>css</code>-mappe.
                  </div>
                </div>
              </div>

              <div class="accordion-item">
                <h3 class="accordion-header">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#cameraNotFound" aria-expanded="false" aria-controls="cameraNotFound">
                    Kamera vises ikke i listen
                  </button>
                </h3>
                <div id="cameraNotFound" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                  <div class="accordion-body">
                    Kontrollér at Windows 11 kan se kameraet, og at Chrome har kameraadgang til <code>localhost</code>. Brug evt. <code>chrome://settings/content/camera</code> og kontrollér standardkamera samt blokerede websteder.
                  </div>
                </div>
              </div>

              <div class="accordion-item">
                <h3 class="accordion-header">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#scannerLibrary" aria-expanded="false" aria-controls="scannerLibrary">
                    Scanner starter, men finder ingen QR-kode
                  </button>
                </h3>
                <div id="scannerLibrary" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                  <div class="accordion-body">
                    Kontrollér lys, fokus og afstand. QR-koden skal være skarp i live preview. Kontrollér også at <code>js/jsQR.js</code> indlæses før <code>js/qr-scanner-app.js</code>.
                  </div>
                </div>
              </div>

              <div class="accordion-item">
                <h3 class="accordion-header">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#history" aria-expanded="false" aria-controls="history">
                    Scanner-historik vises ikke
                  </button>
                </h3>
                <div id="history" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                  <div class="accordion-body">
                    Historikken ligger i browserens lokale lager. Den kan forsvinde, hvis browserdata ryddes, hvis du bruger inkognito, eller hvis <code>localStorage</code> er deaktiveret.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section class="alert alert-info mb-0" role="alert">
          <h2 class="h5 alert-heading">Lokal drift</h2>
          <p class="mb-0">
            QR-generering og QR-scanning sker lokalt. Kamera- og QR-data sendes ikke til eksterne tjenester. Scanner-historik gemmes kun i browseren på den aktuelle PC.
          </p>
        </section>
      </div>
    </div>
  </main>

  <?php include __DIR__ . '/footer.php'; ?>
  <script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
