@extends('frontend.layouts.master')
@section('title') Home @endsection
@section('content')
@php
    $banner_bg = "";
    if($banner != null){
        $banner_bg = 'style="background-image:url('.asset($banner->value).')"';
    }
@endphp

<section class="banner" {!!$banner_bg !!} id="particles-js">

    @include('frontend.partials.navbar')
    <div class="banner-content text-center">
        @if (
            !empty(get_page_settings_images('banner_people', \App\Models\PageSettings::HOME)) ||
            get_page_settings_images('banner_people', \App\Models\PageSettings::HOME) != null)
            <div class="images">
                <div class="d-flex align-items-center">
                    <div class="image"> <img src="{{ asset('') . get_page_settings_images('banner_people', \App\Models\PageSettings::HOME)[0]->value }}"
                        alt="People" class="img-fluid"></div>
                    <div class="image"><img src="{{ asset('') . get_page_settings_images('banner_people', \App\Models\PageSettings::HOME)[1]->value }}"
                        alt="People" class="img-fluid"></div>
                    <div class="image"><img src="{{ asset('') . get_page_settings_images('banner_people', \App\Models\PageSettings::HOME)[2]->value }}"
                        alt="People" class="img-fluid"></div>
                    <div class="image"><img src="{{ asset('') . get_page_settings_images('banner_people', \App\Models\PageSettings::HOME)[3]->value }}"
                        alt="People" class="img-fluid"></div>
                    <div class="image"><img src="{{ asset('') . get_page_settings_images('banner_people', \App\Models\PageSettings::HOME)[4]->value }}"
                        alt="People" class="img-fluid"></div>
                    <div class="image">
                        <div class="circle">+{{ get_page_settings('banner_people_count', \App\Models\PageSettings::HOME) ?? '18' }}</div>
                    </div>
                </div>
            </div>
            @else
            <div class="images">
                <div class="d-flex align-items-center">
                    <div class="image"> <img src="{{ asset('frontend/media/people/1.jpg')}}"
                        alt="People" class="img-fluid"></div>
                    <div class="image"><img src="{{ asset('frontend/media/people/2.jpg')}}"
                        alt="People" class="img-fluid"></div>
                    <div class="image"><img src="{{ asset('frontend/media/people/3.jpg')}}"
                        alt="People" class="img-fluid"></div>
                    <div class="image"><img src="{{ asset('frontend/media/people/4.jpg')}}"
                        alt="People" class="img-fluid"></div>
                    <div class="image"><img src="{{ asset('frontend/media/people/5.jpg')}}" alt="People" class="img-fluid"></div>
                    <div class="image">
                        <div class="circle">+{{ get_page_settings('banner_people_count', \App\Models\PageSettings::HOME) ?? '18' }}</div>
                    </div>
                </div>
            </div>
        @endif

        <h1 id="banner-heading"></h1>
    </div>
</section>

<section class="sweepstakes container-fluid">
    <div class="row align-items-center">
        <div class="col-lg-4">
            <h2>{{ get_page_settings('sweep_heading', \App\Models\PageSettings::HOME) ?? 'Enter Our Sweepstakes!' }}</h2>
        </div>
        <div class="col-lg-5">
            <p>
                {{ get_page_settings('sweep_description', \App\Models\PageSettings::HOME) }}
            </p>
        </div>
        <div class="col-lg-3">
            <div class="btns d-flex align-items-center justify-content-end flex-wrap">
                <a href="{{route('login')}}" class="btn btn-white">Enter Now</a>
                <button type="button" class="btn btn-white-outline" data-toggle="modal"
                    data-target="#modelRules">View
                    Rules</button>


                <!--Rules Modal -->
                <div class="modal fade" id="modelRules" tabindex="-1" role="dialog" aria-labelledby="modelRulesId"
                    aria-hidden="true">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Rules</h5>
                                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                                    <i class="fa fa-window-close" aria-hidden="true"></i>
                                </button>
                            </div>
                            <div class="modal-body text-dark">
                                {!! get_page_settings('sweep_rules', \App\Models\PageSettings::HOME) ?? 'Enter Our Sweepstakes' !!}
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="services container-fluid">
    <h2 data-aos="fade-right">Our Services</h2>
    <div class="row">
        <div class="col-md-4">
            <div class="service-card" data-aos="fade-up">
                GC7 Games
            </div>
        </div>
        <div class="col-md-4">
            <div class="service-card" data-aos="fade-up" data-aos-delay="300">
                Tournament Games
            </div>
        </div>
        <div class="col-md-4">
            <div class="service-card" data-aos="fade-up" data-aos-delay="500">
                FREE GAMES & LUCKY WHEEL
            </div>
        </div>
    </div>
    @if(get_page_settings_images('service_background', \App\Models\PageSettings::HOME) != null)
    <div class="bg-img" data-aos="fade-left" data-aos-delay="800">
        <img src="{{ asset('') . get_page_settings_images('service_background', \App\Models\PageSettings::HOME)[0]->value }}" alt="" class="img-fluid">
    </div>
    @endif
