@extends('layouts.app')

@section('judul', 'Laporan Naskah Dinas')
@section('subjudul', 'Periode '.$awal->translatedFormat('d F Y').' s.d. '.$akhir->translatedFormat('d F Y'))

@section('aksi-header')
    @if (auth()->user()->punyaPermission('laporan.ekspor'))
        @php
            $q = ['tanggal_awal' => $awal->toDateString(), 'tanggal_akhir' => $akhir->toDateString()];
        @endphp
        <a href="{{ route('laporan.excel', $q) }}" class="btn btn-outline-success"><i class="fas fa-file-excel mr-1"></i> Excel</a>
        <a href="{{ route('laporan.pdf', $q) }}" class="btn btn-outline-danger"><i class="fas fa-file-pdf mr-1"></i> PDF</a>
    @endif
@endsection

@section('konten')
    @php
        $r = $laporan['ringkasan'];
        $w = $laporan['waktu_penyelesaian'];
        $hari = fn ($n) => $n === null ? '—' : number_format($n, 1, ',', '.').' hari';
    @endphp

    <div class="card">
        <div class="card-body py-3">
            <form method="GET" action="{{ route('laporan.index') }}" class="form-row align-items-end">
                <div class="col-6 col-md-3 mb-2">
                    <label class="small mb-1" for="tanggal_awal">Tanggal awal</label>
                    <input type="date" id="tanggal_awal" name="tanggal_awal" value="{{ $awal->toDateString() }}" class="form-control form-control-sm @error('tanggal_awal') is-invalid @enderror">
                </div>
                <div class="col-6 col-md-3 mb-2">
                    <label class="small mb-1" for="tanggal_akhir">Tanggal akhir</label>
                    <input type="date" id="tanggal_akhir" name="tanggal_akhir" value="{{ $akhir->toDateString() }}" class="form-control form-control-sm @error('tanggal_akhir') is-invalid @enderror">
                </div>
                <div class="col-12 col-md-6 mb-2">
                    <button type="submit" class="btn btn-sm btn-primary"><i class="fas fa-filter mr-1"></i> Tampilkan</button>
                    @foreach ([
                        'Bulan ini' => [today()->startOfMonth(), today()],
                        'Bulan lalu' => [today()->subMonthNoOverflow()->startOfMonth(), today()->subMonthNoOverflow()->endOfMonth()],
                        'Tahun ini' => [today()->startOfYear(), today()],
                    ] as $label => [$a, $b])
                        <a href="{{ route('laporan.index', ['tanggal_awal' => $a->toDateString(), 'tanggal_akhir' => $b->toDateString()]) }}" class="btn btn-sm btn-light border">{{ $label }}</a>
                    @endforeach
                </div>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="col-6 col-md-4 col-xl-2"><x-kartu-statistik label="Naskah masuk" :nilai="$r['surat_masuk']" ikon="fa-inbox" warna="primary" /></div>
        <div class="col-6 col-md-4 col-xl-2"><x-kartu-statistik label="Naskah keluar" :nilai="$r['surat_keluar']" ikon="fa-paper-plane" warna="navy" /></div>
        <div class="col-6 col-md-4 col-xl-2"><x-kartu-statistik label="Disposisi" :nilai="$r['disposisi']" ikon="fa-share-nodes" warna="gold" /></div>
        <div class="col-6 col-md-4 col-xl-2"><x-kartu-statistik label="Masuk selesai" :nilai="$r['surat_masuk_selesai']" ikon="fa-circle-check" warna="success" /></div>
        <div class="col-6 col-md-4 col-xl-2"><x-kartu-statistik label="Disposisi terlambat" :nilai="$r['disposisi_terlambat']" ikon="fa-triangle-exclamation" warna="danger" /></div>
        <div class="col-6 col-md-4 col-xl-2">
            <div class="card kartu-stat mb-3"><div class="card-body">
                <div class="ikon ikon-info"><i class="fas fa-stopwatch"></i></div>
                <div><div class="nilai" style="font-size:1.2rem">{{ $hari($w['rata_hari']) }}</div><div class="label">Rata-rata selesai</div></div>
            </div></div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header"><h3 class="card-title">Naskah masuk & keluar per bulan</h3></div>
                <div class="card-body"><div id="grafik-bulan" style="height:300px"></div></div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header"><h3 class="card-title">Status disposisi</h3></div>
                <div class="card-body">
                    @if (array_sum($laporan['status_disposisi']))
                        <div id="grafik-disposisi" style="height:300px"></div>
                    @else
                        <x-kosong judul="Belum ada disposisi pada periode ini" ikon="fa-chart-pie" />
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header p-0 border-bottom-0">
            <ul class="nav nav-tabs px-3 pt-2" role="tablist" style="border-bottom:1px solid var(--ss-garis)">
                @foreach (['masuk' => 'Naskah masuk', 'keluar' => 'Naskah keluar', 'unit' => 'Rekap per unit kerja', 'terlambat' => 'Disposisi terlambat', 'waktu' => 'Waktu penyelesaian', 'tindak' => 'Tindak lanjut', 'arsip' => 'Arsip'] as $id => $label)
                    <li class="nav-item"><a class="nav-link {{ $loop->first ? 'active' : '' }}" data-toggle="tab" href="#tab-{{ $id }}" role="tab">{{ $label }}
                        @if ($id === 'terlambat' && $r['disposisi_terlambat'])<span class="badge badge-danger ml-1">{{ $r['disposisi_terlambat'] }}</span>@endif</a></li>
                @endforeach
            </ul>
        </div>
        <div class="card-body tab-content">
            <div class="tab-pane fade show active" id="tab-masuk" role="tabpanel">
                @include('laporan._rekap_naskah', ['rekap' => $laporan['surat_masuk'], 'warna' => 'var(--ss-primary)'])
            </div>

            <div class="tab-pane fade" id="tab-keluar" role="tabpanel">
                @include('laporan._rekap_naskah', ['rekap' => $laporan['surat_keluar'], 'warna' => 'var(--ss-navy)'])
            </div>

            <div class="tab-pane fade" id="tab-unit" role="tabpanel">
                @if ($laporan['per_unit']->isEmpty())
                    <x-kosong judul="Belum ada disposisi pada periode ini" ikon="fa-sitemap" />
                @else
                    <div class="table-responsive">
                        <table class="table table-sm table-hover">
                            <thead><tr><th>Unit kerja</th><th class="text-right">Total</th><th class="text-right">Belum diterima</th><th class="text-right">Dalam proses</th><th class="text-right">Selesai</th><th class="text-right">Ditolak/batal</th><th class="text-right">Terlambat</th><th class="text-right">Rata-rata selesai</th></tr></thead>
                            <tbody>
                            @foreach ($laporan['per_unit'] as $u)
                                <tr>
                                    <td class="fw-semibold">{{ $u['unit'] }}</td>
                                    <td class="text-right">{{ $u['total'] }}</td>
                                    <td class="text-right">{{ $u['belum_diterima'] }}</td>
                                    <td class="text-right">{{ $u['dalam_proses'] }}</td>
                                    <td class="text-right text-success fw-semibold">{{ $u['selesai'] }}</td>
                                    <td class="text-right">{{ $u['ditolak_batal'] }}</td>
                                    <td class="text-right {{ $u['terlambat'] ? 'text-danger fw-semibold' : '' }}">{{ $u['terlambat'] }}</td>
                                    <td class="text-right">{{ $hari($u['rata_hari']) }}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>

            <div class="tab-pane fade" id="tab-terlambat" role="tabpanel">
                @if ($laporan['terlambat']->isEmpty())
                    <x-kosong judul="Tidak ada disposisi terlambat" ikon="fa-thumbs-up" pesan="Seluruh disposisi pada periode ini sesuai batas waktu." />
                @else
                    <div class="table-responsive">
                        <table class="table table-sm table-hover">
                            <thead><tr><th>Disposisi</th><th>Naskah</th><th>Penerima</th><th>Batas</th><th>Status</th><th class="text-right">Terlambat</th></tr></thead>
                            <tbody>
                            @foreach ($laporan['terlambat'] as $p)
                                <tr>
                                    <td><a href="{{ route('disposisi.show', $p->id_disposisi) }}">{{ $p->disposisi->nomor_disposisi }}</a><div class="small teks-redup">dari {{ $p->disposisi->pemberi->nama }}</div></td>
                                    <td>{{ \Illuminate\Support\Str::limit($p->disposisi->suratMasuk->perihal, 60) }}</td>
                                    <td>{{ $p->label }}</td>
                                    <td class="text-nowrap">{{ $p->batas_efektif->translatedFormat('d M Y') }}</td>
                                    <td><x-badge-status :status="$p->status" /></td>
                                    <td class="text-right text-danger fw-semibold text-nowrap">{{ $p->hari_terlambat }} hari</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>

            <div class="tab-pane fade" id="tab-waktu" role="tabpanel">
                <div class="row">
                    <div class="col-md-5 mb-3">
                        <table class="table table-sm">
                            <tbody>
                            <tr><td>Naskah masuk diselesaikan</td><td class="text-right fw-semibold">{{ $w['jumlah'] }}</td></tr>
                            <tr><td>Rata-rata waktu penyelesaian naskah</td><td class="text-right fw-semibold">{{ $hari($w['rata_hari']) }}</td></tr>
                            <tr><td>Tercepat</td><td class="text-right">{{ $hari($w['tercepat_hari']) }}</td></tr>
                            <tr><td>Terlama</td><td class="text-right">{{ $hari($w['terlama_hari']) }}</td></tr>
                            <tr><td>Rata-rata penyelesaian per penerima disposisi</td><td class="text-right fw-semibold">{{ $hari($w['rata_hari_disposisi']) }}</td></tr>
                            </tbody>
                        </table>
                        <small class="teks-redup">Waktu naskah dihitung dari tanggal terima sampai naskah selesai; waktu disposisi dari disposisi dibuat sampai penerima mencatat tindak lanjutnya.</small>
                    </div>
                    <div class="col-md-7 mb-3">
                        <table class="table table-sm">
                            <thead><tr><th>Kategori naskah</th><th class="text-right">Naskah selesai</th><th class="text-right">Rata-rata</th></tr></thead>
                            <tbody>
                            @forelse ($w['per_kategori'] as $k)
                                <tr><td>{{ $k['kategori'] }}</td><td class="text-right">{{ $k['jumlah'] }}</td><td class="text-right">{{ $hari($k['rata_hari']) }}</td></tr>
                            @empty
                                <tr><td colspan="3" class="text-center teks-redup small py-3">Belum ada naskah yang selesai</td></tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="tab-tindak" role="tabpanel">
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <x-kartu-statistik label="Catatan tindak lanjut" :nilai="$laporan['tindak_lanjut']['jumlah']" ikon="fa-list-check" warna="info" />
                        <div class="small teks-redup">Rata-rata <b>{{ number_format($laporan['tindak_lanjut']['rata_catatan_per_penerima'], 1, ',', '.') }}</b> catatan per penerima.</div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <x-kartu-statistik label="Disposisi selesai" :nilai="$laporan['tindak_lanjut']['dinyatakan_selesai']" ikon="fa-circle-check" warna="success" />
                        <div class="small teks-redup">Penerima disposisi yang sudah menindaklanjuti.</div>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="tab-arsip" role="tabpanel">
                <div class="row">
                    <div class="col-md-6 mb-3"><x-tabel-hitung :data="['Selesai, belum diarsipkan' => $laporan['arsip']['surat_masuk']['selesai'], 'Diarsipkan' => $laporan['arsip']['surat_masuk']['diarsipkan']]" judul="Naskah masuk" /></div>
                    <div class="col-md-6 mb-3"><x-tabel-hitung :data="['Selesai, belum diarsipkan' => $laporan['arsip']['surat_keluar']['selesai'], 'Diarsipkan' => $laporan['arsip']['surat_keluar']['diarsipkan']]" judul="Naskah keluar" warna="var(--ss-navy)" /></div>
                </div>
                @if (Route::has('arsip.index') && auth()->user()->punyaPermission('arsip.lihat'))
                    <a href="{{ route('arsip.index') }}" class="btn btn-sm btn-outline-primary"><i class="fas fa-box-archive mr-1"></i> Buka arsip digital</a>
                @endif
            </div>
        </div>
    </div>
