@extends($activeTemplate . 'layouts.bet')
@section('bet')
    @php
        $banners = getContent('banner.element', false, null, true);
        $optionsId = collect(session()->get('bets'))->pluck('option_id')->toArray();
    @endphp

<style>
    /*.header-fluid-custom-parent .logo{
        display: none;
    }*/
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
    <!-- Owl Carousel CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- Owl Carousel JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="col-12">
    <div id="owl-demo" class="owl-carousel owl-theme">
    <div class="item">
        <div class="grid-event _with-video _no-video _live grid-event-pro slider-event-pro event-slide-bg_5" role="presentation">
            <div class="grid-event__title _tennis _is-icon">
                <div class="grid-event__tournament">
                    <div class="tournament-logo">
                        <img title="ATP Shanghai" alt="ATP Shanghai" class="logo-img" src="https://prod.sportbook.work/icons/tournament/30/480.png">
                    </div>
                    <a href="/tennis/tournaments/480" class="grid-event__tournament-name hover-underline"> ATP Shanghai</a>
                </div>
                <div class="grid-event-pro__title">
                    <div class="grid-event__title-discipline">
                        <i class="discipline-icon _tennis"></i>
                        <div class="item-disciplines__name">
                            <span>Tennis&nbsp;&nbsp;</span>
                        </div>
                    </div>
                    <div class="grid-event__time _live">
                        <span>Set 3</span>
                    </div>
                    <div class="_badge--live">LIVE</div>
                    <div class="_title-icons__wrap">
                        <i class="iconFont iconFont-icon-match-tracker-pro"></i>
                    </div>
                </div>
            </div>
            <div class="grid-event__content">
                <a href="/tennis/tiafoe-francis-vs-safiullin-roman-22231154/bets" class="grid-event__competitors">
                    <div class="grid-event__competitors-wrapper">
                        <div class="grid-event__competitor">
                            <img alt="Tiafoe Francis-logo" src="https://prod.sportbook.work/icons/30/1831.png" data-src="https://prod.sportbook.work/icons/30/1831.png" width="30" height="30" class="grid-event__competitor-logo ls-is-cached lazyloaded">
                            <div class="grid-event__competitor-wrap">
                                <div class="grid-event__competitor-name">
                                    <span>Tiafoe Francis</span>
                                </div>
                            </div>
                        </div>
                        <div class="grid-event__competitors-divider">VS</div>
                        <div class="grid-event__competitor">
                            <img alt="Safiullin Roman-logo" src="https://prod.sportbook.work/icons/30/26898.png" data-src="https://prod.sportbook.work/icons/30/26898.png" width="30" height="30" class="grid-event__competitor-logo ls-is-cached lazyloaded">
                            <div class="grid-event__competitor-wrap">
                                <div class="grid-event__competitor-name">
                                    <span>Safiullin Roman</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="grid-event__score">
                        <div class="serving-status">
                            <i class="iconFont iconFont-icon-serving"></i>
                            <div class="serving-status__stub"></div>
                        </div>
                        <div class="score__col">
                            <span class="score__item">1</span>
                            <span class="score__item">1</span>
                        </div>
                    </div>
                </a>
                <div class="grid-markets">
                    <div class="grid-market _double">
                        <button class="outcome equal _101" type="button" data-result-status="" style="order: 101;">
                            <span class="outcome__status">1</span>
                            <span class="outcome__number">6.88</span>
                        </button>
                        <button class="outcome equal _103" type="button" data-result-status="" style="order: 103;">
                            <span class="outcome__status">2</span>
                            <span class="outcome__number">1.08</span>
                        </button>
                    </div>
                    <div class="grid-market__name" style="order: 1;">Match Winner</div>
                </div>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="grid-event _no-video grid-event-pro slider-event-pro event-slide-bg_3" role="presentation">
            <div class="grid-event__title _baseball">
                <div class="grid-event__tournament">
                    <div class="tournament-logo">
                        <img title="USA. MLB" alt="USA. MLB" class="logo-img" src="https://prod.sportbook.work/icons/tournament/30/220.png">
                    </div>
                    <a href="/baseball/tournaments/220" class="grid-event__tournament-name hover-underline"> USA. MLB</a>
                </div>
                <div class="grid-event-pro__title">
                    <div class="grid-event__title-discipline">
                        <i class="discipline-icon _baseball"></i>
                        <div class="item-disciplines__name">
                            <span>Baseball&nbsp;&nbsp;•</span>
                        </div>
                    </div>
                    <div class="grid-event__time">
                        <span>Oct 9 • 01:30</span>
                    </div>
                </div>
            </div>
            <div class="grid-event__content">
                <a href="/baseball/san-diego-padres-vs-los-angeles-dodgers-22177421/bets" class="grid-event__competitors">
                    <div class="grid-event__competitors-wrapper">
                        <div class="grid-event__competitor">
                            <img alt="San Diego Padres-logo" src="https://prod.sportbook.work/icons/30/1680.png" data-src="https://prod.sportbook.work/icons/30/1680.png" width="30" height="30" class="grid-event__competitor-logo ls-is-cached lazyloaded">
                            <div class="grid-event__competitor-wrap">
                                <div class="grid-event__competitor-name">
                                    <span>San Diego Padres</span>
                                </div>
                            </div>
                        </div>
                        <div class="grid-event__competitors-divider">VS</div>
                        <div class="grid-event__competitor">
                            <img alt="Los Angeles Dodgers-logo" src="https://prod.sportbook.work/icons/30/1671.png" data-src="https://prod.sportbook.work/icons/30/1671.png" width="30" height="30" class="grid-event__competitor-logo ls-is-cached lazyloaded">
                            <div class="grid-event__competitor-wrap">
                                <div class="grid-event__competitor-name">
                                    <span>Los Angeles Dodgers</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
                <div class="grid-markets">
                    <div class="grid-market _multi">
                        <button class="outcome equal _101" type="button" data-result-status="" style="order: 101;">
                            <span class="outcome__status">1</span>
                            <span class="outcome__number">1.71</span>
                        </button>
                        <button class="outcome equal _102" type="button" data-result-status="" style="order: 102;">
                            <span class="outcome__status">X</span>
                            <span class="outcome__number">9.50</span>
                        </button>
                        <button class="outcome equal _103" type="button" data-result-status="" style="order: 103;">
                            <span class="outcome__status">2</span>
                            <span class="outcome__number">2.35</span>
                        </button>
                    </div>
                    <div class="grid-market__name" style="order: 1;">Most Hits</div>
                </div>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="grid-event _no-video grid-event-pro slider-event-pro event-slide-bg_1" role="presentation">
            <div class="grid-event__title _baseball">
                <div class="grid-event__tournament">
                    <div class="tournament-logo">
                        <img title="USA. MLB" alt="USA. MLB" class="logo-img" src="https://prod.sportbook.work/icons/tournament/30/220.png">
                    </div>
                    <a href="/baseball/tournaments/220" class="grid-event__tournament-name hover-underline"> USA. MLB</a>
                </div>
                <div class="grid-event-pro__title">
                    <div class="grid-event__title-discipline">
                        <i class="discipline-icon _baseball"></i>
                        <div class="item-disciplines__name">
                            <span>Baseball&nbsp;&nbsp;•</span>
                        </div>
                    </div>
                    <div class="grid-event__time">
                        <span>Oct 9 • 01:30</span>
                    </div>
                </div>
            </div>
            <div class="grid-event__content">
                <a href="/baseball/san-diego-padres-vs-los-angeles-dodgers-22177421/bets" class="grid-event__competitors">
                    <div class="grid-event__competitors-wrapper">
                        <div class="grid-event__competitor">
                            <img alt="San Diego Padres-logo" src="https://prod.sportbook.work/icons/30/1680.png" data-src="https://prod.sportbook.work/icons/30/1680.png" width="30" height="30" class="grid-event__competitor-logo ls-is-cached lazyloaded">
                            <div class="grid-event__competitor-wrap">
                                <div class="grid-event__competitor-name">
                                    <span>San Diego Padres</span>
                                </div>
                            </div>
                        </div>
                        <div class="grid-event__competitors-divider">VS</div>
                        <div class="grid-event__competitor">
                            <img alt="Los Angeles Dodgers-logo" src="https://prod.sportbook.work/icons/30/1671.png" data-src="https://prod.sportbook.work/icons/30/1671.png" width="30" height="30" class="grid-event__competitor-logo ls-is-cached lazyloaded">
                            <div class="grid-event__competitor-wrap">
                                <div class="grid-event__competitor-name">
                                    <span>Los Angeles Dodgers</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
                <div class="grid-markets">
                    <div class="grid-market _multi">
                        <button class="outcome equal _101" type="button" data-result-status="" style="order: 101;">
                            <span class="outcome__status">1</span>
                            <span class="outcome__number">1.74</span>
                        </button>
                        <button class="outcome equal _102" type="button" data-result-status="" style="order: 102;">
                            <span class="outcome__status">X</span>
                            <span class="outcome__number">9.50</span>
                        </button>
                        <button class="outcome equal _103" type="button" data-result-status="" style="order: 103;">
                            <span class="outcome__status">2</span>
                            <span class="outcome__number">2.35</span>
                        </button>
                    </div>
                    <div class="grid-market__name" style="order: 1;">Most Hits</div>
                </div>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="grid-event _no-video grid-event-pro slider-event-pro event-slide-bg_4" role="presentation">
            <div class="grid-event__title _csgo">
                <div class="grid-event__tournament">
                    <div class="tournament-logo">
                        <img title="Counter-Strike. IEM Rio" alt="Counter-Strike. IEM Rio" class="logo-img" src="https://prod.sportbook.work/icons/tournament/30/21627.png">
                    </div>
                    <a href="/csgo/tournaments/21627" class="grid-event__tournament-name hover-underline"> Counter-Strike. IEM Rio</a>
                </div>
                <div class="grid-event-pro__title">
                        <div class="grid-event__time">
                            <span>Oct 8 • 19:30</span>
                        </div>
                    </div>
                </div>
                <div class="grid-event__content">
                    <a href="/csgo/vitality-vs-themongolz-22238225/bets" class="grid-event__competitors">
                        <div class="grid-event__competitors-wrapper">
                            <div class="grid-event__competitor">
                                <img alt="Vitality-logo" src="https://prod.sportbook.work/icons/30/58022.png" data-src="https://prod.sportbook.work/icons/30/58022.png" width="30" height="30" class="grid-event__competitor-logo ls-is-cached lazyloaded">
                                <div class="grid-event__competitor-wrap">
                                    <div class="grid-event__competitor-name">
                                    <span>Vitality</span>
                                </div>
                            </div>
                        </div>
                        <div class="grid-event__competitors-divider">VS</div>
                        <div class="grid-event__competitor">
                            <img alt="TheMongolz-logo" src="https://prod.sportbook.work/icons/30/44935.png" data-src="https://prod.sportbook.work/icons/30/44935.png" width="30" height="30" class="grid-event__competitor-logo ls-is-cached lazyloaded">
                            <div class="grid-event__competitor-wrap">
                                <div class="grid-event__competitor-name">
                                    <span>TheMongolz</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
                <div class="grid-markets">
                    <div class="grid-market _double">
                        <button class="outcome equal _101" type="button" data-result-status="" style="order: 101;">
                            <span class="outcome__status">1</span>
                            <span class="outcome__number">1.18</span>
                        </button>
                        <button class="outcome equal _103" type="button" data-result-status="" style="order: 103;">
                            <span class="outcome__status">2</span>
                            <span class="outcome__number">4.32</span>
                        </button>
                    </div>
                    <div class="grid-market__name" style="order: 1;">Match Winner</div>
                </div>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="grid-event _no-video grid-event-pro slider-event-pro event-slide-bg_1" role="presentation"><div class="grid-event__title _csgo"><div class="grid-event__tournament"><div class="tournament-logo"><img title="Counter-Strike. IEM Rio" alt="Counter-Strike. IEM Rio" class="logo-img" src="https://prod.sportbook.work/icons/tournament/30/21627.png"></div><a href="/csgo/tournaments/21627" class="grid-event__tournament-name hover-underline"> Counter-Strike. IEM Rio</a><span class="hot-badge"></span></div><div class="grid-event-pro__title"><div class="grid-event__title-discipline"><i class="discipline-icon _csgo"></i><div class="item-disciplines__name"><span>CS&nbsp;&nbsp;•</span></div></div><div class="grid-event__time"><span>Oct 8 • 19:30</span></div></div></div><div class="grid-event__content"><a href="/csgo/9z-vs-virtus-pro-22238239/bets" class="grid-event__competitors"><div class="grid-event__competitors-wrapper"><div class="grid-event__competitor"><img alt="9z-logo" src="https://prod.sportbook.work/icons/30/198468.png" data-src="https://prod.sportbook.work/icons/30/198468.png" width="30" height="30" class="grid-event__competitor-logo ls-is-cached lazyloaded"><div class="grid-event__competitor-wrap"><div class="grid-event__competitor-name"><span>9z</span></div></div></div><div class="grid-event__competitors-divider">VS</div><div class="grid-event__competitor"><img alt="Virtus.pro-logo" src="https://prod.sportbook.work/icons/30/38096.png" data-src="https://prod.sportbook.work/icons/30/38096.png" width="30" height="30" class="grid-event__competitor-logo ls-is-cached lazyloaded"><div class="grid-event__competitor-wrap"><div class="grid-event__competitor-name"><span>Virtus.pro</span></div></div></div></div></a><div class="grid-markets"><div class="grid-market _double"><button class="outcome equal _101" type="button" data-result-status="" style="order: 101;"><span class="outcome__status">1</span><span class="outcome__number">2.41</span></button><button class="outcome equal _103" type="button" data-result-status="" style="order: 103;"><span class="outcome__status">2</span><span class="outcome__number">1.51</span></button></div><div class="grid-market__name" style="order: 1;">Match Winner</div></div></div></div>
    </div>
    <div class="item">
        <div class="grid-event _no-video grid-event-pro slider-event-pro event-slide-bg_1" role="presentation">
            <div class="grid-event__title _csgo">
                <div class="grid-event__tournament">
                    <div class="tournament-logo">
                        <img title="Counter-Strike. IEM Rio" alt="Counter-Strike. IEM Rio" class="logo-img" src="https://prod.sportbook.work/icons/tournament/30/21627.png"></div>
                        <a href="/csgo/tournaments/21627" class="grid-event__tournament-name hover-underline"> Counter-Strike. IEM Rio</a>
                        <span class="hot-badge"></span>
                    </div>
                    <div class="grid-event-pro__title">
                        <div class="grid-event__title-discipline">
                            <i class="discipline-icon _csgo"></i>
                            <div class="item-disciplines__name">
                                <span>CS&nbsp;&nbsp;•</span>
                            </div>
                        </div>
                        <div class="grid-event__time">
                            <span>Oct 8 • 19:30</span>
                        </div>
                    </div>
                </div>
                <div class="grid-event__content">
                    <a href="/csgo/9z-vs-virtus-pro-22238239/bets" class="grid-event__competitors">
                        <div class="grid-event__competitors-wrapper">
                            <div class="grid-event__competitor">
                                <img alt="9z-logo" src="https://prod.sportbook.work/icons/30/198468.png" data-src="https://prod.sportbook.work/icons/30/198468.png" width="30" height="30" class="grid-event__competitor-logo ls-is-cached lazyloaded">
                                <div class="grid-event__competitor-wrap">
                                    <div class="grid-event__competitor-name">
                                        <span>9z</span>
                                    </div>
                                </div>
                            </div>
                            <div class="grid-event__competitors-divider">VS</div>
                            <div class="grid-event__competitor">
                                <img alt="Virtus.pro-logo" src="https://prod.sportbook.work/icons/30/38096.png" data-src="https://prod.sportbook.work/icons/30/38096.png" width="30" height="30" class="grid-event__competitor-logo ls-is-cached lazyloaded">
                                <div class="grid-event__competitor-wrap">
                                    <div class="grid-event__competitor-name">
                                        <span>Virtus.pro</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                    <div class="grid-markets">
                        <div class="grid-market _double">
                            <button class="outcome equal _101" type="button" data-result-status="" style="order: 101;">
                                <span class="outcome__status">1</span>
                                <span class="outcome__number">2.41</span>
                            </button>
                            <button class="outcome equal _103" type="button" data-result-status="" style="order: 103;">
                                <span class="outcome__status">2</span>
                                <span class="outcome__number">1.51</span>
                            </button>
                        </div>
                        <div class="grid-market__name" style="order: 1;">Match Winner</div>
                    </div>
                </div>
            </div>
    </div>
