@extends('layouts.app')

@section('content')
<div x-data="{ openModal: false, deleteUrl: '' }">
    
    <!-- Cabeçalho -->
    <div class="flex flex-col md:flex-row justify-between items-center mb-8 gap-4 px-2 md:px-0">
        <div class="text-center md:text-left">
            <h1 class="text-3xl font-bold text-gray-800 tracking-tight">Projetos</h1>
            <p class="text-gray-500 text-sm">Gerencie o progresso e as prioridades</p>
        </div>
        <a href="{{ route('projetos.create') }}" class="w-full md:w-auto bg-nubank hover:bg-purple-800 text-white font-semibold py-4 px-6 rounded-2xl transition-all shadow-md flex justify-center items-center gap-2">
            <i data-lucide="plus-circle" class="w-5 h-5"></i> Novo Projeto
        </a>
    </div>

    @if($projetos->isEmpty())
        <div class="text-center py-20 bg-white rounded-[32px] border border-dashed border-gray-200">
            <p class="text-gray-400">Nenhum projeto encontrado.</p>
        </div>
    @endif

    <div class="space-y-3 px-2">
        @foreach($projetos as $projeto)
            @php
                $total = $projeto->tarefas->count();
                // Consideramos "parcela paga/tarefa concluída" se dataFim não for nula
                $concluidas = $projeto->tarefas->whereNotNull('dataFim')->count();
                $percentual = $total > 0 ? ($concluidas / $total) * 100 : 0;
                $circunferencia = 2 * pi() * 18; // Raio de 18 para caber no box de 40px
                $offset = $circunferencia - ($percentual / 100) * $circunferencia;
            @endphp

            <div class="bg-white p-5 rounded-[24px] shadow-sm border border-gray-100 flex justify-between items-center" x-data="{ menuOpen: false }">
                <div class="flex items-center gap-4">
                    <a href="{{ route('tarefas.projeto', $projeto->id) }}" class="hover:underline">  
                    <!-- Ícone com Gráfico Circular -->
                        <div class="relative w-11 h-11 flex items-center justify-center"> 
                            <svg class="absolute w-full h-full -rotate-90" viewBox="0 0 40 40">
                                <!-- Fundo do Círculo (Cinza claro) -->
                                <circle cx="20" cy="20" r="18" stroke="currentColor" stroke-width="3" fill="transparent" class="text-gray-100" />
                                <!-- Progresso (Roxo Nubank) -->
                                <circle cx="20" cy="20" r="18" stroke="currentColor" stroke-width="3" fill="transparent" 
                                    class="text-nubank transition-all duration-700 ease-in-out"
                                    stroke-dasharray="{{ $circunferencia }}"
                                    stroke-dashoffset="{{ $offset }}"
                                    stroke-linecap="round" />
                            </svg>
                        
                            <div class="z-10 text-gray-400">
                                <i data-lucide="briefcase" class="w-5 h-5"></i>
                            </div>
                        </div>
                    </a>

                    <div>
                        <h3 class="font-bold text-gray-800 text-base leading-tight">{{ $projeto->nome }}</h3>
                        <div class="text-[11px] text-gray-400 mt-1">
                            <span class="block">Autor: {{ $projeto->responsavel->nome ?? 'N/A' }}</span>
                            <span class="block italic">Início: {{ date('d/m/Y', strtotime($projeto->dataInicio)) }}</span>
                        </div>
                    </div>
                </div>
                
                <div class="flex items-center gap-1 relative">
                    <!-- Botão Plus (Ação de Adicionar Tarefa) -->
                    <a href="{{ route('tarefas.create', ['id' => $projeto->id]) }}" 
                    class="p-3 text-nubank bg-purple-50 rounded-2xl active:scale-95 transition">
                        <i data-lucide="plus" class="w-5 h-5"></i>
                    </a>

                    <div class="relative">
                        <button @click="menuOpen = !menuOpen" @click.away="menuOpen = false" class="p-3 text-gray-400 hover:bg-gray-100 rounded-2xl transition">
                            <i data-lucide="more-vertical" class="w-5 h-5"></i>
                        </button>

                        <div x-show="menuOpen" x-cloak 
                             x-transition:enter="transition ease-out duration-200"
                             x-transition:enter-start="opacity-0 scale-95"
                             x-transition:enter-end="opacity-100 scale-100"
                             class="absolute right-0 w-44 bg-white rounded-2xl shadow-2xl border border-gray-100 z-[100] py-2 overflow-hidden bottom-14 md:bottom-auto md:top-full mt-2">
                            
                            <a href="{{ route('projetos.edit', $projeto->id) }}" class="flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-blue-50 transition border-b border-gray-50">
                                <i data-lucide="pencil" class="w-4 h-4 text-blue-500"></i> 
                                <span class="font-semibold text-sm">Editar</span>
                            </a>
                            
                            <button @click="openModal = true; deleteUrl = '{{ route('projetos.destroy', $projeto->id) }}'; menuOpen = false" 
                                    class="w-full flex items-center gap-3 px-4 py-3 text-red-500 hover:bg-red-50 transition text-left">
                                <i data-lucide="trash-2" class="w-4 h-4"></i> 
                                <span class="font-semibold text-sm">Excluir</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <!-- MODAL DE CONFIRMAÇÃO (Mantido) -->
    <div x-show="openModal" class="fixed inset-0 z-[100] flex items-center justify-center p-6 bg-black/60 backdrop-blur-sm" x-cloak>
        <div class="bg-white rounded-[32px] p-8 max-w-sm w-full shadow-2xl text-center">
            <div class="bg-red-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-red-600">
                <i data-lucide="alert-triangle" class="w-8 h-8"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">Excluir Projeto?</h3>
            <p class="text-gray-500 mb-8 text-sm">Essa ação removerá o projeto permanentemente.</p>
            <div class="flex flex-col gap-3">
                <form :action="deleteUrl" method="POST">
                    @csrf @method('DELETE')
                    <button type="submit" class="w-full bg-red-500 text-white font-bold py-4 rounded-2xl active:bg-red-700">Sim, excluir</button>
                </form>
                <button @click="openModal = false" class="w-full py-2 text-gray-400 font-semibold">Cancelar</button>
            </div>
        </div>
    </div>
</div>
@endsection