<?php if (!defined('STORE_ROOT')) { http_response_code(403); exit; } ?>
<?php
$payConfig = [];
try {
    if (class_exists('PaymentBridge')) {
        $payConfig = PaymentBridge::getConfig();
    }
} catch (\Throwable $e) {
    error_log('[Checkout] PaymentBridge config failed: ' . $e->getMessage());
}
$stripePk = $payConfig['stripe_pk'] ?? '';
$wallets = $payConfig['wallets'] ?? [];
$etEmail = $payConfig['etransfer']['email'] ?? '';
$isFallback = $payConfig['fallback'] ?? false;
?>
<div class="page-checkout">
    <div class="co-layout" id="co-layout">
        <div class="co-left">

            <div class="co-section">
                <div class="co-section-title">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
                    <?= $L('co_payment_method', 'Payment Method') ?>
                </div>
                <div class="co-pay-tabs" id="pay-tabs">
                    <button class="co-pay-tab pay-tab pay-tab-active" data-panel="credit" <?= $stripePk ? '' : 'disabled style="opacity:0.5"' ?>><?= $L('co_credit_tab', 'Credit / Prepaid') ?></button>
                    <button class="co-pay-tab pay-tab" data-panel="crypto"><?= $L('co_crypto_tab', 'Cryptocurrency') ?></button>
                    <button class="co-pay-tab pay-tab" data-panel="et"><?= $L('co_etransfer_tab', 'E-Transfer') ?></button>
                </div>

                <div class="co-pay-panel pay-panel active" id="panel-credit">
                    <?php if (!$stripePk): ?>
                    <div class="co-error" style="display:block;margin:20px 0;">
                        <?= $L('co_credit_unavailable', 'Credit card processing temporarily unavailable. Please use cryptocurrency or e-Transfer.') ?>
                        <?php if ($isFallback): ?>
                        <br><small><?= $L('co_payment_node_offline', 'Payment node is offline.') ?></small>
                        <?php endif; ?>
                    </div>
                    <?php endif; ?>
                    <div class="co-step-label"><?= $L('co_step1_info', 'Step 1 — Your Information') ?></div>
                    <div class="co-form-row">
                        <div class="co-form-group">
                            <label for="pay-name"><?= $L('co_full_name', 'Full Name') ?></label>
                            <input type="text" id="pay-name" class="form-input" required autocomplete="name">
                        </div>
                        <div class="co-form-group">
                            <label for="pay-email"><?= $L('co_email', 'Email Address') ?></label>
                            <input type="email" id="pay-email" class="form-input" required autocomplete="email">
                        </div>
                    </div>
                    <div class="co-form-group">
                        <label for="pay-address"><?= $L('co_street_address', 'Street Address') ?></label>
                        <input type="text" id="pay-address" class="form-input" required autocomplete="street-address">
                    </div>
                    <div class="co-form-group co-form-unit">
                        <label for="pay-unit"><?= $L('co_unit', 'Unit # (optional)') ?></label>
                        <input type="text" id="pay-unit" class="form-input" autocomplete="address-line2">
                    </div>
                    <div class="co-form-row">
                        <div class="co-form-group">
                            <label for="pay-city"><?= $L('co_city', 'City') ?></label>
                            <input type="text" id="pay-city" class="form-input" required autocomplete="address-level2">
                        </div>
                        <div class="co-form-group">
                            <label for="pay-province"><?= $L('co_province', 'Province') ?></label>
                            <select id="pay-province" class="form-input" required autocomplete="address-level1">
                                <option value="">Select...</option>
                                <option value="AB">Alberta</option>
                                <option value="BC" selected>British Columbia</option>
                                <option value="MB">Manitoba</option>
                                <option value="NB">New Brunswick</option>
                                <option value="NL">Newfoundland and Labrador</option>
                                <option value="NS">Nova Scotia</option>
                                <option value="NT">Northwest Territories</option>
                                <option value="NU">Nunavut</option>
                                <option value="ON">Ontario</option>
                                <option value="PE">Prince Edward Island</option>
                                <option value="QC">Quebec</option>
                                <option value="SK">Saskatchewan</option>
                                <option value="YT">Yukon</option>
                            </select>
                        </div>
                    </div>
                    <div class="co-form-row">
                        <div class="co-form-group">
                            <label for="pay-postal"><?= $L('co_postal', 'Postal Code') ?></label>
                            <input type="text" id="pay-postal" class="form-input" required autocomplete="postal-code">
                        </div>
                        <div class="co-form-group">
                            <label><?= $L('co_country', 'Country') ?></label>
                            <input type="text" class="form-input" value="Canada" disabled>
                            <input type="hidden" id="pay-country" value="CA">
                        </div>
                    </div>
                    <label class="co-billing-toggle">
                        <input type="checkbox" id="pay-billing-same" checked>
                        <span><?= $L('co_billing_same', 'Billing address same as shipping') ?></span>
                    </label>

                    <div class="co-step-label" style="margin-top:20px"><?= $L('co_step2_card', 'Step 2 — Secure Card Payment') ?></div>
                    <div class="co-form-group">
                        <label for="pay-card-name"><?= $L('co_name_on_card', 'Name on Card') ?></label>
                        <input type="text" id="pay-card-name" class="form-input" autocomplete="cc-name">
                    </div>
                    <div class="co-form-group">
                        <label><?= $L('co_card_number', 'Card Number') ?></label>
                        <div id="stripe-card-number" class="co-stripe-el"></div>
                    </div>
                    <div class="co-form-row">
                        <div class="co-form-group">
                            <label><?= $L('co_card_exp', 'Expiration') ?></label>
                            <div id="stripe-card-expiry" class="co-stripe-el"></div>
                        </div>
                        <div class="co-form-group">
                            <label><?= $L('co_card_cvc', 'CVC') ?></label>
                            <div id="stripe-card-cvc" class="co-stripe-el"></div>
                        </div>
                    </div>
                    <div class="co-form-group" style="max-width:200px">
                        <label for="pay-card-postal"><?= $L('co_card_postal', 'Postal Code (on card)') ?></label>
                        <input type="text" id="pay-card-postal" class="form-input" autocomplete="postal-code" placeholder="A1B 2C3">
                    </div>
                </div>

                <div class="co-pay-panel pay-panel" id="panel-crypto">
                    <div class="co-step-label"><?= $L('co_select_coin', 'Select Coin') ?></div>
                    <div class="co-crypto-row">
                        <button class="co-crypto-chip pay-crypto-btn active" data-wallet="xmr" <?= empty($wallets['XMR']['address']) ? 'disabled' : '' ?>>XMR</button>
                        <button class="co-crypto-chip pay-crypto-btn" data-wallet="usdc" <?= empty($wallets['USDC']['address']) ? 'disabled' : '' ?>>USDC</button>
                        <button class="co-crypto-chip pay-crypto-btn" data-wallet="usdt" <?= empty($wallets['USDT']['address']) ? 'disabled' : '' ?>>USDT</button>
                    </div>

                    <div class="co-crypto-wallet-box pay-wallet active" id="wallet-xmr">
                        <div class="co-crypto-instruction"><?= $L('co_crypto_send', 'Send the exact CAD equivalent in') ?> <strong>XMR (Monero)</strong> <?= $L('co_crypto_to', 'to the address below') ?>:</div>
                        <div class="co-crypto-addr pay-wallet-addr"><?= htmlspecialchars($wallets['XMR']['address'] ?? '') ?></div>
                        <button class="co-copy-btn" onclick="navigator.clipboard.writeText(this.previousElementSibling.textContent.trim());window._ceToast('\u2713');"><?= $L('co_copy', 'Copy Address') ?></button>
                    </div>
                    <div class="co-crypto-wallet-box pay-wallet" id="wallet-usdc">
                        <div class="co-crypto-instruction"><?= $L('co_crypto_send', 'Send the exact CAD equivalent in') ?> <strong>USDC (Polygon)</strong> <?= $L('co_crypto_to', 'to the address below') ?>:</div>
                        <div class="co-crypto-addr pay-wallet-addr"><?= htmlspecialchars($wallets['USDC']['address'] ?? '') ?></div>
                        <button class="co-copy-btn" onclick="navigator.clipboard.writeText(this.previousElementSibling.textContent.trim());window._ceToast('\u2713');"><?= $L('co_copy', 'Copy Address') ?></button>
                    </div>
                    <div class="co-crypto-wallet-box pay-wallet" id="wallet-usdt">
                        <div class="co-crypto-instruction"><?= $L('co_crypto_send', 'Send the exact CAD equivalent in') ?> <strong>USDT (TRC-20)</strong> <?= $L('co_crypto_to', 'to the address below') ?>:</div>
                        <div class="co-crypto-addr pay-wallet-addr"><?= htmlspecialchars($wallets['USDT']['address'] ?? '') ?></div>
                        <button class="co-copy-btn" onclick="navigator.clipboard.writeText(this.previousElementSibling.textContent.trim());window._ceToast('\u2713');"><?= $L('co_copy', 'Copy Address') ?></button>
                    </div>

                    <div class="co-form-group" style="margin-top:16px">
                        <label for="pay-txhash"><?= $L('co_tx_hash', 'Transaction Hash') ?></label>
                        <input type="text" id="pay-txhash" class="form-input" placeholder="<?= $L('co_tx_hash_placeholder', 'Paste your transaction hash here') ?>">
                    </div>

                    <div class="co-step-label" style="margin-top:20px"><?= $L('co_your_info', 'Your Information') ?></div>
                    <div class="co-form-row">
                        <div class="co-form-group">
                            <label for="pay-crypto-name"><?= $L('co_full_name', 'Full Name') ?></label>
                            <input type="text" id="pay-crypto-name" class="form-input" autocomplete="name">
                        </div>
                        <div class="co-form-group">
                            <label for="pay-crypto-email"><?= $L('co_email', 'Email Address') ?></label>
                            <input type="email" id="pay-crypto-email" class="form-input" autocomplete="email">
                        </div>
                    </div>
                    <div class="co-form-group">
                        <label for="pay-crypto-address"><?= $L('co_street_address', 'Street Address') ?></label>
                        <input type="text" id="pay-crypto-address" class="form-input" autocomplete="street-address">
                    </div>
                    <div class="co-form-row">
                        <div class="co-form-group">
                            <label><?= $L('co_city', 'City') ?></label>
                            <input type="text" id="pay-crypto-city" class="form-input">
                        </div>
                        <div class="co-form-group">
                            <label><?= $L('co_province', 'Province') ?></label>
                            <select id="pay-crypto-province" class="form-input">
                                <option value="">Select...</option>
                                <option value="AB">Alberta</option>
                                <option value="BC" selected>British Columbia</option>
                                <option value="MB">Manitoba</option>
                                <option value="NB">New Brunswick</option>
                                <option value="NL">Newfoundland and Labrador</option>
                                <option value="NS">Nova Scotia</option>
                                <option value="NT">Northwest Territories</option>
                                <option value="NU">Nunavut</option>
                                <option value="ON">Ontario</option>
                                <option value="PE">Prince Edward Island</option>
                                <option value="QC">Quebec</option>
                                <option value="SK">Saskatchewan</option>
                                <option value="YT">Yukon</option>
                            </select>
                        </div>
                    </div>
                    <div class="co-form-row">
                        <div class="co-form-group">
                            <label><?= $L('co_postal', 'Postal Code') ?></label>
                            <input type="text" id="pay-crypto-postal" class="form-input">
                        </div>
                        <div class="co-form-group">
                            <label><?= $L('co_country', 'Country') ?></label>
                            <input type="text" class="form-input" value="Canada" disabled>
                        </div>
                    </div>
                </div>

                <div class="co-pay-panel pay-panel" id="panel-et">
                    <div class="co-et-ref-box">
                        <div class="co-et-instruction"><?= $L('co_et_send_to', 'Send e-Transfer to:') ?></div>
                        <div class="co-et-email"><?= htmlspecialchars($etEmail) ?></div>
                        <div class="co-et-instruction" style="margin-top:14px"><?= $L('co_et_message_field', 'In the MESSAGE field, paste this code:') ?></div>
                        <div class="co-et-ref-code" id="pay-et-ref"></div>
                        <button class="co-copy-btn" onclick="navigator.clipboard.writeText(document.getElementById('pay-et-ref').textContent.trim());window._ceToast('\u2713');"><?= $L('co_copy_code', 'Copy Code') ?></button>
                        <div class="co-et-amount" id="pay-et-amount"></div>
                    </div>

                    <div class="co-step-label" style="margin-top:20px"><?= $L('co_your_info', 'Your Information') ?></div>
                    <div class="co-form-row">
                        <div class="co-form-group">
                            <label for="pay-et-email"><?= $L('co_email', 'Email Address') ?></label>
                            <input type="email" id="pay-et-email" class="form-input" autocomplete="email">
                        </div>
                        <div class="co-form-group">
                            <label for="pay-et-name"><?= $L('co_full_name', 'Full Name') ?></label>
                            <input type="text" id="pay-et-name" class="form-input" autocomplete="name">
                        </div>
                    </div>
                    <div class="co-form-group">
                        <label for="pay-et-address"><?= $L('co_street_address', 'Street Address') ?></label>
                        <input type="text" id="pay-et-address" class="form-input" autocomplete="street-address">
                    </div>
                    <div class="co-form-row">
                        <div class="co-form-group">
                            <label><?= $L('co_city', 'City') ?></label>
                            <input type="text" id="pay-et-city" class="form-input">
                        </div>
                        <div class="co-form-group">
                            <label><?= $L('co_province', 'Province') ?></label>
                            <select id="pay-et-province" class="form-input">
                                <option value="">Select...</option>
                                <option value="AB">Alberta</option>
                                <option value="BC" selected>British Columbia</option>
                                <option value="MB">Manitoba</option>
                                <option value="NB">New Brunswick</option>
                                <option value="NL">Newfoundland and Labrador</option>
                                <option value="NS">Nova Scotia</option>
                                <option value="NT">Northwest Territories</option>
                                <option value="NU">Nunavut</option>
                                <option value="ON">Ontario</option>
                                <option value="PE">Prince Edward Island</option>
                                <option value="QC">Quebec</option>
                                <option value="SK">Saskatchewan</option>
                                <option value="YT">Yukon</option>
                            </select>
                        </div>
                    </div>
                    <div class="co-form-row">
                        <div class="co-form-group">
                            <label><?= $L('co_postal', 'Postal Code') ?></label>
                            <input type="text" id="pay-et-postal" class="form-input">
                        </div>
                        <div class="co-form-group">
                            <label><?= $L('co_country', 'Country') ?></label>
                            <input type="text" class="form-input" value="Canada" disabled>
                        </div>
                    </div>
                </div>
            </div>

            <div class="co-section">
                <div class="co-section-title">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
                    <?= $L('co_fulfillment', 'Fulfillment') ?>
                </div>
                <div class="co-ship-options">
                    <label class="co-ship-card pay-ship-opt pay-ship-active">
                        <input type="radio" name="shipping" value="standard" checked style="display:none">
                        <div class="co-ship-radio"></div>
                        <div class="co-ship-info">
                            <span class="co-ship-name"><?= $L('co_standard_ship', 'Standard Shipping') ?></span>
                            <span class="co-ship-time"><?= $L('co_standard_time', '5–7 business days') ?></span>
                        </div>
                        <span class="co-ship-price free"><?= $L('co_free', 'Free') ?></span>
                    </label>
                    <label class="co-ship-card pay-ship-opt">
                        <input type="radio" name="shipping" value="express" style="display:none">
                        <div class="co-ship-radio"></div>
                        <div class="co-ship-info">
                            <span class="co-ship-name"><?= $L('co_express_ship', 'Express Shipping') ?></span>
                            <span class="co-ship-time"><?= $L('co_express_time', '1–3 business days') ?></span>
                        </div>
                        <span class="co-ship-price"><?= $L('co_express_price', '+ $20.00') ?></span>
                    </label>
                </div>
            </div>

        </div>

        <div class="co-right">
            <div class="co-summary-card">
                <div class="co-summary-title"><?= $L('co_order_summary', 'Order Summary') ?></div>
                <div id="pay-cart-items"></div>
                <div id="co-empty" class="co-empty-cart" style="display:none">
                    <p><?= $L('co_cart_empty', 'Your cart is empty') ?></p>
                    <button class="co-btn-link" onclick="if(typeof Router!=='undefined')Router.navigate('home')"><?= $L('co_continue_shopping', 'Continue Shopping') ?></button>
                </div>
                <div class="co-totals" id="co-totals">
                    <div class="co-totals-row"><span><?= $L('co_subtotal_label', 'Subtotal') ?></span><span id="pay-subtotal">$0.00</span></div>
                    <div class="co-totals-row"><span><?= $L('co_shipping_label', 'Shipping') ?></span><span id="pay-shipping" class="co-free"><?= $L('co_free', 'Free') ?></span></div>
                    <div class="co-totals-row" id="pay-credit-line" style="display:none"><span><?= $L('co_store_credit', 'Store Credit') ?></span><span id="pay-credit-val">-$0.00</span></div>
                    <div class="co-totals-row co-total-final"><span><?= $L('co_total_label', 'Total') ?></span><span id="pay-total">$0.00</span></div>
                </div>
                <button class="co-btn-place" id="pay-submit">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                    <span id="pay-submit-label"><?= $L('co_confirm_purchase', 'Confirm Purchase') ?></span>
                </button>
                <div class="co-fulfillment-notice"><?= $L('co_fulfillment_notice', 'All identifying records are deleted upon confirmed delivery. We retain no personal data beyond fulfillment.') ?></div>
                <div class="co-agreements">
                    <div class="co-agreement-item"><label class="co-agreement-label"><input type="checkbox" id="pay-agree-cb" class="co-agreement-check"><span><?= $Lr('co_agree_chargeback', 'I understand my order is fulfilled immediately upon payment confirmation and I agree to contact support to resolve any issues before initiating a payment dispute or chargeback.') ?></span></label></div>
                    <div class="co-agreement-item"><label class="co-agreement-label"><input type="checkbox" id="pay-agree-tos" class="co-agreement-check"><span><?= $Lr('co_agree_terms', 'I have read the Terms of Service and Privacy Policy.') ?></span></label></div>
                    <div class="co-agreement-item"><label class="co-agreement-label"><input type="checkbox" id="pay-agree-fulfillment" class="co-agreement-check"><span><?= $Lr('co_agree_fulfillment', 'I acknowledge fulfillment starts immediately upon payment verification. Orders are out for delivery by early next morning. Returns cannot always be accommodated.') ?></span></label></div>
                    <div id="pay-error" class="co-error" style="display:none"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
window._stripePk = <?= json_encode($stripePk) ?>;
window._payConfig = <?= json_encode($payConfig) ?>;
</script>
<?php if ($stripePk): ?>
<script src="https://js.stripe.com/v3/" crossorigin="anonymous"></script>
<?php endif; ?>
<script src="/assets/js/checkout/checkout.js"></script>
