@extends('layouts.app')
@section('title', 'Absensi Harian Guru')
@section('content')
<div x-data="{ showModal: false, correctionForm: {} }">
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Absensi Harian Guru</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Monitoring absensi harian dan koreksi manual.</p>
        </div>
        @if(Route::has('admin.teacher-daily-attendances.export'))
            <a href="{{ route('admin.teacher-daily-attendances.export', request()->all()) }}"
                class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600">
                Ekspor Excel
            </a>
        @endif
    </div>

    @if(session('success'))<x-alert type="success">{{ session('success') }}</x-alert>@endif

    <x-filter-bar>
        <x-slot:fields>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Dari Tanggal</label>
                <input type="date" name="date_from" value="{{ $filters['date_from'] }}"
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Sampai Tanggal</label>
                <input type="date" name="date_to" value="{{ $filters['date_to'] }}"
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Status</label>
                <select name="status" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">Semua Status</option>
                    @foreach($statusOptions as $option)
                    <option value="{{ $option['value'] }}" {{ $filters['status'] === $option['value'] ? 'selected' : '' }}>{{ $option['label'] }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Cari Guru</label>
                <input type="text" name="search" value="{{ $filters['search'] }}" placeholder="Nama guru / NIP..."
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>
        </x-slot:fields>
    </x-filter-bar>

    <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">Tanggal</th>
                <th class="px-4 py-3">NIP</th>
                <th class="px-4 py-3">Nama Guru</th>
                <th class="px-4 py-3">Check In</th>
                <th class="px-4 py-3">Check Out</th>
                <th class="px-4 py-3">Status</th>
                <th class="px-4 py-3">Sumber Data</th>
                <th class="px-4 py-3">Catatan</th>
                <th class="px-4 py-3 text-right">Aksi</th>
            </x-slot:heading>
            <x-slot:body>
                @forelse($attendances as $attendance)
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400 text-xs">{{ $attendance->date?->format('Y-m-d') }}</td>
                    <td class="px-4 py-3 font-mono text-xs text-gray-500 dark:text-gray-400">{{ $attendance->teacher->employee_number ?? '–' }}</td>
                    <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">{{ $attendance->teacher->full_name ?? '–' }}</td>
                    <td class="px-4 py-3 font-mono text-sm text-gray-600 dark:text-gray-400">{{ $attendance->check_in_time ?? '–' }}</td>
                    <td class="px-4 py-3 font-mono text-sm text-gray-600 dark:text-gray-400">{{ $attendance->check_out_time ?? '–' }}</td>
                    <td class="px-4 py-3">
                        @php
                            $statusValue = $attendance->status instanceof \App\Enums\TeacherDailyAttendanceStatus
                                ? $attendance->status->value
                                : (string) $attendance->status;

                            $statusLabel = $attendance->status instanceof \App\Enums\TeacherDailyAttendanceStatus
                                ? $attendance->status->label()
                                : ucfirst($statusValue);

                            $statusColors = [
                                'present' => 'green',
                                'late' => 'yellow',
                                'absent' => 'red',
                                'permission' => 'blue',
                                'sick' => 'purple',
                                'out_of_office' => 'gray',
                            ];
                        @endphp
                        <x-badge :color="$statusColors[$statusValue] ?? 'gray'">{{ $statusLabel }}</x-badge>
                    </td>
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400 text-xs">
                        <x-badge :color="$attendance->is_auto ? 'blue' : 'gray'">{{ $attendance->is_auto ? 'Auto Scan' : 'Manual/Admin' }}</x-badge>
                    </td>
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400 text-xs max-w-[180px] truncate">{{ $attendance->notes ?? '–' }}</td>
                    <td class="px-4 py-3 text-right">
                        <button
                            @click="correctionForm = {{ json_encode([
                                'entity_type' => 'teacher',
                                'user_id' => $attendance->teacher_id,
                                'target_date' => $attendance->date?->format('Y-m-d'),
                                'final_status_overwrite' => $statusValue,
                                'note' => '',
                            ]) }}; showModal = true"
                            class="text-xs font-medium text-primary-600 hover:underline dark:text-primary-400"
                        >Koreksi</button>
                    </td>
                </tr>
                @empty
                <tr><td colspan="9" class="px-4 py-8 text-center text-gray-400">Tidak ada data absensi</td></tr>
                @endforelse
            </x-slot:body>
            @if($attendances->hasPages())
                <x-slot:pagination>{{ $attendances->withQueryString()->links() }}</x-slot:pagination>
            @endif
        </x-data-table>
    </div>

    <x-modal :show="'showModal'" title="Koreksi Manual Absensi Guru" size="sm">
        <form action="{{ route('admin.teacher-daily-attendances.correct') }}" method="POST" class="space-y-4">
            @csrf @method('PATCH')
            <input type="hidden" name="entity_type" value="teacher">
            <input type="hidden" name="user_id" :value="correctionForm.user_id">
            <input type="hidden" name="target_date" :value="correctionForm.target_date">

            <div>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Status Final</label>
                <select name="final_status_overwrite" x-model="correctionForm.final_status_overwrite" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    @foreach($statusOptions as $option)
                    <option value="{{ $option['value'] }}">{{ $option['label'] }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Catatan Koreksi (opsional)</label>
                <textarea name="note" x-model="correctionForm.note" rows="3" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white"></textarea>
            </div>
            <x-slot:footer>
                <button type="button" @click="showModal = false" class="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600">Batal</button>
                <button type="submit" class="px-5 py-2.5 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800">Simpan Koreksi</button>
            </x-slot:footer>
        </form>
    </x-modal>
</div>
@endsection