<?php 
use Core\App\Models\Settings;

$settingsModel = new Settings();
$storePhone = trim((string)$settingsModel->get('contact_phone', ''));
$productName = $order['extra']['product']['name'] ?? '';
$qty         = (int)($order['extra']['quantity'] ?? 1);

$currency    = $order['extra']['pricing']['currency'] ?? '';
$shipping    = (float)($order['extra']['pricing']['shipping_price'] ?? 0);
$total       = (float)($order['extra']['pricing']['total'] ?? ($order['total_amount'] ?? 0));

$productPriceSingle = (float)($order['extra']['product']['price'] ?? 0);
$productLineTotal   = $productPriceSingle * max(1, $qty);

?>

<style>
.order-success-wrap{
    max-width: 960px;
    margin: 0 auto;
    padding: 70px 16px;
    text-align: center;
}

/* ===== TITLE ===== */
.success-title{
    font-size: 32px;
    font-weight: 900;
    margin-bottom: 16px;
    color: var(--success);
    animation: popFade 2.8s ease-in-out infinite;
}

@keyframes popFade{
    0%{ transform: scale(.95); opacity: .2; }
    20%{ transform: scale(1); opacity: 1; }
    60%{ transform: scale(1); opacity: 1; }
    100%{ transform: scale(.98); opacity: .2; }
}

.success-sub{
    color: #6c757d;
    margin-bottom: 36px;
    line-height: 1.9;
    font-size: 16px;
}

/* ===== SUMMARY CARD ===== */
.order-summary-card{
    max-width: 620px; /* 🔹 تم تكبيره */
    margin: 0 auto;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

/* HEADER */
.order-summary-head{
    background: var(--primary);
    color: #fff;
    padding: 18px 20px;
    font-weight: 800;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* RTL / LTR */
html[dir="rtl"] .order-summary-head{
    justify-content: flex-end;
    text-align: right;
}
html[dir="ltr"] .order-summary-head{
    justify-content: flex-start;
    text-align: left;
}

/* BODY */
.order-summary-body{
    background: #fff;
}

.order-row{
    display:flex;
    justify-content:space-between;
    align-items: center;
    padding: 16px 20px;
    border-top: 1px solid rgba(0,0,0,.06);
    font-weight: 600;
    font-size: 15px;
}

.order-row small{
    font-weight: 500;
    color:#6c757d;
}

.order-row.total{
    font-weight: 900;
    font-size: 17px;
    background: rgba(26,224,85,.08); /* success soft */
}

/* QTY BADGE */
.badge-qty{
    background: var(--primary);
    color:#fff;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 12px;
    margin-inline-start: 8px;
}
</style>

<div class="order-success-wrap">

    <div class="success-title">
        <?= __('checkout.order_success_title', 'Order submitted successfully') ?>
    </div>

    <div class="success-sub">
        <?= __('checkout.order_success_subtitle', 'Our team will contact you to confirm your order.') ?>
        <?php if ($storePhone): ?>
            <br>
            <?= __('checkout.order_success_hint', 'You can also confirm your order by calling:') ?>
            <strong><?= htmlspecialchars($storePhone, ENT_QUOTES, 'UTF-8') ?></strong>
        <?php endif; ?>
    </div>

    <div class="order-summary-card">

        <div class="order-summary-head">
            <span><?= __('checkout.order_summary', 'Order Summary') ?></span>
            <i class="bi bi-cart-check"></i>
        </div>

        <div class="order-summary-body">

            <div class="order-row">
                <span>
                    <?= htmlspecialchars(
                        $productName ?: __('checkout.product', 'Product'),
                        ENT_QUOTES,
                        'UTF-8'
                    ) ?>
                    <span class="badge-qty">x<?= (int)$qty ?></span>
                </span>
                <span>
                    <?= number_format($productLineTotal) ?>
                    <?= htmlspecialchars($currency, ENT_QUOTES, 'UTF-8') ?>
                </span>
            </div>

            <div class="order-row">
                <span><?= __('checkout.shipping', 'Shipping') ?></span>
                <span>
                    <?= number_format($shipping) ?>
                    <?= htmlspecialchars($currency, ENT_QUOTES, 'UTF-8') ?>
                </span>
            </div>

            <div class="order-row total">
                <span><?= __('checkout.total', 'Total') ?></span>
                <span>
                    <?= number_format($total) ?>
                    <?= htmlspecialchars($currency, ENT_QUOTES, 'UTF-8') ?>
                </span>
            </div>

        </div>
    </div>

</div>

<!-- 🎉 CONFETTI -->
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
<script>
(function () {
    try {
        confetti({ particleCount: 140, angle: 60,  spread: 70, origin: { x: 0, y: 0.6 } });
        confetti({ particleCount: 140, angle: 120, spread: 70, origin: { x: 1, y: 0.6 } });

        setTimeout(() => {
            confetti({ particleCount: 90, angle: 60,  spread: 60, origin: { x: 0, y: 0.55 } });
            confetti({ particleCount: 90, angle: 120, spread: 60, origin: { x: 1, y: 0.55 } });
        }, 450);
    } catch (e) {}
})();
</script>
