@extends('layouts.app')

@section('content')
<main class="main-content">
  <div class="content-card">
    <div class="card-body">
      <div class="create-qr-header">
        <a href="{{ route('home') }}" class="back-link"><i class="bi bi-chevron-left"></i><span>Back To Search</span></a>
        <button class="btn-save print-action" type="button" id="printBtnHeader" style="background:var(--surface-cloud);color:var(--text-secondary);border-color:var(--outline-color);box-shadow:none;cursor:not-allowed;" disabled>
          <i class="bi bi-printer"></i><span>Print QR</span>
        </button>
      </div>
      
      <div class="material-info">
        <div class="info-item"><label>Kode Material</label><span id="matCode">{{ $material->code }}</span></div>
        <div class="info-item"><label>Deskripsi material</label><span id="matDesc">{{ $material->description }}</span></div>
      </div>
      
      <form id="createQRForm">
        @csrf
        <div class="form-section">
          <label class="form-label">Lokasi</label>
          <select class="form-select" id="location" required>
            <option value="">Select Location</option>
            <option value="Gudang A">Gudang A</option><option value="Gudang B">Gudang B</option><option value="Gudang C">Gudang C</option>
            <option value="Workshop">Workshop</option><option value="Office">Office</option><option value="Lapangan">Lapangan</option>
          </select>
        </div>
        
        <div class="form-section">
          <label class="form-label">Gambar</label>
          <div class="image-upload" id="imageUpload" onclick="document.getElementById('imageFile').click()">
            <div class="image-upload-icon"><i class="bi bi-image"></i></div>
            <div class="image-upload-text">Click or drag image here to upload</div>
            <img id="imagePreview" class="image-preview" style="display: none;">
          </div>
          <input type="file" id="imageFile" accept="image/*" style="display:none;" onchange="previewImage(event)">
        </div>
        
        <div class="form-actions">
          <button type="submit" class="btn-save" id="saveBtn"><i class="bi bi-save"></i><span>Save</span></button>
        </div>
      </form>
    </div>
  </div>
</main>

<div class="modal-overlay" id="resultModal">
  <div class="modal-content">
    <h3 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 20px;">Your QR is Ready!</h3>
    <div class="qr-result-container">
      <div class="qr-code-display"><img id="modalQRImage" src="" style="width: 100%; height: 100%;"></div>
      <div class="qr-info">
        <div class="qr-info-item"><label>Kode</label><span id="modalMaterialCode"></span></div>
        <div class="qr-info-item"><label>Deskripsi</label><span id="modalMaterialDesc"></span></div>
        <div class="qr-info-item"><label>Lokasi</label><span id="modalLocation"></span></div>
      </div>
    </div>
    <div class="modal-actions">
      <button type="button" class="btn-cancel" onclick="window.location='{{ route('home') }}'">Close</button>
      <button type="button" class="btn-print" id="modalPrint"><i class="bi bi-printer"></i> Print</button>
    </div>
  </div>
</div>
@endsection

@section('scripts')
<script>
let uploadedImage = null;
let savedQRUrl = null;

function previewImage(e) {
  const file = e.target.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = ev => {
    uploadedImage = ev.target.result;
    document.getElementById('imagePreview').src = uploadedImage;
    document.getElementById('imagePreview').style.display = 'block';
  };
  reader.readAsDataURL(file);
}

document.getElementById('createQRForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  const location = document.getElementById('location').value;
  const code = '{{ $material->code }}';
  const desc = '{{ $material->description }}';
  
  document.getElementById('saveBtn').innerHTML = '<i class="bi bi-hourglass"></i> Saving...';
  
  // Generate QR from API & convert to base64
  const qrText = `${code}|${desc}|${location}`;
  const apiUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent(qrText)}&format=png`;
  const qrDataUrl = await getBase64FromUrl(apiUrl);
  
  // Send to Laravel via Fetch
  const response = await fetch('{{ route('qr.store') }}', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
    body: JSON.stringify({
      material_id: '{{ $material->id }}', material_code: code, material_description: desc,
      location: location, image: uploadedImage, qr_data_url: qrDataUrl
    })
  });
  
  const data = await response.json();
  if(data.success) {
    savedQRUrl = qrDataUrl;
    document.getElementById('saveBtn').innerHTML = '<i class="bi bi-check-circle"></i> Saved!';
    
    // Unlock Header Print
    const printBtn = document.getElementById('printBtnHeader');
    printBtn.disabled = false;
    printBtn.style.cursor = 'pointer'; printBtn.style.background = 'var(--primary-violet)'; printBtn.style.color = 'white';
    
    // Show Modal
    document.getElementById('modalQRImage').src = qrDataUrl;
    document.getElementById('modalMaterialCode').innerText = code;
    document.getElementById('modalMaterialDesc').innerText = desc;
    document.getElementById('modalLocation').innerText = location;
    document.getElementById('resultModal').classList.add('active');
  }
});

// Print logic
function printQR() {
  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:21mm;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="${savedQRUrl}"><div class="info"><div class="code">{{ $material->code }}</div><div>{{ $material->description }}</div><div>Loc: ${document.getElementById('location').value}</div></div></div><script>setTimeout(()=>{window.print();window.close();},400);<\/script></body></html>`);
  w.document.close();
}
document.getElementById('modalPrint').addEventListener('click', printQR);
document.getElementById('printBtnHeader').addEventListener('click', printQR);

async function getBase64FromUrl(url) {
  return new Promise(resolve => {
    const img = new Image(); img.crossOrigin = 'Anonymous';
    img.onload = () => {
      const c = document.createElement('canvas'); c.width = img.width; c.height = img.height;
      c.getContext('2d').drawImage(img, 0, 0); resolve(c.toDataURL('image/png'));
    };
    img.onerror = () => resolve(url); img.src = url;
  });
}
</script>
@endsection