@extends('adminlte::page')

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

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

@section('content')
    <div class="mb-3 no-print">
        <a href="{{ route('admin.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('admin.laporan.buku-rosak-cetak', ['tahun' => $tahun, 'daerah' => $daerah]) }}', '_blank')"
            class="btn btn-primary btn-sm ml-2">
            <i class="fas fa-print mr-1"></i> Cetak Laporan
        </button>
    </div>

    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap">
        <h5 class="text-muted mb-2">
            <i class="fas fa-chart-pie mr-1"></i> Jumlah Buku Rosak Mengikut Darjah
            @if ($daerah)
                — Daerah: <span class="badge badge-primary">{{ $daerah }}</span>
            @else
                — <span class="badge badge-secondary">Semua Daerah</span>
            @endif
            — Tahun: <span class="badge badge-info">{{ $tahun }}</span>
        </h5>
        <form method="GET" action="{{ route('admin.laporan.buku-rosak') }}" class="form-inline no-print">
            <label class="mr-2 text-muted"><i class="fas fa-map-marker-alt mr-1"></i>Daerah:</label>
            <select name="daerah" class="form-control form-control-sm mr-3" onchange="this.form.submit()">
                <option value="">Semua Daerah</option>
                @foreach ($senarai_daerah as $d)
                    <option value="{{ $d }}" {{ $d == $daerah ? 'selected' : '' }}>{{ $d }}</option>
                @endforeach
            </select>
            <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="callout callout-info no-print">
        <h5><i class="fas fa-info-circle mr-1"></i> Formula</h5>
        <p class="mb-0"><strong>Buku Rosak</strong> = Stok Hingga Akhir − Elok Hingga Akhir</p>
    </div>

    <div class="row">
        @foreach ($charts as $chart)
            <div class="col-md-4 mb-4">
                <div class="card card-outline card-danger">
                    <div class="card-header">
                        <h3 class="card-title">
                            <strong>{{ $chart['darjah'] }}</strong>
                            <small class="text-muted ml-2">(Jumlah Rosak: {{ number_format($chart['total']) }})</small>
                        </h3>
                    </div>
                    <div class="card-body text-center">
                        @if ($chart['total'] > 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 buku rosak.</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">Stok</th>
                                        <th class="text-center">Elok</th>
                                        <th class="text-center">Rosak</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($chart['labels'] as $idx => $label)
                                        <tr>
                                            <td class="small">{{ $label }}</td>
                                            <td class="text-center">{{ number_format($chart['stok'][$idx]) }}</td>
                                            <td class="text-center">{{ number_format($chart['elok'][$idx]) }}</td>
                                            <td
                                                class="text-center font-weight-bold {{ $chart['values'][$idx] > 0 ? 'text-danger' : 'text-success' }}">
                                                {{ number_format($chart['values'][$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>
        Chart.defaults.animation = false;
        Chart.defaults.responsive = false;

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

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

            @foreach ($charts as $chart)
                @if ($chart['total'] > 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,
                                plugins: {
                                    legend: {
                                        position: 'bottom',
                                        labels: {
                                            font: {
                                                size: 11
                                            }
                                        }
                                    }
                                }
                            }
                        });
                    })();
                @endif
            @endforeach
        })();
    </script>
@stop
