@extends('layouts.app')

@section('title','Absensi Guru')

@section('content')

<div class="container-fluid">

    {{-- Header --}}
    <div class="d-flex justify-content-between align-items-center mb-4">

        <div>

            <h3 class="font-weight-bold mb-1">
                Absensi Mengajar
            </h3>

            <p class="text-muted mb-0">
                Lakukan absensi sesuai jadwal mengajar hari ini.
            </p>

        </div>

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

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

        </span>

    </div>

    {{-- Alert --}}
    @if(session('success'))

    <div class="alert alert-success alert-dismissible fade show">

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

        {{ session('success') }}

        <button class="close" data-dismiss="alert">

            &times;

        </button>

    </div>

    @endif

    @if(session('error'))

    <div class="alert alert-danger alert-dismissible fade show">

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

        {{ session('error') }}

        <button class="close" data-dismiss="alert">

            &times;

        </button>

    </div>

    @endif

    {{-- Statistik --}}
    <div class="row mb-4">

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

            <div class="small-card">

                <div>

                    <small>Total Hadir</small>

                    <h2>

                        {{ $riwayat->where('status','Hadir')->count() }}

                    </h2>

                </div>

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

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

                </div>

            </div>

        </div>

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

            <div class="small-card">

                <div>

                    <small>Total Jam Mengajar</small>

                    <h2>

                        {{ $riwayat->sum('jam_kerja') }}

                    </h2>

                </div>

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

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

                </div>

            </div>

        </div>

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

            <div class="small-card">

                <div>

                    <small>Total Absensi</small>

                    <h2>

                        {{ $riwayat->count() }}

                    </h2>

                </div>

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

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

                </div>

            </div>

        </div>

    </div>

    {{-- Jadwal Hari Ini --}}
    <div class="card card-modern">

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

            <h5 class="mb-0">

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

                Jadwal Mengajar Hari Ini

            </h5>

        </div>

        <div class="card-body">

            @forelse($jadwalHariIni as $j)

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

                <div class="card-body">

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

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

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

                                {{ $j->mataPelajaran->nama_mapel }}

                            </h5>

                            <div class="mb-2">

                                <span class="badge badge-info">

                                    {{ $j->kelas->nama_kelas }}

                                </span>

                            </div>

                            <p class="mb-1">

                                <i class="far fa-clock text-primary"></i>

                                {{ substr($j->jam_mulai,0,5) }}

                                -

                                {{ substr($j->jam_selesai,0,5) }}

                            </p>

                            <small class="text-muted">

                                Total Mengajar

                                <b>

                                    {{ $j->jam_mengajar }} Jam

                                </b>

                            </small>

                        </div>

                        <div class="col-md-4 text-md-right mt-3 mt-md-0">

                            @if($j->sudah_absen)

                                <button
                                    class="btn btn-success btn-modern"
                                    disabled>

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

                                    Sudah Absen

                                </button>

                            @else

                                <form action="/absensi/hadir/{{ $j->id }}"
                                      method="POST">

                                    @csrf

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

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

                                        Absen Sekarang

                                    </button>

                                </form>

                            @endif

                        </div>

                    </div>

                </div>

            </div>

            @empty

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

                <i class="fas fa-calendar-times fa-4x text-secondary mb-3"></i>

                <h5>

                    Tidak Ada Jadwal Hari Ini

                </h5>

                <p class="text-muted">

                    Silakan kembali sesuai jadwal mengajar berikutnya.

                </p>

            </div>

            @endforelse

        </div>

        <div class="card-footer bg-white">

            <a href="/izin/create"
               class="btn btn-warning btn-modern">

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

                Ajukan Izin

            </a>

            <a href="/absensi/riwayat"
               class="btn btn-primary btn-modern">

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

                Riwayat

            </a>

            <a href="/absensi/rekap"
               class="btn btn-info btn-modern">

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

                Rekap

            </a>

        </div>

    </div>

</div>

@endsection