@php
    use App\Models\FatturaContratto;
@endphp

<div class="space-y-2">
    @forelse($notule as $notula)
        @php
            // Controlla se la notula è collegata a una fattura pagata
            $fattura = FatturaContratto::where('notula_id', $notula->id)->first();
            $isPagata = $fattura && $fattura->stato === 'pagata';
            $isParzialmentePagata = $fattura && $fattura->stato === 'parzialmente_pagata';
        @endphp

        <div class="group relative overflow-hidden rounded-xl border transition-all duration-200
            {{ $isPagata
                ? 'border-emerald-200 bg-gradient-to-r from-emerald-50 to-emerald-50/50 dark:border-emerald-800 dark:from-emerald-950/50 dark:to-emerald-900/30'
                : ($isParzialmentePagata
                    ? 'border-amber-200 bg-gradient-to-r from-amber-50 to-amber-50/50 dark:border-amber-800 dark:from-amber-950/50 dark:to-amber-900/30'
                    : 'border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm dark:border-gray-700 dark:bg-gray-800 dark:hover:border-gray-600')
            }}">

            {{-- Indicator bar --}}
            <div class="absolute left-0 top-0 bottom-0 w-1
                {{ $isPagata
                    ? 'bg-emerald-500'
                    : ($isParzialmentePagata
                        ? 'bg-amber-500'
                        : ($notula->yousign_status === 'completed'
                            ? 'bg-blue-500'
                            : 'bg-gray-300 dark:bg-gray-600'))
                }}">
            </div>

            <div class="flex items-center justify-between p-4 pl-5">
                <div class="flex-1 min-w-0">
                    {{-- Header row --}}
                    <div class="flex items-center gap-3 mb-1.5">
                        <span class="font-semibold text-gray-900 dark:text-white">
                            Notula #{{ $notula->id }}
                        </span>

                        {{-- Status badges --}}
                        <div class="flex items-center gap-1.5">
                            {{-- Firma status --}}
                            @if($notula->yousign_status === 'completed')
                                <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300">
                                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                    </svg>
                                    Firmata
                                </span>
                            @elseif($notula->yousign_status === 'pending')
                                <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-300">
                                    <svg class="w-3 h-3 animate-pulse" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
                                    </svg>
                                    In attesa firma
                                </span>
                            @elseif($notula->status === 'verified')
                                <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full bg-sky-100 text-sky-700 dark:bg-sky-900/50 dark:text-sky-300">
                                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                    </svg>
                                    Verificata
                                </span>
                            @else
                                <span class="inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400">
                                    {{ ucfirst($notula->status ?? 'bozza') }}
                                </span>
                            @endif

                            {{-- Payment status --}}
                            @if($isPagata)
                                <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300">
                                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4z"/>
                                        <path fill-rule="evenodd" d="M6 10a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm5 1a1 1 0 100 2h2a1 1 0 100-2h-2z" clip-rule="evenodd"/>
                                    </svg>
                                    Pagata
                                </span>
                            @elseif($isParzialmentePagata)
                                <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300">
                                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4z"/>
                                        <path fill-rule="evenodd" d="M6 10a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm5 1a1 1 0 100 2h2a1 1 0 100-2h-2z" clip-rule="evenodd"/>
                                    </svg>
                                    Parz. pagata
                                </span>
                            @elseif($fattura)
                                <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                    </svg>
                                    Da pagare
                                </span>
                            @endif
                        </div>
                    </div>

                    {{-- Details row --}}
                    <div class="flex items-center gap-4 text-sm">
                        <span class="text-gray-500 dark:text-gray-400 capitalize">
                            {{ str_replace('_', ' ', $notula->tipologia_notula ?? 'N/D') }}
                        </span>

                        <span class="text-gray-300 dark:text-gray-600">•</span>

                        <span class="text-gray-500 dark:text-gray-400">
                            Lordo: {{ number_format($notula->importo_a ?? 0, 2, ',', '.') }} €
                        </span>

                        <span class="text-gray-300 dark:text-gray-600">•</span>

                        <span class="font-medium text-gray-700 dark:text-gray-300">
                            Netto: {{ number_format($notula->netto_da_pagare ?? 0, 2, ',', '.') }} €
                        </span>

                        @if($fattura && $isParzialmentePagata)
                            <span class="text-gray-300 dark:text-gray-600">•</span>
                            <span class="text-xs text-amber-600 dark:text-amber-400">
                                Pagato: {{ number_format($fattura->importo_pagato ?? 0, 2, ',', '.') }} €
                            </span>
                        @endif
                    </div>
                </div>

                {{-- Action button --}}
                <a href="{{ route('filament.admin.resources.notulas.edit', $notula) }}"
                   target="_blank"
                   class="flex-shrink-0 inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-lg transition-all duration-150
                       text-primary-600 bg-primary-50 hover:bg-primary-100 hover:text-primary-700
                       dark:bg-primary-900/30 dark:text-primary-400 dark:hover:bg-primary-900/50 dark:hover:text-primary-300
                       focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
                    <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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                    </svg>
                    Apri
                </a>
            </div>
        </div>
    @empty
        <div class="flex flex-col items-center justify-center py-8 text-center">
            <div class="w-12 h-12 mb-3 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
                <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
            </div>
            <p class="text-sm font-medium text-gray-900 dark:text-white">Nessuna notula collegata</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Non ci sono notule associate a questo contratto</p>
        </div>
    @endforelse
</div>