@extends('layouts.app')
@section('title', 'Laporan Kehadiran Siswa')
@section('content')
<div>
   <div class="mb-6">
      <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Laporan Kehadiran Harian Siswa</h1>
      <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Rekap agregat kehadiran siswa berdasarkan rentang
         tanggal.</p>
   </div>

   <div class="p-5 mb-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
      <h3 class="mb-4 text-base font-semibold text-gray-900 dark:text-white">Parameter Laporan</h3>
      <form method="GET" class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
         <div>
            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Dari Tanggal</label>
            <input type="date" name="date_from" value="{{ $filters['date_from'] }}"
               class="block w-full p-2.5 text-sm text-gray-900 bg-gray-50 border border-gray-300 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
         </div>
         <div>
            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Sampai Tanggal</label>
            <input type="date" name="date_to" value="{{ $filters['date_to'] }}"
               class="block w-full p-2.5 text-sm text-gray-900 bg-gray-50 border border-gray-300 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
         </div>
         <div>
            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Kelas</label>
            <select name="classroom_id"
               class="block w-full p-2.5 text-sm text-gray-900 bg-gray-50 border border-gray-300 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
               <option value="">Semua Kelas</option>
               @foreach($classrooms as $classroom)
               <option value="{{ $classroom->id }}" {{ (string) $filters['classroom_id']===(string) $classroom->id ?
                  'selected' : '' }}>{{ $classroom->name }}</option>
               @endforeach
            </select>
         </div>
         <div class="flex items-end">
            <button type="submit"
               class="w-full px-4 py-2.5 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800">Tampilkan</button>
         </div>
         <div class="grid grid-cols-2 gap-2">
            <a href="{{ route('admin.reports.student-daily.export.pdf', $filters) }}" download
               class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-medium text-white bg-red-700 rounded-lg hover:bg-red-800">PDF</a>
            <a href="{{ route('admin.reports.student-daily.export.excel', $filters) }}" download
               class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-medium text-white bg-green-700 rounded-lg hover:bg-green-800">Excel</a>
         </div>
      </form>
   </div>

   <div class="grid grid-cols-2 gap-3 mb-6 md:grid-cols-5">
      @foreach([
      ['label' => 'Hadir', 'key' => 'hadir', 'color' => 'green'],
      ['label' => 'Terlambat', 'key' => 'terlambat', 'color' => 'yellow'],
      ['label' => 'Alpa', 'key' => 'absen', 'color' => 'red'],
      ['label' => 'Izin', 'key' => 'izin', 'color' => 'blue'],
      ['label' => 'Sakit', 'key' => 'sakit', 'color' => 'purple'],
      ] as $stat)
      <div class="p-4 text-center bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
         <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $reportSummary[$stat['key']] ?? 0 }}</p>
         <x-badge :color="$stat['color']" class="mt-1">{{ $stat['label'] }}</x-badge>
      </div>
      @endforeach
   </div>

   <div class="bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
      <x-data-table>
         <x-slot:heading>
            <th class="px-4 py-3">NIS</th>
            <th class="px-4 py-3">Nama Siswa</th>
            <th class="px-4 py-3">Kelas</th>
            <th class="px-4 py-3 text-center">Hadir</th>
            <th class="px-4 py-3 text-center">Terlambat</th>
            <th class="px-4 py-3 text-center">Alpa</th>
            <th class="px-4 py-3 text-center">Izin</th>
            <th class="px-4 py-3 text-center">Sakit</th>
            <th class="px-4 py-3 text-center">% Kehadiran</th>
         </x-slot:heading>
         <x-slot:body>
            @forelse($reportRows as $row)
            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
               <td class="px-4 py-3 font-mono text-xs text-gray-500">{{ $row['nis'] }}</td>
               <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">{{ $row['name'] }}</td>
               <td class="px-4 py-3">
                  <x-badge color="gray">{{ $row['classroom'] }}</x-badge>
               </td>
               <td class="px-4 py-3 text-center">
                  <x-badge color="green">{{ $row['hadir'] }}</x-badge>
               </td>
               <td class="px-4 py-3 text-center">
                  <x-badge color="yellow">{{ $row['terlambat'] }}</x-badge>
               </td>
               <td class="px-4 py-3 text-center">
                  <x-badge color="red">{{ $row['absen'] }}</x-badge>
               </td>
               <td class="px-4 py-3 text-center">
                  <x-badge color="blue">{{ $row['izin'] }}</x-badge>
               </td>
               <td class="px-4 py-3 text-center">
                  <x-badge color="purple">{{ $row['sakit'] }}</x-badge>
               </td>
               <td class="px-4 py-3 text-center font-semibold text-gray-700 dark:text-gray-200">{{ $row['pct'] }}%</td>
            </tr>
            @empty
            <tr>
               <td colspan="9" class="px-4 py-8 text-center text-gray-400">Tidak ada data laporan untuk filter yang
                  dipilih.</td>
            </tr>
            @endforelse
         </x-slot:body>
      </x-data-table>
   </div>
</div>
@endsection