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

    <!-- Inline payment form template for Poynt -->
    <template id="inline_form">
        <t t-set="inline_form_values"
           t-value="provider_sudo._poynt_get_inline_form_values(
                        amount,
                        currency,
                        partner_id,
                        mode == 'validation',
                        payment_method_sudo=pm_sudo,
                    )"
        />
        <div name="o_poynt_payment_container"
             class="o_poynt_payment_form"
             t-att-data-poynt-inline-form-values="inline_form_values">

            <!-- Card number input -->
            <div class="mb-3">
                <label class="form-label" for="poynt_card_number">Card Number</label>
                <input type="text" class="form-control"
                       id="poynt_card_number"
                       name="card_number"
                       placeholder="4111 1111 1111 1111"
                       maxlength="19"
                       autocomplete="cc-number"
                       required="required"/>
            </div>

            <!-- Expiry and CVV row -->
            <div class="row mb-3">
                <div class="col-6">
                    <label class="form-label" for="poynt_expiry">Expiry Date</label>
                    <input type="text" class="form-control"
                           id="poynt_expiry"
                           name="expiry"
                           placeholder="MM/YY"
                           maxlength="5"
                           autocomplete="cc-exp"
                           required="required"/>
                </div>
                <div class="col-6">
                    <label class="form-label" for="poynt_cvv">CVV</label>
                    <input type="password" class="form-control"
                           id="poynt_cvv"
                           name="cvv"
                           placeholder="123"
                           maxlength="4"
                           autocomplete="cc-csc"
                           required="required"/>
                </div>
            </div>

            <!-- Cardholder name -->
            <div class="mb-3">
                <label class="form-label" for="poynt_cardholder">Cardholder Name</label>
                <input type="text" class="form-control"
                       id="poynt_cardholder"
                       name="cardholder_name"
                       placeholder="John Doe"
                       autocomplete="cc-name"/>
            </div>

            <!-- Billing address -->
            <div class="mb-3 o_poynt_billing_section">
                <label class="form-label fw-bold">Billing Address</label>
                <div class="mb-2">
                    <input type="text" class="form-control"
                           id="poynt_billing_address"
                           name="billing_address"
                           placeholder="Street Address"
                           autocomplete="billing street-address"/>
                </div>
                <div class="row mb-2">
                    <div class="col-6">
                        <input type="text" class="form-control"
                               id="poynt_billing_city"
                               name="billing_city"
                               placeholder="City"
                               autocomplete="billing address-level2"/>
                    </div>
                    <div class="col-6">
                        <input type="text" class="form-control"
                               id="poynt_billing_state"
                               name="billing_state"
                               placeholder="Province / State"
                               autocomplete="billing address-level1"/>
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-6">
                        <input type="text" class="form-control"
                               id="poynt_billing_zip"
                               name="billing_zip"
                               placeholder="Postal Code"
                               autocomplete="billing postal-code"/>
                    </div>
                    <div class="col-6">
                        <input type="text" class="form-control"
                               id="poynt_billing_country"
                               name="billing_country"
                               placeholder="Country Code (CA, US)"
                               maxlength="2"
                               autocomplete="billing country"/>
                    </div>
                </div>
            </div>

            <!-- Card type selector (for terminal payments where card brand cannot be auto-detected) -->
            <div class="mb-3 o_poynt_card_type_section" style="display:none;">
                <label class="form-label">Card Type</label>
                <div class="d-flex gap-2 flex-wrap">
                    <div class="form-check">
                        <input type="radio" class="form-check-input" name="poynt_card_type"
                               id="poynt_ct_visa" value="visa"/>
                        <label class="form-check-label" for="poynt_ct_visa">Visa</label>
                    </div>
                    <div class="form-check">
                        <input type="radio" class="form-check-input" name="poynt_card_type"
                               id="poynt_ct_mc" value="mastercard"/>
                        <label class="form-check-label" for="poynt_ct_mc">Mastercard</label>
                    </div>
                    <div class="form-check">
                        <input type="radio" class="form-check-input" name="poynt_card_type"
                               id="poynt_ct_amex" value="amex"/>
                        <label class="form-check-label" for="poynt_ct_amex">Amex</label>
                    </div>
                    <div class="form-check">
                        <input type="radio" class="form-check-input" name="poynt_card_type"
                               id="poynt_ct_other" value="other" checked="checked"/>
                        <label class="form-check-label" for="poynt_ct_other">Other</label>
                    </div>
                </div>
            </div>

            <!-- Surcharge notice (shown when surcharge is enabled) -->
            <div class="mb-3 o_poynt_surcharge_notice" style="display:none;">
                <div class="alert alert-info py-2 mb-0">
                    <small>
                        <i class="fa fa-info-circle me-1"/>
                        <span>A credit card processing fee of </span>
                        <strong id="poynt_surcharge_rate">0.00</strong>
                        <span>% (<strong id="poynt_surcharge_amount">$0.00</strong>) will be added to your total.</span>
                    </small>
                </div>
            </div>

            <!-- Terminal payment option -->
            <div class="mb-3 o_poynt_terminal_section" style="display:none;">
                <hr/>
                <div class="form-check">
                    <input type="checkbox" class="form-check-input"
                           id="poynt_use_terminal" name="use_terminal"/>
                    <label class="form-check-label" for="poynt_use_terminal">
                        Pay at Terminal
                    </label>
                </div>
                <div id="poynt_terminal_select_wrapper" style="display:none;" class="mt-2">
                    <label class="form-label" for="poynt_terminal_select">Select Terminal</label>
                    <select class="form-select" id="poynt_terminal_select" name="terminal_id">
                    </select>
                </div>
            </div>

            <!-- Processing overlay (hidden until payment is submitted) -->
            <div class="o_poynt_processing_overlay" style="display:none;">
                <div class="text-center p-4">
                    <div class="spinner-border text-primary mb-3" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <h5 class="o_poynt_processing_message">Processing your payment...</h5>
                    <p class="text-muted">Please do not close this page.</p>
                </div>
            </div>
        </div>
    </template>

</odoo>
