@extends('layouts.app')

@section('title', 'Spor Bahisleri - ' . ($settings->site_adi ?? 'Strach'))

@push('head')
    <meta name="referrer" content="unsafe-url">
@endpush

@section('content')
<div class="relative min-h-[calc(100vh-72px)] bg-[#101214]">
    <iframe
        id="sportsIframe"
        name="sportsIframe"
        title="Spor Bahisleri"
        class="block h-[calc(100vh-72px)] min-h-[680px] w-full border-0 bg-[#101214]"
        allowfullscreen
        referrerpolicy="unsafe-url">
    </iframe>

    <form id="strachSportsForm" method="POST" action="{{ $actionUrl }}" target="sportsIframe" class="hidden">
        <input type="hidden" name="user_id" value="{{ $user->id }}">
        <input type="hidden" name="username" value="{{ $user->username }}">
        <input type="hidden" name="agentcode" value="{{ $sportsApi->agent_code }}">
        <input type="hidden" name="api_key" value="{{ $sportsApi->api_key }}">
        <input type="hidden" name="api_secret" value="{{ $sportsApi->api_secret }}">
        <input type="hidden" name="redirect" value="{{ $redirectPath }}">
    </form>

    <div id="loadingState" class="absolute inset-0 flex items-center justify-center bg-[#101214]">
        <div class="text-center">
            <div class="mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-2 border-zinc-700 border-t-red-500"></div>
            <p class="text-base font-semibold text-white">Spor sistemi açılıyor...</p>
        </div>
    </div>

    <div id="errorState" class="absolute inset-0 hidden items-center justify-center bg-[#101214] px-4">
        <div class="max-w-md text-center">
            <div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-red-500/15 text-red-400">
                <i class="fa-solid fa-triangle-exclamation text-xl"></i>
            </div>
            <p class="mb-2 text-lg font-semibold text-white">Spor sistemi açılamadı</p>
            <p class="mb-5 text-sm text-zinc-400" id="sportsErrorMessage">Bağlantıyı yeniden deneyebilirsin.</p>
            <button type="button" id="retrySports" class="rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-red-700">
                Tekrar Dene
            </button>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('strachSportsForm');
    const iframe = document.getElementById('sportsIframe');
    const loadingState = document.getElementById('loadingState');
    const errorState = document.getElementById('errorState');
    const retryButton = document.getElementById('retrySports');

    let loaded = false;
    let timer = null;

    const openSports = () => {
        loaded = false;
        loadingState.style.display = 'flex';
        errorState.classList.add('hidden');

        window.clearTimeout(timer);
        timer = window.setTimeout(() => {
            if (!loaded) {
                loadingState.style.display = 'none';
                errorState.classList.remove('hidden');
                errorState.classList.add('flex');
            }
        }, 20000);

        form.submit();
    };

    iframe.addEventListener('load', () => {
        loaded = true;
        window.clearTimeout(timer);
        loadingState.style.display = 'none';
        errorState.classList.add('hidden');
        errorState.classList.remove('flex');
    });

    retryButton.addEventListener('click', openSports);
    openSports();
});
</script>
@endsection