@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">
                Riwayat Absensi
            </h3>

            <p class="text-muted mb-0">
                Daftar seluruh riwayat kehadiran guru
            </p>

        </div>

        <div class="text-right">

            <span class="badge badge-primary px-4 py-2">

                Total {{ $absensi->count() }} Data

            </span>

        </div>

    </div>

</div>


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

    <div class="card-body">

        <form method="GET" action="/absensi/riwayat">

            <div class="row align-items-end">

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

                    <label class="font-weight-bold">

                        Filter Bulan

                    </label>

                    <input
                        type="month"
                        name="bulan"
                        value="{{ request('bulan') }}"
                        class="form-control">

                </div>

                <div class="col-md-2">

                    <button class="btn btn-primary btn-block">

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

                        Filter

                    </button>

                </div>

                @if(request('bulan'))

                <div class="col-md-2">

                    <a href="/absensi/riwayat"
                       class="btn btn-light btn-block border">

                        Reset

                    </a>

                </div>

                @endif

            </div>

        </form>

    </div>

</div>


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

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

        <h5 class="mb-0">

            <i class="fas fa-list text-primary mr-2"></i>

            Data Absensi

        </h5>

    </div>

    <div class="card-body">

        <div class="table-responsive">

            <table class="table table-hover align-middle datatable">

                <thead>

                    <tr>

                        <th width="70">
                            No
                        </th>

                        <th>
                            Tanggal
                        </th>

                        <th>
                            Jam Mengajar
                        </th>

                        <th>
                            Status
                        </th>

                    </tr>

                </thead>

                <tbody>

                @forelse($absensi as $key => $a)

                    <tr>

                        <td>

                            <span class="badge badge-light">

                                {{ $key+1 }}

                            </span>

                        </td>

                        <td>

                            <i class="far fa-calendar-alt text-primary mr-2"></i>

                            {{ \Carbon\Carbon::parse($a->tanggal)->translatedFormat('d F Y') }}

                        </td>

                        <td>

                            <span class="badge badge-info px-3 py-2">

                                <i class="far fa-clock mr-1"></i>

                                {{ $a->jam_kerja }} Jam

                            </span>

                        </td>

                        <td>

                            @switch($a->status)

                                @case('Hadir')

                                    <span class="badge badge-success px-3 py-2">

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

                                        Hadir

                                    </span>

                                @break

                                @case('Izin')

                                    <span class="badge badge-warning px-3 py-2">

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

                                        Izin

                                    </span>

                                @break

                                @case('Sakit')

                                    <span class="badge badge-info px-3 py-2">

                                        <i class="fas fa-notes-medical"></i>

                                        Sakit

                                    </span>

                                @break

                                @default

                                    <span class="badge badge-danger px-3 py-2">

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

                                        Alpha

                                    </span>

                            @endswitch

                        </td>

                    </tr>

                @empty

                    <tr>

                        <td colspan="4">

                            <div class="text-center py-5">

                                <i class="fas fa-folder-open fa-4x text-muted mb-3"></i>

                                <h5>

                                    Belum Ada Riwayat Absensi

                                </h5>

                                <p class="text-muted mb-0">

                                    Data absensi akan muncul setelah Anda melakukan absensi mengajar.

                                </p>

                            </div>

                        </td>

                    </tr>

                @endforelse

                </tbody>

            </table>

        </div>

    </div>

</div>


<style>

.page-header{

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

}

.card{

    border-radius:18px;

}

.table thead{

    background:#f8fafc;

}

.table thead th{

    border:none;
    color:#64748b;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.5px;

}

.table td{

    vertical-align:middle;

}

.badge{

    border-radius:10px;
    font-size:13px;
    font-weight:600;

}

.btn{

    border-radius:10px;

}

</style>

@endsection