@extends('layouts.app')

@section('content')

<div class="page-header mb-4">

    <div class="d-flex justify-content-between align-items-center flex-wrap">

        <div>

            <h3 class="font-weight-bold mb-1">
                Rekap Kehadiran Guru
            </h3>

            <p class="text-muted mb-0">
                Statistik kehadiran dan jam mengajar guru
            </p>

        </div>

        <form method="GET" class="d-flex">

            <input
                type="month"
                name="bulan"
                value="{{ $bulan }}"
                class="form-control mr-2">

            <button class="btn btn-primary">

                <i class="fas fa-search mr-1"></i>

                Filter

            </button>

        </form>

    </div>

</div>

<div class="row">

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

        <div class="card border-0 shadow-sm stat-card success">

            <div class="card-body">

                <div class="d-flex justify-content-between">

                    <div>

                        <small>Hadir</small>

                        <h2>{{ $hadir }}</h2>

                    </div>

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

                        <i class="fas fa-check"></i>

                    </div>

                </div>

            </div>

        </div>

    </div>

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

        <div class="card border-0 shadow-sm stat-card warning">

            <div class="card-body">

                <div class="d-flex justify-content-between">

                    <div>

                        <small>Izin</small>

                        <h2>{{ $izin }}</h2>

                    </div>

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

                        <i class="fas fa-file-signature"></i>

                    </div>

                </div>

            </div>

        </div>

    </div>

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

        <div class="card border-0 shadow-sm stat-card info">

            <div class="card-body">

                <div class="d-flex justify-content-between">

                    <div>

                        <small>Sakit</small>

                        <h2>{{ $sakit }}</h2>

                    </div>

                    <div class="icon-circle bg-info">

                        <i class="fas fa-heartbeat"></i>

                    </div>

                </div>

            </div>

        </div>

    </div>

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

        <div class="card border-0 shadow-sm stat-card danger">

            <div class="card-body">

                <div class="d-flex justify-content-between">

                    <div>

                        <small>Alpha</small>

                        <h2>{{ $alpha }}</h2>

                    </div>

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

                        <i class="fas fa-times"></i>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<div class="row mt-4">

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

        <div class="card border-0 shadow-sm">

            <div class="card-body text-center">

                <div class="mb-3">

                    <div class="icon-circle-large bg-primary">

                        <i class="fas fa-clock"></i>

                    </div>

                </div>

                <h1 class="font-weight-bold text-primary">

                    {{ $totalJamKerja }}

                </h1>

                <h5>Total Jam Mengajar</h5>

                <p class="text-muted">

                    Akumulasi jam mengajar bulan ini

                </p>

            </div>

        </div>

    </div>

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

        <div class="card border-0 shadow-sm">

            <div class="card-body">

                <h5 class="mb-4">

                    Persentase Kehadiran

                </h5>

                <h2 class="font-weight-bold text-success">

                    {{ $persentase }}%

                </h2>

                <div class="progress rounded-pill mt-4" style="height:18px;">

                    <div
                        class="progress-bar bg-success rounded-pill"
                        style="width:{{ $persentase }}%;">

                        {{ $persentase }}%

                    </div>

                </div>

                <div class="mt-4">

                    <div class="d-flex justify-content-between">

                        <span>Target Kehadiran</span>

                        <strong>100%</strong>

                    </div>

                    <div class="d-flex justify-content-between mt-2">

                        <span>Status</span>

                        @if($persentase>=90)

                            <span class="badge badge-success">

                                Sangat Baik

                            </span>

                        @elseif($persentase>=75)

                            <span class="badge badge-primary">

                                Baik

                            </span>

                        @elseif($persentase>=60)

                            <span class="badge badge-warning">

                                Cukup

                            </span>

                        @else

                            <span class="badge badge-danger">

                                Perlu Evaluasi

                            </span>

                        @endif

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<style>

.page-header{
    background:#fff;
    padding:25px;
    border-radius:18px;
    box-shadow:0 5px 18px rgba(0,0,0,.05);
}

.stat-card{
    border-radius:18px;
    transition:.3s;
}

.stat-card:hover{
    transform:translateY(-5px);
}

.stat-card h2{
    font-weight:700;
    margin-top:5px;
}

.icon-circle{

    width:55px;
    height:55px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:22px;

}

.icon-circle-large{

    width:90px;
    height:90px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    margin:auto;
    font-size:34px;

}

.card{

    border-radius:18px;

}

.progress{

    background:#eef2ff;

}

.progress-bar{

    font-weight:600;

}

</style>

@endsection