@extends( $layout === 'home' ? 'frontend.football-vn.layouts.master' : 'frontend.football-vn.layouts.master')
@section('title', str_replace(' ----- thscore', '', $metaTitle))
@section('description', $metaDesc)
@section('vite')
    @php
        $config = [
            'appName' => config('app.name'),
            'appUrl' => app_domain_url('NO_SLASH', 'live'),
            'locale' => 'vn',
            'locales' => ['en', 'vn', 'th'],
            'isPlugin' => config('app.is_plugin')
        ];
    
    @endphp

    
    <script>
        window.banner_enable = Boolean({{config('app.ads_on')}});
        window.rel_attr = Boolean({{config('app.no_follow')}}) ? 'nofollow' : 'follow';

        window.banner_data = JSON.parse('{!! $banners !!}');
        window.config = @json($config);
    </script>
    @vite(['resources/js/app.js'])
@stop
@php
    $dataTimestamp = now()->timestamp;
@endphp
@section('head')
    @vite(['public/assets/common/home.scss'])
    <script>
        window.DATA_TIMESTAMP = {{ $dataTimestamp }};
    </script>
    @switch($layout)
        @case('favorite')
        <link href="{{asset('assets/css/favorites.css?t=1&v=' . detect_environment())}}" rel="stylesheet">
        <link
            href="{{asset('assets/football-vn/css/pages/favorites/favorites-mobile.css?t=1&v=' . detect_environment())}}"
            rel="stylesheet">
        @break

        @case('fixture')
            <script>
                console.log('iam in fixture page');
            </script>
            <link href="{{ asset('assets/football-vn/css/pages/fixture/style.css?v=' . detect_environment()) }}" rel="stylesheet">
            <link href="{{ asset('assets/football-vn/css/component/date-picker.css?v=' . detect_environment()) }}" rel="stylesheet">
            <link href="{{ asset('assets/football-vn/css/responsive/schedule/schedule.responsive.css?v=' . detect_environment()) }}" rel="stylesheet">

            <link href="{{ asset('assets/football-vn/css/pages/fixture/update.css?v=' . detect_environment()) }}" rel="stylesheet">

            @break
        @case('gamerate')
            <link href="{{ asset('assets/football-vn/css/game-rate/vue-select.css?v=' . detect_environment()) }}" rel="stylesheet">
            <link href="{{ asset('assets/football-vn/css/game-rate/rate.css?v=' . detect_environment()) }}" rel="stylesheet">
            <link href="{{ asset('assets/football-vn/css/component/match-list/style.css?v=' . detect_environment()) }}" rel="stylesheet">
            <link href="{{ asset('assets/football-vn/css/responsive/game-rate/index.css?v=' . detect_environment()) }}" rel="stylesheet">
            <link href="{{ asset('assets/football-vn/css/responsive/game-rate/match-table.css?v=' . detect_environment()) }}" rel="stylesheet">
            @break
        @case('cupmatch')
            <link href="{{ asset('assets/css/less/main.css?v=' . detect_environment()) }}" rel="stylesheet">
            <link href="{{ asset('assets/css/less/diff.css?v=' . detect_environment()) }}" rel="stylesheet">
            <link href="{{asset('assets/football-vn/css/pages/data/responsive/child-page/child-page-responsive.css?v=' . detect_environment())}}" rel="stylesheet">
            <link href="{{ asset('assets/football-vn/css/pages/data/responsive/child-page/cupmatch-responsive.css?v=' . detect_environment())}}" rel="stylesheet">

            <script src="{{ asset('assets/js/scripts/views/sclassCom.js?v=' . detect_environment()) }}"></script>
            <script>
                var _config = {};
                Object.defineProperties(_config, {
                    defaultOddsFormat: {
                        value: parseInt('1')
                    },
                    defaultOddsType: {
                        value: 'O'
                    },
                    defaultCompanyID: {
                        value: parseInt('31')
                    },
                    defaultEuroCompanyID: {
                        value: parseInt('474')
                    }
                });
            </script>

            <script src="{{ asset('assets/js/leagueodds.js?v=' . detect_environment()) }}"></script>
            <script src="{{config('app.db_api')}}/jsdata/leagueseason/sea{{$id}}.js"></script>
            <script type="text/javascript">
                {!! $HeaderScript !!}
                {!! $HeaderScript2 !!}
                {!! $HeaderScript3 !!}
            </script>

            <script src="{{config('app.db_api')}}/jsdata/matchResult/{{$season}}/c{{$id}}_vn.js?v=20240328121308" type="text/javascript"></script>

            @break
        @case('league')
            <link href="{{ asset('assets/css/main_database.css?v=' . detect_environment()) }}" rel="stylesheet"/>
            <link href="{{ asset('assets/football-vn/css/pages/data/responsive/child-page/child-page-responsive.css?v=' . detect_environment()) }}" rel="stylesheet"/>
            <script>
                var _config = {};
                Object.defineProperties(_config, {
                    defaultOddsFormat: {
                        value: parseInt('1')
                    },
                    defaultOddsType: {
                        value: 'O'
                    },
                    defaultCompanyID: {
                        value: parseInt('31')
                    },
                    defaultEuroCompanyID: {
                        value: parseInt('474')
                    }
                });
                {!! $scriptInitPageContent ?? '' !!}
            </script>
            <script src="{{ asset('assets/js/leagueodds.js?v=' . detect_environment()) }}"></script>
            <script src="{{ config('app.db_api') }}/jsdata/leagueseason/sea{{ $SclassID }}.js?v={{ detect_environment() }}"></script>
            @isset($jsDataMatchResult)
                {!! $jsDataMatchResult !!}
            @endisset
        {{-- Default là homepage --}}
        @default
            {{-- Preload script cho data matchlist --}}
            <link rel="preload" href="{{config('app.url_s3')}}/gf/data/bf_vn1_nt.js?{{ $dataTimestamp }}" as="fetch" crossorigin="anonymous">
    @endswitch


