@extends('layouts.app')

@section('title', 'Capaian')
@section('page-title', 'Capaian - ' . $direktoratName)

@section('content')
<div class="content-card mb-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            @php
                $routes = [
                    1 => 'data.sistem-dan-strategi',
                    2 => 'data.pembiayaan-perumahan',
                    3 => 'data.efisiensi-dan-kemitraan',
                    4 => 'data.keterbukaan-publik',
                    5 => 'data.pengendali-resiko',
                ];
            @endphp
            <a href="{{ route($routes[$direktoratId] ?? 'data') }}" class="btn btn-secondary btn-sm">
                <i class="bi bi-arrow-left"></i> Kembali
            </a>
        </div>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#tambahCapaianModal">
            <i class="bi bi-plus-circle"></i> Tambah Capaian
        </button>
    </div>
    
    <canvas id="capaianChart" height="80"></canvas>
</div>

<div class="content-card">
    <h4 class="mb-4">Data Capaian dan Perbandingan</h4>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="table-responsive">
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>Tahun</th>
                    <th>Nama Target</th>
                    <th>Target</th>
                    <th>Capaian</th>
                    <th>Persentase</th>
                    <th>Keterangan</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($targets as $target)
                    @php
                        $capaian = $target->capaians->first();
                        $persentase = $capaian && $target->nilai > 0 
                            ? round(($capaian->nilai / $target->nilai) * 100, 2) 
                            : 0;
                    @endphp
                    <tr>
                        <td>{{ $target->tahun }}</td>
                        <td><strong>{{ $target->nama }}</strong></td>
                        <td>{{ number_format($target->nilai, 2, ',', '.') }}</td>
                        <td>{{ $capaian ? number_format($capaian->nilai, 2, ',', '.') : '-' }}</td>
                        <td>
                            @if($capaian)
                                <span class="badge {{ $persentase >= 100 ? 'bg-success' : ($persentase >= 80 ? 'bg-warning' : 'bg-danger') }}">
                                    {{ $persentase }}%
                                </span>
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </td>
                        <td>{{ $capaian && $capaian->keterangan ? $capaian->keterangan : '-' }}</td>
                        <td>
                            @if($capaian)
                                <form action="{{ route('data.capaian.destroy', [$direktoratId, $capaian->id]) }}" method="POST" class="d-inline" onsubmit="return confirm('Apakah Anda yakin ingin menghapus capaian ini?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger">Hapus</button>
                                </form>
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center">Belum ada data target. Silakan tambah target terlebih dahulu.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Modal Tambah Capaian -->
<div class="modal fade" id="tambahCapaianModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tambah Capaian</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('data.capaian.store', $direktoratId) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="target_id" class="form-label">Pilih Target <span class="text-danger">*</span></label>
                        <select class="form-select" id="target_id" name="target_id" required>
                            <option value="">-- Pilih Target --</option>
                            @foreach($targets as $target)
                                <option value="{{ $target->id }}" data-tahun="{{ $target->tahun }}" data-nilai="{{ $target->nilai }}">
                                    {{ $target->tahun }} - {{ $target->nama }} (Target: {{ number_format($target->nilai, 2, ',', '.') }})
                                </option>
                            @endforeach
                        </select>
                        <small class="form-text text-muted">Pilih target yang akan diisi capaiannya</small>
                    </div>
                    <div class="mb-3">
                        <label for="nilai" class="form-label">Nilai Capaian</label>
                        <input type="number" class="form-control" id="nilai" name="nilai" 
                               step="0.01" min="0" required>
                    </div>
                    <div class="mb-3">
                        <label for="keterangan" class="form-label">Keterangan (Opsional)</label>
                        <textarea class="form-control" id="keterangan" name="keterangan" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

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