@extends('layouts.app')

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

@section('content')
<div class="space-y-3 sm:space-y-4 md:space-y-6 animate-fade-in">
    
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-3">
        <div class="flex-1 min-w-0">
            <h1 class="text-xl sm:text-2xl md:text-3xl font-bold text-gray-900 dark:text-white">Kelola Admin</h1>
            <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 mt-0.5 sm:mt-1">Manajemen data admin dan superadmin</p>
        </div>
        <button onclick="openModal('add')" 
                class="inline-flex items-center justify-center px-3 py-2 sm:px-4 sm:py-2.5 md:px-5 md:py-3 text-xs sm:text-sm md:text-base bg-gradient-to-r from-primary-600 to-primary-700 hover:from-primary-700 hover:to-primary-800 text-white font-medium rounded-lg sm:rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 transform hover:-translate-y-0.5 whitespace-nowrap flex-shrink-0">
            <i data-lucide="plus" class="w-3.5 h-3.5 sm:w-4 sm:h-4 md:w-5 md:h-5 mr-1.5 sm:mr-2 flex-shrink-0"></i>
            <span>Tambah Admin</span>
        </button>
    </div>

    <!-- Data Display -->
    <div class="bg-white dark:bg-gray-800 rounded-lg sm:rounded-xl md:rounded-2xl shadow-soft">
        <!-- Header -->
        <div class="px-3 sm:px-4 md:px-6 py-2.5 sm:py-3 md:py-4 border-b border-gray-200 dark:border-gray-700">
            <h2 class="text-sm sm:text-base md:text-lg font-semibold text-gray-900 dark:text-white flex items-center">
                <i data-lucide="users" class="w-3.5 h-3.5 sm:w-4 sm:h-4 md:w-5 md:h-5 mr-1.5 sm:mr-2 text-primary-600 dark:text-primary-400 flex-shrink-0"></i>
                <span>Daftar Admin & Superadmin</span>
            </h2>
        </div>

        <!-- Desktop Table -->
        <div class="hidden sm:block overflow-x-auto" style="-webkit-overflow-scrolling: touch;">
            <table class="w-full" style="min-width: 800px;">
                <thead class="bg-gray-50 dark:bg-gray-900/50">
                    <tr>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">No</th>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Username</th>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Nama</th>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Role</th>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Dibuat</th>
                        <th class="px-6 py-4 text-center text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                    @forelse($admins as $index => $admin)
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                            <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">{{ $index + 1 }}</td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-500 to-accent-500 flex items-center justify-center text-white font-semibold text-sm shadow-md">
                                        {{ strtoupper(substr($admin->username, 0, 1)) }}
                                    </div>
                                    <span class="font-medium text-sm text-gray-900 dark:text-white">{{ $admin->username }}</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 font-medium text-sm text-gray-900 dark:text-white">{{ $admin->name }}</td>
                            <td class="px-6 py-4">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold {{ $admin->role == 'superadmin' ? 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300' : 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300' }}">
                                    <span class="w-1.5 h-1.5 {{ $admin->role == 'superadmin' ? 'bg-purple-500' : 'bg-green-500' }} rounded-full mr-1.5"></span>
                                    {{ ucfirst($admin->role) }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">{{ $admin->created_at->format('d/m/Y') }}</td>
                            <td class="px-6 py-4">
                                <div class="flex items-center justify-center gap-2">
                                    <button onclick='openModal("edit", {{ json_encode($admin) }})' class="p-2 text-primary-600 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/20 rounded-lg transition-all" title="Edit">
                                        <i data-lucide="edit-2" class="w-4 h-4"></i>
                                    </button>
                                    @if($admin->id != auth()->id())
                                        <button onclick="deleteAdmin({{ $admin->id }})" class="p-2 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-all" title="Hapus">
                                            <i data-lucide="trash-2" class="w-4 h-4"></i>
                                        </button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-12 text-center">
                                <div class="flex flex-col items-center">
                                    <div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mb-4">
                                        <i data-lucide="inbox" class="w-8 h-8 text-gray-400"></i>
                                    </div>
                                    <p class="text-base text-gray-500 dark:text-gray-400 font-medium">Belum ada data admin</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Mobile Cards -->
        <div class="sm:hidden divide-y divide-gray-200 dark:divide-gray-700">
            @forelse($admins as $index => $admin)
                <div class="p-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                    <div class="flex items-start gap-3">
                        <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-primary-500 to-accent-500 flex items-center justify-center text-white font-bold text-sm shadow-md flex-shrink-0">
                            {{ strtoupper(substr($admin->username, 0, 1)) }}
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-start justify-between gap-2 mb-1">
                                <div class="flex-1 min-w-0">
                                    <h3 class="font-semibold text-sm text-gray-900 dark:text-white truncate">{{ $admin->name }}</h3>
                                    <p class="text-xs text-gray-500 dark:text-gray-400">{{ $admin->username }}</p>
                                </div>
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold {{ $admin->role == 'superadmin' ? 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300' : 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300' }} flex-shrink-0">
                                    <span class="w-1.5 h-1.5 {{ $admin->role == 'superadmin' ? 'bg-purple-500' : 'bg-green-500' }} rounded-full mr-1"></span>
                                    {{ ucfirst($admin->role) }}
                                </span>
                            </div>
                            <div class="flex items-center gap-2 mt-2 text-xs text-gray-500 dark:text-gray-400">
                                <i data-lucide="calendar" class="w-3 h-3"></i>
                                <span>{{ $admin->created_at->format('d/m/Y') }}</span>
                            </div>
                            <div class="flex gap-2 mt-3">
                                <button onclick='openModal("edit", {{ json_encode($admin) }})' class="flex-1 inline-flex items-center justify-center px-3 py-1.5 text-xs font-medium text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20 hover:bg-primary-100 dark:hover:bg-primary-900/30 rounded-lg transition-all">
                                    <i data-lucide="edit-2" class="w-3 h-3 mr-1"></i>
                                    Edit
                                </button>
                                @if($admin->id != auth()->id())
                                    <button onclick="deleteAdmin({{ $admin->id }})" class="flex-1 inline-flex items-center justify-center px-3 py-1.5 text-xs font-medium text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/30 rounded-lg transition-all">
                                        <i data-lucide="trash-2" class="w-3 h-3 mr-1"></i>
                                        Hapus
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="p-8 text-center">
                    <div class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i data-lucide="inbox" class="w-6 h-6 text-gray-400"></i>
                    </div>
                    <p class="text-sm text-gray-500 dark:text-gray-400 font-medium">Belum ada data admin</p>
                </div>
            @endforelse
        </div>
    </div>
</div>

<!-- Modal -->
<div id="adminModal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4" onclick="if (event.target === this) closeModal();">
    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-2xl max-w-md w-full max-h-[90vh] overflow-y-auto transform transition-all">
        <div class="sticky top-0 bg-white dark:bg-gray-800 z-10 flex items-center justify-between p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700">
            <h3 id="modalTitle" class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white">Tambah Admin</h3>
            <button onclick="closeModal()" class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors flex-shrink-0">
                <i data-lucide="x" class="w-5 h-5 text-gray-400"></i>
            </button>
        </div>
        
        <form id="adminForm" method="POST" class="p-4 sm:p-6 space-y-4">
            @csrf
            <input type="hidden" id="method" name="_method" value="POST">
            
            <div>
                <label class="block text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Username</label>
                <div class="relative">
                    <i data-lucide="user" class="absolute left-3 sm:left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 sm:w-5 sm:h-5 text-gray-400 pointer-events-none"></i>
                    <input type="text" name="username" id="username" required class="w-full pl-10 sm:pl-12 pr-3 sm:pr-4 py-2 sm:py-3 text-sm bg-gray-50 dark:bg-gray-700 border-0 rounded-lg sm:rounded-xl text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 transition-all">
                </div>
            </div>

            <div>
                <label class="block text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Nama Lengkap</label>
                <div class="relative">
                    <i data-lucide="user-check" class="absolute left-3 sm:left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 sm:w-5 sm:h-5 text-gray-400 pointer-events-none"></i>
                    <input type="text" name="name" id="name" required class="w-full pl-10 sm:pl-12 pr-3 sm:pr-4 py-2 sm:py-3 text-sm bg-gray-50 dark:bg-gray-700 border-0 rounded-lg sm:rounded-xl text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 transition-all">
                </div>
            </div>

            <div>
                <label class="block text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Role</label>
                <div class="relative">
                    <i data-lucide="shield" class="absolute left-3 sm:left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 sm:w-5 sm:h-5 text-gray-400 pointer-events-none"></i>
                    <select name="role" id="role" required class="w-full pl-10 sm:pl-12 pr-8 sm:pr-10 py-2 sm:py-3 text-sm bg-gray-50 dark:bg-gray-700 border-0 rounded-lg sm:rounded-xl text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 appearance-none cursor-pointer transition-all">
                        <option value="admin">Admin</option>
                        <option value="superadmin">Superadmin</option>
                    </select>
                    <i data-lucide="chevron-down" class="absolute right-3 sm:right-4 top-1/2 transform -translate-y-1/2 w-3 h-3 sm:w-4 sm:h-4 text-gray-400 pointer-events-none"></i>
                </div>
            </div>

            <div>
                <label class="block text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Email <span class="text-gray-400 text-xs">(Opsional)</span></label>
                <div class="relative">
                    <i data-lucide="mail" class="absolute left-3 sm:left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 sm:w-5 sm:h-5 text-gray-400 pointer-events-none"></i>
                    <input type="email" name="email" id="email" class="w-full pl-10 sm:pl-12 pr-3 sm:pr-4 py-2 sm:py-3 text-sm bg-gray-50 dark:bg-gray-700 border-0 rounded-lg sm:rounded-xl text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 transition-all">
                </div>
            </div>

            <div>
                <label class="block text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Password <span id="passwordLabel" class="text-red-500 text-xs">(Wajib)</span></label>
                <div class="relative">
                    <i data-lucide="lock" class="absolute left-3 sm:left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 sm:w-5 sm:h-5 text-gray-400 pointer-events-none"></i>
                    <input type="password" name="password" id="password" class="w-full pl-10 sm:pl-12 pr-3 sm:pr-4 py-2 sm:py-3 text-sm bg-gray-50 dark:bg-gray-700 border-0 rounded-lg sm:rounded-xl text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 transition-all">
                </div>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-2" id="passwordHint">Minimal 6 karakter</p>
            </div>

            <div class="flex flex-col-reverse sm:flex-row justify-end gap-2 sm:gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
                <button type="button" onclick="closeModal()" class="w-full sm:w-auto px-4 sm:px-6 py-2.5 sm:py-3 text-sm border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg sm:rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-all font-medium">Batal</button>
                <button type="submit" class="w-full sm:w-auto px-4 sm:px-6 py-2.5 sm:py-3 text-sm bg-gradient-to-r from-primary-600 to-primary-700 hover:from-primary-700 hover:to-primary-800 text-white rounded-lg sm:rounded-xl transition-all font-medium shadow-lg hover:shadow-xl">Simpan</button>
            </div>
        </form>
    </div>
</div>

<!-- Delete Form -->
<form id="deleteForm" method="POST" class="hidden">
    @csrf
    @method('DELETE')
</form>

@push('scripts')
<script>
lucide.createIcons();

function openModal(mode, data = null) {
    const modal = document.getElementById('adminModal');
    const form = document.getElementById('adminForm');
    const title = document.getElementById('modalTitle');
    const method = document.getElementById('method');
    const passwordInput = document.getElementById('password');
    const passwordLabel = document.getElementById('passwordLabel');
    const passwordHint = document.getElementById('passwordHint');
    
    if (mode === 'add') {
        title.textContent = 'Tambah Admin';
        form.action = '{{ route("admin-user.store") }}';
        method.value = 'POST';
        form.reset();
        passwordInput.required = true;
        passwordLabel.innerHTML = '<span class="text-red-500 text-xs">(Wajib)</span>';
        passwordHint.textContent = 'Minimal 6 karakter';
    } else {
        title.textContent = 'Edit Admin';
        form.action = `/admin-user/${data.id}`;
        method.value = 'PUT';
        document.getElementById('username').value = data.username;
        document.getElementById('name').value = data.name;
        document.getElementById('role').value = data.role;
        document.getElementById('email').value = data.email || '';
        passwordInput.value = '';
        passwordInput.required = false;
        passwordLabel.innerHTML = '<span class="text-gray-400 text-xs">(Opsional)</span>';
        passwordHint.textContent = 'Kosongkan jika tidak ingin mengubah password';
    }
    
    modal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
    setTimeout(() => lucide.createIcons(), 100);
}

function closeModal() {
    document.getElementById('adminModal').classList.add('hidden');
    document.body.style.overflow = '';
}

function deleteAdmin(id) {
    if (confirm('Yakin ingin menghapus admin ini?')) {
        const form = document.getElementById('deleteForm');
        form.action = `/admin-user/${id}`;
        form.submit();
    }
}

setTimeout(() => lucide.createIcons(), 100);
</script>
@endpush
@endsection