@extends('layouts.master')

@section('title', 'Dashboard')


@section('css')
<style>
#mapCanvas {
    width: 100%;
    height: 600px;
    
}
</style>
@endsection


@section('content')
<div class="row">

    <div class="col-md-3">
        <div class="info-box">
            <span class="info-box-icon bg-info elevation-1"><i class="fas fa-clock"></i></span>
            <div class="info-box-content" style="padding: 0.8%">
                <select class="form-control"  id="periodeOPD" style="padding: 0%">
                    @foreach ($periode as $per)
                    <option value="{{$per->id}}" {{$per->id==$periodeaktif->id?'selected':''}} >{{ Carbon\Carbon::parse($per->tgl_awal)->format('d-m-Y'); }} <b>S/d</b>  {{ Carbon\Carbon::parse($per->tgl_akhir)->format('d-m-Y'); }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="info-box mb-3">
            <span id="warnaStatusPelaporanOpd" class="info-box-icon  elevation-1"><i class="fas fa-file"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Status Pelaporan</span>
                <span class="info-box-number" id="statusPelaporanOpd" style="font-size: 20px;">memuat data...</span>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="info-box mb-3">
            <span id="warnaNilaiPelaporanOpd" class="info-box-icon bg-success elevation-1"><i class="fas fa-tag"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Nilai</span>
                <span class="info-box-number" id="nilaiPelaporanOpd" style="font-size: 20px;">memuat data...</span>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="info-box mb-3">
            <span id="warnaPredikatPelaporanOpd" class="info-box-icon bg-success elevation-1"><i class="fa fa-check"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Predikat</span>
                <span class="info-box-number" id="predikatPelaporanOpd" style="font-size: 20px;">memuat data...</span>
            </div>
        </div>
    </div>

</div>

    <div class="row">
        <div class="col-sm-12">
            <div class="card card-outline card-info">
                <div class="card-header">
                    <h5><strong>Evaluasi</strong></h5>
                </div>
                <div class="card-body">
                    <div class="row mt-2">
                        <div class="col-md-6">
                            <div class="card card-outline">
                                <div class="card-header">
                                    <h6>Nilai Komponen</h6>
                                </div>
                                <div class="card-body">
                                    <canvas id="elementChartKomponenOPD" height="200px"></canvas>
                                </div>
                            </div> 
                        </div>
                        <div class="col-md-6">
                            <div class="card card-outline">
                                <div class="card-header">
                                    <h6>Rekomendasi</h6>
                                </div>
                                <div class="card-body" style="min-height:410px; max-height:410px; overflow-y: scroll;">
                                    <table  id="table" class="table table-bordered table-hover dataTable dtr-inline" role="grid" style="width: 100%;">
                                        <thead>
                                            <tr>
                                                <th width="30" class="text-center">No</th>
                                                <th>Komponen</th>
                                                <th>Subkomponen</th>
                                                <th>Rekomendasi</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div> 
                        </div>
                    </div>
                    <div class="row mt-2" style="display: none;">
                        <div class="col-md-12">
                            <div class="card card-outline">
                                <div class="card-header">
                                    <h5>Subkomponen</h5>
                                </div>
                                <div class="card-body">
                                    <canvas id="elementChartSubKomponenOPD" height="100"></canvas>
                                </div>
                            </div>
                                
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    






    
@endsection
@include('landing.jsChart')

@section('js')

<script>
    $(function() {
        chartOpdKomponen({{$periodeaktif->id}});
        nilaiOpd({{$periodeaktif->id}});
        chartOpdrekomendasi({{$periodeaktif->id}});
});
</script>


@endsection