@include('theme_layout/header_test')
@include('theme_layout/nav_test')  
 <style>
   table{
  min-width: max-content;
}
input[type="radio"]{
   appearance: none;
   border: 1px solid #d3d3d3;
   width: 15px;
   height: 15px;
   content: none;
   outline: none;
   margin: 0;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

input[type="radio"]:checked {
  appearance: none;
  outline: none;
  padding: 0;
  content: none;
  border: none;
  
}

input[type="radio"]:checked::before{
  position: absolute;
  color: green !important;
  content: "\00A0\2713\00A0" !important;
  border: 1px solid #d3d3d3;
  font-weight: bolder;
  /* font-size: 21px; */
}
.btn-group-lg>.btn, .btn-lg {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    line-height: 1.5;
    border-radius: 0.3rem;
}

/* checkbox to button */
#donate {
    margin:4px;
   
    float:left;
}

#donate label {
    float:left;
    width:70px;
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
       
}

#donate label span {
    text-align:center;
    font-size: 15px;
    padding:5px 0px;
    display:block;
}

#donate label input {
    position:absolute;
    top:-20px;
}

#donate input:checked + span {
    background-color:#404040;
    color:#F7F7F7;
}

 

#donate .blue {
    background-color:#337ab7;
    color:#333;
}
 
   </style>
 
<div class="app-main__outer">
 <div class="app-main__inner">
  <div class="app-inner-layout">
  <!-- <form method="get" action="{{route('view_match')}}"> -->
  <div id="donate">
    <label class="blue"><input type="radio" name="sel_game" id="sel_game" class="font-weight-bold ml-2 sel_game" value="1"><span>Cricket</span></label>
    <label class="blue"><input type="radio" name="sel_game" id="sel_game" class="font-weight-bold ml-2 sel_game" value="2"><span>Soccer</span></label>
    <label class="blue"><input type="radio" name="sel_game" id="sel_game" class="font-weight-bold ml-2 sel_game" value="3"><span>Tennis</span></label> 
</div>
       <!-- <button  id="f1" value="1" class="mt-3  btn btn-primary btn-lg text-white"><i class="fa fa-ball fa-w-10"></i>Cricket</button> 
		   <button  id="f2" value="2" class="mt-3  btn btn-primary btn-lg text-white"><i class="fa fa-ball fa-w-10"></i>Soccer</button>
		   <button  id="f3" value="3" class="mt-3  btn btn-primary btn-lg text-white"><i class="fa fa-ball fa-w-10"></i>Tennis</button>  -->
       <br>
       <br>
       <input type="hidden" name="sel_gamee" id="sel_gamee" class="font-weight-bold ml-2 sel_gamee" value="">

   <div class="card-body ">
    <div class="main-card mb-2 card ">
     <div class="card-body ">
      
      <div class="card-body">
        <input type="radio" name="run_status" id="run_status" class="run_status" value="0"><label class="font-weight-bold ml-2"  class="">Running</label>  &nbsp;
        <input type="radio" name="run_status" id="run_status" class="run_status" value="1"><label class="font-weight-bold ml-2"  class="">Suspended</label> &nbsp;
        <input type="radio" name="run_status" id="run_status" class="run_status" value="2"><label class="font-weight-bold ml-2"  class="">Completed</label> &nbsp;
		    <!-- <button  id="submit"  class="mt-3  btn btn-primary btn-lg text-white"><i class="fa fa-ball fa-w-10"></i>Filter</button>  -->
