@extends('layouts.app')

@section('title', 'Printers')
@section('page', 'system-settings')
@section('systemNav', 'printers')

@section('content')
  @include('partials.settings-system-nav')

  @if (session('success'))
    <x-alert class="mb-3" variant="success" icon="bi-check-circle">{{ session('success') }}</x-alert>
  @endif

  @if ($errors->any())
    <x-alert class="mb-3" variant="danger" icon="bi-exclamation-triangle">{{ $errors->first() }}</x-alert>
  @endif

  <div class="payroll-rates-page">
    <div class="payroll-rates-page__head">
      <div>
        <h1 class="payroll-rates-page__title">Printers</h1>
        <p class="payroll-rates-page__subtitle">Assign Windows printers for Bill, KOT, and Reports (via QZ Tray on the POS PC).</p>
      </div>
      <div class="payroll-rates-page__tip" role="note">
        <i class="bi bi-info-circle-fill" aria-hidden="true"></i>
        <span>Install <a href="https://qz.io/download/" target="_blank" rel="noopener">QZ Tray</a> on each POS PC, then use exact printer names from Windows.</span>
      </div>
    </div>

    <form method="post" action="{{ route('settings.printers.update') }}" class="payroll-rates-form" id="printers-form">
      @csrf
      @method('PUT')

      <article class="rate-card rate-card--teal">
        <div class="rate-card__head">
          <div class="rate-card__identity">
            <span class="rate-card__icon" aria-hidden="true"><i class="bi bi-hdd-network"></i></span>
            <div>
              <h2 class="rate-card__title">QZ Tray</h2>
              <p class="rate-card__desc">Required to send Bill / KOT to different printers without picking them in the browser dialog.</p>
            </div>
          </div>
        </div>
        <div class="rate-card__body rate-card__body--single" style="max-width:none">
          <label class="form-check printers-qz-check">
            <input type="checkbox" class="form-check-input" name="qz_tray_enabled" value="1" id="qz_tray_enabled" {{ old('qz_tray_enabled', $qzTrayEnabled ? '1' : '0') === '1' ? 'checked' : '' }}>
            <span class="form-check-label">
              <strong>Enable QZ Tray routing</strong>
              <em>When off, POS falls back to the normal browser print dialog.</em>
            </span>
          </label>
          <div class="printers-detect mt-3">
            <button type="button" class="btn btn-outline-secondary btn-sm" id="btn-detect-printers">
              <i class="bi bi-search" aria-hidden="true"></i> Detect printers on this PC
            </button>
            <p class="rate-field__help mb-0 mt-2" id="printers-detect-status">Open this page on the POS PC with QZ Tray running.</p>
            <ul class="printers-detect__list" id="printers-detect-list" hidden></ul>
          </div>
        </div>
      </article>

      <article class="rate-card rate-card--violet">
        <div class="rate-card__head">
          <div class="rate-card__identity">
            <span class="rate-card__icon" aria-hidden="true"><i class="bi bi-printer"></i></span>
            <div>
              <h2 class="rate-card__title">Printer assignment</h2>
              <p class="rate-card__desc">Use the exact name shown in Windows Settings → Printers (or Detect above).</p>
            </div>
          </div>
        </div>
        <div class="rate-card__body" style="max-width:none; display:grid; gap:1rem;">
          <div class="rate-field">
            <label class="rate-field__label" for="bill_printer_name">
              <i class="bi bi-receipt" aria-hidden="true"></i>
              Bill / Invoice printer (A)
            </label>
            <div class="rate-field__control rate-field__control--plain">
              <input type="text" id="bill_printer_name" name="bill_printer_name" list="detected-printers" maxlength="255" value="{{ old('bill_printer_name', $billPrinterName) }}" placeholder="e.g. EPSON TM-T20III Receipt">
            </div>
            <p class="rate-field__help">Used for POS Charge &amp; Receipt / invoice print.</p>
          </div>

          <div class="rate-field">
            <label class="rate-field__label" for="kot_printer_name">
              <i class="bi bi-fire" aria-hidden="true"></i>
              KOT printer (B)
            </label>
            <div class="rate-field__control rate-field__control--plain">
              <input type="text" id="kot_printer_name" name="kot_printer_name" list="detected-printers" maxlength="255" value="{{ old('kot_printer_name', $kotPrinterName) }}" placeholder="e.g. Kitchen Printer">
            </div>
            <p class="rate-field__help">Used when Print KOT runs in KOT Print mode.</p>
          </div>

          <div class="rate-field">
            <label class="rate-field__label" for="report_printer_name">
              <i class="bi bi-file-earmark-bar-graph" aria-hidden="true"></i>
              Report printer (optional)
            </label>
            <div class="rate-field__control rate-field__control--plain">
              <input type="text" id="report_printer_name" name="report_printer_name" list="detected-printers" maxlength="255" value="{{ old('report_printer_name', $reportPrinterName) }}" placeholder="e.g. Office Laser">
            </div>
            <p class="rate-field__help">Saved for reports; report pages still use browser print until wired.</p>
          </div>

          <datalist id="detected-printers"></datalist>
        </div>
      </article>

      <div class="payroll-rates-form__actions">
        <button type="submit" class="btn btn-primary payroll-rates-form__save">
          <i class="bi bi-floppy" aria-hidden="true"></i> Save printers
        </button>
      </div>
    </form>
  </div>
