@extends('main.layouts.app')
@section('content')
{{-- <link rel="stylesheet" href="{{ asset('assets/css/game.css') }}"> --}}
    <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;
        }

        @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;
            }

        }
    </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>
                                        Result
                                    </h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="section-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card-statistic-1">
                           
              
                            <div class="container mt-5">
                                <div class="row ">
                                    <div class="col-md-6">
                                          <div class="white_shd full margin_bottom_30 card" >
                                              <div class="full graph_head">
                                                  <div class="heading1 margin_0 d-flex">
                                                  <h2 class="p-3">Results</h2>  
                                                      <div class="row" style=" padding-left:30px;" id="gmsno"> </div>    
                                                  </div>
                                              </div>

                                              <div class="card">

                                              </div>
                                              <div class="container">
                                                  <form action="{{route('aviator.store')}}" enctype="multipart/form-data" method="post">
                                                      @csrf
                                                  <div class="row">
                                                      <div class="col-md-5">
                                                              <div class="form-group">                                         
                                                                  <label for="parsantage">Game period</label>
                                                                  <input type="hidden" name="game_id"  value="{{$game_id}}">
                                                                  {{-- <input type="number" class="form-control"  name="game_sr_num"  value="{{$results->game_sr_num + 2}}"> --}}
                                                                  <input type="number" class="form-control"  name="game_sr_num"  value="7">
                                                              </div>
                                                          </div>
                                                          <div class="col-md-4">
                                                              <div class="form-group">                                         
                                                                  <label for="multiplier">Multiplier</label>
                                                                  <input type="number" step="any" class="form-control" name="multiplier">
                                                              </div>
                                                          </div>
                                                      <div class="col-md-3" style="margin-top:28px;">
                                                              <div class="form-group">                                         
                                                                  <label for="parsantage"></label>
                                                                  <button type="submit" name="submit" class="btn btn-primary btn-sm">submit</button>
                                                              </div>
                                                          </div>
                                                  </div>
                                                          </form>

                                              <form action="{{ route('aviator_percentage.update')}}" enctype="multipart/form-data" method="post">
                                                  @csrf
                                                  <div class="row">
                                                  <div class="col-md-5">
                                                              <div class="form-group">                                         
                                                                  <label for="parsantage">Percentage %</label>
                                                                  <input type="hidden" name="game_id"  value="{{$game_id}}">
                                                                  {{-- <input type="number" step="any" class="form-control"  name="winning_percentage"  value="{{$results->winning_percentage}}"> --}}
                                                                  <input type="number" step="any" class="form-control"  name="winning_percentage"  value="65%">
                                                              </div>
                                                          </div>
                                                      <div class="col-md-3" style="margin-top:28px;">
                                                              <div class="form-group">                                         
                                                                  <label for="parsantage"></label>
                                                                  <button type="submit" name="submit" class="btn btn-primary btn-sm">submit</button>
                                                              </div>
                                                          </div>
                                                      <div class="col-md-2" style="margin-top:28px;">
                                                              <label for="parsantage"></label>
                                                              <a href=""><i class="fa fa-refresh" aria-hidden="true" style="font-size:30px;"></i></a>
                                                      </div>
                                                      <div class="col-md-2"></div>
                                                  </div>
                                                  </form> 
                                                  


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


                              <div class="container-fluid">
                                <div class="row">
                              <div class="col-md-12">
                                <div class="white_shd full margin_bottom_30 " >
                                <div class="card" style="padding:15px;">
                                    <div class="full graph_head">
                                        <div class="heading1 margin_0 d-flex">
                                           <h2>Aviator Result</h2>
                                        </div>
                                     </div>
                                     <div class="table_section padding_infor_info">
                                        <div class="table-responsive-sm">
                                           <table id="exam" class="table table-striped" style="width:100%">
                                              <thead class="thead-dark">
                                                 <tr>
                                                    <th>Id</th>
                                                    <th>Game Serial No</th>
                                                    <th>Result</th>
                                                    <th>Date</th>
                                                 </tr>
                                              </thead>
                                              <tbody>
                                                @foreach($aviator_res as $item)
                                                 <tr>
                                                    <td>{{$item->id}}</td>
                                                    <td>{{$item->game_sr_num}}</td>
                                                    <td>{{$item->number}}</td>
                                                    <td>{{$item->datetime}}</td>
                                                    
                                                 </tr>
                                                 @endforeach
                                              </tbody>
                                           </table>
                                            
                                            
                                            <nav aria-label="Page navigation example">
                                    <ul class="pagination justify-content-center">
                                        <li class="page-item {{ $aviator_res->onFirstPage() ? 'disabled' : '' }}">
                                            <a class="page-link" href="{{ $aviator_res->url(1) }}" aria-label="First">
                                                <span aria-hidden="true">&laquo;&laquo;</span>
                                            </a>
                                        </li>
                                        <li class="page-item {{ $aviator_res->onFirstPage() ? 'disabled' : '' }}">
                                            <a class="page-link" href="{{ $aviator_res->previousPageUrl() }}" aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                            </a>
                                        </li>
                                
                                        @php
                                            $half_total_links = floor(9 / 2);
                                            $from = $aviator_res->currentPage() - $half_total_links;
                                            $to = $aviator_res->currentPage() + $half_total_links;
                                
                                            if ($aviator_res->currentPage() < $half_total_links) {
                                                $to += $half_total_links - $aviator_res->currentPage();
                                            }
                                
                                            if ($aviator_res->lastPage() - $aviator_res->currentPage() < $half_total_links) {
                                                $from -= $half_total_links - ($aviator_res->lastPage() - $aviator_res->currentPage()) - 1;
                                            }
                                        @endphp
                                
                                        @for ($i = $from; $i <= $to; $i++)
                                            @if ($i > 0 && $i <= $aviator_res->lastPage())
                                                <li class="page-item {{ $aviator_res->currentPage() == $i ? 'active' : '' }}">
                                                    <a class="page-link" href="{{ $aviator_res->url($i) }}">{{ $i }}</a>
                                                </li>
                                            @endif
                                        @endfor
                                
                                        <li class="page-item {{ $aviator_res->hasMorePages() ? '' : 'disabled' }}">
                                            <a class="page-link" href="{{ $aviator_res->nextPageUrl() }}" aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                            </a>
                                        </li>
                                        <li class="page-item {{ $aviator_res->currentPage() == $aviator_res->lastPage() ? 'disabled' : '' }}">
                                            <a class="page-link" href="{{ $aviator_res->url($aviator_res->lastPage()) }}" aria-label="Last">
                                                <span aria-hidden="true">&raquo;&raquo;</span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                                        </div>
                                     </div>
                                </div>
                                  


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


                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div> <!-- page-wrapper -->


    {{-- <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> --}}
   <script>
    function fetchData() {
		
       
        var gameid = 5;
	  
        fetch('/aviator_fetchs/' + 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="card col-md-1 ml-3 mt-4 " style="background-color:#fff;">';
        amountdetailHTML += '<div class="card-body">';
        amountdetailHTML += '<b style="font-size: 10px; ">' + item.amount + '</b>';
        amountdetailHTML += ' </div>';
        amountdetailHTML += '</div>';
		gmsno ='<b style="font-size: 30px; ">Period No - ' + item.game_sr_num + '</b>';
		gmssno=item.game_sr_num;

    });

    $('#amounts-container').html(amountdetailHTML);
	 $('#gmsno').html(gmsno);
	    $('#gmsssno').html(gmssno);
}
    function updateGameId(gameid) {
        // 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); //NOTE: period is passed in milliseconds
</script>
@endsection