@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 >

	

		<div class="row">
				<div class="col-md-12">
                    <form class="form-inline d-flex flex-wrap align-items-end gap-3">
                        <input type="date" class="form-control mb-2" id="tanggal" name="tanggal" value="{{ request('tanggal') }}">


                        <select class="form-control mb-2" id="kebun" name="kebun">
                          =
                        </select>



                        <button type="button" id="send" class="btn btn-primary mb-2">Filter</button>
						<button type="button" id="downloadExcel" class="btn btn-success mb-2">Download Excel</button>
						
                    </form>
                </div>    
			</div>
		 <div class="table-responsive" id="gettable" style="min-height:300px;"></div>

		 <br><br>
		 <div class="row">
				<div class="col-md-12">
                    <form class="form-inline d-flex flex-wrap align-items-end gap-3">
                        <input type="date" class="form-control mb-2" id="tanggal2" name="tanggal2" value="{{ request('tanggal2') }}">


                        <select class="form-control mb-2" id="pg" name="pg">
                        
                        </select>



                        <button type="button" id="send2" class="btn btn-primary mb-2">Filter</button>
						<button type="button" id="downloadExcel2" class="btn btn-success mb-2">Download Excel</button>

                    </form>
                </div>    
			</div>
		 <div class="table-responsive" id="gettable2" style="min-height:300px;"></div>
		
		 <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

		<script>
        $(document).ready(function() {
			$("#kebun").jCombo("{!! url('dataprodisconsole/comboselect?filter=master_kebun:kode_kebun:nama_kebun') !!}",
			{  initial_text : 'Pilih Kebun' });
			$("#pg").jCombo("{!! url('dataprodisconsole/comboselect?filter=master_pg:kode_pg:nama_pg') !!}",
			{  initial_text : 'Pilih Pabrik Gula' });

			$('#downloadExcel').on('click', function() {
				var table = document.querySelector('#gettable table');
				if (!table) {
					alert('Tidak ada data untuk diunduh.');
					return;
				}
				var wb = XLSX.utils.table_to_book(table, {sheet:"Sheet1"});
				XLSX.writeFile(wb, 'data_kebun.xlsx');
			});

			$('#downloadExcel2').on('click', function() {
				var table = document.querySelector('#gettable2 table');
				if (!table) {
					alert('Tidak ada data untuk diunduh.');
					return;
				}
				var wb = XLSX.utils.table_to_book(table, {sheet:"Sheet1"});
				XLSX.writeFile(wb, 'data_kebun.xlsx');
			});

			function fetchTable() {
				var tanggal = $('#tanggal').val();
				var kebun = $('#kebun').val();

				// Show loading indicator
				$('#gettable').html('<div class="text-center py-4"><span class="spinner-border" role="status" aria-hidden="true"></span> Loading...</div>');

				$.ajax({
					url: '{{ url("rekaptimbsdkebunvspg/getTable") }}',
					type: 'GET',
					data: {
						tanggal: tanggal,
						kebun: kebun
					},
					headers: {
						'X-Requested-With': 'XMLHttpRequest'
					},
					success: function(html) {
						$('#gettable').html(html);
					}
				});
			}

			$('#send').on('click', function(e) {
				e.preventDefault();
				fetchTable();
			});

			function fetchTable2() {
				var tanggal = $('#tanggal2').val();
				var pg = $('#pg').val();

				// Show loading indicator
				$('#gettable2').html('<div class="text-center py-4"><span class="spinner-border" role="status" aria-hidden="true"></span> Loading...</div>');

				$.ajax({
					url: '{{ url("rekaptimbsdkebunvspg/getTable2") }}',
					type: 'GET',
					data: {
						tanggal2: tanggal,
						pg: pg
					},
					headers: {
						'X-Requested-With': 'XMLHttpRequest'
					},
					success: function(html) {
						$('#gettable2').html(html);
					}
				});
			}

			$('#send2').on('click', function(e) {
				e.preventDefault();
				fetchTable2();
			});

            // Optionally, fetch table on page load
            fetchTable();
			fetchTable2();
        });
        </script>
		@include('footer')
	</div>  
</div>
@stop