@extends('layouts.app')

@section('title', 'Order Details - BDCodeShop')

@push('styles')
<style>
.order-page{padding-bottom:110px}
.order-hero{padding:22px;margin-bottom:16px;background:linear-gradient(135deg,#6857f5,#8b5cf6);color:#fff;border-radius:26px;box-shadow:0 18px 45px rgba(104,87,245,.22)}
.order-label{font-size:11px;font-weight:800;opacity:.78;text-transform:uppercase;letter-spacing:.8px}
.order-number{margin-top:6px;font-size:19px;font-weight:850;word-break:break-all}
.order-date{margin-top:6px;font-size:12px;opacity:.78}
.status-badge{display:inline-flex;align-items:center;gap:7px;margin-top:16px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.16);font-size:12px;font-weight:800}
.section{margin-top:18px}
.section-title{margin-bottom:10px;font-size:16px;font-weight:850}
.product-card{display:flex;align-items:center;gap:12px;padding:14px;margin-bottom:10px}
.product-image{width:58px;height:58px;flex:0 0 58px;border-radius:16px;object-fit:cover;background:#f0eff7}
.product-placeholder{display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:#6857f5}
.product-info{min-width:0;flex:1}
.product-name{font-size:14px;font-weight:800;line-height:1.35}
.product-meta{margin-top:4px;color:#888897;font-size:11px}
.product-price{text-align:right;font-size:14px;font-weight:850}
.summary{padding:18px}
.summary-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;color:#777787;font-size:13px}
.summary-row.total{margin-top:8px;padding-top:15px;border-top:1px solid rgba(0,0,0,.07);color:#171725;font-size:17px;font-weight:850}
.payment-box{padding:18px}
.payment-status{font-size:14px;font-weight:800}
.payment-status.pending{color:#b77900}
.payment-status.success{color:#168044}
.payment-status.cancelled,.payment-status.failed{color:#d14343}
.action-area{margin-top:18px}
.action-button{width:100%;min-height:52px;border:0;border-radius:17px;background:linear-gradient(135deg,#6857f5,#8b5cf6);color:#fff;font-size:14px;font-weight:850;cursor:pointer;box-shadow:0 12px 28px rgba(104,87,245,.22)}
.action-button:active{transform:scale(.98)}
.action-button.secondary{margin-top:10px;background:#f0eff7;color:#343445;box-shadow:none}
.loading{padding:60px 20px;text-align:center;color:#858594;font-size:13px}
.error-box{padding:22px;text-align:center}
.error-title{font-size:16px;font-weight:850}
.error-message{margin-top:6px;color:#858594;font-size:13px;line-height:1.5}
.hidden{display:none!important}
</style>
@endpush

@section('content')
<div class="order-page">

    <div id="loading" class="card loading">
        Loading order details...
    </div>

    <div id="errorBox" class="card error-box hidden">
        <div class="error-title">Unable to load order</div>
        <div id="errorMessage" class="error-message">
            Please try again.
        </div>

        <div class="action-area">
            <button class="action-button" onclick="loadOrder()">
                Retry
            </button>
        </div>
    </div>

    <div id="orderContent" class="hidden">

        <div class="order-hero">
            <div class="order-label">Order Number</div>

            <div id="orderNumber" class="order-number">-</div>

            <div id="orderDate" class="order-date">-</div>

            <div id="orderStatus" class="status-badge">
                Payment Pending
            </div>
        </div>

        <div class="section">
            <div class="section-title">Products</div>
            <div id="products"></div>
        </div>

        <div class="section">
            <div class="section-title">Order Summary</div>

            <div class="card summary">
                <div class="summary-row">
                    <span>Subtotal</span>
                    <strong id="subtotal">৳0.00</strong>
                </div>

                <div class="summary-row">
                    <span>Discount</span>
                    <strong id="discount">-৳0.00</strong>
                </div>

                <div class="summary-row total">
                    <span>Total</span>
                    <strong id="total">৳0.00</strong>
                </div>
            </div>
        </div>

        <div class="section">
            <div class="section-title">Payment</div>

            <div class="card payment-box">
                <div id="paymentStatus" class="payment-status">
                    Payment pending
                </div>

                <div id="actionArea" class="action-area"></div>
            </div>
        </div>

    </div>
</div>
@endsection

@push('scripts')
<script>
const orderTg = window.Telegram?.WebApp;
const orderNumberValue = @json($orderNumber);

function escapeHtml(value) {
    return String(value ?? '')
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
}

function money(value) {
    return '৳' + Number(value || 0).toFixed(2);
}

function formatDate(value) {
    if (!value) return '-';

    const date = new Date(value);

    if (isNaN(date.getTime())) {
        return value;
    }

    return date.toLocaleString('en-BD', {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
        hour: 'numeric',
        minute: '2-digit'
    });
}

function statusText(status) {
    status = String(status || '').toLowerCase();

    if (status === 'completed' || status === 'paid') {
        return 'Payment Successful';
    }

    if (
        status === 'cancelled' ||
        status === 'canceled' ||
        status === 'failed'
    ) {
        return 'Payment Cancelled';
    }

    return 'Payment Pending';
}

function renderProducts(items) {
    const container = document.getElementById('products');

    if (!items || !items.length) {
        container.innerHTML = `
            <div class="card product-card">
                <div class="product-info">
                    <div class="product-name">No products found</div>
                </div>
            </div>
        `;
        return;
    }

    container.innerHTML = items.map(item => {
        const product = item.product || {};

        const image = product.thumbnail
            ? `
                <img
                    class="product-image"
                    src="${escapeHtml(product.thumbnail)}"
                    alt=""
                >
            `
            : `
                <div class="product-image product-placeholder">
                    BC
                </div>
            `;

        return `
            <div class="card product-card">
                ${image}

                <div class="product-info">
                    <div class="product-name">
                        ${escapeHtml(
                            product.name ||
                            item.name ||
                            'Product'
                        )}
                    </div>

                    <div class="product-meta">
                        Quantity: ${Number(item.quantity || 1)}
                    </div>
                </div>

                <div class="product-price">
                    ${money(item.total)}
                </div>
            </div>
        `;
    }).join('');
}

function renderActions(order) {
    const area = document.getElementById('actionArea');

    const orderStatus =
        String(order.status || '').toLowerCase();

    const paymentStatus =
        String(order.payment_status || '').toLowerCase();

    const paid =
        orderStatus === 'completed' ||
        orderStatus === 'paid' ||
        paymentStatus === 'paid' ||
        paymentStatus === 'completed';

    const cancelled =
        orderStatus === 'cancelled' ||
        orderStatus === 'canceled' ||
        orderStatus === 'failed' ||
        paymentStatus === 'cancelled' ||
        paymentStatus === 'canceled' ||
        paymentStatus === 'failed';

    if (paid) {
        document.getElementById('orderStatus').textContent =
            'Payment Successful';

        document.getElementById('paymentStatus').className =
            'payment-status success';

        document.getElementById('paymentStatus').textContent =
            'Payment successful';

        area.innerHTML = `
            <button
                class="action-button"
                onclick="openDownloads()"
            >
                Download
            </button>
        `;

        return;
    }

    if (cancelled) {
        document.getElementById('orderStatus').textContent =
            'Payment Cancelled';

        document.getElementById('paymentStatus').className =
            'payment-status cancelled';

        document.getElementById('paymentStatus').textContent =
            'Payment cancelled';

        area.innerHTML = `
            <button
                class="action-button secondary"
                onclick="goBackOrders()"
            >
                Back to Orders
            </button>
        `;

        return;
    }

    document.getElementById('orderStatus').textContent =
        'Payment Pending';

    document.getElementById('paymentStatus').className =
        'payment-status pending';

    document.getElementById('paymentStatus').textContent =
        'Payment pending';

    area.innerHTML = `
        <button
            class="action-button"
            onclick="continuePayment()"
        >
            Continue Payment
        </button>
    `;
}

async function loadOrder() {
    document.getElementById('loading')
        .classList.remove('hidden');

    document.getElementById('errorBox')
        .classList.add('hidden');

    document.getElementById('orderContent')
        .classList.add('hidden');

    try {
        if (!orderTg || !orderTg.initData) {
            throw new Error(
                'Please open BDCodeShop from Telegram.'
            );
        }

        const response = await fetch(
            `/api/orders/details/${encodeURIComponent(orderNumberValue)}`,
            {
                method: 'POST',
                headers: {
                    'Content-Type':
                        'application/x-www-form-urlencoded;charset=UTF-8'
                },
                body: new URLSearchParams({
                    init_data: orderTg.initData
                })
            }
        );

        const data = await response.json();

        if (!response.ok || !data.success) {
            throw new Error(
                data.message || 'Unable to load order.'
            );
        }

        const order = data.order;

        document.getElementById('orderNumber').textContent =
            order.order_number || '-';

        document.getElementById('orderDate').textContent =
            formatDate(order.created_at);

        renderProducts(order.items || []);

        document.getElementById('subtotal').textContent =
            money(order.subtotal);

        document.getElementById('discount').textContent =
            '-' + money(order.discount);

        document.getElementById('total').textContent =
            money(order.total);

        renderActions(order);

        document.getElementById('loading')
            .classList.add('hidden');

        document.getElementById('orderContent')
            .classList.remove('hidden');

    } catch (error) {
        console.error(error);

        document.getElementById('loading')
            .classList.add('hidden');

        document.getElementById('errorBox')
            .classList.remove('hidden');

        document.getElementById('errorMessage').textContent =
            error.message ||
            'Unable to load order.';
    }
}

function continuePayment() {
    window.location.href =
        "{{ url('/payment') }}/" +
        encodeURIComponent(orderNumberValue);
}

function openDownloads() {
    window.location.href =
        "{{ url('/downloads') }}";
}

function goBackOrders() {
    window.location.href =
        "{{ url('/orders') }}";
}

if (orderTg) {
    orderTg.ready();
    orderTg.expand();
}

loadOrder();
</script>
@endpush