@extends('layouts.app')
@section('content')

<div class="page-titles">
  <h2> {{ $pageTitle }} <small> {{ $pageNote }} </small></h2>
</div>


	<div id="petaktebangView"></div>	
	<div id="petaktebangGrid">
		<div class="card">
			<div class="card-body">
                
            <div class="toolbar-nav">
			<div class="row ">
				<div class="col-md-4 ">
					<div class="input-group text-left">
					      

                            <select id="filter-kebun" class="form-control form-control-sm"></select>
                            <select id="filter-tg" class="form-control form-control-sm">
                                <option value="TEBU GILING">TEBU GILING</option>
                                <option value="BIBIT">BIBIT</option>
                            </select>
                            <select id="filter-mt" class="form-control form-control-sm"></select>
                            <button type="button" id="btn-search" class="btn btn-sm btn-primary"><i class="fa fa-search"></i></button>
                            
                            
						</div>  
					    
				</div>
				<div class="col-md-8 text-right"> 	
						<button type="button" id="exportexcel" class="btn btn-sm btn-success"><i class="fa fa-file-excel"></i> Download Excel</button>
				</div>
				    
			</div>					
			<!-- End Toolbar Top -->
		</div>	
		
			<div class="table-responsive" id="pjax-container">			
                <div class="text-center py-5">
                    <i class="fa fa-inbox fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">Data Masih Kosong</h5>
                    <p class="text-muted">Silakan pilih kebun untuk menampilkan data Monitoring Budget SAP</p>
                </div>
			</div>	 
		</div>			
	</div>	
	</div>
	
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script type="text/javascript">
    $('#exportexcel').on('click', function() {
        var table = document.getElementById('rekap-table');
        
        if (!table) {
            alert('Table tidak ditemukan!');
            return;
        }
        
        var wb = XLSX.utils.table_to_book(table, {sheet: "Rekap Timbangan SPTA"});
        var kebun = $('#filter-kebun').val() || 'Semua';
        var mt = $('#filter-mt').val() || 'Semua';
        var filename = 'Rekap_Timbangan_SPTA_' + kebun + '_' + mt + '.xlsx';
        
        XLSX.writeFile(wb, filename);
    });
</script>
<script type="text/javascript">
        $("#filter-kebun").jCombo("{!! url('dataprodisconsole/comboselect?filter=master_kebun:kode_kebun:nama_kebun') !!}",
            {  initial_text : 'Pilih Kebun'});
            $("#filter-mt").jCombo("{!! url('dataprodisconsole/comboselect?filter=master_masa_tanam:masa_tanam:masa_tanam') !!}",
            {  initial_text : 'Pilih Masa Tanam'});
        function loadData() {
            var kebun = $('#filter-kebun').val();
            var mt = $('#filter-mt').val();     
            var tg = $('#filter-tg').val();
            
                $('#pjax-container').html(`
                    <div class="text-center py-5">
                        <div class="spinner-border text-primary" role="status"></div>
                        <div class="mt-2 text-muted">Memuat data...</div>
                    </div>
                `);
                $.ajax({
                    url: '{{ url("monitoringbudgetsap/getMonitoringData") }}',
                    method: 'GET',
                    data: {
                        kebun: kebun,
                        mt: mt,
                        tg: tg
                    },
                    success: function(res) {
                        $('#pjax-container').html(res.html);
                    },
                    error: function() {
                        $('#pjax-container').html(`
                            <div class="alert alert-danger">
                                <i class="fas fa-exclamation-circle me-2"></i>Gagal menghubungi server.
                            </div>
                        `);
                    }
                });
        }

        $('#btn-search').on('click', function() {
            loadData();
        });

        loadData();
</script>


@endsection