@extends('layouts.frontend')


@section('content')
<div class="container py-5">
    <h1 class="mb-4 text-center">Checkout</h1>
    <form id="checkout-form" method="POST" action="{{ route('checkout.process') }}">
        @csrf
        <div class="row">
            <!-- Левая колонка: Billing Details -->
            <div class="col-md-6">
                <h4 class="mb-3">Billing Details</h4>
                <div class="card shadow-sm p-3 mb-3">
                    <!-- Поля для данных -->
                    <div class="mb-3">
                        <label class="form-label">First Name *</label>
                        <input type="text" name="first_name" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Last Name *</label>
                        <input type="text" name="last_name" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Company (optional)</label>
                        <input type="text" name="company" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Country / Region *</label>
                        <input type="text" name="country" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Street Address *</label>
                        <input type="text" name="address" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Postcode / ZIP *</label>
                        <input type="text" name="postcode" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Town / City *</label>
                        <input type="text" name="city" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Phone *</label>
                        <input type="text" name="phone" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Email *</label>
                        <input type="email" name="email" class="form-control" required>
                    </div>
                </div>
            </div>

            <!-- Правая колонка: Your Order + Payment -->
            <div class="col-md-6">
                <h4 class="mb-3">Your Order</h4>
                <div class="card shadow-sm p-3 mb-3">
                    <ul class="list-group list-group-flush">
                        @foreach($products as $product)
                            @php
                                $images = json_decode($product->images, true);
                                $firstImage = $images[0] ?? null;
                            @endphp
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <div class="d-flex align-items-center">
                                    <img src="{{ $firstImage ? asset('images/products/' . $firstImage) : asset('images/no-image.png') }}"
                                         alt="{{ $product->name }}"
                                         style="width: 50px; height: 50px; object-fit: cover; margin-right: 10px;">
                                    <span>{{ $product->name }} × {{ $cart[$product->id] }}</span>
                                </div>
                                <span>${{ number_format($product->price * $cart[$product->id], 2) }}</span>
                            </li>
                        @endforeach
                        <li class="list-group-item d-flex justify-content-between">
                            <strong>Total</strong>
                            <strong id="order-total">${{ number_format($total, 2) }}</strong>
                        </li>
                    </ul>

                    <div class="mt-3">
                        <label class="form-label fw-semibold">Payment method</label>
                        <select name="payment_method" id="payment_method" class="form-select border-success">
                            <option value="" disabled selected>Select payment method</option>
                            <option value="card">Card</option>
                            <option value="crypto">Crypto Pay</option>
                        </select>
                    </div>

                    <!-- Карта -->
                    <div id="card_fields" class="mt-3 d-none">
                        <input type="text" name="card_number" class="form-control border-success mb-2" placeholder="Card number">
                        <div class="d-flex gap-2">
                            <input type="text" name="card_expiry" class="form-control border-success" placeholder="MM/YY">
                            <input type="text" name="cvv" class="form-control border-success" placeholder="CVV">
                        </div>
                        <input type="text" name="card_name" class="form-control border-success mt-2" placeholder="Name on card">
                    </div>

                    <!-- Крипта -->
                    <div id="crypto_fields" class="mt-3 d-none">
                        <label class="fw-semibold mb-2">Выберите криптовалюту</label>
                        <div id="crypto-dropdown" class="rounded p-2 mb-3">
                            <div id="crypto-selected" class="d-flex align-items-center justify-content-between p-2 border rounded" style="cursor:pointer;">
                                <span>-- Выберите сеть --</span>
                                <span><i class="bi bi-chevron-down"></i></span>
                            </div>
                            <div id="crypto-options" class="d-none border rounded mt-1" style="max-height:300px; overflow-y:auto; cursor:pointer;">
                                @foreach([
                                    ['id'=>'tether','wallet'=>'TQuEEgSGMUtt6RAXRZM4irPERjiBwNHbiY','symbol'=>'USDT','icon'=>'tether-usdt-logo.png','name'=>'Tether USDT (TRC-20)'],
                                    ['id'=>'tron','wallet'=>'TQuEEgSGMUtt6RAXRZM4irPERjiBwNHbiY','symbol'=>'TRX','icon'=>'tron-trx-logo.png','name'=>'Tron TRX (TRC-20)'],
                                    ['id'=>'ethereum','wallet'=>'0xEfFfB59fCc5e6FeA0b4837a2EE3959658157901E','symbol'=>'ETH','icon'=>'ethereum-eth-logo.png','name'=>'Ethereum ETH (ERC-20)'],
                                    ['id'=>'solana','wallet'=>'2pUd2dGA5wTjbJafSPt8WWnwHQdUfJgEsP6pqH83VHSd','symbol'=>'SOL','icon'=>'solana-sol-logo.png','name'=>'Solana SOL (SOL)'],
                                    ['id'=>'bitcoin','wallet'=>'bc1q2gccvap6m5h7fnch9vvet9s5r5wprvclue7xa8','symbol'=>'BTC','icon'=>'bitcoin-btc-logo.png','name'=>'Bitcoin BTC (BTC)']
                                ] as $crypto)
                                    <div class="crypto-option d-flex align-items-center p-2" data-id="{{ $crypto['id'] }}" data-wallet="{{ $crypto['wallet'] }}" data-symbol="{{ $crypto['symbol'] }}" data-icon="{{ asset('images/icons/'.$crypto['icon']) }}">
                                        <img src="{{ asset('images/icons/'.$crypto['icon']) }}" width="24" class="me-2"> {{ $crypto['name'] }}
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <label class="fw-semibold mb-2">Wallet-address</label>
                        <div class="mb-2 d-flex align-items-center">
                            <img id="crypto-icon" src="" width="24" height="24" class="me-2 d-none">
                            <div class="input-group">
                                <input type="text" id="wallet-address" class="form-control text-monospace" readonly>
                                <button class="btn btn-outline-secondary" type="button" onclick="copyAddress()"><i class="bi bi-copy"></i></button>
                            </div>
                        </div>

                        <div class="text-center mb-3">
                            <img id="qr-code" src="" alt="QR" width="150" height="150" class="d-none">
                        </div>

                        <p class="text-muted d-flex align-items-center">
                            Total:        
                            <strong id="crypto-amount" class="ms-1">{{ number_format($total, 2) }}</strong>
                            <span id="crypto-symbol" class="ms-1">USDT</span>
                            <button id="copy-crypto-amount" class="btn btn-sm btn-outline-secondary ms-2" type="button" title="Copy">
                                <i class="bi bi-copy"></i>
                            </button>
                        </p>
                        <a id="pay-wallet" href="javascript:void(0);" class="btn btn-success w-100 d-none mb-2">Проверить платеж</a>

                        <div class="mt-2 text-success small">
                            Данный метод криптооплаты предусматривает проверку каждой транзакции.  
                            Поддерживается исключительно оплата в <strong>USDT</strong>.
                        </div>
                        <div id="status-message" class="text-success mb-2"></div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>


<script>
const totalUSD = parseFloat("{{ $total }}");

const paymentMethodSelect = document.getElementById('payment_method');
const cardFields = document.getElementById('card_fields');
const cryptoFields = document.getElementById('crypto_fields');

const cryptoSelected = document.getElementById('crypto-selected');
const cryptoOptions = document.getElementById('crypto-options');
const optionItems = document.querySelectorAll('.crypto-option');

const walletInput = document.getElementById('wallet-address');
const qrCodeImg = document.getElementById('qr-code');
const cryptoAmountEl = document.getElementById('crypto-amount');
const cryptoSymbolEl = document.getElementById('crypto-symbol');
const cryptoIconEl = document.getElementById('crypto-icon');
const payWallet = document.getElementById('pay-wallet');
const statusMessage = document.getElementById('status-message');
const copyAmountBtn = document.getElementById('copy-crypto-amount');

let selectedCoin = null;
let selectedWallet = null;
let selectedSymbol = null;
let expectedAmount = null;
let orderId = null;
const ETHERSCAN_API_KEY = "KDGCHIWPXWV292YE7CUQYKV1EF6M9YTERM";

// --- Утилиты ---
function getWalletURI(symbol, wallet, amount) {
    symbol = symbol.toUpperCase();
    switch(symbol) {
        case 'ETH':
        case 'USDT':
        case 'USDC': return `ethereum:${wallet}?value=${amount}`;
        case 'BTC': return `bitcoin:${wallet}?amount=${amount}`;
        case 'TRX': return `tron:${wallet}?amount=${amount}`;
        case 'SOL': return `solana:${wallet}?amount=${amount}`;
        default: return wallet;
    }
}

copyAmountBtn.addEventListener('click', () => {
    const textToCopy = cryptoAmountEl.textContent + " " + cryptoSymbolEl.textContent;
    navigator.clipboard.writeText(textToCopy).then(() => {
        statusMessage.textContent = "✅ Сумма скопирована: " + textToCopy;
    });
});

paymentMethodSelect.addEventListener('change', () => {
    const method = paymentMethodSelect.value;
    cardFields.classList.toggle('d-none', method !== 'card');
    cryptoFields.classList.toggle('d-none', method !== 'crypto');
});

function copyAddress() {
    walletInput.select();
    walletInput.setSelectionRange(0, 99999);
    navigator.clipboard.writeText(walletInput.value).then(() => {
        statusMessage.textContent = "✅ Адрес кошелька скопирован!";
    });
}

async function getPrice(coinId) {
    try {
        const res = await fetch(`https://api.coingecko.com/api/v3/simple/price?ids=${coinId}&vs_currencies=usd`);
        const data = await res.json();
        return data[coinId]?.usd || null;
    } catch (err) {
        console.error("CoinGecko fetch error:", err);
        return null;
    }
}

// --- Выбор криптовалюты ---
	async function selectCrypto(option) {
    const coinId = option.dataset.id.toLowerCase();
    const symbol = option.dataset.symbol; // символ валюты, напр. TRX, USDT
    const icon = option.dataset.icon;
    const wallet = option.dataset.wallet;

    selectedCoin = coinId;       // для API / fetch
    selectedWallet = wallet;     // адрес кошелька
    selectedSymbol = symbol;     // <-- сохраняем символ валюты
     
    // Отображение выбранной крипты в UI
    cryptoSelected.innerHTML = `<div class="d-flex align-items-center"><img src="${icon}" width="24" class="me-2"> ${option.textContent}</div>`;
    cryptoOptions.classList.add('d-none');

    // Получаем курс выбранной крипты к USD
    const priceUSD = await getPrice(coinId);
    const amount = priceUSD ? (totalUSD / priceUSD).toFixed(4) : "0";
    expectedAmount = parseFloat(amount); // сумма в выбранной крипте

    // Обновляем UI
    cryptoAmountEl.textContent = amount;
    cryptoSymbolEl.textContent = symbol;
    cryptoIconEl.src = icon;
    cryptoIconEl.classList.remove('d-none');

    walletInput.value = wallet;
    const uri = getWalletURI(symbol, wallet, amount);
    qrCodeImg.src = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(uri)}&size=150x150`;
    qrCodeImg.classList.remove('d-none');

    payWallet.classList.remove('d-none');
}


// --- Проверка, что все поля заполнены ---
function validateForm() {
    const form = document.getElementById('checkout-form');
    const inputs = form.querySelectorAll('input[required]');
    for (let input of inputs) {
        if (!input.value.trim()) {
            input.focus();
            statusMessage.textContent = "⚠ Пожалуйста, заполните все обязательные поля!";
            return false;
        }
    }
    if (!selectedCoin || !selectedWallet) {
        statusMessage.textContent = "⚠ Пожалуйста, выберите криптовалюту!";
        return false;
    }
    return true;
}

// --- Создание заказа pending и редирект на страницу ордера ---
async function createPendingOrderAndRedirect() {
    if (!validateForm()) return;
    if (orderId) return;

    const form = document.getElementById("checkout-form");
    const response = await fetch("{{ route('orders.ajaxCreate') }}", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": "{{ csrf_token() }}"
        },
        body: JSON.stringify({
            first_name: form.querySelector("[name='first_name']").value,
            last_name: form.querySelector("[name='last_name']").value,
            company: form.querySelector("[name='company']").value,
            country: form.querySelector("[name='country']").value,
            address: form.querySelector("[name='address']").value,
            postcode: form.querySelector("[name='postcode']").value,
            city: form.querySelector("[name='city']").value,
            email: form.querySelector("[name='email']").value,
            phone: form.querySelector("[name='phone']").value,
            products: {!! json_encode($cart) !!},
            total: expectedAmount,
            payment_method: "crypto",
            payment_currency: selectedSymbol,
            wallet_address: selectedWallet,
            payment_status: "pending"
        })
    });

    const data = await response.json();

    if (data.success && data.order_id) {
        orderId = data.order_id;

        // --- Очистка корзины на фронтенде ---
        if (typeof cart !== "undefined") {
            for (let key in cart) delete cart[key];
        }
        const cartItems = document.querySelectorAll('.cart-item');
        cartItems.forEach(el => el.remove());
        const orderTotalEl = document.getElementById('order-total');
        if (orderTotalEl) orderTotalEl.textContent = "$0.00";

        // Редирект на страницу заказа
        window.location.href = `/order/${orderId}`;
    } else {
        statusMessage.textContent = "⚠ Ошибка: заказ не создан!";
        console.error(data);
    }
}

// --- События ---
cryptoSelected.addEventListener('click', () => cryptoOptions.classList.toggle('d-none'));
optionItems.forEach(opt => opt.addEventListener('click', () => selectCrypto(opt)));
payWallet.addEventListener('click', e => {
    e.preventDefault();
    createPendingOrderAndRedirect();
});
</script>

@endsection