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

{% block content %}
  <div class="page-header">
    <a class="back-btn" href="{{ back_url }}" aria-label="Back">←</a>
    <h1>{{ heading }}</h1>
  </div>

  {% if error %}
    <div class="alert alert-danger">{{ error }}</div>
  {% endif %}

  <form class="quotation-card" method="post" action="{{ form_action }}" data-quotation-form>
    <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">
          <span>👤</span>
          Customer Information
        </h2>

        <div class="form-grid">
          <div class="field full {{ errors.client_name is defined ? 'has-error' : '' }}">
            <label>Client Name <span class="required">*</span></label>
            <input type="text" name="client_name" value="{{ form.client_name }}" list="customer-options" data-customer-name>
            {% if errors.client_name is defined %}<span class="form-error">{{ errors.client_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 <span class="required">*</span></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 {{ errors.phone is defined ? 'has-error' : '' }}">
            <label>Phone <span class="required">*</span></label>
            <input type="text" name="phone" value="{{ form.phone }}" data-customer-phone>
            {% if errors.phone is defined %}<span class="form-error">{{ errors.phone }}</span>{% endif %}
          </div>

          <div class="field full {{ errors.billing_address is defined ? 'has-error' : '' }}">
            <label>Billing Address <span class="required">*</span></label>
            <textarea name="billing_address" data-customer-address>{{ form.billing_address }}</textarea>
            <input type="hidden" name="tax_number" value="{{ form.tax_number|default('') }}" data-customer-tax-number>
            {% if errors.billing_address is defined %}<span class="form-error">{{ errors.billing_address }}</span>{% endif %}
          </div>
        </div>
      </section>

      <section>
        <h2 class="section-title">
          <span aria-hidden="true">
            <svg viewBox="0 0 24 24">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"></path>
              <path d="M14 2v6h6"></path>
              <path d="M8 13h8M8 17h6"></path>
            </svg>
          </span>
          {{ details_title|default('Quote Details') }}
        </h2>

        <div class="form-grid">
          <div class="field full {{ errors.quotation_number is defined ? 'has-error' : '' }}">
            <label>{{ number_label|default('Quotation Number') }}</label>
            <input type="text" name="quotation_number" value="{{ form.quotation_number }}" readonly>
            <span class="field-help">Generated automatically from your document numbering settings.</span>
            {% if errors.quotation_number is defined %}<span class="form-error">{{ errors.quotation_number }}</span>{% endif %}
          </div>

          <div class="field full {{ errors.issue_date is defined ? 'has-error' : '' }}">
            <label>Issue 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 {{ errors.valid_until is defined ? 'has-error' : '' }}">
            <label>{{ secondary_date_label|default('Valid Until') }} <span class="required">*</span></label>
            <input type="date" name="valid_until" value="{{ form.valid_until }}">
            {% if errors.valid_until is defined %}<span class="form-error">{{ errors.valid_until }}</span>{% endif %}
          </div>

          <div class="field full">
            <label>Status <span class="required">*</span></label>
            <select name="status">
              {% for value, label in status_options|default({'draft': 'Draft', 'sent': 'Sent', 'accepted': 'Accepted', 'rejected': 'Rejected'}) %}
                <option value="{{ value }}" {{ form.status == value ? 'selected' : '' }}>{{ label }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
      </section>
    </div>

    <section class="items-section">
      <div class="section-header-row">
        <h2 class="section-title">
          <span>🛒</span>
          {{ items_title|default('Items / Services') }}
        </h2>

        <button class="btn btn-outline" type="button" data-add-item>+ Add Item</button>
      </div>

      <div class="table-wrap">
        {% if errors.items is defined %}
          <div class="form-error form-error-table">{{ errors.items }}</div>
        {% endif %}

        <table>
          <thead>
            <tr>
              <th>#</th>
              <th>Item Description</th>
              <th>Quantity</th>
              <th>Unit Price</th>
              <th>Discount (%)</th>
              <th>Tax</th>
              <th>Line 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="Item name" 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="Description">
                  {% 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 {{ attribute(errors, 'items.' ~ loop.index0 ~ '.quantity') is defined ? 'input-error' : '' }}" 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 {{ attribute(errors, 'items.' ~ loop.index0 ~ '.unit_price') is defined ? 'input-error' : '' }}" type="text" 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 == 'VAT (10%)' or item.tax == 'VAT (10.0%)' ? 'selected' : '' }}>VAT (10%)</option>
                    <option {{ item.tax == 'VAT (16%)' or item.tax == 'VAT (16.0%)' ? 'selected' : '' }}>VAT (16%)</option>
                    <option {{ item.tax == 'No Tax' ? 'selected' : '' }}>No Tax</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">
          <span>✎</span>
          Notes / Terms
        </h2>

        <div class="editor">
          <div class="editor-toolbar">
            <span>Normal</span>
            <strong>B</strong>
            <em>I</em>
            <u>U</u>
            <span>☷</span>
            <span>Link</span>
          </div>

          <textarea name="terms">{{ form.terms }}</textarea>
        </div>
      </div>

      <aside class="summary-card">
        <h2 class="section-title">
          <span>🏷</span>
          Summary
        </h2>

        <div class="summary-row">
          <span>Subtotal</span>
          <strong data-summary-subtotal>{{ form.summary.subtotal|default('$0.00') }}</strong>
        </div>

        <div class="summary-row discount">
          <span>Discount</span>
          <strong data-summary-discount>{{ form.summary.discount|default('- $0.00') }}</strong>
        </div>

        <div class="summary-row">
          <span>Tax</span>
          <strong data-summary-tax>{{ form.summary.tax|default('$0.00') }}</strong>
        </div>

        <div class="summary-divider"></div>

        <div class="grand-total">
          <span>Grand Total</span>
          <strong data-summary-grand-total>{{ form.summary.grand_total|default('$0.00') }}</strong>
        </div>
      </aside>
    </section>

    <div class="action-bar">
      <button class="btn btn-outline" type="submit">Save Draft</button>
      <div class="action-center">
        <a class="btn btn-outline" href="{{ back_url }}">Cancel</a>
      </div>
      <button class="btn btn-primary" type="submit">Send Quotation</button>
    </div>
  </form>
{% endblock %}