@extends('layouts.app')
@section('content')
@php
    $isGuest = !auth()->check();

    $sportsProviders = [
        ["name"=>"SABA Sports","image"=>"https://cdn-proxy.globalcontentcloud.com/common/default/sports/saba.jpg","slug"=>"IB","code"=>"ib0","type"=>"sports","status_game"=>""],
        ["name"=>"SBOBET","image"=>"https://cdn-proxy.globalcontentcloud.com/common/default/sports/sbobet.jpg","slug"=>"S3","code"=>"sbo0","type"=>"sports","status_game"=>""],
        ["name"=>"CMD368","image"=>"https://cdn-proxy.globalcontentcloud.com/common/default/sports/ftsport.jpg","slug"=>"CM","code"=>"cmd0","type"=>"sports","status_game"=>""],
        ["name"=>"SABA Esports","image"=>"https://cdn-proxy.globalcontentcloud.com/common/default/sports/e-sabaesports.jpg","slug"=>"#","code"=>"#","type"=>"esport","status_game"=>"sports-game--maintenance disabled"],
        ["name"=>"TFGaming","image"=>"https://cdn-proxy.globalcontentcloud.com/common/default/sports/e-tfgaming.jpg","slug"=>"TF","code"=>"tf0","type"=>"esport","status_game"=>""],
        ["name"=>"SBOBET Virtual","image"=>"https://cdn-proxy.globalcontentcloud.com/common/default/sports/sbovsports.jpg","slug"=>"#","code"=>"#","type"=>"virtual","status_game"=>"sports-game--maintenance disabled"],
        ["name"=>"UG Sports","image"=>asset('assets/img/sports/unitedgaming.webp'),"slug"=>"UG","code"=>"ug0","type"=>"sports","status_game"=>""],
        ["name"=>"AFB777", "image"=>asset('assets/img/sports/AFB1188.webp'),"slug"=>"AF","code"=>"afb0","type"=>"sports","status_game"=>""],
    ];
@endphp