@stop
@section('breadcrumbs')
    @if ($layout === 'home')
        <x-football.breadcrumbs title="{{$breadCrumbTitle}}" isHome="h1"/>
    @else
        <x-football.breadcrumbs title="{{$breadCrumbTitle}}" isHome="false"/>
    @endif
@stop
@section('content')
    @if ($layout === 'league')
        <div id="info" class="vue version-2 data-sync top-league league-container" data-home="true">
            <div id="main" class="main-home-page-mobile">
                <div id="left" class="home-page-left">
                    <div id="vue-left-sidebar"></div>
                    <div class="home-page-right-mobile">
                        <x-football.right-sidebar/>
                    </div>
                    <x-football.ranking-table />
                </div>

                <div id="appHome" class="w-100 mx-auto" style="position: relative" >
                    @if (isset($heading) && trim($heading) != '') <h1 class="seo-text-h1">{{$heading}}</h1> @endif
                    @include('frontend.football-vn.partial.vue_loader')
                    <router-view data-loader="loadVue"
                        data='@json($leagueData ?? [])'>
                    </router-view>
                    @include('frontend.football-vn.partial.content_seo')
                </div>
            </div>
        </div>

    @elseif($layout === 'cupmatch')
        <style>
            @media only screen and (max-width: 1240px) {
                .version-2 #i_main{
                    width: 100% !important;
                }
            }
        </style>

        <div id="info" class="vue version-2 data-sync top-league league-container" data-home="true">
            <div id="main" class="main-home-page-mobile">
                <div id="left" class="home-page-left">
                    <div id="vue-left-sidebar"></div>
                    <div class="home-page-right-mobile">
                        <x-football.right-sidebar/>
                    </div>
                    <x-football.ranking-table />
                </div>
                <div id="appHome" class="w-100 mx-auto" style="position: relative" >

                    @if (isset($heading) && trim($heading) != '')
                        <h1 class="seo-text-h1">{{$heading}}</h1>
                    @endif

                    @include('frontend.football-vn.partial.vue_loader')
                    <router-view data-loader="loadVue"
                        data='@json($cupMatchData ?? [])'>
                    </router-view>
                    @include('frontend.football-vn.partial.content_seo')
                </div>
            </div>
        </div>
    @else

        <div id="homepage" class="mcontent index appHome-default-mt"
            data-home="true">

            <div id="main" class="main-home-page-mobile">
                <div id="left" class="home-page-left">
                    <x-football.left-sidebar/>
                    {{-- <div class="home-page-right-mobile">
                        <x-football.right-sidebar/>
                    </div> --}}
                    <x-football.ranking-table />
                </div>
                <div id="appHome" class="w-100 mx-auto" style="position: relative" >
                    @if (isset($heading) && trim($heading) != '') <h1 class="seo-text-h1">{{$heading}}</h1> @endif
                    @include('frontend.football-vn.partial.vue_loader')
                    <router-view data-loader="loadVue" data='@json($leagueData ?? [])'>
                    </router-view>
                    @include('frontend.football-vn.partial.content_seo')
                </div>
                <div id="right" class="home-page-right home-page-right-desktop">
                    <x-football.right-sidebar/>
                    <div id="right-hotnew-ad"></div>
                </div>
            </div>
        </div>
    @endif
