@extends('base.layout')
@section('content')
<div class="wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-7">
                <div class="card-box ribbon-box">
                    <div class="ribbon ribbon-danger">Rekapitulasi TAT 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 class="table table-bordered table-striped" id="tattablereport">
                            <thead>
                                <tr>
                                    <th>Jenis Pemeriksaan</th>
                                    <th>Memenuhi Target</th>
                                    <th>Tidak Memenuhi Target</th>
                                    <th>Tidak Ada Hasil</th>
                                    <th>Jumlah</th>
                                </tr>
                            </thead>

                            <tbody>
                                @foreach($rekap as $r)
                                    <tr>
                                        <td>{{ $r['jenis_pemeriksaan'] }}</td>
                                        <td class="text-success fw-bold">{{ $r['memenuhi'] }}</td>
                                        <td class="text-danger fw-bold">{{ $r['tidak_memenuhi'] }}</td>
                                        <td class="text-warning fw-bold">{{ $r['tidak_ada_hasil'] }}</td>
                                        <td class="fw-bold">{{ $r['total'] }}</td>
                                    </tr>
                                @endforeach
                            </tbody>

                            <tfoot>
                                <tr class="fw-bold">
                                    <td>Total Keseluruhan</td>
                                    <td>{{ $rekap->sum('memenuhi') }}</td>
                                    <td>{{ $rekap->sum('tidak_memenuhi') }}</td>
                                    <td>{{ $rekap->sum('tidak_ada_hasil') }}</td>
                                    <td>{{ $rekap->sum('total') }}</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    <div class="card-footer">
                    </div>
                </div>
            </div>
            <div class="col-sm-5">
                <div class="card-box ribbon-box">
                    <div class="ribbon ribbon-info">Grafik TAT Data Bulan {{$bulan}} Tahun {{$tahun}}</div>
                    <p></p>
                    <div class="card-body">
                        <canvas id="pieChart" 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() {
        const totalMemenuhi     = {{ $rekap->sum('memenuhi') }};
        const totalTidak        = {{ $rekap->sum('tidak_memenuhi') }};
        const totalTidakAda     = {{ $rekap->sum('tidak_ada_hasil') }};

        const ctxPie = document.getElementById('pieChart').getContext('2d');

        new Chart(ctxPie, {
            type: 'pie',
            data: {
                labels: [
                    'Memenuhi Target',
                    'Tidak Memenuhi Target',
                    'Tidak Ada Hasil'
                ],
                datasets: [{
                    data: [totalMemenuhi, totalTidak, totalTidakAda],
                    backgroundColor: [
                        'rgba(46, 204, 113, 0.8)', // hijau
                        'rgba(231, 76, 60, 0.8)',  // merah
                        'rgba(241, 196, 15, 0.8)'  // kuning
                    ]
                }]
            }
        });
        document.getElementById('btnexport').addEventListener('click', function() {
            var table = document.getElementById('tattablereport');
            if (table) {
                var wb = XLSX.utils.table_to_book(table, { sheet: "Report" });
                XLSX.writeFile(wb, "TAT_{{$bulan}}_Tahun{{$tahun}}.xlsx");
            } else {
                console.error('Tabel dengan ID "tattablereport" tidak ditemukan.');
            }
        });
    });
</script>
@endpush