@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">

                <div class="row mt-4">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header pb-0 pt-3 bg-transparent">
                                <h4 class="text-capitalize">Grafik Inventaris Bermasalah (3 Bulan Terakhir)</h4>
                            </div>
                            <div class="card-body p-3">
                                <div class="chart">
                                    <canvas id="inventory-chart" class="chart-canvas" height="100"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header pb-0 pt-3 bg-transparent">
                                <h4 class="text-capitalize">Data Inventaris Bermasalah (3 Bulan Terakhir)</h4>
                            </div>
                            <div class="card-body p-3">
                                <div class="table-responsive">
                                    <table class="table display" id="list_{{ $dmenu }}">
                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th>No</th>
                                                <th>Kode Inventaris</th>
                                                <th>Lokasi</th>
                                                <th>Tanggal Pengecekan</th>
                                                <th>Aspek</th>
                                                <th>Keterangan</th>
                                                <th>Checker</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                                $no = 1;
                                            @endphp
                                            @foreach ($invMasalahData as $data)
                                                <tr>
                                                    <td>{{ $no++ }}</td>
                                                    <td class="text-sm font-weight-bold text-dark">
                                                        {{ $data->id_mst_inventaris }}
                                                    </td>
                                                    <td>{{ $data->area }} ({{ $data->gedung }})</td>
                                                    <td>{{ $data->tgl_pengecekan }}</td>
                                                    <td>{{ $data->deskripsi }}</td>
                                                    <td>{{ $data->keterangan }}</td>
                                                    <td>{{ $data->id_pengecek }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        let columnAbjad = '';
        $(document).ready(function() {
            let numColumns = $('#list_{{ $dmenu }}').DataTable().columns().count();
            let columnNames = '';
            for (let index = 0; index < numColumns; index++) {
                columnNames = $('#list_{{ $dmenu }}').DataTable().columns(index).header()[0].textContent;
                if (columnNames == 'Status' || columnNames == 'status') {
                    columnAbjad = String.fromCharCode(65 + index);
                }
            }
        });
        //set table into datatables
        $('#list_{{ $dmenu }}').DataTable({
            "language": {
                "search": "Cari :",
                "lengthMenu": "Tampilkan _MENU_ baris",
                "zeroRecords": "Maaf - Data tidak ada",
                "info": "Data _START_ - _END_ dari _TOTAL_",
                "infoEmpty": "Tidak ada data",
                "infoFiltered": "(pencarian dari _MAX_ data)"
            },
            responsive: true
        });
        //set color button datatables
        $('.dt-button').addClass('btn btn-secondary');
        $('.dt-button').removeClass('dt-button');
        var ctx = document.getElementById('inventory-chart').getContext('2d');
        var inventoryChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: @json($months), // Menampilkan label untuk bulan
                datasets: [{
                    label: 'Inventaris Bermasalah', // Label untuk legenda
                    data: @json($problematicItems), // Data jumlah inventaris bermasalah untuk 3 bulan terakhir
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)', // Warna untuk bar pertama
                        'rgba(255, 159, 64, 0.2)', // Warna untuk bar kedua
                        'rgba(75, 192, 192, 0.2)' // Warna untuk bar ketiga
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)', // Border warna untuk bar pertama
                        'rgba(255, 159, 64, 1)', // Border warna untuk bar kedua
                        'rgba(75, 192, 192, 1)' // Border warna untuk bar ketiga
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        labels: {
                            // Set custom labels with colors based on the dataset color
                            generateLabels: function(chart) {
                                var labels = chart.data.datasets[0].backgroundColor;
                                return chart.data.labels.map((label, index) => {
                                    return {
                                        text: label,
                                        fillStyle: labels[index],
                                        strokeStyle: chart.data.datasets[0].borderColor[index],
                                        lineWidth: 2
                                    };
                                });
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1
                        }
                    }
                }
            }
        });
    </script>
@endpush