@endsection

@push('styles')
  <link href="{{ asset('assets/css/pages/payroll-rates.css') }}" rel="stylesheet">
  <style>
    .printers-qz-check {
      display: flex;
      align-items: flex-start;
      gap: 0.65rem;
      padding: 0.75rem 0.85rem;
      border-radius: 12px;
      border: 1px solid #99f6e4;
      background: #f0fdfa;
      cursor: pointer;
    }
    .printers-qz-check .form-check-input {
      margin-top: 0.2rem;
      width: 1.1rem;
      height: 1.1rem;
    }
    .printers-qz-check .form-check-label {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
    }
    .printers-qz-check .form-check-label strong { color: #0f766e; font-size: 0.92rem; }
    .printers-qz-check .form-check-label em { font-style: normal; font-size: 0.78rem; color: #64748b; }
    .printers-detect__list {
      margin: 0.65rem 0 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
    }
    .printers-detect__list button {
      border: 1px solid #cbd5e1;
      background: #fff;
      border-radius: 999px;
      padding: 0.28rem 0.7rem;
      font-size: 0.78rem;
      font-weight: 600;
    }
    .printers-detect__list button:hover {
      border-color: #0d9488;
      color: #0f766e;
    }
  </style>
@endpush

@push('scripts')
  <script src="https://cdn.jsdelivr.net/npm/qz-tray@2.2.4/qz-tray.js"></script>
  <script>
    (function () {
      const status = document.getElementById('printers-detect-status');
      const list = document.getElementById('printers-detect-list');
      const datalist = document.getElementById('detected-printers');
      const btn = document.getElementById('btn-detect-printers');
      if (!btn || typeof qz === 'undefined') return;

      function fillDatalist(names) {
        if (!datalist) return;
        datalist.innerHTML = '';
        names.forEach((name) => {
          const opt = document.createElement('option');
          opt.value = name;
          datalist.appendChild(opt);
        });
      }

      function showList(names) {
        if (!list) return;
        list.hidden = !names.length;
        list.innerHTML = '';
        names.forEach((name) => {
          const li = document.createElement('li');
          const b = document.createElement('button');
          b.type = 'button';
          b.textContent = name;
          b.addEventListener('click', () => {
            const bill = document.getElementById('bill_printer_name');
            const kot = document.getElementById('kot_printer_name');
            const report = document.getElementById('report_printer_name');
            if (bill && !bill.value) bill.value = name;
            else if (kot && !kot.value) kot.value = name;
            else if (report && !report.value) report.value = name;
            else if (bill) bill.value = name;
          });
          li.appendChild(b);
          list.appendChild(li);
        });
      }

      btn.addEventListener('click', async () => {
        if (status) status.textContent = 'Connecting to QZ Tray…';
        try {
          if (!qz.websocket.isActive()) {
            await qz.websocket.connect();
          }
          const names = await qz.printers.find();
          const arr = Array.isArray(names) ? names : [names];
          fillDatalist(arr);
          showList(arr);
          if (status) status.textContent = arr.length + ' printer(s) found. Click a name to fill the next empty field.';
        } catch (err) {
          if (status) {
            status.textContent = 'QZ Tray not reachable. Install/start QZ Tray on this PC, then try again. (' + (err.message || err) + ')';
          }
        }
      });
    })();
  </script>
@endpush