@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>
                                                    <td>
                                                        <div class="form-check form-check-flat form-check-primary">
                                                            <input type="radio" class="form-check-input" id="HJ"
                                                                value="HJ" class="cards" name="cards">
                                                            <label for="HJ"><img src="{{ asset('img/cards/hj.png') }}"
                                                                    style="width:70px"></label>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="form-check form-check-flat form-check-primary">
                                                            <input type="radio" class="form-check-input" id="SJ"
                                                                value="SJ" class="cards" name="cards">
                                                            <label for="SJ"><img src="{{ asset('img/cards/sj.png') }}"
                                                                    style="width:70px"></label>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="form-check form-check-flat form-check-primary">
                                                            <input type="radio" class="form-check-input" id="DJ"
                                                                value="DJ" class="cards" name="cards">
                                                            <label for="DJ"><img src="{{ asset('img/cards/dj.png') }}"
                                                                    style="width:70px"></label>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="form-check form-check-flat form-check-primary">
                                                            <input type="radio" class="form-check-input" id="CJ"
                                                                value="CJ" class="cards" name="cards">
                                                            <label for="CJ"><img src="{{ asset('img/cards/cj.png') }}"
                                                                    style="width:70px"></label>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td><input type="text" class="form-control" name="c1"
                                                            value="0" id="c1" readonly />
                                                    </td>
                                                    <td><input type="text" class="form-control" name="c2"
                                                            value="0" id="c2" readonly />
                                                    </td>
                                                    <td><input type="text" class="form-control" name="c3"
                                                            value="0" id="c3" readonly />
                                                    </td>
                                                    <td><input type="text" class="form-control" name="c4"
                                                            value="0" id="c4" readonly />
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td>
                                                        <div class="form-check form-check-flat form-check-primary">
                                                            <input type="radio" class="form-check-input" id="HQ"
                                                                value="HQ" class="cards" name="cards">
                                                            <label for="HQ"><img src="{{ asset('img/cards/hq.png') }}"
                                                                    style="width:70px"></label>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="form-check form-check-flat form-check-primary">
                                                            <input type="radio" class="form-check-input" id="SQ"
                                                                value="SQ" class="cards" name="cards">
                                                            <label for="SQ"><img src="{{ asset('img/cards/sq.png') }}"
                                                                    style="width:70px"></label>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="form-check form-check-flat form-check-primary">
                                                            <input type="radio" class="form-check-input" id="DQ"
                                                                value="DQ" class="cards" name="cards">
                                                            <label for="DQ"><img
                                                                    src="{{ asset('img/cards/dq.png') }}"
                                                                    style="width:70px"></label>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="form-check form-check-flat form-check-primary">
                                                            <input type="radio" class="form-check-input" id="CQ"
                                                                value="CQ" class="cards" name="cards">
                                                            <label for="CQ"><img
                                                                    src="{{ asset('img/cards/cq.png') }}"
                                                                    style="width:70px"></label>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td><input type="text" class="form-control" name="c5"
                                                            value="0" id="c5" readonly />
                                                    </td>
                                                    <td><input type="text" class="form-control" name="c6"
                                                            value="0" id="c6" readonly />
                                                    </td>
                                                    <td><input type="text" class="form-control" name="c7"
                                                            value="0" id="c7" readonly />
                                                    </td>
                                                    <td><input type="text" class="form-control" name="c8"
                                                            value="0" id="c8" readonly />
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td>
                                                        <div class="form-check form-check-flat form-check-primary">
                                                            <input type="radio" class="form-check-input" id="HK"
                                                                value="HK" class="cards" name="cards">
                                                            <label for="HK"><img
                                                                    src="{{ asset('img/cards/hk.png') }}"
                                                                    style="width:70px"></label>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="form-check form-check-flat form-check-primary">
                                                            <input type="radio" class="form-check-input" id="SK"
                                                                value="SK" class="cards" name="cards">
                                                            <label for="SK"><img
                                                                    src="{{ asset('img/cards/sk.png') }}"
                                                                    style="width:70px"></label>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="form-check form-check-flat form-check-primary">
                                                            <input type="radio" class="form-check-input" id="DK"
                                                                value="DK" class="cards" name="cards">
                                                            <label for="DK"><img
                                                                    src="{{ asset('img/cards/dk.png') }}"
                                                                    style="width:70px"></label>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="form-check form-check-flat form-check-primary">
                                                            <input type="radio" class="form-check-input" id="CK"
                                                                value="CK" class="cards" name="cards">
                                                            <label for="CK"><img
                                                                    src="{{ asset('img/cards/ck.png') }}"
                                                                    style="width:70px"></label>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td><input type="text" class="form-control" name="c9"
                                                            id="c9" value="0" readonly />
                                                    </td>
                                                    <td><input type="text" class="form-control" name="c10"
                                                            id="c10" value="0" readonly />
                                                    </td>
                                                    <td><input type="text" class="form-control" name="c11"
                                                            id="c11" value="0" readonly />
                                                    </td>
                                                    <td><input type="text" class="form-control" name="c12"
                                                            id="c12" value="0" readonly />
                                                    </td>
                                                </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 name="boosterId" id="boosterId" class="browser-default custom-select"
                                        style="width:100%">
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                        <option value="6">6</option>
                                        <option value="7">7</option>
                                        <option value="8">8</option>
                                        <option value="9">9</option>
                                        <option value="10">10</option>
                                    </select>
                                </p>
                                <div class="mt-2 mb-3 d-flex">
                                    <input type="text" class="form-control mr-2" name="SelectedCard"
                                        id="SelectedCard" style="width:100px" readonly />
                                    <input type="hidden" class="form-control mr-2" name="SelectedCardNumber"
                                        id="SelectedCardNumber" style="width:100px" readonly />
                                    <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="tlb" id="resTab">
                                    <tr id="lastbet">
                                        @php $i = 0; @endphp
                                        @foreach ($results as $re)
                                            <td class="r_color_2"><img id="img"
                                                    src="{{ asset('img/cards2/' . $re['result'] . '.png') }}"
                                                    width="40px">
                                            </td>
                                            <td align="center" class="r_color_1"><strong
                                                    id="booster">{{ $re['x'] == '1' ? 'N' : $re['x'] . 'x' }}</strong>
                                            </td>
                                            @php $i= $i+1; @endphp
                                        @endforeach
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('plugin-scripts')
        {{-- <script>
            $(function() {
                $('#sidebar').removeClass('not-active');
                $('#sidebar').addClass('active');
                $('#sidebar-fold').addClass('sidebar-folded');
                // or $('#id_of_your_sidebar').show();
            });
        </script> --}}
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.js"></script>
    @endpush

    @push('custom-scripts')
        <script>
            var result = '';
            var gameid = '';
            var card = ["HJ", "SJ", "DJ", "CJ", "HQ", "SQ", "DQ", "CQ", "HK", "SK", "DK", "CK"];
            var gameres = [{
                "1": 0.0,
                "2": 0.0,
                "3": 0.0,
                "4": 0.0,
                "5": 0.0,
                "6": 0.0,
                "7": 0.0,
                "8": 0.0,
                "9": 0.0,
                "10": 0.0,
                "11": 0.0,
                "12": 0.0,
            }];
            var cardsNum = {
                "HJ": 1,
                "SJ": 2,
                "DJ": 3,
                "CJ": 4,
                "HQ": 5,
                "SQ": 6,
                "DQ": 7,
                "CQ": 8,
                "HK": 9,
                "SK": 10,
                "DK": 11,
                "CK": 12,
            };

            $('input[type="radio"]').on('click', function() {
                result = this.id;
                var key = cardsNum[result];
                var boosterIds = $('#boosterId').val();
                $('#SelectedCard').val(result);
                $('#check_' + result).attr("checked", "checked");
                $('#SelectedCardNumber').val(key);
                // $('#TCollection').html($('#c' + key).val());
                $('#totalPayment').html($('#c' + key).val() * 10 * boosterIds);
            });

            $('#boosterId').on('change', function() {
                var j = $('#SelectedCardNumber').val();
                $('#totalPayment').html($('#c' + j).val() * 10 * this.value);
            });

            $(function() {
                const socket = io.connect('ws://52.66.141.125:5000');
                socket.on('connect', function() {
                    // console.log(socket);
                    const user = {
                        adminId: "603388bb7d20e50a81217277",
                        gameName: "playSmart",
                    };
                    socket.emit('joinAdmin', user);

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

                    function removeAlert() {
                        setInterval(function() {
                            $('#alertId').removeClass('show');
                        }, 5000);
                    }
                    $('#btnSave').on('click', function() {
                        var boosterId = $('#boosterId').val();
                        var card = $('#SelectedCardNumber').val();
                        cardNumber = parseInt(card);
                        y = parseInt(boosterId);
                        if (cardNumber != "" && y != "") {
                            $('#alertId').addClass('show');
                            $('#alertId').html("Success");
                            removeAlert();
                            // console.log({ cardNumber, y, gameName });
                            socket.emit('winByAdmin', {
                                cardNumber,
                                y,
                                gameName
                            });
                        }
                    });
                    socket.on('resAdmin', (res) => {
                        // console.log(res);
                        if (res.gameName == "playSmart") {
                            console.log(res)
                            if (res.time >= 0) {
                                var seconds = parseInt(Math.abs(res.time) - 95);
                                seconds = Math.abs(seconds);
                                var countdownTimer = setInterval(function() {
                                    if (seconds <= 0) {
                                        window.location.reload();
                                        gameres.forEach(function(item) {
                                            Object.keys(item).forEach(function(key) {
                                                $('#c' + key).val(0);
                                                $('#c' + key).css(
                                                    "background-color",
                                                    "transparent");
                                            });
                                        });
                                        $('input[type="radio"]').prop("checked", false);
                                        $('#alertId').removeClass('show');
                                        $('#SelectedCard').val('');
                                        $('#SelectedCardNumber').val('');
                                        $('#TCollection').html('');
                                        $('#totalPayment').html('');
                                        clearInterval(countdownTimer);
                                        window.location.reload();
                                    }
                                    document.getElementById('countdown').innerHTML = seconds;
                                    seconds -= 1;
                                }, 1000);

                                function checkTime(i) {
                                    if (i < 10) {
                                        i = "0" + i
                                    }; // add zero in front of numbers < 10
                                    return i;
                                }
                            }

                            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) => "-");
                            }

                            // 
                            // console.log(res.dataAdmin)
                            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));
                                }
                            }

                            for (let i = 0; i < res.numbers.length; i++) {
                                var url = "http://65.0.108.235/public/img/cards2/" + res.numbers[i] +
                                    '.png';
                                $("#img" + i).attr("src", url);
                                var booster;
                                let total;
                                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 / 10;
                                    total += $q;
                                    $("#c" + key).val($q.toFixed(2));
                                    if ($('#c' + key).val() > 0) {
                                        $('#c' + key).css("background-color", "#FFA07A");
                                    } else {
                                        $('#c' + key).css("background-color", "transparent");
                                    }
                                });
                                $('#TCollection').html(Object.values(res.data).reduce((acc, current) =>
                                    acc + current, 0) / 10);
                            }
                        }
                    });

                    socket.on('resAdminBetData', (res) => {
                        console.log(res.data);
                        if (res.gameName == "playSmart") {
                            $.each(res.data, function(key, value) {
                                $q = value / 10;
                                $("#c" + key).val($q.toFixed(2));
                                if ($('#c' + key).val() > 0) {
                                    $('#c' + key).css("background-color", "#FFA07A");
                                } else {
                                    $('#c' + key).css("background-color", "transparent");
                                }
                            });
                            $('#TCollection').html(Object.values(res.data).reduce((acc, current) =>
                                acc + current, 0) / 10);
                        }
                    });
                });
            });
        </script>
    @endpush
@endsection