@extends('layouts.app')

@section('content')
{{--*/ usort($tableGrid, "SiteHelpers::_sort") /*--}}
<style>
.select2-container{
	border: 2px solid #ffc107 !important;
    border-radius: 8px;
    background: linear-gradient(90deg, #fffbe6 0%, #fff 100%);
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.15);
    font-weight: 500;
}
</style>
<div class="page-titles">
  <h2> {{ $pageTitle }} <small> {{ $pageNote }} </small></h2>
</div>
<div  class="card">
	<div class="card-body">
		<div class="toolbar-nav">
			<form method="GET" action="" class="mb-3">
				<div class="row">
					<div class="col-md-3">
						<label class="font-weight-bolder text-success" for="filter_kebun">
							<i class="fas fa-seedling" style="margin-right:5px; color:#28a745;"></i> Kebun
						</label>
						<select name="filter_kebun" id="filter_kebun" class="form-control border-success">
						
						</select>
					</div>
                    
					
					<div class="col-md-3 ">
						<label class="font-weight-bolder text-warning" for="filter_periode">
							<i class="fas fa-industry" style="margin-right:5px; color:#007bff;"></i> Periode
						</label>
						<select name="filter_periode[]" id="filter_periode" multiple class="form-control border-primary select2" style="border: 2px solid #ffc107; border-radius: 8px; background: linear-gradient(90deg, #fffbe6 0%, #fff 100%); box-shadow: 0 2px 8px rgba(255,193,7,0.15); font-weight: 500;">
							<option value="">Pilih Periode</option>
							<option value="1A">1A</option>
							<option value="1B">1B</option>
							<option value="2A">2A</option>
							<option value="2B">2B</option>
							<option value="3A">3A</option>
							<option value="3B">3B</option>
							<option value="4A">4A</option>		
							<option value="4B">4B</option>
							<option value="5A">5A</option>	
							<option value="5B">5B</option>
							<option value="6A">6A</option>
							<option value="6B">6B</option>
							<option value="7A">7A</option>
							<option value="7B">7B</option>
							<option value="8A">8A</option>
							<option value="8B">8B</option>	
							<option value="9A">9A</option>
							<option value="9B">9B</option>
							<option value="10A">10A</option>
							<option value="10B">10B</option>
							<option value="11A">11A</option>
							<option value="11B">11B</option>
							<option value="12A">12A</option>
							<option value="12B">12B</option>
						</select>
                       
					</div>    
					<div class="col-md-3">
						<label class="font-weight-bolder text-primary" for="filter_tahun">
							<i class="fas fa-calendar-alt" style="margin-right:5px; color:#007bff;"></i> Tahun
						</label>
						<select name="filter_tahun" id="filter_tahun" class="form-control border-primary">
							<option value="">Pilih Tahun</option>
							@for($i = date('Y'); $i >= date('Y') - 10; $i--)
								<option value="{{ $i }}">{{ $i }}</option>
							@endfor
						</select>
					</div>
					<div class="col-md-3">

						<label class="font-weight-bolder text-info" for="filter_afdeling">
							<i class="fas fa-layer-group" style="margin-right:5px; color:#17a2b8;"></i> Afdeling/Kebun
						</label>
						<select name="filter_afdeling" id="filter_afdeling" class="form-control border-info">
								<option value="">Pilih Afdeling/Kebun</option>
								<option value="1">Per Afdeling</option>
								<option value="2">Per Kebun</option>
								
						</select>
					</div>
                    <div class="col-md-3 mt-3 ">
                         <button type="submit" class="btn btn-success btn-sm shadow-sm px-4 py-2" id="filterBtn" style="border-radius: 12px; font-weight: 600; transition: background 0.2s;">
                            <span id="filterBtnIcon"><i class="fas fa-filter"></i></span>
                            <span id="filterBtnText"> Filter</span>
                            <span id="filterBtnLoading" style="display:none;"><i class="fas fa-spinner fa-spin"></i> Loading...</span>
                        </button>
    
                        <button type="button" class="btn btn-warning btn-sm shadow-sm px-4 py-2 ms-2" id="downloadBtn" style="border-radius: 12px; font-weight: 600; transition: background 0.2s;">
                            <i class="fas fa-download"></i> Download
                        </button>
                        
                    </div>
				</div>
				
			</form>
		<div >

	

			
		<div id="setcontent" style="overflow: scroll;height: 500px;">
			
		</div>
		
		
		@include('footer')
	</div>  
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>
	                        $("#filter_kebun").jCombo("{!! url('dataprodisconsole/comboselect?filter=master_kebun:kode_kebun:nama_kebun') !!}",
                                    {  initial_text : 'Pilih Kebun'});

                                    $("#filter_rayon").jCombo("{!! url('dataprodisconsole/comboselect?filter=master_rayon:kode_rayon:nama_rayon&parent=kode_kebun:') !!}",
                                        {  initial_text : 'Pilih Rayon', parent: "#filter_kebun" }); 


															document.getElementById('downloadBtn').addEventListener('click', function() {
																var table = document.querySelector('table');
																var wb = XLSX.utils.table_to_book(table, {sheet:"Sheet1"});
																XLSX.writeFile(wb, 'data-export.xlsx');
															});


                                                            document.getElementById('filterBtn').addEventListener('click', function(e) {
                                                                e.preventDefault();
                                                                // Show loading
                                                                document.getElementById('filterBtnIcon').style.display = 'none';
                                                                document.getElementById('filterBtnText').style.display = 'none';
                                                                document.getElementById('filterBtnLoading').style.display = 'inline-block';

                                                                $.ajax({
                                                                    url: "{{ url('fotodrone/getRekapDroneAfd') }}",
                                                                    method: "GET",
                                                                    data: {
                                                                        periode: $("#filter_periode").val(),
                                                                        kategori: $("#filter_afdeling").val(),
                                                                        kode_kebun: $("#filter_kebun").val(),
																		tahun: $("#filter_tahun").val(),
                                                                    },
                                                                    success: function(response) {
                                                                        $("#setcontent").html(response.html);
                                                                        // Hide loading
                                                                        document.getElementById('filterBtnIcon').style.display = '';
                                                                        document.getElementById('filterBtnText').style.display = '';
                                                                        document.getElementById('filterBtnLoading').style.display = 'none';
                                                                    },
                                                                    error: function(xhr) {
                                                                        $("#setcontent").html('<div class="alert alert-danger">Gagal memuat data.</div>');
                                                                        // Hide loading
                                                                        document.getElementById('filterBtnIcon').style.display = '';
                                                                        document.getElementById('filterBtnText').style.display = '';
                                                                        document.getElementById('filterBtnLoading').style.display = 'none';
                                                                    }
                                                                });
                                                            });

</script>
@stop