@extends('layouts.app')

@section('title', 'Dashboard - Monev LLDIKTI XV')
@section('page-title', 'Dashboard')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <p class="text-secondary mb-0">Selamat datang, <strong>{{ Auth::user()->name }}</strong></p>
    @if(Auth::user()->isLppmPt())
        <a href="{{ route('program.create') }}" class="btn btn-primary">
            <i class="bi bi-plus-lg me-2"></i>Tambah Program
        </a>
    @endif
</div>

<div class="row g-3 mb-4">
    <div class="col-6 col-lg-3">
        <div class="small-box text-bg-primary">
            <div class="inner">
                <h3>{{ $totalProgram }}</h3>
                <p>Total Program</p>
            </div>
            <i class="small-box-icon bi bi-journal-text"></i>
            <a href="{{ route('program.index') }}" class="small-box-footer link-light">
                Selengkapnya <i class="bi bi-arrow-right-circle"></i>
            </a>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="small-box text-bg-success">
            <div class="inner">
                <h3>{{ $totalSesuai }}</h3>
                <p>Dokumen Sesuai</p>
            </div>
            <i class="small-box-icon bi bi-check-circle"></i>
            <a href="{{ route('program.index') }}" class="small-box-footer link-light">
                Selengkapnya <i class="bi bi-arrow-right-circle"></i>
            </a>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="small-box text-bg-danger">
            <div class="inner">
                <h3>{{ $totalKurang }}</h3>
                <p>Dokumen Kurang</p>
            </div>
            <i class="small-box-icon bi bi-x-circle"></i>
            <a href="{{ route('program.index') }}" class="small-box-footer link-light">
                Selengkapnya <i class="bi bi-arrow-right-circle"></i>
            </a>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="small-box text-bg-warning">
            <div class="inner">
                <h3>{{ $totalPerbaikan }}</h3>
                <p>Perlu Perbaikan</p>
            </div>
            <i class="small-box-icon bi bi-exclamation-triangle"></i>
            <a href="{{ route('program.index') }}" class="small-box-footer link-light">
                Selengkapnya <i class="bi bi-arrow-right-circle"></i>
            </a>
        </div>
    </div>
</div>

@if(Auth::user()->isAdminLldikti())
<div class="row g-4 mb-4">
    <div class="col-lg-8">
        <div class="card h-100">
            <div class="card-header border-0">
                <h3 class="card-title fw-bold"><i class="bi bi-graph-up me-2"></i>Tren Program (6 Bulan Terakhir)</h3>
            </div>
            <div class="card-body">
                <div id="chart-bulanan" style="min-height: 260px;"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-header border-0">
                <h3 class="card-title fw-bold"><i class="bi bi-pie-chart me-2"></i>Status Validasi Dokumen</h3>
            </div>
            <div class="card-body">
                <div id="chart-validasi" style="min-height: 260px;"></div>
            </div>
        </div>
    </div>
</div>
@endif

