@extends('layouts.app')

@section('judul', 'Dashboard')
@section('subjudul', 'Selamat datang, '.auth()->user()->nama.' · '.now()->translatedFormat('l, d F Y'))

@section('aksi-header')
    @can('create', \App\Models\Transaksi\SuratMasuk::class)
        <a href="{{ route('surat-masuk.create') }}" class="btn btn-primary"><i class="fas fa-plus mr-1"></i> Naskah Masuk</a>
    @endcan
@endsection

@section('konten')
    @php
        $tampil = fn (string ...$kode) => (bool) array_intersect($kode, $widget);
        $kartu = array_values(array_filter(['statistik_masuk', 'statistik_keluar', 'statistik_menunggu', 'statistik_belum_dibaca'], fn ($k) => $tampil($k)));
        $kolomKartu = ['col-12', 'col-12 col-md-6', 'col-12 col-md-4', 'col-6 col-lg-3'][max(0, count($kartu) - 1)];
    @endphp

    @if ($kartu)
        <div class="row">
            @if ($tampil('statistik_masuk'))
                <div class="{{ $kolomKartu }}">
                    <x-kartu-statistik label="Total naskah masuk" :nilai="$statistik['total_surat_masuk']" ikon="fa-inbox" warna="primary"
                                       :url="Route::has('surat-masuk.index') ? route('surat-masuk.index') : null" />
                </div>
            @endif
            @if ($tampil('statistik_keluar'))
                <div class="{{ $kolomKartu }}">
                    <x-kartu-statistik label="Total naskah keluar" :nilai="$statistik['total_surat_keluar']" ikon="fa-paper-plane" warna="navy"
                                       :url="auth()->user()->can('viewAny', \App\Models\Transaksi\SuratKeluar::class) ? route('surat-keluar.index') : null" />
                </div>
            @endif
            @if ($tampil('statistik_menunggu'))
                <div class="{{ $kolomKartu }}">
                    <x-kartu-statistik label="Menunggu disposisi" :nilai="$statistik['menunggu_disposisi']" ikon="fa-hourglass-half" warna="gold" />
                </div>
            @endif
            @if ($tampil('statistik_belum_dibaca'))
                <div class="{{ $kolomKartu }}">
                    <x-kartu-statistik label="Disposisi belum dibaca" :nilai="$statistik['disposisi_belum_dibaca']" ikon="fa-envelope" warna="info"
                                       :url="route('disposisi.index')" />
                </div>
            @endif
        </div>
    @endif

    @if ($tampil('menunggu_disposisi', 'disposisi_untuk_saya'))
        <div class="row">
            @if ($tampil('menunggu_disposisi'))
                <div class="col-lg">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h3 class="card-title"><i class="fas fa-hourglass-half mr-1" style="color:var(--ss-gold)"></i> Naskah menunggu disposisi Anda</h3>
                            <span class="badge badge-lembut-warning">{{ $statistik['menunggu_disposisi'] }}</span>
                        </div>
                        <div class="card-body p-0">
                            @forelse ($menungguDisposisi as $s)
                                <div class="d-flex justify-content-between align-items-center px-3 py-2 border-bottom">
                                    <div style="min-width:0">
                                        <a href="{{ route('surat-masuk.show', $s) }}" class="fw-semibold">{{ \Illuminate\Support\Str::limit($s->perihal, 60) }}</a>
                                        <div class="small teks-redup">{{ $s->nomor_agenda }} · {{ $s->pengirim->label }}</div>
                                    </div>
                                    <div class="text-nowrap ml-2">
                                        <x-badge-atribut :surat="$s" />
                                        <a href="{{ route('disposisi.create', $s) }}" class="btn btn-sm btn-gold ml-1" title="Buat disposisi"><i class="fas fa-share-nodes"></i></a>
                                    </div>
                                </div>
                            @empty
                                <x-kosong judul="Tidak ada naskah yang menunggu" ikon="fa-mug-hot" pesan="Semua naskah sudah didisposisikan." />
                            @endforelse
                        </div>
                    </div>
                </div>
            @endif

            @if ($tampil('disposisi_untuk_saya'))
                <div class="col-lg">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h3 class="card-title"><i class="fas fa-inbox mr-1 text-primary"></i> Disposisi untuk saya</h3>
                            <a href="{{ route('disposisi.index') }}" class="small ml-auto">Lihat semua <i class="fas fa-arrow-right"></i></a>
                        </div>
                        <div class="card-body p-0">
                            @forelse ($disposisiUntukSaya as $p)
                                @php($batas = $p->disposisi->batasUntuk($p))
                                <a href="{{ route('disposisi.show', $p->id_disposisi) }}" class="d-flex justify-content-between align-items-center px-3 py-2 border-bottom text-reset" style="text-decoration:none">
                                    <div style="min-width:0">
                                        <div class="fw-semibold" style="color:var(--ss-primary)">{{ \Illuminate\Support\Str::limit($p->disposisi->suratMasuk->perihal, 60) }}</div>
                                        <div class="small teks-redup">{{ $p->disposisi->nomor_disposisi }} · dari {{ $p->disposisi->pemberi->nama }}</div>
                                    </div>
                                    <div class="text-right text-nowrap ml-2">
                                        <x-badge-status :status="$p->status" />
                                        @if ($batas)
                                            <div class="small {{ $batas->lt(today()) ? 'text-danger fw-semibold' : 'teks-redup' }}">s.d. {{ $batas->translatedFormat('d M') }}</div>
                                        @endif
                                    </div>
                                </a>
                            @empty
                                <x-kosong judul="Tidak ada disposisi terbuka" ikon="fa-circle-check" pesan="Disposisi baru untuk Anda akan muncul di sini." />
                            @endforelse
                        </div>
                    </div>
                </div>
            @endif
        </div>
    @endif

    @php($tampilDistribusi = $tampil('keluar_menunggu_distribusi') && $keluarMenungguDistribusi->isNotEmpty())
    @php($tampilKonfirmasi = $tampil('keluar_perlu_konfirmasi') && $keluarPerluKonfirmasi->isNotEmpty())
    @if ($tampilDistribusi || $tampilKonfirmasi)
        <div class="row">
            @if ($tampilDistribusi)
                <div class="col-lg">
                    <div class="card">
                        <div class="card-header"><h3 class="card-title"><i class="fas fa-paper-plane mr-1" style="color:var(--ss-gold)"></i> Naskah keluar menunggu dikirim</h3></div>
                        <div class="card-body p-0">
                            @foreach ($keluarMenungguDistribusi as $s)
                                <a href="{{ route('surat-keluar.show', $s) }}" class="d-flex justify-content-between align-items-center px-3 py-2 border-bottom text-reset" style="text-decoration:none">
                                    <div style="min-width:0">
                                        <div class="fw-semibold" style="color:var(--ss-primary)">{{ \Illuminate\Support\Str::limit($s->perihal, 60) }}</div>
                                        <div class="small teks-redup">{{ $s->nomor_surat }} · kepada {{ $s->tujuan->nama_tujuan }}</div>
                                    </div>
                                    <x-badge-atribut :surat="$s" />
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif
            @if ($tampilKonfirmasi)
                <div class="col-lg">
                    <div class="card">
                        <div class="card-header"><h3 class="card-title"><i class="fas fa-people-arrows mr-1 text-primary"></i> Naskah keluar perlu dikonfirmasi</h3></div>
                        <div class="card-body p-0">
                            @foreach ($keluarPerluKonfirmasi as $d)
                                <a href="{{ route('surat-keluar.show', $d->id_surat_keluar) }}" class="d-flex justify-content-between align-items-center px-3 py-2 border-bottom text-reset" style="text-decoration:none">
                                    <div style="min-width:0">
                                        <div class="fw-semibold" style="color:var(--ss-primary)">{{ \Illuminate\Support\Str::limit($d->suratKeluar->perihal, 60) }}</div>
                                        <div class="small teks-redup">{{ $d->suratKeluar->nomor_surat }} · {{ $d->tanggal_distribusi->translatedFormat('d M Y') }}</div>
                                    </div>
                                    <x-badge-status :status="$d->status" />
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif
        </div>
    @endif

    @if ($tampil('grafik_bulanan', 'grafik_status'))
    <div class="row">
        @if ($tampil('grafik_bulanan'))
        <div class="{{ $tampil('grafik_status') ? 'col-lg-8' : 'col-12' }}">
            <div class="card">
                <div class="card-header"><h3 class="card-title">Naskah masuk & keluar per bulan · {{ $tahun }}</h3></div>
                <div class="card-body"><div id="grafik-bulanan" style="height:300px"></div></div>
            </div>
        </div>
        @endif
        @if ($tampil('grafik_status'))
        <div class="{{ $tampil('grafik_bulanan') ? 'col-lg-4' : 'col-12' }}">
            <div class="card">
                <div class="card-header"><h3 class="card-title">Status naskah masuk</h3></div>
                <div class="card-body">
                    @if ($grafikStatus->isEmpty())
                        <x-kosong judul="Belum ada naskah" ikon="fa-chart-pie" />
                    @else
                        <div id="grafik-status" style="height:300px"></div>
                    @endif
                </div>
            </div>
        </div>
        @endif
    </div>
    @endif

    @if ($tampil('naskah_terbaru', 'aktivitas_terbaru'))
    <div class="row">
        @if ($tampil('naskah_terbaru'))
        <div class="{{ $tampil('aktivitas_terbaru') ? 'col-lg-7' : 'col-12' }}">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title">Naskah masuk terbaru</h3>
                    @if (Route::has('surat-masuk.index'))
                        <a href="{{ route('surat-masuk.index') }}" class="small ml-auto">Lihat semua <i class="fas fa-arrow-right"></i></a>
                    @endif
                </div>
                <div class="card-body p-0">
                    @if ($suratTerbaru->isEmpty())
                        <x-kosong judul="Belum ada naskah masuk" pesan="Naskah yang dicatat atau ditujukan kepada Anda akan tampil di sini." />
                    @else
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead><tr><th>Agenda</th><th>Perihal</th><th>Status</th></tr></thead>
                                <tbody>
                                @foreach ($suratTerbaru as $s)
                                    <tr>
                                        <td class="text-nowrap small">{{ $s->nomor_agenda ?? '—' }}<div class="teks-redup">{{ $s->tanggal_terima->translatedFormat('d M Y') }}</div></td>
                                        <td>
                                            <a href="{{ route('surat-masuk.show', $s) }}" class="fw-semibold">{{ \Illuminate\Support\Str::limit($s->perihal, 70) }}</a>
                                            <div class="small teks-redup">{{ $s->pengirim->label }}</div>
                                        </td>
                                        <td><x-badge-status :status="$s->status" /></td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>
        </div>
        @endif

        @if ($tampil('aktivitas_terbaru'))
            <div class="{{ $tampil('naskah_terbaru') ? 'col-lg-5' : 'col-12' }}">
                <div class="card">
                    <div class="card-header"><h3 class="card-title">Aktivitas terbaru</h3></div>
                    <div class="card-body" style="max-height:420px;overflow:auto">
                        <x-timeline :riwayat="$aktivitasTerbaru" />
                    </div>
                </div>
            </div>
        @endif
    </div>
    @endif

    @if (! $widget)
        <div class="card"><div class="card-body">
            <x-kosong judul="Dashboard belum diatur untuk role Anda" ikon="fa-gauge" pesan="Gunakan menu di sebelah kiri untuk mulai bekerja." />
        </div></div>
    @endif