</section>
@canany(['View GameLinks', 'View GC7 Games', 'View Tournament Games', 'View Free Games', 'View Ruby Tournament Games','View Wheel', 'View Bingo Balls'])
@if($gameCategories != null)
<section class="games" id="games">
    <h2 data-aos="fade-up">Games</h2>
    <div class="categories d-flex align-items-center justify-content-center flex-wrap">
        @php
            $delay = 0;
            $permissions = [
                'View GameLinks' => \App\Models\Game::GAME_TYPE_EXTERNAL,
                'View GC7 Games' => \App\Models\Game::GAME_TYPE_DEFAULT,
                'View Tournament Games' => \App\Models\Game::GAME_TYPE_TOURNAMENT,
                'View Ruby Tournament Games' => \App\Models\Game::GAME_TYPE_RUBY_TOURNAMENT,
                'View Free Games' => \App\Models\Game::GAME_TYPE_FREE,
                'View Wheel' => \App\Models\Game::GAME_TYPE_LUCKYWHEELS,
                'View Bingo Balls' => \App\Models\Game::GAME_TYPE_BINGOBALLS
            ];
            $firstAccessibleGame = null;
        @endphp
        @foreach($gameCategories as $key => $game)
            @php
                // Get the permission name based on the category
                $permission = array_search($key, $permissions);
            @endphp
            @can($permission)
                @if (!$firstAccessibleGame)
                    @php
                        $firstAccessibleGame = true;
                        $activeClass = 'active';
                    @endphp
                @else
                    @php
                        $activeClass = '';
                    @endphp
                @endif
                <div class="game-badge {{$activeClass}}" data-type="{{$key}}" data-aos="fade-up" data-aos-delay="{{$delay}}">
                    <h4>{{$game}}</h4>
                </div>
            @endcan
            @php
                $delay += 200;
            @endphp
        @endforeach

    </div>

    <div class="slider">
        <div class="loader d-none">
            <svg version="1.1" id="L1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
                <circle fill="none" stroke="#fff" stroke-width="6" stroke-miterlimit="15" stroke-dasharray="14.2472,14.2472" cx="50" cy="50" r="47" >
                  <animateTransform
                     attributeName="transform"
                     attributeType="XML"
                     type="rotate"
                     dur="5s"
                     from="0 50 50"
                     to="360 50 50"
                     repeatCount="indefinite" />
              </circle>
              <circle fill="none" stroke="#fff" stroke-width="1" stroke-miterlimit="10" stroke-dasharray="10,10" cx="50" cy="50" r="39">
                  <animateTransform
                     attributeName="transform"
                     attributeType="XML"
                     type="rotate"
                     dur="5s"
                     from="0 50 50"
                     to="-360 50 50"
                     repeatCount="indefinite" />
              </circle>
              <g fill="#fff">
              <rect x="30" y="35" width="5" height="30">
                <animateTransform
                   attributeName="transform"
                   dur="1s"
                   type="translate"
                   values="0 5 ; 0 -5; 0 5"
                   repeatCount="indefinite"
                   begin="0.1"/>
              </rect>
              <rect x="40" y="35" width="5" height="30" >
                <animateTransform
                   attributeName="transform"
                   dur="1s"
                   type="translate"
                   values="0 5 ; 0 -5; 0 5"
                   repeatCount="indefinite"
                   begin="0.2"/>
              </rect>
              <rect x="50" y="35" width="5" height="30" >
                <animateTransform
                   attributeName="transform"
                   dur="1s"
                   type="translate"
                   values="0 5 ; 0 -5; 0 5"
                   repeatCount="indefinite"
                   begin="0.3"/>
              </rect>
              <rect x="60" y="35" width="5" height="30" >
                <animateTransform
                   attributeName="transform"
                   dur="1s"
                   type="translate"
                   values="0 5 ; 0 -5; 0 5"
                   repeatCount="indefinite"
                   begin="0.4"/>
              </rect>
              <rect x="70" y="35" width="5" height="30" >
                <animateTransform
                   attributeName="transform"
                   dur="1s"
                   type="translate"
                   values="0 5 ; 0 -5; 0 5"
                   repeatCount="indefinite"
                   begin="0.5"/>
              </rect>
              </g>
            </svg>
        </div>
        {{-- @if($defaultGames != null && $defaultGames->count() > 0) --}}
            <div class="game-slider">
                    {{-- @php
                        $loopIteration = 0;
                    @endphp
                    @foreach($defaultGames as $game)
                    @php
                        $flip = 'flip-up';
                        $delay = 400;
                        if($loopIteration == 0){
                            $flip = 'flip-right';
                            $delay = 200;
                        }
                        $link = $game->game_url;
                        if(!auth()->check()){
                            $link = route('login');
                        }
                    @endphp
                        <div class="game-slide" data-aos="{{$flip}}" data-aos-delay="{{$delay}}">
                            <div class="image-holder">
                                <img src="{{asset('frontend/media/frame.png')}}" alt="frame" class="frame-img">
                                <img src="{{ asset($game->thumbnail_image) }}" alt="" class="game-img">
                            </div>
                            <a target="_blank" href="{{$link}}" data-id={{$game->id}} class="btn btn-white play-game">Play Now</a>
                            <div class="description">
                                <p>{{$game->digitalAsset->name}}</p>
                                <h4>{{ $game->title }}</h4>
                            </div>
                        </div>
                        @php
                            $loopIteration++;
                        @endphp
                    @endforeach --}}
            </div>
            <div class="game-slider-navigation d-flex align-items-center justify-content-between">
                <div class="prev"><i class="fa-solid fa-chevron-left"></i></div>
                <div class="next"><i class="fa-solid fa-chevron-right"></i></div>
            </div>
        {{-- @else
            <h4 class="text-center">No Games Found!</h4>
        @endif --}}
    </div>
    <div class="btns d-flex align-items-center justify-content-center flex-wrap">
        <a href="{{route('viewGames', ['type'=>\App\Models\Game::GAME_TYPE_DEFAULT])}}" class="btn btn-white all-games" data-aos="fade-right" data-aos-delay="200">View All Games</a>
        <a href="{{route('innerPage', [\App\Models\PageSettings::ABOUT])}}" class="btn btn-white-outline" data-aos="fade-left" data-aos-delay="200">Read About Us</a>
    </div>
