@extends('admin.layouts.app')

@section('title', 'Admin Users')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Header -->
    <div class="mb-8 flex justify-between items-center">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Admin Users</h1>
            <p class="mt-2 text-sm text-gray-600">Manage admin users and their roles</p>
        </div>
        <button onclick="showAddModal()" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg font-medium transition">
            Add Admin User
        </button>
    </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

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

    <!-- Stats -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        @include('admin.components.stat_card', ['label' => 'Total Admins', 'value' => $stats['total'], 'icon' => 'fa-solid fa-users', 'color' => 'slate'])
        @include('admin.components.stat_card', ['label' => 'Active', 'value' => $stats['active'], 'icon' => 'fa-solid fa-user-check', 'color' => 'emerald'])
        @include('admin.components.stat_card', ['label' => 'Suspended', 'value' => $stats['suspended'], 'icon' => 'fa-solid fa-user-slash', 'color' => 'red'])
        @include('admin.components.stat_card', ['label' => 'Super Admins', 'value' => $stats['super_admins'], 'icon' => 'fa-solid fa-user-shield', 'color' => 'indigo'])
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
        <form method="GET" class="flex flex-wrap gap-4">
            <div class="flex-1 min-w-[200px]">
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search by name or email..." class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
            </div>
            <div class="min-w-[150px]">
                <select name="role" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                    <option value="">All Roles</option>
                    @foreach($roles as $roleKey => $roleData)
                        <option value="{{ $roleKey }}" {{ request('role') === $roleKey ? 'selected' : '' }}>{{ $roleData['name'] }}</option>
                    @endforeach
                </select>
            </div>
            <div class="min-w-[150px]">
                <select name="status" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                    <option value="">All Status</option>
                    <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                    <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                    <option value="suspended" {{ request('status') === 'suspended' ? 'selected' : '' }}>Suspended</option>
                </select>
            </div>
            <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg font-medium transition">
                Apply
            </button>
            <a href="{{ route('admin.admins.index') }}" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-6 py-2 rounded-lg font-medium transition">
                Clear
            </a>
        </form>
    </div>

@php
    $headers = [
        ['label' => 'Admin', 'class' => ''],
        ['label' => 'Role', 'class' => 'w-44'],
        ['label' => 'Status', 'class' => 'w-28'],
        ['label' => 'Created', 'class' => 'w-36'],
        ['label' => 'Actions', 'class' => 'text-right w-36'],
    ];

    $rows = [];
    foreach($admins as $admin) {
        $cells = [];
        $cells[] = ['content' => '<div><div class="text-sm font-medium text-slate-900">' . e($admin->name) . '</div><div class="text-sm text-slate-500">' . e($admin->email) . '</div></div>', 'class' => ''];

        $roleClass = '';
        if($admin->role === 'super_admin') $roleClass = 'bg-purple-100 text-purple-800';
        if($admin->role === 'operations_admin') $roleClass = 'bg-blue-100 text-blue-800';
        if($admin->role === 'moderator') $roleClass = 'bg-green-100 text-green-800';
        if($admin->role === 'employer_manager') $roleClass = 'bg-yellow-100 text-yellow-800';
        if($admin->role === 'finance_admin') $roleClass = 'bg-indigo-100 text-indigo-800';

        $cells[] = ['content' => '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ' . $roleClass . '">' . e($roles[$admin->role]['name'] ?? $admin->role) . '</span>', 'class' => ''];

        $statusClass = $admin->status === 'active' ? 'bg-green-100 text-green-800' : ($admin->status === 'inactive' ? 'bg-gray-100 text-gray-800' : ($admin->status === 'suspended' ? 'bg-red-100 text-red-800' : ''));
        $cells[] = ['content' => '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ' . $statusClass . '">' . e(ucfirst($admin->status)) . '</span>', 'class' => ''];

        $cells[] = ['content' => '<div class="text-sm text-slate-500">' . e($admin->created_at->format('M d, Y')) . '</div>', 'class' => ''];

        $actionHtml = '<div class="flex justify-end space-x-2">';
        if($admin->id !== auth('admin')->id()) {
            $actionHtml .= '<form action="' . route('admin.admins.toggle-status', $admin) . '" method="POST" class="inline">' . csrf_field() . method_field('PATCH') . '<button type="submit" class="text-indigo-600 hover:text-indigo-900 font-medium">' . ($admin->status === 'active' ? 'Suspend' : 'Activate') . '</button></form>';
            $actionHtml .= '<form action="' . route('admin.admins.destroy', $admin) . '" method="POST" class="inline" onsubmit="return confirm(\'Are you sure you want to delete this admin user? This action cannot be undone.\')">' . csrf_field() . method_field('DELETE') . '<button type="submit" class="text-red-600 hover:text-red-900 font-medium">Delete</button></form>';
        } else {
            $actionHtml .= '<span class="text-gray-400 italic">Current User</span>';
        }
        $actionHtml .= '</div>';

        $cells[] = ['content' => $actionHtml, 'class' => 'text-right'];

        $rows[] = ['cells' => $cells];
    }
@endphp

@include('admin.components.table_shell', [
    'headers' => $headers,
    'rows' => $rows,
    'emptyMessage' => 'No admin users found.',
    'pagination' => $admins
])
</div>

<!-- Add Admin Modal -->
<div id="addModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-full max-w-lg shadow-lg rounded-lg bg-white">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-semibold text-gray-900">Add New Admin User</h3>
            <button onclick="hideAddModal()" class="text-gray-400 hover:text-gray-600">
                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
        
        <form action="{{ route('admin.admins.store') }}" method="POST" class="space-y-4">
            @csrf
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Name <span class="text-red-500">*</span></label>
                <input type="text" name="name" required class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Email <span class="text-red-500">*</span></label>
                <input type="email" name="email" required class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Password <span class="text-red-500">*</span></label>
                <input type="password" name="password" required minlength="8" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Confirm Password <span class="text-red-500">*</span></label>
                <input type="password" name="password_confirmation" required minlength="8" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Role <span class="text-red-500">*</span></label>
                <select name="role" required class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                    @foreach($roles as $roleKey => $roleData)
                        <option value="{{ $roleKey }}">{{ $roleData['name'] ?? ucfirst(str_replace('_', ' ', $roleKey)) }}</option>
                    @endforeach
                </select>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
                <select name="status" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                    <option value="active">Active</option>
                    <option value="inactive">Inactive</option>
                    <option value="suspended">Suspended</option>
                </select>
            </div>
            
            <div class="flex justify-end space-x-3 pt-4">
                <button type="button" onclick="hideAddModal()" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 font-medium transition">
                    Cancel
                </button>
                <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 font-medium transition">
                    Add Admin
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function showAddModal() {
    AdminUtils.showModal('addModal');
}

function hideAddModal() {
    AdminUtils.hideModal('addModal');
}
</script>
@endsection