@extends('layouts.app')

@section('content')
<div x-data="{ 
    openModal: false, deleteUrl: '', openDateModal: false, dateUrl: '', tarefaId: '', projetoNome: '', tarefaNome: '', dataFimAtual: '' }">
    <div class="flex flex-col md:flex-row justify-between items-center mb-8 gap-4 px-2">
        <div>
            <h1 class="text-3xl font-bold text-gray-800">Minhas Tarefas</h1>
            <p class="text-gray-500 text-sm">Organizadas por projeto</p>
        </div>
        <a href="{{ route('tarefas.create', isset($projeto->id) ? ['id' => $projeto->id] : []) }}" class="w-full md:w-auto bg-nubank text-white px-6 py-4 rounded-2xl font-bold shadow-lg hover:bg-purple-800 transition flex justify-center items-center gap-2">
            <i data-lucide="plus-circle" class="w-5 h-5"></i> Nova Tarefa
        </a>
    </div>
    
    @if($tarefas->isEmpty()) 
        <div class="text-center py-20 bg-white rounded-[32px] border border-dashed border-gray-200">
            <p class="text-gray-400">Nenhuma tarefa encontrada.</p>
        </div>
    @endif


    <!-- VERSÃO DESKTOP: TABELAS AGRUPADAS (Oculta no Mobile) -->
    <div class="hidden md:block space-y-8">
        @foreach($tarefasAgrupadas as $projetoId => $tarefas)
            @php $projeto = $tarefas->first()->projeto; @endphp
            <div class="space-y-4">
                <div class="flex items-center gap-3 px-2">
                    <div class="w-1 h-6 bg-nubank rounded-full"></div>
                    <h2 class="text-lg font-bold text-gray-700">{{ $projeto->nome ?? 'Sem Projeto' }}</h2>
                </div>
                <div class="bg-white rounded-[32px] shadow-sm border border-gray-100 overflow-hidden">
                    <table class="w-full text-left border-collapse">
                        <thead class="bg-gray-50 border-b border-gray-100">
                            <tr>
                                <th class="px-6 py-4 text-xs font-semibold text-gray-400 uppercase w-1/2">Tarefa</th>
                                <th class="px-6 py-4 text-xs font-semibold text-gray-400 uppercase">Data</th>
                                <th class="px-6 py-4 text-xs font-semibold text-gray-400 uppercase text-center">Ações</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-50">
                            @foreach($tarefas as $tarefa)
                            <tr class="hover:bg-gray-50 transition-colors group">
                                <td class="px-6 py-5 font-semibold text-gray-700">{{ $tarefa->nome }}</td>
                                <td class="px-6 py-5 text-gray-400 text-sm">{{ date('d/m/Y', strtotime($tarefa->dataInicio)) }}</td>
                                <td class="px-6 py-5">
                                    <div class="flex justify-center gap-2">
                                        <button type="button" 
                                            @click="openDateModal = true; 
                                                    dateUrl = '/tarefas/{{ $tarefa->id }}/concluir';
                                                    tarefaId = '{{ $tarefa->id }}';
                                                      projetoNome = '{{ addslashes($projeto->nome) }}'; 
                                                    tarefaNome = '{{ addslashes($tarefa->nome) }}';
                                                    dataFimAtual = '{{ $tarefa->dataFim }}'"

                                            class="p-2 rounded-xl transition border shadow-sm {{ is_null($tarefa->dataFim) 
                                                ? 'text-nubank bg-purple-50 border-purple-100 hover:bg-purple-100' 
                                                : 'text-green-600 bg-green-50 border-green-100 hover:bg-green-100' }}"
                                            title="Definir Data de Entrega">
                                            <i data-lucide="calendar-check" class="w-5 h-5"></i>
                                        </button>
                                        
                                        <a href="{{ route('tarefas.edit', $tarefa->id) }}" class="p-2 text-blue-600 hover:bg-blue-50 rounded-xl transition border border-blue-100"><i data-lucide="pencil" class="w-5 h-5"></i></a>
                                        
                                        <button @click="openModal = true; deleteUrl = '{{ route('tarefas.destroy', $tarefa->id) }}'" class="p-2 text-red-500 hover:bg-red-50 rounded-xl transition border border-red-100"><i data-lucide="trash-2" class="w-5 h-5"></i></button>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        @endforeach
    </div>

    <!-- VERSÃO MOBILE: CARDS AGRUPADOS (Oculta no Desktop) -->
    <div class="md:hidden space-y-8 px-2 pb-20">
        @foreach($tarefasAgrupadas as $projetoId => $tarefas)
            @php $projeto = $tarefas->first()->projeto; @endphp
            <div class="space-y-3">
                <!-- Título do Projeto no Mobile -->
                <div class="flex justify-between items-center px-1">
                    <h2 class="text-sm font-black text-gray-400 uppercase tracking-widest">{{ $projeto->nome ?? 'Sem Projeto' }}</h2>
                    <span class="text-[10px] bg-gray-200 text-gray-600 px-2 py-0.5 rounded-full font-bold">{{ $tarefas->count() }}</span>
                </div>

                @foreach($tarefas as $tarefa)
                <div class="bg-white p-4 rounded-[24px] shadow-sm border border-gray-100 flex justify-between items-center">
                    <div class="flex flex-col">
                        <span class="font-bold text-gray-800 text-base">{{ $tarefa->nome }}</span>
                        <span class="text-[11px] text-gray-400 flex items-center gap-1 mt-1">
                            <i data-lucide="calendar" class="w-3 h-3"></i>
                            {{ date('d/m/Y', strtotime($tarefa->dataInicio)) }}
                        </span>
                    </div>

                    <div class="flex gap-2">
                        <!-- Ações Rápidas Mobile -->
                         <button type="button" 
                            @click="openDateModal = true; 
                                    tarefaId = '{{ $tarefa->id }}';
                                    dateUrl = '/tarefas/{{ $tarefa->id }}/concluir';
                                    projetoNome = '{{ addslashes($projeto->nome) }}'; 
                                    tarefaNome = '{{ addslashes($tarefa->nome) }}';
                                    dataFimAtual = '{{ $tarefa->dataFim }}'"

                            class="p-2 rounded-xl transition border shadow-sm {{ is_null($tarefa->dataFim) 
                                ? 'text-nubank bg-purple-50 border-purple-100 hover:bg-purple-100' 
                                : 'text-green-600 bg-green-50 border-green-100 hover:bg-green-100' }}"
                            title="Definir Data de Entrega">
                            <i data-lucide="calendar-check" class="w-5 h-5"></i>
                        </button>

                        <a href="{{ route('tarefas.edit', $tarefa->id) }}" class="p-3 text-blue-600 bg-blue-50 rounded-2xl active:scale-90 transition-transform">
                            <i data-lucide="pencil" class="w-5 h-5"></i>
                        </a>
                        <button @click="openModal = true; deleteUrl = '{{ route('tarefas.destroy', $tarefa->id) }}'" 
                                class="p-3 text-red-500 bg-red-50 rounded-2xl active:scale-90 transition-transform">
                            <i data-lucide="trash-2" class="w-5 h-5"></i>
                        </button>
                    </div>
                </div>
                @endforeach
            </div>
        @endforeach
    </div>

    <!-- MODAL DE EXCLUSÃO (Z-INDEX ALTO) -->
    <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 tarefa?</h3>
            <p class="text-gray-500 mb-8 text-sm">Essa ação removerá a tarefa deste 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>

    <!-- MODAL DE DATA FIM -->
    <div x-show="openDateModal" 
        class="fixed inset-0 z-[999] flex items-center justify-center bg-black/60 backdrop-blur-sm"
        x-cloak>
        
        <div @click.away="openDateModal = false" class="bg-white rounded-[32px] p-8 max-w-md w-full shadow-2xl">
            <div class="mb-6">
                <h3 class="text-xl font-bold text-gray-900" x-text="tarefaNome"></h3>
                <p class="text-sm text-gray-500" x-text="projetoNome"></p>
            </div>

            <form :action="dateUrl" method="POST">
                @csrf @method('PUT')
                <!-- Importante: Enviar o nome da tarefa para o update não dar erro de validação -->
                <input type="hidden" name="nome" :value="tarefaNome">
                <input type="hidden" name="idTarefa" :value="tarefaId">

                
                <div class="mb-6">
                    <label class="block text-sm font-bold text-gray-700 mb-2">Data de Conclusão</label>
                    <input type="date" name="dataFim" x-model="dataFimAtual" 
                        class="w-full p-4 bg-gray-50 rounded-2xl border-none focus:ring-2 focus:ring-purple-500 outline-none">
                </div>

                <div class="flex flex-col gap-2">
                    <button type="submit" class="w-full bg-nubank text-white font-bold py-4 rounded-2xl shadow-lg">
                        Salvar Data
                    </button>
                    <button type="button" @click="openDateModal = false" class="w-full py-2 text-gray-400 font-semibold">
                        Cancelar
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>
@endsection