@extends('admin.layouts')

@section('content')
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Add New Game Session</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Add Game Session</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <form method="POST" action="{{ route('game-sessions.store') }}">
                        @csrf

                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="game_id">Game</label>
                                            <select class="form-control" name="game_id" id="game_selector" required>
                                                <option value="">Select a Game</option>
                                                @foreach($games as $game)
                                                    <option data-minbet="{{ $game->minimum_bet }}" data-maxbet="{{ $game->maximum_bet }}" value="{{ $game->id }}">{{ $game->game_name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="start_time">Start Time</label>
                                            <input type="datetime-local" class="form-control" name="start_time" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="end_time">End Time</label>
                                            <input type="datetime-local" class="form-control" name="end_time">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="winning_number">Minimum Bet</label>
                                            <input id="minimum_bet" type="number" class="form-control" name="minimum_bet">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="winning_number">Maximum Bet</label>
                                            <input id="maximum_bet" type="number" class="form-control" name="maximum_bet">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="winning_number">Winning Number</label>
                                            <input type="number" class="form-control" name="winning_number">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <button type="submit" class="btn btn-primary">Add Game Session</button>
                            </div>
                        </div>
                    </form>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->

@endsection

@section('footer-custom-js')
<script>
    $(document).ready(function() {
        $('#game_selector').change(function() {
            var selectedOption = $(this).find('option:selected');
            var minBet = selectedOption.data('minbet');
            var maxBet = selectedOption.data('maxbet');

            $('#minimum_bet').val(minBet);
            $('#maximum_bet').val(maxBet);
        });
    });
    </script>
@endsection