{% extends "_layout.html" %}
{% block body %}
<!-- Success Toast -->
<div class="toast-container position-fixed top-0 end-0 p-3">
  <div id="successToast" class="toast align-items-center text-white bg-success border-0" role="alert">
    <div class="d-flex">
      <div class="toast-body">
        <i class="bi bi-check-circle me-2"></i>
        Invoice generated successfully!
      </div>
      <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
    </div>
  </div>
</div>

<!-- Loading Overlay -->
<div id="loadingOverlay" class="position-fixed top-0 start-0 w-100 h-100 d-none" style="background: rgba(0,0,0,0.7); z-index: 9999;">
  <div class="d-flex justify-content-center align-items-center h-100">
    <div class="text-center text-white">
      <div class="spinner-border mb-3" role="status" style="width: 3rem; height: 3rem;"></div>
      <h5>Generating Invoice...</h5>
      <p class="mb-0">Please wait while we create your PDF</p>
    </div>
  </div>
</div>

<!-- Main Content -->
<div class="row justify-content-center">
  <div class="col-12">
    <!-- Header Card -->
    <div class="card shadow-lg border-0 mb-4">
      <div class="card-header bg-gradient text-white text-center py-4">
        <div class="d-flex align-items-center justify-content-center mb-2 flex-wrap">
          <i class="bi bi-receipt-cutoff fs-1 me-3"></i>
          <div class="text-center text-lg-start">
            <h2 class="mb-0 fw-bold">Tax Invoice Generator</h2>
            <p class="mb-0 opacity-75">Professional Invoice Creation</p>
          </div>
        </div>
        <div class="mt-3 d-flex justify-content-center flex-wrap gap-2">
          <span class="badge bg-light text-dark fs-6 px-3 py-2">
            <i class="bi bi-hash"></i> {{ inv_no }}
          </span>
          <span class="badge bg-light text-dark fs-6 px-3 py-2">
            <i class="bi bi-calendar3"></i> {{ today }}
          </span>
        </div>
      </div>
    </div>

    <!-- Main Form -->
    <div class="card shadow-lg border-0">
      <div class="card-body">
        <form id="invForm">
          <!-- Customer Details Section -->
          <div class="mb-5 text-center">
            <div class="d-flex align-items-center justify-content-center mb-4">
              <div class="bg-primary rounded-circle p-2 me-3">
                <i class="bi bi-person-circle text-white"></i>
              </div>
              <h4 class="mb-0 text-primary fw-bold">Customer Information</h4>
            </div>
            
            <div class="row g-3 justify-content-center text-start">
              <div class="col-lg-5">
                <label class="form-label fw-semibold">
                  <i class="bi bi-person me-1"></i> Customer Name *
                </label>
                <input class="form-control form-control-lg" name="cust_name" required 
                       placeholder="Enter customer name">
              </div>
              <div class="col-lg-5">
                <label class="form-label fw-semibold">
                  <i class="bi bi-geo-alt me-1"></i> Address *
                </label>
                <input class="form-control form-control-lg" name="cust_addr" required 
                       placeholder="Enter customer address">
              </div>
              <div class="col-lg-5">
                <label class="form-label fw-semibold">
                  <i class="bi bi-telephone me-1"></i> Phone Number
                </label>
                <input class="form-control form-control-lg" name="cust_phone" 
                       placeholder="Enter phone number">
              </div>
              
              <div class="col-lg-5">
                <label for="customerDistrict" class="form-label fw-semibold"><i class="bi bi-geo-fill"></i> District *</label>
                <input type="text" class="form-control form-control-lg" id="customerDistrict" name="district" placeholder="e.g. Krishna" required>
              </div>
              <div class="col-lg-4 col-md-6">
                <label for="customerState" class="form-label fw-semibold"><i class="bi bi-geo-alt-fill"></i> State *</label>
                <input type="text" class="form-control form-control-lg" id="customerState" name="state" placeholder="e.g. Andhra Pradesh" required>
              </div>
              <div class="col-lg-4 col-md-6">
                <label class="form-label fw-semibold">
                  <i class="bi bi-truck me-1"></i> Vehicle Number
                </label>
                <input class="form-control form-control-lg" name="vehicle" placeholder="e.g., AP 01 AB 1234">
              </div>
              <div class="col-lg-4 col-md-6">
                <label class="form-label fw-semibold">
                  <i class="bi bi-card-text me-1"></i> Job Card No.
                </label>
                <input class="form-control form-control-lg" name="jobcard" placeholder="Enter job card number">
              </div>
              
            </div>
          </div>

          <!-- GST Toggle Section -->
          <div class="mb-5">
            <div class="card bg-light border-0">
              <div class="card-body py-3">
                <div class="form-check form-switch d-flex align-items-center">
                  <input class="form-check-input me-3" type="checkbox" id="gstToggle" checked 
                         style="transform: scale(1.5);">
                  <div>
                    <div class="fw-bold text-success">
                      <i class="bi bi-percent me-2"></i>Include GST (18%)
                    </div>
                    <div class="text-muted small">Toggle to include/exclude GST calculations</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Invoice Items Section -->
          <div class="mb-5">
            <div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-3">
              <div class="d-flex align-items-center">
                <div class="bg-success rounded-circle p-2 me-3">
                  <i class="bi bi-box-seam text-white"></i>
                </div>
                <h4 class="mb-0 text-success fw-bold">Invoice Items</h4>
              </div>
              <button class="btn btn-success" type="button" onclick="addRow()">
                <i class="bi bi-plus-circle-fill me-2"></i> Add Item
              </button>
            </div>
            
            <!-- Items Table -->
            <div class="table-responsive">
              <table class="table table-hover align-middle">
                <thead class="table-dark">
                  <tr>
                    <th style="width: 5%;">Sl.No</th>
                    <th style="width: 30%;">Description *</th>
                    <th style="width: 15%;">HSN</th>
                    <th style="width: 10%;">Qty *</th>
                    <th style="width: 15%;">Rate *</th>
                    <th style="width: 15%;">GST (%)</th>
                    <th style="width: 10%;">Action</th>
                  </tr>
                </thead>
                <tbody id="itemTableBody"></tbody>
              </table>
            </div>
            
            <!-- Summary Card -->
            <div class="card bg-info bg-opacity-10 border-info mt-4" id="summaryCard" style="display: none;">
              <div class="card-body">
                <div class="row text-center g-3">
                  <div class="col-6 col-lg-3">
                    <div class="fw-bold text-info">Items</div>
                    <div class="fs-5 fw-bold text-info" id="totalItems">0</div>
                  </div>
                  <div class="col-6 col-lg-3">
                    <div class="fw-bold text-warning">Subtotal</div>
                    <div class="fs-5 fw-bold text-warning" id="subtotal">₹0</div>
                  </div>
                  <div class="col-6 col-lg-3">
                    <div class="fw-bold text-secondary">GST</div>
                    <div class="fs-5 fw-bold text-secondary" id="totalGst">₹0</div>
                  </div>
                  <div class="col-6 col-lg-3">
                    <div class="fw-bold text-success">Total</div>
                    <div class="fs-4 fw-bold text-success" id="grandTotal">₹0</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Action Buttons -->
          <div class="d-grid gap-2 d-lg-flex justify-content-lg-end">
            <button type="reset" class="btn btn-outline-secondary btn-lg px-4">
              <i class="bi bi-arrow-counterclockwise me-2"></i> Reset Form
            </button>
            <button class="btn btn-primary btn-lg px-4" type="submit">
              <i class="bi bi-receipt me-2"></i> Generate PDF Invoice
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
let rowCount = 0;
const DEFAULT_GST = 18.0;

