@extends('layouts.app')

@section('content')
{{--*/ usort($tableGrid, "SiteHelpers::_sort") /*--}}
<div class="page-titles">
  <h2> {{ $pageTitle }} <small> {{ $pageNote }} </small></h2>
</div>
<div  class="card">
	<div class="card-body">
		<div class="toolbar-nav">			
			<div class="row mb-3">
				<div class="col-md-4 ">
					<div class="input-group text-left">

								<input type="date" class="form-sm-control " name="filter_date" value="{{ date('Y-m-d') }}">
								<button type="button" class="btn btn-xs btn-primary ms-2" id="filterButton">
									<i class="fa fa-filter"></i> Filter
								</button>
							
					</div>  
					    
				</div>
				<div class="col-md-8 text-right"> 	
						<div class="input-group " style="display: block;">
								<a href="{{ url('kuotabbm/create') }}" class="tips btn btn-info btn-sm " title="Create" onclick="SximoModal(this.href,'Create Detail'); return false; ">
								<i class="fa fa-plus  "></i> Tambah Kuota</a>
							</div>
				</div>
				    
			</div>
		<div >

	


		 <div class="table-responsive" style="min-height:300px;">
	    
		<input type="hidden" name="md" value="" />
		</div>
		
		
		@include('footer')

		<script>
		$(document).ready(function() {
			$('#filterButton').on('click', function() {
				fetchTableData();
			});
			// Initial fetch
			fetchTableData();
		});

		function fetchTableData() {
				var selectedDate = $('input[name="filter_date"]').val();
				$.ajax({
					url: '{{ url("saldokuotabbm/showtables") }}',
					type: 'GET',
					data: { filter_date: selectedDate },
					success: function(response) {
						$('.table-responsive').html(response);
					},
					error: function() {
						alert('Error fetching data. Please try again.');
					}
				});
			}
			
		</script>

	</div>  
</div>
@stop