<?php
/**
 * Starter 2026 — One-Page Checkout (Premium)
 * All checkout steps on a single page
 * CodeIgniter 3.1.9
 */
$currency = $store_setting['currency_sign'] ?? '$';
$is_rtl = (isset($store_setting['store_direction']) && $store_setting['store_direction'] == 'rtl');
?>

<link rel="stylesheet" href="<?= base_url('assets/plugins/tel/css/intlTelInput.css') ?>?v=<?= av() ?>">
<script src="<?= base_url('assets/plugins/tel/js/intlTelInput.js') ?>"></script>

<div class="container">
    <nav class="s26-breadcrumb" aria-label="Breadcrumb">
        <a href="<?= $home_link ?? $base_url ?>"><?= __('store.home') ?? 'Home' ?></a>
        <span class="separator"><i class="fas fa-chevron-right"></i></span>
        <span class="current"><?= __('store.checkout') ?? 'Checkout' ?></span>
    </nav>
</div>

<!-- Progress Bar -->
<div class="container">
    <div class="s26-checkout-steps">
        <div class="s26-checkout-step active"><div class="s26-checkout-step__icon"><i class="fas fa-shopping-cart"></i></div><span class="s26-checkout-step__label"><?= __('store.cart') ?? 'Cart' ?></span></div>
        <div class="s26-checkout-step__line completed"></div>
        <div class="s26-checkout-step active"><div class="s26-checkout-step__icon"><i class="fas fa-truck"></i></div><span class="s26-checkout-step__label"><?= __('store.shipping') ?? 'Shipping' ?></span></div>
        <div class="s26-checkout-step__line completed"></div>
        <div class="s26-checkout-step active"><div class="s26-checkout-step__icon"><i class="fas fa-credit-card"></i></div><span class="s26-checkout-step__label"><?= __('store.payment') ?? 'Payment' ?></span></div>
    </div>
</div>

