@extends('Component.layout')

@section('title', 'Roles & Permissions - Iqra')
@section('breadcrumb', 'Roles & Permissions')

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

    {{-- Page Header --}}
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
            <h1 class="text-3xl font-extrabold tracking-tight text-slate-800">Roles & Permissions</h1>
            <p class="text-xs text-slate-500 font-medium mt-1">Select an Admin or Teacher below to allocate their system access permissions.</p>
        </div>
        <div class="flex items-center gap-2">
            <a href="{{ route('superadmin.dashboard') }}"
                class="px-4 py-2.5 bg-white border border-slate-200 text-slate-700 hover:bg-slate-50 text-xs font-bold rounded-full transition-all flex items-center gap-2 shadow-sm">
                <svg class="w-3.5 h-3.5 fill-none stroke-current" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"/></svg>
                Dashboard
            </a>
        </div>
    </div>

    {{-- Alert --}}
    @if(session('success'))
    <div id="rolesAlert" class="flex items-center gap-3 bg-emerald-50 border border-emerald-200 text-emerald-800 text-xs font-semibold px-4 py-3.5 rounded-2xl">
        <svg class="w-4 h-4 text-emerald-600 fill-none stroke-current shrink-0" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        {!! session('success') !!}
    </div>
    @endif

    {{-- User Selection --}}
    <div class="bg-white border border-slate-200 rounded-3xl p-6 shadow-sm flex flex-col md:flex-row md:items-start gap-4 relative z-30">
        <label class="text-[11px] font-bold text-slate-600 uppercase tracking-wider shrink-0 md:mt-4">Select User:</label>
        
        <div x-data="{ 
                open: false, 
                selected: '{{ $selectedUser ? $selectedUser->id : '' }}',
                selectedText: '{{ $selectedUser ? $selectedUser->name . ' (' . ucfirst($selectedUser->role) . ')' : '-- Select Admin or Teacher --' }}'
            }" 
            class="relative flex-1 w-full sm:max-w-md"
            @click.away="open = false">
            
            <!-- Trigger Button -->
            <button @click="open = !open" type="button" 
                class="w-full flex items-center justify-between px-5 py-3.5 rounded-2xl border border-slate-200 bg-slate-50 hover:bg-white focus:bg-white focus:border-teal-500 focus:ring-4 focus:ring-teal-500/10 transition-all text-sm font-bold text-slate-800 shadow-sm text-left outline-none">
                <span x-text="selectedText" :class="selected ? 'text-slate-800' : 'text-slate-500 font-medium'"></span>
                <svg class="w-5 h-5 text-slate-400 transition-transform duration-200" :class="open ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
            </button>

            <!-- Dropdown Menu -->
            <div x-show="open" 
                x-transition:enter="transition ease-out duration-150"
                x-transition:enter-start="transform opacity-0 scale-95 translate-y-[-10px]"
                x-transition:enter-end="transform opacity-100 scale-100 translate-y-0"
                x-transition:leave="transition ease-in duration-100"
                x-transition:leave-start="transform opacity-100 scale-100 translate-y-0"
                x-transition:leave-end="transform opacity-0 scale-95 translate-y-[-10px]"
                class="absolute z-50 w-full mt-2 bg-white border border-slate-200 rounded-2xl shadow-xl overflow-hidden"
                style="display: none;">
                
                <div class="max-h-[320px] overflow-y-auto overscroll-contain">
                    <!-- Admins Group -->
                    <div class="px-4 py-2.5 bg-slate-50/80 border-b border-slate-100 sticky top-0 z-10 backdrop-blur-md">
                        <span class="text-[10px] font-extrabold text-slate-400 uppercase tracking-wider">Admins</span>
                    </div>
                    <div class="p-1.5 space-y-0.5">
                        @foreach($users->where('role', 'admin') as $user)
                            <button @click="window.location.href='?user_id={{ $user->id }}'" type="button" class="w-full flex items-center justify-between px-4 py-3 rounded-xl text-sm font-bold transition-colors hover:bg-slate-50 {{ $selectedUser && $selectedUser->id == $user->id ? 'text-teal-700 bg-teal-50/80 ring-1 ring-teal-500/20' : 'text-slate-700' }}">
                                <div class="flex items-center gap-3">
                                    <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-indigo-700 text-white flex items-center justify-center text-xs shadow-sm shadow-indigo-500/20">
                                        {{ strtoupper(substr($user->name, 0, 1)) }}
                                    </div>
                                    <span>{{ $user->name }}</span>
                                </div>
                                @if($selectedUser && $selectedUser->id == $user->id)
                                    <svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                                @endif
                            </button>
                        @endforeach
                    </div>

                    <!-- Teachers Group -->
                    <div class="px-4 py-2.5 bg-slate-50/80 border-y border-slate-100 sticky top-0 z-10 backdrop-blur-md mt-1">
                        <span class="text-[10px] font-extrabold text-slate-400 uppercase tracking-wider">Teachers</span>
                    </div>
                    <div class="p-1.5 space-y-0.5">
                        @foreach($users->where('role', 'teacher') as $user)
                            <button @click="window.location.href='?user_id={{ $user->id }}'" type="button" class="w-full flex items-center justify-between px-4 py-3 rounded-xl text-sm font-bold transition-colors hover:bg-slate-50 {{ $selectedUser && $selectedUser->id == $user->id ? 'text-teal-700 bg-teal-50/80 ring-1 ring-teal-500/20' : 'text-slate-700' }}">
                                <div class="flex items-center gap-3">
                                    <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-emerald-500 to-emerald-700 text-white flex items-center justify-center text-xs shadow-sm shadow-emerald-500/20">
                                        {{ strtoupper(substr($user->name, 0, 1)) }}
                                    </div>
                                    <span>{{ $user->name }}</span>
                                </div>
                                @if($selectedUser && $selectedUser->id == $user->id)
                                    <svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                                @endif
                            </button>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Permissions Table --}}
    @if($selectedUser)
        @php
            $userPerms = $selectedUser->permissions ?? [];
        @endphp
        <div class="bg-white border border-slate-200 rounded-3xl shadow-sm overflow-hidden">
            <div class="px-6 py-5 border-b border-slate-100 bg-slate-50/50 flex justify-between items-center">
                <h3 class="text-sm font-extrabold text-slate-800">Assign Roles for <span class="text-teal-600">{{ $selectedUser->name }}</span></h3>
            </div>
            
            <form action="{{ route('superadmin.roles.update', $selectedUser->id) }}" method="POST">
                @csrf
                <div class="divide-y divide-slate-100">
                    @foreach($permissions as $key => $meta)
                        @php $isChecked = in_array($key, $userPerms); @endphp
                        <div class="flex items-center justify-between p-6 hover:bg-slate-50/50 transition-colors">
                            <div class="pr-4">
                                <div class="text-sm font-bold text-slate-800">{{ $meta['label'] }}</div>
                                <div class="text-[11px] text-slate-500 font-medium mt-1">{{ $meta['desc'] }}</div>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer shrink-0">
                                <input type="checkbox" name="permissions[]" value="{{ $key }}" class="sr-only peer" {{ $isChecked ? 'checked' : '' }}>
                                <div class="w-12 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-teal-500"></div>
                            </label>
                        </div>
                    @endforeach
                </div>
                
                <div class="p-6 bg-slate-50 border-t border-slate-100 flex justify-end">
                    <button type="submit" class="px-6 py-2.5 bg-teal-600 hover:bg-teal-700 text-white text-xs font-bold rounded-xl transition-all shadow-md shadow-teal-600/20">
                        Save Permissions
                    </button>
                </div>
            </form>
        </div>
    @else
        <div class="bg-white border border-slate-200 rounded-3xl p-12 text-center shadow-sm">
            <div class="w-16 h-16 bg-slate-50 rounded-2xl flex items-center justify-center mx-auto mb-4 border border-slate-100">
                <svg class="w-8 h-8 text-slate-300 fill-none stroke-current" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/></svg>
            </div>
            <h3 class="text-sm font-extrabold text-slate-800 mb-1">No User Selected</h3>
            <p class="text-[11px] text-slate-500 font-medium">Please select an Admin or Teacher from the dropdown above to manage their permissions.</p>
        </div>
    @endif

</div>

<script>
    // Auto-dismiss success alert
    setTimeout(() => {
        const el = document.getElementById('rolesAlert');
        if (el) { el.style.transition = 'opacity 0.5s'; el.style.opacity = '0'; setTimeout(() => el.remove(), 500); }
    }, 4000);
</script>
@endsection