@include('theme_layout/header_test')
@include('theme_layout/nav_test')  
<style> 
.dblack{
    color: black;
}
.btn-group-lg>.btn, .btn-lg {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    line-height: 1.5;
    border-radius: 0.3rem;
}
</style>
<div class="app-main__outer">
 <div class="app-main__inner">
  <div class="app-inner-layout"> 
   <div class="app-page-title"> 
    <div class="page-title-wrapper">
     <div class="page-title-heading"> 
      <div class="dblack">Account Statement
      </div>
     </div>
    </div>
   
   	<div class="card-body"> 
    
        <div class="form-row"> 
          <div class="col-md-3">
 		  <div class="position-relative form-group">
		 	<label  class="font-weight-bold ml-2 dblack" for="statement_type" class="">Statement Type</label>
		  	<select  class="mb-2 form-control" name="statement_type" id="statement_type" required> 
			<option value="0"></option>   
			<option value="1">Show Cash Entry & Market Profit Loss</option>  
			<option value="2">Show Cash Entry</option>  
			<option value="3">Market Commision</option>  
			<option value="4">Session Profit & Loss</option>  
			<option value="5">Toss Profit & Loss</option>  
			<option value="6">Market Profit & Loss</option>   
			</select> 
	      </div>     <!--col-md-4-->
	      </div>     <!--position-relative form-group-->
          <div class="col-md-3">
 		  <div class="position-relative form-group">
		 	<label  class="font-weight-bold ml-2 dblack" for="select_match" class="">Select Match</label>
		  	<select  class="mb-2 form-control" name="select_match" id="select_match" required> 
			<option value="0">All</option>   
			<option value="1">Cricket</option>  
			<option value="2">Soccer</option>  
			<option value="3">Tennis</option>   
			</select> 
	      </div>     <!--col-md-4-->
	      </div>     <!--position-relative form-group-->


         <div class="col-md-3" id="myDatepicker4">
         <label for="" class="font-weight-bold mb-2 dblack"> From Date</label>
         <input type="date" class="form-control" name="fromdate" id="fromdate" value="2025-03-15" autocomplete="off">
         </div> 
         <div class="col-md-3" id="myDatepicker5">
         <label for="" class="font-weight-bold mb-2 dblack"> To Date</label>  
         <input type="date" class="form-control" name="todate"  id="todate"  value="2025-03-15" autocomplete="off">
         </div>	 
        </div>
        <div class="full-width-box text-center mt-3">
	          <div class="col-md-12 text-center"> 
		       <button id="submit" class="mt-3 btn btn-primary btn-lg">Search</button> 
		      </div>	
             </div>	
        </div>
     

    <div class="tab-pane active" role="tabpanel">
     <!-- <div class="card-body "> -->
      <div class="main-card mb-3 card "> 
       <div class="card-body ">
        <!-- <div class="tab-content">   -->
         <!-- <div class='panel panel-footer' style="overflow-x: auto; width: 100%;">
          <table style="width: 100%;" id="" class="table table-hover table-striped table-bordered" >
           <thead>
            <tr>
            <th class="text-justify text-left">S/N</th>
            <th class="text-justify text-left">Date</th>
            <th class="text-justify text-left">Type</th>
            <th class="text-justify text-left">Description</th>
            <th class="text-justify text-left">Credit</th> 
            <th class="text-justify text-left">Debit</th> 
            <th class="text-justify text-left">Balence</th>   
            </tr>
           </thead>
           <tbody> 
            <tr>
            <!--  @foreach($data as $datas) 
            <td class="text-justify text-left"> {{  }} </td> loop->iteration is using for sr no which is automatic increased with data
            <!-- <td class="text-justify text-left"> {{  }}  </td> 
            <td class="text-justify text-left"> {{  }}  </td>
            <td class="text-justify text-left"> {{  }}  </td>
            <td class="text-justify text-left"> {{  }} </td>
            <td class="text-justify text-left"> {{  }} </td>
            <td class="text-justify text-left"> {{  }}  </td> 
            </tr>
            @endforeach -->
           </tbody> 
          </table> 
         </div>    
           <form id="" class="" action="{{route('ac_statement_export')}}" method="post">
    {{ csrf_field() }}
     <input autocomplete="off" name="fromdate1" id="fromdate1" value="s" type="hidden">
      <input autocomplete="off" name="todate1" id="todate1" value="s" type="hidden"> 
       <input autocomplete="off" name="statement_type1" id="statement_type1" value="s" type="hidden"> 
         <input autocomplete="off" name="select_match1" id="select_match1" value="s" type="hidden">  
        <button  id="export" style="display:none;  float:right; margin: 8px 54px 14px 65px;"
		class="mt-3 btn btn-primary btn-lg" >Export XLS</button> 
        </form>   
         <div class="container" id="report_data">	
        </div>
        <!-- </div> -->
      <!-- </div> -->
     </div>
    </div>
   </div> 
</div> 
  </div>
</div>
 </div> 
@include('theme_layout/footer_test')
</div>

<script>
var jq = $.noConflict();  
   jq(document).ready(function(){
    $('#statement_type').change(function(){
        var st_type = jq('#statement_type').val();
        
    }); 
    $('#select_match').change(function(){
        var match_type = jq('#select_match').val();
         
    });
    var fromdate = jq('#fromdate').val();  
    var todate = jq('#todate').val();
      
   jq("#submit").click(function(){
    var fromdate = jq('#fromdate').val();
    var todate = jq('#todate').val(); 
    var st_type = jq('#statement_type').val();
    var match_type = jq('#select_match').val();

    jq('#fromdate1').val(fromdate);
    jq('#todate1').val(todate);
    jq('#statement_type1').val(st_type);
	jq('#select_match1').val(match_type); 
	     	  
//  alert(st_type); 
     get_list(st_type,match_type,fromdate,todate);
   });

function get_list(st_type,match_type,fromdate,todate){ 
        $.ajax({
            url: "{{ URL('get_filter_acst_list/') }}"+"/" +st_type+"/"+match_type+"/"+fromdate+"/"+todate,         
                type:"GET",
                success: function (responce) {  
                var data = jQuery.parseJSON(responce);
                $('#report_data').html(data.html);
                var  no_data= jq('#no_data').text();
                if(no_data)
                jq('#export').hide();   
                else
                jq('#export').show();	
                }
            }); 
        }
    });
</script>