@endsection

@push('js-vendor')
    <script src="{{ asset('vendor/highcharts/highcharts.js') }}"></script>
    <script src="{{ asset('vendor/highcharts/modules/accessibility.js') }}"></script>
@endpush

@push('js')
<script>
    Highcharts.setOptions({ chart: { style: { fontFamily: 'Inter, system-ui, sans-serif' } }, credits: { enabled: false } });

    Highcharts.chart('grafik-bulan', {
        chart: { type: 'column' },
        title: { text: null },
        xAxis: { categories: @json($laporan['per_bulan']['label']) },
        yAxis: { title: { text: 'Jumlah naskah' }, allowDecimals: false, gridLineColor: '#eef1f6' },
        tooltip: { shared: true },
        plotOptions: { column: { borderRadius: 4, pointPadding: 0.08, groupPadding: 0.14 } },
        series: [
            { name: 'Naskah masuk', data: @json($laporan['per_bulan']['masuk']), color: '#1565C0' },
            { name: 'Naskah keluar', data: @json($laporan['per_bulan']['keluar']), color: '#D4AF37' },
        ],
    });

    @if (array_sum($laporan['status_disposisi']))
    // Warna mengikuti kolom "warna" status di database, sama dengan badge di seluruh aplikasi.
    const warnaStatus = @json(\App\Models\Referensi\StatusDisposisi::query()->pluck('warna', 'nama_status'));
    const warnaHex = { primary: '#1565C0', info: '#17a2b8', success: '#16884a', warning: '#f0a020', danger: '#c62828', dark: '#012D50', secondary: '#98a2b3' };
    Highcharts.chart('grafik-disposisi', {
        chart: { type: 'pie' },
        title: { text: null },
        tooltip: { pointFormat: '<b>{point.y}</b> ({point.percentage:.0f}%)' },
        plotOptions: { pie: { innerSize: '58%', dataLabels: { enabled: false }, showInLegend: true } },
        series: [{
            name: 'Penerima',
            data: Object.entries(@json($laporan['status_disposisi'])).filter(([, n]) => n > 0).map(([name, y]) => ({ name, y, color: warnaHex[warnaStatus[name]] || '#98a2b3' })),
        }],
    });
    @endif
</script>
@endpush