@extends('layouts.master')
@section('title')
    {{$gametype}} Games
@endsection

@section('css')
    <link href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css"/>
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            {{$gametype}} Games
        @endslot
        @slot('title')
            List
        @endslot
    @endcomponent

    @include('partials.session')

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                @can('Add Games')
                    <div class="card-header d-flex justify-content-between align-items-center flex-wrap">
                        <h1 class="card-title mb-0">{{ $gametype }} Game List</h1>

                        <a href="{{ route('games.create') }}" class="btn btn-primary btn-sm">Add Game</a>

                    </div>
                @endcan

                <div class="card-body">
                    <div class="row">
                        @foreach ($games as $game)
                            <div class="col-md-3 col-12 mb-5">
                                <div class="image-container">
                                        <img src="{{ asset($game->thumbnail_image) }}" alt="thumbnail" class="w-100">
                                    <div class="text-center">

                                            @can('Play Games')
                                                <button class="btn btn-sm play-game" data-id="{{ $game->id }}"><i class="fa fa-2x fa-play"></i></button>
                                            @endcan

                                            @can('Edit Games')
                                                <a href="{{ route('games.edit', $game->id) }}" class="btn btn-sm"><i class="fa fa-2x fa-edit"></i></a>
                                            @endcan
                                            @can('Delete Games')
                                                <form action="{{ route('games.destroy', $game->id) }}" method="POST" style="display:inline-block;">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-sm"><i class="fa fa-2x fa-trash"></i></button>
                                                </form>
                                            @endcan
                                    </div>
                                </div>
                                <h5 class="text-center">

                                        {{ $game->title }}

                                </h5>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
    <script src="{{ URL::asset('assets/js/pages/datatables.init.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(document).on('click', '.play-game', function (event) {
            event.preventDefault();
            var gameId = $(this).data('id');
            var url = '{{ route("games.play", ":id") }}';
            url = url.replace(':id', gameId);

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    window.location.href = data.url;
                })
                .catch(error => {
                    alert("Some thing went wrong please try again!");
                });
        });

    </script>
@endsection