<div class="row g-4">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header border-0 d-flex justify-content-between align-items-center">
                <h3 class="card-title fw-bold"><i class="bi bi-clock-history me-2"></i>Program Terbaru</h3>
                <a href="{{ route('program.index') }}" class="btn btn-sm btn-outline-primary">Lihat Semua</a>
            </div>
            <div class="card-body table-responsive p-0">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="ps-3">Kode</th>
                            <th>Judul</th>
                            <th>Jenis</th>
                            <th>Status</th>
                            <th style="width: 180px;">Kelengkapan</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentPrograms as $program)
                            <tr>
                                <td class="ps-3"><span class="badge text-bg-secondary">{{ $program->kode_program }}</span></td>
                                <td>{{ Str::limit($program->judul, 40) }}</td>
                                <td>
                                    <span class="badge {{ $program->jenis === 'penelitian' ? 'text-bg-info' : 'text-bg-primary' }}">
                                        {{ ucfirst($program->jenis) }}
                                    </span>
                                </td>
                                <td>
                                    <span class="badge {{ $program->status_program === 'aktif' ? 'text-bg-success' : ($program->status_program === 'selesai' ? 'text-bg-primary' : 'text-bg-danger') }}">
                                        {{ ucfirst($program->status_program) }}
                                    </span>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="progress flex-grow-1" style="height: 8px;" role="progressbar">
                                            <div class="progress-bar {{ $program->progress_validasi >= 100 ? 'bg-success' : ($program->progress_validasi >= 50 ? 'bg-info' : 'bg-warning') }}"
                                                 style="width: {{ $program->progress_validasi }}%"></div>
                                        </div>
                                        <small class="ms-2 text-secondary">{{ $program->progress_validasi }}%</small>
                                    </div>
                                </td>
                                <td>
                                    <a href="{{ route('program.show', $program) }}" class="btn btn-sm btn-outline-primary">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center text-secondary py-4">Belum ada program.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        @if(Auth::user()->isAdminLldikti())
        <div class="card mb-4">
            <div class="card-header border-0">
                <h3 class="card-title fw-bold"><i class="bi bi-bar-chart me-2"></i>Program per Jenis</h3>
            </div>
            <div class="card-body">
                <div id="chart-jenis" style="min-height: 200px;"></div>
            </div>
        </div>
        @endif

        <div class="card">
            <div class="card-header border-0">
                <h3 class="card-title fw-bold"><i class="bi bi-list-check me-2"></i>Ringkasan Validasi</h3>
            </div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span><i class="bi bi-check-circle text-success me-2"></i>Sesuai</span>
                    <span class="badge text-bg-success rounded-pill">{{ $totalSesuai }}</span>
                </li>
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span><i class="bi bi-x-circle text-danger me-2"></i>Dokumen Kurang</span>
                    <span class="badge text-bg-danger rounded-pill">{{ $totalKurang }}</span>
                </li>
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span><i class="bi bi-exclamation-triangle text-warning me-2"></i>Perbaikan</span>
                    <span class="badge text-bg-warning rounded-pill">{{ $totalPerbaikan }}</span>
                </li>
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span><i class="bi bi-clock text-secondary me-2"></i>Menunggu</span>
                    <span class="badge text-bg-secondary rounded-pill">{{ $totalMenunggu }}</span>
                </li>
            </ul>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const elBulanan = document.getElementById('chart-bulanan');
    const elValidasi = document.getElementById('chart-validasi');
    const elJenis = document.getElementById('chart-jenis');

    if (elBulanan) {
        new ApexCharts(elBulanan, {
            chart: { type: 'area', height: 260, toolbar: { show: false } },
            series: [{ name: 'Program', data: @json($chartBulanan['data']) }],
            xaxis: { categories: @json($chartBulanan['labels']) },
            colors: ['#1e3a8a'],
            stroke: { curve: 'smooth', width: 3 },
            fill: { type: 'gradient', gradient: { opacityFrom: 0.45, opacityTo: 0.05 } },
            dataLabels: { enabled: true },
            tooltip: { y: { formatter: v => v + ' program' } }
        }).render();
    }

    if (elValidasi) {
        new ApexCharts(elValidasi, {
            chart: { type: 'donut', height: 260 },
            series: @json(array_values($chartValidasi)),
            labels: ['Sesuai', 'Dokumen Kurang', 'Perbaikan', 'Menunggu'],
            colors: ['#198754', '#dc3545', '#f59e0b', '#6c757d'],
            legend: { position: 'bottom' },
            plotOptions: { pie: { donut: { size: '65%' } } }
        }).render();
    }

    if (elJenis) {
        new ApexCharts(elJenis, {
            chart: { type: 'bar', height: 200, toolbar: { show: false } },
            series: [{ name: 'Program', data: @json(array_values($chartJenis)) }],
            xaxis: { categories: ['Penelitian', 'Pengabdian'] },
            colors: ['#0ea5e9'],
            plotOptions: { bar: { borderRadius: 6, columnWidth: '45%', distributed: true } },
            legend: { show: false },
            dataLabels: { enabled: true }
        }).render();
    }
});
</script>
@endpush