@extends('admin.layouts.app')

@section('title', 'Gestion des Agences')
@section('header', 'Agences')

@section('content')
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
        <div>
            <h2 class="text-lg font-medium text-slate-700 dark:text-slate-200">Liste des Agences</h2>
            <p class="text-sm text-slate-500 dark:text-slate-400">Gérez les tenants, leurs domaines et leurs accès.</p>
        </div>
        <a href="{{ route('admin.tenants.create') }}" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-5 rounded-lg shadow-lg shadow-blue-500/30 transition-all flex items-center group">
            <i class="fas fa-plus mr-2 group-hover:rotate-90 transition-transform"></i> Nouvelle Agence
        </a>
    </div>

    <div class="glass rounded-xl shadow-lg border border-white/20 overflow-visible">
        <div class="overflow-x-auto md:overflow-visible">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-slate-50/50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10">
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 text-left">ID / Référence</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 text-left">Domaine(s)</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 text-center">Statut</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 text-left">Création</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 dark:divide-white/5">
                    @foreach($tenants as $tenant)
                        <tr class="hover:bg-slate-50/50 dark:hover:bg-white/5 transition-colors group">
                            <td class="py-4 px-6">
                                <div class="flex items-center">
                                    <div class="h-9 w-9 rounded-lg bg-blue-500/10 text-blue-600 dark:text-blue-400 flex items-center justify-center font-bold text-xs uppercase mr-3">
                                        {{ substr($tenant->id, 0, 2) }}
                                    </div>
                                    <span class="font-medium text-slate-900 dark:text-white">{{ $tenant->id }}</span>
                                </div>
                            </td>
                            <td class="py-4 px-6">
                                @foreach($tenant->domains as $domain)
                                    <a href="http://{{ $domain->domain }}:8000" target="_blank" class="text-sm text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 hover:underline block mb-1 last:mb-0">
                                        {{ $domain->domain }} <i class="fas fa-external-link-alt text-xs ml-1 opacity-0 group-hover:opacity-100 transition-opacity"></i>
                                    </a>
                                @endforeach
                            </td>
                            <td class="py-4 px-6 text-center">
                                @if($tenant->is_active)
                                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-emerald-100 dark:bg-emerald-500/20 text-emerald-800 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-500/30">
                                        <div class="w-1.5 h-1.5 bg-emerald-500 rounded-full mr-1.5"></div> Actif
                                    </span>
                                @else
                                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-red-100 dark:bg-red-500/20 text-red-800 dark:text-red-400 border border-red-200 dark:border-red-500/30">
                                        <div class="w-1.5 h-1.5 bg-red-500 rounded-full mr-1.5"></div> Inactif
                                    </span>
                                @endif
                            </td>
                            <td class="py-4 px-6 text-sm text-slate-500 dark:text-slate-400">
                                {{ $tenant->created_at->format('d/m/Y') }}
                            </td>
                            <td class="py-4 px-6 text-right">
                                <div class="relative flex justify-end">
                                    <details class="group relative">
                                        <summary class="list-none cursor-pointer bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-600 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400 hover:border-indigo-200 dark:hover:border-indigo-500/30 px-4 py-2 rounded-lg text-xs font-bold uppercase tracking-wider transition-all flex items-center gap-2">
                                            Options <i class="fas fa-chevron-down text-[10px] opacity-70 group-open:rotate-180 transition-transform"></i>
                                        </summary>
                                        
                                        <!-- Backdrop (optional, for closing on click outside if using JS, but with details we can rely on focus or just click to close) -->
                                        <!-- Dropdown Menu -->
                                        <div class="absolute right-0 mt-2 w-56 bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-100 dark:border-slate-700/50 overflow-hidden z-50 transform origin-top-right transition-all group-open:scale-100 group-open:opacity-100 opacity-0 scale-95 pointer-events-none group-open:pointer-events-auto">
                                            
                                            <div class="p-1">
                                                <a href="{{ route('admin.impersonate', $tenant->id) }}" target="_blank" class="flex items-center w-full px-4 py-2.5 text-sm text-slate-600 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-500/10 hover:text-indigo-600 dark:hover:text-indigo-400 rounded-lg transition-colors group/item">
                                                    <div class="w-8 h-8 rounded-lg bg-indigo-50 dark:bg-indigo-500/10 text-indigo-500 flex items-center justify-center mr-3 group-hover/item:bg-indigo-100 dark:group-hover/item:bg-indigo-500/20 transition-colors">
                                                        <i class="fas fa-sign-in-alt"></i>
                                                    </div>
                                                    <div>
                                                        <div class="font-medium">Connecter</div>
                                                        <div class="text-[10px] text-slate-400">Voir comme admin</div>
                                                    </div>
                                                </a>

                                                <a href="{{ route('admin.tenants.users.index', $tenant->id) }}" class="flex items-center w-full px-4 py-2.5 text-sm text-slate-600 dark:text-slate-300 hover:bg-purple-50 dark:hover:bg-purple-500/10 hover:text-purple-600 dark:hover:text-purple-400 rounded-lg transition-colors group/item">
                                                    <div class="w-8 h-8 rounded-lg bg-purple-50 dark:bg-purple-500/10 text-purple-500 flex items-center justify-center mr-3 group-hover/item:bg-purple-100 dark:group-hover/item:bg-purple-500/20 transition-colors">
                                                        <i class="fas fa-users-cog"></i>
                                                    </div>
                                                    Utillisateurs
                                                </a>

                                                <a href="{{ route('admin.tenants.features.edit', $tenant->id) }}" class="flex items-center w-full px-4 py-2.5 text-sm text-slate-600 dark:text-slate-300 hover:bg-amber-50 dark:hover:bg-amber-500/10 hover:text-amber-600 dark:hover:text-amber-400 rounded-lg transition-colors group/item">
                                                    <div class="w-8 h-8 rounded-lg bg-amber-50 dark:bg-amber-500/10 text-amber-500 flex items-center justify-center mr-3 group-hover/item:bg-amber-100 dark:group-hover/item:bg-amber-500/20 transition-colors">
                                                        <i class="fas fa-cogs"></i>
                                                    </div>
                                                    Fonctionnalités
                                                </a>

                                                <a href="{{ route('admin.tenants.access-links.index', $tenant->id) }}" class="flex items-center w-full px-4 py-2.5 text-sm text-slate-600 dark:text-slate-300 hover:bg-cyan-50 dark:hover:bg-cyan-500/10 hover:text-cyan-600 dark:hover:text-cyan-400 rounded-lg transition-colors group/item">
                                                    <div class="w-8 h-8 rounded-lg bg-cyan-50 dark:bg-cyan-500/10 text-cyan-500 flex items-center justify-center mr-3 group-hover/item:bg-cyan-100 dark:group-hover/item:bg-cyan-500/20 transition-colors">
                                                        <i class="fas fa-link"></i>
                                                    </div>
                                                    Liens d'accès
                                                </a>

                                                <a href="{{ route('admin.tenants.edit', $tenant->id) }}" class="flex items-center w-full px-4 py-2.5 text-sm text-slate-600 dark:text-slate-300 hover:bg-blue-50 dark:hover:bg-blue-500/10 hover:text-blue-600 dark:hover:text-blue-400 rounded-lg transition-colors group/item">
                                                    <div class="w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-500/10 text-blue-500 flex items-center justify-center mr-3 group-hover/item:bg-blue-100 dark:group-hover/item:bg-blue-500/20 transition-colors">
                                                        <i class="fas fa-edit"></i>
                                                    </div>
                                                    Modifier
                                                </a>
                                                
                                                <div class="h-px bg-slate-100 dark:bg-slate-700/50 my-1"></div>

                                                <form action="{{ route('admin.tenants.destroy', $tenant->id) }}" method="POST" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cette agence ? Cette action est irréversible.');">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="flex items-center w-full px-4 py-2.5 text-sm text-slate-600 dark:text-slate-300 hover:bg-rose-50 dark:hover:bg-rose-500/10 hover:text-rose-600 dark:hover:text-rose-400 rounded-lg transition-colors group/item">
                                                        <div class="w-8 h-8 rounded-lg bg-rose-50 dark:bg-rose-500/10 text-rose-500 flex items-center justify-center mr-3 group-hover/item:bg-rose-100 dark:group-hover/item:bg-rose-500/20 transition-colors">
                                                            <i class="fas fa-trash-alt"></i>
                                                        </div>
                                                        Supprimer
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </details>
                                    
                                    <!-- Close details when clicking outside (simple hack: transparent backdrop) -->
                                    <div class="fixed inset-0 z-40 hidden group-open:block" onclick="this.previousElementSibling.removeAttribute('open')"></div>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @if($tenants->isEmpty())
            <div class="text-center py-16">
                <div class="rounded-full bg-slate-50 dark:bg-white/5 h-20 w-20 flex items-center justify-center mx-auto mb-4 text-slate-300 dark:text-slate-600">
                    <i class="fas fa-folder-open text-3xl"></i>
                </div>
                <h3 class="text-slate-800 dark:text-white font-medium mb-1 text-lg">Aucune agence trouvée</h3>
                <p class="text-slate-500 dark:text-slate-400 text-sm">Commencez par créer votre première agence.</p>
            </div>
        @endif
        <div class="px-6 py-4 border-t border-slate-100 dark:border-white/10 bg-slate-50/50 dark:bg-white/5">
            {{ $tenants->links() }}
        </div>
    </div>
@endsection