<!-- </form> -->
        <br>
      </div>
      
      <div class="tab-content form1" id="form1" style="display: none">
      <!-- <h5 >Cricket</h5> -->
       <div class="tab-pane active" role="tabpanel">
        <div class="panel panel-footer" style="overflow-x: auto; width: 100%;">
        <table style="width: 100%;"  class="table table-hover table-striped table-bordered">
         <thead>
          <tr>       
            <th style='min-width:150px;' class="text-justify text-left">Id</th>
            <th style='min-width:150px;' class="text-justify text-left">Match</th>
            <th style='min-width:150px;' class="text-justify text-left">Date</th> 
            <th style='min-width:150px;' class="text-justify text-left">inPlay?</th>
            <th style='min-width:150px;' class="text-justify text-left">Match</th>
            <th style='min-width:150px;' class="text-justify text-left">Fancy</th> 
            <th style='min-width:150px;' class="text-justify text-left">Winner</th> 
            <th style='min-width:150px;' class="text-justify text-left">Transfer</th>
            <th style='min-width:150px;' class="text-justify text-left">Match Book</th> 
            <th style='min-width:150px;' class="text-justify text-left">Bet</th> 
            <th style='min-width:150px;' class="text-justify text-left">Delete Bet</th>  
            <th style='min-width:150px;' class="text-justify text-left">MDelay </th> 
            <th style='min-width:150px;' class="text-justify text-left">SDelay </th> 
            <th style='min-width:150px;' class="text-justify text-left">Channel </th>  
            <th style='min-width:50px;' class="text-justify text-left">Edit/Update</th>  
          </tr>
         </thead>
         <tbody id="data_cri">
            <!-- @foreach($get_data_cricket as $datas)
            <tr>
            <td class="text-justify text-left">{{$datas->gameId}}   </td> 
            <td class="text-justify text-left">{{$datas->eventName}}   </td> 
            <td class="text-justify text-left">{{$datas->gameId}}   </td> 
            <td class="text-justify text-left">{{$datas->inPlay}}   </td> 
            <td class="text-justify text-left">{{$datas->gameId}}   </td> 

            <td class="text-justify text-left">{{$datas->gameId}}   </td> 
            <td class="text-justify text-left"><a href=" " class=" btn btn-success text-white"> inplay <i class="fa fa-success fa-w-10"></i> </a>  </td> 
            <td class="text-justify text-left"> <a href="'view_to_open/'.$datas->gameId" class=" btn btn-success text-white"> open <i class="fa fa-success fa-w-10"></i> </a> </td> 
            <td class="text-justify text-left"><a href=" " class=" btn btn-success text-white"> open  <i class="fa fa-success fa-w-10"></i> </a>  <br>  
                                               <a href=" " class=" btn btn-primary text-white"> fancy list <i class="fa fa-success fa-w-10"></i>  </a>  </td> 
            <td class="text-justify text-left"> Running  </td>
            <td class="text-justify text-left"> {{$datas->gameId}}  </td> 
            <td class="text-justify text-left"> {{$datas->gameId}}   </td>
            <td class="text-justify text-left"> {{$datas->gameId}}  </td>
            <td class="text-justify text-left"> {{$datas->gameId}}   </td>
            <td class="text-justify text-left"> {{$datas->gameId}}  </td> -->
            <!-- <td class="text-justify text-left">  
            <a href="delete_match_view/{{$datas->id}}" class="mt-1  btn btn-danger  text-white"> 
            <i class="fa fa-trash fa-w-10"></i> </a>    
            </td>  -->
            <!-- </tr>
            @endforeach   -->
         </tbody> 
        </table>  
        </div>   
       </div> 
      </div>
      <div class="tab-content form2" id="form2" style="display: none">
      <h5>Soccer</h5>
       <div class="tab-pane active" role="tabpanel">
        <div class="panel panel-footer" style="overflow-x: auto; width: 100%;">
        <table style="width: 100%;"  class="table table-hover table-striped table-bordered">
         <thead>
          <tr>       
          <th style='min-width:150px;' class="text-justify text-left">Id</th>
            <th style='min-width:150px;' class="text-justify text-left">Match</th>
            <th style='min-width:150px;' class="text-justify text-left">Date</th> 
            <th style='min-width:150px;' class="text-justify text-left">inPlay?</th>
            <th style='min-width:150px;' class="text-justify text-left">Match</th>
            <th style='min-width:150px;' class="text-justify text-left">Fancy</th> 
            <th style='min-width:150px;' class="text-justify text-left">Winner</th> 
            <th style='min-width:150px;' class="text-justify text-left">Transfer</th>
            <th style='min-width:150px;' class="text-justify text-left">Match Book</th> 
            <th style='min-width:150px;' class="text-justify text-left">Bet</th> 
            <th style='min-width:150px;' class="text-justify text-left">Delete Bet</th>  
            <th style='min-width:150px;' class="text-justify text-left">MDelay </th> 
            <th style='min-width:150px;' class="text-justify text-left">SDelay </th> 
            <th style='min-width:150px;' class="text-justify text-left">Channel </th>  
            <!-- <th style='min-width:50px;' class="text-justify text-left">Action</th>       -->
          </tr>
         </thead>
         <tbody id="data_socc">
             
         </tbody> 
        </table>  
       
        </div>   
       </div> 
      </div>
      <div class="tab-content form3" id="form3" style="display: none">
      <h5>Tennis</h5>
       <div class="tab-pane active" role="tabpanel">
        <div class="panel panel-footer" style="overflow-x: auto; width: 100%;">
        <table style="width: 100%;"  class="table table-hover table-striped table-bordered">
         <thead>
          <tr>       
          <th style='min-width:150px;' class="text-justify text-left">Id</th>
            <th style='min-width:150px;' class="text-justify text-left">Match</th>
            <th style='min-width:150px;' class="text-justify text-left">Date</th> 
            <th style='min-width:150px;' class="text-justify text-left">inPlay?</th>
            <th style='min-width:150px;' class="text-justify text-left">Match</th>
            <th style='min-width:150px;' class="text-justify text-left">Fancy</th> 
            <th style='min-width:150px;' class="text-justify text-left">Winner</th> 
            <th style='min-width:150px;' class="text-justify text-left">Transfer</th>
            <th style='min-width:150px;' class="text-justify text-left">Match Book</th> 
            <th style='min-width:150px;' class="text-justify text-left">Bet</th> 
            <th style='min-width:150px;' class="text-justify text-left">Delete Bet</th>  
            <th style='min-width:150px;' class="text-justify text-left">MDelay </th> 
            <th style='min-width:150px;' class="text-justify text-left">SDelay </th> 
            <th style='min-width:150px;' class="text-justify text-left">Channel </th>  
            <!-- <th style='min-width:50px;' class="text-justify text-left">Action</th>   -->
          </tr>
         </thead>
         <tbody id="data_ten">
             
         </tbody> 
        </table>  
        </div>   
       </div> 
      </div>
     </div> 
    </div> 
   </div> 
  </div>
 </div>        
 @include('theme_layout/footer_test') 