function addRow() {
  const tbody = document.getElementById('itemTableBody');
  const r = tbody.insertRow();
  rowCount++;
  
  r.innerHTML = `
    <td class="text-center fw-bold">${rowCount}</td>
    <td>
      <input type="text" class="form-control" name="desc" required placeholder="Item description">
    </td>
    <td>
      <input type="text" class="form-control" name="hsn" placeholder="HSN">
    </td>
    <td>
      <input type="number" class="form-control" name="qty" value="1" min="0" step="any" onchange="updateSummary()">
    </td>
    <td>
      <input type="number" class="form-control" name="rate" value="0" min="0" step="any" onchange="updateSummary()">
    </td>
    <td>
      <input type="number" class="form-control" name="gst" value="${DEFAULT_GST}" min="0" step="any" onchange="updateSummary()">
    </td>
    <td class="text-center">
      <button class="btn btn-outline-danger btn-sm" type="button" 
              onclick="removeRow(this)" title="Remove item">
        <i class="bi bi-trash"></i>
      </button>
    </td>`;
  
  toggleGST();
  updateSummary();
  
  // Focus on description field
  r.querySelector('[name="desc"]').focus();
}

function removeRow(btn) {
  btn.closest('tr').remove();
  updateSummary();
}

function toggleGST() {
  const on = document.getElementById('gstToggle').checked;
  document.querySelectorAll('[name="gst"]').forEach(inp => {
    inp.disabled = !on;
    if (!on) {
      inp.value = 0;
    } else {
      // Restore default value if it was 0
      if (parseFloat(inp.value) === 0) {
          inp.value = DEFAULT_GST;
      }
    }
  });
  updateSummary();
}

