@extends('layouts.app')

@section('title', 'Top Up ' . $config->game_name)

@section('content')
<div class="min-h-screen bg-gray-950 py-10 px-4">
    <div class="max-w-lg mx-auto">

        {{-- Header --}}
        <div class="flex items-center gap-3 mb-6">
            <a href="{{ route('invoices.index') }}" class="text-gray-400 hover:text-white">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
            </a>
            <h1 class="text-xl font-bold text-white">Top Up {{ $config->game_name }}</h1>
        </div>

        <form id="buyForm" action="{{ route('invoices.confirm') }}" method="POST">
            @csrf

            <input type="hidden" name="game_code" value="{{ $config->game_code }}">
            <input type="hidden" name="nickname" id="nicknameInput">

            {{-- Step 1: Input akun --}}
            <div class="bg-gray-800 rounded-2xl p-5 mb-4">
                <h2 class="text-white font-semibold mb-4">1. Masukkan Data Akun</h2>

                <div class="space-y-3">
                    <div>
                        <label class="block text-gray-400 text-sm mb-1">User ID <span class="text-red-400">*</span></label>
                        <input type="text" name="user_id" id="userId"
                               class="w-full bg-gray-700 text-white rounded-xl px-4 py-3 outline-none focus:ring-2 focus:ring-indigo-500"
                               placeholder="Masukkan User ID" autocomplete="off" required>
                    </div>

                    {{-- Render field tambahan dari api_data jika ada --}}
                    @php
                        $fields = $config->api_data['fields'] ?? [];
                    @endphp

                    @if(count($fields) > 0)
                        @foreach($fields as $field)
                            @if(in_array($field['key'] ?? '', ['user_id', 'game_user_id'])) @continue @endif
                            <div>
                                <label class="block text-gray-400 text-sm mb-1">
                                    {{ $field['label'] ?? ucfirst($field['key'] ?? 'Field') }}
                                    @if(!empty($field['required'])) <span class="text-red-400">*</span> @endif
                                </label>
                                <input type="text"
                                       name="{{ $field['key'] }}"
                                       id="{{ $field['key'] }}"
                                       class="w-full bg-gray-700 text-white rounded-xl px-4 py-3 outline-none focus:ring-2 focus:ring-indigo-500"
                                       placeholder="{{ $field['placeholder'] ?? '' }}"
                                       {{ !empty($field['required']) ? 'required' : '' }}>
                            </div>
                        @endforeach
                    @else
                        {{-- Fallback: tampilkan Server ID secara default --}}
                        <div id="serverIdField">
                            <label class="block text-gray-400 text-sm mb-1">Server / Zone ID <span class="text-gray-500">(jika ada)</span></label>
                            <input type="text" name="server_id" id="serverId"
                                   class="w-full bg-gray-700 text-white rounded-xl px-4 py-3 outline-none focus:ring-2 focus:ring-indigo-500"
                                   placeholder="Contoh: 1234">
                        </div>
                    @endif
                </div>

                {{-- Hasil validasi --}}
                <div id="validationResult" class="mt-4 hidden">
                    <div id="validationSuccess" class="hidden bg-green-900/40 border border-green-600 rounded-xl px-4 py-3">
                        <p class="text-green-400 text-sm">✅ Akun ditemukan</p>
                        <p class="text-white font-semibold mt-1" id="nicknameDisplay"></p>
                    </div>
                    <div id="validationError" class="hidden bg-red-900/40 border border-red-600 rounded-xl px-4 py-3">
                        <p class="text-red-400 text-sm" id="errorMessage">❌ ID tidak ditemukan atau server bermasalah.</p>
                    </div>
                    <div id="validationLoading" class="hidden text-center py-2">
                        <div class="inline-block w-5 h-5 border-2 border-indigo-400 border-t-transparent rounded-full animate-spin"></div>
                        <span class="text-gray-400 text-sm ml-2">Memvalidasi akun...</span>
                    </div>
                </div>
            </div>

            {{-- Step 2: Pilih produk --}}
            <div class="bg-gray-800 rounded-2xl p-5 mb-4">
                <h2 class="text-white font-semibold mb-4">2. Pilih Produk</h2>

                @if($products->isEmpty())
                    <p class="text-gray-400 text-sm text-center py-4">Belum ada produk tersedia.</p>
                @else
                    <div class="space-y-2" id="productList">
                        @foreach($products as $product)
                            <label class="flex items-center justify-between bg-gray-700 hover:bg-gray-600 rounded-xl px-4 py-3 cursor-pointer transition-all group has-[:checked]:ring-2 has-[:checked]:ring-indigo-500">
                                <div class="flex items-center gap-3">
                                    <input type="radio" name="product_id" value="{{ $product->id }}"
                                           class="accent-indigo-500" required>
                                    <div>
                                        <p class="text-white text-sm font-medium">{{ $product->name }}</p>
                                        @if($product->description)
                                            <p class="text-gray-400 text-xs">{{ $product->description }}</p>
                                        @endif
                                    </div>
                                </div>
                                <span class="text-indigo-300 font-semibold text-sm">Rp {{ number_format($product->price, 0, ',', '.') }}</span>
                            </label>
                        @endforeach
                    </div>
                @endif
            </div>

            {{-- Tombol beli --}}
            <button type="submit" id="buyBtn"
                    class="w-full bg-indigo-600 hover:bg-indigo-500 disabled:opacity-40 disabled:cursor-not-allowed text-white font-bold py-4 rounded-2xl transition-all"
                    disabled>
                🛒 Lanjut ke Konfirmasi
            </button>
        </form>

    </div>
