<?php
declare(strict_types=1);
$code         = (string) ($code ?? '');
$result       = is_array($result ?? null) ? $result : null;
$barcodeText  = (string) ($result['barcode_text'] ?? '-  -  -  -');
$printText    = (string) ($result['print_text'] ?? '-  -  -');
$recognition  = (string) ($result['recognition_text'] ?? '-  -');
$error        = (string) ($error ?? ($result['ok'] ?? true ? '' : ($result['message'] ?? '')));
$unit         = (string) ($result['unit'] ?? '');
$bagName      = (string) ($result['bag_name'] ?? '');
$bagCode      = (string) ($result['bag_code'] ?? '');
$hasResult    = $result !== null && ($result['ok'] ?? false);
?>
<style>
  .num-lookup-wrap {
    max-width: 28rem;
    margin: 1.5rem auto 2rem;
    border: 1px solid #9ca3af;
    background: #ece9d8;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.08);
    font-family: 'Malgun Gothic', 'Noto Sans KR', sans-serif;
  }
  .num-lookup-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.55rem;
    background: linear-gradient(180deg, #3a6ea5 0%, #2c5282 100%);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
  }
  .num-lookup-body { padding: 0.85rem 0.9rem 1rem; }
  .num-lookup-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.35rem;
  }
  .num-lookup-input {
    width: 100%;
    border: 1px solid #9ca3af;
    background: #fff;
    padding: 0.35rem 0.45rem;
    font-size: 0.875rem;
    font-family: inherit;
  }
  .num-lookup-input:focus {
    outline: 1px solid #2563eb;
    border-color: #2563eb;
  }
  .num-lookup-sep {
    border: none;
    border-top: 1px solid #b8b4a8;
    margin: 0.85rem 0;
  }
  .num-lookup-row {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
  }
  .num-lookup-row label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1f2937;
    text-align: right;
  }
  .num-lookup-out {
    min-height: 1.75rem;
    border: 1px solid #9ca3af;
    background: #fffef0;
    padding: 0.35rem 0.5rem;
    font-size: 0.875rem;
    font-family: 'Consolas', 'Courier New', monospace;
    letter-spacing: 0.04em;
    color: #111827;
  }
  .num-lookup-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-top: 0.75rem;
  }
  .num-lookup-btn {
    border: 1px solid #6b7280;
    background: linear-gradient(180deg, #f9fafb 0%, #e5e7eb 100%);
    padding: 0.3rem 0.85rem;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
  }
  .num-lookup-btn-primary {
    border-color: #243a5e;
    background: linear-gradient(180deg, #2b6cb0 0%, #243a5e 100%);
    color: #fff;
  }
  .num-lookup-meta {
    margin-top: 0.65rem;
    font-size: 0.75rem;
    color: #4b5563;
    line-height: 1.5;
  }
  .num-lookup-error {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #b91c1c;
  }
  .num-lookup-hint {
    margin: 0.75rem auto 0;
    max-width: 28rem;
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.5;
  }
</style>

<div class="num-lookup-wrap" role="dialog" aria-labelledby="numLookupTitle">
  <div class="num-lookup-title" id="numLookupTitle">
    <i class="fa-solid fa-trash-can" aria-hidden="true"></i>
    봉투번호확인
  </div>
  <form class="num-lookup-body" method="get" action="<?= site_url('bag/number-lookup') ?>" id="numLookupForm">
    <label class="num-lookup-label" for="codeInput">코드 입력</label>
    <input
      type="text"
      id="codeInput"
      name="code"
      class="num-lookup-input"
      value="<?= esc($code) ?>"
      autocomplete="off"
      spellcheck="false"
      placeholder="예: OQXCKH-000008-P299-S00125"
    />

    <hr class="num-lookup-sep"/>

    <div class="num-lookup-row">
      <label for="barcodeOut">바코드</label>
      <div id="barcodeOut" class="num-lookup-out" aria-live="polite"><?= esc($barcodeText) ?></div>
    </div>
    <div class="num-lookup-row">
      <label for="printOut">인쇄숫자</label>
      <div id="printOut" class="num-lookup-out" aria-live="polite"><?= esc($printText) ?></div>
    </div>
    <div class="num-lookup-row">
      <label for="recognitionOut">인식번호</label>
      <div id="recognitionOut" class="num-lookup-out" aria-live="polite"><?= esc($recognition) ?></div>
    </div>

    <?php if ($error !== ''): ?>
    <p class="num-lookup-error" id="numLookupError"><?= esc($error) ?></p>
    <?php else: ?>
    <p class="num-lookup-error" id="numLookupError" hidden></p>
    <?php endif; ?>

    <?php if ($hasResult && ($unit !== '' || $bagName !== '')): ?>
    <p class="num-lookup-meta" id="numLookupMeta">
      <?php if ($unit !== ''): ?>단위: <?= esc($unit) ?><?php endif; ?>
      <?php if ($bagName !== ''): ?> · <?= esc($bagName) ?><?= $bagCode !== '' ? ' (' . esc($bagCode) . ')' : '' ?><?php endif; ?>
    </p>
    <?php else: ?>
    <p class="num-lookup-meta" id="numLookupMeta" hidden></p>
    <?php endif; ?>

    <div class="num-lookup-actions">
      <button type="button" class="num-lookup-btn" id="numLookupReset">초기화</button>
      <button type="submit" class="num-lookup-btn num-lookup-btn-primary">확인</button>
    </div>
  </form>
</div>

<p class="num-lookup-hint">
  봉투 바코드·LOT·팩·낱장 코드를 입력하면 <strong>바코드</strong>(4칸), <strong>인쇄숫자</strong>(3칸), <strong>인식번호</strong>(2칸)로 나누어 표시합니다.
  등록된 입고 바코드는 DB에서 품목명을 함께 조회합니다.
</p>

<div class="mx-auto mt-4 max-w-xl text-xs text-gray-700">
  <table class="w-full border border-gray-300 border-collapse">
    <thead>
    <tr class="bg-gray-100">
      <th class="border border-gray-300 rounded-lg px-2 py-1 text-left">단위</th>
      <th class="border border-gray-300 rounded-lg px-2 py-1 text-left">입력 예시</th>
      <th class="border border-gray-300 rounded-lg px-2 py-1 text-left">설명</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td class="border border-gray-300 rounded-lg px-2 py-1 align-top">LOT</td>
      <td class="border border-gray-300 rounded-lg px-2 py-1 align-top"><code>OQXCKH</code></td>
      <td class="border border-gray-300 rounded-lg px-2 py-1 align-top">
        발주 LOT 번호만 입력합니다.<br>
        바코드: <code>OQXCKH  -  -  -</code><br>
        인쇄숫자/인식번호는 LOT 기준으로만 표시됩니다.
      </td>
    </tr>
    <tr>
      <td class="border border-gray-300 rounded-lg px-2 py-1 align-top">박스</td>
      <td class="border border-gray-300 rounded-lg px-2 py-1 align-top"><code>OQXCKH-000008-B001</code></td>
      <td class="border border-gray-300 rounded-lg px-2 py-1 align-top">
        박스 바코드(LOT-입고번호-B박스번호)를 그대로 입력합니다.<br>
        바코드: <code>LOT  입고번호  B박스  -</code><br>
        인쇄숫자: <code>입고번호  박스번호  -</code><br>
        인식번호: <code>입고번호  B박스</code>
      </td>
    </tr>
    <tr>
      <td class="border border-gray-300 rounded-lg px-2 py-1 align-top">팩</td>
      <td class="border border-gray-300 rounded-lg px-2 py-1 align-top"><code>OQXCKH-000008-P299</code></td>
      <td class="border border-gray-300 rounded-lg px-2 py-1 align-top">
        팩 바코드(LOT-입고번호-P팩번호)를 그대로 입력합니다.<br>
        바코드: <code>LOT  입고번호  P팩  -</code><br>
        인쇄숫자: <code>입고번호  팩번호  -</code><br>
        인식번호: <code>입고번호  P팩</code>
      </td>
    </tr>
    <tr>
      <td class="border border-gray-300 rounded-lg px-2 py-1 align-top">낱장</td>
      <td class="border border-gray-300 rounded-lg px-2 py-1 align-top"><code>OQXCKH-000008-P299-S00125</code></td>
      <td class="border border-gray-300 rounded-lg px-2 py-1 align-top">
        낱장 바코드(LOT-입고번호-P팩-S장번호)를 그대로 입력합니다.<br>
        바코드: <code>LOT  입고번호  P팩  S장번호</code><br>
        인쇄숫자: <code>입고번호  팩번호  장번호</code><br>
        인식번호: <code>입고번호  P팩</code>
      </td>
    </tr>
    </tbody>
  </table>
</div>

<script>
(function () {
  var form = document.getElementById('numLookupForm');
  var input = document.getElementById('codeInput');
  var resetBtn = document.getElementById('numLookupReset');
  if (!form || !input) return;

  var emptyBarcode = '-  -  -  -';
  var emptyPrint = '-  -  -';
  var emptyRec = '-  -';

  function setOutputs(data) {
    document.getElementById('barcodeOut').textContent = data.barcode_text || emptyBarcode;
    document.getElementById('printOut').textContent = data.print_text || emptyPrint;
    document.getElementById('recognitionOut').textContent = data.recognition_text || emptyRec;
    var err = document.getElementById('numLookupError');
    var meta = document.getElementById('numLookupMeta');
    if (err) {
      if (data.message) {
        err.textContent = data.message;
        err.hidden = false;
      } else {
        err.textContent = '';
        err.hidden = true;
      }
    }
    if (meta) {
      var parts = [];
      if (data.unit) parts.push('단위: ' + data.unit);
      if (data.bag_name) {
        var line = data.bag_name;
        if (data.bag_code) line += ' (' + data.bag_code + ')';
        parts.push(line);
      }
      if (parts.length) {
        meta.textContent = parts.join(' · ');
        meta.hidden = false;
      } else {
        meta.hidden = true;
      }
    }
  }

  function lookupAjax() {
    var code = (input.value || '').trim();
    if (!code) {
      setOutputs({ message: '코드를 입력해 주세요.', barcode_text: emptyBarcode, print_text: emptyPrint, recognition_text: emptyRec });
      return;
    }
    fetch('<?= site_url('bag/number-lookup/resolve') ?>', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-Requested-With': 'XMLHttpRequest' },
      body: 'code=' + encodeURIComponent(code) + '&<?= csrf_token() ?>=' + encodeURIComponent('<?= csrf_hash() ?>')
    })
      .then(function (r) { return r.json(); })
      .then(function (data) { setOutputs(data || {}); })
      .catch(function () { setOutputs({ message: '조회 중 오류가 발생했습니다.' }); });
  }

  input.addEventListener('keydown', function (e) {
    if (e.key === 'Enter') {
      e.preventDefault();
      lookupAjax();
    }
  });

  if (resetBtn) {
    resetBtn.addEventListener('click', function () {
      input.value = '';
      setOutputs({ barcode_text: emptyBarcode, print_text: emptyPrint, recognition_text: emptyRec });
      input.focus();
    });
  }
})();
</script>