function updateSummary() {
  const rows = document.querySelectorAll('#itemTableBody tr');
  const summaryCard = document.getElementById('summaryCard');
  
  if (rows.length === 0) {
    summaryCard.style.display = 'none';
    return;
  }
  
  let totalItems = 0;
  let subtotal = 0;
  let totalGst = 0;
  
  rows.forEach(row => {
    const qty = parseFloat(row.querySelector('[name="qty"]').value) || 0;
    const rate = parseFloat(row.querySelector('[name="rate"]').value) || 0;
    const gst = parseFloat(row.querySelector('[name="gst"]').value) || 0;
    
    if (qty > 0 && rate > 0) {
      totalItems += qty;
      const itemTotal = qty * rate;
      subtotal += itemTotal;
      totalGst += (itemTotal * gst / 100);
    }
  });
  
  document.getElementById('totalItems').textContent = totalItems;
  document.getElementById('subtotal').textContent = `₹${subtotal.toFixed(2)}`;
  document.getElementById('totalGst').textContent = `₹${totalGst.toFixed(2)}`;
  document.getElementById('grandTotal').textContent = `₹${(subtotal + totalGst).toFixed(2)}`;
  
  summaryCard.style.display = 'block';
  summaryCard.classList.add('fade-in');
}

// Initialize
addRow();
document.getElementById('gstToggle').addEventListener('change', toggleGST);

// Form submission
document.getElementById('invForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  
  const f = e.target;
  const cust = {
    name: f.cust_name.value.trim(),
    address: f.cust_addr.value.trim(),
    district: f.district.value,
    state: f.state.value,
    vehicle: f.vehicle.value.trim(),
    jobcard: f.jobcard.value.trim(),
    phone: f.cust_phone.value.trim()
  };
  
  const items = [];
  document.querySelectorAll('#itemTableBody tr').forEach(tr => {
    const v = q => tr.querySelector(`[name="${q}"]`).value.trim();
    if (v('desc') && parseFloat(v('rate')) > 0) {
      items.push({
        desc: v('desc'),
        hsn: v('hsn'),
        qty: v('qty'),
        rate: v('rate'),
        gst: v('gst')
      });
    }
  });
  
  if (!items.length) {
    alert('Please add at least one item with description and rate.');
    return;
  }
  
  // Show loading overlay
  document.getElementById('loadingOverlay').classList.remove('d-none');
  
  try {
    const payload = new FormData();
    payload.append('payload', JSON.stringify({
      customer: cust,
      items: items,
      with_gst: document.getElementById('gstToggle').checked
    }));
    
    const res = await fetch('/generate', { method: 'POST', body: payload });
    
    if (!res.ok) {
      throw new Error('Failed to generate invoice');
    }
    
    const blob = await res.blob();
    const url = URL.createObjectURL(blob);
    
    // Show success toast
    const toast = new bootstrap.Toast(document.getElementById('successToast'));
    toast.show();
    
    // Open PDF
    window.open(url, '_blank');
    
  } catch (error) {
    alert('Error generating invoice: ' + error.message);
  } finally {
    // Hide loading overlay
    document.getElementById('loadingOverlay').classList.add('d-none');
  }
});

// Reset form handler
document.getElementById('invForm').addEventListener('reset', () => {
  setTimeout(() => {
    document.getElementById('itemTableBody').innerHTML = '';
    rowCount = 0;
    addRow();
    document.getElementById('gstToggle').checked = true;
    updateSummary();
  }, 10);
});
</script>
{% endblock %}