@extends('layouts.admin')

@section('title', 'Yerel Oyun Ayarları')

@section('content')
<div class="w-full space-y-5">
    <div class="rounded-xl border border-red-500/20 bg-gradient-to-r from-black via-zinc-950 to-black p-5 shadow-lg shadow-red-950/20">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
            <div>
                <p class="text-xs font-semibold uppercase tracking-[0.24em] text-yellow-400">Yerel oyun motoru</p>
                <h1 class="mt-2 text-2xl font-bold text-white">Oyun RTP ve Bahis Yönetimi</h1>
                <p class="mt-2 max-w-3xl text-sm text-zinc-400">Bu ekrandaki değişiklikler ana liste, mobil başlatma linki ve oyun motoru ayarlarını birlikte günceller. Oyunlar TRY para birimi ve mobil istemci üzerinden çalışacak şekilde sabitlenir.</p>
            </div>
            <div class="grid grid-cols-2 gap-2 text-sm sm:grid-cols-4">
                <div class="rounded-lg border border-zinc-800 bg-zinc-950 px-4 py-3">
                    <div class="text-xs text-zinc-500">Toplam</div>
                    <div class="mt-1 text-lg font-bold text-white">{{ $summary->total }}</div>
                </div>
                <div class="rounded-lg border border-zinc-800 bg-zinc-950 px-4 py-3">
                    <div class="text-xs text-zinc-500">Aktif</div>
                    <div class="mt-1 text-lg font-bold text-emerald-400">{{ $summary->active }}</div>
                </div>
                <div class="rounded-lg border border-zinc-800 bg-zinc-950 px-4 py-3">
                    <div class="text-xs text-zinc-500">Hazır</div>
                    <div class="mt-1 text-lg font-bold text-yellow-400">{{ $summary->ready }}</div>
                </div>
                <div class="rounded-lg border border-zinc-800 bg-zinc-950 px-4 py-3">
                    <div class="text-xs text-zinc-500">Ortalama RTP</div>
                    <div class="mt-1 text-lg font-bold text-white">%{{ number_format($summary->avg_rtp, 2, ',', '.') }}</div>
                </div>
            </div>
        </div>
    </div>

    @if(session('success'))
        <div class="rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-300">{{ session('success') }}</div>
    @endif
    @if(isset($errors) && $errors->any())
        <div class="rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-300">{{ $errors->first() }}</div>
    @endif

    <form method="POST" action="{{ route('admin.local-games.bulk-update') }}" class="rounded-xl border border-yellow-500/20 bg-zinc-950 p-4 shadow-lg shadow-black/30">
        @csrf
        <div class="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
            <div class="max-w-2xl">
                <p class="text-xs font-semibold uppercase tracking-[0.2em] text-yellow-400">Toplu RTP profili</p>
                <h2 class="mt-1 text-lg font-semibold text-white">10 oyunu tek seferde ayarla</h2>
                <p class="mt-1 text-sm text-zinc-400">RTP düştükçe kasa avantajı artar. Değişiklikler yerel oyun motoruna ve ana oyun listesine birlikte yazılır.</p>
            </div>
            <div class="grid w-full gap-3 md:grid-cols-[180px_190px_1fr_auto] xl:w-auto">
                <div>
                    <label class="text-xs font-medium text-zinc-400">Hedef RTP</label>
                    <input name="target_rtp" id="bulk-rtp-input" type="number" min="74" max="96" step="0.01" value="88" class="mt-2 h-10 w-full rounded-lg border border-zinc-700 bg-black px-3 text-right text-white focus:border-yellow-400 focus:outline-none">
                </div>
                <div>
                    <label class="text-xs font-medium text-zinc-400">Bahis profili</label>
                    <select name="bet_profile" class="mt-2 h-10 w-full rounded-lg border border-zinc-700 bg-black px-3 text-white focus:border-yellow-400 focus:outline-none">
                        <option value="keep">Mevcut bahisler kalsın</option>
                        <option value="low">Düşük bahis</option>
                        <option value="standard">Standart bahis</option>
                        <option value="high">Yüksek bahis</option>
                    </select>
                </div>
                <div>
                    <label class="text-xs font-medium text-zinc-400">Hazır seçim</label>
                    <div class="mt-2 grid grid-cols-4 gap-2">
                        <button type="button" class="bulk-rtp-preset rounded-lg border border-zinc-700 bg-black px-2 py-2 text-xs text-zinc-300 hover:border-yellow-400 hover:text-yellow-300" data-rtp="94">Yumuşak</button>
                        <button type="button" class="bulk-rtp-preset rounded-lg border border-zinc-700 bg-black px-2 py-2 text-xs text-zinc-300 hover:border-yellow-400 hover:text-yellow-300" data-rtp="88">Dengeli</button>
                        <button type="button" class="bulk-rtp-preset rounded-lg border border-zinc-700 bg-black px-2 py-2 text-xs text-zinc-300 hover:border-yellow-400 hover:text-yellow-300" data-rtp="82">Sert</button>
                        <button type="button" class="bulk-rtp-preset rounded-lg border border-zinc-700 bg-black px-2 py-2 text-xs text-zinc-300 hover:border-yellow-400 hover:text-yellow-300" data-rtp="78">Çok sert</button>
                    </div>
                </div>
                <div class="flex flex-col justify-end gap-2">
                    <label class="inline-flex items-center gap-2 text-xs text-zinc-400">
                        <input type="checkbox" name="reset_stats" value="1" class="h-4 w-4 accent-yellow-400">
                        Ölçülen RTP istatistiklerini sıfırla
                    </label>
                    <button type="submit" class="inline-flex h-10 items-center justify-center gap-2 rounded-lg bg-yellow-500 px-4 text-sm font-bold text-black hover:bg-yellow-400">
                        <i data-lucide="sliders-horizontal" class="h-4 w-4"></i> Toplu Uygula
                    </button>
                </div>
            </div>
        </div>
    </form>

    <div class="grid gap-4 xl:grid-cols-2">
        @foreach($games as $game)
            <form method="POST" action="{{ route('admin.local-games.update', $game->code) }}" class="local-game-card rounded-xl border border-zinc-800 bg-black/90 p-4 shadow-lg shadow-black/30" data-code="{{ $game->code }}">
                @csrf
                <div class="flex gap-4">
                    <div class="h-24 w-36 shrink-0 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-950">
                        <img src="{{ $game->cover }}" alt="" class="h-full w-full object-cover" onerror="this.style.display='none'">
                    </div>
                    <div class="min-w-0 flex-1">
                        <div class="flex flex-wrap items-start justify-between gap-3">
                            <div>
                                <h2 class="truncate text-lg font-semibold text-white">{{ $game->title }}</h2>
                                <div class="mt-1 text-xs text-zinc-500">{{ $game->code }} · {{ $game->provider }}</div>
                            </div>
                            <label class="inline-flex items-center gap-2 rounded-full border border-zinc-700 bg-zinc-950 px-3 py-1.5 text-sm text-zinc-300">
                                <input type="hidden" name="active" value="0">
                                <input type="checkbox" name="active" value="1" {{ $game->active ? 'checked' : '' }} class="h-4 w-4 accent-red-500">
                                Aktif
                            </label>
                        </div>

                        <div class="mt-3 flex flex-wrap gap-2 text-xs">
                            <span class="rounded-full border px-2 py-1 {{ $game->engine_ready ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-300' : 'border-red-500/30 bg-red-500/10 text-red-300' }}">Motor {{ $game->engine_ready ? 'hazır' : 'eksik' }}</span>
                            <span class="rounded-full border px-2 py-1 {{ $game->client_ready ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-300' : 'border-red-500/30 bg-red-500/10 text-red-300' }}">Mobil istemci {{ $game->client_ready ? 'hazır' : 'eksik' }}</span>
                            <span class="rounded-full border border-yellow-500/30 bg-yellow-500/10 px-2 py-1 text-yellow-300">TRY</span>
                            <span class="rounded-full border border-zinc-700 bg-zinc-950 px-2 py-1 text-zinc-400">{{ $game->rows }} motor kaydı</span>
                        </div>
                    </div>
                </div>

                <div class="mt-5 grid gap-4 lg:grid-cols-[1fr_1fr]">
                    <div class="rounded-lg border border-zinc-800 bg-zinc-950/70 p-4">
                        <div class="flex items-center justify-between gap-3">
                            <label class="text-sm font-medium text-zinc-200">Hedef RTP</label>
                            <span class="rtp-badge rounded-full px-2 py-1 text-xs font-semibold {{ $game->rtp_state === 'low' ? 'bg-red-500/15 text-red-300' : ($game->rtp_state === 'high' ? 'bg-yellow-500/15 text-yellow-300' : 'bg-emerald-500/15 text-emerald-300') }}">
                                %{{ number_format($game->target_rtp, 2, ',', '.') }}
                            </span>
                        </div>
                        <div class="mt-3 flex items-center gap-3">
                            <input class="rtp-range w-full accent-yellow-400" type="range" min="74" max="96" step="0.5" value="{{ $game->target_rtp }}">
                            <input name="target_rtp" class="rtp-input h-10 w-24 rounded-lg border border-zinc-700 bg-black px-3 text-right text-white focus:border-yellow-400 focus:outline-none" type="number" min="74" max="96" step="0.01" value="{{ $game->target_rtp }}">
                        </div>
                        <div class="mt-3 grid grid-cols-3 gap-2">
                            <button type="button" class="rtp-preset rounded-lg border border-zinc-700 bg-black px-2 py-2 text-xs text-zinc-300 hover:border-yellow-400 hover:text-yellow-300" data-rtp="78">Sıkı</button>
                            <button type="button" class="rtp-preset rounded-lg border border-zinc-700 bg-black px-2 py-2 text-xs text-zinc-300 hover:border-yellow-400 hover:text-yellow-300" data-rtp="88">Dengeli</button>
                            <button type="button" class="rtp-preset rounded-lg border border-zinc-700 bg-black px-2 py-2 text-xs text-zinc-300 hover:border-yellow-400 hover:text-yellow-300" data-rtp="94">Yüksek</button>
                        </div>
                        <div class="mt-3 text-xs text-zinc-500">
                            Ölçülen RTP: <span class="text-zinc-300">{{ $game->current_rtp !== null ? '%' . number_format($game->current_rtp, 2, ',', '.') : 'Henüz veri yok' }}</span>
                        </div>
                    </div>

                    <div class="rounded-lg border border-zinc-800 bg-zinc-950/70 p-4">
                        <label class="text-sm font-medium text-zinc-200">Bahis seçenekleri</label>
                        <textarea name="bet" rows="2" class="bet-input mt-3 w-full resize-y rounded-lg border border-zinc-700 bg-black px-3 py-2 text-sm text-white focus:border-yellow-400 focus:outline-none">{{ $game->bet }}</textarea>
                        <div class="mt-3 grid grid-cols-3 gap-2">
                            <button type="button" class="bet-preset rounded-lg border border-zinc-700 bg-black px-2 py-2 text-xs text-zinc-300 hover:border-yellow-400 hover:text-yellow-300" data-bets="0.20, 0.40, 0.60, 1, 2, 4, 6, 10">Düşük</button>
                            <button type="button" class="bet-preset rounded-lg border border-zinc-700 bg-black px-2 py-2 text-xs text-zinc-300 hover:border-yellow-400 hover:text-yellow-300" data-bets="0.50, 1, 2, 5, 10, 20, 50">Standart</button>
                            <button type="button" class="bet-preset rounded-lg border border-zinc-700 bg-black px-2 py-2 text-xs text-zinc-300 hover:border-yellow-400 hover:text-yellow-300" data-bets="5, 10, 20, 50, 100, 200">Yüksek</button>
                        </div>
                        <div class="mt-3 text-xs text-zinc-500">
                            {{ $game->bet_count }} seçenek · min {{ number_format($game->min_bet, 2, ',', '.') }} TRY · max {{ number_format($game->max_bet, 2, ',', '.') }} TRY
                        </div>
                    </div>
                </div>

                <div class="mt-4 grid gap-4 lg:grid-cols-[180px_1fr]">
                    <div>
                        <label class="text-sm font-medium text-zinc-200">Değer çarpanı</label>
                        <input name="denomination" type="number" min="0.01" max="100" step="0.01" value="{{ $game->denomination }}" class="mt-2 h-10 w-full rounded-lg border border-zinc-700 bg-zinc-950 px-3 text-white focus:border-yellow-400 focus:outline-none">
                    </div>
                    <div class="flex flex-wrap items-end justify-end gap-2">
                        <a href="{{ url($game->url) }}" target="_blank" class="inline-flex h-10 items-center gap-2 rounded-lg border border-zinc-700 bg-zinc-950 px-4 text-sm font-medium text-zinc-200 hover:border-yellow-400 hover:text-yellow-300">
                            <i data-lucide="play" class="h-4 w-4"></i> Test Et
                        </a>
                        <button type="submit" class="inline-flex h-10 items-center gap-2 rounded-lg bg-red-600 px-4 text-sm font-semibold text-white hover:bg-red-500">
                            <i data-lucide="save" class="h-4 w-4"></i> Kaydet
                        </button>
                    </div>
                </div>
            </form>

            <form method="POST" action="{{ route('admin.local-games.reset-stats', $game->code) }}" class="-mt-3 flex justify-end px-2" onsubmit="return confirm('Bu oyunun ölçülen RTP istatistikleri sıfırlansın mı?')">
                @csrf
                <button type="submit" class="text-xs text-zinc-500 hover:text-red-400">RTP istatistiğini sıfırla</button>
            </form>
        @endforeach
    </div>
