@extends('base.layout')
@section('content')
<div class="wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="card-box ribbon-box">
                    <div class="ribbon ribbon-danger">Rekapitulasi Data Bulan {{$bulan}} Tahun {{$tahun}}</div>
                    <p></p>
                    <div class="table-responsive">
                    <button type="button" class="btn btn-primary" id="btnexport"><i class="fa fa-print"></i> Export</button>

                        <table cellpadding="10" cellspacing="0" id="znreporttable" class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>Komponen</th>
                                    <th>Jumlah</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($results as $row)
                                    <tr>
                                        <td>{{ $row->komponen }}</td>
                                        <td>{{ $row->jumlah }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="2">Tidak ada data dalam rentang tanggal tersebut.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <div class="card-footer">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
@endsection
@push('script')
<!-- SIGNATURE PAD -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('btnexport').addEventListener('click', function() {
            var table = document.getElementById('znreporttable');
            if (table) {
                var wb = XLSX.utils.table_to_book(table, { sheet: "Report" });
                XLSX.writeFile(wb, "GlassReport_{{$bulan}}_Tahun{{$tahun}}.xlsx");
            } else {
                console.error('Tabel dengan ID "tblkeaktifankelas" tidak ditemukan.');
            }
        });
    });
</script>
@endpush