@extends('layouts.app')

@section('title','Monitoring Kehadiran')

@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">
                Monitoring Kehadiran
            </h3>

            <p class="text-muted mb-0">
                Monitoring aktivitas mengajar guru berdasarkan tanggal.
            </p>
        </div>

        <div>

            {{-- Export mengikuti tanggal filter --}}
            <a href="{{ route('monitoring.export', ['tanggal' => $tanggal]) }}"
               class="btn btn-success me-2">

                <i class="bi bi-file-earmark-excel"></i>
                Export Excel

            </a>

            <a href="{{ url()->current() }}"
               class="btn btn-primary">

                <i class="bi bi-arrow-clockwise"></i>
                Refresh

            </a>

        </div>

    </div>


    {{-- FILTER TANGGAL --}}
    <div class="card card-modern mb-4">

        <div class="card-body">

            <form method="GET"
      		action="{{ url()->current() }}"
      		class="row align-items-end">

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

                    <label class="font-weight-bold">
                        <i class="bi bi-calendar3 text-primary"></i>
                        Pilih Tanggal
                    </label>

                    <input type="date"
                           name="tanggal"
                           class="form-control"
                           value="{{ $tanggal }}">

                </div>

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

                    <button type="submit"
                            class="btn btn-primary">

                        <i class="bi bi-search"></i>
                        Tampilkan

                    </button>

                   <a href="{{ url()->current() }}"
   class="btn btn-secondary">

                        <i class="bi bi-arrow-counterclockwise"></i>
                        Reset

                    </a>

                </div>

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

                    <small class="text-muted">
                        Menampilkan data tanggal:
                    </small>

                    <br>

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

                </div>

            </form>

        </div>

    </div>


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

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

            <div class="small-card">

                <div>

                    <small>Total Jadwal</small>

                    <h3>{{ $jadwal->count() }}</h3>

                </div>

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

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

                </div>

            </div>

        </div>


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

            <div class="small-card">

                <div>

                    <small>Hadir</small>

                    <h3>
                        {{ $jadwal->where('status','Hadir')->count() }}
                    </h3>

                </div>

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

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

                </div>

            </div>

        </div>


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

            <div class="small-card">

                <div>

                    <small>Izin / Sakit</small>

                    <h3>
                        {{ $jadwal->whereIn('status',['Izin','Sakit'])->count() }}
                    </h3>

                </div>

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

                    <i class="bi bi-exclamation-circle-fill"></i>

                </div>

            </div>

        </div>


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

            <div class="small-card">

                <div>

                    <small>Alpha</small>

                    <h3>
                        {{ $jadwal->where('status','Alpha')->count() }}
                    </h3>

                </div>

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

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

                </div>

            </div>

        </div>

    </div>


    {{-- Tabel --}}
    <div class="card card-modern">

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

            <h5 class="mb-0">

                <i class="bi bi-table mr-2 text-primary"></i>

                Data Kehadiran Guru

            </h5>

        </div>


        <div class="card-body">

            <div class="table-responsive">

                <table class="table table-modern datatable">

                    <thead>

                    <tr>

                        <th>Guru</th>

                        <th>Mata Pelajaran</th>

                        <th>Kelas</th>

                        <th>Jam Mengajar</th>

                        <th>Status</th>

                        <th>Jam Absen</th>

                    </tr>

                    </thead>


                    <tbody>

                    @forelse($jadwal as $j)

                    <tr>

                        <td>
                            <strong>
                                {{ $j->guru->nama }}
                            </strong>
                        </td>

                        <td>
                            {{ $j->mataPelajaran->nama_mapel }}
                        </td>

                        <td>
                            {{ $j->kelas->nama_kelas }}
                        </td>

                        <td>

                            <span class="badge badge-light">

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

                                -

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

                            </span>

                        </td>

                        <td>

                            @switch($j->status)

                                @case('Hadir')

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

                                        <i class="bi bi-check-circle"></i>

                                        Hadir

                                    </span>

                                @break


                                @case('Izin')

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

                                        <i class="bi bi-envelope-check"></i>

                                        Izin

                                    </span>

                                @break


                                @case('Sakit')

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

                                        <i class="bi bi-heart-pulse"></i>

                                        Sakit

                                    </span>

                                @break


                                @case('Alpha')

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

                                        <i class="bi bi-x-circle"></i>

                                        Alpha

                                    </span>

                                @break


                                @default

    @if($j->status == 'Belum Absen')

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

            <i class="bi bi-clock"></i>

            Belum Absen

        </span>

    @else

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

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

            Belum Mengajar

        </span>

    @endif
                            @endswitch

                        </td>

                        <td>

                            {{ $j->jam_absen ?? '-' }}

                        </td>

                    </tr>

                    @empty

                    <tr>

                        <td colspan="6"
                            class="text-center text-muted py-4">

                            <i class="bi bi-calendar-x"
                               style="font-size: 35px;"></i>

                            <br>

                            Tidak ada data kehadiran pada tanggal ini.

                        </td>

                    </tr>

                    @endforelse

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>

@endsection