@extends('adminlte::page')

@section('title', 'Laporan Lebih Buku')

@section('content_header')
    <h1><i class="fas fa-boxes mr-2"></i>Laporan Lebih Buku</h1>
@stop

@section('content')
    <div class="mb-3 no-print">
        <a href="{{ route('supervisor.dashboard') }}" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-arrow-left mr-1"></i> Kembali ke Dashboard
        </a>
        <button onclick="window.open('{{ route('supervisor.laporan.pengesahan-cetak', ['tahun' => $tahun]) }}', '_blank')"
            class="btn btn-primary btn-sm ml-2">
            <i class="fas fa-print mr-1"></i> Cetak Laporan
        </button>
        <a href="{{ route('supervisor.laporan.senarai-sekolah-lebihan', ['tahun' => $tahun]) }}"
            class="btn btn-success btn-sm ml-2">
            <i class="fas fa-school mr-1"></i> Senarai Sekolah
        </a>
    </div>

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="text-muted mb-0">
            <i class="fas fa-chart-pie mr-1"></i> Jumlah Lebihan Buku Mengikut Darjah
            — Daerah: <span class="badge badge-primary">{{ $daerah }}</span>
        </h5>
        <form method="GET" action="{{ route('supervisor.laporan.pengesahan') }}" class="form-inline">
            <label class="mr-2 text-muted"><i class="fas fa-calendar-alt mr-1"></i>Tahun:</label>
            <select name="tahun" class="form-control form-control-sm" onchange="this.form.submit()">
                @foreach ($senarai_tahun as $t)
                    <option value="{{ $t }}" {{ $t == $tahun ? 'selected' : '' }}>{{ $t }}</option>
                @endforeach
            </select>
        </form>
    </div>

    <div class="row">
        @foreach ($charts as $chart)
            <div class="col-md-4 mb-4">
                <div class="card card-outline card-success">
                    <div class="card-header">
                        <h3 class="card-title">
                            <strong>{{ $chart['darjah'] }}</strong>
                            <small class="text-muted ml-2">(Jumlah Lebihan: {{ number_format($chart['total']) }})</small>
                        </h3>
                        <div class="card-tools">
                            <a href="{{ route('supervisor.laporan.pengesahan-detail', ['darjah' => $chart['darjah']]) }}"
                                class="btn btn-tool" title="Lihat Detail">
                                <i class="fas fa-eye"></i>
                            </a>
                        </div>
                    </div>
                    <div class="card-body text-center">
                        @if (array_sum($chart['values']) > 0)
                            <canvas id="pieChart{{ $loop->index }}" style="max-height:280px"></canvas>
                        @else
                            <p class="text-muted py-4"><i class="fas fa-info-circle mr-1"></i>Tiada data lebihan.</p>
                        @endif
                    </div>
                    @if (count($chart['labels']) > 0)
                        <div class="card-footer p-0">
                            <table class="table table-sm table-striped mb-0">
                                <thead class="thead-light">
                                    <tr>
                                        <th>Judul Buku</th>
                                        <th class="text-center">Lebihan</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($chart['labels'] as $idx => $label)
                                        <tr>
                                            <td class="small">{{ $label }}</td>
                                            <td
                                                class="text-center font-weight-bold {{ $chart['raw'][$idx] < 0 ? 'text-danger' : 'text-success' }}">
                                                {{ number_format($chart['raw'][$idx]) }}
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>
        @endforeach
    </div>
@stop

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
    <script>
        // Disable all Chart.js animations globally
        Chart.defaults.animation = false;
        Chart.defaults.responsive = false;
        Chart.defaults.transitions = {
            active: {
                animation: {
                    duration: 0
                }
            },
            resize: {
                animation: {
                    duration: 0
                }
            },
            show: {
                animation: {
                    duration: 0
                }
            },
            hide: {
                animation: {
                    duration: 0
                }
            }
        };

        (function() {
            if (window._laporanPengesahanRendered) return;
            window._laporanPengesahanRendered = true;

            const pieColors = [
                '#28a745', '#007bff', '#ffc107', '#17a2b8', '#dc3545', '#6f42c1',
                '#e83e8c', '#fd7e14', '#20c997', '#6610f2', '#343a40', '#6c757d'
            ];

            @foreach ($charts as $chart)
                @if (array_sum($chart['values']) > 0)
                    (function() {
                        var canvas = document.getElementById('pieChart{{ $loop->index }}');
                        canvas.width = canvas.parentElement.offsetWidth;
                        canvas.height = 280;

                        new Chart(canvas, {
                            type: 'pie',
                            data: {
                                labels: {!! json_encode($chart['labels']) !!},
                                datasets: [{
                                    data: {!! json_encode($chart['values']) !!},
                                    backgroundColor: pieColors.slice(0,
                                        {{ count($chart['labels']) }}),
                                    borderWidth: 1
                                }]
                            },
                            options: {
                                responsive: false,
                                animation: false,
                                transitions: {
                                    active: {
                                        animation: {
                                            duration: 0
                                        }
                                    },
                                    resize: {
                                        animation: {
                                            duration: 0
                                        }
                                    },
                                    show: {
                                        animation: {
                                            duration: 0
                                        }
                                    },
                                    hide: {
                                        animation: {
                                            duration: 0
                                        }
                                    }
                                },
                                plugins: {
                                    legend: {
                                        display: false
                                    },
                                    title: {
                                        display: true,
                                        text: '{{ $chart['darjah'] }} — Lebihan Buku {{ $tahun }}',
                                        font: {
                                            size: 13
                                        }
                                    }
                                }
                            }
                        });
                    })();
                @endif
            @endforeach
        })();
    </script>
@stop
