@section('title', 'Winning Management')
@section('next-management', 'active')
@include('adminDashboard.layout.header')

<div class="main-content">
    <section class="section">
        <div class="section-body">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4>Next Management</h4>
                            <br>
                        </div>
                        <div class="card-body pt-0">
                            <div class="row">
                                <div class="col-md-2">
                                    <div style="display: flex; flex-direction:column;">
                                        <p class="mb-0 font-bold">Countdown</p>
                                        <p class="mt-0">
                                            <span id="minutes">00</span>:
                                            <span id="seconds">00</span>
                                        </p>
                                    </div>
                                </div>
                                <input type="hidden" name="tabValue" value="one_minute">

                                <div class="col-md-2">
                                    <div style="display: flex; flex-direction:column;">
                                        <p class="mb-0 font-bold">Active Id</p>
                                        @if (isset($gameid))
                                        <p class="mt-0" id="active_game_id">{{ $gameid->game_id }}</p>
                                        @else
                                        <p class="mt-0" id="active_game_id">-----------</p>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-6" style="display:flex;">
                                    <div class="form-group mr-3 flex-column">
                                        <label class="form-check-label font-bold font_size_14 mb-1" for="typeOneMinute">
                                            1 minute
                                        </label>
                                        <input type="radio" name="gameTab" id="typeOneMinute" value="one_minute" checked="checked">
                                    </div>
                                    <div class="form-group mr-3 flex-column">
                                        <label class="form-check-label font-bold font_size_14 mb-1" for="typeTwoMinute">
                                            2 minute
                                        </label>
                                        <input type="radio" name="gameTab" id="typeTwoMinute" value="two_minute">
                                    </div>
                                    <div class="form-group mr-3 flex-column">
                                        <label class="form-check-label font-bold font_size_14 mb-1" for="typeThreeMinute">
                                            3 minute
                                        </label>
                                        <input type="radio" name="gameTab" id="typeThreeMinute" value="three_minute">
                                    </div>
                                    <div class="form-group mr-3 flex-column">
                                        <label class="form-check-label  font-bold font_size_14 mb-1" for="typeFiveMinute">
                                            5 minute
                                        </label>
                                        <input type="radio" name="gameTab" id="typeFiveMinute" value="five_minute">
                                    </div>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-striped table-md">
                                    <tr>
                                        <th>Game ID</th>
                                        <th class="text-center">Start Time</th>
                                        <th class="text-center">Result</th>
                                    </tr>
                                    <tbody id="records_table">
                                        @for ($i=$active_game->game_id + 1; $i < $active_game->game_id + 121; $i++)
                                            @php
                                            $time = Date("H:i:s d-m-Y", strtotime($i-$active_game->game_id." minute", strtotime($active_game->created_at)));
                                            $selectedValue = null;
                                            foreach($nextgameid as $nextGame) {
                                            if($selectedValue == null && $nextGame->game_id == $i) {
                                            $selectedValue = $nextGame->one_minute_code;
                                            }
                                            }
                                            @endphp
                                            <tr>
                                                <td>{{ $i }}</td>
                                                <td class="text-center">{{ $time }}</td>
                                                <td class="text-center p-0">
                                                    <div class="form-group m-0">
                                                        <select class="form-control custom_select" id="" onchange="updateResult(this.value, '{{$i}}')">
                                                            <option value="00" {{$selectedValue == null ? 'selected' : ''}}>Select Result</option>
                                                            <option value="0" {{$selectedValue === 0  ? 'selected' : ''}}>0 (Red + Violet)</option>
                                                            <option value="1" {{$selectedValue == 1 ? 'selected' : ''}}>1 (Green)</option>
                                                            <option value="2" {{$selectedValue == 2 ? 'selected' : ''}}>2 (Red)</option>
                                                            <option value="3" {{$selectedValue == 3 ? 'selected' : ''}}>3 (Green)</option>
                                                            <option value="4" {{$selectedValue == 4 ? 'selected' : ''}}>4 (Red)</option>
                                                            <option value="5" {{$selectedValue == 5 ? 'selected' : ''}}>5 (Green + Violet)</option>
                                                            <option value="6" {{$selectedValue == 6 ? 'selected' : ''}}>6 (Red)</option>
                                                            <option value="7" {{$selectedValue == 7 ? 'selected' : ''}}>7 (Green)</option>
                                                            <option value="8" {{$selectedValue == 8 ? 'selected' : ''}}>8 (Red)</option>
                                                            <option value="9" {{$selectedValue == 9 ? 'selected' : ''}}>9 (Green)</option>
                                                        </select>
                                                    </div>
                                                </td>
                                            </tr>
                                            @endfor
                                    </tbody>

                                </table>
                            </div>
                        </div>
                        <div class="card-footer text-right">
                            <nav class="d-inline-block">
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


</div>
</div>

