@extends('layouts.app')

@section('content')
<main class="main-content">
  <div class="page-header"><h1 class="page-title">Report Print QR</h1></div>
  <div class="content-card">
    <div class="card-body">
      <div class="table-container">
        <table class="data-table">
          <thead><tr><th>Action</th><th>ID</th><th>Deskripsi material</th><th>Lokasi</th><th>Date/time</th></tr></thead>
          <tbody>
            @foreach($transactions as $index => $trx)
            <tr class="clickable-row" onclick="openDetail({{ $trx->toJson() }})" style="cursor:pointer;">
              <td onclick="event.stopPropagation();">
                <div class="table-action">
                  <button class="btn-icon" onclick="printRow('{{ $trx->qr_data_url }}', '{{ $trx->material_code }}', '{{ $trx->material_description }}', '{{ $trx->location }}')" title="Print QR"><i class="bi bi-printer"></i></button>
                </div>
              </td>
              <td>{{ $index + 1 }}</td>
              <td><span class="table-description">{{ $trx->image ? '📷 ' : '' }}{{ $trx->material_description }}</span></td>
              <td>{{ $trx->location }}</td>
              <td>{{ $trx->created_at->format('d/m/Y H:i') }}</td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>
</main>

<div class="modal-overlay" id="detailModal">
  <div class="modal-content" style="max-width:450px; padding: 20px;">
    
    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:15px;">
      <h3 style="font-size:1rem; font-weight:700; margin:0;">Detail Transaksi</h3>
      <button onclick="document.getElementById('detailModal').classList.remove('active')" style="background:none; border:none; font-size:1.4rem; cursor:pointer; line-height:1;">×</button>
    </div>
    
    <div style="display:flex; gap:15px; align-items:flex-start; margin-bottom:15px;">
      
      <div style="width:100px; height:100px; flex-shrink:0; background:#f8f9fa; border-radius:8px; overflow:hidden;">
        <img id="detailQRImage" src="" style="width:100%; height:100%; object-fit:contain;">
      </div>
      
      <div style="flex-grow:1; display:flex; flex-direction:column; gap:8px;">
        <div style="display:flex; flex-direction:column;">
          <label style="font-size:0.65rem; text-transform:uppercase; color:#6c757d; font-weight:700;">Kode</label>
          <span id="detailCode" style="font-size:0.85rem; font-weight:600; color:var(--text-primary);"></span>
        </div>
        <div style="display:flex; flex-direction:column;">
          <label style="font-size:0.65rem; text-transform:uppercase; color:#6c757d; font-weight:700;">Deskripsi</label>
          <span id="detailDesc" style="font-size:0.85rem; line-height:1.2;"></span>
        </div>
        <div style="display:flex; flex-direction:column;">
          <label style="font-size:0.65rem; text-transform:uppercase; color:#6c757d; font-weight:700;">Lokasi</label>
          <span id="detailLocation" style="font-size:0.85rem;"></span>
        </div>
      </div>
    </div>
    
    <div id="detailPhotoWrapper" style="display:none; border-top:1px solid #eee; pt:10px; margin-top:10px;">
      <p style="font-size:0.7rem; font-weight:600; color:#6c757d; margin: 10px 0 5px 0;">Foto Lampiran</p>
      <img id="detailPhoto" src="" style="width:100px; height:100px; border-radius:8px; object-fit:cover; border:1px solid #ddd;">
    </div>

  </div>
</div>
@endsection

@section('scripts')
<script>
function openDetail(trx) {
  document.getElementById('detailQRImage').src = trx.qr_data_url || '';
  document.getElementById('detailCode').innerText = trx.material_code;
  document.getElementById('detailDesc').innerText = trx.material_description;
  document.getElementById('detailLocation').innerText = trx.location;
  
  const photoWrapper = document.getElementById('detailPhotoWrapper');
  if(trx.image) {
    document.getElementById('detailPhoto').src = trx.image;
    photoWrapper.style.display = 'block';
  } else {
    photoWrapper.style.display = 'none';
  }
  document.getElementById('detailModal').classList.add('active');
}

function printRow(qrUrl, code, desc, loc) {
  if(!qrUrl) return alert('No QR saved for this transaction');
  const w = window.open('', '_blank');
  w.document.write(`<!DOCTYPE html><html><head><style>body{display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;font-family:Arial;} .label{width:70mm;height:30mm;border:1px solid #000;display:flex;align-items:center;padding:4mm;box-sizing:border-box;} .qr-code{width:22mm;height:22mm;margin-right:4mm;} .info{flex:1;font-size:9pt;} .code{font-weight:bold;font-size:10pt;margin-bottom:2mm;}</style></head><body><div class="label"><img class="qr-code" src="${qrUrl}"><div class="info"><div class="code">${code}</div><div>${desc}</div><div>Loc: ${loc}</div></div></div><script>setTimeout(()=>{window.print();window.close();},400);<\/script></body></html>`);
  w.document.close();
}
</script>
@endsection