@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">				
        <form id="filterForm" class="form-horizontal">
						<div class="row">
							<div class="col-md-3">
								<div class="form-group">
									<label for="start_date">Tanggal Mulai</label>
									<input type="date" class="form-control" id="start_date" name="start_date" value="2025-01-01" required>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-group">
									<label for="end_date">Tanggal Selesai</label>
									<input type="date" class="form-control" id="end_date" name="end_date" value="{{ date('Y-m-d') }}" required>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-group">
									<label for="jenis_report">Jenis Report</label>
									<select class="form-control" id="jenis_report" name="jenis_report">
                                        <option value="REGIONAL" selected>REGIONAL</option>
                                        <option value="CLUSTER">CLUSTER</option>
                                        <option value="KEBUN">KEBUN</option>
                                        <option value="RAYON">RAYON</option>
                                        <option value="AFDELING">AFDELING</option>
                                    </select>

								</div>
							</div>
							<div class="col-md-3">
								<div class="form-group">
									<button type="submit" class="btn btn-xs btn-primary mt-4">Filter</button>
                                    <button type="button" class="btn btn-xs btn-success mt-4" id="downloadBtn">
                                        <i class="fa fa-download"></i> Download Excel
                                    </button>

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

					</form>
			</div>
			<div id="results" class="mt-3"></div>
		
		
	</div>  
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>
$(document).ready(function() {
    $("#downloadBtn").on("click", function() {
        // Get the table from results div
        var table = $("#results table")[0];
        
        if (!table) {
            alert("Tidak ada data untuk didownload");
            return;
        }
        
        // Convert table to workbook
        var wb = XLSX.utils.table_to_book(table, {sheet: "Rekap PCRC Rayon Komparasi"});
        
        // Generate filename with current date
        var filename = "Rekap_PCRC_Rayon_Komparasi_" + $("#start_date").val() + "_to_" + $("#end_date").val() + ".xlsx";
        
        // Download the file
        XLSX.writeFile(wb, filename);
    });
});
</script>
<script>
            
			// Set date range to last 7 days
			$(document).ready(function() {
                fetchConsoleProdis(); // Fetch data on page load
				$("#filterForm").on("submit", function(e) {
					e.preventDefault();
					fetchConsoleProdis();

				});
			});

			function fetchConsoleProdis() {
					var formData = {
						start_date: $("#start_date").val(),
						end_date: $("#end_date").val(),
						jenis_report: $("#jenis_report").val()
					};
					
					$.ajax({
						url: "{{ url('reportlkp/getRekapPcrcRayonKomparasi') }}",
						type: "GET",
						data: formData,
						beforeSend: function() {
							$("#results").html("<div class=\"text-center\"><i class=\"fa fa-spinner fa-spin\"></i> Loading...</div>");
						},
						success: function(response) {
							$("#results").html(response);
						},
						error: function(xhr, status, error) {
							$("#results").html("<div class=\"alert alert-danger\">Error: " + error + "</div>");
						}
					});
			}
			</script>
@stop