@extends('base.layout')

@section('content')
<style>
    .glassreport-pagination {
        overflow-x: auto;
    }

    .glassreport-pagination nav {
        display: block;
    }

    .glassreport-pagination .pagination {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 0;
        padding-left: 0;
        list-style: none;
    }

    .glassreport-pagination .page-item {
        display: inline-block;
    }

    .glassreport-pagination .page-link,
    .glassreport-pagination span[aria-current="page"] span,
    .glassreport-pagination span[aria-disabled="true"] span {
        display: inline-block;
        width: auto;
        min-width: 38px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.4;
        text-align: center;
        border-radius: 4px;
    }
</style>
<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="mt-3 mb-3">
                        <a href="{{ route('exportGlassReport', ['bulan' => $bulan, 'tahun' => $tahun]) }}" class="btn btn-success">
                            <i class="fa fa-file-excel-o"></i> Download Full Excel (CSV)
                        </a>
                    </div>
                    <div class="alert alert-info">
                        Preview Glass Report ditampilkan per halaman 50 pemeriksaan agar aman di memori. Untuk data lengkap gunakan tombol download CSV.
                    </div>
                    @foreach (['A', 'B', 'C'] as $tableKey)
                        <div class="table-responsive" style="margin-bottom: 24px;">
                            <h4>TABEL {{ $tableKey }}</h4>
                            <table class="table table-bordered table-sm" id="tabel{{ $tableKey }}">
                                <thead>
                                    <tr>
	                                        @foreach (($glassHeaders[$tableKey] ?? []) as $header)
	                                            <th>{{ $header }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse (($glassTables[$tableKey] ?? []) as $row)
                                        <tr>
                                            @foreach ($row as $cell)
                                                <td>{{ $cell }}</td>
                                            @endforeach
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="{{ count($glassHeaders[$tableKey] ?? []) }}">Data tidak ditemukan</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    @endforeach
                    @if(method_exists($orderbydate, 'links'))
                        <div class="mt-3 glassreport-pagination">
                            {{ $orderbydate->links() }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
        
        document.getElementById('btnexporttabelA').addEventListener('click', function() {
            var table = document.getElementById('tabelA');
            if (table) {
                var wb = XLSX.utils.table_to_book(table, { sheet: "Bakteri" });
                XLSX.writeFile(wb, "TABEL_A_{{$bulan}}_Tahun{{$tahun}}.xlsx");
            } else {
                console.error('Tabel dengan ID "tabelA" tidak ditemukan.');
            }
        });
        document.getElementById('btnexporttabelB').addEventListener('click', function() {
            var table = document.getElementById('tabelB');
            if (table) {
                var wb = XLSX.utils.table_to_book(table, { sheet: "Jamur" });
                XLSX.writeFile(wb, "TABEL_B_{{$bulan}}_Tahun{{$tahun}}.xlsx");
            } else {
                console.error('Tabel dengan ID "tabelB" tidak ditemukan.');
            }
        });
        document.getElementById('btnexporttabelC').addEventListener('click', function() {
            var table = document.getElementById('tabelC');
            if (table) {
                var wb = XLSX.utils.table_to_book(table, { sheet: "No Growth" });
                XLSX.writeFile(wb, "TABEL_C_{{$bulan}}_Tahun{{$tahun}}.xlsx");
            } else {
                console.error('Tabel dengan ID "tabelC" tidak ditemukan.');
            }
        });
    });
</script>
@endpush