{% extends "base.html" %}
{% block title %}Admin · PrintServer{% endblock %}
{% block subtitle %}Drivers, printers, and accounts{% endblock %}
{% block content %}
<section class="toolbar">
  <label class="search">Search printers
    <input id="printer-search" placeholder="Station, name, IP, location…" />
  </label>
  <button type="button" class="ghost" data-refresh>Refresh connections</button>
  <a class="btn" href="/client-setup">How to set up a PC</a>
</section>

<section class="panel">
  <div class="panel-head">
    <h2>Website address and port</h2>
    <p>PrintServer version <strong>{{ app_version }}</strong>. IPs in the list are read from this computer’s network cards (not hardcoded). <strong>Listen on</strong> All local IPs is usually correct. Set <strong>Address to show customers</strong> to the IPv4 laptops should type in the browser. Changing the listen address or port needs Apply &amp; restart.</p>
  </div>
  <form id="settings-form" class="stack">
    <div class="row-2">
      <label>Listen on
        <select name="listen_host" id="listen-host">
          <option value="0.0.0.0">All local IPs (0.0.0.0)</option>
          <option value="127.0.0.1">This PC only (127.0.0.1)</option>
        </select>
      </label>
      <label>Website port
        <input name="listen_port" id="listen-port" type="number" min="1" max="65535" required />
      </label>
    </div>
    <label>Detected on this PC
      <select id="public-ip-pick">
        <option value="">Choose a detected IP…</option>
      </select>
    </label>
    <label>Address to show customers (type the server IP)
      <input name="public_ip" id="public-ip" placeholder="192.168.30.73" autocomplete="off" />
    </label>
    <p class="hint" id="server-urls"></p>
    <div class="row-2">
      <button type="submit">Save</button>
      <button type="button" class="ghost" id="settings-restart">Apply &amp; restart</button>
    </div>
    <p class="form-error" id="settings-error" hidden></p>
    <p class="ok" id="settings-ok" hidden></p>
  </form>
</section>

<section class="panel">
  <div class="panel-head">
    <h1>Printers</h1>
    <p>Choose Local (this PC), Office (catalog you add below), or Both. Collapse the list if you are adding a printer.</p>
  </div>
  <div class="source-tabs" role="tablist">
    <button type="button" class="ghost" data-source="local">Local</button>
    <button type="button" class="ghost" data-source="office">Office</button>
    <button type="button" class="ghost" data-source="both">Both</button>
  </div>
  <p class="selected-printer-banner" id="selected-printer-banner" hidden></p>
  <details class="printer-fold" id="printer-fold">
    <summary id="printer-fold-summary">Printer list</summary>
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th>Station</th>
            <th>Printer</th>
            <th>Type</th>
            <th>IP</th>
            <th>Driver version</th>
            <th>Location</th>
            <th>Connection</th>
            <th></th>
          </tr>
        </thead>
        <tbody id="printer-rows">
          <tr><td colspan="8" class="muted">Loading printers…</td></tr>
        </tbody>
      </table>
    </div>
  </details>
</section>

<section class="grid-2">
  <article class="panel">
    <div class="panel-head">
      <h2>Add or update printer</h2>
    </div>
    <form id="printer-form" class="stack">
      <input type="hidden" name="printer_id" id="printer-id" />
      <label>Name
        <input name="name" required placeholder="Front Desk Color" />
      </label>
      <label>Type
        <input name="printer_type" placeholder="HP LaserJet M404" />
      </label>
      <div class="row-2">
        <label>Station number
          <input name="station_number" required placeholder="ST-12" />
        </label>
        <label>IP address
          <input name="ip_address" required placeholder="10.20.30.45" />
        </label>
      </div>
      <div class="row-2">
        <button type="button" class="ghost" id="test-ip-btn">Test this IP</button>
        <p class="muted" id="test-ip-result"></p>
      </div>
      <label>Location in office
        <input name="location" placeholder="Building 2, 3rd floor, east wing" />
      </label>
      <label>Windows share name (optional)
        <input name="share_name" placeholder="FrontDeskColor" />
      </label>
      <label>Driver package
        <select name="driver_id" id="printer-driver"></select>
      </label>
      <label>Notes
        <textarea name="notes" rows="2"></textarea>
      </label>
      <div class="row-2">
        <button type="submit">Save printer</button>
        <button type="button" class="ghost" id="printer-reset">Clear form</button>
      </div>
      <p class="form-error" id="printer-error" hidden></p>
    </form>
  </article>

  <article class="panel">
    <div class="panel-head">
      <h2>Upload driver</h2>
      <p>Customers and admins can both download these files.</p>
    </div>
    <form id="driver-form" class="stack">
      <label>Driver name
        <input name="name" required placeholder="HP Universal PCL6" />
      </label>
      <label>Version
        <input name="version" required placeholder="7.2.0" />
      </label>
      <label>Notes
        <input name="notes" placeholder="Windows 10/11 x64" />
      </label>
      <label>Package file
        <input type="file" name="file" required />
      </label>
      <button type="submit">Upload driver</button>
      <p class="form-error" id="driver-error" hidden></p>
    </form>
    <h3 class="sub">Library</h3>
    <details class="printer-fold" id="driver-fold">
      <summary id="driver-fold-summary">Driver library (collapsed)</summary>
      <div id="driver-list" class="list"></div>
    </details>
  </article>
