@extends('new_layouts.app')
@section('content')
<style>
.custom-ordered-list li{
    cursor:pointer;
}
    .table-bordered > :not(caption) > * > *{
        BORDER: 1PX SOLID #d3a724;
        width: 45px;

    }
    input.amount-input:focus{
        border:0;
        outline:0;
    }
    .osahan-header{
        display:none!important;
    }
    .tab-fixed{
            position: fixed;
    background: #272727;
    width:65%;
    top: 0px;
        z-index: 99;
    }
  .custm-m ,  .custom-ordered-list{
            margin: 171px 0 63px 0;
    }
    @media (max-width:767px){
         .tab-fixed{
                 width: 100%;
    left: 0;}
    }
</style>

<div class="vh-100 my-auto overflow-auto body-fix-osahan-footer ">
    <div class="container">
        <div class="tabs">
            <div class="tab-fixed mb-5 ">
                <div class="d-flex p-3 align-items-center">
                    <a href="javascript: history.go(-1)" class="text-white icon back-arrow float-left">
            <img width="12" height="12" src="https://img.icons8.com/ios-filled/50/FFFFFF/back.png" alt="back"></a>
        <h5 class="text-center text-white w-100 p-2 m-0">Game</h5>
                </div>
                
            <ul class="d-flex justify-content-start  p-2 mt-2" id="tabs-nav">
                <li class=" list-l p-3"><a href="#tab1" class="text-white f-12 ">Jodi Game</a></li>
                {{-- <li class=" list-l p-3"><a href="#tab2" class="text-white f-12 ">Crossing Game</a></li> --}}
                <li class=" list-l p-3"><a href="#tab3" class="text-white f-12 ">Haroof Game</a></li>
            </ul> <!-- END tabs-nav -->
              <p class="text-center text-white f-10">Chose any number to place a point</p>
            </div>
            <div class="m-4 p-2"></div>
            <div id="tabs-content mt-5">
                <div id="tab1" class="tab-content">
                  <form id="jodiform" action="{{route('JodiGameStore')}}" method="post">
                    @csrf
                  
                    
                    
                      
                      <input type="hidden" name="game_id" value="{{$id}}">
                      <input type="hidden" name="type" value="jodi">
                    <ol class="custom-ordered-list d-flex justify-content-start flex-wrap text-white gap-3">
                      @for($i = 00;$i< 100;$i++)
                      @php
                        $len = strlen($i);
                      @endphp
                        <li class="" data-bs-toggle="modal" data-bs-target="#staticBackdrop{{$i}}" id="li_{{$i}}"> <p class="card rounded-2 p-0 m-0 amount" id="amountshow_{{$i}}"></p></li>
                        <div class="modal fade" id="staticBackdrop{{$i}}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel{{$i}}" aria-hidden="true">
                          <div class="modal-dialog modal-dialog-centered ">
                            <div class="modal-content bg-grey">
                              <div class="modal-header icn-cross ">
                             
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                              </div>
                              <div class="modal-body text-center">
                                              <input type="hidden" name="number[{{$i}}]" value="{{$i}}">
                                <h5 class="modal-title top-num text-center" id="staticBackdropLabel{{$i}}">{{ ($len == 1)? "0" : null }}{{$i}}</h5>
                              <p class="text-grey">Amount on selected number</p>
                                 <div class="" >
                                          
                                    <div class="input-group text-white py-1" id="exampleFormControlPassword{{$i}}">
                                     
                                       <input type="number" name="amount[{{$i}}]" id="amount_{{$i}}" required="" class="form-control number bg-transparent rounded-2 border px-1 py-2" pattern="\d{10}" placeholder="₹ "  value="">
                                    </div>
                                    <div class="text-danger"></div>
                                        </div>
                                <button type="button" onclick="jodiGame({{$i}});" id="save_{{$i}}" class="mt-2 mb-2 yellow-common-btn  text-white"> Save </button>
                                <p style="display: none !important" class="bg-white text-danger  f-14 mt-2 mb-2" id="removebet_{{$i}}" onclick="removeBetJodiGame({{$i}})">Remove this bet</p>
                              </div>
                             
                            </div>
                          </div>
                        </div> 
                        <!-- Modal -->
                        @endfor
                        <!-- Modal -->

                    </ol>
                    <div class="fixed-f">
                        <div class="bg-grey rounded-2 d-flex justify-content-between align-items-center p-1">
                            <p class="m-0 p-0 text-center">
                                Total Amount <br>
                               <span id="joditotalshow">₹ 0.00</span> 
                            </p>
                            <button type="button" onclick="jodiformsubmit();" class="yellow-common-btn text-white" style="padding: 4px 26px;width:fit-content;">Submit</button>
                        </div>
                    </div>
                    <input type="hidden" value="0" name="jodi_total" id="jodi_total">
                  </form>
                </div>
                <div id="tab2" class="tab-content custm-m">
                    <form action="{{route('CrossingGameStore')}}" class="mb-3" method="post">
                      @csrf
                      <input type="hidden" name="game_id" value="{{$id}}">
                      <input type="hidden" name="type" value="crossing">
                        <div class="mb-3">
                            <label for="exampleFormControlName" class="f f-10 orm-label mb-2 text-white">Crossing Numbers</label>
                            <div class="input-group  bg-grey rounded-3 py-1" id="exampleFormControlName">

                                <input type="number" max="100" class="form-control  rounded-0 border-0 px-0 bg-transparent" pattern="\d{10}" placeholder="00" aria-label="T₹ 00" aria-describedby="Crossing Numbers" name="crossing_numbers" id="crossing_numbers" required="">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="exampleFormControlName" class="f f-10 orm-label mb-2 text-white">Crossing into Rupees</label>
                            <div class="input-group  bg-grey rounded-3 py-1" id="exampleFormControlName">

                                <input type="number" class="form-control bg-grey rounded-0 border-0 px-0 bg-transparent" placeholder="₹" pattern="\d{10}" aria-label="Crossing into Rupees" aria-describedby="firstname" name="amount" required="">
                            </div>
                        </div>
                        <div class="d-flex mb-3">
                            <button type="button" onclick="crossingGame();" class="payamount btn yellow-common-btn text-dark sm-btn mt-1 m-auto d-block" >SAVE </button>

                        </div>
                        <input type="hidden" value="0" name="crossing_total" id="crossing_total">
                    </form>

                    <h6 class="text-center">Total Number Of Crossing</h6>
                    <div class="bg-grey p-2 rounded-2">
                        <div class="d-flex justify-content-between ">


                            <p>No.</p>
                            <p>Amount</p>
                            <hr>
                        </div>
                    </div>
                    <div class=" fixed-f">


                        <div class="bg-grey rounded-2 d-flex justify-content-between align-items-center p-1  ">
                            <p class="m-0 p-0 text-center">
                                Total Amount <br>
                                ₹ 0.00
                            </p>
                            <button type="button" class=" yellow-common-btn  text-white" style="padding: 4px 26px;  width: fit-content;" >Submit </button>
                        </div>
                    </div>
                </div>
                <div id="tab3" class="tab-content custm-m">
              <form action="{{route('haroopGameStore')}}" method="post">
                @csrf
