@extends('layouts.app')

@section('title', 'Checkout - BDCodeShop')

@push('styles')
<style>
.checkout-wrap{display:flex;flex-direction:column;gap:16px}
.checkout-header{padding:4px 2px}
.checkout-header h1{font-size:26px;font-weight:900;letter-spacing:-.7px}
.checkout-header p{margin-top:5px;color:#858593;font-size:13px;line-height:1.5}

.product-card{
    padding:16px;
    display:flex;
    gap:14px;
    align-items:center;
}

.product-thumb{
    width:76px;
    height:76px;
    flex:0 0 76px;
    border-radius:18px;
    overflow:hidden;
    background:linear-gradient(135deg,#6857f5,#8b5cf6);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:22px;
    font-weight:900;
}

.product-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.product-info{
    min-width:0;
    flex:1;
}

.product-name{
    font-size:16px;
    font-weight:850;
    line-height:1.3;
}

.product-category{
    margin-top:4px;
    font-size:12px;
    color:#888895;
}

.price-row{
    margin-top:8px;
    display:flex;
    align-items:center;
    gap:8px;
}

.current-price{
    font-size:18px;
    font-weight:900;
}

.old-price{
    font-size:12px;
    color:#999;
    text-decoration:line-through;
}

.discount-badge{
    font-size:10px;
    font-weight:800;
    padding:4px 7px;
    border-radius:8px;
    background:#eafaf0;
    color:#159447;
}

.section-card{
    padding:18px;
}

.section-title{
    font-size:15px;
    font-weight:850;
    margin-bottom:14px;
}

.coupon-row{
    display:flex;
    gap:9px;
}

.coupon-input{
    flex:1;
    min-width:0;
    height:46px;
    border:1px solid #e4e4ec;
    border-radius:13px;
    outline:none;
    padding:0 13px;
    background:#fff;
}

.coupon-input:focus{
    border-color:#6857f5;
}

.coupon-btn{
    height:46px;
    padding:0 16px;
    border:0;
    border-radius:13px;
    background:#171725;
    color:#fff;
    font-weight:800;
    cursor:pointer;
}

.coupon-message{
    margin-top:9px;
    font-size:12px;
    color:#777787;
}

.summary{
    display:flex;
    flex-direction:column;
    gap:11px;
}

.summary-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:13px;
    color:#777787;
}

.summary-row strong{
    color:#171725;
    font-weight:800;
}

.summary-total{
    margin-top:4px;
    padding-top:14px;
    border-top:1px dashed #dddde7;
}

.summary-total span{
    color:#171725;
    font-weight:850;
}

.summary-total strong{
    font-size:21px;
    font-weight:950;
    color:#6857f5;
}

.wallet-card{
    padding:17px;
    display:flex;
    align-items:center;
    gap:12px;
}

.wallet-icon{
    width:45px;
    height:45px;
    border-radius:14px;
    background:linear-gradient(135deg,#6857f5,#8b5cf6);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:950;
    font-size:18px;
}

.wallet-info{
    flex:1;
    min-width:0;
}

.wallet-name{
    font-size:14px;
    font-weight:850;
}

.wallet-desc{
    margin-top:3px;
    font-size:11px;
    color:#888895;
}

.wallet-balance{
    margin-top:4px;
    font-size:13px;
    font-weight:900;
    color:#6857f5;
}

.wallet-status{
    font-size:11px;
    font-weight:850;
    padding:6px 9px;
    border-radius:9px;
    background:#eafaf0;
    color:#159447;
}

.insufficient-card{
    display:none;
    padding:15px;
    border-radius:17px;
    background:#fff4f4;
    border:1px solid #ffdada;
}

.insufficient-title{
    font-size:14px;
    font-weight:900;
    color:#c43d3d;
}

.insufficient-text{
    margin-top:5px;
    font-size:12px;
    line-height:1.5;
    color:#8c5555;
}

.checkout-btn{
    width:100%;
    height:54px;
    border:0;
    border-radius:17px;
    background:linear-gradient(135deg,#6857f5,#8b5cf6);
    color:#fff;
    font-size:15px;
    font-weight:900;
    box-shadow:0 12px 28px rgba(104,87,245,.25);
    cursor:pointer;
}

.checkout-btn:disabled{
    opacity:.55;
    cursor:not-allowed;
    box-shadow:none;
}

.add-money-btn{
    display:none;
    width:100%;
    height:54px;
    border:0;
    border-radius:17px;
    background:#171725;
    color:#fff;
    font-size:15px;
    font-weight:900;
    cursor:pointer;
}

.back-btn{
    width:100%;
    height:48px;
    border:1px solid #e3e3eb;
    border-radius:15px;
    background:#fff;
    color:#333342;
    font-weight:800;
    cursor:pointer;
}

.loading-box{
    padding:18px;
    text-align:center;
    color:#858593;
    font-size:13px;
}
</style>
@endpush

@section('content')
<div class="checkout-wrap">

    <div class="checkout-header">
        <h1>Checkout</h1>
        <p>Review your product and pay securely using your wallet balance.</p>
    </div>

    <div class="card product-card">

        <div class="product-thumb">
            @if($product->thumbnail)
                <img
                    src="{{ asset('storage/' . ltrim($product->thumbnail, '/')) }}"
                    alt="{{ $product->name }}"
                >
            @else
                BC
            @endif
        </div>

        <div class="product-info">

            <div class="product-name">
                {{ $product->name }}
            </div>

            @if($product->category)
                <div class="product-category">
                    {{ $product->category }}
                </div>
            @endif

            @php
                $regularPrice = (float) $product->price;
                $salePrice = $product->discount_price !== null
                    ? (float) $product->discount_price
                    : $regularPrice;
            @endphp

            <div class="price-row">
                <span class="current-price">
                    ৳{{ number_format($salePrice, 2) }}
                </span>

                @if($product->discount_price !== null && $salePrice < $regularPrice)
                    <span class="old-price">
                        ৳{{ number_format($regularPrice, 2) }}
                    </span>

                    <span class="discount-badge">
                        SALE
                    </span>
                @endif
            </div>

        </div>
    </div>

    <div class="card section-card">

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

        <div class="coupon-row">

            <input
                type="text"
                id="couponInput"
                class="coupon-input"
                placeholder="Enter coupon code"
                autocomplete="off"
            >

            <button
                type="button"
                class="coupon-btn"
                id="couponBtn"
            >
                Apply
            </button>

        </div>

        <div
            id="couponMessage"
            class="coupon-message"
        ></div>

    </div>

    <div class="card section-card">

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

        <div class="summary">

            <div class="summary-row">
                <span>Product price</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 summary-total">
                <span>Total</span>
                <strong id="total">৳0.00</strong>
            </div>

        </div>

    </div>

    <div class="card wallet-card">

        <div class="wallet-icon">
            ৳
        </div>

        <div class="wallet-info">

            <div class="wallet-name">
                Wallet Balance
            </div>

            <div class="wallet-desc">
                Payment will be deducted from your BDCodeShop wallet.
            </div>

            <div
                class="wallet-balance"
                id="walletBalance"
            >
                Balance: ৳0.00
            </div>

        </div>

        <div
            class="wallet-status"
            id="walletStatus"
        >
            Checking
        </div>

    </div>

    <div
        class="insufficient-card"
        id="insufficientCard"
    >
        <div class="insufficient-title">
            Insufficient Balance
        </div>

        <div
            class="insufficient-text"
            id="insufficientText"
        >
            Please add money to your wallet before purchasing this product.
        </div>
    </div>

    <button
        type="button"
        class="checkout-btn"
        id="buyBtn"
        disabled
    >
        Checking Balance...
    </button>

    <button
        type="button"
        class="add-money-btn"
        id="addMoneyBtn"
    >
        Add Money
    </button>

    <button
        type="button"
        class="back-btn"
        onclick="window.history.back()"
    >
        Back
    </button>

</div>
@endsection

@push('scripts')
<script>
(() => {

    const checkoutTg = window.Telegram?.WebApp;

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

    const productSlug = @json($product->slug);

    let coupon = '';
    let checkoutTotal = 0;
    let walletBalance = 0;

    const couponInput = document.getElementById('couponInput');
    const couponBtn = document.getElementById('couponBtn');
    const couponMessage = document.getElementById('couponMessage');

    const subtotalEl = document.getElementById('subtotal');
    const discountEl = document.getElementById('discount');
    const totalEl = document.getElementById('total');

    const walletBalanceEl = document.getElementById('walletBalance');
    const walletStatusEl = document.getElementById('walletStatus');

    const insufficientCard = document.getElementById('insufficientCard');
    const insufficientText = document.getElementById('insufficientText');

    const buyBtn = document.getElementById('buyBtn');
    const addMoneyBtn = document.getElementById('addMoneyBtn');

    function getInitData() {

        if (checkoutTg && checkoutTg.initData) {
            return checkoutTg.initData;
        }

        return '';
    }

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

    function updateWalletUI() {

        walletBalanceEl.textContent =
            'Balance: ' + money(walletBalance);

        if (walletBalance >= checkoutTotal) {

            walletStatusEl.textContent = 'Available';

            walletStatusEl.style.background = '#eafaf0';
            walletStatusEl.style.color = '#159447';

            insufficientCard.style.display = 'none';

            buyBtn.style.display = 'block';
            addMoneyBtn.style.display = 'none';

            buyBtn.disabled = false;
            buyBtn.textContent = 'Buy with Wallet';

        } else {

            const shortage = Math.max(
                0,
                checkoutTotal - walletBalance
            );

            walletStatusEl.textContent = 'Insufficient';

            walletStatusEl.style.background = '#fff0f0';
            walletStatusEl.style.color = '#c43d3d';

            insufficientCard.style.display = 'block';

            insufficientText.textContent =
                'You need ' +
                money(shortage) +
                ' more to complete this purchase.';

            buyBtn.style.display = 'none';

            addMoneyBtn.style.display = 'block';

            buyBtn.disabled = true;
        }
    }

    async function calculateCheckout() {

        const initData = getInitData();

        if (!initData) {

            couponMessage.textContent =
                'Please open BDCodeShop from Telegram.';

            couponMessage.style.color = '#c43d3d';

            buyBtn.disabled = true;
            buyBtn.textContent = 'Open from Telegram';

            return;
        }

        try {

            const response = await fetch(
                '/api/checkout/calculate',
                {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        init_data: initData,
                        slug: productSlug,
                        coupon: coupon
                    })
                }
            );

            const data = await response.json();

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

            const checkout = data.data;

            const subtotal =
                Number(checkout.subtotal || 0);

            const discount =
                Number(checkout.discount || 0);

            checkoutTotal =
                Number(checkout.total || 0);

            walletBalance =
                Number(checkout.wallet_balance || 0);

            subtotalEl.textContent =
                money(subtotal);

            discountEl.textContent =
                '− ' + money(discount);

            totalEl.textContent =
                money(checkoutTotal);

            if (coupon) {

                if (checkout.coupon) {

                    couponMessage.textContent =
                        'Coupon applied successfully.';

                    couponMessage.style.color =
                        '#159447';

                } else {

                    couponMessage.textContent =
                        'Coupon was not applied.';

                    couponMessage.style.color =
                        '#c43d3d';
                }

            }

            updateWalletUI();

        } catch (error) {

            console.error(error);

            couponMessage.textContent =
                error.message ||
                'Unable to calculate order.';

            couponMessage.style.color =
                '#c43d3d';

            buyBtn.disabled = true;
            buyBtn.textContent = 'Unable to Continue';

        }
    }

    couponBtn.addEventListener(
        'click',
        () => {

            coupon =
                couponInput.value
                    .trim()
                    .toUpperCase();

            if (!coupon) {

                couponMessage.textContent =
                    'Enter a coupon code first.';

                couponMessage.style.color =
                    '#c43d3d';

                return;
            }

            couponMessage.textContent =
                'Checking coupon...';

            couponMessage.style.color =
                '#777787';

            calculateCheckout();
        }
    );

    addMoneyBtn.addEventListener(
        'click',
        () => {

            window.location.href =
                '/add-money';
        }
    );

    buyBtn.addEventListener(
        'click',
        async () => {

            const initData = getInitData();

            if (!initData) {

                alert(
                    'Please open BDCodeShop from Telegram.'
                );

                return;
            }

            buyBtn.disabled = true;
            buyBtn.textContent =
                'Processing Purchase...';

            try {

                const response = await fetch(
                    '/api/checkout/wallet-purchase',
                    {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({
                            init_data: initData,
                            slug: productSlug,
                            coupon: coupon
                        })
                    }
                );

                const data =
                    await response.json();

                if (
                    response.status === 422 &&
                    data.insufficient_balance
                ) {

                    walletBalance =
                        Number(data.balance || 0);

                    checkoutTotal =
                        Number(data.required || checkoutTotal);

                    updateWalletUI();

                    return;
                }

                if (!response.ok || !data.success) {

                    throw new Error(
                        data.message ||
                        'Unable to complete purchase.'
                    );
                }

                buyBtn.textContent =
                    'Purchase Successful';

                window.location.href =
                    '/purchase-success/' +
                    encodeURIComponent(
                        data.order_number
                    );

            } catch (error) {

                console.error(error);

                alert(
                    error.message ||
                    'Purchase failed. Please try again.'
                );

                buyBtn.disabled = false;
                buyBtn.textContent =
                    'Buy with Wallet';
            }
        }
    );

    calculateCheckout();

})();
</script>
@endpush