@extends('layouts.master')

@section('page-css')
@endsection
@section('content')
 <div class="subheader">
            <h1 class="subheader-title">
                Dashboard
            </h1>
        </div>
        <?php
            $jumlah = json_decode(@$profile->data_jumlah);
        ?>

<div class="row mb-2">
    <div class="col-md-6 mb-2">
        <div class="card h-100">
            <div class="card-body">
                <div id="container"></div>
            </div>
        </div>
    </div>
    
    <div class="col-md-6 mb-2">
        <div class="row">
            <div class="col-6 col-sm-12 col-xl-12 mb-2">
                <div class="card bg-primary-light border-left-primary text-primary">
                    <div class="card-body">
                        <div class="d-flex flex-row  justify-content-between align-items-center">
                            <div>
                                <span class="m-0 l-h-n fw-500">Total Sampah Organik</span> <br><br>
                                <h3 class="f20 fw-700 ">{{number_format(@$summary->organik)}} <span class="f12 fw-300">Kg</span> </h3>
                            </div>
                            <div>
                                <div class="p-2 bg-white rounded-circle">
                                    <i class="fal fa-recycle f16 text-primary"></i>
                                </div> 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-sm-12 col-xl-12 mb-2">
                <div class="card bg-warning-light border-left-warning text-warning">
                    <div class="card-body">
                        <div class="d-flex flex-row  justify-content-between align-items-center">
                            <div>
                                <span class="m-0 l-h-n fw-500">Total Sampah Anorganik</span> <br><br>
                                <h3 class="f20 fw-700 ">{{number_format(@$summary->anorganik)}} <span class="f12 fw-300">Kg</span> </h3>
                            </div>
                            <div>
                                <div class="p-2 bg-white rounded-circle">
                                    <i class="fal fa-recycle f16 text-warning"></i>
                                </div> 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        
            <div class="col-6 col-sm-12 col-xl-12 mb-2">
                <div class="card bg-info-light border-left-info text-info">
                    <div class="card-body">
                        <div class="d-flex flex-row  justify-content-between align-items-center">
                            <div>
                                <span class="m-0 l-h-n fw-500">Total Sampah B3</span> <br><br>
                                <h3 class="f20 fw-700 ">{{number_format(@$summary->b3)}} <span class="f12 fw-300">Kg</span> </h3>
                            </div>
                            <div>
                                <div class="p-2 bg-white rounded-circle">
                                    <i class="fal fa-recycle f16 text-info"></i>
                                </div> 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-sm-12 col-xl-12 mb-2">
                <div class="card bg-success-light border-left-success text-success">
                    <div class="card-body">
                        <div class="d-flex flex-row  justify-content-between align-items-center">
                            <div>
                                <span class="m-0 l-h-n fw-500">Total Sampah Minyak Jelantah</span> <br><br>
                                <h3 class="f20 fw-700 ">{{number_format(@$summary->minyak)}} <span class="f12 fw-300">Kg</span> </h3>
                            </div>
                            <div>
                                <div class="p-2 bg-white rounded-circle">
                                    <i class="fal fa-tint f16 text-success"></i>
                                </div> 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="row mb-4">
    <div class="col-md-6 mb-2">
        <div class="card">
            <div class="card-body">
                <div class="d-flex gap-2">
                    <div class="d-flex justify-content-center align-items-center gap-3">
                        <img src="{{ asset('assets/school.jpg') }}" class="img-fluid" width="180" alt="">
                        <div class="d-flex flex-column">
                            <h3 class="fw-700">{{@$profile->sekolah->nama_sekolah}}</h3>
                            <div class="d-flex gap-1 align-items-start mb-2">
                                <span class="p-2 badge bg-primary text-white">{{session('tingkat_sekolah')}}</span>
                                <span class="p-2 badge bg-success text-white">{{session('status_sekolah')}}</span>
                                <h6 class="p-2 badge bg-warning text-white">Level {{@levelAdiwiyata(session('npsn'))}}</h6>
                            </div>
                            <h5 class="f14 text-primary">NPSN : {{@$profile->sekolah->npsn}}</h5>
                        </div>
                    </div>
                </div>
                <hr class="mt-0">
                <h6 class="fw-500">DATA SEKOLAH</h6>
                <div class="d-flex flex-column gap-2 mb-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <span>Jumlah Siswa</span>
                        <span class="badge bg-success text-white fw-500">{{@$jumlah ? @$jumlah->jumlah_peserta_didik : 0}}</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <span>Jumlah Guru</span>
                        <span class="badge bg-success text-white fw-500">{{@$jumlah ? @$jumlah->jumlah_tenaga_pendidik : 0}}</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <span>Penghargaan Terakhir</span>
                        <span class="badge bg-success text-white fw-500">{{@getPenghargaanTerakhir(session('sekolah_id'))}}</span> 
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <span>Proses Usulan</span>
                        
                            @if(@$kuesioner->KuesionerId)
                                <span class="badge bg-success text-white fw-500">
                                    {!!@kuesionerLogStatus(@$kuesioner->KuesionerId,'plain')!!}
                                </span> 
                            @else
                                {!! StatusActivity(session('sekolah_id')) !!}
                            @endif
                        
                    </div>
                </div>

                <div class="d-flex flex-column gap-1">
                    <div>
                        <hr class="mt-0">
                        <h6 class="fw-500">ALAMAT</h6>
                        <p class="text-muted">{{session('alamat_sekolah')}}</p>
                    </div>
                    <div>
                        <hr class="mt-0">
                        <h6 class="fw-500">KONTAK</h6>
                        <div class="d-flex flex-row gap-3 justify-content-start mt-3">
                            <div>
                                <div class="p-3 bg-secondary rounded">
                                    <i class="fal fa-mobile f20"></i>  
                                </div>
                            </div>
                            <div class="d-flex flex-column align-items-left justify-content-center">
                                <span class="text-muted">{{session('kontak_person')}}</span>
                                <span class="text-muted">{{session('telp')}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
        
    </div>
    <div class="col-md-6 mb-2">
        <div class="card h-100">
            <div class="card-header bg-primary-light text-primary">
                <h5 class="fw-500 mb-0"><i class="fal fa-trophy"></i>&nbsp;Riwayat Usulan</h5>
            </div>
            <div class="card-body">
                <div class="">
                    @if(@$kuesioner || (@$kuesioner->status == 1))
                        <?php
                            if(@$kuesioner->level == 0){
                                $textLevel = 'Kabupaten/Kota';
                            }elseif(@$kuesioner->level == 1){
                                $textLevel = 'Provinsi';
                            }elseif(@$kuesioner->level == 2){
                                $textLevel = 'Nasional';
                            }elseif(@$kuesioner->level == 3){
                                $textLevel = 'Mandiri';
                            }
                        ?>
                        <div class="alert bg-success-light text-success mb-3">
                            Sekolah diusulan untuk menjadi CSA (Calon Sekolah Adiwiyata) {{@$textLevel}}
                        </div>
                    @else
                        <div class="alert alert-danger">
                            Belum ada data usulan
                        </div>
                    @endif
                </div>
                <div class="d-none">
                    <ul class="liststyle">
                        <li>
                            <div class="d-flex gap-2 flex-row">
                                <div class="bg-success-light rounded-circle p-1"><i class="fal fa-check text-success"></i></div>
                                <div>Pendaftaran</div>
                            </div>
                        </li>
                        <li>
                            <div class="d-flex gap-2 flex-row">
                                <div class="bg-primary-light rounded-circle p-1"><i class="fal fa-recycle text-primary"></i></div>
                                <div>Pengajuan</div>
                            </div>
                        </li>
                        <li>
                            <div class="d-flex gap-2 flex-row">
                                <div class="bg-secondary rounded-circle p-1"><i class="fal fa-clock"></i></div>
                                <div class="text-muted">Verifikasi</div>
                            </div>
                        </li>
                    </ul>
                </div>
                @if(@$kuesioner)
                
                <table class="table table-bordered">
                    <tr class="bg-success text-white">
                        <th><b>Status Usulan</b></th>
                        <th><b>Penghargaan Terakhir</b></th>
                        <th><b>Tanggal Penetapan SK</b></th>
                        <th><b>Lampiran SK</b></th>
                    </tr>
                    <tr>
                        <td style="vertical-align: middle;">
                            {!! kuesionerLogStatus(@$kuesioner->KuesionerId) !!}
                            {{-- <span class="badge badge-warning">{{str_replace('_',' ',\Str::title($log->step))}}</span> --}}
                        </td>
                        <td style="vertical-align: middle;">
                            @if(@getPenghargaanTerakhir(session('sekolah_id')) == 'Belum Pernah')
                                
                                <?php
                                if(@$sk->jenis_usulan == 0){
                                    $penghargaan = '<span>Belum Pernah</span>';
                                }elseif(@$sk->jenis_usulan == 1){
                                    $penghargaan = '<span>Adiwiyata Kab/Kota</span>';
                                }elseif(@$sk->jenis_usulan == 2){
                                    $penghargaan = '<span>Adiwiyata Provinsi</span>';
                                }elseif(@$sk->jenis_usulan == 3){
                                    $penghargaan = '<span>Adiwiyata Nasional</span>';
                                }elseif(@$sk->jenis_usulan == 4){
                                    $penghargaan = '<span>Adiwiyata Mandiri</span>';
                                }
                                ?>
                                {!!$penghargaan!!}
                            @else
                                {{@getPenghargaanTerakhir(session('sekolah_id'))}}
                            @endif
                        </td>
                        <td style="vertical-align: middle;">{{@$sk->tanggal_penetapan}}</td>
                        <td style="vertical-align: middle;">
                            @if(@$sk)
                                <a download href="{{ asset('uploads/'.@$sk->file) }}" class="btn btn-sm btn-warning" style="width: 100%;"><i class="fal fa-download"></i> SK Adiwiyata</a>
                            @endif
                        </td>
                    </tr>
                </table>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection
@section('page-js')
<script src="https://code.highcharts.com/highcharts.js"></script>
<script>
    let series = @json($series);

    Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Data Sampah Terkelola Tahun {{ date("Y") }}'
    },
    xAxis: {
        categories: ["Jan",
                    "Feb",
                    "Mar",
                    "Apr",
                    "Mei",
                    "Jun",
                    "Jul",
                    "Agust",
                    "Sept",
                    "Okt",
                    "Nov",
                    "Des"],
        crosshair: true,
        accessibility: {
            description: 'Countries'
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: '(Kg)'
        }
    },
    tooltip: {
        valueSuffix: ' (Kg)'
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: series
});
</script>
@endsection