@extends('layouts.app')

@section('title', 'Keterbukaan Publik')
@section('page-title', 'Keterbukaan Publik, Transparansi dan Akuntabilitas')

@section('content')
<style>
    .submenu-card {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        padding: 1.5rem;
        text-decoration: none;
        color: #333;
        display: block;
        transition: all 0.3s ease;
        border: 2px solid transparent;
    }
    
    .submenu-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
        border-color: #667eea;
        color: #667eea;
    }
    
    .submenu-card h5 {
        margin: 0;
        font-weight: 600;
        font-size: 1.1rem;
    }
    
    .submenu-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
    }
</style>

<div class="submenu-grid">
    <a href="{{ route('data.target', 4) }}" class="submenu-card">
        <h5>Target</h5>
        <p class="text-muted mb-0">Masukkan nilai target tahunan</p>
    </a>
    
    <a href="{{ route('data.capaian', 4) }}" class="submenu-card">
        <h5>Capaian</h5>
        <p class="text-muted mb-0">Lihat capaian dan grafik kinerja</p>
    </a>
    
    <a href="{{ route('data.laporan', 4) }}" class="submenu-card">
        <h5>Cetak Laporan</h5>
        <p class="text-muted mb-0">Download laporan Excel</p>
    </a>
</div>
@endsection