</div>

<script>
(function () {
    const userIdInput  = document.getElementById('userId');
    const serverIdEl   = document.getElementById('serverId');
    const nicknameInput = document.getElementById('nicknameInput');
    const nicknameDisplay = document.getElementById('nicknameDisplay');
    const resultDiv    = document.getElementById('validationResult');
    const successDiv   = document.getElementById('validationSuccess');
    const errorDiv     = document.getElementById('validationError');
    const loadingDiv   = document.getElementById('validationLoading');
    const errorMsg     = document.getElementById('errorMessage');
    const buyBtn       = document.getElementById('buyBtn');
    const productInputs = document.querySelectorAll('input[name="product_id"]');

    let validationPassed = false;
    let debounceTimer;

    function checkBuyBtn() {
        const productSelected = [...productInputs].some(r => r.checked);
        buyBtn.disabled = !(validationPassed && productSelected);
    }

    productInputs.forEach(r => r.addEventListener('change', checkBuyBtn));

    function showLoading() {
        resultDiv.classList.remove('hidden');
        loadingDiv.classList.remove('hidden');
        successDiv.classList.add('hidden');
        errorDiv.classList.add('hidden');
    }

    function showSuccess(nickname) {
        loadingDiv.classList.add('hidden');
        successDiv.classList.remove('hidden');
        errorDiv.classList.add('hidden');
        nicknameDisplay.textContent = nickname;
        nicknameInput.value = nickname;
        validationPassed = true;
        checkBuyBtn();
    }

    function showError(msg) {
        loadingDiv.classList.add('hidden');
        successDiv.classList.add('hidden');
        errorDiv.classList.remove('hidden');
        errorMsg.textContent = '❌ ' + msg;
        nicknameInput.value = '';
        validationPassed = false;
        checkBuyBtn();
    }

    function resetValidation() {
        resultDiv.classList.add('hidden');
        nicknameInput.value = '';
        validationPassed = false;
        checkBuyBtn();
    }

    async function validate() {
        const userId = userIdInput.value.trim();
        const serverId = serverIdEl ? serverIdEl.value.trim() : '';

        if (!userId) { resetValidation(); return; }

        showLoading();

        const formData = new FormData();
        formData.append('game_code', '{{ $config->game_code }}');
        formData.append('user_id', userId);
        if (serverId) formData.append('server_id', serverId);
        formData.append('_token', '{{ csrf_token() }}');

        // Tambahkan field ekstra
        document.querySelectorAll('#buyForm input[name]').forEach(el => {
            if (!['game_code','user_id','server_id','product_id','nickname','_token'].includes(el.name)) {
                formData.append(el.name, el.value);
            }
        });

        try {
            const res = await fetch('{{ route("invoices.check-id") }}', {
                method: 'POST',
                body: formData,
            });
            const data = await res.json();

            if (data.success && data.nickname) {
                showSuccess(data.nickname);
            } else {
                showError(data.message || 'ID tidak ditemukan.');
            }
        } catch (e) {
            showError('Koneksi ke server gagal.');
        }
    }

    userIdInput.addEventListener('input', () => {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(validate, 700);
    });

    if (serverIdEl) {
        serverIdEl.addEventListener('input', () => {
            if (userIdInput.value.trim()) {
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(validate, 700);
            }
        });
    }
})();
</script>
@endsection