@include('components.theme.pages.header')
<section>
    <div class="row mb-4">
        <div class="col-md-4 mb-2">
            <div class="card border-left-primary shadow py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Total Alternatif</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $alternatif }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-2">
            <div class="card border-left-primary shadow py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Total Kriteria</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $kriteria }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-2">
            <div class="card border-left-primary shadow py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Tanggal</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ date('j F Y, H:i:s') }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 mt-4">
            <div id="container2" style="width:100%; height:400px;"></div>
        </div>
        <div class="col-md-12 mt-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">Pengaturan Datasets</h6>
                </div>
                <div class="card-body">
                    @if(session()->has('success'))
                        <div class="alert alert-success mb-2">
                            {{ session()->get('success') }}
                        </div>
                    @else
                        @if(session()->has('error'))
                            <div class="alert alert-danger mb-2">
                                {{ session()->get('error') }}
                            </div>
                        @endif
                    @endif
                    <a href="{{ app_url('reset-datasets') }}" class="btn btn-primary w-100 btn-md"><i class="fas fa-database"></i> Atur Ulang Datasets</a>
                </div>
            </div>
        </div>
        <div class="col-md-4 mt-4">
            <div class="card shadow">
                <div class="card-header">
                    <h6 class="m-0">Nilai Preferensi</h6>
                </div>
                <div class="card-body">
                    @php
                        $i = 1;
                    @endphp
                    @foreach(\App\Models\Nilai::all() as $nilai)
                        <p class="mb-1">{{ $i++ }}. {{ $nilai->ket_nilai }}</p>
                    @endforeach
                </div>
            </div>
        </div>
        <div class="col-md-4 mt-4">
            <div class="card shadow">
                <div class="card-header">
                    <h6 class="m-0">Kriteria-Kriteria</h6>
                </div>
                <div class="card-body">
                    @foreach(\App\Models\Kriteria::all() as $kriteria)
                        <p class="mb-1">({{ $kriteria->id_kriteria }}) {{ $kriteria->nama_kriteria }}</p>
                    @endforeach
                </div>
            </div>
        </div>
        <div class="col-md-4 mt-4">
            <div class="card shadow">
                <div class="card-header">
                    <h6 class="m-0">Alternatif Items</h6>
                </div>
                <div class="card-body">
                    @foreach(\App\Models\Alternatif::all() as $alternatif)
                        <p class="mb-1">({{ $alternatif->id_alternatif }}) {{ $alternatif->nama_alternatif }}</p>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
@push('scripts')
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script>
        var chart1; // globally available
        $(document).ready(function() {
            chart1 = new Highcharts.Chart({
                chart: {
                    renderTo: 'container2',
                    type: 'column'
                },
                title: {
                    text: 'Grafik Perangkingan '
                },
                xAxis: {
                    categories: ['Alternatif']
                },
                yAxis: {
                    title: {
                        text: 'Jumlah Nilai'
                    }
                },
                series:
                [
                    @foreach(\App\Models\Ranking::orderBy('skor_bobot', 'desc')->get() as $items)
                        {
                            name: '{{ $items->account->nama_alternatif }}',
                            data: [{{ number_format($items->skor_bobot, 2) }}]
                        },
                    @endforeach
                ]
            });
        });
    </script>
@endpush
@include('components.theme.pages.footer')