@extends('layouts.admin.app')

@section('content')
<div class="space-y-6">

    {{-- Page Header --}}
    <div class="flex items-center justify-between bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl p-8 shadow-lg">
        <div class="text-white">
            <div class="flex items-center gap-3 mb-2">
                <div class="bg-white/20 p-3 rounded-lg backdrop-blur-sm">
                    <i class="bi bi-calendar-check-fill text-3xl"></i>
                </div>
                <div>
                    <h2 class="text-3xl font-bold">Kehadiran Siswa</h2>
                    <p class="text-indigo-100 mt-1">Kelola data kehadiran harian siswa dengan mudah & cepat</p>
                </div>
            </div>
        </div>
        <div class="flex gap-3">
            <a href="{{ route('admin.kehadiran-siswa.create') }}" 
               class="px-6 py-3 rounded-xl bg-white text-indigo-600 hover:bg-indigo-50 shadow-lg font-semibold flex items-center gap-2 transition-all duration-300 hover:scale-105">
                <i class="bi bi-plus-circle-fill"></i> 
                <span>Tambah Kehadiran</span>
            </a>
            <a href="{{ route('admin.kehadiran-siswa.export') }}" 
               class="px-6 py-3 rounded-xl bg-green-500 text-white hover:bg-green-600 shadow-lg font-semibold flex items-center gap-2 transition-all duration-300 hover:scale-105">
                <i class="bi bi-file-earmark-excel-fill"></i> 
                <span>Export Excel</span>
            </a>
        </div>
    </div>

    {{-- Notifikasi Success --}}
    @if(session('success'))
        <div class="bg-gradient-to-r from-green-50 to-emerald-50 border-l-4 border-green-500 text-green-800 px-6 py-4 rounded-xl shadow-md flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="bg-green-500 text-white p-2 rounded-full">
                    <i class="bi bi-check-circle-fill text-xl"></i>
                </div>
                <span class="font-medium">{{ session('success') }}</span>
            </div>
            <button type="button" class="text-green-600 hover:text-green-800 transition" onclick="this.parentElement.remove()">
                <i class="bi bi-x-lg text-xl"></i>
            </button>
        </div>
    @endif

    {{-- Filter & Search --}}
    <div class="bg-white shadow-lg rounded-2xl p-6 border border-gray-100">
        <div class="flex items-center gap-2 mb-4 pb-4 border-b border-gray-200">
            <div class="bg-indigo-100 p-2 rounded-lg">
                <i class="bi bi-funnel text-indigo-600 text-lg"></i>
            </div>
            <h3 class="text-lg font-semibold text-gray-800">Filter & Pencarian</h3>
        </div>

        <form action="{{ route('admin.kehadiran-siswa.index') }}" method="GET" class="grid md:grid-cols-4 gap-4">
            {{-- Tanggal --}}
            <div>
                <label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
                    <i class="bi bi-calendar3 text-indigo-600"></i>
                    Tanggal
                </label>
                <input type="date" name="tanggal" value="{{ request('tanggal') }}"
                       class="form-control w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all">
            </div>

            {{-- Status --}}
            <div>
                <label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
                    <i class="bi bi-bookmark-check text-indigo-600"></i>
                    Status
                </label>
                <select name="status" class="form-select w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all">
                    <option value="">Semua Status</option>
                    @foreach($listStatus as $status)
                        <option value="{{ $status }}" {{ request('status') == $status ? 'selected' : '' }}>
                            {{ ucfirst($status) }}
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- Kelas --}}
            <div>
                <label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
                    <i class="bi bi-door-closed text-indigo-600"></i>
                    Kelas
                </label>
                <select name="kelas" class="form-select w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all">
                    <option value="">Semua Kelas</option>
                    @foreach($listKelas as $kelas)
                        <option value="{{ $kelas }}" {{ request('kelas') == $kelas ? 'selected' : '' }}>
                            {{ $kelas }}
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- Button Filter --}}
            <div class="flex items-end">
                <button type="submit" class="w-full px-5 py-3 rounded-xl bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 text-white shadow-md transition-all duration-300 hover:scale-105 font-semibold">
                    <i class="bi bi-search"></i> Terapkan
                </button>
            </div>
        </form>
    </div>

    {{-- Statistik Cards --}}
    @if(isset($statistik))
        <div class="grid md:grid-cols-4 gap-4">

            <div class="bg-gradient-to-br from-green-50 to-emerald-50 shadow-lg rounded-2xl p-6 border border-green-100">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-4xl font-bold text-green-700">{{ $statistik['hadir'] }}</p>
                        <p class="text-green-600 font-semibold mt-1">Hadir</p>
                    </div>
                    <div class="bg-green-100 p-4 rounded-xl">
                        <i class="bi bi-check-circle-fill text-green-600 text-3xl"></i>
                    </div>
                </div>
            </div>

            <div class="bg-gradient-to-br from-yellow-50 to-amber-50 shadow-lg rounded-2xl p-6 border border-yellow-100">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-4xl font-bold text-yellow-700">{{ $statistik['izin'] }}</p>
                        <p class="text-yellow-600 font-semibold mt-1">Izin</p>
                    </div>
                    <div class="bg-yellow-100 p-4 rounded-xl">
                        <i class="bi bi-exclamation-circle-fill text-yellow-600 text-3xl"></i>
                    </div>
                </div>
            </div>

            <div class="bg-gradient-to-br from-blue-50 to-sky-50 shadow-lg rounded-2xl p-6 border border-blue-100">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-4xl font-bold text-blue-700">{{ $statistik['sakit'] }}</p>
                        <p class="text-blue-600 font-semibold mt-1">Sakit</p>
                    </div>
                    <div class="bg-blue-100 p-4 rounded-xl">
                        <i class="bi bi-thermometer-half text-blue-600 text-3xl"></i>
                    </div>
                </div>
            </div>

            <div class="bg-gradient-to-br from-red-50 to-rose-50 shadow-lg rounded-2xl p-6 border border-red-100">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-4xl font-bold text-red-700">{{ $statistik['alpha'] }}</p>
                        <p class="text-red-600 font-semibold mt-1">Alpha</p>
                    </div>
                    <div class="bg-red-100 p-4 rounded-xl">
                        <i class="bi bi-x-circle-fill text-red-600 text-3xl"></i>
                    </div>
                </div>
            </div>
        </div>
    @endif

    {{-- Data Table --}}
    <div class="bg-white shadow-lg rounded-2xl overflow-hidden border border-gray-100">
        <div class="bg-gradient-to-r from-gray-50 to-gray-100 px-6 py-4 border-b border-gray-200">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <div class="bg-indigo-100 p-2 rounded-lg">
                        <i class="bi bi-table text-indigo-600 text-lg"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800">Daftar Kehadiran Siswa</h3>
                </div>
                <div class="text-sm text-gray-600">
                    <span class="font-medium">Total: {{ $kehadiran->total() }} data</span>
                    <span class="mx-2">|</span>
                    <span>Halaman {{ $kehadiran->currentPage() }} dari {{ $kehadiran->lastPage() }}</span>
                </div>
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full text-sm text-left text-gray-600">
                <thead class="bg-gradient-to-r from-indigo-50 to-purple-50 text-gray-700 text-sm font-semibold sticky top-0 z-10 border-b-2 border-indigo-200">
                    <tr>
                        <th class="px-6 py-4 text-center">
                            <div class="flex items-center justify-center gap-2">
                                <i class="bi bi-hash text-indigo-600"></i>
                                <span>No</span>
                            </div>
                        </th>
                        <th class="px-6 py-4">
                            <div class="flex items-center gap-2">
                                <i class="bi bi-person-badge text-indigo-600"></i>
                                <span>Siswa</span>
                            </div>
                        </th>
                        <th class="px-6 py-4">
                            <div class="flex items-center gap-2">
                                <i class="bi bi-calendar3 text-indigo-600"></i>
                                <span>Tanggal</span>
                            </div>
                        </th>
                        <th class="px-6 py-4 text-center">
                            <div class="flex items-center justify-center gap-2">
                                <i class="bi bi-bookmark-check text-indigo-600"></i>
                                <span>Status</span>
                            </div>
                        </th>
                        <th class="px-6 py-4">
                            <div class="flex items-center gap-2">
                                <i class="bi bi-journal-text text-indigo-600"></i>
                                <span>Keterangan</span>
                            </div>
                        </th>
                        <th class="px-6 py-4 text-center">
                            <div class="flex items-center justify-center gap-2">
                                <i class="bi bi-gear text-indigo-600"></i>
                                <span>Aksi</span>
                            </div>
                        </th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-gray-100">
                    @forelse($kehadiran as $index => $item)
                        <tr class="hover:bg-indigo-50/50 transition-colors duration-200">
                            <td class="px-6 py-4 text-center">
                                <div class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-indigo-100 text-indigo-700 font-bold text-sm">
                                    {{ $kehadiran->firstItem() + $index }}
                                </div>
                            </td>

                            <td class="px-6 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-400 to-purple-500 flex items-center justify-center text-white font-bold">
                                        {{ strtoupper(substr($item->siswa->nama_siswa, 0, 1)) }}
                                    </div>
                                    <div>
                                        <p class="font-semibold text-gray-800">{{ $item->siswa->nama_siswa }}</p>
                                        @if($item->siswa->kelas)
                                            <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-semibold mt-1
                                                {{ str_contains($item->siswa->kelas->nama_kelas, 'XII') ? 'bg-gradient-to-r from-green-100 to-emerald-100 text-green-700 border border-green-200' :
                                                   (str_contains($item->siswa->kelas->nama_kelas, 'XI') ? 'bg-gradient-to-r from-yellow-100 to-amber-100 text-yellow-700 border border-yellow-200' : 'bg-gradient-to-r from-blue-100 to-sky-100 text-blue-700 border border-blue-200') }}">
                                                <i class="bi bi-bookmark-fill"></i>
                                                {{ $item->siswa->kelas->nama_kelas }}
                                            </span>
                                        @else
                                            <span class="text-xs text-gray-400 italic">Belum ada kelas</span>
                                        @endif
                                    </div>
                                </div>
                            </td>

                            <td class="px-6 py-4">
                                <div class="flex items-center gap-2">
                                    <div class="bg-gray-100 p-2 rounded-lg">
                                        <i class="bi bi-calendar-event text-gray-600"></i>
                                    </div>
                                    <div>
                                        <p class="text-gray-800 font-medium">{{ \Carbon\Carbon::parse($item->tanggal)->format('d M Y') }}</p>
                                        <p class="text-xs text-gray-500">{{ \Carbon\Carbon::parse($item->tanggal)->translatedFormat('l') }}</p>
                                    </div>
                                </div>
                            </td>

                            <td class="px-6 py-4 text-center">
                                @php
                                    $badges = [
                                        'hadir' => ['color' => 'bg-gradient-to-r from-green-100 to-emerald-100 text-green-700 border border-green-200', 'icon' => 'check-circle-fill'],
                                        'izin'  => ['color' => 'bg-gradient-to-r from-yellow-100 to-amber-100 text-yellow-700 border border-yellow-200', 'icon' => 'exclamation-circle-fill'],
                                        'sakit' => ['color' => 'bg-gradient-to-r from-blue-100 to-sky-100 text-blue-700 border border-blue-200', 'icon' => 'thermometer-half'],
                                        'alpha'  => ['color' => 'bg-gradient-to-r from-red-100 to-rose-100 text-red-700 border border-red-200', 'icon' => 'x-circle-fill'],
                                    ];
                                    $status = $badges[$item->status] ?? ['color' => 'bg-gray-200 text-gray-600', 'icon' => 'question-circle'];
                                @endphp

                                <span class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-xs font-semibold {{ $status['color'] }}">
                                    <i class="bi bi-{{ $status['icon'] }}"></i>
                                    {{ ucfirst($item->status) }}
                                </span>
                            </td>

                            <td class="px-6 py-4">
                                @if($item->keterangan)
                                    <div class="flex items-start gap-2">
                                        <i class="bi bi-chat-left-text text-gray-400 mt-1"></i>
                                        <span class="text-gray-700">{{ $item->keterangan }}</span>
                                    </div>
                                @else
                                    <span class="text-gray-400 italic text-sm">Tidak ada keterangan</span>
                                @endif
                            </td>

                            <td class="px-6 py-4">
                                <div class="flex justify-center gap-2">
                                    <a href="{{ route('admin.kehadiran-siswa.edit', $item->id) }}"
                                       class="inline-flex items-center gap-1 px-4 py-2 rounded-lg bg-gradient-to-r from-amber-400 to-yellow-500 hover:from-amber-500 hover:to-yellow-600 text-white shadow-md transition-all duration-300 hover:scale-105 font-medium text-sm">
                                        <i class="bi bi-pencil-square"></i>
                                        <span>Edit</span>
                                    </a>

                                    <form action="{{ route('admin.kehadiran-siswa.destroy', $item->id) }}" method="POST"
                                          onsubmit="return confirm('Yakin mau hapus data kehadiran ini?')">
                                        @csrf @method('DELETE')
                                        <button type="submit"
                                                class="inline-flex items-center gap-1 px-4 py-2 rounded-lg bg-gradient-to-r from-red-500 to-rose-600 hover:from-red-600 hover:to-rose-700 text-white shadow-md transition-all duration-300 hover:scale-105 font-medium text-sm">
                                            <i class="bi bi-trash3-fill"></i>
                                            <span>Hapus</span>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-16 text-center">
                                <div class="flex flex-col items-center gap-3">
                                    <div class="w-20 h-20 rounded-full bg-gray-100 flex items-center justify-center">
                                        <i class="bi bi-inbox text-4xl text-gray-400"></i>
                                    </div>
                                    <div>
                                        <p class="text-gray-600 font-medium text-lg">Belum ada data kehadiran</p>
                                        <p class="text-gray-400 text-sm mt-1">Silakan tambahkan data kehadiran terlebih dahulu</p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        @if($kehadiran->hasPages())
            <div class="bg-gradient-to-r from-gray-50 to-gray-100 px-6 py-4 border-t border-gray-200">
                <div class="flex items-center justify-between">
                    {{-- Info --}}
                    <div class="text-sm text-gray-600">
                        Menampilkan 
                        <span class="font-semibold text-gray-800">{{ $kehadiran->firstItem() }}</span>
                        sampai 
                        <span class="font-semibold text-gray-800">{{ $kehadiran->lastItem() }}</span>
                        dari 
                        <span class="font-semibold text-gray-800">{{ $kehadiran->total() }}</span>
                        data
                    </div>

                    {{-- Pagination Links --}}
                    <div class="flex items-center gap-2">
                        {{-- Previous --}}
                        @if($kehadiran->onFirstPage())
                            <span class="px-4 py-2 rounded-lg bg-gray-200 text-gray-400 cursor-not-allowed font-medium">
                                <i class="bi bi-chevron-left"></i> Sebelumnya
                            </span>
                        @else
                            <a href="{{ $kehadiran->previousPageUrl() }}" 
                               class="px-4 py-2 rounded-lg bg-white hover:bg-indigo-500 hover:text-white text-gray-700 border border-gray-300 transition-all duration-300 font-medium shadow-sm">
                                <i class="bi bi-chevron-left"></i> Sebelumnya
                            </a>
                        @endif

                        {{-- Page Numbers --}}
                        <div class="hidden md:flex items-center gap-1">
                            @foreach(range(1, $kehadiran->lastPage()) as $page)
                                @if($page == $kehadiran->currentPage())
                                    <span class="px-4 py-2 rounded-lg bg-gradient-to-r from-indigo-500 to-purple-500 text-white font-bold shadow-md">
                                        {{ $page }}
                                    </span>
                                @elseif($page == 1 || $page == $kehadiran->lastPage() || abs($page - $kehadiran->currentPage()) <= 2)
                                    <a href="{{ $kehadiran->url($page) }}" 
                                       class="px-4 py-2 rounded-lg bg-white hover:bg-indigo-100 text-gray-700 border border-gray-300 transition-all duration-300 font-medium shadow-sm">
                                        {{ $page }}
                                    </a>
                                @elseif(abs($page - $kehadiran->currentPage()) == 3)
                                    <span class="px-2 text-gray-400">...</span>
                                @endif
                            @endforeach
                        </div>

                        {{-- Next --}}
                        @if($kehadiran->hasMorePages())
                            <a href="{{ $kehadiran->nextPageUrl() }}" 
                               class="px-4 py-2 rounded-lg bg-white hover:bg-indigo-500 hover:text-white text-gray-700 border border-gray-300 transition-all duration-300 font-medium shadow-sm">
                                Selanjutnya <i class="bi bi-chevron-right"></i>
                            </a>
                        @else
                            <span class="px-4 py-2 rounded-lg bg-gray-200 text-gray-400 cursor-not-allowed font-medium">
                                Selanjutnya <i class="bi bi-chevron-right"></i>
                            </span>
                        @endif
                    </div>
                </div>
            </div>
        @endif
    </div>

    {{-- Delete All Button --}}
    <div class="bg-gradient-to-br from-red-50 to-rose-50 shadow-lg rounded-2xl p-6 border border-red-100">
        <div class="flex items-center gap-3 mb-4">
            <div class="bg-red-100 p-3 rounded-lg">
                <i class="bi bi-exclamation-triangle-fill text-red-600 text-xl"></i>
            </div>
            <div>
                <h5 class="font-semibold text-red-800">Zona Berbahaya</h5>
                <p class="text-red-600 text-sm">Tindakan ini tidak dapat dibatalkan</p>
            </div>
        </div>
        <form action="{{ route('kehadiran-siswa.hapusSemua') }}" method="POST"
              onsubmit="return confirm('⚠️ Yakin ingin menghapus semua data kehadiran siswa?')">
            @csrf @method('DELETE')
            <button type="submit" class="w-full px-5 py-3 rounded-xl bg-gradient-to-r from-red-600 to-rose-600 hover:from-red-700 hover:to-rose-700 text-white shadow-md font-semibold flex items-center justify-center gap-2 transition-all duration-300 hover:scale-105">
                <i class="bi bi-trash3-fill"></i>
                <span>Hapus Semua Data Kehadiran</span>
            </button>
        </form>
    </div>

</div>

<style>
    /* Custom scrollbar for table */
    .overflow-x-auto::-webkit-scrollbar {
        height: 8px;
    }
    
    .overflow-x-auto::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 10px;
    }
    
    .overflow-x-auto::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 10px;
    }
    
    .overflow-x-auto::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

    /* Smooth animations */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .bg-white {
        animation: fadeIn 0.3s ease-out;
    }
</style>
@endsection