@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-6 ">
					<div class="input-group text-left">
					      
						    <select id="filter-kebun" class="form-control form-control-sm"></select>
                            <select id="filter-kategori" class="form-control form-control-sm"></select>
                            <select id="filter-area-pica" class="form-control form-control-sm"></select>
                            <select id="filter-triwulan" class="form-control form-control-sm">
                                <option value="">Pilih Triwulan</option>
                                <option value="tw1">Triwulan 1</option>
                                <option value="tw2">Triwulan 2</option>
                                <option value="tw3">Triwulan 3</option>
                                <option value="tw4">Triwulan 4</option>
                            </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-6 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, kategori dan area untuk menampilkan data Sasaran Pica</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">
    function exportToExcel() {
        const table = document.getElementById("sasaranPicaKebunTriwulanTable").outerHTML;
        const kebun = $('#filter-kebun').val() || 'Semua';
        const kategori = $('#filter-kategori').val() || 'Semua';
        const area = $('#filter-area-pica').val() || 'Semua';
        const triwulan = $('#filter-triwulan').val() || 'Semua';
        const filename = "Rekap_Sasaran_Pica_" + kebun + "_" + kategori + "_" + area + "_Triwulan_" + triwulan + ".xls";
        
const html = [
                        '<html xmlns:o="urn:schemas-microsoft-com:office:office" ',
                        'xmlns:x="urn:schemas-microsoft-com:office:excel" ',
                        'xmlns="http://www.w3.org/TR/REC-html40">',
                        '<head>',
                        '<!--[if gte mso 9]>',
                        '<xml>',
                        '<' + 'x:ExcelWorkbook>',
                        '<' + 'x:ExcelWorksheets>',
                        '<' + 'x:ExcelWorksheet>',
                        '<' + 'x:Name>Sheet1</' + 'x:Name>',
                        '<' + 'x:WorksheetOptions>',
                        '<' + 'x:DisplayGridlines/>',
                        '</' + 'x:WorksheetOptions>',
                        '</' + 'x:ExcelWorksheet>',
                        '</' + 'x:ExcelWorksheets>',
                        '</' + 'x:ExcelWorkbook>',
                        '</xml>',
                        '<![endif]-->',
                        '</head>',
                        '<body>' + table + '</body>',
                        '</html>'
                    ].join('');

        const blob = new Blob([html], { type: "application/vnd.ms-excel" });
        const url = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = url;
        a.download = filename;
        a.click();
        URL.revokeObjectURL(url);
    }

    $('#exportexcel').on('click', function() {
        const table = document.getElementById('sasaranPicaKebunTriwulanTable');
        if (!table) {
            alert('Table tidak ditemukan!');
            return;
        }
        exportToExcel();
    });
</script>
<script type="text/javascript">
        $("#filter-kebun").jCombo("{!! url('dataprodisconsole/comboselect?filter=master_kebun:kode_kebun:nama_kebun') !!}",
            {  initial_text : 'Pilih Kebun'});
        $("#filter-kategori").jCombo("{!! url('dataprodisconsole/comboselect?filter=master_kategori_pc:kategori_pc:kategori_pc') !!}",
            {  initial_text : 'Pilih Kategori'}); 
        $("#filter-area-pica").jCombo("{!! url('dataprodisconsole/comboselect?filter=master_area_pica:area_problem:area_problem') !!}",
            {  initial_text : 'Pilih Area'}); 


        function loadData() {
            var kebun = $('#filter-kebun').val();
            var kategori = $('#filter-kategori').val();
            var area = $('#filter-area-pica').val();
            var triwulan = $('#filter-triwulan').val();
            
            $.ajax({
                url: "{{ url('monitoringpica/getSasaranPicaKebunTriwulan') }}",
                type: "GET",
                data: {
                    kebun: kebun,
                    kategori: kategori,
                    area: area,
                    triwulan: triwulan
                },
                beforeSend: function() {
                    $('#pjax-container').html('<div class="text-center"><i class="fa fa-spinner fa-spin"></i> Loading...</div>');
                },
                success: function(response) {
                    $('#pjax-container').html(response);
                },
                error: function(xhr, status, error) {
                    $('#pjax-container').html('<div class="alert alert-danger">Error loading data: ' + error + '</div>');
                }
            });
        }

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

        // loadData();
</script>


@endsection