@include('theme_layout/header_test')
@include('theme_layout/nav_test')  
<style>
   table{
  min-width: max-content;
}
.center { text-align: center; }

.btn-group-lg>.btn, .btn-lg {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    line-height: 1.5;
    border-radius: 0.3rem;
}

.hide {
  display: none;
}
    
.myDIV:hover + .hide {
  display: block;
  color: red;
}
   </style>
 
<div class="app-main__outer">
<div class="app-main__inner">
<div class="app-inner-layout">
 
                      <button class="mt-3 btn btn-primary btn-lg submit" id="f1">cricket</button> &nbsp;
                      <button class="mt-3 btn btn-primary btn-lg submit" id="f2">soccer</button> &nbsp;
                      <button class="mt-3 btn btn-primary btn-lg submit" id="f3">tennis</button> &nbsp;
                           
						 <div class="card-body form1" id="" style="display: none">
						<div class="main-card mb-3 card ">
                        <div class="card-body " >
                        <div class="tab-content" >
                         <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">Match Name</th>
                             <th style='min-width:150px;' class="text-justify text-left">Team 1</th>
                             <th style='min-width:150px;' class="text-justify text-left">Team 2</th>
                             <th style='min-width:150px;' class="text-justify text-left">Match Type</th>
                             <th style='min-width:150px;' class="text-justify text-left">Live Score</th> 
						   </tr>
                        </thead>
                             <tbody id="list">
                             @foreach($cricket as $datas)  
                             @php $l_score = rand(0,300);   @endphp
                              <tr> 
                              <td class="text-justify text-left"> {{$datas->matchName}}   </td> 
                              <td class="text-justify text-left"> {{$datas->team1}}  </td>
                              <td class="text-justify text-left"> {{$datas->team2}}   </td>
                              <td class="text-justify text-left"> {{$datas->matchType}}  </td>
                              <td class="text-justify text-left"> {{$l_score}}   </td>  
                              </tr>
                              @endforeach
                            </tbody> 
                           </table> 

                           </div> 
                        </div> 
                    </div>
                </div> 
                </div> 
                </div> 
 
                <div class="card-body form2" id="" style="display: none">
						<div class="main-card mb-3 card ">
                        <div class="card-body " >
                        <div class="tab-content" >
                         <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">Match Name</th>
                             <th style='min-width:150px;' class="text-justify text-left">Open</th>
                             <th style='min-width:150px;' class="text-justify text-left">Close</th>
                             <th style='min-width:150px;' class="text-justify text-left">Status</th>
                             <th style='min-width:150px;' class="text-justify text-left">Match Book</th>
                             <th style='min-width:150px;' class="text-justify text-left">Coin Transfer</th> 
                             <th style='min-width:150px;' class="text-justify text-left">Is Battable</th> 

                             <th style='min-width:150px;' class="text-justify text-left">Match Type</th>
                             <th style='min-width:150px;' class="text-justify text-left">Venue</th>
                             <th style='min-width:150px;' class="text-justify text-left">Status</th> 
                             <th style='min-width:150px;' class="text-justify text-left">Team 1</th> 
                             <th style='min-width:150px;' class="text-justify text-left">Team 2</th>  
                             <th style='min-width:150px;' class="text-justify text-left"> Date time </th> 
                             <th style='min-width:50px;' class="text-justify text-left">Action</th> 

 
						                </tr>
                        </thead>
                             <tbody id="list">
                            
                            </tbody> 
                           </table> 

                           </div> 
                        </div> 
                    </div>
                </div> 
                </div> 
                </div> 
 
                <div class="card-body form3" id="" style="display: none">
						<div class="main-card mb-3 card ">
                        <div class="card-body " >
                        <div class="tab-content" >
                         <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">Match Name</th>
                             <th style='min-width:150px;' class="text-justify text-left">Open</th>
                             <th style='min-width:150px;' class="text-justify text-left">Close</th>
                             <th style='min-width:150px;' class="text-justify text-left">Status</th>
                             <th style='min-width:150px;' class="text-justify text-left">Match Book</th>
                             <th style='min-width:150px;' class="text-justify text-left">Coin Transfer</th> 
                             <th style='min-width:150px;' class="text-justify text-left">Is Battable</th> 

                             <th style='min-width:150px;' class="text-justify text-left">Match Type</th>
                             <th style='min-width:150px;' class="text-justify text-left">Venue</th>
                             <th style='min-width:150px;' class="text-justify text-left">Status</th> 
                             <th style='min-width:150px;' class="text-justify text-left">Team 1</th> 
                             <th style='min-width:150px;' class="text-justify text-left">Team 2</th>  
                             <th style='min-width:150px;' class="text-justify text-left"> Date time </th> 
                             <th style='min-width:50px;' class="text-justify text-left">Action</th> 

 
						                </tr>
                        </thead>
                             <tbody id="list">
                             
                            </tbody> 
                           </table> 

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




                </div>
                </div>
                
@include('theme_layout/footer_test') 
				</div> 
 
  
 
  <script>  
   var jq = $.noConflict();
   $(".form1").hide();

   $("#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(); 
  });
 
   function show_more_menu(client_id) {
	   
	   $('#match_id').val(client_id);  
	   jq.ajax({
			url: "{{ URL('get_team_transtoss/') }}"+"/" +client_id,     
			type:"GET",
			success:function(respons) 
			{ 
        // alert(respons);
		 if(respons)
		 {
      var json = JSON.parse(respons); 
     
      $("#select_team").empty(); 
      $("#select_team").append("<option>" + "Select Runner" + "</option>"); 
      $("#select_team").append("<option value='"  + json.teams1 + "'>" + json.teams1 + "</option>");
      $("#select_team").append("<option value='"+ json.teams2 +"'>" + json.teams2 + "</option>"); 

      $("#org_match_id").val(json.is_checked_id); 

       
		 } 
	   } 
	  });  
	 }
 
   
 
    </script>