@extends('layouts.admin')

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

@section('content')
<div x-data="{ isModalOpen: {{ $errors->any() ? 'true' : 'false' }} }" x-cloak>
    <x-page-header title="Manajemen Akun Admin">
        <x-slot name="actions">
            <button @click="isModalOpen = true" class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-5 py-2.5 rounded-lg border border-transparent shadow-[0_4px_10px_rgba(37,99,235,0.2)] hover:shadow-[0_6px_15px_rgba(37,99,235,0.3)] transition-all font-semibold flex items-center gap-2 transform hover:translate-y-[-1px]">
                <i class="fas fa-plus mr-1"></i> Tambah Admin
            </button>
        </x-slot>
    </x-page-header>

    <x-alert type="success" :message="session('success')" />
    <x-alert type="error" :message="session('error')" />


    <x-card>
        <x-table>
            <x-slot name="head">
                <x-th>Nama Admin</x-th>
                <x-th>Email</x-th>
                <x-th>Tanggal Terdaftar</x-th>
                <x-th class="text-right">Aksi</x-th>
            </x-slot>

            @foreach($admins as $admin)
            <tr class="hover:bg-gray-50 transition-colors">
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full overflow-hidden border border-gray-200 mr-3">
                            <img src="https://ui-avatars.com/api/?name={{ urlencode($admin->name) }}&background=6366f1&color=fff" class="w-full h-full object-cover">
                        </div>
                        <div class="text-sm font-bold text-gray-900">{{ $admin->name }}</div>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    {{ $admin->email }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    {{ $admin->created_at->format('d M Y') }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                    @if(auth()->id() !== $admin->id)
                        <form action="{{ route('admin.akun.destroy', $admin->id) }}" method="POST" class="inline-block" onsubmit="return confirm('Apakah Anda yakin ingin menghapus akun admin ini?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="bg-red-100 text-red-700 hover:bg-red-200 px-3 py-1.5 rounded text-xs font-bold transition flex items-center">
                                <i class="fas fa-trash-alt mr-1"></i> Hapus
                            </button>
                        </form>
                    @else
                        <span class="text-xs font-bold text-gray-400 bg-gray-100 px-3 py-1.5 rounded">Akun Anda</span>
                    @endif
                </td>
            </tr>
            @endforeach
        </x-table>
    </x-card>

    <!-- Modal Tambah Admin -->
    <div x-show="isModalOpen" style="display: none;" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <div x-show="isModalOpen" x-transition.opacity class="fixed inset-0 transition-opacity bg-gray-900/60 backdrop-blur-sm" aria-hidden="true" @click="isModalOpen = false"></div>

            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

            <div x-show="isModalOpen" 
                 x-transition:enter="ease-out duration-300 transform" 
                 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 
                 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" 
                 x-transition:leave="ease-in duration-200 transform" 
                 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" 
                 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 
                 class="relative z-[60] inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all bg-white rounded-3xl shadow-2xl sm:my-8 sm:align-middle sm:max-w-xl sm:w-full sm:p-8 border border-gray-100">
                
                <div class="flex justify-between items-center mb-6 pl-2">
                    <div>
                        <h3 class="text-2xl font-bold text-gray-900" id="modal-title">Pendaftaran Admin Baru</h3>
                        <p class="text-sm text-gray-500 mt-1">Buat akun untuk pengelola perpustakaan yang baru.</p>
                    </div>
                    <button @click="isModalOpen = false" class="w-10 h-10 rounded-full bg-gray-50 hover:bg-red-50 text-gray-400 hover:text-red-500 flex items-center justify-center transition-colors">
                        <i class="fas fa-times text-lg"></i>
                    </button>
                </div>

                @if ($errors->any())
                    <div class="bg-red-50 border-l-4 border-red-500 text-red-700 p-4 mb-6 rounded-r-xl text-sm shadow-sm">
                        <p class="font-bold mb-1"><i class="fas fa-exclamation-circle mr-1"></i> Validasi Gagal</p>
                        <ul class="list-disc ml-5 space-y-1">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form action="{{ route('admin.akun.store') }}" method="POST" class="space-y-5">
                    @csrf
                    
                    <div>
                        <x-input-label for="name" value="Nama Lengkap" class="mb-1" />
                        <x-text-input id="name" type="text" name="name" :value="old('name')" placeholder="Masukkan nama..." required />
                    </div>

                    <div>
                        <x-input-label for="email" value="Email" class="mb-1" />
                        <x-text-input id="email" type="email" name="email" :value="old('email')" placeholder="admin@domain.com" required />
                    </div>

                    <div>
                        <x-input-label for="password" value="Password" class="mb-1" />
                        <x-text-input id="password" type="password" name="password" placeholder="Minimal 8 karakter" required />
                    </div>

                    <div>
                        <x-input-label for="password_confirmation" value="Konfirmasi Password" class="mb-1" />
                        <x-text-input id="password_confirmation" type="password" name="password_confirmation" placeholder="Ulangi password" required />
                    </div>

                    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-100 mt-6">
                        <button type="button" @click="isModalOpen = false" class="px-5 py-2.5 text-gray-600 bg-gray-100 hover:bg-gray-200 hover:text-gray-900 rounded-xl font-semibold transition-colors">
                            Batal
                        </button>
                        <button type="submit" class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-6 py-2.5 rounded-xl font-bold shadow-lg shadow-blue-500/30 transition-all transform hover:scale-105 flex items-center gap-2">
                            <i class="fas fa-check-circle"></i> Daftarkan Admin
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection