@extends('layouts.master')

@section('page-css')
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/datagrid/datatables/datatables.bundle.css')}}">
<style type="text/css">
    .listItem{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .listItem > li{
        display: inline-block;
        padding: 10px;
        margin: 3px;
        border: 1px solid #ddd;
    }
    .listItem > li:hover{
        cursor: pointer;
    }
    .listItem > li .number{
        font-size: 13px;
/*        color: #333;*/
/*        background: #0ba360 !important;*/
/*        padding: 10px;*/
        border-radius: 10%;
    }
    .level{
        float: right;
        color: #fff;
        text-align: center;
        width: 100px;
    }
</style>
@endsection
@section('content')
<div class="subheader">
    <h1 class="subheader-title">
        <i class='subheader-icon fal fa-chart-area'></i> Dashboard
    </h1>
</div>
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12 p-0">
                        <ul class="listItem">
                            <li>
                                <h6><div class="rounded-circle bg-fusion-50 width-1 height-1 text-center d-inline-block bg-success"><i class="mt-1 fal fa-check text-white"></i></div>&nbsp;Registrasi Akun</h6>
                            </li>
                            <li class="profile">
                                <h6><div class="rounded-circle bg-fusion-50 width-1 height-1 text-center d-inline-block bg-success"><i class="mt-1 fal fa-check text-white"></i></div>&nbsp;Melengkapi Data Profile</h6>
                            </li>
                            <li class="kuesioner">
                                <h6><div class="rounded-circle bg-fusion-50 width-1 height-1 text-center d-inline-block bg-success"><i class="mt-1 fal fa-check text-white"></i></div>&nbsp;Mengisi Kuesioner Leveling</h6>
                            </li>
                            <li>
                                <h6><div class="rounded-circle bg-fusion-50 width-1 height-1 text-center d-inline-block bg-success"><i class="mt-1 fal fa-check text-white"></i></div>&nbsp;Menunggu Diusulkan CSA</h6>
                            </li>
                            <li>
                                <h6><div class="rounded-circle bg-fusion-50 width-1 height-1 text-center d-inline-block bg-success"><i class="mt-1 fal fa-check text-white"></i></div>&nbsp;Melengkapi Data CSA</h6>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-4 mt-3">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-3 col-md-3 text-left">
                                        <i class="fal fa-building fa-5x"></i>
                                    </div>
                                    <div class="col-9 col-md-9">
                                        <div class="level rounded-plus bg-fusion-50 width-1 height-1 d-inline-block bg-success">
                                            <h4>Level 4</h4>
                                        </div>
                                    </div>
                                </div>
                                
                                <h4 class="mt-5"><b>{{session('name')}}</b></h4>
                                <h5 class="text-success">NPSN: {{session('npsn')}}</h5>
                                <span class="badge badge-primary">{{session('tingkat_sekolah')}}</span>
                                <span class="badge badge-success">{{session('status_sekolah')}}</span>

                                <div class="row">
                                    <div class="col-md-12 text-left">
                                        <h5 class="mt-2"><b>ALAMAT</b></h5>
                                    </div>
                                    <div class="col-md-12 text-left">
                                        <p>{{session('alamat_sekolah')}}</p>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12 text-left">
                                        <h5 class="mt-2"><b>KONTAK</b></h5>
                                    </div>
                                    <div class="col-md-2 text-left mb-2">
                                        <i class="fal fa-mobile fa-2x"></i>  
                                    </div>
                                    <div class="col-md-10 text-left">
                                        <span class="text-muted">{{session('kontak_person')}}</span> <br>
                                        <span class="text-muted">{{session('telp')}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8 mt-3">
                        <div class="card">
                            <div class="card-body">
                                <div class="card mb-2">
                                    <div class="card-body">
                                        <h4><b>Status Usulan</b></h4>
                                        <p>Sekolah diusulan untuk menjadi CSA (Calon Sekolah Adiwiyata) Nasional</p>
                                        <span class="text-danger">Silahkan lengkapi data pada menu Usulan Adiwiyata.</span>
                                    </div>
                                </div>
                                <table class="table table-bordered">
                                    <tr class="bg-success text-white">
                                        <th colspan="2"><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;">
                                            <i class="fal fa-trophy"></i>
                                        </td>
                                        <td style="vertical-align: middle;">
                                            <h5><b>Adiwiyata Provinsi</b></h5>
                                            <span>SK Gubernur DKI Nomor 276 Tahun 2023 </span>
                                        </td>
                                        <td style="vertical-align: middle;">2023-04-13 </td>
                                        <td style="vertical-align: middle;">--</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('page-js')

@endsection