<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-4xl font-black text-slate-900 tracking-tight font-outfit">Manage Access</h1>
                <p class="text-slate-400 font-medium mt-1 italic uppercase tracking-widest text-[10px]">Student: {{ $user->name }} ({{ $user->username }})</p>
            </div>
            <a href="{{ route('admin.users.index') }}" class="btn btn-secondary 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="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>
                Back to Students
            </a>
        </div>
    </x-slot>

    <div class="max-w-4xl">
        <div class="bg-white rounded-[2.5rem] border border-slate-100 shadow-xl p-10">
            <form action="{{ route('admin.users.access.update', $user) }}" method="POST" class="space-y-8">
                @csrf
                
                <div>
                    <h3 class="text-xl font-black text-slate-800 font-outfit mb-6">Select Paid Notes to Grant Access</h3>
                    
                    @if($paid_notes->isEmpty())
                        <div class="p-8 bg-slate-50 rounded-2xl text-center">
                            <p class="text-slate-400 font-bold italic">No paid notes available in the repository.</p>
                        </div>
                    @else
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            @foreach($paid_notes as $note)
                                <label class="relative flex items-center p-4 rounded-2xl border border-slate-100 hover:border-indigo-200 hover:bg-indigo-50/30 transition-all cursor-pointer group">
                                    <input type="checkbox" name="notes[]" value="{{ $note->id }}" {{ in_array($note->id, $user_access) ? 'checked' : '' }} class="w-5 h-5 text-indigo-600 border-slate-300 rounded focus:ring-indigo-500">
                                    <div class="ml-4">
                                        <p class="text-sm font-bold text-slate-800 group-hover:text-indigo-600 transition-colors">{{ $note->title }}</p>
                                        <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">{{ $note->category->name }}</p>
                                    </div>
                                </label>
                            @endforeach
                        </div>
                    @endif
                </div>

                <div class="pt-8 border-t border-slate-50 flex gap-4">
                    <button type="submit" class="btn btn-indigo flex-grow py-4 text-sm tracking-[0.2em]">
                        Save Access Settings
                    </button>
                    <a href="{{ route('admin.users.index') }}" class="btn btn-secondary px-8 py-4 text-sm tracking-[0.2em]">
                        Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>
</x-app-layout>
