@extends('layouts.app')

@section('title', 'Cetak Kartu QR - Admin')

@section('content')
<div x-data="{
    activeTab: '{{ $activeTab }}',
    classrooms: @js($classrooms->map(fn($classroom) => [
        'id' => $classroom->id,
        'name' => ($classroom->grade_level ? $classroom->grade_level->value . ' ' : '') . $classroom->name,
    ])),
    changeTab(tab) {
        window.location.href = '?tab=' + tab;
    },
    showRevokeConfirm: false,
    showRevokeConfirmUrl: '',
    revokeToggle(url) { 
        this.showRevokeConfirmUrl = url; 
        this.showRevokeConfirm = true; 
    },
    showGenerateConfirm: false,
    showGenerateConfirmUrl: '',
    generateToggle(url) { 
        this.showGenerateConfirmUrl = url; 
        this.showGenerateConfirm = true; 
    },
    showGenerateModal: false,
    showDownloadModal: false
}">

    {{-- Header --}}
    <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Manajemen QR Code</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Cetak dan kelola token QR Code (Siswa & Guru)</p>
        </div>
        <div class="flex items-center gap-2">
            <button type="button" @click="showGenerateModal = true"
                class="inline-flex items-center gap-2 rounded-lg bg-yellow-100 px-4 py-2 text-sm font-medium text-yellow-900 hover:bg-yellow-200 focus:ring-4 focus:ring-yellow-100 dark:bg-yellow-900/30 dark:text-yellow-300 dark:hover:bg-yellow-900/50">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
                </svg>
                Generate Batch ({{ $withoutQrCount }} belum ada)
            </button>
            <button type="button" @click="showDownloadModal = true"
                class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                </svg>
                Download Batch ({{ $totalCount - $withoutQrCount }})
            </button>
        </div>
    </div>

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

    {{-- Tabs --}}
    <div class="mb-4 text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700">
        <ul class="flex flex-wrap -mb-px">
            <li class="mr-2">
                <a href="#" @click.prevent="changeTab('student')"
                    class="inline-flex items-center justify-center p-4 border-b-2 rounded-t-lg group"
                    :class="activeTab === 'student' ? 'text-primary-600 border-primary-600 dark:text-primary-500 dark:border-primary-500' : 'border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300'">
                    <svg class="w-4 h-4 mr-2" :class="activeTab === 'student' ? 'text-primary-600 dark:text-primary-500' : 'text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300'" fill="currentColor" viewBox="0 0 20 20">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"></path>
                    </svg>
                    Siswa
                </a>
            </li>
            <li class="mr-2">
                <a href="#" @click.prevent="changeTab('teacher')"
                    class="inline-flex items-center justify-center p-4 border-b-2 rounded-t-lg group"
                    :class="activeTab === 'teacher' ? 'text-primary-600 border-primary-600 dark:text-primary-500 dark:border-primary-500' : 'border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300'">
                    <svg class="w-4 h-4 mr-2" :class="activeTab === 'teacher' ? 'text-primary-600 dark:text-primary-500' : 'text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300'" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"></path>
                    </svg>
                    Guru
                </a>
            </li>
        </ul>
    </div>

    {{-- Filter Bar --}}
    <x-filter-bar>
        <x-slot:fields>
            <input type="hidden" name="tab" :value="activeTab">
            
            <template x-if="activeTab === 'student'">
                <div class="contents">
                    <div>
                        <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Kelas</label>
                        <select name="classroom_id"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                            <option value="">Semua Kelas</option>
                            <template x-for="classroom in classrooms" :key="classroom.id">
                                <option :value="classroom.id" :selected="String(classroom.id) === '{{ (string) $classroom_id }}'"
                                    x-text="classroom.name"></option>
                            </template>
                        </select>
                    </div>
                </div>
            </template>

            <template x-if="activeTab === 'teacher'">
                <div class="contents">
                    <div>
                        <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Gender</label>
                        <select name="gender"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                            <option value="" {{ $gender==='' ? 'selected' : '' }}>Semua Gender</option>
                            <option value="male" {{ $gender==='male' ? 'selected' : '' }}>Laki-laki</option>
                            <option value="female" {{ $gender==='female' ? 'selected' : '' }}>Perempuan</option>
                        </select>
                    </div>
                </div>
            </template>

            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Status Akun</label>
                <select name="status"
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="" {{ $status==='' ? 'selected' : '' }}>Semua Status</option>
                    <option value="active" {{ $status==='active' ? 'selected' : '' }}>Aktif</option>
                    <option value="inactive" {{ $status==='inactive' ? 'selected' : '' }}>Non-aktif</option>
                </select>
            </div>

            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Kepemilikan QR</label>
                <select name="qr_status"
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="" {{ $qr_status==='' ? 'selected' : '' }}>Semua</option>
                    <option value="has_qr" {{ $qr_status==='has_qr' ? 'selected' : '' }}>Punya QR Aktif</option>
                    <option value="no_qr" {{ $qr_status==='no_qr' ? 'selected' : '' }}>Belum Punya / Dicabut</option>
                </select>
            </div>
            
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Cari Nama/ID</label>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari nama atau NIP/NIS..."
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>
        </x-slot:fields>
    </x-filter-bar>

    {{-- Data Grid --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mt-4">
        @forelse($records as $record)
        @php
            $activeToken = $record->qrTokens->first();
            $token = $activeToken?->token;
            $qrImageUrl = $token
                ? ($activeTab === 'teacher'
                    ? '/storage/qr-codes/teachers/'.$token.'.svg'
                    : '/storage/qr-codes/students/'.$token.'.svg')
                : null;
            $generateRoute = $activeTab === 'teacher'
                ? route('admin.qr.teacher.generate', $record)
                : route('admin.qr.student.generate', $record);
            $downloadRoute = $activeTab === 'teacher'
                ? route('admin.qr.teacher.download', $record)
                : route('admin.qr.student.download', $record);
            $revokeRoute = $activeTab === 'teacher'
                ? route('admin.qr.teacher.revoke', $record)
                : route('admin.qr.student.revoke', $record);
        @endphp

        <div class="bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 p-5 flex flex-col justify-between">
            <div class="text-center relative">
                <div class="absolute right-0 top-0">
                    <x-badge :color="$token ? 'green' : 'gray'">
                        {{ $token ? 'QR Aktif' : 'Belum Ada QR' }}
                    </x-badge>
                </div>
                
                <div class="mx-auto mt-4 mb-4 flex h-24 w-24 items-center justify-center overflow-hidden rounded-lg bg-gray-50 border border-gray-100 dark:bg-gray-700 dark:border-gray-600">
                    @if($qrImageUrl)
                        <img src="{{ $qrImageUrl }}" alt="QR {{ $record->full_name }}" class="h-24 w-24 object-contain">
                    @else
                        <svg class="h-10 w-10 text-gray-300 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"></path>
                        </svg>
                    @endif
                </div>

                <h3 class="text-sm font-semibold text-gray-900 dark:text-white truncate" title="{{ $record->full_name }}">
                    {{ $record->full_name }}
                </h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                    {{ $activeTab === 'teacher' ? $record->employee_number : ($record->classroom ? ($record->classroom->grade_level ? $record->classroom->grade_level->value . ' ' : '') . $record->classroom->name : '-') }}
                </p>
            </div>

            <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700 flex flex-wrap items-center justify-center gap-x-4 gap-y-2">
                @if($token)
                <a href="{{ $downloadRoute }}" target="_blank"
                    class="text-xs font-semibold text-primary-600 hover:text-primary-800 hover:underline dark:text-primary-400 dark:hover:text-primary-300">Unduh</a>
                <button type="button" @click="revokeToggle('{{ $revokeRoute }}')"
                    class="text-xs font-semibold text-red-600 hover:text-red-800 hover:underline dark:text-red-400 dark:hover:text-red-300">Cabut</button>
                @endif
                <button type="button" @click="generateToggle('{{ $generateRoute }}')"
                    class="text-xs font-semibold text-yellow-600 hover:text-yellow-800 hover:underline dark:text-yellow-400 dark:hover:text-yellow-300">
                    {{ $token ? 'Buat Ulang' : 'Buat Baru' }}
                </button>
            </div>
        </div>
        @empty
        <div class="col-span-1 sm:col-span-2 lg:col-span-4 p-8 text-center bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
            <svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"></path>
            </svg>
            <h3 class="text-sm font-medium text-gray-900 dark:text-white">Tidak ada data ditemukan</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Gunakan filter atau ubah kata kunci pencarian Anda.</p>
        </div>
        @endforelse
    </div>

    <div class="mt-6">
        {{ $records->withQueryString()->links() }}
    </div>

    {{-- Generate Batch Modal --}}
    <div x-show="showGenerateModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/60 p-4"
        @keydown.escape.window="showGenerateModal = false">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl p-6 max-w-md w-full text-center" @click.away="showGenerateModal = false">
            <div class="flex justify-center mb-4">
                <div class="w-14 h-14 rounded-full bg-yellow-100 dark:bg-yellow-900/30 flex items-center justify-center">
                    <svg class="w-7 h-7 text-yellow-600 dark:text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
                    </svg>
                </div>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Generate QR Code Tambahan</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">Terdapat <strong>{{ $withoutQrCount }}</strong> akun yang saat ini tidak / belum memiliki QR Code. Anda yakin ingin melanjutkan generate secara batch?</p>
            <div class="flex justify-center gap-3">
                <button type="button" @click="showGenerateModal = false"
                    class="px-5 py-2.5 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">Batal</button>
                <form method="POST" action="{{ route('admin.qr.batch.generate') }}" class="inline">
                    @csrf
                    <input type="hidden" name="role" value="{{ $activeTab }}">
                    <input type="hidden" name="classroom_id" value="{{ $classroom_id > 0 ? $classroom_id : '' }}">
                    <input type="hidden" name="gender" value="{{ $gender }}">
                    <input type="hidden" name="status" value="{{ $status }}">
                    <button type="submit" @click="showGenerateModal = false"
                        class="px-5 py-2.5 text-sm font-medium text-gray-900 bg-yellow-400 rounded-lg hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-900">Ya, Generate</button>
                </form>
            </div>
        </div>
    </div>

    {{-- Download Batch Modal --}}
    <div x-show="showDownloadModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/60 p-4"
        @keydown.escape.window="showDownloadModal = false">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl p-6 max-w-md w-full text-center" @click.away="showDownloadModal = false">
            <div class="flex justify-center mb-4">
                <div class="w-14 h-14 rounded-full bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center">
                    <svg class="w-7 h-7 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                    </svg>
                </div>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Download QR Code Massal</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">Anda akan mengunduh <strong>{{ $totalCount - $withoutQrCount }}</strong> QR Code yang aktif dalam format ZIP. Lanjutkan?</p>
            <div class="flex justify-center gap-3">
                <button type="button" @click="showDownloadModal = false"
                    class="px-5 py-2.5 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">Batal</button>
                <a href="{{ route('admin.qr.batch.download', request()->query()) }}" @click="showDownloadModal = false"
                    class="px-5 py-2.5 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-900 inline-flex items-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                    Ya, Download ZIP
                </a>
            </div>
        </div>
    </div>

    {{-- Confirm Revoke Action Modal --}}
    <x-confirm-dialog 
        show="showRevokeConfirm"
        title="Konfirmasi Cabut QR" 
        message="Apakah Anda yakin ingin menonaktifkan kode QR ini? QR lama tidak bisa digunakan lagi." 
        confirm-text="Ya, Nonaktifkan" 
        method="PATCH" 
    />
    
    {{-- Confirm Generate Action Modal --}}
    <x-confirm-dialog 
        show="showGenerateConfirm"
        title="Konfirmasi Buat QR Baru" 
        message="Apakah Anda yakin ingin membuat QR code baru? Jika QR sebelumnya ada, maka otomatis akan dinonaktifkan dan diganti dengan yang ini." 
        confirm-text="Ya, Buat Baru" 
        method="POST" 
        :danger="false"
    />
</div>
@endsection