<div class="modal fade" id="invoiceModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <form id="invoiceForm">
        <div class="modal-header bg-primary text-white"><h5 class="modal-title">Create Invoice</h5></div>
        <div class="modal-body">
          <div class="form-group"><label>Invoice No</label><input name="invoice_no" class="form-control" required></div>
          <div class="form-group">
            <label>Customer</label>
            <select name="customer_id" class="form-control" required>
              <?php
                $pdo=Database::getConnection();
                $c=$pdo->query("SELECT * FROM customers ORDER BY name")->fetchAll();
                foreach($c as $x){ echo "<option value='{$x['id']}'>{$x['name']}</option>"; }
              ?>
            </select>
          </div>
          <div class="form-row">
            <div class="form-group col-md-6"><label>Date</label><input type="date" name="invoice_date" class="form-control" required></div>
            <div class="form-group col-md-6"><label>Due Date</label><input type="date" name="due_date" class="form-control"></div>
          </div>
          <div class="form-group"><label>Amount (SGD)</label><input type="number" step="0.01" name="amount" class="form-control" required></div>
          <div class="form-group"><label>Description</label><textarea name="description" class="form-control"></textarea></div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Save</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </form>
    </div>
  </div>
</div>
