@extends('layouts.app')
@section('content')

<div class="page-titles">
    <h2> {{ $pageTitle }} <small> {{ $pageNote }} </small></h2>
</div>

<div id="petaktebangGrid">

    <div class="card">
        <div class="card-body">
            <div class="d-flex no-block">
                <div style="">
                    <h3 class="card-title m-b-5"><span class="lstick"></span>Clusterisasi - Diameter Batang </h3>
                    <div class="form-group">
                        <select id="kebunFilter" class="form-sm-control">
                            <option value="rayon" selected>rayon</option>
                            <option value="kebun">kebun</option>
                        </select>
                        <input type="date" id="startDateFilter" class="form-sm-control" placeholder="Tanggal Mulai">
                        <input type="date" id="endDateFilter" class="form-sm-control" placeholder="Tanggal Akhir">

                        <button id="loadChart" class="btn btn-xs btn-primary">Tampilkan</button>
                        <button type="button" id="exportexcel" class="btn btn-sm btn-success"><i class="fa fa-file-excel"></i> Download Excel</button>
                    </div>
                </div>
            </div>
            <div id="chartdiv" class="p-relative"></div>
              
        </div>
    </div>
</div>


<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: "Sasaran Pasok Harian Pivot"});

        var filename = 'Sasaran_Pasok_Harian_Pivot' + '.xlsx';
        
        XLSX.writeFile(wb, filename);
    });
</script>
<script>

    // $('#loadChart').click(function() {
    //     loadtable();
    // });

    function loadtable() {
        // $('#chartdiv').html('<div class="text-center"><i class="fa fa-spinner fa-spin fa-3x"></i><br>Loading...</div>');
        var kebun = $('#kebunFilter').val();
        var start_date = $('#startDateFilter').val();
        var end_date = $('#endDateFilter').val();
        $.ajax({
            url: '{{ url("picapetak") }}/getSasaranpasokharian',
            type: 'GET',
            data: {
                filter: kebun,
                tgl_awal: start_date,
                tgl_akhir: end_date
            },
            success: function(response) {
                $('#chartdiv').html(response);
            },
            error: function(xhr, status, error) {
                $('#chartdiv').html('<div class="text-danger">Gagal memuat data </div>');
                console.error('AJAX error: ' + status + ' - ' + error);
            }
        });
    }
</script>
@endsection