@extends('layouts.app')

@section('title', 'Manage Permission Overrides')

@section('content')
<div class="max-w-5xl mx-auto space-y-6">

    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-xl font-bold text-slate-900 dark:text-white">Permission Overrides: {{ $user->name }}</h1>
            <p class="text-xs text-slate-500 dark:text-slate-400">Override role permissions specifically for this individual user (Allow / Deny / Inherit).</p>
        </div>
        <a href="{{ route('app.users.index') }}" class="px-4 py-2 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-200 font-semibold text-xs rounded-xl">Back to Users</a>
    </div>

    <!-- Override Priority Warning Callout -->
    <div class="p-4 rounded-2xl bg-amber-50 dark:bg-amber-950/60 border border-amber-200 dark:border-amber-800 text-amber-800 dark:text-amber-200 text-xs">
        <span class="font-bold">Evaluation Priority:</span> Explicit User Deny ➔ Explicit User Allow ➔ Role Permission ➔ Default Deny.
    </div>

    <form action="{{ route('app.users.overrides.update', $user->id) }}" method="POST" class="space-y-6">
        @csrf

        <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-6">
            @foreach($permissions as $module => $modulePermissions)
                <div class="space-y-3 pb-4 border-b border-slate-200 dark:border-slate-700/60 last:border-0">
                    <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider flex items-center space-x-2 rtl:space-x-reverse">
                        <span class="w-2 h-2 rounded-full bg-sky-500"></span>
                        <span>{{ ucfirst($module) }} Management</span>
                    </h3>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                        @foreach($modulePermissions as $perm)
                            @php
                                $currentOverride = $overrides->get($perm->id);
                                $state = 'inherit';
                                if ($currentOverride) {
                                    $state = $currentOverride->is_allowed ? 'allow' : 'deny';
                                }
                            @endphp
                            <div class="p-3 rounded-2xl bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-slate-700/50 flex items-center justify-between">
                                <div>
                                    <span class="text-xs font-bold text-slate-800 dark:text-slate-200 block">{{ $perm->name }}</span>
                                    <span class="text-[10px] text-slate-400 font-mono">{{ $perm->slug }}</span>
                                </div>

                                <div class="flex items-center space-x-1 rtl:space-x-reverse text-[11px] font-semibold bg-white dark:bg-slate-800 p-1 rounded-xl border border-slate-200 dark:border-slate-700">
                                    <label class="cursor-pointer px-2 py-1 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700">
                                        <input type="radio" name="overrides[{{ $perm->id }}]" value="inherit" {{ $state === 'inherit' ? 'checked' : '' }} class="sr-only peer">
                                        <span class="peer-checked:text-slate-900 dark:peer-checked:text-white peer-checked:font-bold text-slate-400">Inherit</span>
                                    </label>

                                    <label class="cursor-pointer px-2 py-1 rounded-lg hover:bg-emerald-50 dark:hover:bg-emerald-950">
                                        <input type="radio" name="overrides[{{ $perm->id }}]" value="allow" {{ $state === 'allow' ? 'checked' : '' }} class="sr-only peer">
                                        <span class="peer-checked:text-emerald-600 dark:peer-checked:text-emerald-400 peer-checked:font-bold text-slate-400">Allow</span>
                                    </label>

                                    <label class="cursor-pointer px-2 py-1 rounded-lg hover:bg-rose-50 dark:hover:bg-rose-950">
                                        <input type="radio" name="overrides[{{ $perm->id }}]" value="deny" {{ $state === 'deny' ? 'checked' : '' }} class="sr-only peer">
                                        <span class="peer-checked:text-rose-600 dark:peer-checked:text-rose-400 peer-checked:font-bold text-slate-400">Deny</span>
                                    </label>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>

        <div class="flex justify-end space-x-3 rtl:space-x-reverse">
            <a href="{{ route('app.users.index') }}" class="px-5 py-2.5 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-200 font-bold text-xs rounded-xl">Cancel</a>
            <button type="submit" class="px-6 py-2.5 bg-sky-600 hover:bg-sky-700 text-white font-bold text-xs rounded-xl shadow-lg shadow-sky-600/25">
                Save User Overrides
            </button>
        </div>
    </form>
</div>
@endsection