





<div style="background-color: white; border-radius: 4%;">
    <center>
        <p style="font-weight: bold;">Data Pesebaran Demam Berdarah dan Curah Hujan Tahun Terakhir Kabupaten Kendal</p>
    </center>
</div>



<div class="card" style="border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
    <div class="card-body">
        
        <form method="post" action="<?= base_url('filter') ?>">
            
                <label for="year" class="form-label" style="font-weight: bold;">Select Year:</label>
                <select class="form-select" id="year" name="year" required style="border-radius: 5px; width: 100px height: 100px" >
                    <?php foreach ($years as $year): ?>
                        <option value="<?= $year ?>" <?= $year == $selected_year ? 'selected' : '' ?>><?= $year ?></option>
                    <?php endforeach; ?>
                </select>
            
            
                <button type="submit" class="btn btn-primary" style="border-radius: 5px; ">Submit</button>
            
        </form>
    </div>
</div>



<br>
<div style="background-color: white; border-radius: 4%;">
    <canvas id="lineChart" height="300"></canvas>
</div>

<script>
    var chartData = <?= $chart_data ?>;

    var ctx = document.getElementById('lineChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: chartData.labels,
            datasets: chartData.datasets
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>