</section>
<div class="divider"></div>
@endif
@endcanany

@if(!auth()->check())
    @if($gameCategories != null)
        <section class="games" id="games">
            <h2 data-aos="fade-up">Games</h2>

            <div class="categories d-flex align-items-center justify-content-center flex-wrap">
                @php
                    $delay = 0;
                @endphp
                @foreach($gameCategories as $key => $game)
                        <div class="game-badge {{strtolower($key)=== \App\Models\Game::GAME_TYPE_EXTERNAL ? 'active' : '' }}" data-type="{{$key}}" data-aos="fade-up" data-aos-delay="{{$delay}}">
                            <h4>{{$game}}</h4>
                        </div>
                    @php
                        $delay += 200;
                    @endphp
                @endforeach
            </div>
            <div class="slider">
                <div class="loader d-none">
                    <svg version="1.1" id="L1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
                        <circle fill="none" stroke="#fff" stroke-width="6" stroke-miterlimit="15" stroke-dasharray="14.2472,14.2472" cx="50" cy="50" r="47" >
                        <animateTransform
                            attributeName="transform"
                            attributeType="XML"
                            type="rotate"
                            dur="5s"
                            from="0 50 50"
                            to="360 50 50"
                            repeatCount="indefinite" />
                    </circle>
                    <circle fill="none" stroke="#fff" stroke-width="1" stroke-miterlimit="10" stroke-dasharray="10,10" cx="50" cy="50" r="39">
                        <animateTransform
                            attributeName="transform"
                            attributeType="XML"
                            type="rotate"
                            dur="5s"
                            from="0 50 50"
                            to="-360 50 50"
                            repeatCount="indefinite" />
                    </circle>
                    <g fill="#fff">
                    <rect x="30" y="35" width="5" height="30">
                        <animateTransform
                        attributeName="transform"
                        dur="1s"
                        type="translate"
                        values="0 5 ; 0 -5; 0 5"
                        repeatCount="indefinite"
                        begin="0.1"/>
                    </rect>
                    <rect x="40" y="35" width="5" height="30" >
                        <animateTransform
                        attributeName="transform"
                        dur="1s"
                        type="translate"
                        values="0 5 ; 0 -5; 0 5"
                        repeatCount="indefinite"
                        begin="0.2"/>
                    </rect>
                    <rect x="50" y="35" width="5" height="30" >
                        <animateTransform
                        attributeName="transform"
                        dur="1s"
                        type="translate"
                        values="0 5 ; 0 -5; 0 5"
                        repeatCount="indefinite"
                        begin="0.3"/>
                    </rect>
                    <rect x="60" y="35" width="5" height="30" >
                        <animateTransform
                        attributeName="transform"
                        dur="1s"
                        type="translate"
                        values="0 5 ; 0 -5; 0 5"
                        repeatCount="indefinite"
                        begin="0.4"/>
                    </rect>
                    <rect x="70" y="35" width="5" height="30" >
                        <animateTransform
                        attributeName="transform"
                        dur="1s"
                        type="translate"
                        values="0 5 ; 0 -5; 0 5"
                        repeatCount="indefinite"
                        begin="0.5"/>
                    </rect>
                    </g>
                    </svg>
                </div>
                {{-- @if($defaultGames != null && $defaultGames->count() > 0) --}}
                    <div class="game-slider">
                            {{-- @php
                                $loopIteration = 0;
                            @endphp
                            @foreach($defaultGames as $game)
                            @php
                                $flip = 'flip-up';
                                $delay = 400;
                                if($loopIteration == 0){
                                    $flip = 'flip-right';
                                    $delay = 200;
                                }
                                $link = $game->game_url;
                                if(!auth()->check()){
                                    $link = route('login');
                                }
                            @endphp
                                <div class="game-slide" data-aos="{{$flip}}" data-aos-delay="{{$delay}}">
                                    <div class="image-holder">
                                        <img src="{{asset('frontend/media/frame.png')}}" alt="frame" class="frame-img">
                                        <img src="{{ asset($game->thumbnail_image) }}" alt="" class="game-img">
                                    </div>
                                    <a target="_blank" href="{{$link}}" data-id={{$game->id}} class="btn btn-white play-game">Play Now</a>
                                    <div class="description">
                                        <p>{{$game->digitalAsset->name}}</p>
                                        <h4>{{ $game->title }}</h4>
                                    </div>
                                </div>
                                @php
                                    $loopIteration++;
                                @endphp
                            @endforeach --}}
                    </div>
                    <div class="game-slider-navigation d-flex align-items-center justify-content-between">
                        <div class="prev"><i class="fa-solid fa-chevron-left"></i></div>
                        <div class="next"><i class="fa-solid fa-chevron-right"></i></div>
                    </div>
                {{-- @else
                    <h4 class="text-center">No Games Found!</h4>
                @endif --}}
            </div>
            <div class="btns d-flex align-items-center justify-content-center flex-wrap">
                <a href="{{route('viewGames', ['type'=>\App\Models\Game::GAME_TYPE_DEFAULT])}}" class="btn btn-white all-games" data-aos="fade-right" data-aos-delay="200">View All Games</a>
                <a href="{{route('innerPage', [\App\Models\PageSettings::ABOUT])}}" class="btn btn-white-outline" data-aos="fade-left" data-aos-delay="200">Read About Us</a>
            </div>
        </section>
        <div class="divider"></div>
    @endif