<div class="container">
    <section class="sports">
        <nav class="app-menu app-menu--shadow-end">
            <ul>
                <li class="app-menu__item">
                    <a href="/exclusive" class="">
                        <img alt="Eksklusif" src="/assets/svg/menu/exclusive.svg" class="brand-icon brand-icon--active brand-icon--md">
                        <span>Eksklusif</span>
                        <i class="app-menu--active icon-sort-up icon--lg"></i>
                    </a>
                </li>
                <li class="app-menu__item">
                    <a href="/sports" class="app-link--exact-active app-link--active">
                        <img src="/assets/svg/menu/sports.svg" class="brand-icon brand-icon--active brand-icon--md">
                        <span>Sports+</span>
                        <i class="app-menu--active icon-sort-up icon--lg"></i>
                    </a>
                </li>
                <li class="app-menu__item">
                    <a href="/slots">
                        <img src="/assets/svg/menu/slots.svg" class="brand-icon brand-icon--md">
                        <span>Slots</span>
                        <i class="app-menu--active icon-sort-up icon--lg"></i>
                    </a>
                </li>
                <li class="app-menu__item">
                    <a href="/casino">
                        <img src="/assets/svg/menu/casino.svg" class="brand-icon brand-icon--md">
                        <span>Casino</span>
                        <i class="app-menu--active icon-sort-up icon--lg"></i>
                    </a>
                </li>
                <li class="app-menu__item">
                    <a href="/poker">
                        <img src="/assets/svg/menu/poker.svg" class="brand-icon brand-icon--md">
                        <span>Poker</span>
                        <i class="app-menu--active icon-sort-up icon--lg"></i>
                    </a>
                </li>
                <li class="app-menu__item">
                    <a href="/lotto">
                        <img src="/assets/svg/menu/lotto.svg" class="brand-icon brand-icon--md">
                        <span>Lotto</span>
                        <i class="app-menu--active icon-sort-up icon--lg"></i>
                    </a>
                </li>
                <li class="app-menu__item">
                    <a href="/arcade">
                        <img src="/assets/svg/menu/arcade.svg" class="brand-icon brand-icon--md">
                        <span>Arcade</span>
                        <i class="app-menu--active icon-sort-up icon--lg"></i>
                    </a>
                </li>
                <li class="app-menu__item">
                    <a href="/fishing">
                        <img src="/assets/svg/menu/fishing.svg" class="brand-icon brand-icon--md">
                        <span>Fishing</span>
                        <i class="app-menu--active icon-sort-up icon--lg"></i>
                    </a>
                </li>
            </ul>
        </nav>

        <nav class="sports__nav">
            <ul>
                <li>
                    <a href="{{ route('sports') }}"
                       class="btn btn--flex btn--light {{ $type == 'all' ? 'active' : '' }}">
                        Semua
                    </a>
                </li>
                <li>
                    <a href="{{ route('sports', 'sports') }}"
                       class="btn btn--flex btn--light {{ $type == 'sports' ? 'active' : '' }}">
                        Sports
                    </a>
                </li>
                <li>
                    <a href="{{ route('sports', 'esport') }}"
                       class="btn btn--flex btn--light {{ $type == 'esport' ? 'active' : '' }}">
                        E-sports
                    </a>
                </li>
                <li>
                    <a href="{{ route('sports', 'virtual') }}"
                       class="btn btn--flex btn--light {{ $type == 'virtual' ? 'active' : '' }}">
                        Virtual
                    </a>
                </li>
            </ul>
        </nav>

        <ul class="sports-grid">
            @foreach ($sportsProviders as $p)
                @if($type == 'all' || $type == $p['type'])
                    @php
                        $gameTypeMap = [
                            'sports'  => 'SB',
                            'esport'  => 'ES',
                            'virtual' => 'SB',
                        ];

                        $gameType = $gameTypeMap[$p['type']] ?? 'SB';
                        $isMaintenance = !empty($p['status_game']);
                        $isInvalidGame = $p['slug'] === '#' || $p['code'] === '#';

                        if ($isMaintenance || $isInvalidGame) {
                            $mainHref = 'javascript:void(0)';
                            $extra = 'aria-disabled="true" onclick="return false;"';
                        } elseif (!$isGuest) {
                            $mainHref = route('launchgame', [
                                'game_code' => $p['code'],
                                'game_type' => $gameType,
                                'game_provider' => $p['slug'],
                            ]);
                            $extra = 'target="_blank" rel="noopener noreferrer"';
                        } else {
                            $mainHref = 'javascript:void(0)';
                            $extra = 'data-modal="loginModal"';
                        }
                    @endphp

                    <li class="sports-item {{ $p['status_game'] }}" data-type="{{ $p['type'] }}">
                        <button type="button">
                            <img src="{{ $p['image'] }}" alt="{{ $p['name'] }}">
                            <span>{{ $p['name'] }}</span>
                        </button>

                        <a href="{{ $mainHref }}"
                           class="btn btn--flex btn--brand {{ $isMaintenance ? 'disabled' : '' }}"
                           {!! $extra !!}>
                            Main {{ $p['name'] }}
                        </a>
                    </li>
                @endif
            @endforeach
        </ul>
    </section>
</div>

<script id="filter-sports">
document.addEventListener("DOMContentLoaded", function () {
    const filters = document.querySelectorAll(".nav-filter");
    const items = document.querySelectorAll(".sports-item");

    filters.forEach(btn => {
        btn.addEventListener("click", function (e) {
            e.preventDefault();

            filters.forEach(b => b.classList.remove("active"));
            this.classList.add("active");

            const type = this.getAttribute("data-type");

            items.forEach(item => {
                item.style.display = type === "all" || item.getAttribute("data-type") === type ? "" : "none";
            });
        });
    });
});
</script>
@endsection