@extends('layout.master')

@section('content')
    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-header d-flex">
                    <h5 class="col-sm-2 card-title" style="text-transform: none !important;">Result</h5>.
                </div>
                <div class="card-body">
                    <div
                        class="view view-cascade gradient-card-header blue-gradient narrower py-2 mx-4 mb-3 text-center justify-content-between align-items-center">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="box">
                                    <div class="box-header">
                                    </div>
                                    <div id="table" class="table-editable table-responsive">
                                        <table id="user_role_table"
                                            class="table table-responsive-md table-striped text-center mb-0">
                                            <thead>
                                                <tr>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    @for ($i = 0; $i <= 4; $i++)
                                                        <td>
                                                            <div class="form-check form-check-flat form-check-primary">
                                                                <input type="radio" class="form-check-input"
                                                                    id="No{{ $i }}" value="HJ" class="cards"
                                                                    name="cards">
                                                                <label for="No{{ $i }}"
                                                                    style="font-size:50px;">{{ $i }}</label>
                                                            </div>
                                                        </td>
                                                    @endfor
                                                </tr>
                                                <tr>
                                                    @for ($i = 1; $i <= 5; $i++)
                                                        <td><input type="text" class="form-control" name="c1"
                                                                value="0" id="amt{{ $i }}" disabled />
                                                    @endfor
                                                </tr>
                                                <tr>
                                                    @for ($i = 5; $i <= 9; $i++)
                                                        <td>
                                                            <div class="form-check form-check-flat form-check-primary">
                                                                <input type="radio" class="form-check-input"
                                                                    id="No{{ $i }}" value="HJ" class="cards"
                                                                    name="cards">
                                                                <label for="No{{ $i }}"
                                                                    style="font-size:50px;">{{ $i }}</label>
                                                            </div>
                                                        </td>
                                                    @endfor
                                                </tr>
                                                <tr>
                                                    @for ($i = 6; $i <= 10; $i++)
                                                        <td><input type="text" class="form-control" name="c1"
                                                                value="0" id="amt{{ $i }}" disabled />
                                                    @endfor
                                                </tr>
                                            </tbody>
                                        </table>
                                        <!-- /.box-body -->
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 mt-5">
                                <p>Game Timer: <span id="GameStatus"></span></p>
                                <span id="countdown" style="font-size: 32px">00</span>
                                <p>Total Expected Collection: <span id="TCollection">0</span>
                                </p>
                                <p>Total Expected Payment<span id="if_selected"></span>: <span id="totalPayment"></span></p>
                                <p>
                                    <select class="form-control" name="x" id="x">
                                        <option value="1">N</option>
                                        <option value="2">2x</option>
                                        <option value="3">3x</option>
                                        <option value="4">4x</option>
                                    </select>
                                </p>
                                <div class="mt-2 mb-3 d-flex">
                                    <input type="number" class="form-control ui-autocomplete-input mr-2" id="setNo"
                                        autocomplete="off" style="width:100px" disabled>
                                    <a class="btn btn-success" id="btnSave" name="btnSave">SAVE</a>
                                </div>
                                <div class="alert alert-success alert-dismissible fade" role="alert" id="alertId"></div>
                                <span id="idRes">Daily Collection & Results</span>
                                <table class="table table-bordered">
                                    <tr>
                                        <td>TOTAL COLLECTION: </td>
                                        <td align="right"><span id="tDayCollection">00</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>TOTAL PAYMENT :</td>
                                        <td align="right"><span id="tDayPayment">00</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>BALANCE :</td>
                                        <td align="right"><span id="tDayBalance">00</span>
                                        </td>
                                    </tr>
                                </table>
                                <table class="col-md-3 table table-bordered">
                                    <tr>
                                        <td>Number</td>
                                        <td>Booster</td>
                                    </tr>
                                    @for ($i = 0; $i < 5; $i++)
                                        <tr>
                                            <td border="1" class="p-3"><span id="betHistory"
                                                    style="font-size:15px">
                                                    0</span>
                                            </td>
                                            <td><strong id="booster">{{ $i == '1' ? 'N' : $i . 'x' }}</strong>
                                            </td>
                                        </tr>
                                    @endfor
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('plugin-scripts')
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.js"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
            crossorigin="anonymous"></script>
    @endpush
    @push('custom-scripts')
        <script>
            for (let i = 0; i <= 9; i++) {
                $('#No' + i).on('click', function() {
                    for (let i = 0; i <= 9; i++) {
                        $('#No' + i).attr("style", "background-color: lightyellow");
                    }
                    // console.log(i);
                    $('#No' + i).attr("style", "background-color: yellow");
                    $('#setNo').val(i);
                    // var boosterIds = $('#boosterId').val();
                    // var key = cardsNum[result];
                    var boosterIds = $('#x').val();
                    // $('#SelectedCardNumber').val(key);
                    $('#TCollection').html($('#amt' + parseInt(i + 1)).val());
                    $('#totalPayment').html($('#amt' + parseInt(i + 1)).val() * 9 * boosterIds);
                });
            }
            $('#x').on('change', function() {
                var j = $('#setNo').val();
                j = parseInt(++j);
                // console.log($('#amt' + j).val() * 10 * this.value)
                $('#totalPayment').html($('#amt' + j).val() * 9 * this.value);
            });

            $(function() {
                const socket = io.connect("ws://157.245.100.236:5000");
                socket.on("connect", function() {
                    console.log(socket.id);
                    const user = {
                        adminId: "61d7bcd1153a05cf20cfc6f2",
                        gameName: "playToWin",
                    };
                    socket.emit("joinAdmin", user);
                    socket.on('resAdmin', (res) => {
                        console.log(res)
                        if (res.gameName == "playToWin") {
                            console.log(res);
                            if (res.time >= 0) {
                                var seconds = parseInt(Math.abs(res.time) - 60);
                                seconds = Math.abs(seconds);
                                var countdownTimer = setInterval(function() {
                                    let minutes = Math.round((seconds - 30) / 60);
                                    let remainingSeconds = seconds % 60;
                                    minutes = checkTime(minutes);
                                    remainingSeconds = checkTime(remainingSeconds);
                                    if (seconds == 0) {
                                        for (var i = 1; i <= 10; i++) {
                                            $('#amt' + i).val(0);
                                            $('#amt' + i).css("background-color",
                                                "transparent");
                                        }
                                        $('#TCollection').html(0);
                                        $('#totalPayment').html(0);
                                        $('#x').val(1);
                                        $('#setNo').val('');
                                        clearInterval(countdownTimer);
                                    }
                                    document.getElementById('countdown').innerHTML = minutes +
                                        ":" + remainingSeconds;
                                    seconds -= 1;
                                }, 1000);

                                function checkTime(i) {
                                    if (i < 10) {
                                        i = "0" + i
                                    }; // add zero in front of numbers < 10
                                    return i;
                                }
                            }
                            for (let i = 0; i < res.numbers.length; i++) {
                                $("#betHistory" + i).text(res.numbers[i] - 1);
                                var booster;
                                if (res.x[i] != '1') {
                                    booster = res.x[i] + 'X';
                                } else {
                                    booster = "N";
                                }
                                $('#booster' + i).html(booster);
                            }

                            $.each(res.data, function(key, value) {
                                $q = value / 9;
                                $("#amt" + key).val($q);
                                if ($('#amt' + key).val() > 0) {
                                    $('#amt' + key).css("background-color", "#FFA07A");
                                } else {
                                    $('#amt' + key).css("background-color", "transparent");
                                }
                            });

                            function checkDate() {
                                return new Date().toLocaleString("en-US", {
                                    timeZone: "Asia/Calcutta"
                                }).toString().split(",")[0].replace(/\//g, (x) => "-");
                            }

                            function dataDate($date) {
                                return new Date($date).toLocaleString("en-US", {
                                    timeZone: "Asia/Calcutta"
                                }).toString().split(",")[0].replace(/\//g, (x) => "-");
                            }

                            for (let d = 0; d < res.dataAdmin.length; d++) {
                                // console.log(dataDate(res.dataAdmin[d]._id))
                                if (dataDate(res.dataAdmin[d]._id) == checkDate()) {
                                    // checkDate()
                                    $('#tDayCollection').html(res.dataAdmin[d].totalCollection.toFixed(
                                        2));
                                    $('#tDayPayment').html(res.dataAdmin[d].totalPayment.toFixed(2));
                                    var bal = res.dataAdmin[d].totalCollection - res.dataAdmin[d]
                                        .totalPayment;
                                    $('#tDayBalance').html(bal.toFixed(2));
                                }
                            }
                        }
                    });

                    socket.on("resAdminBetData", (res) => {
                        console.log(res);
                        if (res.gameName == "playToWin") {
                            $.each(res.data, function(key, value) {
                                // console.log(value);
                                $q = value / 9;
                                $("#amt" + key).val($q);
                                if ($('#amt' + key).val() > 0) {
                                    $('#amt' + key).css("background-color", "#FFA07A");
                                } else {
                                    $('#amt' + key).css("background-color", "transparent");
                                }
                            });
                        }
                    });

                    var cardNumber = 0;
                    var y = 1;
                    var gameName = "playToWin";

                    function removeAlert() {
                        setInterval(function() {
                            $('#alertId').removeClass('show');
                        }, 5000);
                    }
                    $('#btnSave').on('click', function() {
                        var boosterId = $('#x').val();
                        let card = $('#setNo').val();
                        card = parseInt(++card);
                        if (card >= 1 && card <= 10) {
                            y = parseInt(boosterId);
                            cardNumber = card;
                            if (cardNumber != "" && y != "") {
                                $('#alertId').addClass('show');
                                $('#alertId').html("Success");
                                removeAlert();
                                console.log({
                                    cardNumber,
                                    y,
                                    gameName,
                                });
                                socket.emit('winByAdmin', {
                                    cardNumber,
                                    y,
                                    gameName,
                                });
                            }
                        }
                    });
                });
            });
        </script>
    @endpush
@endsection