@extends('layouts.location')

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

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

@section('content')
<div class="row">
  <div class="col-12">
    <div class="card border-0 shadow-sm mb-4">
      <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> Submit
            </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>
    </div>

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

    <div id="metaCard" class="card border-0 shadow-sm d-none">
      <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

@push('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;
  // Expose SO No and location_id from backend so we can send them to invoice.php
  const soNo = @json($soNo);
  const locationId = @json($currentLocationId);
  const soNoBadge = document.getElementById('so_no_badge');

  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 ...');

    // Step 1: Call invoices.php to query Zoho and save invoices.json
    const form = new URLSearchParams();
    form.set('invoice_number', invoice_number);
    // Org and token are handled server-side

    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;
    }

    // Extract invoice_id directly from the API response
    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;

    // Populate meta card
    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. Downloading PDF...');
    btnDownload.disabled = false;
    
    // Auto-click download button
    setTimeout(() => {
      btnDownload.click();
    }, 500);
  });

  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.');

    // Trigger browser download
    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) {}
  });
})();
</script>
@endpush