@extends('layouts.admin')

@section('title', 'Generate Invoice')
@section('page-title', 'Generate Invoice')

@section('breadcrumb')
    <li class="breadcrumb-item active">Generate Invoice</li>
@endsection

@section('content')
<div class="card border-0 shadow-sm">
  <div class="card-header bg-transparent d-flex justify-content-between align-items-center">
    <h5 class="mb-0"><i class="fas fa-file-invoice me-2"></i>Generate Invoice (Zoho)</h5>
  </div>
  <div class="card-body">
    @php 
        $soNo = request()->query('so_no'); 
        $currentLocationId = session('location_id');
    @endphp
    @if (!empty($soNo))
    <div class="mb-3">
      <label class="form-label fw-semibold">SO No</label>
      <div>
        <span class="badge bg-info text-dark" id="so_no_badge">{{ $soNo }}</span>
      </div>
    </div>
    @endif

    <form id="invoiceForm" class="row g-3" onsubmit="return false;">
      <div class="col-md-4">
        <label for="invoice_number" class="form-label">Invoice Number</label>
        <input type="text" class="form-control" id="invoice_number" placeholder="e.g. MH/25-26/03589" required>
      </div>
      <div class="col-12 d-flex gap-2">
        <button id="btnSearch" class="btn btn-primary" type="button">
          <i class="fas fa-search me-1"></i> Fetch Invoice Meta
        </button>
        <button id="btnDownload" class="btn btn-success" type="button" disabled>
          <i class="fas fa-download me-1"></i> Download PDF
        </button>
      </div>
    </form>

    <div id="statusBox" class="alert d-none mt-3" role="alert"></div>

    <div id="metaCard" class="card border-0 shadow-sm d-none mt-3">
      <div class="card-header bg-transparent">
        <h6 class="mb-0">Invoice Details</h6>
      </div>
      <div class="card-body">
        <div class="row g-3">
          <div class="col-md-3"><strong>Invoice ID:</strong> <span id="meta_invoice_id">-</span></div>
          <div class="col-md-3"><strong>Invoice Number:</strong> <span id="meta_invoice_number">-</span></div>
          <div class="col-md-3"><strong>Status:</strong> <span id="meta_status">-</span></div>
          <div class="col-md-3"><strong>Customer:</strong> <span id="meta_customer">-</span></div>
        </div>
      </div>
    </div>

    <div id="pdfCard" class="card border-0 shadow-sm mt-4 d-none">
      <div class="card-header bg-transparent">
        <h6 class="mb-0">Invoice PDF</h6>
      </div>
      <div class="card-body">
        <a id="pdfLink" href="#" target="_blank" class="btn btn-outline-primary">
          <i class="fas fa-file-pdf me-1"></i> Open PDF
        </a>
      </div>
    </div>
  </div>
</div>
@endsection

@section('scripts')
<script>
(function(){
  const btnSearch = document.getElementById('btnSearch');
  const btnDownload = document.getElementById('btnDownload');
  const statusBox = document.getElementById('statusBox');
  const metaCard = document.getElementById('metaCard');
  const pdfCard = document.getElementById('pdfCard');

  let selectedInvoiceId = null;
  const soNo = @json($soNo);
  const locationId = @json($currentLocationId);

  function setStatus(type, msg){
    statusBox.classList.remove('d-none','alert-info','alert-success','alert-danger');
    statusBox.classList.add('alert-' + type);
    statusBox.innerText = msg;
  }

  function clearStatus(){
    statusBox.classList.add('d-none');
  }

  function readInputs(){
    return { invoice_number: document.getElementById('invoice_number').value.trim() };
  }

  async function fetchJSON(url, opts){
    const res = await fetch(url, opts);
    const text = await res.text();
    try { return { ok: res.ok, status: res.status, data: JSON.parse(text) }; }
    catch (e) { return { ok: res.ok, status: res.status, data: text }; }
  }

  btnSearch.addEventListener('click', async () => {
    clearStatus();
    pdfCard.classList.add('d-none');
    metaCard.classList.add('d-none');
    btnDownload.disabled = true;

    const { invoice_number } = readInputs();
    if(!invoice_number){ setStatus('danger', 'Please enter an invoice number.'); return; }

    setStatus('info', 'Fetching invoice(s) from Zoho ...');

    const form = new URLSearchParams();
    form.set('invoice_number', invoice_number);

    const call1 = await fetchJSON('/directapi/invoices.php', {
      method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: form.toString()
    });

    if(!call1.ok){ setStatus('danger', `Failed fetching invoices (HTTP ${call1.status}).`); return; }

    const list = (call1.data && call1.data.invoices) ? call1.data.invoices : [];
    if(!Array.isArray(list) || list.length === 0){ setStatus('danger', 'No invoices found for the given number.'); return; }

    const inv = list[0];
    selectedInvoiceId = inv.invoice_id;

    document.getElementById('meta_invoice_id').innerText = inv.invoice_id || '-';
    document.getElementById('meta_invoice_number').innerText = inv.invoice_number || '-';
    document.getElementById('meta_status').innerText = inv.status || '-';
    document.getElementById('meta_customer').innerText = inv.customer_name || '-';

    metaCard.classList.remove('d-none');
    setStatus('success', 'Invoice found. You can now download the PDF.');
    btnDownload.disabled = false;
  });

  btnDownload.addEventListener('click', async () => {
    clearStatus();
    if(!selectedInvoiceId){ setStatus('danger', 'No invoice selected to download.'); return; }

    setStatus('info', 'Fetching invoice PDF ...');

    const form = new URLSearchParams();
    form.set('invoice_id', selectedInvoiceId);
    if (soNo) form.set('so_no', soNo);
    if (locationId) form.set('location_id', locationId);

    const call = await fetch('/directapi/invoice.php', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: form.toString() });

    const text = await call.text();
    let data = null; try { data = JSON.parse(text); } catch(e) {}

    if(!call.ok || !data || !data.success){ setStatus('danger', `Failed to save PDF. ${data && data.message ? data.message : 'Please try again.'}`); return; }

    const link = document.getElementById('pdfLink');
    link.href = data.file_url; link.setAttribute('download', `invoice_${selectedInvoiceId}.pdf`);
    pdfCard.classList.remove('d-none');
    setStatus('success', 'Invoice PDF is ready.');

    try { const a = document.createElement('a'); a.href = data.file_url; a.download = `invoice_${selectedInvoiceId}.pdf`; document.body.appendChild(a); a.click(); document.body.removeChild(a); } catch(e) {}

    // Redirect reinvoicing queue and close this tab if possible
    try {
      if (window.opener && !window.opener.closed) {
        try {
          const op = window.opener;
          // If already on reinvoicing, just hard refresh; else navigate then refresh
          if (op.location && op.location.pathname && op.location.pathname.indexOf('/admin/reinvoicing') !== -1) {
            op.location.reload();
          } else {
            op.location = '/admin/reinvoicing';
            setTimeout(() => { try { op.location.reload(); } catch(_) {} }, 500);
          }
        } catch(e) {}
      }
      window.close();
      // If browser blocks close(), fallback to redirect this tab
      setTimeout(() => { if (!document.hidden) { window.location.href = '/admin/reinvoicing'; } }, 400);
    } catch(e) {
      window.location.href = '/admin/reinvoicing';
    }
  });
})();
</script>
@endsection