@extends('gameloby.layouts.main')
@section('content')
    <main>
        <div class="container">
            <div class="global-title global-title-black">
                <div class="icon-market-game" data-bs-toggle="dropdown">
                    <img src="{{ $result->logo }}" class="active-img-bounce">
                    <h4 class="ml-2">{{ $result->title }}</h4>
                </div>

                <div class="dropdown-menu dropdown-menu-market">
                    <div class="market-draw">
                        <div class="market-draw__list">
                            <div class="row justify-content-center">

                                @foreach (togels() as $det)
                                    <div class="col-lg-2 col-md-3 col-4 px-2">
                                        <div class="market-draw-item">
                                            <img src="{{ $det->logo }}">
                                            <span class="d-block font-weight-bold market-name">{{ $det->title }}</span>
                                            <a href="{{ route('games.play', $det->slug) }}">
                                                <button type="button" class="custom-btn color-secondary custom-sm"><i
                                                        class="fa fa-play-circle"></i><span trs="play">Main
                                                        Game</span></button>
                                            </a>
                                        </div>
                                    </div>
                                @endforeach


                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="market-timer">
                <div class="market-timer__counter">
                    <div class="counter-result">
                        <div class="row d-flex text-start">
                            <div class="fs-p8r fw-bolder" trs="lastResultLive">Keluaran Terakhir</div>

                            <div class="col-sm order-1">
                                <div class="result-title">1st</div>
                                <h1>{{ $result->keluaran }}</h1>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <div class="custom-breadcrumb" aria-label="breadcrumb">
                <div class="dropdown dropdown-info-all new-grid-test">

                    <div class="dropdown-info-all-box" data-bs-toggle="dropdown"><i
                            class="fa fa-question-circle me-1"></i><span trs="marketInfo">Info Pasaran</span></div>
                    <div class="dropdown-menu dropdown-menu-info">
                        <div class="market-timer__container">
                            <div class="market-timer-content">
                                <div class="info-list">
                                    <div class="item">
                                        <div class="title" trs="undian">Jam Undian</div>
                                        <div class="subtitle">: {{ $result->buka }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="dropdown-info-all-box" data-bs-toggle="dropdown"><i class="fa fa-question-circle"></i><span
                            trs="gamesInfo">Info Permainan</span></div>
                    <div class="dropdown-menu dropdown-menu-info">
                        <div class="custom-table">
                            <div class="custom-table__header" trs="gamesInfo">Info Permainan</div>
                            <table id="table_game_terms" class="stripe cell-border dataTable custom-table-game-info"
                                cellspacing="0" width="100%" data-level="1" data-role="Digit" section="10791"
                                dt-c="1">
                                <thead>
                                    <tr>
                                        <th class="sorting sorting_asc" tabindex="0" aria-controls="table_game_terms"
                                            rowspan="1" colspan="1" style="width: 68px;" aria-sort="ascending"
                                            aria-label="Desc: activate to sort column descending">Desc</th>
                                        <th class="sorting" tabindex="0" aria-controls="table_game_terms" rowspan="1"
                                            colspan="1" style="width: 89px;"
                                            aria-label="4D: activate to sort column ascending">4D</th>
                                        <th class="sorting" tabindex="0" aria-controls="table_game_terms" rowspan="1"
                                            colspan="1" style="width: 99px;"
                                            aria-label="3D: activate to sort column ascending">3D</th>
                                        <th class="sorting" tabindex="0" aria-controls="table_game_terms" rowspan="1"
                                            colspan="1" style="width: 102px;"
                                            aria-label="2D: activate to sort column ascending">2D</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="odd">
                                        <td class="dtr-control sorting_1" tabindex="0">Diskon</td>
                                        <td>{{ general()->diskon4d }}%</td>
                                        <td>{{ general()->diskon3d }}%</td>
                                        <td>{{ general()->diskon2d }}%</td>
                                    </tr>
                                    <tr class="even">
                                        <td class="dtr-control sorting_1" tabindex="0">Kei</td>
                                        <td>-</td>
                                        <td>-</td>
                                        <td>-</td>
                                    </tr>
                                    <tr class="odd">
                                        <td class="dtr-control sorting_1" tabindex="0">Max Bet</td>
                                        <td>Rp&nbsp;200.000</td>
                                        <td>Rp&nbsp;1.000.000</td>
                                        <td>Rp&nbsp;5.000.000</td>
                                    </tr>
                                    <tr class="even">
                                        <td class="dtr-control sorting_1" tabindex="0">Min Bet</td>
                                        <td>Rp&nbsp;500</td>
                                        <td>Rp&nbsp;500</td>
                                        <td>Rp&nbsp;500</td>
                                    </tr>
                                    <tr class="odd">
                                        <td class="dtr-control sorting_1" tabindex="0">Prize</td>
                                        <td>{{ general()->prize4d }}x</td>
                                        <td>{{ general()->prize3d }}x</td>
                                        <td>{{ general()->prize2d }}x</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="global-bet">
                <div class="global-bet__header text-center" trs="betNumber">Pasang Nomor Anda</div>
                <div class="global-bet__body">
                    <div class="bet-title text-center">
                        <h6><span trs="game">Permainan</span>
                            Bbfs - {{ $result->title }} - <span trs="periode">Periode</span> {{ $result->periode }}
                        </h6>
                        <h6 trs="bbfs">Kombinasi Angka (2-5 digit)</h6>
                    </div>


                    <div class="bet-content d-flex align-items-center"><input type="number" id="game-digit-input"
                            class="bet-input-digit form-control" placeholder="xxxxx" maxlength="5" min=2></div>
                    <div class="bet-pouch">
                        <div class="row">
                            <div class="col">
                                <div class="bet-label text-center mt-2 mb-1"><span trs="nominal">Nominal</span> 4D</div>
                                <input type="number" id="amount-4d" class="bet-input-amount form-control" min=0
                                    trs="nominal">
                            </div>
                            <div class="col">
                                <div class="bet-label text-center mt-2 mb-1"><span trs="nominal">Nominal</span> 3D</div>
                                <input type="number" id="amount-3d" class="bet-input-amount form-control" min=0
                                    trs="nominal">
                            </div>
                            <div class="col">
                                <div class="bet-label text-center mt-2 mb-1"><span trs="nominal">Nominal</span> 2D</div>
                                <input type="number" id="amount-2d" class="bet-input-amount form-control" min=0
                                    trs="nominal">
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-center flex-wrap mt-3">
                        <button id="button-togel-add" class="custom-btn color-secondary"><i
                                class="fa fa-random"></i><span trs="generate">Generate</span></button>
                    </div>

                    <div id="example-table" class="my-5 d-none"></div>


                </div>
            </div>
            <div class="bet-button custom-table__action kirim-invoice-right">
                <!-- <button id="button-togel-add" class="custom-btn color-secondary"><i class="fa fa-plus-circle"></i><span trs="keranjang">Keranjang</span></button> -->
                <button id="button-submit" class="position-relative custom-btn color-primary btn-secondary d-none">
                    <i class="fa fa-check-circle"></i><span trs="invoiceConfirm">Konfirmasi Taruhan</span>
                    <!-- <div id="bet-line" class="badge bg-danger">0</div> -->
                </button>
            </div>

        </div>
    </main>
@endsection

@push('script')
    <script>
        var tabledata = [{
                bet: "4D",
                pasang: 4580,
                taruhan: 12,
                diskon: 1,
                bayar: 1
            },
            {
                bet: "4D",
                pasang: 0857,
                taruhan: 1,
                diskon: 2,
                bayar: 1
            },
            {
                bet: "3D",
                pasang: 085,
                taruhan: 42,
                diskon: 0,
                bayar: 1
            },
            {
                bet: "3D",
                pasang: 580,
                taruhan: 100,
                diskon: 1,
                bayar: 1
            },
            {
                bet: "2D",
                pasang: 29,
                taruhan: 16,
                diskon: 5,
                bayar: 1
            },
            {
                bet: "2D",
                pasang: 92,
                taruhan: 38,
                diskon: 4,
                bayar: 1
            },
        ];


        $(document).ready(function() {

            $('#game-digit-input').on('keyup', function(e) {
                var len = $(this).val().length;
                if (len == 2) {
                    $("#amount-4d").prop("disabled", true);
                    $("#amount-3d").prop("disabled", true);
                } else if (len == 3) {
                    $("#amount-4d").prop("disabled", true);
                    $("#amount-3d").prop("disabled", false);
                } else if (len >= 4) {
                    $("#amount-4d").prop("disabled", false);
                    $("#amount-3d").prop("disabled", false);
                }
            });

            $('#button-togel-add').on('click', function() {
                let bet = $('#game-digit-input').val()
                let len = $('#game-digit-input').val().length
                let amount4d = $('#amount-4d').val()
                let amount3d = $('#amount-3d').val()
                let amount2d = $('#amount-2d').val()


                if (bet == "") {
                    new Notify({
                        text: "Angka Taruhan Belum Diisi",
                        status: "error",
                        autoclose: true,
                        effect: "slide",
                    });
                } else if (len < 3) {
                    if (amount2d == "") {
                        new Notify({
                            text: "Nominal Taruhan Belum Diisi",
                            status: "error",
                            autoclose: true,
                            effect: "slide",
                        });
                    }
                } else if (len > 3) {
                    if (amount2d == "" && amount3d == "") {
                        new Notify({
                            text: "Nominal Taruhan Belum Diisi",
                            status: "error",
                            autoclose: true,
                            effect: "slide",
                        });
                    }
                } else if (amount2d == "" && amount3d == "" && amount4d == "") {
                    new Notify({
                        text: "Nominal Taruhan Belum Diisi",
                        status: "error",
                        autoclose: true,
                        effect: "slide",
                    });
                }

                if (500 > amount2d) {
                    new Notify({
                        text: "Min Nominal Taruhan 2D: Rp 500",
                        status: "error",
                        autoclose: true,
                        effect: "slide",
                    });
                } else if (500 > amount3d) {
                    new Notify({
                        text: "Min Nominal Taruhan 3D: Rp 500",
                        status: "error",
                        autoclose: true,
                        effect: "slide",
                    });
                } else if (500 > amount4d) {
                    new Notify({
                        text: "Min Nominal Taruhan 4D: Rp 500",
                        status: "error",
                        autoclose: true,
                        effect: "slide",
                    });
                }else {
                    document.getElementById("example-table").classList.remove("d-none");
                    document.getElementById("button-submit").classList.remove("d-none");
                }


                var table = new Tabulator("#example-table", {
                    layout: "fitColumns",
                    ajaxURL: "{{ url('GamesLobby/lottery/4d/generateBbfs') }}?provider={{ $result->title }}&periode={{ $result->periode }}&digit=" +
                        bet +
                        "&amount4d=" + amount4d + "&amount3d=" + amount3d + "&amount2d=" + amount2d,
                    ajaxContentType: "json",
                    progressiveRender: true,
                    progressiveRenderSize: 1e3,
                    progressiveRenderMargin: 1e3,
                    columnHeaderVertAlign: "middle",
                    columnDefaults: {
                        headerHozAlign: "center",
                        hozAlign: "center",
                        resizable: false,
                        headerSort: false,
                        headerWordWrap: true,
                    },
                    groupBy: "bet",
                    groupStartOpen: false,
                    groupToggleElement: "header",
                    groupClosedShowCalcs: true,
                    columns: [{
                            title: "Pasang",
                            field: "pasang"
                        },
                        {
                            title: "Jumlah Taruhan",
                            field: "taruhan"
                        },
                        {
                            title: "Diskon",
                            field: "diskon"
                        },
                        {
                            title: "Bayar",
                            field: "bayar",
                            bottomCalc: "sum",
                            bottomCalcFormatter: "money",
                            bottomCalcFormatterParams: {
                                thousand: ",",
                                symbol: "Rp"
                            }
                        },

                    ],
                });

            });

            $('#button-submit').on('click', function() {
                document.getElementById("button-submit").classList.add("d-none");
                let bet = $('#game-digit-input').val()
                let len = $('#game-digit-input').val().length
                let amount4d = $('#amount-4d').val()
                let amount3d = $('#amount-3d').val()
                let amount2d = $('#amount-2d').val()

                $.ajax({
                    url: "{{ route('games.taruhan.bbfs') }}",
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        bet: bet,
                        type: "BBFS",
                        market: "{{ $result->title }}",
                        periode: "{{ $result->periode }}",
                    },
                    success: function(data) {
                        let msg = '';
                        new Notify({
                            text: data.message,
                            status: data.title,
                            autoclose: true,
                            effect: "slide",
                        });

                        if (msg == '') {
                            setTimeout(function() {
                                location.reload();
                            }, 1500);
                        }
                    },
                    error: function(data) {
                        let msg = '';
                        new Notify({
                            text: "Mohon maaf atas ketidaknyamanannya, halaman ini akan dimuat ulang dalam 5 detik",
                            status: "error",
                            autoclose: true,
                            effect: "slide",
                        });
                        if (msg == '') {
                            setTimeout(function() {
                                location.reload();
                            }, 3000);
                        }
                    },
                });
            });
        });
    </script>
@endpush