@extends('layouts.app')
@section('title', 'Laporan Absensi Mata Pelajaran')
@section('content')
<div>
   <div class="mb-6">
      <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Laporan Absensi Mata Pelajaran Siswa</h1>
      <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Rekap absensi siswa per mata pelajaran, kelas, dan
         semester.</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-6">
         <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">Semester</label>
            <select name="semester_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 Semester</option>
               @foreach($semesters as $semester)
               <option value="{{ $semester->id }}" {{ (string) $filters['semester_id']===(string) $semester->id ?
                  'selected' : '' }}>
                  {{ $semester->academicYear?->name }} - {{ $semester->name?->label() ?? $semester->name }}
               </option>
               @endforeach
            </select>
         </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>
            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Mata Pelajaran</label>
            <select name="subject_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 Mapel</option>
               @foreach($subjects as $subject)
               <option value="{{ $subject->id }}" {{ (string) $filters['subject_id']===(string) $subject->id ?
                  'selected' : '' }}>{{ $subject->name }}</option>
               @endforeach
            </select>
         </div>
         <div class="grid grid-cols-3 gap-2">
            <button type="submit"
               class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800">Tampil</button>
            <a href="{{ route('admin.reports.student-subject.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-subject.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">Mata Pelajaran</th>
            <th class="px-4 py-3 text-center">Total Sesi</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-gray-700 dark:text-gray-200">{{ $row['subject'] }}</td>
               <td class="px-4 py-3 text-center">
                  <x-badge color="gray">{{ $row['total'] }}</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="11" 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