@extends('layout')

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

@section('content')
<div class="p-2">
    {{-- Header --}}
    <div class="flex flex-col mb-8 text-center md:flex-row md:items-center md:justify-between md:text-left">
        <div>
            <h1 class="mb-2 text-2xl font-bold text-gray-900 md:text-3xl">Kelola Akun Admin</h1>
            <p class="text-sm text-gray-600 md:text-base">Superadmin dapat menambah, mengedit, atau menghapus akun admin</p>
        </div>
        <a href="{{ route('admin_users.create') }}"
           class="inline-flex items-center justify-center px-4 py-2 mt-4 text-sm font-medium text-white transition-colors bg-blue-600 rounded-lg md:px-6 md:py-3 md:mt-0 hover:bg-blue-700">
            <i class="mr-2 fas fa-plus-circle"></i> Tambah
        </a>
    </div>

    {{-- Flash success --}}
    @if(session('success'))
        <div class="flex items-center p-4 mb-6 text-green-800 bg-green-100 border-l-4 border-green-500 rounded-lg">
            <i class="mr-3 text-green-500 fas fa-check-circle"></i>
            <span class="text-sm font-medium md:text-base">{{ session('success') }}</span>
        </div>
    @endif

    {{-- Desktop Table --}}
    <div class="hidden overflow-x-auto bg-white border border-gray-200 rounded-lg shadow-sm md:block">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Nama</th>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Email</th>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Tanggal Dibuat</th>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-right text-gray-500 uppercase">Aksi</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @forelse($admins as $a)
                <tr class="transition-colors duration-150 hover:bg-gray-50">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <span class="text-sm font-medium text-gray-900">{{ $a->name }}</span>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="text-sm text-gray-700">{{ $a->email }}</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="text-sm text-gray-500">{{ $a->created_at->format('d M Y') }}</span>
                    </td>
                    <td class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
                        <div class="flex justify-end space-x-2">
                            <a href="{{ route('admin_users.edit', $a->id) }}"
                               class="inline-flex items-center px-3 py-1 text-sm font-medium text-blue-700 rounded-lg bg-blue-50 hover:bg-blue-100">
                                Edit
                            </a>
                            <form action="{{ route('admin_users.destroy', $a->id) }}"
                                method="POST"
                                class="js-delete-form"
                                data-confirm="Hapus akun admin ini?">
                                @csrf
                                @method('DELETE')

                                <button type="submit"
                                    class="inline-flex items-center px-3 py-1 text-sm font-medium text-red-700 rounded-lg bg-red-50 hover:bg-red-100">
                                    Hapus
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="4" class="px-6 py-12 text-center text-gray-500">
                        <i class="mx-auto mb-3 text-4xl text-gray-300 fas fa-user-slash"></i>
                        <p class="text-lg font-medium">Belum ada akun admin</p>
                        <p class="mt-1 text-sm">Tambah admin baru sekarang</p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="space-y-4 md:hidden">
        @forelse($admins as $a)
        <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm">
            <div class="flex items-start mb-3">
                <div class="flex items-center justify-center w-10 h-10 mr-3 text-sm font-medium text-gray-700 bg-gray-100 rounded-full">
                    {{ strtoupper(substr($a->name, 0, 1)) }}
                </div>
                <div class="flex-1">
                    <h3 class="text-base font-semibold text-gray-900">{{ $a->name }}</h3>
                    <p class="text-sm text-gray-600">{{ $a->email }}</p>
                    <p class="mt-1 text-xs text-gray-500">
                        <i class="mr-1 fas fa-calendar"></i>Dibuat: {{ $a->created_at->format('d M Y') }}
                    </p>
                </div>
            </div>
            <div class="flex gap-2 pt-3 border-t border-gray-100">
                <a href="{{ route('admin_users.edit', $a->id) }}"
                   class="inline-flex items-center justify-center flex-1 px-3 py-2 text-sm font-medium text-center text-blue-700 rounded-lg bg-blue-50 hover:bg-blue-100">
                    Edit
                </a>
                <form action="{{ route('admin_users.destroy', $a->id) }}" method="POST" class="flex-1 js-delete-form" data-confirm="Hapus akun admin ini?">
                    @csrf @method('DELETE')
                    <button type="submit" 
                            class="inline-flex items-center justify-center w-full px-3 py-2 text-sm font-medium text-center text-red-700 rounded-lg bg-red-50 hover:bg-red-100">
                        Hapus
                    </button>
                </form>
            </div>
        </div>
        @empty
        <div class="py-12 text-center text-gray-600">
            <i class="w-12 h-12 mx-auto mb-3 text-gray-400 fas fa-user-slash"></i>
            <h3 class="text-base font-medium">Belum ada akun admin</h3>
            <p class="text-sm">Tambahkan admin pertama Anda</p>
        </div>
        @endforelse
    </div>

    {{-- Pagination --}}
    <div class="mt-6">
        @include('partials.pagination', ['data' => $admins])
    </div>
</div>
@endsection