<?xml version="1.0" encoding="utf-8"?>

<templates id="template" inherit_id="point_of_sale.template">

  <t t-name="PaymentTransactionPopupWidget">
    <div class="modal-dialog">
      <div class="popup">
        <p class="title">Electronic Payment</p>
        <p class="body"></p>
      </div>
    </div>
  </t>

  <t t-name="PaymentManualTransactionPopupWidget">
    <div class="modal-dialog">
      <div class="popup payment-manual-transaction">
        <p class="title">Manual Electronic Payment</p>
        <label for="card_number">Card Number</label>
        <input name="card_number" type="text" t-att-value="widget.options.card_number || ''" placeholder="4355111122223333" autocomplete="off"></input>
        <label for="exp_date">Expiration Date <span>(4 digits)</span></label>
        <input name="exp_date" type="text" t-att-value="widget.options.exp_date || ''" placeholder="0223" autocomplete="off"></input>
        <label for="cvv2cvc2">Card Security Code <span>(3 or 4 digits)</span></label>
        <input name="cvv2cvc2" type="text" t-att-value="widget.options.cvv2cvc2 || ''" placeholder="003" autocomplete="off"></input>
        <p class="body"></p>
        <div class="footer">
          <div class="button confirm">
            Ok
          </div>
          <div class="button cancel">
            Cancel
          </div>
        </div>
      </div>
    </div>
  </t>

  <t t-extend="PaymentScreen-Paymentlines">
    <t t-jquery=".col-name" t-operation="inner">
      <t t-if="line.cashregister.journal.type === 'bank'">
        <t t-if="line.elavon_swipe_pending">
          <div>WAITING FOR SWIPE</div>
        </t>
        <t t-if="! line.elavon_swipe_pending">
          <t t-esc='line.name' />
        </t>
        <t t-else="">
          <span class="btn btn-small elavon_manual_transaction">Manual</span>
        </t>
      </t>
      <t t-if="line.cashregister.journal.type !== 'bank'">
        <t t-esc='line.name' />
      </t>
    </t>
    <t t-jquery="tbody tr.paymentline.selected">
      this.removeAttr('class');
      this.attr('t-attf-class', 'paymentline selected #{line.elavon_swipe_pending ? \'o_pos_elavon_swipe_pending\' : \'\'}');
    </t>
    <t t-jquery="tbody tr.paymentline[t-att-data-cid*='line.cid']">
      this.removeAttr('class');
      this.attr('t-attf-class', 'paymentline #{line.elavon_swipe_pending ? \'o_pos_elavon_swipe_pending\' : \'\'}');
    </t>
    <t t-jquery="tbody tr td.col-tendered.edit">
      this.removeAttr('class');
      this.attr('t-attf-class', 'col-tendered edit #{line.elavon_swipe_pending ? \'o_pos_elavon_swipe_pending\' : \'\'}');
    </t>
  </t>

  <t t-name="PosElavonSignature">
    <t t-foreach="paymentlines" t-as="paymentline">
      <t t-if="!gift &amp;&amp; paymentline.elavon_data &amp;&amp; ! printed_signature">
        <br />
        <div>CARDHOLDER WILL PAY CARD ISSUER</div>
        <div>ABOVE AMOUNT PURSUANT</div>
        <div>TO CARDHOLDER AGREEMENT</div>
        <br />
        <br />
        <div>X______________________________</div>
        <t t-set="printed_signature" t-value="true"/>
      </t>
    </t>
  </t>

  <t t-extend="XmlReceipt">
    <t t-jquery="t[t-foreach*='paymentlines'][t-as*='line']" t-operation="append">
      <t t-if="!gift &amp;&amp; line.elavon_data">
        <line line-ratio="1">
          <left><pre>  APPROVAL CODE:</pre><t t-esc="line.elavon_auth_code"/></left>
        </line>
      </t>
    </t>
    <t t-jquery="receipt" t-operation="append">
      <div>
        <t t-call="PosElavonSignature"/>
      </div>
    </t>
  </t>

  <t t-extend="PosTicket">
    <t t-jquery="t[t-foreach*='paymentlines'][t-as*='line']" t-operation="append">
      <tr>
        <td colspan="2">
          <t t-if="!gift &amp;&amp; line.elavon_auth_code">
            &amp;nbsp;&amp;nbsp;APPROVAL CODE: <t t-esc="line.elavon_auth_code"/>
          </t>
        </td>
      </tr>
    </t>
    <t t-jquery="t[t-if*='receipt.footer']" t-operation="after">
      <div class="pos-center-align">
        <t t-call="PosElavonSignature"/>
      </div>
    </t>
  </t>
</templates>