@endif

@if($storeItems != null)
<section class="store container-fluid">
    <h2 data-aos="fade-right">GC7 Store</h2>

    <div class="row">
        @php
        $delay = 0;
        @endphp
        @foreach($storeItems as $item)
        @php
            if(auth()->check()){
                $url =  url('/market-place/asset/'.encrypt($item->id).'/checkout');
            }else{
                $url = route('login');
            }
        @endphp
        <div class="col-lg-3 col-md-6">
            <div class="store-item-card" data-aos="fade-up" data-aos-delay="{{$delay}}">
                <div class="image-btn-holder">
                    <img src="{{asset($item->image)}}" alt="{{$item->name}}" class="img-fluid">
                    <div class="bg-overlay"></div>
                    <div class="btns">
                        <a href="{{$url}}" class="btn btn-gradient">Buy Now!</a>
                        @if($item->description != NULL)
                        <a href="{{route('storeItemDescription', $item->id)}}" class="btn btn-white">Read Info</a>
                        @endif
                    </div>
                </div>
                @if($item->freeItems->isNotEmpty())
                    {{-- @foreach($item->freeItems as $freeItem)
                            <p class="badge">{{ $freeItem->free_item_quantity }} x {{ $freeItem->freeItem->name }}</p>
                    @endforeach --}}
                    <p class="badge">Free items on purchase of {{ $item->item_quantity_for_free_item }}</p>
                @else
                <p class="badge">No Free Items Available</p>
                @endif
                <div class="d-flex align-items-center justify-content-between flex-wrap">

                    <h3>{{ $item->name }}</h3>
                    <h5 class="price">
                        ${{ $item->price }}
                    </h5>
                </div>
            </div>
        </div>
        @php
        if($loop->iteration % 4 == 0){
            $delay = 0;
        }
        else{
            $delay += 200;
        }
        @endphp
        @endforeach
    </div>
