@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-6">
    <!-- En-tête -->
    <div class="bg-white shadow rounded-lg p-6 mb-6">
        <div class="flex justify-between items-center">
            <div>
                <h1 class="text-2xl font-bold text-gray-800">Gestion des Agents</h1>
                <p class="text-gray-600">Administration complète de votre équipe commerciale</p>
            </div>
            <div class="flex space-x-3">
                <a href="{{ route('register') }}" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md">
                    <i class="fa-solid fa-plus mr-2"></i> Nouvel Agent
                </a>
                <a href="{{ route('dashboard') }}" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md">
                    <i class="fa-solid fa-arrow-left mr-2"></i> Retour
                </a>
            </div>
        </div>
    </div>

    @if(session('success'))
    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-6" role="alert">
        <span class="block sm:inline">{{ session('success') }}</span>
    </div>
    @endif

    @if(session('error'))
    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-6" role="alert">
        <span class="block sm:inline">{{ session('error') }}</span>
    </div>
    @endif

    <!-- Cartes de statistiques -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-blue-100 text-blue-600">
                    <i class="fa-solid fa-user-tie text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h2 class="text-gray-500">Total Agents</h2>
                    <p class="text-3xl font-bold">{{ $agents->count() }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-green-100 text-green-600">
                    <i class="fa-solid fa-users text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h2 class="text-gray-500">Clients Total</h2>
                    <p class="text-3xl font-bold">{{ $agents->sum('clients_count') }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-purple-100 text-purple-600">
                    <i class="fa-solid fa-chart-line text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h2 class="text-gray-500">CA Généré</h2>
                    <p class="text-3xl font-bold">{{ number_format($agents->sum('clients_abonnements_sum_prix'), 0, ',', ' ') }} FCFA</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-orange-100 text-orange-600">
                    <i class="fa-solid fa-percent text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h2 class="text-gray-500">Commission Moy.</h2>
                    <p class="text-3xl font-bold">{{ number_format($agents->avg('commission_rate') ?? 0, 1) }}%</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Tableau des agents -->
    <div class="bg-white shadow rounded-lg overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-indigo-50">
            <h2 class="text-lg font-semibold text-gray-800">Liste des Agents</h2>
            <p class="text-sm text-gray-600">Gestion individuelle de chaque membre de l'équipe</p>
        </div>

        <div class="overflow-x-auto">
            <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-medium text-gray-500 uppercase tracking-wider">Agent</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contact</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Clients</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CA Généré</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Commission</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @foreach($agents as $agent)
                    <tr class="hover:bg-gray-50 transition duration-150">
                        <!-- Dans le tableau, remplacez toutes les occurrences de $agent->property par $agent['property'] -->

<td class="px-6 py-4 whitespace-nowrap">
    <div class="flex items-center">
        <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center">
            <span class="text-blue-800 font-semibold">{{ substr($agent['name'], 0, 1) }}</span>
        </div>
        <div class="ml-4">
            <div class="text-sm font-medium text-gray-900">{{ $agent['name'] }}</div>
            <div class="text-sm text-gray-500">{{ $agent['email'] }}</div>
        </div>
    </div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
    {{ $agent['phone'] ?? 'Non renseigné' }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
    <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium">
        {{ $agent['clients_count'] }} clients
    </span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
    {{ number_format($agent['clients_abonnements_sum_prix'], 0, ',', ' ') }} FCFA
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
    <span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">
        {{ $agent['commission_rate'] }}%
    </span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
    <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full 
        {{ $agent['is_active'] ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
        {{ $agent['is_active'] ? 'Actif' : 'Inactif' }}
    </span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
    <div class="flex space-x-2">
        <button onclick="openEditModal({{ $agent['id'] }})" 
                class="text-indigo-600 hover:text-indigo-900">
            <i class="fa-solid fa-pen"></i>
        </button>
        <form action="{{ route('admin.agents.delete', $agent['id']) }}" method="POST" class="inline">
            @csrf
            @method('DELETE')
            <button type="submit" 
                    class="text-red-600 hover:text-red-900"
                    onclick="return confirm('Êtes-vous sûr de vouloir supprimer cet agent?')">
                <i class="fa-solid fa-trash"></i> 
            </button>
        </form>
    </div>
</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal de modification -->
<div id="editModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-1/2 lg:w-1/3 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">Modifier l'Agent</h3>
                <button onclick="closeEditModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fa-solid fa-times"></i>
                </button>
            </div>

            <form id="editForm" method="POST">
                @csrf
                @method('PUT')
                
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="name">
                        Nom complet *
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
                           id="edit_name" name="name" type="text" required>
                </div>
                
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="email">
                        Email *
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
                           id="edit_email" name="email" type="email" required>
                </div>
                
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="phone">
                        Téléphone
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
                           id="edit_phone" name="phone" type="text">
                </div>
                
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="commission_rate">
                        Taux de commission (%)
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
                           id="edit_commission_rate" name="commission_rate" type="number" step="0.1" min="0" max="100">
                </div>
                
                <div class="mb-6">
                    <label class="flex items-center">
                        <input type="checkbox" id="edit_is_active" name="is_active" value="1" class="form-checkbox">
                        <span class="ml-2 text-sm text-gray-600">Agent actif</span>
                    </label>
                </div>
                
                <div class="flex items-center justify-between">
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                        Mettre à jour
                    </button>
                    <button type="button" onclick="closeEditModal()" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">
                        Annuler
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    function openEditModal(agentId) {
    // Récupérer les données de l'agent
    const agents = {!! json_encode($agents) !!};
    const agent = agents.find(a => a.id === agentId);
    
    if (agent) {
        document.getElementById('edit_name').value = agent.name;
        document.getElementById('edit_email').value = agent.email;
        document.getElementById('edit_phone').value = agent.phone || '';
        document.getElementById('edit_commission_rate').value = agent.commission_rate || '';
        document.getElementById('edit_is_active').checked = agent.is_active;
        
        // Mettre à jour l'action du formulaire
        document.getElementById('editForm').action = "{{ url('admin/agents') }}/" + agentId;
        
        // Afficher le modal
        document.getElementById('editModal').classList.remove('hidden');
    }
}

    function closeEditModal() {
        document.getElementById('editModal').classList.add('hidden');
    }

    // Fermer le modal en cliquant à l'extérieur
    window.onclick = function(event) {
        const modal = document.getElementById('editModal');
        if (event.target === modal) {
            closeEditModal();
        }
    }
</script>
@endsection