@extends('layouts.app')

@section('title', 'Catégories')

@section('content')
<div class="space-y-6">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Catégories</h1>
            <p class="text-gray-600 mt-1">Gestion des catégories et tarifs</p>
        </div>
        @if(!auth()->user()->hasRole('gestionnaire'))
        <button onclick="openModal('category-create-modal')" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
            Nouvelle catégorie
        </button>
        @endif
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @forelse($categories as $category)
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-gray-900">{{ $category->name }}</h3>
                    <div class="flex items-center space-x-2">
                        @php
                            $user = auth()->user();
                            $canEdit = false;
                            $canDelete = false;
                            
                            // Gestionnaire ne peut ni modifier ni supprimer
                            if ($user->hasRole('gestionnaire')) {
                                $canEdit = false;
                                $canDelete = false;
                            } elseif ($user->hasRole('superAdmin')) {
                                $canEdit = true;
                                $canDelete = true;
                            } elseif ($user->hasRole('admin')) {
                                $canDelete = true;
                                // Admin peut modifier les catégories créées par lui-même ou par les gestionnaires qu'il a créés
                                if ($category->created_by === $user->id) {
                                    $canEdit = true;
                                } else {
                                    $creator = \App\Models\User::find($category->created_by);
                                    $canEdit = $creator && $creator->hasRole('gestionnaire') && $creator->created_by === $user->id;
                                }
                            }
                        @endphp
                        
                        <!-- Bouton Modifier -->
                        @if($canEdit)
                        <div class="relative group">
                            <button onclick="openEditCategoryModal({{ $category->id }}, '{{ addslashes($category->name) }}', {{ $category->normal_price }}, {{ $category->express_price ?? 'null' }}, {{ $category->super_express_price ?? 'null' }}, '{{ addslashes($category->description ?? '') }}')" class="inline-flex items-center px-2.5 py-2 rounded-lg text-sm font-semibold text-indigo-600 bg-indigo-50 hover:bg-indigo-100 transition-colors">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                </svg>
                            </button>
                            <div class="absolute bottom-full right-0 mb-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 pointer-events-none">
                                <div class="bg-gray-900 text-white text-xs font-medium rounded-lg py-2 px-3 shadow-xl whitespace-nowrap">
                                    Modifier la catégorie
                                    <div class="absolute top-full right-4 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900"></div>
                                </div>
                            </div>
                        </div>
                        @endif

                        <!-- Bouton Supprimer -->
                        @if($canDelete)
                        <div class="relative group">
                            <form action="{{ route('categories.destroy', $category) }}" method="POST" class="inline" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cette catégorie ? Cette action est irréversible.');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="inline-flex items-center px-2.5 py-2 rounded-lg text-sm font-semibold text-red-600 bg-red-50 hover:bg-red-100 transition-colors">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                    </svg>
                                </button>
                            </form>
                            <div class="absolute bottom-full right-0 mb-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 pointer-events-none">
                                <div class="bg-gray-900 text-white text-xs font-medium rounded-lg py-2 px-3 shadow-xl whitespace-nowrap">
                                    Supprimer la catégorie
                                    <div class="absolute top-full right-4 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900"></div>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
                <div class="space-y-2">
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Normal:</span>
                        <span class="font-medium text-gray-900">{{ number_format($category->normal_price, 0, ',', ' ') }} FCFA</span>
                    </div>
                    @if($category->express_price)
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600">Express:</span>
                            <span class="font-medium text-gray-900">{{ number_format($category->express_price, 0, ',', ' ') }} FCFA</span>
                        </div>
                    @endif
                    @if($category->super_express_price)
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600">Super Express:</span>
                            <span class="font-medium text-gray-900">{{ number_format($category->super_express_price, 0, ',', ' ') }} FCFA</span>
                        </div>
                    @endif
                    <div class="pt-2 border-t border-gray-200">
                        <p class="text-xs text-gray-500">{{ $category->articles_count }} article(s)</p>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-span-full text-center py-12 text-gray-500">
                <p>Aucune catégorie</p>
            </div>
        @endforelse
    </div>

    @if($categories->hasPages())
        <div class="px-6 py-4">
            {{ $categories->links() }}
        </div>
    @endif
</div>

