@extends('admin.layouts')

@section('content')
    <style>
        .bitContainer fieldset {
            border: none;
            text-align: center;
        }

        .bitContainer legend {
            font-size: 0;
        }

        .bitContainer input {
            width: 2rem;
            height: 2rem;
            font-size: 15px;
            text-align: center;
            border: none;
            border-radius: 0.5rem;
            background: linear-gradient(145deg, #e6e6e6, #ffffff);
            box-shadow: 28px 28px 56px #d9d9d9, -28px -28px 56px #ffffff;
        }

        @media only screen and (min-width: 600px) {
            .bitContainer form {
                padding: 4rem 3rem;
            }

            .bitContainer input {
                width: 4rem;
                height: 4rem;
                font-size: 15px;
                margin: 0px 15px;
            }

            .bitContainer input+.bitContainer input {
                margin-left: 1rem;
            }
        }

        /* Chrome, Safari, Edge, Opera */
        .bitContainer input::-webkit-outer-spin-button,
        .bitContainer input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        .bitContainer input[type=number] {
            -moz-appearance: textfield;
            appearance: textfield;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        .inputContainer {
            display: inline-block;
            margin-bottom: 20px;
        }

        .BidNumber {
            background-color: #ededed;
            width: 35px;
            height: 35px;
            margin: auto;
            font-size: 18px;
            padding: 6px 0;
            border-top-right-radius: 5px;
            border-top-left-radius: 5px;
        }

        .bidResult {
            width: 68%;
            position: relative;
            margin: auto;
            height: 35px;
            padding: 7px;
            font-size: 15px;
            color: #fff;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        .redBg {
            background-color: #fb5d59;
        }

        .green {
            background-color: green;
            font-weight: 700;
        }

        .panelContainer table tr th {
            background-color: #070f38;
            color: #fff;
            padding: 10px 15px;
        }
    </style>

    <!-- 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 d-flex justify-content-between align-items-center">
                        <h1>{{ $gameDetails->game->game_name }}</h1>
                        <select name="user_id" id="userSelect" class="form-control">
                            <option value="total_all">All</option>
                            @foreach (json_decode($bidsjson, true) as $user_id => $data)
                                @if ($user_id != 'total_all')
                                    <option value="{{ $user_id }}">{{ $data['username'] }} (ID: {{ $user_id }})
                                    </option>
                                @endif
                            @endforeach
                        </select>

                    </div>
                </div>
            </div><!-- /.container-fluid -->
            @if (session('error'))
                <div class="alert alert-danger">
                    {{ session('error') }}
                </div>
            @endif

        </section>

        @if ($gameDetails->game->game_type == 1)
            <section class="container mt-5">
                <div class="row">
                    <div class="col-xl-12 col-sm-12 col-12 bitContainer">
                        <div class="row">
                            <h3>Andar</h3>
                            <fieldset class="col-xl-12" name='number-code' data-number-code-form>
                                <legend>Number Code</legend>
                                @for ($i = 0; $i <= 9; $i++)
                                    <div class="inputContainer">
                                        <div class="BidNumber">{{ $i }}</div>
                                        <input type="number" min='0' name='bids[{{ $i }}]'
                                            data-number-code-input='{{ $i }}' placeholder="0"
                                            class="andarFieldClass" />
                                        <div class="bidResult redBg">0</div>
                                    </div>
                                @endfor
                            </fieldset>
                            <hr />
                            <h3>Bahar</h3>
                            <fieldset class="col-xl-12" name='number-code' data-number-code-form>
                                <legend>Number Code</legend>
                                @for ($i = 10; $i <= 19; $i++)
                                    <div class="inputContainer">
                                        <div class="BidNumber">{{ $i - 10 }}</div>
                                        <input type="number" min='0' name='bids[{{ $i }}]'
                                            data-number-code-input='{{ $i }}' placeholder="0"
                                            class="baharFieldClass" />
                                        <div class="bidResult redBg">0</div>
                                    </div>
                                @endfor
                            </fieldset>

                        </div>
                    </div>

                </div>
            </section>
        @endif



        @if ($gameDetails->game->game_type == 2)
            <section class="container mt-5">
                <div class="row">
                    <div class="col-xl-12 col-sm-12 col-12 bitContainer">
                        <div class="row">


                            <fieldset class="col-xl-12" name='number-code' data-number-code-form>
                                <legend>Number Code</legend>
                                @for ($i = 0; $i <= 99; $i++)
                                    <div class="inputContainer">
                                        <div class="BidNumber">{{ sprintf('%02d', $i) }}</div>
                                        <input type="number" min='0' inputmode="numeric"
                                            name='bids[{{ $i }}]' data-number-code-input='{{ $i }}'
                                            placeholder="0" />
                                        <div class="bidResult redBg">0</div>
                                    </div>
                                @endfor
                            </fieldset>
                        </div>
                    </div>
                </div>
            </section>
        @endif
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            const numberInputs = document.querySelectorAll('[data-number-code-input]');
            const previousBidsJson = document.querySelector('meta[name="previous-bids-json"]').getAttribute(
                'content');
            const previousBids = JSON.parse(previousBidsJson);


            function loadAll(customer = "total_all") {
                numberInputs.forEach(input => {
                    input.value = previousBids[customer][input.getAttribute('data-number-code-input')];
                });
            }

            $("#userSelect").on("change", function(){
                loadAll($(this).val());
            });
            $("#userSelect").trigger("change");
        });
    </script>
@endpush

@section('head')
    <!-- Add meta tag for previous bids JSON -->
    <meta name="previous-bids-json" content="{{ $bidsjson }}">
@endsection