<div class="row row-col-2 ">
  <input type="hidden" name="type" value="haroof">
  <input type="hidden" name="game_id" value="{{$id}}">

<div class="col">
    <table class="table  table-bordered text-center text-OFFwhite">
    <thead>
    <tr>
    <th scope="col" colspan="2">Andar</th>
    </tr>
     </thead>
  <tbody>
    <tr>
    <th scope="col">A0</th>
      <th scope="col"><input type="number" class="m-0 amount-input" placeholder="₹" pattern="\d{10}" id="number_a0" name="number[a0]"> </th>
     
    </tr>
    <tr>
    <th scope="col">A1</th>
      <th scope="col"><input type="number" class="m-0 amount-input" placeholder="₹" pattern="\d{10}" id="number_a1" name="number[a1]"> </th>
     
    </tr>
    <th scope="col">A2</th>
      <th scope="col"><input type="number" class="m-0 amount-input" placeholder="₹" pattern="\d{10}" id="number_a2" name="number[a2]"> </th>
     
    </tr>
    <th scope="col">A3</th>
      <th scope="col"><input type="number" class="m-0 amount-input" placeholder="₹" pattern="\d{10}" id="number_a3" name="number[a3]"> </th>
     
    </tr>
    <th scope="col">A4</th>
      <th scope="col"><input type="number" class="m-0 amount-input" placeholder="₹" pattern="\d{10}" id="number_a4" name="number[a4]"> </th>
     
    </tr>
    <th scope="col">A5</th>
      <th scope="col"><input type="number" class="m-0 amount-input" placeholder="₹" pattern="\d{10}" id="number_a5" name="number[a5]"></th>
     
    </tr>
    <th scope="col">A6</th>
      <th scope="col"><input type="number" class="m-0 amount-input" placeholder="₹" pattern="\d{10}" id="number_a6" name="number[a6]"></th>
     
    </tr>
    <th scope="col">A7</th>
      <th scope="col"><input type="number" class="m-0 amount-input" placeholder="₹" pattern="\d{10}" id="number_a7" name="number[a7]"></th>
     
    </tr>
    <th scope="col">A8</th>
      <th scope="col"><input type="number" class="m-0 amount-input" placeholder="₹" pattern="\d{10}" id="number_a8" name="number[a8]"></th>
     
    </tr>
    <th scope="col">A9</th>
      <th scope="col"><input type="number" class="m-0 amount-input" placeholder="₹" pattern="\d{10}" id="number_a9" name="number[a9]"></th>
     
    </tr>

  </tbody>