<!-- Modal Create Category -->
<x-modal id="category-create-modal" title="Nouvelle catégorie">
    <form action="{{ route('categories.store') }}" method="POST" class="space-y-5">
        @csrf
        <div>
            <label for="create_category_name" class="block text-sm font-semibold text-gray-700 mb-2">Nom *</label>
            <input type="text" id="create_category_name" name="name" value="{{ old('name') }}" required
                   placeholder="Entrez le nom de la catégorie"
                   class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all outline-none">
        </div>
        <div class="grid grid-cols-3 gap-4">
            <div>
                <label for="create_normal_price" class="block text-sm font-semibold text-gray-700 mb-2">Prix normal *</label>
                <input type="number" id="create_normal_price" name="normal_price" value="{{ old('normal_price') }}" required min="0" step="0.01"
                       placeholder="0"
                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all outline-none">
            </div>
            <div>
                <label for="create_express_price" class="block text-sm font-semibold text-gray-700 mb-2">Prix express</label>
                <input type="number" id="create_express_price" name="express_price" value="{{ old('express_price') }}" min="0" step="0.01"
                       placeholder="0"
                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all outline-none">
            </div>
            <div>
                <label for="create_super_express_price" class="block text-sm font-semibold text-gray-700 mb-2">Prix super express</label>
                <input type="number" id="create_super_express_price" name="super_express_price" value="{{ old('super_express_price') }}" min="0" step="0.01"
                       placeholder="0"
                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all outline-none">
            </div>
        </div>
        <div>
            <label for="create_category_description" class="block text-sm font-semibold text-gray-700 mb-2">Description</label>
            <textarea id="create_category_description" name="description" rows="4"
                      placeholder="Entrez la description de la catégorie"
                      class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all outline-none resize-none">{{ old('description') }}</textarea>
        </div>
        <div class="flex items-center justify-end space-x-3 pt-6 border-t border-gray-200">
            <button type="button" onclick="closeModal('category-create-modal')" class="px-6 py-2.5 text-gray-700 bg-white border border-gray-300 rounded-xl hover:bg-gray-50 transition-colors font-medium">
                Annuler
            </button>
            <button type="submit" class="px-6 py-2.5 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-xl hover:from-blue-700 hover:to-indigo-700 transition-all font-medium shadow-lg shadow-blue-500/25">
                Enregistrer
            </button>
        </div>
    </form>
</x-modal>

<!-- Modal Edit Category -->
<x-modal id="category-edit-modal" title="Modifier la catégorie">
    <form id="edit-category-form" method="POST" class="space-y-5">
        @csrf
        @method('PUT')
        <div>
            <label for="edit_category_name" class="block text-sm font-semibold text-gray-700 mb-2">Nom *</label>
            <input type="text" id="edit_category_name" name="name" required
                   placeholder="Entrez le nom de la catégorie"
                   class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all outline-none">
        </div>
        <div class="grid grid-cols-3 gap-4">
            <div>
                <label for="edit_normal_price" class="block text-sm font-semibold text-gray-700 mb-2">Prix normal *</label>
                <input type="number" id="edit_normal_price" name="normal_price" required min="0" step="0.01"
                       placeholder="0"
                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all outline-none">
            </div>
            <div>
                <label for="edit_express_price" class="block text-sm font-semibold text-gray-700 mb-2">Prix express</label>
                <input type="number" id="edit_express_price" name="express_price" min="0" step="0.01"
                       placeholder="0"
                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all outline-none">
            </div>
            <div>
                <label for="edit_super_express_price" class="block text-sm font-semibold text-gray-700 mb-2">Prix super express</label>
                <input type="number" id="edit_super_express_price" name="super_express_price" min="0" step="0.01"
                       placeholder="0"
                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all outline-none">
            </div>
        </div>
        <div>
            <label for="edit_category_description" class="block text-sm font-semibold text-gray-700 mb-2">Description</label>
            <textarea id="edit_category_description" name="description" rows="4"
                      placeholder="Entrez la description de la catégorie"
                      class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all outline-none resize-none"></textarea>
        </div>
        <div class="flex items-center justify-end space-x-3 pt-6 border-t border-gray-200">
            <button type="button" onclick="closeModal('category-edit-modal')" class="px-6 py-2.5 text-gray-700 bg-white border border-gray-300 rounded-xl hover:bg-gray-50 transition-colors font-medium">
                Annuler
            </button>
            <button type="submit" class="px-6 py-2.5 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-xl hover:from-blue-700 hover:to-indigo-700 transition-all font-medium shadow-lg shadow-blue-500/25">
                Mettre à jour
            </button>
        </div>
    </form>
</x-modal>

@push('scripts')
<script>
function openEditCategoryModal(id, name, normalPrice, expressPrice, superExpressPrice, description) {
    document.getElementById('edit-category-form').action = `/categories/${id}`;
    document.getElementById('edit_category_name').value = name;
    document.getElementById('edit_normal_price').value = normalPrice;
    document.getElementById('edit_express_price').value = expressPrice || '';
    document.getElementById('edit_super_express_price').value = superExpressPrice || '';
    document.getElementById('edit_category_description').value = description || '';
    openModal('category-edit-modal');
}
</script>
@endpush
@endsection