</div>
<script>
 $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:{
            items:0,
            nav:true
        },
        600:{
            items:1,
            nav:false
        },
        1000:{
            items:2,
            nav:true,
            loop:false
        }
    }
})

</script>
</div>

    <div class="col-12">
        <div class="lobby-filters-pro _tournaments _main-page" data-nav-carousel="true">
            <div class="control nav-control__left _default" style="transition: 0.1s ease-in-out; user-select: none;">
                <i class="_icon-triangle-right _left"></i>
            </div>
            <div class="lobby-filters__inner-pro scrollable-stage _scrollable" style="user-select: none; scroll-behavior: smooth;">
                <a href="/live" class="lobby-filters__item-pro" data-intersecting="true">
                    <span class="lobby-filters__item-pro--circle" style=""></span>
                    <span class="lobby-filters__item-text">Live</span>
                    <div class="events-count">
                        <span>53</span>
                    </div>
                </a>
                <a href="/top" class="lobby-filters__item-pro" data-intersecting="true">
                    <i class="discipline-icon _hot"></i>
                    <span class="lobby-filters__item-text">Top</span>
                    <div class="events-count">
                        <span>158</span>
                    </div>
                </a>
                <div class="lobby-filters__item-pro games-nav__tournaments-item-pro" data-intersecting="true">
                    <div class="tournament-icon">
                        <img title="South Korea. KBO" alt="South Korea. KBO" class="logo-img" src="https://prod.sportbook.work/icons/tournament/20/445.png">
                    </div>
                    <span>South Korea. KBO</span>
                </div>
                <div class="lobby-filters__item-pro games-nav__tournaments-item-pro" data-intersecting="true">
                    <div class="tournament-icon">
                        <img title="Mexico. LMP" alt="Mexico. LMP" class="logo-img" src="https://prod.sportbook.work/icons/tournament/20/25019.png">
                    </div>
                    <span>Mexico. LMP</span>
                </div>
                <div class="lobby-filters__item-pro games-nav__tournaments-item-pro" data-intersecting="true">
                    <div class="tournament-icon">
                        <img title="Chinese Taipei. CPBL" alt="Chinese Taipei. CPBL" class="logo-img" src="https://prod.sportbook.work/icons/tournament/20/600.png">
                    </div>
                    <span>Chinese Taipei. CPBL</span>
                </div>
                <div class="lobby-filters__item-pro games-nav__tournaments-item-pro" data-intersecting="false">
                    <div class="tournament-icon">
                        <img title="UEFA Champions League" alt="UEFA Champions League" class="logo-img" src="https://prod.sportbook.work/icons/tournament/20/1.png">
                    </div>
                    <span>UEFA Champions League</span>
                </div>
                <div class="lobby-filters__item-pro games-nav__tournaments-item-pro" data-intersecting="false">
                    <div class="tournament-icon">
                        <img title="UEFA Europa League" alt="UEFA Europa League" class="logo-img" src="https://prod.sportbook.work/icons/tournament/20/22.png">
                    </div>
                    <span>UEFA Europa League</span>
                </div>
                <div class="lobby-filters__item-pro games-nav__tournaments-item-pro" data-intersecting="false">
                    <div class="tournament-icon">
                        <img title="Copa Libertadores" alt="Copa Libertadores" class="logo-img" src="https://prod.sportbook.work/icons/tournament/20/127.png">
                    </div>
                    <span>Copa Libertadores</span>
                </div>
                <div class="lobby-filters__item-pro games-nav__tournaments-item-pro" data-intersecting="false">
                    <div class="tournament-icon">
                        <img title="ATP Vienna" alt="ATP Vienna" class="logo-img" src="https://prod.sportbook.work/icons/tournament/20/643.png">
                    </div>
                    <span>ATP Vienna</span>
                </div>
                <div class="lobby-filters__item-pro games-nav__tournaments-item-pro" data-intersecting="false">
                    <div class="tournament-icon">
                        <img title="ATP Basel" alt="ATP Basel" class="logo-img" src="https://prod.sportbook.work/icons/tournament/20/645.png">
                    </div>
                    <span>ATP Basel</span>
                </div>
                <div class="lobby-filters__item-pro games-nav__tournaments-item-pro" data-intersecting="false">
                    <div class="tournament-icon">
                        <img title="WTA Guangzhou" alt="WTA Guangzhou" class="logo-img" src="https://prod.sportbook.work/icons/tournament/20/503.png">
                    </div>
                    <span>WTA Guangzhou</span>
                </div>
                <div class="lobby-filters__item-pro games-nav__tournaments-item-pro" data-intersecting="false">
                    <div class="tournament-icon">
                        <img title="NBA" alt="NBA" class="logo-img" src="https://prod.sportbook.work/icons/tournament/20/100.png">
                    </div>
                    <span>NBA</span>
                </div>
                <div class="lobby-filters__item-pro games-nav__tournaments-item-pro" data-intersecting="false">
                    <div class="tournament-icon">
                        <img title="Euroleague" alt="Euroleague" class="logo-img" src="https://prod.sportbook.work/icons/tournament/20/103.png">
                    </div>
                    <span>Euroleague</span>
                </div>
                <div class="lobby-filters__item-pro games-nav__tournaments-item-pro" data-intersecting="false">
                    <div class="tournament-icon">
                        <img title="Eurocup. Men" alt="Eurocup. Men" class="logo-img" src="https://prod.sportbook.work/icons/tournament/20/97.png">
                    </div>
                    <span>Eurocup. Men</span>
                </div>
                <div class="lobby-filters__item-pro games-nav__tournaments-item-pro" data-intersecting="false">
                    <div class="tournament-icon">
                        <img title="eFootball. ESportsBattle. Bundesliga (2x4 min.)" alt="eFootball. ESportsBattle. Bundesliga (2x4 min.)" class="logo-img" src="https://prod.sportbook.work/icons/tournament/20/15709.png">
                    </div>
                    <span>eFootball. ESportsBattle. Bundesliga (2x4 min.)</span>
                </div>
                <div class="lobby-filters__item-pro games-nav__tournaments-item-pro" data-intersecting="false">
                    <div class="tournament-icon">
                        <img title="eFootball. ESportsBattle. Volta Europe Cup (2x3 min.)" alt="eFootball. ESportsBattle. Volta Europe Cup (2x3 min.)" class="logo-img" src="https://prod.sportbook.work/icons/tournament/20/22539.png">
                    </div>
                    <span>eFootball. ESportsBattle. Volta Europe Cup (2x3 min.)</span>
                </div>
                <div class="lobby-filters__item-pro games-nav__tournaments-item-pro" data-intersecting="false">
                    <div class="tournament-icon">
                        <img title="eFootball. ESportsBattle. Volta International B (2x3 min.)" alt="eFootball. ESportsBattle. Volta International B (2x3 min.)" class="logo-img" src="https://prod.sportbook.work/icons/tournament/20/22915.png">
                    </div>
                    <span>eFootball. ESportsBattle. Volta International B (2x3 min.)</span>
                </div>
            </div>
            <div class="control nav-control__right _default _active" style="transition: 0.1s ease-in-out; user-select: none;">
                <i class="_icon-triangle-right"></i>
            </div>
        </div>
    </div>


    <div class="col-12">
        <div class="banner-slider hero-slider mb-3">
            @foreach ($banners as $banner)
                <div class="banner_slide">
                    <img class="banner_image" src="{{ frontendImage('banner', @$banner->data_values->image, '1610x250') }}">
                </div>
            @endforeach
        </div>
    </div>

    <div class="col-12" id="{{ count($games) }}">
        <div class="betting-body">
            <div class="grid-line">
            </div>
            <div class="row g-3">
                <div class="grid-line">
                    @if ($page == 'home')
                        @foreach ($groupedData as $categoryData)
                            {{-- Get category info from the grouped data --}}
                            @php
                                $category = $categoryData['category'];
                                $leagues = $categoryData['leagues'];
                            @endphp
                            @if ($category->games_count > 0)
                                {{-- Display category header --}}
                                <div class="grid-line__title">
                                    <span class="league-title__flag">
                                        <img class="league-title__flag-img"
                                            src="{{ getImage(getFilePath('league') . '/' . @$category->image, getFileSize('league')) }}"
                                            alt="@lang('image')">
                                    </span>
                                    <a href="{{ route('category.games', @$category->slug) }}" class="grid-line__title-link">
                                        <div class="grid-line__title-icon">
                                            {{-- Dynamic category icon --}}
                                            {!! $category->icon !!}
                                        </div>
                                        <div class="grid-line__title-container p-1">
                                            <div class="grid-line__title-main">
                                                <span>{{ __(@$category->name) }}</span>
                                            </div>
                                        </div>
                                    </a>
                                </div>

                                {{-- Loop through each league under this category --}}
                                @foreach ($leagues as $league)
                                    {{-- Check if the league contains games --}}
                                    @if ($league->games->count() > 0)
                                        {{-- Display each game in the league --}}
                                        @foreach ($league->games as $game)
                                            <div class="grid-line__content">
                                                <div class="grid-event _with-video _no-video grid-event-pro"
                                                    role="presentation">
                                                    <div class="grid-event__title _football">
                                                        <div class="grid-event__tournament">
                                                            <div class="tournament-logo">
                                                                <img class="logo-img"
                                                                    src="{{ getImage(getFilePath('league') . '/' . @$league->image, getFileSize('league')) }}"
                                                                    alt="@lang('image')">
                                                            </div>
                                                            <a href="javascript:void(0);"
                                                                class="grid-event__tournament-name hover-underline">
                                                                {{ @$league->name }}
                                                            </a>
                                                            <span class="hot-badge"></span>
                                                        </div>
                                                        <div class="grid-event-pro__title">
                                                            <div class="grid-event__time">
                                                                <span>{{ $game->bet_start_time }}</span>
                                                            </div>
                                                            @if ($game->isRunning)
                                                                <div class="_title-icons__wrap">
                                                                    <i class="iconFont iconFont-icon-match-tracker-pro"
                                                                        style="color: red"></i>
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </div>

                                                    <div class="grid-event__content">
                                                        <a href="#" class="grid-event__competitors">
                                                            <div class="grid-event__competitors-wrapper">
                                                                <div class="grid-event__competitor">
                                                                    <img src="{{ $game->teamOne->teamImage() }}"
                                                                        alt="@lang('image')" width="30"
                                                                        height="30"
                                                                        class="grid-event__competitor-logo lazyloaded">
                                                                    <div class="grid-event__competitor-wrap">
                                                                        <div class="grid-event__competitor-name">
                                                                            <span>{{ __($game->teamOne->short_name) }}</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="grid-event__competitors-divider">VS</div>
                                                                <div class="grid-event__competitor">
                                                                    <img src="{{ $game->teamTwo->teamImage() }}"
                                                                        alt="@lang('image')" width="30"
                                                                        height="30"
                                                                        class="grid-event__competitor-logo lazyloaded">
                                                                    <div class="grid-event__competitor-wrap">
                                                                        <div class="grid-event__competitor-name">
                                                                            <span>{{ __($game->teamTwo->short_name) }}</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </a>

                                                        {{-- Display the markets and options for the game --}}
                                                        @if ($game->questions->count())
                                                            @php
                                                                $firstMarket = $game->questions->first();
                                                                $showCount = 3;
                                                                $more = $game->questions->count() - $showCount;
                                                                if ($more <= 0) {
                                                                    $more = 'More..';
                                                                }
                                                                $i = 1;
                                                            @endphp
                                                            <div class="grid-markets">
                                                                <div class="grid-market _multi option-odd-lists">
                                                                    {{-- Loop through the options --}}
                                                                    @foreach ($firstMarket->options as $option)
                                                                        @if ($i == 4)
                                                                            @continue
                                                                        @endif
                                                                        <div class="option-odd-list__item">
                                                                            <button
                                                                                class="outcome equal _101 oddBtn @if (in_array($option->id, $optionsId)) active @endif @if ($option->locked) locked @endif"
                                                                                data-option_id="{{ $option->id }}"
                                                                                @disabled($game->bet_start_time >= now())
                                                                                style="order: 10{{ $i }};">
                                                                                <span
                                                                                    class="outcome__status">{{ $option->name }}</span>
                                                                                <span
                                                                                    class="outcome__number">{{ rateData($option->odds) }}</span>
                                                                            </button>
                                                                            @php
                                                                                $i++;
                                                                            @endphp
                                                                        </div>
                                                                    @endforeach
                                                                </div>
                                                                <a href="{{ route('game.markets', $game->slug) }}"
                                                                    class="grid-event-pro__totals">{{ $more }}</a>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                @endforeach
                            @endif
                        @endforeach
                    @else
                        @if (@$activeLeague && $games->count())
                            <div class="grid-line__title">
                                <span class="league-title__flag">
                                    <img class="league-title__flag-img"
                                        src="{{ getImage(getFilePath('league') . '/' . @$activeLeague->image, getFileSize('league')) }}"
                                        alt="@lang('image')">
                                </span>
                                <a href="{{ route('category.games', @$activeLeague->slug) }}"
                                    class="grid-line__title-link">
                                    <div class="grid-line__title-icon">
                                        {!! $activeLeague->icon !!}
                                    </div>
                                    <div class="grid-line__title-container p-1">
                                        <div class="grid-line__title-main">
                                            <span>{{ __(@$activeLeague->name) }}</span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endif

                        @foreach ($games as $game)
                            <div class="grid-line__content">
                                <div class="grid-event _with-video _no-video grid-event-pro" role="presentation">
                                    <div class="grid-event__title _football">
                                        <div class="grid-event__tournament">
                                            <div class="tournament-logo">
                                                <img class="logo-img"
                                                    src="{{ getImage(getFilePath('league') . '/' . @$league->image, getFileSize('league')) }}"
                                                    alt="@lang('image')">
                                            </div>
                                            <a href="javascript:void(0);"
                                                class="grid-event__tournament-name hover-underline">
                                                {{ @$league->name }}
                                            </a>
                                            <span class="hot-badge"></span>
                                        </div>
                                        <div class="grid-event-pro__title">
                                            <div class="grid-event__time">
                                                <span>{{ $game->bet_start_time }}</span>
                                            </div>
                                            @if ($game->isRunning)
                                                <div class="_title-icons__wrap">
                                                    <i class="iconFont iconFont-icon-match-tracker-pro"
                                                        style="color: red"></i>
                                                </div>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="grid-event__content">
                                        <a href="#" class="grid-event__competitors">
                                            <div class="grid-event__competitors-wrapper">
                                                <div class="grid-event__competitor">
                                                    <img src="{{ $game->teamOne->teamImage() }}" alt="@lang('image')"
                                                        width="30" height="30"
                                                        class="grid-event__competitor-logo lazyloaded">
                                                    <div class="grid-event__competitor-wrap">
                                                        <div class="grid-event__competitor-name">
                                                            <span>{{ __($game->teamOne->short_name) }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="grid-event__competitors-divider">VS</div>
                                                <div class="grid-event__competitor">
                                                    <img src="{{ $game->teamTwo->teamImage() }}" alt="@lang('image')"
                                                        width="30" height="30"
                                                        class="grid-event__competitor-logo lazyloaded">
                                                    <div class="grid-event__competitor-wrap">
                                                        <div class="grid-event__competitor-name">
                                                            <span>{{ __($game->teamTwo->short_name) }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>

                                        {{-- Display the markets and options for the game --}}
                                        @if ($game->questions->count())
                                            @php
                                                $firstMarket = $game->questions->first();
                                                $showCount = 3;
                                                $more = $game->questions->count() - $showCount;
                                                if ($more <= 0) {
                                                    $more = 'More..';
                                                }
                                                $i = 1;
                                            @endphp
                                            <div class="grid-markets">
                                                <div class="grid-market _multi option-odd-lists">
                                                    {{-- Loop through the options --}}
                                                    @foreach ($firstMarket->options as $option)
                                                        @if ($i == 4)
                                                            @continue
                                                        @endif
                                                        <div class="option-odd-list__item">
                                                            <button
                                                                class="outcome equal _101 oddBtn @if (in_array($option->id, $optionsId)) active @endif @if ($option->locked) locked @endif"
                                                                data-option_id="{{ $option->id }}"
                                                                @disabled($game->bet_start_time >= now())
                                                                style="order: 10{{ $i }};">
                                                                <span class="outcome__status">{{ $option->name }}</span>
                                                                <span
                                                                    class="outcome__number">{{ rateData($option->odds) }}</span>
                                                            </button>
                                                            @php
                                                                $i++;
                                                            @endphp
                                                        </div>
                                                    @endforeach
                                                </div>
                                                <a href="{{ route('game.markets', $game->slug) }}"
                                                    class="grid-event-pro__totals">{{ $more }}</a>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>

            </div>
            @if (blank($games))
                <div class="empty-message mt-3">
                    <!-- <img class="img-fluid" src="{{ asset($activeTemplateTrue . 'images/empty_message.png') }}"
                        alt="@lang('image')"> -->
                    <p>@lang('No game available in this category')</p>

                </div>
            @endif
        </div>
    </div>
@endsection

@push('script')
    <script>
        (function($) {
            "use strict";

            $(".banner-slider").stepCycle({
                autoAdvance: true,
                transitionTime: 1,
                displayTime: 5,
                transition: "zoomIn",
                easing: "linear",
                childSelector: false,
                ie8CheckSelector: ".ltie9",
                showNav: false,
                transitionBegin: function() {},
                transitionComplete: function() {},
            });

            function controlSliderHeight() {
                let width = $(".banner-slider")[0].clientWidth;
                let height = (width / 37) * 7;
                $(".banner-slider").css({
                    height: height,
                });

                $(".banner_image").css({
                    height: height,
                });
            }

            controlSliderHeight();


            $('.custom-dropdown-selected').click(function() {
                $(this).parents('.custom-dropdown').toggleClass('show');
            });

            $(window).scroll(function() {
                $('.custom-dropdown.show').toggleClass('show');
            });

            $('.custom-dropdown').mouseleave(function() {
                $(this).removeClass('show');
            });

            $('.custom-dropdown-list-item').on('click', function() {
                let parent = $(this).parents('.custom-dropdown');
                let selected = parent.find('.custom-dropdown-selected');
                parent.find('.custom-dropdown-list-item.disabled').removeClass('disabled');
                $(this).addClass('disabled');
                $(selected).text($(this).text());
                parent.removeClass('show');

                getOdds($(this).data('reference'), function(data) {
                    parent.siblings('.option-odd-lists').slick('unslick');
                    parent.siblings('.option-odd-lists').html(data);
                    initOddsSlider(parent.siblings('.option-odd-lists'));
                });

            });

            function getOdds(id, callback) {
                $.get(`{{ route('market.odds', '') }}/${id}`,
                    function(data) {
                        callback(data);
                    }
                );
            }

        })(jQuery);
    </script>
@endpush
