@extends('layouts.app')

@section('content')
<div class="bg-white shadow rounded-lg">
    <div class="px-6 py-4 border-b border-gray-200">
        <div class="flex justify-between items-center">
            <h2 class="text-2xl font-bold text-gray-900">Suggestions d'Approvisionnement</h2>
            <div class="flex space-x-2">
                <a href="{{ route('supplier-suggestions.generate') }}" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition">
                    <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                    </svg>
                    Générer Suggestions
                </a>
            </div>
        </div>
    </div>

    <!-- Statistiques -->
    <div class="px-6 py-4 bg-gray-50">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="bg-white rounded-lg shadow p-6">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                        </svg>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-600">Suggestions en Attente</p>
                        <p class="text-2xl font-semibold text-gray-900">{{ $pendingSuggestions }}</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-red-100 text-red-600">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                        </svg>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-600">Priorité Élevée</p>
                        <p class="text-2xl font-semibold text-gray-900">{{ $highPrioritySuggestions }}</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-blue-100 text-blue-600">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
                        </svg>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-600">Coût Estimé Total</p>
                        <p class="text-2xl font-semibold text-gray-900">{{ number_format($totalEstimatedCost, 0, ',', ' ') }} FCFA</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Liste des suggestions -->
    <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">Produit</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Quantité Suggérée</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Coût Estimé</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Priorité</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Raison</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">
                @forelse($suggestions as $suggestion)
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div>
                            <div class="text-sm font-medium text-gray-900">{{ $suggestion->product->name }}</div>
                            <div class="text-sm text-gray-500">Stock actuel: {{ $suggestion->product->stock_quantity }} {{ $suggestion->product->unit }}</div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {{ $suggestion->suggested_quantity }} {{ $suggestion->product->unit }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                        {{ $suggestion->formatted_estimated_cost }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
                            @if($suggestion->priority === 'high') bg-red-100 text-red-800
                            @elseif($suggestion->priority === 'medium') bg-yellow-100 text-yellow-800
                            @else bg-green-100 text-green-800 @endif">
                            {{ $suggestion->priority_label }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {{ Str::limit($suggestion->reason, 50) }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        @if($suggestion->is_processed)
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                Traité
                            </span>
                        @elseif($suggestion->is_approved)
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                Approuvé
                            </span>
                        @else
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                En attente
                            </span>
                        @endif
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        <div class="flex space-x-2">
                            @if(!$suggestion->is_approved && !$suggestion->is_processed)
                                <form method="POST" action="{{ route('supplier-suggestions.approve', $suggestion) }}" class="inline">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit" class="text-green-600 hover:text-green-900">
                                        Approuver
                                    </button>
                                </form>
                            @endif

                            @if($suggestion->is_approved && !$suggestion->is_processed)
                                <form method="POST" action="{{ route('supplier-suggestions.process', $suggestion) }}" class="inline">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit" class="text-blue-600 hover:text-blue-900">
                                        Traiter
                                    </button>
                                </form>
                            @endif

                            @if(!$suggestion->is_processed)
                                <form method="POST" action="{{ route('supplier-suggestions.destroy', $suggestion) }}" 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 cette suggestion ?')">
                                        Supprimer
                                    </button>
                                </form>
                            @endif
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="px-6 py-4 text-center text-gray-500">
                        Aucune suggestion d'approvisionnement disponible.
                        <br>
                        <a href="{{ route('supplier-suggestions.generate') }}" class="text-blue-600 hover:text-blue-900 mt-2 inline-block">
                            Cliquez ici pour générer des suggestions
                        </a>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="px-6 py-4 border-t border-gray-200">
        {{ $suggestions->links() }}
    </div>
</div>

<!-- Informations sur l'algorithme -->
<div class="mt-8 bg-white shadow rounded-lg">
    <div class="px-6 py-4 border-b border-gray-200">
        <h3 class="text-lg font-medium text-gray-900">Comment fonctionne l'algorithme ?</h3>
    </div>
    <div class="p-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <h4 class="font-medium text-gray-900 mb-2">Analyse des stocks</h4>
                <ul class="text-sm text-gray-600 space-y-1">
                    <li>• Calcul de la consommation moyenne (30 derniers jours)</li>
                    <li>• Estimation des jours de stock restant</li>
                    <li>• Comparaison avec les seuils d'alerte</li>
                </ul>
            </div>
            <div>
                <h4 class="font-medium text-gray-900 mb-2">Niveaux de priorité</h4>
                <ul class="text-sm text-gray-600 space-y-1">
                    <li>• <span class="text-red-600 font-medium">Élevée</span> : Stock faible ou rupture</li>
                    <li>• <span class="text-yellow-600 font-medium">Moyenne</span> : Moins de 2 semaines</li>
                    <li>• <span class="text-green-600 font-medium">Faible</span> : Planification</li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection