@extends('layouts.app')

@section('title','Dashboard')

@section('content')

<div class="container-fluid">

    {{-- HEADER --}}
    <div class="dashboard-header mb-4">

        <div>

            <h2 class="mb-1 font-weight-bold">
                Dashboard
            </h2>

            <p class="text-muted mb-0">
                Selamat datang kembali,
                <strong>{{ auth()->user()->name }}</strong>
            </p>

        </div>

        <div class="text-right">

            <div class="dashboard-date">

                <i class="bi bi-calendar-event"></i>

                {{ now()->translatedFormat('l, d F Y') }}

            </div>

        </div>

    </div>

    {{-- CARD --}}
    <div class="row">

        <div class="col-lg-3 col-md-6 mb-4">

            <div class="dashboard-card">

                <div>

                    <small>Total Guru</small>

                    <h2>{{ $totalGuru }}</h2>

                    <span class="text-success">

                        Data Guru Aktif

                    </span>

                </div>

                <div class="dashboard-icon bg-primary">

                    <i class="bi bi-mortarboard-fill"></i>

                </div>

            </div>

        </div>

        <div class="col-lg-3 col-md-6 mb-4">

            <div class="dashboard-card">

                <div>

                    <small>Hadir Hari Ini</small>

                    <h2>{{ $hadirHariIni }}</h2>

                    <span class="text-success">

                        Kehadiran Hari Ini

                    </span>

                </div>

                <div class="dashboard-icon bg-success">

                    <i class="bi bi-person-check-fill"></i>

                </div>

            </div>

        </div>

        <div class="col-lg-3 col-md-6 mb-4">

            <div class="dashboard-card">

                <div>

                    <small>Jadwal Mengajar</small>

                    <h2>{{ $jadwalHariIni }}</h2>

                    <span class="text-primary">

                        Hari Ini

                    </span>

                </div>

                <div class="dashboard-icon bg-warning">

                    <i class="bi bi-calendar-week-fill"></i>

                </div>

            </div>

        </div>

        <div class="col-lg-3 col-md-6 mb-4">

            <div class="dashboard-card">

                <div>

                    <small>Total Penggajian</small>

                    <h4>

                        Rp {{ number_format($penggajianBulanIni,0,',','.') }}

                    </h4>

                    <span class="text-danger">

                        Bulan Ini

                    </span>

                </div>

                <div class="dashboard-icon bg-danger">

                    <i class="bi bi-cash-stack"></i>

                </div>

            </div>

        </div>

    </div>

    {{-- GRAFIK --}}
    <div class="row">

        <div class="col-lg-8">

            <div class="card card-modern">

                <div class="card-header bg-white border-0">

                    <h5>

                        <i class="bi bi-graph-up-arrow text-success mr-2"></i>

                        Grafik Penggajian

                    </h5>

                </div>

                <div class="card-body">

                    <canvas id="gajiChart" height="110"></canvas>

                </div>

            </div>

        </div>

        <div class="col-lg-4">

            <div class="card card-modern">

                <div class="card-header bg-white border-0">

                    <h5>

                        Ringkasan Absensi

                    </h5>

                </div>

                <div class="card-body">

                    <label>Hadir</label>

                    <div class="progress modern-progress mb-3">

                        <div class="progress-bar bg-success"

                            style="width:{{ $hadir }}%">

                        </div>

                    </div>

                    <label>Izin</label>

                    <div class="progress modern-progress mb-3">

                        <div class="progress-bar bg-warning"

                            style="width:{{ $izin }}%">

                        </div>

                    </div>

                    <label>Sakit</label>

                    <div class="progress modern-progress mb-3">

                        <div class="progress-bar bg-info"

                            style="width:{{ $sakit }}%">

                        </div>

                    </div>

                    <label>Alpha</label>

                    <div class="progress modern-progress">

                        <div class="progress-bar bg-danger"

                            style="width:{{ $alpha }}%">

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>

new Chart(document.getElementById('gajiChart'),{

type:'line',

data:{

labels:[

@foreach($gajiBulanan as $g)

'{{ $g->periode }}',

@endforeach

],

datasets:[{

label:'Penggajian',

data:[

@foreach($gajiBulanan as $g)

{{ $g->total }},

@endforeach

],

borderWidth:3,

fill:true,

tension:.4

}]

},

options:{

plugins:{

legend:{

display:false

}

}

}

});

</script>

@endsection