@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 small-banner" {!!$banner_bg !!}>
    @include('frontend.partials.navbar')
    <div class="banner-content">
        <h1 data-aos="fade-right">Games</h1>
    </div>
</section>

<section class="external-games">
    <h2 data-aos="fade-right" data-aos-delay="400">{{$title}}</h2>
    <div class="row">
        @if($games != null && $games->count() > 0)
            @php
                $delay = 400;
            @endphp
            @foreach($games as $game)
            @php
                $flip = 'fade-up';
                $link = $game->game_url ?? $game->link;
                if(!auth()->check()){
                    $link = route('login');
                }
            @endphp
                <div class="col-lg-4 col-md-6">
                    <div class="e-games-item-card" data-aos="{{$flip}}" data-aos-delay="{{$delay}}">
                        <img src="{{ asset($game->thumbnail_image) }}" alt="game_img" class="img-fluid">
                        <div class="d-flex align-items-center justify-content-between mt-4">
                            <h3>{{ $game->title }}</h3>
                            <a href="{{$link}}" data-id="{{$game->id}}" class="btn btn-white play-game">Play Game</a>
                        </div>
                    </div>
                </div>
                @php
                    if($loop->iteration % 3 == 0){
                        $delay = 400;
                    }
                    else{
                        $delay += 200;
                    }
                @endphp
            @endforeach
        @else
            <h4 class="text-center w-100">No Games Found!</h4>
        @endif
    </div>
</section>

@endsection
@section('script')
<script>
  $(function () {
    @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
  });
</script>
@endsection