@extends('admin.layouts.app')

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

@section('content')
<div class="container mx-auto px-4 py-8">
    <!-- Header -->
    <div class="mb-8">
        <a href="{{ route('admin.admins.index') }}" class="text-blue-600 hover:text-blue-900 mb-4">← Back to Admins</a>
        <div class="flex justify-between items-start">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">{{ $admin->name }}</h1>
                <p class="text-gray-600 mt-2">{{ $admin->email }}</p>
            </div>
            <div class="flex gap-2">
                <a href="{{ route('admin.admins.edit', $admin) }}" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                    Edit
                </a>
                <a href="{{ route('admin.admins.confirm-delete', $admin) }}" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">
                    Delete
                </a>
            </div>
        </div>
    </div>

    <!-- Messages -->
    @if($message = session('success'))
        <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded">
            {{ $message }}
        </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Main Info -->
        <div class="lg:col-span-2">
            <!-- Account Information -->
            <div class="bg-white rounded-lg shadow p-6 mb-6">
                <h2 class="text-xl font-bold text-gray-900 mb-6 pb-4 border-b">Account Information</h2>
                
                <div class="grid grid-cols-2 gap-6">
                    <div>
                        <p class="text-gray-600 text-sm">Full Name</p>
                        <p class="text-gray-900 font-medium">{{ $admin->name }}</p>
                    </div>
                    <div>
                        <p class="text-gray-600 text-sm">Email Address</p>
                        <p class="text-gray-900 font-medium">{{ $admin->email }}</p>
                    </div>
                    <div>
                        <p class="text-gray-600 text-sm">Phone Number</p>
                        <p class="text-gray-900 font-medium">{{ $admin->phone ?? 'Not provided' }}</p>
                    </div>
                    <div>
                        <p class="text-gray-600 text-sm">Status</p>
                        <p class="mt-1">
                            <span class="px-3 py-1 rounded-full text-sm font-medium
                                @if($admin->status === 'active')
                                    bg-green-100 text-green-800
                                @elseif($admin->status === 'suspended')
                                    bg-red-100 text-red-800
                                @else
                                    bg-gray-100 text-gray-800
                                @endif
                            ">
                                {{ ucfirst($admin->status) }}
                            </span>
                        </p>
                    </div>
                </div>

                <!-- Status Toggle -->
                <div class="mt-6 pt-6 border-t">
                    <form action="{{ route('admin.admins.toggle-status', $admin) }}" method="POST" class="inline">
                        @csrf
                        @method('PATCH')
                        <button type="submit" class="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 text-sm">
                            {{ $admin->status === 'active' ? 'Suspend Account' : 'Activate Account' }}
                        </button>
                    </form>
                </div>
            </div>

            <!-- Role & Permissions -->
            <div class="bg-white rounded-lg shadow p-6">
                <h2 class="text-xl font-bold text-gray-900 mb-6 pb-4 border-b">Role & Permissions</h2>
                
                <div class="mb-6">
                    <p class="text-gray-600 text-sm">Admin Role</p>
                    <p class="mt-2">
                        <span class="px-3 py-1 rounded-full text-sm font-medium
                            @if($admin->role === 'super_admin')
                                bg-red-100 text-red-800
                            @elseif($admin->role === 'operations_admin')
                                bg-blue-100 text-blue-800
                            @elseif($admin->role === 'finance_admin')
                                bg-green-100 text-green-800
                            @elseif($admin->role === 'employer_manager')
                                bg-purple-100 text-purple-800
                            @elseif($admin->role === 'moderator')
                                bg-yellow-100 text-yellow-800
                            @endif
                        ">
                            {{ $roleConfig['name'] ?? ucfirst(str_replace('_', ' ', $admin->role)) }}
                        </span>
                    </p>
                    <p class="text-gray-600 text-sm mt-2">{{ $roleConfig['description'] ?? 'Role description not available' }}</p>
                </div>

                <div class="border-t pt-6">
                    <p class="text-gray-900 font-medium mb-4">Accessible Modules ({{ count($admin->getAccessibleModules()) }})</p>
                    <div class="grid grid-cols-2 gap-3">
                        @foreach($admin->getAccessibleModules() as $module)
                            <div class="flex items-center">
                                <svg class="h-5 w-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                </svg>
                                <span class="text-sm text-gray-700">{{ ucfirst(str_replace('_', ' ', $module)) }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="border-t pt-6 mt-6">
                    <p class="text-gray-900 font-medium mb-4">Permissions ({{ count($permissions) }} total)</p>
                    <div class="bg-gray-50 rounded p-4 max-h-64 overflow-y-auto">
                        <div class="grid grid-cols-2 gap-2">
                            @foreach(array_keys($permissions) as $permission)
                                <div class="text-sm text-gray-700">
                                    <span class="inline-block w-2 h-2 bg-green-500 rounded-full mr-2"></span>
                                    {{ str_replace('_', ' ', $permission) }}
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div>
            <!-- Login Activity -->
            <div class="bg-white rounded-lg shadow p-6 mb-6">
                <h3 class="text-lg font-bold text-gray-900 mb-4">Login Activity</h3>
                <div class="space-y-3">
                    <div>
                        <p class="text-gray-600 text-sm">Last Login</p>
                        <p class="text-gray-900 font-medium">
                            {{ $admin->last_login_at ? $admin->last_login_at->format('M d, Y H:i') : 'Never' }}
                        </p>
                    </div>
                    <div>
                        <p class="text-gray-600 text-sm">Last IP Address</p>
                        <p class="text-gray-900 font-medium text-xs break-all">
                            {{ $admin->last_login_ip ?? 'Not available' }}
                        </p>
                    </div>
                </div>
            </div>

            <!-- Account Dates -->
            <div class="bg-white rounded-lg shadow p-6">
                <h3 class="text-lg font-bold text-gray-900 mb-4">Account Dates</h3>
                <div class="space-y-3">
                    <div>
                        <p class="text-gray-600 text-sm">Created</p>
                        <p class="text-gray-900 font-medium">{{ $admin->created_at->format('M d, Y H:i') }}</p>
                    </div>
                    <div>
                        <p class="text-gray-600 text-sm">Last Updated</p>
                        <p class="text-gray-900 font-medium">{{ $admin->updated_at->format('M d, Y H:i') }}</p>
                    </div>
                    @if($admin->deleted_at)
                        <div>
                            <p class="text-gray-600 text-sm">Deleted</p>
                            <p class="text-gray-900 font-medium">{{ $admin->deleted_at->format('M d, Y H:i') }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection