@extends('main.layouts.app')
@section('content')
    <style>
        body,
        html {
            min-height: 100%;
            overflow-x: hidden;
        }

        .date h3 {
            font-size: 11px;
            line-height: 11px;
            color: #1f365c;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .date span {
            font-size: 10px;
        }


        .section .section-header {
            flex-wrap: wrap;
            margin-bottom: 20px !important;
        }


        .br-20 {
            border-radius: 20px;
        }

        .align-middle {
            vertical-align: middle;
        }

        .color_box {
            width: 10%;
            margin: 1px;
            display: flex;
            flex-direction: column;
        }

        .bet_20 {
            width: 20%;
        }

        div.clock {
            font-size: 26px;
            line-height: 28px;
            color: #1f365c;
            padding-right: 0px;
            margin-bottom: 0;
            font-weight: bold;
        }

        .autopull-header h5 {
            font-size: 16px;
            line-height: 28px;
            color: #1f365c;
            padding-right: 0px;
            margin-bottom: 0;
        }

        .autopull-header h3 {
            font-size: 26px;
            line-height: 28px;
            color: #1f365c;
            padding-right: 0px;
            margin-bottom: 0;
            font-weight: bold;
        }



        .card .card-header {
            width: 100%;
            min-height: 0px;
        }


        .card .card-header h4 {
            font-size: 16px;
            line-height: 28px;
            color: #1f365c;
            padding-right: 0px;
            margin-bottom: 0;
        }

        .bg_blue_color {
            border-radius: 20px !important;
            background-color: #0E194D !important;
        }

        .depo {
            font-size: 14px;
        }

        .dash-text {
            text-align: center;
        }

        .color_cover_box {
            display: flex;
        }

        .bet_head {
            font-size: 18px;
            font-weight: 800;
        }

        .cardcover_green .card-body{
            background-color:#008000;
        }

        .cardcover_darkgreen .card-body{
            background-image: linear-gradient(to right, green , purple);
        }

        .cardcover_red .card-body{
            background-image: linear-gradient(to right, red , purple);
        }

        .cardcover_darkred .card-body{
            background-color:#ff0000;
        }

        .cardcover_greenpurple .card-body{
            background-image: linear-gradient(to right, green , purple);
        }

        .cardcover_redpurple .card-body{
            background-image: linear-gradient(to right, red , purple);
        }

        .cardcover_yellowpurple .card-body{
            background-image: linear-gradient(to right, yellow , purple);
        }

        .br-10{
            border-radius:10px;
        }

        .card_bet .card-body{
            /* border:2px solid #f3f3f3; */
            border:2px solid #9d0000;
        }
        @media (max-width:767px) {
            .autopull-header h3 {
                font-size: 13px;
                line-height: 14px;
                color: #1f365c;
            }

            .depo {
                font-size: 15px;
            }

            .autopull-header h5 {
                font-size: 13px;
                line-height: 15px;
                color: #1f365c;
                padding-right: 0px;
                margin-bottom: 0;
            }

            .color_box {
                width: 32%;
                margin: 1px;
                display: inline-flex;
            }

            .color_cover_box {
                display: block;
            }
        }

        @media (max-width:540px) {
            .color_box {
                width: 48%;
                margin: 1px;
            }

        }

        /* new css */
        .graph_head {
            padding: 18px 25px 15px;
            float: left;
            width: 100%;
            border-bottom: solid #f3f3f3 2px;
        }

        .drag_pad {
            padding-top: 20px;
            padding-bottom: 20px;
            }

            .card.card_board.col-md-1.ml-3.mt-4 {
                padding: 10px;
                border: 2px solid #ffebeb;
                border-radius: 5px;
            }
    </style>

    <div class="main-content">
        <section class="section">
            <div class="section-header d-block bg_blue_color mb-0">
                <div class="row">
                    <div class="col-12">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <div class="dash-text">
                                    <h5 class="text-white depo mb-0">
                                        <a href="/admin/dashboard"><img src="/img/homepage.png" alt="image"> </a>
                                        Dragon
                                    </h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="section-body">
                <div class="container">

                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="" style="margin-bottom: 60px;">
                                <form action="{{ route('colour_prediction.store') }}" method="post">
                                    @csrf
                                    <input type="hidden" name="game_id" value="{{ $gameid }}">
                                    <input type="hidden" name="game_no" value="{{ $game_no->game_no }}">

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="white_shd full margin_bottom_30">
                                                <div class="full graph_head">
                                                    <div class="">
                                                        <div class="row"  id="gmsno"><b
                                                                style="font-size: 30px; ">Period No - {{$game_no->game_no}}</b>
                                                               
                                                                
                                                            </div>
                                                            <span class="balance-amount">
                                                            Wallet - ₹{{ number_format($adminData->admin_dragon_winning_wallet, 2) }}
                            </span>
                                                    </div>
                                                </div>

                                                <div class="container mb-4">

                                                    <div class="row" style="">
                                                        @foreach ($bets as $item)
                                                            @if ($gameid == 1 || $gameid == 2 || $gameid == 3 || $gameid == 4)
                                                                @if ($item->number == '1' || $item->number == '3' || $item->number == '7' || $item->number == '9')
                                                                    <div class=" col-md-1 mt-4 cardcover_green"
                                                                        style="height:60px;">
                                                                    @elseif($item->number == '5')
                                                                        <div class="col-md-1  mt-4 cardcover_darkgreen"
                                                                            style="">
                                                                        @elseif($item->number == '0')
                                                                            <div class=" col-md-1  mt-4 cardcover_red"
                                                                                style="">
                                                                            @else
                                                                                <div class=" col-md-1  mt-4 cardcover_darkred"
                                                                                    style="">
                                                                @endif
                                                            @else
                                                                @if ($item->number == '1')
                                                                    <div class=" col-md-4 mt-4 cardcover_redpurple"
                                                                        style="">
                                                                    @elseif($item->number == '2')
                                                                        <div class=" col-md-4  mt-4 cardcover_greenpurple"
                                                                            style="">
                                                                        @elseif($item->number == '3')
                                                                            <div class=" col-md-4  mt-4 cardcover_yellowpurple"
                                                                                style="">
                                                                            @else
                                                                                <div class=" col-md-4  mt-4 cardcover_darkred"
                                                                                    style="">
                                                                @endif
                                                            @endif
                                                                                                                        @if ($gameid == 10)
                                                                <div class="card-body text-center br-10">
                                                                    <b style="font-size: 20px; margin-left:12px; color: white;">
                                                                        @if ($item->number == 1)
                                                                            Dragan
                                                                    </b>
                                                                @elseif($item->number == 2)
                                                                    Tiger </b>
                                                                @elseif($item->number == 3)
                                                                    Tie</b>
                                                                @else
                                                                    {{ $item->number }}</b>
                                                            @endif
    
                                                    </div>
                                                @else
                                                    @endif
                                                </div>
                                                @endforeach
                                            </div>

                                                </div>


                                        <div class="container mb-4">
                                            <div class="row" style="padding-bottom:20px;" id="amounts-container">
                                            </div>
                                        </div>


                                        <div class="container mb-4">

                                            <div class="row d-flex" >
                                                <div class="col-md-3 form-group d-flex">
                                                    <input type="text" name="game_no" class="form-control"
                                                        placeholder="Period" value ="">
                                                </div>
    
                                                @if ($gameid == 1 || $gameid == 2 || $gameid == 3 || $gameid == 4)
                                                    <div class="col-md-3 form-group d-flex">
                                                        <input type="number" name="number" class="form-control" min="0"
                                                            max="9" placeholder="Result">
                                                    </div>
                                                @else
                                                    <div class="col-md-3 form-group d-flex">
                                                        <select type="number" name="number" class="form-control"
                                                            placeholder="Result">
                                                            <option value="1"><b>Dragan</b></option>
                                                            <option value="2"><b>Tiger</b></option>
                                                            <option value="3"><b>Tie</b></option>
                                                        </select>
                                                    </div>
                                                @endif
                                                <div class="col-md-2 form-group d-flex">
                                                    <button type="submit"
                                                        class="form-control btn btn-info"><b>Submit</b></button>
                                                </div>
                                                <div class="col-md-2 form-group d-flex mt-1">
                                                    <a href=""> <i class="fa fa-refresh" aria-hidden="true"
                                                            style="font-size:30px;"></i></a>
                                                </div>
                                            </div>

                                        </div>




                                        <form action="{{ route('percentage.update') }}" method="post">
                                            @csrf
                                            <div class="container">
                                                <div class="row" style="">
                                                    <div class="col-md-3 form-group d-flex align-items-center">
                                                        <input type="hidden" name="id" value="{{ $gameid }}">
                                                        <input type="text" name="parsantage"
                                                            value="{{ $bets[0]->parsantage ?? 0 }}" class="form-control"
                                                            placeholder="Percentage">
                                                        <span><b>%</b></span>
                                                    </div>
                                                    <div class="col-md-2 form-group">
                                                        <button type="submit"
                                                            class="form-control btn btn-info"><b>Submit</b></button>
                                                    </div>
                                                </div>
                                            </div>
         
                                        </form>
                                    </div>
                            </div>
                        </div>
                        </form>

                        {{-- <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> --}}
                        <script>
                            function fetchData() {
                                var gameid = {{ $gameid }};
                                fetch('/fetch/' + gameid)
                                    .then(response => response.json())
                                    .then(data => {
                                        console.log('Fetched data:', data);
                                        // Assuming data has 'bets' and 'gameid' properties
                                        updateBets(data.bets);
                                        updateGameId(data.gameid);
                                    })
                                    .catch(error => console.error('Error fetching data:', error));
                            }

                            function updateBets(bets) {
                                console.log('Updated Bets:', bets);
                                var amountdetailHTML = '';
                                var gmsno = '';
                                var gmssno = '';

                                bets.forEach(item => {
                                    amountdetailHTML += '<div class="col-md-4  mt-4 card_bet" style="background-color:#fff;">';
                                    amountdetailHTML += '<div class="card-body text-center">';
                                        if (item.number === 1) {
                                            amountdetailHTML += '<b style="">Dragon:</b>';
                                        } else if (item.number === 2) {
                                            amountdetailHTML += '<b style="">Tiger:</b>';
                                        } else if (item.number === 3) {
                                            amountdetailHTML += '<b style="">Tie:</b>';
                                        } else {
                                            amountdetailHTML += '<b style="">unknown</b>'; // Fallback for unexpected numbers
                                        }
                                    amountdetailHTML += '<b style="">' + item.amount + '</b>';
                                    amountdetailHTML += ' </div>';
                                    amountdetailHTML += '</div>';
                                    gmsno = '<b style="font-size: 30px; ">Period No - ' + item.game_no + '</b>';
                                    gmssno = item.game_no;

                                });

                                $('#amounts-container').html(amountdetailHTML);
                                $('#gmsno').html(gmsno);
                                $('#gmsssno').html(gmssno);
                            }

                            function updateGameId() {
                                // Replace the following line with your actual DOM update logic
                                // For example, you may update an element with id 'gameid'
                                // $('#gameid').html(...);

                                // For now, let's just log the gameid to the console
                                console.log('Updated Game ID:', gameid);
                            }

                            function refreshData() {
                                fetchData();
                                setInterval(fetchData, 5000); // 5000 milliseconds = 5 seconds
                            }

                            document.addEventListener('DOMContentLoaded', refreshData);
                        </script>
                        <script type="text/javascript">
                            setInterval(page_refresh, 1 * 60000);
                        </script>

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

    </div>
    </div>
</div>
    </section>
    </div>
@endsection