@extends('layouts.provider')

@section('title', 'Paramètres - Fournisseurs')
@section('page-title', 'Paramètres')

@section('content')
<div class="space-y-6">
    <x-settings-tabs active="suppliers" />
    
    <x-card>
        <x-slot name="header">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Fournisseurs ({{ $suppliers->total() }})</h3>
                <x-button href="{{ route('provider.suppliers.create') }}" size="sm">
                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                    </svg>
                    Nouveau
                </x-button>
            </div>
        </x-slot>

        <div class="space-y-6">
            <!-- Filtres -->
            <form method="GET" class="flex gap-2">
                <input type="text" 
                       name="search" 
                       value="{{ request('search') }}" 
                       placeholder="Rechercher par nom, téléphone ou notes..."
                       class="flex-1 px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                <select name="status" class="w-32 px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg">
                    <option value="">Tous</option>
                    <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Actifs</option>
                    <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactifs</option>
                </select>
                <button type="submit" class="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700" title="Rechercher">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </button>
                @if(request('search') || request('status'))
                <a href="{{ route('provider.suppliers.index') }}" class="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700" title="Réinitialiser">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </a>
                @endif
            </form>

            @if($suppliers->count() > 0)
            <div class="space-y-3" data-suppliers-list>
                @foreach($suppliers as $supplier)
                    <x-card class="hover:shadow-md transition-shadow {{ !$supplier->is_active ? 'opacity-60' : '' }}">
                        <div class="flex justify-between items-end gap-4">
                            <div class="flex-1">
                                <h3 class="font-semibold text-gray-900 dark:text-white">
                                    {{ $supplier->name }}
                                </h3>
                                @if($supplier->tax_id)
                                    <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">Matricule fiscal: {{ $supplier->tax_id }}</p>
                                @endif
                                @if($supplier->phone)
                                    <a href="tel:{{ $supplier->phone }}" class="text-xs font-medium text-gray-700 dark:text-gray-300 mt-1 flex items-center gap-1 hover:text-primary">
                                        <svg class="w-3.5 h-3.5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                                        </svg>
                                        {{ format_phone($supplier->phone) }}
                                    </a>
                                @else
                                    <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Aucun numéro</p>
                                @endif
                                <p class="text-xs {{ $supplier->expenses_count > 0 ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 dark:text-gray-500' }} mt-1">
                                    {{ $supplier->expenses_count > 0 ? "Utilisé dans {$supplier->expenses_count} dépense(s)" : 'Pas encore utilisé' }}
                                </p>
                                
                                {{-- Badges Dépenses --}}
                                <div class="flex gap-1.5 mt-2">
                                    <div class="flex items-center gap-1.5">
                                        <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 whitespace-nowrap">
                                            Dép. TND: {{ format_currency($supplier->total_expenses ?? 0) }}
                                        </span>
                                        @if(($supplier->expenses_30d ?? 0) > 0)
                                            <span class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
                                                30j: {{ format_currency($supplier->expenses_30d) }}
                                            </span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="flex-shrink-0">
                                <div class="flex space-x-2 justify-end">
                                    <x-button href="{{ route('provider.suppliers.edit', $supplier->uuid) }}" variant="secondary" size="sm">
                                        Éditer
                                    </x-button>
                                    @if($supplier->expenses_count == 0)
                                        <x-delete-confirm 
                                            :action="route('provider.suppliers.destroy', $supplier->uuid)" 
                                            message="Êtes-vous sûr de vouloir supprimer ce fournisseur ?"
                                        />
                                    @endif
                                </div>
                            </div>
                        </div>
                    </x-card>
                @endforeach
            </div>
            <div class="mt-6" data-suppliers-pagination>
                {{ $suppliers->appends(request()->query())->links() }}
            </div>
        @else
            <div class="text-center py-12">
                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                </svg>
                <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">Aucun fournisseur</h3>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Commencez par créer votre premier fournisseur.</p>
            </div>
        @endif
    </x-card>
</div>

<script>
function loadSuppliersPage(url) {
    fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
        .then(r => r.text())
        .then(html => {
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');
            const newList = doc.querySelector('[data-suppliers-list]');
            const newPagination = doc.querySelector('[data-suppliers-pagination]');
            if (newList && newPagination) {
                document.querySelector('[data-suppliers-list]').innerHTML = newList.innerHTML;
                document.querySelector('[data-suppliers-pagination]').innerHTML = newPagination.innerHTML;
                window.history.pushState({}, '', url);
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }
        });
}

document.addEventListener('click', function(e) {
    const link = e.target.closest('[data-suppliers-pagination] a');
    if (link && link.href) {
        e.preventDefault();
        loadSuppliersPage(link.href);
    }
});

document.addEventListener('change', function(e) {
    if (e.target.matches('[data-pagination-select]')) {
        if (e.target.value) {
            loadSuppliersPage(e.target.value);
        }
    }
});
</script>
@endsection