@extends('admin.layouts.app')

@section('title', 'Edit Admin: ' . $admin->name)

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Header -->
    <div class="mb-8">
        <a href="{{ route('admin.access.index') }}" class="text-sm text-indigo-600 hover:text-indigo-700 mb-4 inline-block">
            ← Back to Access Control
        </a>
        <h1 class="text-3xl font-bold text-gray-900">Edit Admin: {{ $admin->name }}</h1>
        <p class="mt-2 text-sm text-gray-600">{{ $admin->email }}</p>
    </div>

    @if(session('success'))
    <div class="mb-6 bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg">
        {{ session('success') }}
    </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Left Column: Admin Info -->
        <div class="lg:col-span-1">
            <div class="bg-white rounded-lg shadow-sm p-6">
                <h2 class="text-lg font-bold text-gray-900 mb-4">Admin Information</h2>
                
                <div class="space-y-4">
                    <div>
                        <label class="text-sm font-semibold text-gray-700">Name</label>
                        <p class="mt-1 text-sm text-gray-600">{{ $admin->name }}</p>
                    </div>

                    <div>
                        <label class="text-sm font-semibold text-gray-700">Email</label>
                        <p class="mt-1 text-sm text-gray-600">{{ $admin->email }}</p>
                    </div>

                    <div>
                        <label class="text-sm font-semibold text-gray-700">Phone</label>
                        <p class="mt-1 text-sm text-gray-600">{{ $admin->phone ?? 'Not provided' }}</p>
                    </div>

                    <div class="pt-4 border-t border-gray-200">
                        <label class="text-sm font-semibold text-gray-700">2FA Status</label>
                        <div class="mt-2 flex items-center gap-2">
                            @if($admin->two_factor_enabled)
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-green-100 text-green-800">
                                ✓ Enabled
                            </span>
                            @else
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-gray-100 text-gray-800">
                                Disabled
                            </span>
                            @endif
                        </div>
                    </div>

                    <div>
                        <label class="text-sm font-semibold text-gray-700">Created</label>
                        <p class="mt-1 text-sm text-gray-600">{{ $admin->created_at->format('M d, Y H:i') }}</p>
                    </div>

                    <div>
                        <label class="text-sm font-semibold text-gray-700">Last Login</label>
                        <p class="mt-1 text-sm text-gray-600">
                            @if($admin->last_login_at)
                                {{ $admin->last_login_at->format('M d, Y H:i') }}
                            @else
                                <span class="text-gray-400">Never</span>
                            @endif
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Column: Permissions -->
        <div class="lg:col-span-2">
            <form method="POST" action="{{ route('admin.access.update-admin', $admin) }}" class="space-y-6">
                @csrf
                @method('PATCH')

                <div class="bg-white rounded-lg shadow-sm p-6">
                    <h2 class="text-lg font-bold text-gray-900 mb-6">Update Permissions</h2>

                    <!-- Role Selection -->
                    <div class="mb-8">
                        <label for="role" class="block text-sm font-semibold text-gray-700 mb-2">Admin Role</label>
                        <select name="role" id="role" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                            @foreach($roles as $roleKey => $roleData)
                            <option value="{{ $roleKey }}" @if($admin->role === $roleKey) selected @endif>
                                {{ $roleData['name'] }} @if($admin->role === $roleKey) (current) @endif
                            </option>
                            @endforeach
                        </select>
                        @error('role')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Role Description -->
                    <div class="mb-8 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                        <p class="text-sm text-blue-800 font-semibold mb-2">Selected Role Details:</p>
                        <p id="roleDescription" class="text-sm text-blue-700">{{ $roles[$admin->role]['description'] ?? 'No description' }}</p>
                    </div>

                    <!-- Current Permissions -->
                    <div class="mb-8">
                        <h3 class="text-sm font-semibold text-gray-700 mb-3">Current Permissions</h3>
                        @if(count($currentPermissions) > 0)
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                            @foreach($currentPermissions as $permission => $roles)
                            <div class="flex items-center gap-2 p-2 bg-gray-50 rounded">
                                <span class="text-green-600">✓</span>
                                <span class="text-sm text-gray-700">{{ ucwords(str_replace('_', ' ', $permission)) }}</span>
                            </div>
                            @endforeach
                        </div>
                        @else
                        <p class="text-sm text-gray-500">No permissions for this role</p>
                        @endif
                    </div>

                    <!-- Status Selection -->
                    <div class="mb-8">
                        <label for="status" class="block text-sm font-semibold text-gray-700 mb-2">Account Status</label>
                        <select name="status" id="status" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                            <option value="active" @if($admin->status === 'active') selected @endif>Active</option>
                            <option value="inactive" @if($admin->status === 'inactive') selected @endif>Inactive</option>
                            <option value="suspended" @if($admin->status === 'suspended') selected @endif>Suspended</option>
                        </select>
                        @error('status')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="p-4 bg-yellow-50 border border-yellow-200 rounded-lg mb-6">
                        <p class="text-sm text-yellow-800">
                            <strong>Important:</strong> Changing an admin's role or status takes effect immediately and will be logged in the audit trail.
                        </p>
                    </div>
                </div>

                <div class="flex gap-3">
                    <button type="submit" class="px-6 py-2 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition">
                        Update Permissions
                    </button>
                    <a href="{{ route('admin.access.index') }}" class="px-6 py-2 bg-gray-200 text-gray-700 font-medium rounded-lg hover:bg-gray-300 transition">
                        Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    const roleData = @json($roles);
    AdminUtils.initRoleDescriptionUpdater('role', 'roleDescription', roleData);
</script>
@endsection