@extends('base.layout')

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

    .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;
        border: 1px solid #dee2e6;
        background: #fff;
        color: #495057;
        text-decoration: none;
    }

    .glassreport-pagination .page-item.active .page-link {
        background: #4c5667;
        border-color: #4c5667;
        color: #fff;
    }

    .glassreport-pagination .page-item.disabled .page-link {
        color: #adb5bd;
        background: #f8f9fa;
        cursor: not-allowed;
    }

    .glassreport-pagination .pagination-summary {
        margin-bottom: 10px;
        font-size: 13px;
        color: #6c757d;
    }
</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">
                            <div class="pagination-summary">
                                Menampilkan {{ $orderbydate->firstItem() ?? 0 }} sampai {{ $orderbydate->lastItem() ?? 0 }} dari {{ $orderbydate->total() }} pemeriksaan
                            </div>
                            @php
                                $currentPage = $orderbydate->currentPage();
                                $lastPage = $orderbydate->lastPage();
                                $startPage = max(1, $currentPage - 4);
                                $endPage = min($lastPage, $currentPage + 4);
                            @endphp
                            <ul class="pagination">
                                <li class="page-item {{ $orderbydate->onFirstPage() ? 'disabled' : '' }}">
                                    @if($orderbydate->onFirstPage())
                                        <span class="page-link">Previous</span>
                                    @else
                                        <a class="page-link" href="{{ $orderbydate->previousPageUrl() }}">Previous</a>
                                    @endif
                                </li>

                                @if($startPage > 1)
                                    <li class="page-item"><a class="page-link" href="{{ $orderbydate->url(1) }}">1</a></li>
                                    @if($startPage > 2)
                                        <li class="page-item disabled"><span class="page-link">...</span></li>
                                    @endif
                                @endif

                                @for($page = $startPage; $page <= $endPage; $page++)
                                    <li class="page-item {{ $page === $currentPage ? 'active' : '' }}">
                                        @if($page === $currentPage)
                                            <span class="page-link">{{ $page }}</span>
                                        @else
                                            <a class="page-link" href="{{ $orderbydate->url($page) }}">{{ $page }}</a>
                                        @endif
                                    </li>
                                @endfor

                                @if($endPage < $lastPage)
                                    @if($endPage < $lastPage - 1)
                                        <li class="page-item disabled"><span class="page-link">...</span></li>
                                    @endif
                                    <li class="page-item"><a class="page-link" href="{{ $orderbydate->url($lastPage) }}">{{ $lastPage }}</a></li>
                                @endif

                                <li class="page-item {{ $orderbydate->hasMorePages() ? '' : 'disabled' }}">
                                    @if($orderbydate->hasMorePages())
                                        <a class="page-link" href="{{ $orderbydate->nextPageUrl() }}">Next</a>
                                    @else
                                        <span class="page-link">Next</span>
                                    @endif
                                </li>
                            </ul>
                        </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