</section>
@endif



@endsection
@section('script')
<!-- Particles JS -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="{{asset("wheels/assets/js/wheel.custom.js")}}"></script>
<script>
     particlesJS.load('particles-js', "{{asset('frontend/js/particlesjs-config.json')}}", function () {
            console.log('callback - particles.js config loaded');
        });
    let typed = new Typed("#banner-heading", {
        strings: [`{{ get_page_settings('banner_heading', \App\Models\PageSettings::HOME) ?? 'Experience GC7 Cafe\'s Unique Gaming Experience!' }}`],
        typeSpeed: 50,
        backDelay: 2500,
        loop: true,
        fadeOut: true,
        showCursor: false,
    });
    const colors = [], textColor = "#333333";

    @foreach($colors as $color)
        colors.push("{{$color->value}}")
    @endforeach
    function game_slider(slideLength=5){
        $(".game-slider").slick({
            dots: false,
            infinite: true,
            slidesToShow: 5,
            centerMode: slideLength >= 5 ? true : false,
            centerPadding: "10px",
            slidesToScroll: 1,
            prevArrow: $(".game-slider-navigation .prev"),
            nextArrow: $(".game-slider-navigation .next"),
            responsive: [
            {
                breakpoint: 1500,
                settings: {
                slidesToShow: 3,
                centerMode: slideLength >= 3 ? true : false,
                },
            },
            {
                breakpoint: 1100,
                settings: {
                slidesToShow: 2,
                centerMode: false,
                },
            },
            {
                breakpoint: 480,
                settings: {
                slidesToShow: 1,
                centerMode: false,
                },
            },
            ],
        });
    }
    game_slider();
    $(document).on('click','.games .categories .game-badge', function (e) {
        e.preventDefault();
        let type = $(this).data('type');
        $(this).parent().find('.game-badge').removeClass('active');
        $('.games').find('.loader').removeClass('d-none');
        $(this).addClass('active');
        let url = '{{route("getGames")}}';
        let view_game_url = `{{url('/')}}`+'/view/games/'+type;
        let directGames = ['{{\App\Models\Game::GAME_TYPE_LUCKYWHEELS}}', '{{\App\Models\Game::GAME_TYPE_BINGOBALLS}}'];

        $.ajax({
            type: "POST",
            url: url,
            data: {
                "_token": "{{ csrf_token() }}",
                "type": type,
            },
            dataType: "JSON",
            success: function (response) {
                let html = '';
                let isLogged = '{{auth()->check()}}';
                let link = "{{route('login')}}";
                if(response.success === true){
                    $('.game-slider').slick('unslick');
                    if(response.data.length > 0){
                        let flip = '';
                        let delay = 0;
                        let baseUrl = '{{ asset('') }}';


                        for(let i=0; i<response.data.length; i++){
                            flip = 'flip-up';
                            delay = 400;
                            if(i == 0){
                                flip = 'flip-right';
                                delay = 200;
                            }
                            if(isLogged == 1){
                                link = response.data[i].game_url || response.data[i].link;
                            }
                            let classExtra = type != 'links' ? 'play-game' : '';
                            html += `
                            <div class="game-slide" data-aos="${flip}" data-aos-delay="${delay}">
                                <div class="image-holder">
                                    <img src="{{asset('frontend/media/frame.png')}}" alt="frame" class="frame-img">
                                    <img src="${baseUrl+response.data[i].thumbnail_image}" alt="game_img" class="game-img">
                                </div>
                                <a target='_blank' href="${link}" data-id="${response.data[i].id}" class="btn btn-white ${classExtra}">Play Now</a>
                                <div class="description">
                                    <p>${response.data[i].digital_asset?.name || ''}</p>
                                    <h4>${response.data[i].title}</h4>
                                </div>
                            </div>
                            `;
                        }
                    }
                    $('.game-slider').html(html);
                    $('.games').find('.btns').find('.all-games').attr('href', view_game_url);
                    $('.games').find('.btns').find('.all-games').html('View All Games');
                    $('.games').find('.game-slider-navigation ').removeClass('d-none');
                    $('.games').find('.game-slider-navigation ').addClass('d-flex');
                    $('.games').find('.btns').find('.all-games').removeClass('d-none');
                    game_slider(response.data.length);
                }else{
                    if(type === '{{\App\Models\Game::GAME_TYPE_BINGOBALLS}}'){
                        let html = '<h4 class="text-center">Play game by clicking Play Now!</h4>';
                        $('.game-slider').slick('unslick');
                        if(response.data.rooms.length > 0){
                            let flip = '';
                            let delay = 0;
                            let baseUrl = '{{ asset('') }}';
                            html = '';
                            for(let i=0; i<response.data.rooms.length; i++){
                                flip = 'flip-up';
                                delay = 400;
                                if(i == 0){
                                    flip = 'flip-right';
                                    delay = 200;
                                }
                                html += `
                                    <div class="game-slide" data-aos="${flip}" data-aos-delay="${delay}">
                                        <div class="d-flex flex-column align-items-center justify-content-center bingo-box">
                                            <div class="description">
                                                <h4>${'Room' + response.data.rooms[i].id}</h4>
                                                <p><strong>Host:</strong> ${response.data.rooms[i].user ? response.data.rooms[i].user.username : response.data.rooms[i].bot.name}</p>
                                                <div class="prices"><p>${Math.round(response.data.rooms[i].amount)} x ${response.data.rooms[i].digitalasset.name}</p></div>
                                                <p><i class='fas fa-user' role="button"></i>  ${response.data.rooms[i].roomuser_count}</p>
                                            </div>
                                        </div>
                                    </div>
                                    `;

                            }
                        }
                        $('.game-slider').html(html);
                        $('.games').find('.btns').find('.all-games').attr('href', response.data.game_url);
                        $('.games').find('.btns').find('.all-games').html('Play Now');
                        $('.games').find('.game-slider-navigation ').removeClass('d-none');
                        $('.games').find('.game-slider-navigation ').addClass('d-flex');
                        $('.games').find('.btns').find('.all-games').removeClass('d-none');
                        if(response.data.rooms.length > 0) {
                            game_slider(response.data.rooms.length);
                        }
                    }
                    else if(type === '{{\App\Models\Game::GAME_TYPE_LUCKYWHEELS}}'){
                        let canvases = [];
                        let html = '<h4 class="text-center">Play game by clicking Play Now!</h4>';
                        $('.game-slider').slick('unslick');
                        if(response.data.wheels.length > 0){
                            let flip = '';
                            let delay = 0;
                            let baseUrl = '{{ asset('') }}';
                            html = '';
                            for(let i=0; i<response.data.wheels.length; i++){
                                flip = 'flip-up';
                                delay = 400;
                                if(i == 0){
                                    flip = 'flip-right';
                                    delay = 200;
                                }
                                let pricesHtml = '';
                                for(let k=0; k<response.data.wheels[i].wheel_prize.length; k++){
                                    pricesHtml += `<p> ${response.data.wheels[i].wheel_prize[k].digital_asset.name} x ${response.data.wheels[i].wheel_prize[k].amount} </p>`;
                                }
                                html += `
                                    <div class="game-slide" data-aos="${flip}" data-aos-delay="${delay}">
                                        <div class="d-flex flex-column align-items-center justify-content-center wheel-box">
                                            <div class="canvas-holder">
                                                <img src="{{asset("wheels/assets/img/spin-outline.png")}}" alt="" class="frame-holder">
                                                <canvas id="wheelCanvas${i}" class="wheel-canvas ${response.data.wheels[i]?.spins.length > 0 ? '' : 'no-rotate'}" width="250" height="250"></canvas>
                                                <div class="spin ${response.data.wheels[i]?.spins.length > 0 ? '' : 'd-none'}" id="spin${i}">SPIN</div>
                                            </div>
                                            <div class="description">
                                                <p><span class="badge badge-danger">$${response.data.wheels[i]?.min}</span> ~ <span class="badge badge-success">$${response.data.wheels[i]?.max}</span></p>
                                                <h4>${response.data.wheels[i]?.title || ''}</h4>
                                                <div class="prices">${pricesHtml}</div>
                                            </div>
                                        </div>
                                    </div>
                                    `;
                                if(response.data.wheels[i]?.spins.length > 0){
                                    let temp = [];
                                    for(let j=0; j<response.data.wheels[i]?.spins[0].spinners.length; j++){
                                        let spin = response.data.wheels[i]?.spins[0].spinners[j];
                                        temp.push({
                                            id: spin.user_id,
                                            color: colors[j % colors.length],
                                            text: textColor,
                                            label: spin.user.username
                                        });
                                    }
                                    let canvasName = `wheelCanvas${i}`;
                                    let spinName = `spin${i}`;
                                    canvases.push({
                                        canvasName: canvasName,
                                        sectors: temp,
                                        spin:  spinName
                                    });
                                }else{
                                    let canvasName = `wheelCanvas${i}`;
                                    let spinName = `spin${i}`;
                                    canvases.push({
                                        canvasName: canvasName,
                                        sectors: [{
                                            id: 1,
                                            color: colors[0],
                                            text: textColor,
                                            label: 'No Participants'
                                        }],
                                        spin:  spinName
                                    });
                                }
                            }
                        }

                        $('.game-slider').html(html);

                        for(let i = 0; i < canvases.length; i++){
                            let spinEl = document.getElementById(canvases[i].spin);
                            let context = document.getElementById(canvases[i].canvasName).getContext("2d");
                            let sectors = canvases[i].sectors;
                            let wheel = new Wheel({sectors, element: spinEl, context, callback: null});
                            wheel.init();
                        }
                        $('.games').find('.btns').find('.all-games').attr('href', response.data.game_url);
                        $('.games').find('.btns').find('.all-games').html('Play Now');
                        $('.games').find('.game-slider-navigation ').removeClass('d-none');
                        $('.games').find('.game-slider-navigation ').addClass('d-flex');
                        $('.games').find('.btns').find('.all-games').removeClass('d-none');
                        if(response.data.wheels.length > 0) {
                            game_slider(response.data.wheels.length);
                        }
                    }
                    else{
                        $('.game-slider').html(`<h4 class="text-center">${response.data}</h4>`);
                        $('.games').find('.game-slider-navigation ').addClass('d-none');
                        $('.games').find('.game-slider-navigation ').removeClass('d-flex');
                        $('.games').find('.btns').find('.all-games').addClass('d-none');
                    }
                }
                $('.games').find('.loader').addClass('d-none');
            }
        });
    });
    @if(auth()->check())
    $(document).on('click', '.play-game', function(event) {
        event.preventDefault();
        let gameId = $(this).data('id');
        let url = '{{ route("games.play", ":id") }}';
        url = url.replace(':id', gameId);
        fetch(url)
            .then(response => response.json())
            .then(data => {
                window.open(data.url, '_blank');
            })
        .catch(error => {
            alert("Some thing went wrong please try again!");
        });
    });
    @endif

    $('.games .categories .game-badge.active').click();




</script>
@endsection