@php
$detect = new \Detection\MobileDetect();
$isMobile = $detect->isMobile();
$isTablet = $detect->isTablet();
@endphp

<div class="sports-aside-left">
    <div class="sports-bets-navigation sports-panel">
        <div class="bets-navigation__buttons no-search">
            <div class="bets-navigation__button bordered df-aic" onclick='initSearch(true)'>
                <svg style="font-size: 14px" data-v-b37f2124="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-hidden="true" role="img" class="search-icon icon icon-search-bold sm inline" icon="search-bold" inline="">
                    <path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
                </svg>
                <span>Search</span>
            </div>
            @if( Auth::check() )
            <div class="sport-content list-item-content">
                <a href="#" class="sport-title">
                    <svg style="font-size: 14px" data-v-17d8bc16="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 14" aria-hidden="true" role="img" class="breadcrumb-icon star-icon icon icon-star sm inline" icon="star" color="#ffcf47" inline="">
                        <path d="M7.5 11.25l-3.512 1.846a.5.5 0 01-.725-.527l.67-3.91-2.84-2.77a.5.5 0 01.277-.852l3.926-.57L7.052.908a.5.5 0 01.896 0l1.756 3.558 3.926.57a.5.5 0 01.277.854l-2.84 2.769.67 3.91a.5.5 0 01-.725.527L7.5 11.25z"></path>
                    </svg>
                    <div class="expanded">Favourite</div>
                    <div class="match-count">0</div>
                </a>
            </div>
            @endif
        </div>
        <div class="sport-list panel-body no-search">
            <div class="list-item">
                <div class="sport-content list-item-content">
                    <a href="#" class="sport-title">
                        <i class="sports-icon icon-soccer"></i>
                        <div class="expanded">Soccer</div>
                        <div class="match-count">1460</div>
                    </a>
                </div>
            </div>
            <div class="list-item">
                <div class="sport-content list-item-content">
                    <a href="#" class="sport-title">
                        <i class="sports-icon icon-basketball"></i>
                        <div class="expanded">BasketBall</div>
                        <div class="match-count">14</div>
                    </a>
                </div>
                <div class="section-list">
                    <div class="section-header">
                        <span class="top">TOP</span>
                        <span>Tournament</span>
                    </div>
                    <div class="list-item">
                        <div class="tournament-content list-item-content">
                            <a href="#" class="tournament-title">
                                <i class="sports-icon icon-basketball"></i>
                                <div class="expanded">
                                    England. Premier League
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="section-header">
                        <span>Country</span>
                    </div>
                    <div class="list-item">
                        <div class="category-content list-item-content">
                            <a href="#" class="tournament-title">
                                <svg data-v-a197109a="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="flag-icon CategoryIcon category-icon rounded">
                                    <path fill="#f0f0f0" d="M0 0h512v512H0z"></path>
                                    <path fill="#d80027" d="M0 304h208v208h96V304h208v-96H304V0h-96v208H0z"></path>
                                    <path d="M406.92 333.913L512 438.993v-105.08zm-73.007 0L512 512v-50.36L384.273 333.913zM464.564 512L333.913 381.336V512z" fill="#0052b4"></path>
                                    <path fill="#f0f0f0" d="M333.913 333.913L512 512v-50.36L384.273 333.913z"></path>
                                    <path fill="#d80027" d="M333.913 333.913L512 512v-50.36L384.273 333.913z"></path>
                                    <path d="M80.302 333.913L0 414.215v-80.302zm97.782 22.646v155.438H22.658z" fill="#0052b4"></path>
                                    <path fill="#d80027" d="M127.724 333.916L0 461.641V512l178.084-178.084z"></path>
                                    <path d="M105.08 178.087L0 73.007v105.08zm73.007 0L0 0v50.36l127.727 127.727zM47.436 0l130.651 130.663V0z" fill="#0052b4"></path>
                                    <path fill="#f0f0f0" d="M178.087 178.087L0 0v50.36l127.727 127.727z"></path>
                                    <path fill="#d80027" d="M178.087 178.087L0 0v50.36l127.727 127.727z"></path>
                                    <path d="M431.698 178.087L512 97.785v80.302zm-97.782-22.646V.003h155.426z" fill="#0052b4"></path>
                                    <path fill="#d80027" d="M384.276 178.084L512 50.359V0L333.916 178.084z"></path>
                                </svg>
                                <div class="expanded">
                                    England
                                </div>
                            </a>
                        </div>
                        <div class="section-list">
                            <div class="section-header">
                                Tournament
                            </div>
                            <div class="list-item">
                                <div class="tournament-content list-item-content">
                                    <a href="#" class="tournament-title" data-nsfw-filter-status="swf">
                                        <div class="expanded"> Premier League</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="search-panel" style="display: none;">
            <div class="bets-navigation__buttons">
                <div class="bets-navigation__button bordered df-aic" onclick='initSearch(false)'>
                    <svg data-v-17d8bc16="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512" aria-hidden="true" role="img" class="breadcrumb-icon icon icon-angle-left sm" icon="angle-left">
                        <path d="M4.2 247.5L151 99.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17L69.3 256l118.5 119.7c4.7 4.7 4.7 12.3 0 17L168 412.5c-4.7 4.7-12.3 4.7-17 0L4.2 264.5c-4.7-4.7-4.7-12.3 0-17z"></path>
                    </svg>
                    <svg style="font-size: 14px" data-v-b37f2124="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-hidden="true" role="img" class="search-icon icon icon-search-bold sm inline" icon="search-bold" inline="">
                        <path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
                    </svg>
                    <span>Search</span>
                </div>
            </div>
            <div style="padding:  0 1rem">
                <div class="search-input-wrap">
                    <input placeholder="team name" type="text" class="search-input" onchange="search(this.value)" />
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-hidden="true" role="img" class="search__icon icon icon-search-bold sm" icon="search-bold">
                        <path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
                    </svg>
                </div>
            </div>
            <div class="searched_box">
                <!-- <div class="search-match-group">
                    <div class="searched-tournament">
                        <i class="sports-icon icon-basketball"></i>
                        <span class="searched-league te">USA Major League Soccer</span>
                    </div>
                    <a class="searched-match">
                        <div class="searched-match-info">
                            <div class="searched-match-top-line">
                                <span class="searched-match-time">10:20</span>
                                <span class="searched-match-date">
                                    11 setptember, Sn
                                </span>
                            </div>
                            <div class="searched-match-middle-line">
                                <div class="match-separator"></div>
                                <div class="searched-match-teams">
                                    <div class="match-team">Real</div>
                                    <div class="match-team">Real</div>
                                </div>
                            </div>
                            <div class="match-bottom-line">
                                <i class="sports-icon icon-basketball"></i>
                                <div class="match-tournament-info">
                                    USA Major League Soccer
                                </div>
                            </div>
                        </div>
                    </a>
                </div> -->
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    let olddata = {},
        newdata = {},
        betSlip = {},
        cEvent = {
            sportId: 0,
            eventId: ''
        },
        multiSip = {
            odd: 1,
            stake: 0,
            profit: 0
        },
        tournament = {},
        isLive = false,
        allowOddChange = true,
        slipType = 'single',
        page = 'league',
        currentSportId = "",
        currentCountryId = "",
        currentLeagueId = "",
        isMobile = "{{$isMobile}}",
        isTablet = "{{$isTablet}}";

    function groupBy(array, key) {
        return array.reduce((result, currentValue) => {
            (result[currentValue[key]] = result[currentValue[key]] || []).push(
                currentValue
            );
            return result;
        }, {});
    };

    function groupById(array, key) {
        return array.reduce((result, currentValue) => {
            (result[currentValue[key]] = result[currentValue[key]] || {})[currentValue.id] = {
                ...currentValue,
                home: JSON.parse(currentValue.home),
                away: JSON.parse(currentValue.away),
                league: JSON.parse(currentValue.league),
                odds: JSON.parse(currentValue.odds),
            };
            return result;
        }, {});
    };

    function getDate(d) {
        let dt = new Date(Number(d) * 1000).toDateString().split(' ');
        let date = `${dt[2]} ${dt[1]}`;
        let h = new Date(Number(d) * 1000).getHours();
        let m = new Date(Number(d) * 1000).getMinutes();
        h = String(h).length == 1 ? `0${h}` : h;
        m = String(m).length == 1 ? `0${m}` : m;
        let time = `${h}:${m}`;
        return {
            date,
            time,
            week: dt[0]
        }
    }

    function getMarketName(_id, marketId) {
        let market = marketId.slice(-1),
            name = '',
            oddName = [],
            id = Number(_id);
        if (id == 1) {
            switch (market) {
                case '1':
                    name = '1X2';
                    oddName = ['W1', 'X', 'W2'];
                    break;
                case '2':
                    name = 'Asian Handicap';
                    oddName = ['H1', 'H2'];
                    break;
                case '3':
                    name = 'Over/Under';
                    oddName = ['Over', 'Under'];
                    break;
                case '4':
                    name = 'Asian Corners';
                    oddName = ['Over', 'Under'];
                    break;
                case '5':
                    name = '1st Half Asian Handicap';
                    oddName = ['H1', 'H2'];
                    break;
                case '6':
                    name = '1st Half Goal Line';
                    oddName = ['Over', 'Under'];
                    break;
                case '7':
                    name = '1st Half Asian Corners';
                    oddName = ['Over', 'Under'];
                    break;
                case '8':
                    name = 'Half Time Result';
                    oddName = ['W1', 'X', 'W2'];
                    break;
            }
        } else if (id == 18) {
            switch (market) {
                case '1':
                    name = 'Money Line';
                    break;
                case '2':
                    name = 'Spread';
                    break;
                case '3':
                    name = 'Total Points';
                    break;
                case '4':
                    name = 'Money Line (Half)';
                    break;
                case '5':
                    name = 'Spread (Half)';
                    break;
                case '6':
                    name = 'Total Points (Half)';
                    break;
                case '7':
                    name = 'Quarter - Winner (2-Way)';
                    break;
                case '8':
                    name = 'Quarter - Handicap';
                    break;
                case '9':
                    name = 'Quarter - Total (2-Way)';
                    break;
            }
        } else {
            switch (market) {
                case '1':
                    name = 'Match Winner 2-Way';
                    break;
                case '2':
                    name = 'Asian Handicap';
                    break;
                case '3':
                    name = 'Over/Under';
                    break;
            }
        }
        if (marketId == '3_4') {
            name = 'Draw No Bet';
        }
        return name;
    }

    function getOddNames(_id, marketId) {
        let market = marketId.slice(-1),
            name = '',
            oddName = [],
            id = Number(_id);
        if (id == 1) {
            switch (market) {
                case '1':
                    oddName = ['W1', 'X', 'W2'];
                    break;
                case '2':
                    oddName = ['H1', 'H2'];
                    break;
                case '3':
                    oddName = ['Over', 'Under'];
                    break;
                case '4':
                    oddName = ['Over', 'Under'];
                    break;
                case '5':
                    oddName = ['H1', 'H2'];
                    break;
                case '6':
                    oddName = ['Over', 'Under'];
                    break;
                case '7':
                    oddName = ['Over', 'Under'];
                    break;
                case '8':
                    oddName = ['W1', 'X', 'W2'];
                    break;
            }
        } else if (id == 18) {
            switch (market) {
                case '1':
                    name = 'Money Line';
                    break;
                case '2':
                    name = 'Spread';
                    break;
                case '3':
                    name = 'Total Points';
                    break;
                case '4':
                    name = 'Money Line (Half)';
                    break;
                case '5':
                    name = 'Spread (Half)';
                    break;
                case '6':
                    name = 'Total Points (Half)';
                    break;
                case '7':
                    name = 'Quarter - Winner (2-Way)';
                    break;
                case '8':
                    name = 'Quarter - Handicap';
                    break;
                case '9':
                    name = 'Quarter - Total (2-Way)';
                    break;
            }
        } else {
            switch (market) {
                case '1':
                    name = 'Match Winner 2-Way';
                    break;
                case '2':
                    name = 'Asian Handicap';
                    break;
                case '3':
                    name = 'Over/Under';
                    break;
            }
        }
        if (marketId == '3_4') {
            name = 'Draw No Bet';
            oddName = ['W1', 'W2'];
        }
        return oddName;
    }

    function lockSVG() {
        return `
        <svg data-v-1a57c218="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35" aria-hidden="true" role="img" class="odd-lock icon icon-lock md" icon="lock" style="margin:auto; ${page == 'league' ? 'color: #fff !important;' : ''}">
            <path d="M26.76 16.08H9.62a1.86 1.86 0 00-1.85 1.85v7.37a6.43 6.43 0 006.41 6.42H22a6.3 6.3 0 006.28-6.28v-7.86a1.5 1.5 0 00-1.52-1.5zm-8.45 8.78v1.74a.57.57 0 01-.57.54.58.58 0 01-.58-.54v-1.75a2.42 2.42 0 01-1.87-2.39 2.46 2.46 0 114.92 0 2.42 2.42 0 01-1.9 2.39zM18.06 4.23h-.12A6.75 6.75 0 0011.22 11v4h1.13v-4.12A5.46 5.46 0 0114 7a5.56 5.56 0 013.93-1.61H18A5.62 5.62 0 0123.52 11v3.89h1.13v-4a6.72 6.72 0 00-6.59-6.66z"></path>
        </svg>
        `;
    }

    function reLoad() {
        if (isLive) {
            getInitLive();
        } else {
            getInitLeague();
        }
    }

    // menu list
    function setTournament(me) {
        let id = me.data('id');
        currentLeagueId = id;

        reLoad();

        $('.tournament-id').removeClass('active');
        me.addClass('active');
    }

    function showTournament(me) {
        if (me.hasClass('active')) {
            $('.tournament-title').removeClass('active');
        } else {
            $('.tournament-title').removeClass('active');
            me.addClass('active');
        }

        if (!me.closest('.list-item').find('.section-list').length) {
            $('.tournament-title').closest('.list-item').find('.section-list').hide();
            me.closest('.list-item').append(`
                <div class="section-list">
                    <div class="section-header">
                        Tournament
                    </div>
                </div>`);
            let id = me.data('id');
            let c = me.data('c');
            currentCountryId = c;

            reLoad();

            for (let item of tournament[id][c]) {
                let html = `
                <div class="list-item">
                    <div class="tournament-content list-item-content">
                        <a ${location.pathname.split('/')[2] == 'event' ? 'href="/sports/live"' : ''} class="tournament-id" data-id="${item.id}" data-nsfw-filter-status="swf">
                            <div style="margin-right: 0.5em">
                                <svg click="console.log(${item.id})" style='font-size:14px' data-v-0959a1f9="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 14" aria-hidden="true" role="img" class="icon-star icon icon-star md" icon="star" size="md" data-v-d89e8830=""><path d="M7.5 11.25l-3.512 1.846a.5.5 0 01-.725-.527l.67-3.91-2.84-2.77a.5.5 0 01.277-.852l3.926-.57L7.052.908a.5.5 0 01.896 0l1.756 3.558 3.926.57a.5.5 0 01.277.854l-2.84 2.769.67 3.91a.5.5 0 01-.725.527L7.5 11.25z"></path></svg>
                            </div>    
                            <div class="expanded">${item.name}</div>
                        </a>
                    </div>
                </div>`;
                me.closest('.list-item').find('.section-list').append(html);
            }
            $('.tournament-id').click(function() {
                setTournament($(this));
                toLeague();
            })
        } else {
            if (me.hasClass('active')) {
                $('.tournament-title').closest('.list-item').find('.section-list').hide();
                me.closest('.list-item').find('.section-list').show();
            } else {
                me.closest('.list-item').find('.section-list').hide();
            }
        }
    }

    function showCountry(me) {
        let id = me.data('id');

        $('.tournament-title').closest('.list-item').find('.section-list').hide();
        $('.tournament-title').removeClass('active');
        if (me.hasClass('active')) {
            $('.sport-title').removeClass('active');
            currentSportId = "";
            currentCountryId = "";
            currentLeagueId = "";
        } else {
            $('.sport-title').removeClass('active');
            me.addClass('active');
            currentSportId = id;
            currentCountryId = "";
            currentLeagueId = "";
        }

        reLoad();

        if (!me.closest('.list-item').find('.section-list').length) {
            $('.sport-list').find('.list-item').find('.section-list').hide();

            me.closest('.list-item').append(`<div class="section-list df country-list" style='align-items: center; justify-content: center;'>
                <svg data-v-3e7104f2="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-hidden="true" role="img" class="spinner icon icon-spinner sm" icon="spinner" style="font-size: 1em; color: rgb(255, 255, 255);"><path d="M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"></path></svg>
            </div>`);

            $.ajax({
                url: "