</section>

<section class="grid-2">
  <article class="panel">
    <div class="panel-head">
      <h2>Accounts</h2>
      <p>Change the admin or customer username and password here. Leave password blank when editing to keep the current password.</p>
    </div>
    <form id="user-form" class="stack">
      <input type="hidden" name="user_id" id="user-id" value="" />
      <label>Username
        <input name="username" required />
      </label>
      <label>Display name
        <input name="display_name" />
      </label>
      <label>Password
        <input name="password" type="password" id="user-password" autocomplete="new-password" />
      </label>
      <label>Role
        <select name="role">
          <option value="customer">Customer</option>
          <option value="admin">Admin</option>
        </select>
      </label>
      <div class="row-2">
        <button type="submit" id="user-save">Create account</button>
        <button type="button" class="ghost" id="user-clear">New account</button>
      </div>
      <p class="form-error" id="user-error" hidden></p>
      <p class="ok" id="user-ok" hidden></p>
    </form>
    <div id="user-list" class="list"></div>
  </article>
  <article class="panel">
    <div class="panel-head">
      <h2>Print through server</h2>
      <p>Office catalog only. Sends a file from this website to a printer IP (port 9100). Laptop printers do not appear here — those print from Word using the printer selected in PrintServer Client.</p>
    </div>
    <form id="print-form" class="stack">
      <label>Printer
        <select name="printer_id" id="print-printer" required></select>
      </label>
      <label>File
        <input type="file" name="file" id="print-file" required />
      </label>
      <div class="print-preview" id="print-preview" hidden>
        <p class="now-printing-label">Preview</p>
        <div id="print-preview-body"></div>
      </div>
      <button type="submit">Send print job</button>
      <p class="form-error" id="print-error" hidden></p>
      <p class="ok" id="print-ok" hidden></p>
    </form>
    <h3 class="sub">Recent jobs</h3>
    <div id="job-list" class="list"></div>
  </article>
</section>

<section class="panel">
  <div class="panel-head">
    <h2>Print log</h2>
    <p>Date, time, and whether each job printed. Archive items to clear the main log without deleting them. Restore from Archive if you need them back.</p>
  </div>
  <details class="printer-fold" id="print-log-fold">
    <summary id="print-log-summary">Print log (collapsed)</summary>
    <div class="source-tabs" role="tablist">
      <button type="button" class="ghost is-on" data-log-view="active">Main log</button>
      <button type="button" class="ghost" data-log-view="archive">Archive</button>
    </div>
    <div class="row-actions print-log-actions">
      <button type="button" class="ghost" id="print-log-archive">Archive selected</button>
      <button type="button" class="ghost" id="print-log-archive-all">Archive all</button>
      <button type="button" class="ghost" id="print-log-restore" hidden>Restore selected</button>
    </div>
    <p class="form-error" id="print-log-error" hidden></p>
    <p class="ok" id="print-log-ok" hidden></p>
    <p class="muted" id="print-log-status"></p>
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th><input type="checkbox" id="print-log-all" aria-label="Select all" /></th>
            <th>Date</th>
            <th>Time</th>
            <th>Printed?</th>
            <th>User</th>
            <th>File</th>
            <th>Station</th>
            <th>Printer</th>
          </tr>
        </thead>
        <tbody id="print-log-rows">
          <tr><td colspan="8" class="muted">Loading print log…</td></tr>
        </tbody>
      </table>
    </div>
  </details>
</section>

<dialog id="connect-dialog">
  <div class="stack dialog-body">
    <h2 id="connect-title">Connect this station</h2>
    <p id="connect-lead" class="lede"></p>
    <pre id="connect-body" class="code"></pre>
    <div class="row-actions">
      <a id="connect-script" href="#"><button type="button">Download connect script</button></a>
      <a href="/api/windows/disconnect.cmd"><button type="button" class="ghost">Download disconnect script</button></a>
      <a href="/help#windows-printer"><button type="button" class="ghost">Help</button></a>
      <form method="dialog"><button class="ghost" value="close">Close</button></form>
    </div>
  </div>
</dialog>
{% endblock %}
{% block scripts %}
<script>window.PS_ROLE = "admin";</script>
{% endblock %}