<section class="s26-checkout-page">
    <div class="container">
        <div class="row g-4">
            <!-- Left Column: Forms -->
            <div class="col-lg-7">
                <form id="checkout-one-page-form" method="post" action="<?= $checkout_url ?>/confirm_order" enctype="multipart/form-data">

                    <!-- Customer Info (Guest) -->
                    <?php if (!$is_logged): ?>
                    <div class="s26-checkout-card mb-4">
                        <div class="s26-checkout-card__header">
                            <i class="fas fa-user"></i>
                            <h3><?= __('store.customer_info') ?? 'Customer Information' ?></h3>
                        </div>
                        <div class="s26-checkout-card__body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="s26-form-label"><?= __('store.email') ?> <span class="text-danger">*</span></label>
                                    <input type="email" name="email" class="s26-form-control" required placeholder="<?= __('store.email') ?>">
                                </div>
                                <div class="col-md-6">
                                    <label class="s26-form-label"><?= __('store.phone') ?></label>
                                    <input type="text" name="phone" id="s26-onepage-phone" class="s26-form-control" placeholder="<?= __('store.phone') ?>">
                                </div>
                            </div>
                            <p class="mt-2 mb-0" style="font-size:13px">
                                <span class="text-muted"><?= __('store.already_have_account') ?? 'Already have an account?' ?></span>
                                <a href="<?= $base_url ?>login" style="color:var(--s26-primary);font-weight:700"><?= __('store.login') ?></a>
                            </p>
                        </div>
                    </div>
                    <script>
                    var tel_input_onepage = intlTelInput(document.querySelector("#s26-onepage-phone"), {
                        initialCountry: "auto",
                        utilsScript: "<?= base_url('/assets/plugins/tel/js/utils.js?1562189064761') ?>",
                        separateDialCode: true,
                        geoIpLookup: function(success) {
                            $.get("https://ipinfo.io", function() {}, "jsonp").always(function(resp) {
                                success((resp && resp.country) ? resp.country : "");
                            });
                        },
                    });
                    </script>
                    <?php endif; ?>

                    <!-- Shipping Address -->
                    <?php if ($allow_shipping): ?>
                    <div class="s26-checkout-card mb-4">
                        <div class="s26-checkout-card__header">
                            <i class="fas fa-map-marker-alt"></i>
                            <h3><?= __('store.shipping_address') ?? 'Shipping Address' ?></h3>
                        </div>
                        <div class="s26-checkout-card__body">
                            <div id="s26-onepage-shipping">
                                <div class="text-center py-4">
                                    <div class="spinner-border spinner-border-sm text-primary"></div>
                                    <span class="text-muted ms-2"><?= __('store.loading') ?? 'Loading...' ?></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php endif; ?>

                    <!-- Payment -->
                    <div class="s26-checkout-card mb-4">
                        <div class="s26-checkout-card__header">
                            <i class="fas fa-credit-card"></i>
                            <h3><?= __('store.payment_method') ?? 'Payment Method' ?></h3>
                        </div>
                        <div class="s26-checkout-card__body">
                            <div id="s26-onepage-payment">
                                <div class="dynamic-payment"></div>
                            </div>
                        </div>
                    </div>

                    <!-- Order Notes -->
                    <div class="s26-checkout-card mb-4">
                        <div class="s26-checkout-card__header">
                            <i class="fas fa-comment-alt"></i>
                            <h3><?= __('store.order_comments') ?? 'Order Notes' ?></h3>
                        </div>
                        <div class="s26-checkout-card__body">
                            <textarea name="order_comment" class="s26-form-control" rows="3" placeholder="<?= __('store.order_comments') ?? 'Notes about your order...' ?>"></textarea>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Right Column: Order Summary -->
            <div class="col-lg-5">
                <div class="s26-checkout-card s26-checkout-sticky">
                    <div class="s26-checkout-card__header">
                        <i class="fas fa-receipt"></i>
                        <h3><?= __('store.order_summary') ?? 'Order Summary' ?></h3>
                    </div>
                    <div class="s26-checkout-card__body">
                        <?php if (!empty($products)): ?>
                        <?php foreach ($products as $p): ?>
                        <div class="s26-onepage-item">
                            <div class="s26-onepage-item__img">
                                <img src="<?= !empty($p['product_featured_image']) ? $p['product_featured_image'] : base_url('assets/store/default/img/pr-img.png') ?>"
                                     alt="" onerror="this.src='<?= base_url('assets/store/default/img/pr-img.png') ?>'">
                                <span class="s26-onepage-item__badge"><?= $p['quantity'] ?></span>
                            </div>
                            <div class="s26-onepage-item__info">
                                <p class="s26-onepage-item__name"><?= htmlspecialchars($p['product_name']) ?></p>
                                <?php if (!empty($p['variation_name'])): ?>
                                <small class="text-muted"><?= $p['variation_name'] ?></small>
                                <?php endif; ?>
                            </div>
                            <span class="s26-onepage-item__price"><?= c_format(($p['product_price'] + ($p['variation_price'] ?? 0)) * $p['quantity']) ?></span>
                        </div>
                        <?php endforeach; ?>
                        <?php endif; ?>

                        <!-- Coupon -->
                        <div class="s26-coupon-input-group mt-3" style="padding:4px 4px 4px 14px;">
                            <i class="fas fa-ticket-alt" style="color:var(--s26-text-muted);font-size:13px"></i>
                            <input type="text" name="coupon_code" class="coupon-code" placeholder="<?= __('store.coupon_code') ?? 'Coupon Code' ?>" style="flex:1;border:none;outline:none;background:transparent;font-size:13px;font-family:var(--s26-font);padding:8px 0">
                            <button type="button" class="btn-apply-coupon" id="apply-coupon" style="background:var(--s26-dark);color:#fff;border:none;border-radius:var(--s26-radius-xs);padding:8px 16px;font-size:12px;font-weight:700;cursor:pointer"><?= __('store.apply') ?? 'Apply' ?></button>
                        </div>

                        <!-- Totals -->
                        <div class="s26-checkout-cart__totals mt-3">
                            <?php if (!empty($totals)): ?>
                            <?php foreach ($totals as $t): ?>
                            <div class="s26-checkout-cart__total-row">
                                <span class="text-muted"><?= $t['text'] ?? $t['title'] ?? '' ?></span>
                                <span class="fw-bold"><?= c_format($t['value'] ?? $t['amount'] ?? 0) ?></span>
                            </div>
                            <?php endforeach; ?>
                            <?php endif; ?>
                            <div class="s26-checkout-cart__total-row s26-checkout-cart__total-row--grand">
                                <span><?= __('store.total') ?? 'Total' ?></span>
                                <span style="color:var(--s26-primary)"><?= isset($total) ? c_format($total) : '' ?></span>
                            </div>
                        </div>

                        <button type="submit" form="checkout-one-page-form" class="s26-btn-primary s26-btn--lg w-100 justify-content-center mt-4 confirm-order">
                            <i class="fas fa-lock"></i>
                            <?= __('store.place_order') ?? 'Place Order' ?>
                        </button>

                        <p class="text-center mt-3" style="font-size:12px;color:var(--s26-text-muted)">
                            <i class="fas fa-shield-alt me-1"></i>
                            <?= __('store.secure_checkout') ?? 'Secure & encrypted checkout' ?>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
$(document).ready(function(){
    var shippingDiv = $('#s26-onepage-shipping');
    if (shippingDiv.length) {
        $.get('<?= base_url('store/checkout_shipping') ?>', function(html){ shippingDiv.html(html); });
    }

    // Load payment methods
    $.ajax({
        url: '<?= base_url('store/get_payment_mothods') ?>',
        type: 'POST',
        dataType: 'json',
        success: function(json){ $(".dynamic-payment").html(json['html']); }
    });
});
</script>
