@extends('layouts.main')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-8 px-4">
    <div class="max-w-7xl mx-auto">
        <!-- Header -->
        <div class="mb-6">
            <div class="bg-gradient-to-r from-blue-600 to-blue-700 rounded-t-xl shadow-lg px-6 py-4">
                <h2 class="text-2xl font-bold text-white flex items-center">
                    <i class="fas fa-users-cog mr-3"></i>
                    Manajemen User
                </h2>
                <p class="text-white/80 mt-1">Kelola user dan role dalam sistem</p>
            </div>
        </div>

        <!-- Role Statistics -->
        <div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-6">
            <div class="bg-white rounded-lg shadow-md p-6 text-center">
                <h5 class="text-red-600 text-2xl font-bold mb-1">{{ number_format($roleStats['superadmin']) }}</h5>
                <small class="text-gray-600 font-medium">Superadmin</small>
            </div>
            <div class="bg-white rounded-lg shadow-md p-6 text-center">
                <h5 class="text-green-600 text-2xl font-bold mb-1">{{ number_format($roleStats['admin']) }}</h5>
                <small class="text-gray-600 font-medium">Admin</small>
            </div>
            <div class="bg-white rounded-lg shadow-md p-6 text-center">
                <h5 class="text-purple-600 text-2xl font-bold mb-1">{{ number_format($roleStats['creator']) }}</h5>
                <small class="text-gray-600 font-medium">Creator</small>
            </div>
            <div class="bg-white rounded-lg shadow-md p-6 text-center">
                <h5 class="text-blue-600 text-2xl font-bold mb-1">{{ number_format($roleStats['user']) }}</h5>
                <small class="text-gray-600 font-medium">User</small>
            </div>
            <div class="bg-white rounded-lg shadow-md p-6 text-center">
                <h5 class="text-yellow-600 text-2xl font-bold mb-1">{{ number_format($roleStats['guest']) }}</h5>
                <small class="text-gray-600 font-medium">Guest</small>
            </div>
        </div>

        <!-- Filter and Search -->
        <div class="bg-white rounded-xl shadow-md mb-6 p-6">
            <form method="GET" action="{{ route('user-management.index') }}" class="flex flex-col md:flex-row gap-4" id="filterForm">
                <div class="flex-1">
                    <label for="role" class="block text-sm font-medium text-gray-700 mb-2">Filter by 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-blue-500 focus:border-blue-500">
                        <option value="">Semua Role</option>
                        @foreach($availableRoles as $role)
                            <option value="{{ $role }}" {{ request('role') == $role ? 'selected' : '' }}>
                                {{ ucfirst($role) }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="flex-1">
                    <label for="search" class="block text-sm font-medium text-gray-700 mb-2">Cari User</label>
                    <input type="text" name="search" id="search" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                           placeholder="Cari berdasarkan nama atau email..." value="{{ request('search') }}">
                </div>
                <div class="flex items-end">
                    <button type="submit" class="w-full md:w-auto px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-all duration-200 shadow-md hover:shadow-lg">
                        <i class="fas fa-search mr-2"></i>Cari
                    </button>
                </div>
            </form>
        </div>

        <!-- Users Table -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-gray-50 to-gray-100 px-6 py-4 border-b border-gray-200">
                <h5 class="text-lg font-semibold text-gray-900 flex items-center">
                    <i class="fas fa-list mr-2"></i>
                    Daftar User ({{ $users->total() }} total)
                </h5>
            </div>
            <div class="overflow-x-auto">
                @if($users->count() > 0)
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">No</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Nama</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Email</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Role</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Bergabung</th>
                                <th class="px-6 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider">Aksi</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200" id="usersTableBody">
                            @foreach($users as $index => $user)
                                <tr class="user-row hover:bg-blue-50 transition-colors duration-150">
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                        {{ $users->firstItem() + $index }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            @php
                                                $profileImagePath = asset('assets/images/profilefoto/default-profile.png');
                                                if ($user->profile && $user->profile->foto) {
                                                    $photoPath = public_path('assets/images/profilefoto/' . $user->profile->foto);
                                                    if (file_exists($photoPath)) {
                                                        $profileImagePath = asset('assets/images/profilefoto/' . $user->profile->foto);
                                                    }
                                                }
                                            @endphp
                                            <img src="{{ $profileImagePath }}" alt="Profile" class="h-10 w-10 rounded-full object-cover mr-3">
                                            <div>
                                                <div class="text-sm font-semibold text-gray-900">{{ $user->name }}</div>
                                                @if($user->id === auth()->id())
                                                    <span class="text-xs text-blue-600 font-medium">Anda</span>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                                        {{ $user->email }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        @php
                                            $auth = auth()->user();
                                            $canEditAsAdmin = ($auth && ($auth->isAdmin() ?? ($auth->role === 'admin'))) && !in_array(strtolower($user->role ?? ''), ['admin','superadmin']) && $user->id !== $auth->id;
                                            $adminEditableRoles = array_filter($availableRoles, function($r){ return !in_array($r, ['admin','superadmin']); });
                                            $showSelect = false;
                                            $rolesForSelect = $availableRoles;
                                            if ($auth && $auth->isSuperAdmin()) { $showSelect = ($user->id !== $auth->id); $rolesForSelect = $availableRoles; }
                                            elseif ($canEditAsAdmin) { $showSelect = true; $rolesForSelect = $adminEditableRoles; }
                                        @endphp
                                        @if($showSelect)
                                                <select class="role-select inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold cursor-pointer border-0 focus:ring-2 focus:ring-blue-500 transition-all duration-200
                                                    @if($user->role === 'superadmin') bg-red-100 text-red-800
                                                    @elseif($user->role === 'admin') bg-green-100 text-green-800
                                                    @elseif($user->role === 'creator') bg-purple-100 text-purple-800
                                                    @elseif($user->role === 'user') bg-blue-100 text-blue-800
                                                    @else bg-yellow-100 text-yellow-800
                                                    @endif" 
                                                    data-user-id="{{ $user->id }}" 
                                                    data-user-name="{{ addslashes($user->name) }}"
                                                    data-original-role="{{ $user->role }}"
                                                    onchange="updateUserRole(this)">
                                                    @foreach($rolesForSelect as $role)
                                                        <option value="{{ $role }}" {{ $user->role === $role ? 'selected' : '' }}>
                                                            {{ ucfirst($role) }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                        @else
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold
                                                    @if($user->role === 'superadmin') bg-red-100 text-red-800
                                                    @elseif($user->role === 'admin') bg-green-100 text-green-800
                                                    @elseif($user->role === 'creator') bg-purple-100 text-purple-800
                                                    @elseif($user->role === 'user') bg-blue-100 text-blue-800
                                                    @else bg-yellow-100 text-yellow-800
                                                    @endif">
                                                    {{ ucfirst($user->role) }}
                                                </span>
                                        @endif
                                    </td>
                                    
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                                        {{ $user->created_at->format('d M Y') }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-center">
                                        <a href="{{ route('profile.show', $user->id) }}" 
                                           class="inline-flex items-center px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-lg transition-all duration-200 shadow-sm hover:shadow-md">
                                            <i class="fas fa-eye mr-1.5"></i>
                                            Lihat Profil
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div class="bg-gray-50 px-6 py-4 border-t border-gray-200">
                        <div class="flex items-center justify-between">
                            <div class="text-sm text-gray-600">
                                Menampilkan <span class="font-semibold text-gray-900">{{ $users->firstItem() }}</span> sampai 
                                <span class="font-semibold text-gray-900">{{ $users->lastItem() }}</span> dari 
                                <span class="font-semibold text-gray-900">{{ $users->total() }}</span> data
                            </div>
                            <div>
                                {{ $users->links() }}
                            </div>
                        </div>
                    </div>
                @else
                    <div class="px-6 py-12 text-center">
                        <div class="flex flex-col items-center">
                            <div class="bg-gray-100 rounded-full p-6 mb-4">
                                <i class="fas fa-users text-4xl text-gray-400"></i>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-900 mb-2">Tidak ada user</h3>
                            <p class="text-gray-600">Tidak ada user yang ditemukan dengan filter yang dipilih</p>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
    .role-select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.5rem center;
        background-repeat: no-repeat;
        background-size: 1.5em 1.5em;
        padding-right: 2.5rem;
    }
    
    .role-select:hover {
        opacity: 0.8;
    }
    
    .role-select:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
    }

</style>
@endpush

@push('scripts')
<script src="{{ asset('js/user-management.js') }}"></script>
@endpush

@endsection