@extends('layouts.frontend')

@section('title', 'Төлбөр төлөх — QPay')
@section('description', 'NSMA template-ийн QPay-ээр шууд төлбөр төлөх.')

@section('content')
<div x-data="paymentApp({{ $payment->id }}, '{{ $payment->status }}')" x-init="init()" class="bg-nsma-light min-h-screen py-12">
    <div class="max-w-2xl mx-auto px-4">

        {{-- ORDER SUMMARY --}}
        <div class="bg-white rounded-2xl shadow p-6 mb-4">
            <h1 class="text-2xl font-bold text-nsma-dark mb-1">Төлбөр төлөх</h1>
            <p class="text-sm text-nsma-grey mb-4">Захиалгын дугаар: #{{ $payment->id }}</p>

            <div class="border-t border-b py-3 mb-3">
                <div class="flex justify-between items-center">
                    <div>
                        <div class="text-sm text-nsma-grey">Tier</div>
                        <div class="font-bold text-nsma-dark">NSMA {{ $payment->tierLabel() }}</div>
                    </div>
                    <div class="text-right">
                        <div class="text-sm text-nsma-grey">Үнэ</div>
                        <div class="text-2xl font-bold text-nsma-red">₮{{ number_format($payment->amount) }}</div>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-2 gap-3 text-sm">
                <div><div class="text-nsma-grey">Хүлээж авах</div><div class="font-medium">{{ $payment->lead->name }}</div></div>
                <div><div class="text-nsma-grey">Email</div><div class="font-medium">{{ $payment->lead->email }}</div></div>
            </div>
        </div>

        {{-- STATUS / QR --}}
        <div x-show="status === 'pending'" class="bg-white rounded-2xl shadow p-6 mb-4 text-center">
            <h2 class="text-xl font-bold mb-3">QR кодыг сканнаж төлнө үү</h2>

            @if($payment->qpay_qr_image)
                <img src="data:image/png;base64,{{ $payment->qpay_qr_image }}" alt="QPay QR" class="w-64 h-64 mx-auto mb-4 border rounded-lg">
            @else
                <div class="w-64 h-64 mx-auto mb-4 bg-nsma-light flex items-center justify-center text-nsma-grey rounded-lg">QR loading...</div>
            @endif

            <p class="text-sm text-nsma-grey mb-4">QPay, Khan Bank, Golomt Bank, Хас банк, Төрийн банк бүгд QR уншина.</p>

            {{-- Deeplinks for mobile --}}
            @if(! empty($payment->qpay_urls))
                <div class="grid grid-cols-3 gap-2 mb-4">
                    @foreach($payment->qpay_urls as $url)
                        <a href="{{ $url['link'] ?? '#' }}" target="_blank"
                           class="bg-nsma-light hover:bg-nsma-red-light text-xs font-medium py-2 px-3 rounded-lg">
                            {{ $url['name'] ?? 'Bank' }}
                        </a>
                    @endforeach
                </div>
            @endif

            <div class="bg-nsma-red-light border-l-4 border-nsma-red p-3 rounded text-left text-sm mb-3">
                <span class="block text-xs font-bold text-nsma-red mb-1">⏳ ХҮЛЭЭЖ БАЙНА</span>
                Төлбөр амжилттай хийгдсэний дараа автомат шинэчлэгдэнэ. Энэ хуудсыг хаахгүй байж болно.
            </div>

            <div class="text-xs text-nsma-grey mt-3">
                Статус сүүлд шалгасан: <span x-text="lastCheck"></span>
            </div>
        </div>

        {{-- PAID --}}
        <div x-show="status === 'paid'" class="bg-white rounded-2xl shadow p-6 mb-4 text-center">
            <div class="w-20 h-20 mx-auto mb-4 bg-green-100 rounded-full flex items-center justify-center text-4xl">✓</div>
            <h2 class="text-2xl font-bold text-green-700 mb-2">Төлбөр амжилттай!</h2>
            <p class="text-nsma-grey mb-4">Танай захиалга баталгаажлаа.</p>

            <div class="bg-green-50 border-l-4 border-green-500 p-4 rounded text-left text-sm mb-4">
                <span class="block text-xs font-bold text-green-700 mb-2">📧 ДАРААГИЙН АЛХАМ</span>
                <ul class="space-y-1">
                    @if($payment->tier === 'lite')
                        <li>• Танай Lite template-ийн PDF email-аар шууд явсан</li>
                        <li>• 1-2 минут дотор ирээгүй бол spam folder шалгана уу</li>
                    @elseif($payment->tier === 'standard')
                        <li>• Workshop огноо тохироход 24 цагт зөвлөхөөс холбоо ирнэ</li>
                        <li>• Workshop-ын өмнө 5-асуултын prep document email-аар явна</li>
                    @else
                        <li>• Discovery call огноо тохироход 24 цагт зөвлөхөөс холбоо ирнэ</li>
                        <li>• Pre-work pack 7 хоногийн өмнө email-аар явна</li>
                    @endif
                </ul>
            </div>

            <a href="{{ url('/') }}" class="bg-nsma-red text-white px-6 py-3 rounded-lg font-semibold inline-block">Нүүр хуудас руу буцах</a>
        </div>

    </div>
</div>
@endsection

@push('head')
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.5/dist/cdn.min.js"></script>
@endpush

@push('scripts')
<script>
function paymentApp(paymentId, initialStatus) {
    return {
        status: initialStatus,
        lastCheck: 'одоо',
        timer: null,

        init() {
            if (this.status !== 'pending') return;
            this.poll();
            this.timer = setInterval(() => this.poll(), 5000);
        },

        async poll() {
            try {
                const r = await fetch(`/payment/${paymentId}/status`, {
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                });
                const data = await r.json();
                this.status = data.status;
                this.lastCheck = new Date().toLocaleTimeString('mn-MN');
                if (data.status === 'paid') {
                    clearInterval(this.timer);
                    if (typeof window.showToast === 'function') {
                        window.showToast('Төлбөр амжилттай боллоо! 🎉', 'success');
                    }
                }
            } catch(e) { console.warn(e); }
        },
    };
}
</script>
@endpush