</div>

<script>
document.querySelectorAll('.local-game-card').forEach((card) => {
    const range = card.querySelector('.rtp-range');
    const input = card.querySelector('.rtp-input');
    const badge = card.querySelector('.rtp-badge');
    const syncRtp = (value) => {
        const num = Math.max(74, Math.min(96, parseFloat(value || 0)));
        const shown = Number.isFinite(num) ? num.toFixed(2) : '88.00';
        range.value = shown;
        input.value = shown;
        badge.textContent = '%' + shown.replace('.', ',');
    };
    range.addEventListener('input', () => syncRtp(range.value));
    input.addEventListener('input', () => syncRtp(input.value));
    card.querySelectorAll('.rtp-preset').forEach((button) => {
        button.addEventListener('click', () => syncRtp(button.dataset.rtp));
    });
    card.querySelectorAll('.bet-preset').forEach((button) => {
        button.addEventListener('click', () => {
            card.querySelector('.bet-input').value = button.dataset.bets;
        });
    });
});

document.querySelectorAll('.bulk-rtp-preset').forEach((button) => {
    button.addEventListener('click', () => {
        const input = document.getElementById('bulk-rtp-input');
        if (input) input.value = Number(button.dataset.rtp).toFixed(2);
    });
});
</script>
@endsection