@extends('layouts.app')
@section('title', 'Konfirmasi Paket Pro - FIN-ANALYSIS PRO')

@push('styles')
<style>
.pay-wrap { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: 1fr 380px; gap: 2rem; align-items: start; }
.pay-left  { background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; padding: 2rem; }
.pay-right { background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; padding: 1.75rem; position: sticky; top: 2rem; }
.method-btn {
    width: 100%; padding: 1rem 1.25rem; border: 2px solid #E2E8F0; border-radius: 12px;
    background: #fff; cursor: pointer; display: flex; align-items: center; gap: 12px;
    font-family: inherit; font-size: .9375rem; font-weight: 600; color: #1E293B;
    transition: all .15s; margin-bottom: .75rem; text-align: left;
}
.method-btn:hover  { border-color: #1A56DB; background: #F8FAFF; }
.method-btn.active { border-color: #1A56DB; background: #EFF6FF; }
.method-btn .icon  { width: 40px; height: 40px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.25rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.inp { width: 100%; padding: .75rem 1rem; border: 1.5px solid #E2E8F0; border-radius: 10px; font-family: inherit; font-size: .9375rem; color: #1E293B; outline: none; transition: border-color .15s; box-sizing: border-box; }
.inp:focus { border-color: #1A56DB; }
.inp::placeholder { color: #94A3B8; }
.section-label { font-size: .8rem; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .875rem; }
.divider { border: none; border-top: 1px solid #E2E8F0; margin: 1.5rem 0; }
.feature-row { display: flex; align-items: center; gap: 8px; padding: .375rem 0; font-size: .875rem; color: #64748B; }
.pay-btn { width: 100%; padding: 1rem; background: #1A56DB; color: white; border: none; border-radius: 12px; font-family: inherit; font-size:1rem; font-weight: 700; cursor: pointer; transition: all .15s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.pay-btn:hover { background: #1647B8; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(26,86,219,.35); }
.pay-btn:disabled { background: #94A3B8; cursor: not-allowed; transform: none; box-shadow: none; }
@media(max-width:768px) { .pay-wrap { grid-template-columns: 1fr; } .pay-right { position: static; } .form-row { grid-template-columns: 1fr; } }
</style>
@endpush

@section('content')
<div>

{{-- Breadcrumb --}}
<div style="display:flex;align-items:center;gap:8px;font-size:.875rem;color:#64748B;margin-bottom:2rem">
    <a href="{{ route('subscription.index') }}" style="color:#1A56DB;text-decoration:none">Pilih Paket</a>
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
    <span style="color:#1E293B;font-weight:600">Konfirmasi & Pembayaran</span>
</div>

{{-- Sandbox Banner --}}
@if($isSandbox)
<div style="background:#1E3A5F;border:1px solid #3B82F6;border-radius:10px;padding:.75rem 1.25rem;margin-bottom:1.5rem;display:flex;align-items:center;gap:10px">
    <span style="background:#3B82F6;color:white;padding:2px 8px;border-radius:5px;font-size:.7rem;font-weight:700;flex-shrink:0">SANDBOX</span>
    <span style="color:#BFDBFE;font-size:.8125rem">Mode uji coba — gunakan kartu test <strong style="color:white">4811 1111 1111 1114</strong> · CVV: 123 · Exp: 12/25 · OTP: 112233</span>
</div>
@endif

<div class="pay-wrap">

    {{-- LEFT: Payment Form --}}
    <div class="pay-left">
        <h2 style="font-family:'Syne',sans-serif;font-size:1.375rem;font-weight:800;color:#1E293B;margin:0 0 1.5rem">Konfigurasi Pembayaran</h2>

        {{-- Metode Pembayaran --}}
        <div class="section-label">Pilih Metode Pembayaran</div>

        <div id="methodList">
            @foreach([
                ['qris',         '🔲', 'QRIS',            'Bayar dengan kode QR — GoPay, Dana, OVO, dll'],
                ['gopay',        '💙', 'GoPay',            'Dompet digital GoPay'],
                ['shopeepay',    '🟠', 'ShopeePay',       'Dompet digital ShopeePay'],
                ['dana',         '💠', 'Dana',             'Dompet digital Dana'],
                ['bca_va',       '🔵', 'Transfer BCA',    'Virtual Account Bank BCA'],
                ['bni_va',       '🟣', 'Transfer BNI',    'Virtual Account Bank BNI'],
                ['bri_va',       '⚪', 'Transfer BRI',    'Virtual Account Bank BRI'],
                ['other_va',     '🏦', 'Bank Lainnya',    'Mandiri, Permata, dan bank lainnya'],
                ['credit_card',  '💳', 'Kartu Kredit/Debit','Visa, Mastercard, JCB'],
                ['indomaret',    '🏪', 'Indomaret',       'Bayar di minimarket Indomaret'],
                ['alfamart',     '🏪', 'Alfamart',        'Bayar di minimarket Alfamart'],
            ] as [$val,$emoji,$label,$desc])
            <button class="method-btn {{ $val==='qris'?'active':'' }}" data-method="{{ $val }}" onclick="selectMethod(this)">
                <span class="icon" style="background:#F1F5F9;font-size:1.1rem">{{ $emoji }}</span>
                <div>
                    <div>{{ $label }}</div>
                    <div style="font-size:.75rem;color:#94A3B8;font-weight:400;margin-top:1px">{{ $desc }}</div>
                </div>
                <div style="margin-left:auto">
                    <div class="check-circle" style="width:20px;height:20px;border-radius:50%;border:2px solid {{ $val==='qris'?'#1A56DB':'#E2E8F0' }};display:flex;align-items:center;justify-content:center;background:{{ $val==='qris'?'#1A56DB':'#fff' }}">
                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
                    </div>
                </div>
            </button>
            @endforeach
        </div>

        <hr class="divider">

        {{-- Info Penagihan --}}
        <div class="section-label">Informasi Penagihan</div>
        <div style="display:flex;flex-direction:column;gap:.875rem">
            <input type="text" class="inp" id="billingName" placeholder="Nama lengkap" value="{{ Auth::user()->name }}">
            <input type="email" class="inp" id="billingEmail" placeholder="Email" value="{{ Auth::user()->email }}">
            <div class="form-row">
                <input type="text" class="inp" id="billingPhone" placeholder="Nomor HP (opsional)">
                <select class="inp" id="billingCountry">
                    <option value="ID" selected>🇮🇩 Indonesia</option>
                    <option value="MY">🇲🇾 Malaysia</option>
                    <option value="SG">🇸🇬 Singapura</option>
                </select>
            </div>
        </div>

        <hr class="divider">

        {{-- Legal --}}
        <p style="font-size:.7875rem;color:#94A3B8;line-height:1.6;margin:0">
            Dengan melanjutkan, Anda menyetujui
            <a href="{{ route('public.terms') }}" style="color:#1A56DB" target="_blank">Ketentuan Layanan</a> dan
            <a href="{{ route('public.privacy') }}" style="color:#1A56DB" target="_blank">Kebijakan Privasi</a> kami.
            Langganan diperpanjang otomatis setiap bulan. Batalkan kapan saja.
        </p>
    </div>

    {{-- RIGHT: Order Summary --}}
    <div class="pay-right">
        <div style="font-size:.8rem;font-weight:700;color:#64748B;text-transform:uppercase;letter-spacing:.05em;margin-bottom:1rem">Ringkasan Pesanan</div>

        {{-- Plan Badge --}}
        <div style="display:flex;align-items:center;gap:10px;padding:1rem;background:linear-gradient(135deg,#1E3A8A,#1A56DB);border-radius:12px;margin-bottom:1.25rem">
            <div style="width:40px;height:40px;background:rgba(255,255,255,.15);border-radius:9px;display:flex;align-items:center;justify-content:center">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z"/></svg>
            </div>
            <div>
                <div style="color:white;font-weight:700;font-size:.9375rem">Paket Pro</div>
                <div style="color:#93C5FD;font-size:.8rem">Langganan Bulanan</div>
            </div>
        </div>

        {{-- Features --}}
        @foreach(['Analisis tidak terbatas','Laporan PDF lengkap','Riwayat selamanya','Export Excel','Prioritas support'] as $f)
        <div class="feature-row">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            {{ $f }}
        </div>
        @endforeach

        <hr class="divider">

        {{-- Pricing --}}
        <div style="display:flex;justify-content:space-between;margin-bottom:.625rem;font-size:.875rem;color:#64748B">
            <span>Harga paket</span>
            <span>Rp 299.000</span>
        </div>
        <div style="display:flex;justify-content:space-between;margin-bottom:.625rem;font-size:.875rem;color:#64748B">
            <span>PPN (11%)</span>
            <span>Rp 32.890</span>
        </div>
        <hr class="divider" style="margin:.875rem 0">
        <div style="display:flex;justify-content:space-between;font-weight:800;color:#1E293B;font-size:1.0625rem;margin-bottom:1.5rem">
            <span>Total hari ini</span>
            <span>Rp 299.000</span>
        </div>

        {{-- Pay Button --}}
        <button class="pay-btn" id="payBtn" onclick="processPayment()">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
            <span id="payBtnText">Bayar Sekarang</span>
        </button>

        {{-- Security Badge --}}
        <div style="display:flex;align-items:center;justify-content:center;gap:6px;margin-top:1rem">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
            <span style="font-size:.75rem;color:#94A3B8">Pembayaran aman · SSL Encrypted · Midtrans</span>
        </div>

        {{-- Cancel Info --}}
        <div style="text-align:center;margin-top:.875rem;font-size:.75rem;color:#94A3B8">
            Batalkan kapan saja. Tidak ada biaya tersembunyi.
        </div>
    </div>
</div>

</div>

{{-- Midtrans Snap.js --}}
<script src="{{ $snapJsUrl }}" data-client-key="{{ $clientKey }}"></script>

@push('scripts')
<script>
let selectedMethod = 'qris';

function selectMethod(btn) {
    // Reset semua
    document.querySelectorAll('.method-btn').forEach(b => {
        b.classList.remove('active');
        b.style.borderColor = '#E2E8F0';
        b.style.background  = '#fff';
        const circle = b.querySelector('.check-circle');
        circle.style.borderColor = '#E2E8F0';
        circle.style.background  = '#fff';
    });

    // Aktifkan yang dipilih
    btn.classList.add('active');
    btn.style.borderColor = '#1A56DB';
    btn.style.background  = '#EFF6FF';
    const circle = btn.querySelector('.check-circle');
    circle.style.borderColor = '#1A56DB';
    circle.style.background  = '#1A56DB';

    selectedMethod = btn.dataset.method;

    // Update teks tombol bayar
    const labels = {
        'qris':        'Bayar dengan QRIS',
        'gopay':       'Bayar dengan GoPay',
        'shopeepay':   'Bayar dengan ShopeePay',
        'dana':        'Bayar dengan Dana',
        'bca_va':      'Transfer ke Virtual Account BCA',
        'bni_va':      'Transfer ke Virtual Account BNI',
        'bri_va':      'Transfer ke Virtual Account BRI',
        'other_va':    'Transfer ke Virtual Account Bank',
        'credit_card': 'Bayar dengan Kartu',
        'indomaret':   'Bayar di Indomaret',
        'alfamart':    'Bayar di Alfamart',
    };
    document.getElementById('payBtnText').textContent = labels[selectedMethod] || 'Bayar Sekarang';
}

function processPayment() {
    const btn = document.getElementById('payBtn');
    btn.disabled = true;
    btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" style="animation:spin .8s linear infinite"><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"/><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"/><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"/></svg> Memproses...';

    fetch('{{ route("subscription.checkout") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
        },
        body: JSON.stringify({
            plan:   'pro',
            method: selectedMethod,
            name:   document.getElementById('billingName').value,
            email:  document.getElementById('billingEmail').value,
            phone:  document.getElementById('billingPhone').value,
        })
    })
    .then(r => r.json())
    .then(res => {
        if (!res.success) {
            alert('Gagal: ' + (res.message || 'Terjadi kesalahan.'));
            btn.disabled = false;
            btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg> Bayar Sekarang';
            return;
        }

        // Buka Midtrans Snap popup
        window.snap.pay(res.data.token, {
            onSuccess: result => { window.location.href = '{{ route("subscription.success") }}?order_id=' + result.order_id; },
            onPending: result => { window.location.href = '{{ route("subscription.pending") }}?order_id=' + result.order_id; },
            onError:   ()     => { window.location.href = '{{ route("subscription.failed") }}'; },
            onClose:   ()     => {
                btn.disabled = false;
                btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg> Bayar Sekarang';
            }
        });
    })
    .catch(() => {
        alert('Terjadi kesalahan jaringan. Coba lagi.');
        btn.disabled = false;
        btn.innerHTML = 'Bayar Sekarang';
    });
}

// Spin animation
const style = document.createElement('style');
style.textContent = '@keyframes spin { to { transform: rotate(360deg); } }';
document.head.appendChild(style);
</script>
@endpush

@endsection