@endsection
@section('scripts')
    <script src="{{asset('assets/js/vn/helper.js?v=' . detect_environment())}}"></script>

    @if($layout === 'fixture')
        <script language="javascript" type="text/javascript">
            const oddShowType = {
                asia: 9,
                euro: 2
            };

            var isFinished = true;
            var _dynamicData = false;
            var hidden_LeagueId = "_";
            var hiddenID = "_";
            var myLeagueID = "_";
            var orderby = GetOrderbyOption();
            var FilterBy = 0;
            var hidden_Country = getCookie("Hidden_Country");
            var _oddsShow = parseInt(getCookie("OddsShowType") ?? oddShowType.asia); // default odd show type is asia
            var FilterOptionType = GetFilterOption();
            var _leaSortting = false;
            var FilterType = 0;
            var storedFilterType = getCookie("Filter_Type");
            var myGamesID = "_";
            var timeZone = new Date().getTimezoneOffset() / -60;
            if (storedFilterType != null && storedFilterType != "") FilterType = storedFilterType;
            if (hidden_Country == null || hidden_Country == "") hidden_Country = "_";
            var Bf_simply_disp = false;
            var isSchedule = true;
            var FilterCacheKey = "FilterOptionFix";
            var FilterCountryKey = "FilterCountryFix";
            var SelMenuCacheKey = "SelectMenuFix";
            var selectMenu = sessionStorage.getItem(SelMenuCacheKey);
            Bf_simply_disp = false;
            var requestF = "{{ $_GET['f'] ?? '' }}";
            var _channelType = 3;
            var _isFt = false;
            if (requestF != null && requestF != "" && requestF.indexOf("ft") != -1) {
                _isFt = true;
            }
            var cnzzModel = {
                cnz: parseInt(""),
                module: _appModule,
                cz: parseInt("")
            };

            function updateStyleGoalShowMode () {
                const euroBtn = document.querySelector('.switch-view-btn .euro');
                const asianBtn = document.querySelector('.switch-view-btn .asian');
                if (_oddsShow === oddShowType.asia) {
                    asianBtn.classList.add('on');
                    euroBtn.classList.remove('on');
                } else {
                    asianBtn.classList.remove('on');
                    euroBtn.classList.add('on');
                }
            };
            updateStyleGoalShowMode()

            function setGoalShowMode(mode) {
                const euroBtn = document.querySelector('.switch-view-btn .euro');
                const asianBtn = document.querySelector('.switch-view-btn .asian');
                if (mode === 'asia') {
                    isFinished = false;
                    euroBtn.classList.remove('on');
                    asianBtn.classList.add('on');

                    if (_oddsShow !== oddShowType.asia) {
                        _oddsShow = oddShowType.asia;
                        writeCookie("OddsShowType", _oddsShow);
                    }

                } else {
                    isFinished = true;
                    asianBtn.classList.remove('on');
                    euroBtn.classList.add('on');

                    if (_oddsShow !== oddShowType.euro) {
                        _oddsShow = oddShowType.euro;
                        writeCookie("OddsShowType", _oddsShow);
                    }
                }

                ShowBf();
            }

            window.addEventListener('load resize', handleWindowSize);

            function handleWindowSize() {
                const width = window.innerWidth;
                if (width <= 768) {
                    $('.timeBox-mobile').owlCarousel({
                        center: false,
                        autoplay: false,
                        loop: false,
                        dots: false,
                        nav: false,
                        margin: 5,
                        center: false,
                        responsive: {
                            0: {
                                items: 6
                            },
                            600: {
                                items: 6
                            },
                            1000: {
                                items: 6
                            }
                        }
                    });
                }
            }

            handleWindowSize();
        </script>
        {{-- <script src="{{ asset('assets/football-vn/js/pages/fixture/script.js?v=' . detect_environment()) }}"></script> --}}
        <script src="{{ asset('assets/js/jsdate.js?v=' . detect_environment()) }}"></script>
    @endif
@endsection
