@extends('layouts.app')

@section('title', 'Dashboard')
@section('page-title', 'Dashboard')

@section('content')
<div class="content-card mb-4">
    <h4 class="mb-4">Rangkuman Semua Direktorat (5 Tahun Terakhir)</h4>
    <canvas id="dashboardChart" height="80"></canvas>
</div>

<div class="row mb-4">
    <div class="col-md-4">
        <div class="content-card text-center">
            <h5 class="text-muted mb-2">Total Target</h5>
            <h3 class="mb-0">{{ number_format($totalTarget, 2, ',', '.') }}</h3>
        </div>
    </div>
    <div class="col-md-4">
        <div class="content-card text-center">
            <h5 class="text-muted mb-2">Total Capaian</h5>
            <h3 class="mb-0">{{ number_format($totalCapaian, 2, ',', '.') }}</h3>
        </div>
    </div>
    <div class="col-md-4">
        <div class="content-card text-center">
            <h5 class="text-muted mb-2">Persentase Capaian</h5>
            <h3 class="mb-0">
                <span class="badge {{ $totalPersentase >= 100 ? 'bg-success' : ($totalPersentase >= 80 ? 'bg-warning' : 'bg-danger') }}" style="font-size: 1.5rem; padding: 0.5rem 1rem;">
                    {{ $totalPersentase }}%
                </span>
            </h3>
        </div>
    </div>
</div>

<div class="content-card">
    <h4 class="mb-4">Rincian per Direktorat</h4>
    <div class="table-responsive">
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>Direktorat</th>
                    <th>Target</th>
                    <th>Capaian</th>
                    <th>Persentase</th>
                </tr>
            </thead>
            <tbody>
                @foreach($dataRangkuman as $data)
                    <tr>
                        <td><strong>{{ $data['nama'] }}</strong></td>
                        <td>{{ number_format($data['target'], 2, ',', '.') }}</td>
                        <td>{{ number_format($data['capaian'], 2, ',', '.') }}</td>
                        <td>
                            <span class="badge {{ $data['persentase'] >= 100 ? 'bg-success' : ($data['persentase'] >= 80 ? 'bg-warning' : 'bg-danger') }}">
                                {{ $data['persentase'] }}%
                            </span>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('dashboardChart').getContext('2d');
    const dataGrafik = {!! $dataGrafik !!};
    
    const chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: dataGrafik.map(d => d.tahun),
            datasets: [
                {
                    label: 'Total Target',
                    data: dataGrafik.map(d => d.target),
                    backgroundColor: 'rgba(102, 126, 234, 0.8)',
                    borderColor: 'rgb(102, 126, 234)',
                    borderWidth: 1
                },
                {
                    label: 'Total Capaian',
                    data: dataGrafik.map(d => d.capaian),
                    backgroundColor: 'rgba(118, 75, 162, 0.8)',
                    borderColor: 'rgb(118, 75, 162)',
                    borderWidth: 1
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'Grafik Target vs Capaian Semua Direktorat (5 Tahun Terakhir)'
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>
@endpush
@endsection