</div> 
<script>
 

$("#f1").click(function(){
 
 $(".form1").show();
 
 $(".form2").hide();
 $(".form3").hide(); 
});
$("#f2").click(function(){
 
 $(".form1").hide();
 $(".form2").show();
 $(".form3").hide(); 
});
$("#f3").click(function(){
 
 $(".form1").hide();
 $(".form2").hide();
 $(".form3").show(); 
});


var level =1;
var status=0; 
 
// get_username(user_id,user_name);

// function get_username(user_id,user_name)
//      { 
		 $.ajax({ 
		      url: "{{ URL('default_list_in_view_match') }}" +"/" + level+"/" + status,
              type:"GET", 
          success:function(respons) 
		  {
			  if(respons)
			{ 
 $(".form1").show();

$('input:radio[name="sel_game"]').filter('[value="1"]').attr('checked', true);
$('input:radio[name="run_status"]').filter('[value="0"]').attr('checked', true);


				$('#data_cri').html(respons);  
               	  
			} 
          }
       });
    //  } 


 


jQuery(document).ready(function($) {
 
    $(".sel_game").on('change', function() {
        var level = $(this).val();
        var status=0;   


        $.ajax({ 
		      url: "{{ URL('default_list_in_view_match') }}" +"/" + level+"/" + status,
              type:"GET", 
          success:function(respons) 
		  {
			  if(respons)
			{ 
 
        $('input:radio[name="sel_game"]').filter('[value="'+ level +'"]').attr('checked', true);
        $('input:radio[name="run_status"]').filter('[value="0"]').attr('checked', true);  
        
        // if(level==3){
				// $('#data_ten').html(respons);  
        // }else if(level==2){
				// $('#data_socc').html(respons);  
        // }else{
          $('#data_cri').html(respons); 
        // }
        $('.sel_gamee').val(level);
			} 
          }
       });
    });

    $(".run_status").on('change', function() {
        var level = $(".sel_gamee").val();
        
        var status=$(this).val();
  
        $.ajax({ 
		      url: "{{ URL('default_list_in_view_match') }}" +"/" + level+"/" + status,
              type:"GET",  
          success:function(respons) 
		  {
			  if(respons)
			{ 

        $('input:radio[name="sel_game"]').filter('[value="'+ level +'"]').attr('checked', true);
        $('input:radio[name="run_status"]').filter('[value="'+ status +'"]').attr('checked', true);
        // if(level==3){
				// $('#data_ten').html(respons);  
        // }
        // else if(level==2){
				// $('#data_socc').html(respons);  
        // }else{
          $('#data_cri').html(respons); 
        // } 
               	  
			} 
          }
       });
    });
});





// var jq = $.noConflict(); 
 
// jq(".run_status").on('click', function () {
// 	  var valuee = jq(this).val();
     
// 		 jq.ajax({
// 		      url: "{{ URL('list_by_radio_selection/') }}" +"/" + valuee,
//               type:"GET", 
//           success:function(respons)
//           { 
//             jq('#data_cri').html(respons); 
//           }
//        });
    
//     });

     
      </script>