</table>
</div>
<div class="col"><table class=" table table-bordered text-center text-OFFwhite">
  <thead>
    <tr>
    <th scope="col" colspan="2">Bahar</th>
    
    </tr>
  </thead>
  <tbody>
    <tr>
    <th scope="col">B0</th>
      <th scope="col"><input type="number" class="m-0 amount-input" placeholder="₹" pattern="\d{10}"  id="number_b0" name="number[b0]"></th>
   
    </tr>
    <tr>
    <th scope="col">B1</th>
      <th scope="col"><input type="number" class="m-0 amount-input" placeholder="₹" pattern="\d{10}" id="number_b1" name="number[b1]"></th>
     
    </tr>
    <th scope="col">B2</th>
      <th scope="col"><input type="number" class="m-0 amount-input" placeholder="₹" pattern="\d{10}" id="number_b2" name="number[b2]"></th>
     <input type="hidden" name="harooftotal" id="harooftotal">
    </tr>
    <th scope="col">B3</th> 
      <th scope="col"><input type="number" class="m-0 amount-input" placeholder="₹" pattern="\d{10}" id="number_b3" name="number[b3]"></th>
     
    </tr>
    <th scope="col">B4</th>
      <th scope="col"><input type="number" class="m-0 amount-input" placeholder="₹" pattern="\d{10}" id="number_b4" name="number[b4]"></th>
     
    </tr>
    <th scope="col">B5</th>
      <th scope="col"><input type="number" name="number[b5]" class="m-0 amount-input" placeholder="₹" id="number_b5" pattern="\d{10}"></th>
     
    </tr>
    <th scope="col">B6</th>
      <th scope="col"><input type="number" name="number[b6]" class="m-0 amount-input" placeholder="₹" id="number_b6" pattern="\d{10}"></th>
     
    </tr>
    <th scope="col">B7</th>
      <th scope="col"><input type="number" class="m-0 amount-input" name="number[b7]" placeholder="₹" id="number_b7" pattern="\d{10}"></th>
     
    </tr>
    <th scope="col">B8</th>
      <th scope="col"><input type="number" class="m-0 amount-input" name="number[b8]" placeholder="₹" id="number_b8" pattern="\d{10}"></th>
     
    </tr>
    <th scope="col">B9</th>
      <th scope="col"><input type="number" class="m-0 amount-input" placeholder="₹" name="number[b9]" id="number_b9" pattern="\d{10}"></th>
     
    </tr>
  </tbody>
