{% extends 'layouts/app.twig' %}

{% block content %}
  <div class="page-header">
    <a class="back-btn" href="{{ base_url }}/vouchers" aria-label="Back to vouchers">←</a>
    <h1>Create Voucher</h1>
  </div>

  {% if error %}
    <div class="alert alert-danger">{{ error }}</div>
  {% elseif errors is not empty %}
    <div class="alert alert-danger">Please correct the highlighted fields.</div>
  {% endif %}

  <form class="quotation-card" method="post" action="{{ base_url }}/vouchers" data-quotation-form data-currency="{{ form.currency }}">
    <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">

    <datalist id="customer-options">
      {% for customer in customer_options %}
        <option value="{{ customer.name }}" data-company="{{ customer.company_name }}" data-email="{{ customer.email }}" data-phone="{{ customer.phone }}" data-address="{{ customer.billing_address }}" data-tax-number="{{ customer.tax_number }}"></option>
      {% endfor %}
    </datalist>

    <datalist id="product-options">
      {% for product in product_options %}
        <option value="{{ product.name }}" data-description="{{ product.description }}" data-price="{{ product.unit_price }}" data-tax="{{ product.tax_rate }}"></option>
      {% endfor %}
    </datalist>

    {% if errors._csrf_token is defined %}<div class="form-error form-error-top">{{ errors._csrf_token }}</div>{% endif %}

    <div class="form-top">
      <section>
        <h2 class="section-title">Payee Information</h2>
        <div class="form-grid">
          <div class="field full {{ errors.payee_name is defined ? 'has-error' : '' }}">
            <label>Payee Name <span class="required">*</span></label>
            <input type="text" name="payee_name" value="{{ form.payee_name }}" list="customer-options" data-customer-name>
            {% if errors.payee_name is defined %}<span class="form-error">{{ errors.payee_name }}</span>{% endif %}
          </div>
          <div class="field full">
            <label>Company Name</label>
            <input type="text" name="company_name" value="{{ form.company_name }}" data-customer-company>
          </div>
          <div class="field {{ errors.email is defined ? 'has-error' : '' }}">
            <label>Email</label>
            <input type="email" name="email" value="{{ form.email }}" data-customer-email>
            {% if errors.email is defined %}<span class="form-error">{{ errors.email }}</span>{% endif %}
          </div>
          <div class="field">
            <label>Phone</label>
            <input type="text" name="phone" value="{{ form.phone }}" data-customer-phone>
          </div>
          <div class="field full">
            <label>Address</label>
            <textarea name="address" data-customer-address>{{ form.address }}</textarea>
            <input type="hidden" name="tax_number" value="{{ form.tax_number }}" data-customer-tax-number>
          </div>
        </div>
      </section>

      <section>
        <h2 class="section-title">Payment Details</h2>
        <div class="form-grid">
          <div class="field full {{ errors.issue_date is defined ? 'has-error' : '' }}">
            <label>Payment Date <span class="required">*</span></label>
            <input type="date" name="issue_date" value="{{ form.issue_date }}">
            {% if errors.issue_date is defined %}<span class="form-error">{{ errors.issue_date }}</span>{% endif %}
          </div>
          <div class="field full">
            <label>Status</label>
            <select name="status">
              <option value="draft" {{ form.status == 'draft' ? 'selected' : '' }}>Draft</option>
              <option value="paid" {{ form.status == 'paid' ? 'selected' : '' }}>Paid</option>
              <option value="cancelled" {{ form.status == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
            </select>
          </div>
          <div class="field full">
            <label>Payment Method</label>
            <select name="payment_method">
              <option value="">Select method</option>
              {% for method in ['Cash', 'Bank Transfer', 'M-Pesa', 'Cheque', 'Card', 'Other'] %}
                <option value="{{ method }}" {{ form.payment_method == method ? 'selected' : '' }}>{{ method }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="field full">
            <label>Reference</label>
            <input type="text" name="reference" value="{{ form.reference }}">
          </div>
        </div>
      </section>
    </div>

    <section class="items-section">
      <div class="section-header-row">
        <h2 class="section-title">Expense Items</h2>
        <button class="btn btn-outline" type="button" data-add-item>Add Item</button>
      </div>
      {% if errors.items is defined %}<div class="form-error form-error-table">{{ errors.items }}</div>{% endif %}
      <div class="table-wrap">
        <table>
          <thead>
            <tr><th>#</th><th>Description</th><th>Quantity</th><th>Unit Amount</th><th>Discount (%)</th><th>Tax</th><th>Total</th><th></th></tr>
          </thead>
          <tbody data-items-body>
            {% for item in form.items %}
              <tr data-item-row>
                <td data-row-number>{{ loop.index }}</td>
                <td>
                  <input class="table-text-input item-name-input {{ attribute(errors, 'items.' ~ loop.index0 ~ '.name') is defined ? 'input-error' : '' }}" type="text" name="items[{{ loop.index0 }}][name]" value="{{ item.name }}" placeholder="Expense item" list="product-options" data-product-name>
                  <input class="table-text-input item-desc-input" type="text" name="items[{{ loop.index0 }}][description]" value="{{ item.description }}" placeholder="Details">
                  {% if attribute(errors, 'items.' ~ loop.index0 ~ '.name') is defined %}<span class="form-error">{{ attribute(errors, 'items.' ~ loop.index0 ~ '.name') }}</span>{% endif %}
                </td>
                <td>
                  <input class="table-input" type="number" step="0.01" name="items[{{ loop.index0 }}][quantity]" value="{{ item.quantity }}">
                  {% if attribute(errors, 'items.' ~ loop.index0 ~ '.quantity') is defined %}<span class="form-error">{{ attribute(errors, 'items.' ~ loop.index0 ~ '.quantity') }}</span>{% endif %}
                </td>
                <td>
                  <input class="table-input" type="number" step="0.01" name="items[{{ loop.index0 }}][unit_price]" value="{{ item.price }}">
                  {% if attribute(errors, 'items.' ~ loop.index0 ~ '.unit_price') is defined %}<span class="form-error">{{ attribute(errors, 'items.' ~ loop.index0 ~ '.unit_price') }}</span>{% endif %}
                </td>
                <td><input class="table-input" type="number" step="0.01" name="items[{{ loop.index0 }}][discount_rate]" value="{{ item.discount }}"></td>
                <td>
                  <select class="tax-select" name="items[{{ loop.index0 }}][tax_rate]">
                    <option {{ item.tax == 'No Tax' ? 'selected' : '' }}>No Tax</option>
                    <option {{ item.tax starts with 'VAT (10' ? 'selected' : '' }}>VAT (10%)</option>
                    <option {{ item.tax starts with 'VAT (16' ? 'selected' : '' }}>VAT (16%)</option>
                  </select>
                </td>
                <td class="line-total">{{ item.total }}</td>
                <td><button class="remove-row-btn" type="button" aria-label="Remove item" data-remove-item>×</button></td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </section>

    <section class="bottom-section">
      <div>
        <h2 class="section-title">Notes</h2>
        <div class="editor"><textarea name="notes">{{ form.notes }}</textarea></div>
      </div>
      <aside class="summary-card">
        <h2 class="section-title">Summary</h2>
        <div class="summary-row"><span>Subtotal</span><strong data-summary-subtotal>{{ form.summary.subtotal }}</strong></div>
        <div class="summary-row discount"><span>Discount</span><strong data-summary-discount>{{ form.summary.discount }}</strong></div>
        <div class="summary-row"><span>Tax</span><strong data-summary-tax>{{ form.summary.tax }}</strong></div>
        <div class="summary-divider"></div>
        <div class="grand-total"><span>Total</span><strong data-summary-grand-total>{{ form.summary.grand_total }}</strong></div>
      </aside>
    </section>

    <div class="action-bar">
      <a class="btn btn-outline" href="{{ base_url }}/vouchers">Cancel</a>
      <button class="btn btn-primary" type="submit">Save Voucher</button>
    </div>
  </form>
{% endblock %}