@extends('base.layout')
@section('content')
<style>
table {
    margin-bottom: 30px;
}
</style>
<div class="wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6">
                <div class="card-box ribbon-box">
                    <div class="ribbon ribbon-primary">Rekapitulasi Data Ziehl Laki-Laki 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="0" cellspacing="0" id="znreporttable" class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>Nilai</th>
                                    @foreach($kdSpesimenList as $sp)
                                        <th>{{ $sp }}</th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($nilaiList as $nilai)
                                <tr>
                                    <td>{{ $nilai }}</td>
                                    @foreach($kdSpesimenList as $sp)
                                        <td>{{ $rekapLaki[$nilai][$sp] }}</td>
                                    @endforeach
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="card-footer">
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="card-box ribbon-box">
                    <div class="ribbon ribbon-danger">Rekapitulasi Data Ziehl Perempuan Bulan {{$bulan}} Tahun {{$tahun}}</div>
                    <p></p>
                    <div class="table-responsive">
                        <button type="button" class="btn btn-primary" id="btnexportperempuan"><i class="fa fa-print"></i> Export</button>
                        <table cellpadding="0" cellspacing="0" id="znreporttableperempuan" class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>Nilai</th>
                                    @foreach($kdSpesimenList as $sp)
                                        <th>{{ $sp }}</th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($nilaiList as $nilai)
                                <tr>
                                    <td>{{ $nilai }}</td>
                                    @foreach($kdSpesimenList as $sp)
                                        <td>{{ $rekapPerempuan[$nilai][$sp] }}</td>
                                    @endforeach
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="card-footer">
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="card-box ribbon-box">
                    <div class="ribbon ribbon-danger">Diagram Batang Bulan {{$bulan}} Tahun {{$tahun}}</div>
                    <p></p>
                    <div class="card-body">
                        <canvas id="chartZiehl" height="100"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
@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('btnexport').addEventListener('click', function() {
            var table = document.getElementById('znreporttable');
            if (table) {
                var wb = XLSX.utils.table_to_book(table, { sheet: "Report" });
                XLSX.writeFile(wb, "ziehlnielsenlakilaki_{{$bulan}}_Tahun{{$tahun}}.xlsx");
            } else {
                console.error('Tabel dengan ID "znreporttable" tidak ditemukan.');
            }
        });
        document.getElementById('btnexportperempuan').addEventListener('click', function() {
            var table = document.getElementById('znreporttableperempuan');
            if (table) {
                var wb = XLSX.utils.table_to_book(table, { sheet: "Report" });
                XLSX.writeFile(wb, "ziehlnielsenperempuan_{{$bulan}}_Tahun{{$tahun}}.xlsx");
            } else {
                console.error('Tabel dengan ID "znreporttableperempuan" tidak ditemukan.');
            }
        });
    });
    var ctx = document.getElementById('chartZiehl').getContext('2d');
    var chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: @json($nilaiList),
            datasets: [
                {
                    label: 'Laki-Laki',
                    data: @json($chartL),
                    backgroundColor: 'rgba(54, 162, 235, 0.7)'
                },
                {
                    label: 'Perempuan',
                    data: @json($chartP),
                    backgroundColor: 'rgba(255, 99, 132, 0.7)'
                }
            ]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Jumlah Pasien'
                    }
                }
            }
        }
    });
</script>
@endpush