@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 },
        lang: { decimalPoint: ',', thousandsSep: '.' },
    });

    @if (in_array('grafik_bulanan', $widget, true))
    Highcharts.chart('grafik-bulanan', {
        chart: { type: 'column' },
        title: { text: null },
        xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'] },
        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($grafikBulanan['masuk']), color: '#1565C0' },
            { name: 'Naskah keluar', data: @json($grafikBulanan['keluar']), color: '#D4AF37' },
        ],
    });
    @endif

    @if (in_array('grafik_status', $widget, true) && $grafikStatus->isNotEmpty())
    const warnaBadge = { primary: '#1565C0', info: '#17a2b8', success: '#16884a', warning: '#f0a020', danger: '#c62828', dark: '#012D50', secondary: '#98a2b3' };
    Highcharts.chart('grafik-status', {
        chart: { type: 'pie' },
        title: { text: null },
        tooltip: { pointFormat: '<b>{point.y}</b> naskah ({point.percentage:.0f}%)' },
        plotOptions: { pie: { innerSize: '58%', dataLabels: { enabled: false }, showInLegend: true } },
        series: [{ name: 'Naskah', data: @json($grafikStatus).map(s => ({ name: s.name, y: s.y, color: warnaBadge[s.warna] || '#98a2b3' })) }],
    });
    @endif
</script>
@endpush