@extends('layouts.index')

@push('css')

@endpush

@section('content')

<div class="page-content">
    <div class="container-fluid">

        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-flex align-items-center justify-content-between">
                    <div class="page-title">
                        <h4 class="mb-0 font-size-18">Grade Per PD</h4>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item active">Welcome to {{ env('APP_NAME') }}</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <!-- end page title -->


        <div class="page-content-wrapper">

            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="d-flex flex-column justify-content-center w-100 align-items-around"
                            style="display: block">
                            <div class="table-responsive py-4" style="padding: 25px;">
                                <div class="d-flex justify-content-between w-100 align-items-center">
                                    <form action="" class="d-flex w-75">
                                        <select name="type" id="" class="form-control w-100 mx-1">
                                            <option value="keuangan" {{ ($type === 'Realisasi Keuangan') ? 'selected' : '' }}>Realisasi Keuangan</option>
                                            <option value="fisik" {{ ($type === 'Realisasi Fisik') ? 'selected' : '' }}>Realisasi Fisik</option>
                                        </select>
                                        <button class="btn btn-warning">Filter</button>
                                    </form>
                                </div>
                                    {{-- <table class="table table-flush">
                                        <thead class="thead-light">
                                            <tr class="biasa">
                                                <th style="background: rgb(220, 218, 218)"></th>
                                                <th style="background: rgb(220, 218, 218)" colspan="2">Realisasi</th>
                                            </tr>
                                            <tr class="biasa">
                                                <th class="text-center" style="background: rgb(220, 218, 218)">OPD</th>
                                                <th style="background: rgb(220, 218, 218)">Fisik</th>
                                                <th class="text-center" style="background: rgb(220, 218, 218)">Realisasi Keuangan</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr data-self="pd" data-id="1">
                                                <td>
                                                    Dinas Pendidikan
                                                </td>
                                                <td>
                                                    <div class="">
                                                        <div class="progress">
                                                            <div class="progress-bar" role="progressbar" style="width: 25%;"
                                                                aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr data-self="pd" data-id="1">
                                                <td>
                                                    Dinas Pendidikan
                                                </td>
                                                <td>
                                                    <div class="">
                                                        <div class="progress">
                                                            <div class="progress-bar" role="progressbar" style="width: 22%;"
                                                                aria-valuenow="22" aria-valuemin="0" aria-valuemax="100">22%</div>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr data-self="pd" data-id="1">
                                                <td>
                                                    Dinas Pendidikan
                                                </td>
                                                <td>
                                                    <div class="">
                                                        <div class="progress">
                                                            <div class="progress-bar" role="progressbar" style="width: 15%;"
                                                                aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">15%</div>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>

                                            Indikator Sub Kegiatan
                                        </tbody>
                                    </table> --}}
                                    <div>
                                        <canvas id="chart" height="2000"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

@php
    $labels = collect($dataOpdPerBulan)->pluck('nama_perangkat_daerah')->toJson();
    if ($type === 'Realisasi Fisik') {
        $realisasi = collect($dataOpdPerBulan)->pluck('realisasiFisikPercentage')->toJson();
    }else{
        $realisasi = collect($dataOpdPerBulan)->pluck('realisasiKeuanganPercentage')->toJson();
    }
@endphp

@endsection

@push('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>

    const ctx = document.getElementById('chart').getContext('2d');
    const labels = {!! $labels !!};

    console.log(labels);

    const chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: '{!! $type !!}',
                data: {!! $realisasi !!},
                backgroundColor: '{!! $bgcolor !!}',
            }],
        },
        options: {
            indexAxis: 'y',
            responsive: true,
            plugins: {
                legend: {
                    display: false // Hide the legend to avoid unnecessary space
                }
            },
            scales: {
                y: {
                    ticks: {
                        callback: function(value, index, values) {
                            const label = labels[index];
                            const words = label.split(' ');
                            const maxWordLength = 15; // Adjust this value based on your needs
                            let lines = [];
                            let line = '';

                            words.forEach(function (word) {
                                if ((line + word).length <= maxWordLength) {
                                    line += word + ' ';
                                } else {
                                    lines.push(line.trim());
                                    line = word + ' ';
                                }
                            });

                            lines.push(line.trim());
                            return lines;
                        },
                        maxRotation: 0, // Keep the labels horizontal
                        font: {
                            size: 12 // Adjust the font size for better wrapping
                        }
                    }
                }
            }
        }
    });
</script>

{{-- <script>
    const ctx = document.getElementById('chart').getContext('2d');
    const chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: [
                'Dinas Pendidikan dan Kebudayaan Kota Samarinda',
                'Dinas Kesehatan Kota Samarinda',
                'Dinas Pekerjaan Umum dan Penataan Ruang Kota Samarinda',
                'Badan Perencanaan Pembangunan Daerah, Penelitian dan Pengembangan Kota Samarinda'
            ],
            datasets: [{
                label: 'Realisasi Keuangan',
                data: [100, 62, 53, 40],
                backgroundColor: '#9e9d24',
            }],
        },
        options: {
            indexAxis: 'y',
            responsive: true,
            plugins: {
                legend: {
                    display: false 
                }
            },
        }
    });
</script> --}}

{{-- <script>
    const ctx = document.getElementById('chart').getContext('2d');
    const chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: [
                'Dinas Pendidikan dan Kebudayaan Kota Samarinda',
                'Dinas Kesehatan Kota Samarinda',
                'Dinas Pekerjaan Umum dan Penataan Ruang Kota Samarinda',
                'Badan Perencanaan Pembangunan Daerah, Penelitian dan Pengembangan Kota Samarinda'
            ],
            datasets: [{
                label: 'Realisasi Keuangan',
                data: [100, 62, 53, 40],
                backgroundColor: '#9e9d24',
            }],
        },
        options: {
            indexAxis: 'y',
            responsive: true,
            scales: {
                y: {
                    ticks: {
                        callback: function(value, index, values) {
                            if (value.length > 15) {
                                var wrappedLabel = value.replace(/(.{15})/g, "$1\n");
                                return wrappedLabel;
                            } else {
                                console.log(value);
                                return value;
                            }
                        }
                    }
                }
            },
        }
    });
</script> --}}
@endpush