</table></div>
</div>

<button type="button" class="mt-2 mb-2 yellow-common-btn text-white" onclick="haroofGame();" class="text-dark">Save </button>
              
                    <div class=" fixed-f">
                        <div class="bg-grey rounded-2 d-flex justify-content-between align-items-center p-1  ">
                            <p class="m-0 p-0 text-center">
                                Total Amount <br>
                                <span id="haroof_total">₹ 0.00</span>
                            </p>
                            <button type="submit" class=" yellow-common-btn  text-white" style="padding: 4px 26px;  width: fit-content;"> Submit </button>
                        </div>
                    </div>
                  </form>
                </div>


            </div> <!-- END tabs-content -->
        </div> <!-- END tabs -->


        <script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>
        <script>
            // Show the first tab and hide the rest
            $('#tabs-nav li:first-child').addClass('active');
            $('.tab-content').hide();
            $('.tab-content:first').show();

            // Click function
            $('#tabs-nav li').click(function() {
                $('#tabs-nav li').removeClass('active');
                $(this).addClass('active');
                $('.tab-content').hide();

                var activeTab = $(this).find('a').attr('href');
                $(activeTab).fadeIn();
                return false;
            });

          </script>

          <script>
            function jodiGame(id){
             var numberval = $('#amount_'+id).val();
             var joditotal = $('#jodi_total').val();
             if(numberval != '' && numberval != null){
              var total = parseInt(joditotal)+parseInt(numberval);
              $('#amount_'+id).attr('readonly',true);
              $('#save_'+id).hide();
              $('#removebet_'+id).show();
              $('#jodi_total').val(total);
              $('#joditotalshow').text("₹"+total);
              $('#amountshow_'+id).html("₹"+numberval);
              $('#li_'+id).addClass('active');
              $("#staticBackdrop").modal('hide');
              $(".modal").removeClass("show");
              $(".modal-backdrop").removeClass("show");
              $(".modal-backdrop").css('display','none');
              $(".modal").css('display','none');

              
             }
            }


            function removeBetJodiGame(id){
              var numberval = $('#amount_'+id).val();
             var joditotal = $('#jodi_total').val();
             if(numberval != '' && numberval != null){
              var total = parseInt(joditotal)-parseInt(numberval);
              $('#amount_'+id).val(null);
              $('#amount_'+id).attr('readonly',false);
              $('#save_'+id).show();
              $('#removebet_'+id).hide();
              $('#jodi_total').val(total);
              $('#joditotalshow').text("₹"+total);
              $('#amountshow_'+id).html(null);
              $('#li_'+id).removeClass('active');
              $("#staticBackdrop").modal('hide');
             }
            }

            function jodiformsubmit(){
              $('#jodiform').submit();
            }


            function crossingGame(){
                 
              var number = $('#crossing_numbers').val();
             var arrayno = Array.from(number);
             var count = {};
             
             
             arrayno.forEach(function(i) { count[i] = (count[i]||0) + 1;});
              // count.forEach(function(x){
              // });
            
              console.log(count[0]);
              for(var x =0;x < arrayno.length;x++){
                alert(count[x]);
                if(count[x] > 2 ){
                  createAlert('Opps!','Please enter different digit',null,'danger',true,true,'pageMessages');
                  return false;
              }
            }

            }



            function haroofGame(){
              
              var total = 0;
            for(var i = 0;i <10;i++){
              var anum = $('#number_a'+i).val();
              var bnum = $('#number_b'+i).val();
              // alert(anum)
              if(anum != '' && anum != null){
                total += parseInt(anum);
              }
              if(bnum != '' && bnum != null){
                total += parseInt(bnum);
              }
            }
            $('#haroof_total').text("₹"+total)
            $('#harooftotal').val(total)
            }
          </script>



        
@endsection