<script>
    function updateResult(value, gameId) {
        let type = $("input[name='tabValue']").val();
        $.ajax({
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            },
            url: "/admin/gameId/setResult",
            method: "POST",
            data: {
                value,
                gameId,
                type
            },
            success: function(data) {},
        });
    }

    $(document).ready(function() {
        $('input[type=radio][name="gameTab"]').change(function() {
            $("input[name='tabValue']").val($(this).val());
            fetchNextRecords($(this).val());
        });


        let reference = "{{$last_game_time}}";
        let date_now = parseInt("{{ $date_now }}");

        var myfunc = setInterval(function() {
            date_now = date_now + 1;

            let total_seconds = reference - date_now;
            console.log(total_seconds);

            if (total_seconds >= 300) {
                $('#minutes').html("05");
                let seconds = total_seconds % 60;
                if (seconds < 10) {
                    $('#seconds').html("0" + seconds);
                } else {
                    $('#seconds').html(seconds);
                }
            } else if (total_seconds >= 240) {
                $('#minutes').html("04");
                let seconds = total_seconds % 60;
                if (seconds < 10) {
                    $('#seconds').html("0" + seconds);
                } else {
                    $('#seconds').html(seconds);
                }
            } else if (total_seconds >= 180) {
                $('#minutes').html("03");
                let seconds = total_seconds % 60;
                if (seconds < 10) {
                    $('#seconds').html("0" + seconds);
                } else {
                    $('#seconds').html(seconds);
                }
            } else if (total_seconds >= 120) {
                $('#minutes').html("02");
                let seconds = total_seconds % 60;
                if (seconds < 10) {
                    $('#seconds').html("0" + seconds);
                } else {
                    $('#seconds').html(seconds);
                }
            } else if (total_seconds >= 60) {
                $('#minutes').html("01");
                let seconds = total_seconds % 60;
                if (seconds < 10) {
                    $('#seconds').html("0" + seconds);
                } else {
                    $('#seconds').html(seconds);
                }
            } else if (total_seconds > 0) {
                $('#minutes').html("00");
                if (total_seconds < 10) {
                    $('#seconds').html("0" + total_seconds);
                } else {
                    $('#seconds').html(total_seconds);
                }
            } else if (total_seconds <= 0) {
                let tab = $('input[name="tabValue"]').val();
                fetchNextRecords(tab, "full");
                $('#minutes').html("00");
                $('#seconds').html("00");
            }
        }, 1000);

        function fetchNextRecords(tab, type = null) {
            $.ajax({
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                url: "/admin/next-management/records",
                method: "POST",
                data: {
                    tab: tab,
                },
                success: function(data) {
                    if (data.status == "success") {

                        let check_difference = data.last_game_time - data.date_now;
                        if (check_difference < 0 && type != null) {
                            return;
                        }
                        reference = data.last_game_time;
                        date_now = data.date_now;
                        let active_game_id = +data.gameid.game_id;
                        $("#active_game_id").html(active_game_id);


                        let html = "";

                        $.each(data.nextGamesData, function(key, nextGame) {
                            html += `<tr>
                                        <td>${nextGame.game_id}</td>
                                        <td class="text-center">${nextGame.created_at}</td>
                                        <td class="text-center p-0">
                                            <div class="form-group m-0">
                                                <select class="form-control custom_select" id="" onchange="updateResult(this.value, '${nextGame.game_id}')">
                                                    <option value="00" ${nextGame.selectedValue == null ? 'selected' : ''}>Select Result</option>
                                                    <option value="0" ${nextGame.selectedValue === 0  ? 'selected' : ''}>0 (Red + Violet)</option>
                                                    <option value="1" ${nextGame.selectedValue == 1 ? 'selected' : ''}>1 (Green)</option>
                                                    <option value="2" ${nextGame.selectedValue == 2 ? 'selected' : ''}>2 (Red)</option>
                                                    <option value="3" ${nextGame.selectedValue == 3 ? 'selected' : ''}>3 (Green)</option>
                                                    <option value="4" ${nextGame.selectedValue == 4 ? 'selected' : ''}>4 (Red)</option>
                                                    <option value="5" ${nextGame.selectedValue == 5 ? 'selected' : ''}>5 (Green + Violet)</option>
                                                    <option value="6" ${nextGame.selectedValue == 6 ? 'selected' : ''}>6 (Red)</option>
                                                    <option value="7" ${nextGame.selectedValue == 7 ? 'selected' : ''}>7 (Green)</option>
                                                    <option value="8" ${nextGame.selectedValue == 8 ? 'selected' : ''}>8 (Red)</option>
                                                    <option value="9" ${nextGame.selectedValue == 9 ? 'selected' : ''}>9 (Green)</option>
                                                </select>
                                            </div>
                                        </td>
                                    </tr>`;
                        });

                        $("#records_table").html(html);
                    }
                },
            });
        }
    });
</script>

@include('adminDashboard.layout.footer')