@extends('layouts.master')
@section('title') Edit Game @endsection

@section('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" type="text/css" />
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1') Games @endslot
        @slot('title') Edit @endslot
    @endcomponent

    @include('partials.session')

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h1 class="card-title mb-0">Edit Game</h1>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('games.update', $game->id) }}" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="title" class="form-label">Title</label>
                                <input required type="text" class="form-control" name="title" value="{{ $game->title }}">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="thumbnail_image" class="form-label">Thumbnail Image</label>
                                <input type="file" class="form-control" name="thumbnail_image" id="thumbnail_image" onchange="previewImage(event)">
                                @if ($game->thumbnail_image)
                                    <img id="preview" src="{{ asset($game->thumbnail_image) }}" alt="thumbnail preview" width="100" class="mt-2">
                                @else
                                    <img id="preview" src="" alt="thumbnail preview" width="100" class="mt-2" style="display: none;">
                                @endif
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="game_url" class="form-label">Game URL</label>
                                <input required type="text" class="form-control" name="game_url" value="{{ $game->game_url }}">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="is_active" class="form-label">Active</label>
                                <select required class="form-control" name="is_active">
                                    <option value="1" {{ $game->is_active ? 'selected' : '' }}>Yes</option>
                                    <option value="0" {{ !$game->is_active ? 'selected' : '' }}>No</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="digital_asset_id" class="form-label">Digital Asset</label>
                                <select required class="form-control" name="digital_asset_id">
                                    @foreach ($digitalAssets as $asset)
                                        <option value="{{ $asset->id }}" {{ $game->digital_asset_id == $asset->id ? 'selected' : '' }}>{{ $asset->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="payout_string" class="form-label">Payout String</label>
                                <input required type="text" class="form-control" name="payout_string" value="{{ $game->payout_string }}">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="target_rtp" class="form-label">Target RTP</label>
                                <input required type="number" step="0.01" class="form-control" name="target_rtp" value="{{ $game->target_rtp }}">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="game_type" class="form-label">Game Type</label>
                                <select required class="form-control" name="game_type">
                                    <option value="{{ \App\Models\Game::GAME_TYPE_DEFAULT }}" {{ $game->game_type == \App\Models\Game::GAME_TYPE_DEFAULT ? 'selected' : '' }}>Default</option>
                                    <option value="{{ \App\Models\Game::GAME_TYPE_FREE }}" {{ $game->game_type == \App\Models\Game::GAME_TYPE_FREE ? 'selected' : '' }}>Free</option>
                                    <option value="{{ \App\Models\Game::GAME_TYPE_TOURNAMENT }}" {{ $game->game_type == \App\Models\Game::GAME_TYPE_TOURNAMENT ? 'selected' : '' }}>Fish Tournament</option>
                                    <option value="{{ \App\Models\Game::GAME_TYPE_RUBY_TOURNAMENT }}" {{ $game->game_type == \App\Models\Game::GAME_TYPE_RUBY_TOURNAMENT ? 'selected' : '' }}>Ruby Tournament</option>
                                </select>
                            </div>
                            <div class="col-md-12 form-group mb-2">
                                <a href="{{ route('games.index') }}" class="btn btn-danger btn-sm">Cancel</a>
                                <input type="submit" value="Update Game" class="btn btn-success btn-sm">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <script>
        function previewImage(event) {
            const reader = new FileReader();
            reader.onload = function(){
                const output = document.getElementById('preview');
                output.src = reader.result;
                output.style.display = 'block';
            }
            reader.readAsDataURL(event.target.files[0]);
        }
    </script>
@endsection