@extends('layouts.app')

@section('content')
<div class="max-w-2xl mx-auto bg-gray-800 p-8 rounded-lg shadow-lg">
    <h1 class="text-3xl font-bold text-center mb-6 text-yellow-400">Free Fire Player Checker</h1>
    
    <form id="checker-form" class="space-y-4">
        <div>
            <label class="block text-gray-300 mb-2">Player UID</label>
            <input type="number" id="uid" required class="w-full p-3 rounded bg-gray-700 text-white border border-gray-600 focus:border-yellow-500 focus:outline-none">
        </div>
        <div>
            <label class="block text-gray-300 mb-2">Region</label>
            <select id="region" required class="w-full p-3 rounded bg-gray-700 text-white border border-gray-600 focus:border-yellow-500 focus:outline-none">
                <option value="BD">Bangladesh (BD)</option>
                <option value="IND">India (IND)</option>
                <option value="SG">Singapore (SG)</option>
            </select>
        </div>
        <button type="submit" class="w-full bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-3 px-4 rounded transition">
            Check UID
        </button>
    </form>

    <div id="error-message" class="hidden mt-4 p-3 bg-red-500 text-white rounded text-center"></div>

    <div id="result-box" class="hidden mt-8 border border-gray-600 rounded p-6 bg-gray-750">
        <div class="flex items-center space-x-4">
            <img id="player-avatar" src="" alt="Avatar" class="w-20 h-20 rounded-full border-2 border-yellow-500 object-cover bg-gray-800">
            <div>
                <h2 id="player-name" class="text-2xl font-bold text-white"></h2>
                <p id="player-level" class="text-gray-400"></p>
            </div>
        </div>
        <div class="mt-4 grid grid-cols-2 gap-4">
            <div class="bg-gray-700 p-3 rounded">
                <span class="text-gray-400 text-sm">Likes</span>
                <p id="player-likes" class="text-lg font-bold text-white"></p>
            </div>
            <div class="bg-gray-700 p-3 rounded">
                <span class="text-gray-400 text-sm">Guild</span>
                <p id="player-guild" class="text-lg font-bold text-white"></p>
            </div>
        </div>
    </div>
</div>
@endsection

@stack('scripts')
<script>
document.getElementById('checker-form').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const uid = document.getElementById('uid').value;
    const region = document.getElementById('region').value;
    const btn = this.querySelector('button');
    const resultBox = document.getElementById('result-box');
    const errorBox = document.getElementById('error-message');
    
    btn.innerHTML = 'Checking...';
    btn.disabled = true;
    errorBox.classList.add('hidden');
    resultBox.classList.add('hidden');

    try {
        const response = await fetch('/api/player', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ uid, region })
        });

        const resData = await response.json();

        if (!response.ok || resData.status === 'error') {
            throw new Error(resData.message || 'Player not found');
        }

        const player = resData.data;

        // Avatar Render Logic
        const headPic = player.AccountInfo.HeadPic || ''; // Map based on API response JSON structure
        const avatarUrl = headPic 
            ? `https://freefiremobile-a.akamaihd.net/ffwebsite/images/headpic/${headPic}.png`
            : `{{ asset('icons/ui/default-avatar.png') }}`; // Fallback

        document.getElementById('player-avatar').src = avatarUrl;
        document.getElementById('player-name').innerText = player.AccountInfo.AccountName;
        document.getElementById('player-level').innerText = `Level: ${player.AccountInfo.AccountLevel}`;
        document.getElementById('player-likes').innerText = player.AccountInfo.AccountLikes;
        document.getElementById('player-guild').innerText = player.GuildInfo?.GuildName || 'No Guild';
        
        resultBox.classList.remove('hidden');

    } catch (error) {
        errorBox.innerText = error.message;
        errorBox.classList.remove('hidden');
    } finally {
        btn.innerHTML = 'Check UID';
        btn.disabled = false;
    }
});
</script>