@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-6">
						<div class="form-group">
							<label for="filter_tgl">Filter Tanggal: </label>
							<input type="date" name="filter_tgl" type="button" id="filter_tgl" class="form-control-sm mx-sm-2" value="{{ date('Y-m-d') }}">
						</div>

				</div>
				<div class="col-md-6 text-right">
					<div class="btn-group">
						
                            <a href="javascript:void(0);" class="btn btn-sm btn-primary" onclick="loadKlentekKebunTable()"> Tampilkan </a> 
							<a href="javascript:void(0);" class="btn btn-sm btn-warning" onclick="exportTableToExcel('data.xls')"> Export Excel </a>
						
						


                      
                        
					</div>	
				</div>    
			</div>
		<div >

	



		 <div class="table-responsive" id="previewtable" style="min-height:300px;">
					
		 
		</div>

		
	</div>  
</div>
  <script>
    loadKlentekKebunTable();
                        function loadKlentekKebunTable() {
                            var filter_tgl = document.getElementById('filter_tgl').value;
                            $('#previewtable').html('<div class="text-center">Loading...</div>');
                            $.ajax({
                                url: '{{ url("reportklentekkebun/getTableDataKebun") }}?date=' + filter_tgl,
                                type: 'GET',
                                dataType: 'json',
                                success: function(data) {
                                    let html = '<table class="table table-bordered table-striped table-sm">';
                                    html += '<thead><tr>';
                                    html += '<th>Cluster</th><th>Kode Kebun</th><th>Kebun</th><th>Tanam Kepras Total</th>';
                                    html += '<th>Sasaran Klentek 1</th><th>Klentek 1</th><th>% Klentek 1</th>';
                                    html += '<th>Sasaran Klentek 2</th><th>Klentek 2</th><th>% Klentek 2</th>';
                                    html += '<th>Sasaran Klentek 3</th><th>Klentek 3</th><th>% Klentek 3</th>';
                                    html += '</tr></thead><tbody>';
                                    data.forEach(function(row) {
                                        html += '<tr>';
                                        html += `<td>${row.cluster}</td>`;
                                        html += `<td>${row.kode_kebun}</td>`;
                                        html += `<td>${row.kebun}</td>`;
                                        html += `<td class="text-right">${row.tanam_kepras_total}</td>`;
                                        html += `<td class="text-right">${row.sasaran_klentek_1}</td>`;
                                        html += `<td class="text-right">${row.klentek_1}</td>`;
                                        html += `<td class="text-right">${row.persen_klentek_1}</td>`;
                                        html += `<td class="text-right">${row.sasaran_klentek_2}</td>`;
                                        html += `<td class="text-right">${row.klentek_2}</td>`;
                                        html += `<td class="text-right">${row.persen_klentek_2}</td>`;
                                        html += `<td class="text-right">${row.sasaran_klentek_3}</td>`;
                                        html += `<td class="text-right">${row.klentek_3}</td>`;
                                        html += `<td class="text-right">${row.persen_klentek_3}</td>`;
                                        html += '</tr>';
                                    });
                                    html += '</tbody></table>';
                                    $('#previewtable').html(html);
                                },
                                error: function() {
                                    $('#previewtable').html('<div class="text-danger">Gagal memuat data.</div>');
                                }
                            });
                        }

                        function exportTableToExcel(filename = 'data.xls') {
                            var table = document.getElementById('previewtable').getElementsByTagName('table')[0];
                            if (!table) {
                                alert('Tidak ada tabel untuk diekspor.');
                                return;
                            }
                            var tableHTML = table.outerHTML.replace(/ /g, '%20');
                            var a = document.createElement('a');
                            a.href = 'data:application/vnd.ms-excel,' + tableHTML;
                            a.download = filename;
                            document.body.appendChild(a);
                            a.click();
                            document.body.removeChild(a);
                        }
                        </script>
@stop