@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">
                <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_awal" name="tanggal_awal" value="{{ request('tanggal_awal') }}">

                        <input type="date" class="form-control mb-2" id="tanggal_akhir" name="tanggal_akhir" value="{{ request('tanggal_akhir') }}">

                        <select class="form-control mb-2" id="cluster" name="cluster">
                            <option value="">-- Pilih Cluster --</option>
                            <option value="SUMATERA 1" {{ request('cluster') == 'SUMATERA 1' ? 'selected' : '' }}>SUMATERA 1</option>
                            <option value="SUMATERA 2" {{ request('cluster') == 'SUMATERA 2' ? 'selected' : '' }}>SUMATERA 2</option>
                            <option value="JATENG" {{ request('cluster') == 'JATENG' ? 'selected' : '' }}>JATENG</option>
                            <option value="JATIM 1" {{ request('cluster') == 'JATIM 1' ? 'selected' : '' }}>JATIM 1</option>
                            <option value="JATIM 2" {{ request('cluster') == 'JATIM 2' ? 'selected' : '' }}>JATIM 2</option>
                            <option value="SULAWESI" {{ request('cluster') == 'SULAWESI' ? 'selected' : '' }}>SULAWESI</option>
                        </select>

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

                        <select class="form-control mb-2" id="jenis_report" name="jenis_report">
                            <option value="">-- Pilih Jenis Report --</option>
                            <option value="ha" {{ request('jenis_report') == 'ha' ? 'selected' : '' }}>HA</option>
                            <option value="ton" {{ request('jenis_report') == 'ton' ? 'selected' : '' }}>TON</option>
                            <option value="protas" {{ request('jenis_report') == 'protas' ? 'selected' : '' }}>PROTAS</option>
                        </select>

                        <button type="submit" class="btn btn-primary mb-2">Filter</button>
                        <button type="button" class="btn btn-success mb-2" id="download-excel">Download Excel</button>
            
                    </form>
                </div>
			</div>
		<div >

	


		 <div class="table-responsive" style="min-height:300px;">
	    
		<input type="hidden" name="md" value="" />
		</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' });

              $('#download-excel').on('click', function(e) {
                                e.preventDefault();
                                var tanggal_awal = $('#tanggal_awal').val();
                                var tanggal_akhir = $('#tanggal_akhir').val();
                                var cluster = $('#cluster').val();
                                var kebun = $('#kebun').val();
                                var jenis_report = $('#jenis_report').val();

                                $.ajax({
                                    url: '{{ url("rekaptimbhariankebunspta/getTable") }}',
                                    type: 'GET',
                                    data: {
                                        tanggal_awal: tanggal_awal,
                                        tanggal_akhir: tanggal_akhir,
                                        cluster: cluster,
                                        kebun: kebun,
                                        jenis_report: jenis_report,
                                        download: 1 // optional, if you want to handle differently on backend
                                    },
                                    headers: {
                                        'X-Requested-With': 'XMLHttpRequest'
                                    },
                                    success: function(html) {
                                        // Create a temporary DOM to extract the table
                                        var tempDiv = $('<div>').html(html);
                                        var table = tempDiv.find('table').get(0);
                                        if(table) {
                                            var wb = XLSX.utils.table_to_book(table, {sheet:"Sheet1"});
                                            XLSX.writeFile(wb, 'rekap_timbangan.xlsx');
                                        } else {
                                            alert('Tabel tidak ditemukan untuk diunduh.');
                                        }
                                    }
                                });
                            });

            function fetchTable() {
                var tanggal_awal = $('#tanggal_awal').val();
                var tanggal_akhir = $('#tanggal_akhir').val();
                var cluster = $('#cluster').val();
                var kebun = $('#kebun').val();
                var jenis_report = $('#jenis_report').val();

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

                $.ajax({
                    url: '{{ url("rekaptimbhariankebunspta/getTable") }}',
                    type: 'GET',
                    data: {
                        tanggal_awal: tanggal_awal,
                        tanggal_akhir: tanggal_akhir,
                        cluster: cluster,
                        kebun: kebun,
                        jenis_report: jenis_report
                    },
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    success: function(html) {
                        $('.table-responsive').html(html);
                    }
                });
            }

            $('.btn.btn-primary').on('click', function(e) {
                e.preventDefault();
                fetchTable();
            });

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