@extends('layouts.app')

@section('content')
<div class="max-w-5xl mx-auto bg-white rounded-[32px] shadow-xl border border-gray-100 p-8 md:p-12" 
     x-data="{ 
        items: [{ nome: 'Parcela 1', dataInicio: '', valor: '' }],
        
        addItem() { 
            const lastIndex = this.items.length - 1;
            const lastDate = this.items[lastIndex].dataInicio;
            let nextDate = '';

            if (lastDate) {
                let d = new Date(lastDate + 'T00:00:00');
                d.setMonth(d.getMonth() + 1); 
                nextDate = d.toISOString().split('T')[0];
            }

            this.items.push({ 
                nome: 'Parcela ' + (this.items.length + 1), 
                dataInicio: nextDate,
                valor: '' 
            });
        },

        removeItem(index) { 
            if(this.items.length > 1) this.items.splice(index, 1);
            this.items.forEach((item, i) => {
                if(item.nome.startsWith('Parcela')) item.nome = 'Parcela ' + (i + 1);
            });
        }
     }">
    
    <div class="mb-10 flex justify-between items-end">
        <div>
            <h2 class="text-3xl font-bold text-gray-800 tracking-tight text-nubank">Cadastro de tarefas</h2>
            <p class="text-gray-500 mt-2 text-sm">Gerencie parcelas e datas com intervalo automático de 30 dias.</p>
        </div>

        <button type="button" @click="addItem()" class="bg-nubank text-white px-5 py-3 rounded-2xl hover:bg-purple-800 transition flex items-center gap-2 font-bold shadow-lg shadow-purple-100">
            <i data-lucide="plus" class="w-5 h-5"></i> Tarefas
        </button>

        <!-- <a href="javascript:void(0)" 
        @click="addItem()" 
        class="cursor-pointer bg-nubank text-white px-5 py-3 rounded-2xl hover:bg-purple-800 transition flex items-center gap-2 font-bold shadow-lg shadow-purple-100">
            <i data-lucide="plus" class="w-5 h-5"></i> 
            Tarefa
        </a> -->

        
    </div>

    @if ($errors->any())
        <div class="bg-red-50 text-red-500 p-4 rounded-2xl mb-6">
            <ul class="text-sm font-medium">
                @foreach ($errors->all() as $error)
                    <li>• {{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('tarefas.store') }}" method="POST" class="space-y-6">
        @csrf

        <div class="bg-gray-50 p-6 rounded-[24px] border border-gray-100">
            <label class="block text-xs font-bold text-nubank mb-2 uppercase tracking-widest">Vincular ao Projeto</label>
            <select name="id_projetos" class="w-full p-4 bg-white border-none rounded-xl shadow-sm focus:ring-2 focus:ring-purple-500 outline-none" required>
                <option value="" disabled {{ !request()->get('id') ? 'selected' : '' }}>Escolha o projeto</option>
                @foreach($projetos as $projeto)
                    <option value="{{ $projeto->id }}" 
                        {{ request()->get('id') == $projeto->id ? 'selected' : '' }}>
                        {{ $projeto->nome }}
                    </option>
                @endforeach
            </select>
        </div>

        <div class="space-y-3">
            <template x-for="(item, index) in items" :key="index">
                <!-- ADICIONADO x-init PARA CORRIGIR OS ÍCONES NAS NOVAS LINHAS -->
                <div x-init="$nextTick(() => lucide.createIcons())" class="flex flex-col md:flex-row gap-4 items-end bg-white border border-gray-50 p-4 rounded-2xl hover:shadow-md transition duration-300">
                    
                    <div class="flex-1 w-full text-left">
                        <label class="block text-xs font-bold text-gray-400 mb-2 uppercase ml-1">Nome Tarefa</label>
                        <input type="text" :name="`tarefas[${index}][nome]`" x-model="item.nome" 
                               class="w-full p-3 bg-gray-50 border-none rounded-xl focus:ring-2 focus:ring-purple-400 outline-none text-gray-700 font-medium" required>
                    </div>

                    <div class="w-full md:w-48 text-left">
                        <label class="block text-xs font-bold text-gray-400 mb-2 uppercase ml-1">Valor (R$)</label>
                        <input type="number" step="0.01" :name="`tarefas[${index}][valor]`" x-model="item.valor" placeholder="0,00"
                               class="w-full p-3 bg-gray-50 border-none rounded-xl focus:ring-2 focus:ring-purple-400 outline-none text-gray-700 font-medium" required>
                    </div>

                    <div class="w-full md:w-48 text-left">
                        <label class="block text-xs font-bold text-gray-400 mb-2 uppercase ml-1">Data Início</label>
                        <input type="date" :name="`tarefas[${index}][dataInicio]`" x-model="item.dataInicio" 
                               class="w-full p-3 bg-gray-50 border-none rounded-xl focus:ring-2 focus:ring-purple-400 outline-none text-gray-600 font-medium" required>
                    </div>

                    <div class="flex items-center">
                        <button type="button" @click="removeItem(index)" x-show="items.length > 1" class="p-3 text-red-400 hover:text-red-600 hover:bg-red-50 rounded-xl transition mb-0.5">
                            <i data-lucide="trash-2" class="w-5 h-5"></i>
                        </button>
                    </div>
                </div>
            </template>
        </div>

        <div class="pt-8 border-t border-gray-100 flex flex-col md:flex-row items-center gap-4">
            <button type="submit" class="w-full md:flex-1 bg-nubank text-white font-bold py-4 rounded-2xl hover:bg-purple-800 transition shadow-xl flex justify-center items-center gap-2">
                <i data-lucide="save" class="w-5 h-5"></i> Confirmar Lançamento
            </button>
            <a href="{{ route('tarefas.index') }}" class="w-full md:w-auto px-8 py-4 text-gray-400 font-semibold hover:text-gray-600 text-center transition">Cancelar</a>
        </div>
    </form>
</div>
@endsection