@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-8 ">
					<div class="input-group text-left">
					      
                            <select id="filter-jenjang" class="form-control form-control-sm" required>
                                <option value="KBD" selected>KBD</option>
                                <option value="KBP">KBP</option>
                                <option value="KBN">KBN</option>
                                <option value="KBI">KBI</option>
                            </select>
                            <select id="filter-sistem" class="form-control form-control-sm" required>
                                <option value="KONVENSIONAL" selected>KONVENSIONAL</option>
                                <option value="SBP">SBP</option>
                            </select>
                            <select id="filter-tahun" class="form-control form-control-sm" required>
                                <option value="26/27" selected>26/27</option>
                                <option value="27/28">27/28</option>
                                <option value="28/29">28/29</option>
                                <option value="29/30">29/30</option>
                                <option value="30/31">30/31</option>
                                <option value="31/32">31/32</option>
                            </select>
                            <select id="filter-kemasakan" class="form-control form-control-sm">
                                <option value="">-- Pilih Kemasakan --</option>
                                <option value="AWAL">AWAL</option>
                                <option value="TENGAH">TENGAH</option>
                                <option value="LAMBAT">LAMBAT</option>
                            </select>
                            <select id="filter-kategori" class="form-control form-control-sm" required>
                                <option value="BULAN" selected>BULAN</option>
                                <option value="PERIODIK">PERIODIK</option>
                            </select>
                            <select id="filter-tingkat" class="form-control form-control-sm" required>
                                <option value="KEBUN" selected>KEBUN</option>
                                <option value="REGIONAL">REGIONAL</option>
                                <option value="CLUSTER">CLUSTER</option>
                                <option value="RAYON">RAYON</option>
                                <option value="AFDELING">AFDELING</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-4 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, rayon dan tanggal untuk menampilkan data rekap timbangan</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 Bibit"});
        var jenjang = $('#filter-jenjang').val() || 'Semua';
        var sistem = $('#filter-sistem').val() || 'Semua';
        var tahun = $('#filter-tahun').val() || 'Semua';
        var kemasakan = $('#filter-kemasakan').val() || 'Semua';
        var kategori = $('#filter-kategori').val() || 'Semua';
        var tingkat = $('#filter-tingkat').val() || 'Semua';

        var filename = 'Rekap_Bibit_' + jenjang + '_' + sistem + '_' + tahun + '_' + kemasakan + '_' + kategori + '_' + tingkat + '.xlsx';
        
        XLSX.writeFile(wb, filename);
    });
</script>
<script type="text/javascript">
        loadData();

        function loadData() {
            var jenjang = $('#filter-jenjang').val();
            var sistem = $('#filter-sistem').val();
            var tahun = $('#filter-tahun').val();
            var kemasakan = $('#filter-kemasakan').val();
            var kategori = $('#filter-kategori').val();
            var tingkat = $('#filter-tingkat').val();
            
            $.ajax({
                url: "{{ url('rekapbibitkebun/rekapBibit') }}",
                type: "GET",
                data: {
                    jenjang: jenjang,
                    sistem: sistem,
                    tahun: tahun,
                    kemasakan: kemasakan,
                    kategori: kategori,
                    tingkat: tingkat
                },
                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