@extends('layouts.app')

@section('content')

<div class="max-w-4xl mx-auto bg-white rounded-[32px] shadow-xl border border-gray-100 p-8 md:p-12">
    
    <div class="mb-10 text-center md:text-left">
        <h2 class="text-3xl font-bold text-gray-800 tracking-tight text-nubank">Editar Tarefa</h2>
        <p class="text-gray-500 mt-2 text-sm">Atualize os detalhes da tarefa e o valor financeiro vinculado.</p>
    </div>

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

    <form action="{{ route('tarefas.update', $tarefa->id) }}" method="POST" class="space-y-8" x-data="{ valor: '{{ number_format($tarefa->valor ?? 0, 2, ',', '.') }}' }">
         @csrf @method('PUT')

        <!-- Card de Vínculo com Projeto -->
        <div class="bg-gray-50 p-6 rounded-[24px] border border-gray-100">
            <label class="block text-xs font-bold text-nubank mb-3 uppercase tracking-widest">Projeto Vinculado</label>
            <div class="relative">
                <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 appearance-none cursor-pointer text-gray-700" required>
                    @foreach($projetos as $projeto)
                        <option value="{{ $projeto->id }}" {{ $tarefa->id_projetos == $projeto->id ? 'selected' : '' }}>
                            {{ $projeto->nome }}
                        </option>
                    @endforeach
                </select>
                <div class="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none text-gray-400">
                    <i data-lucide="chevron-down" class="w-5 h-5"></i>
                </div>
            </div>
        </div>

        <!-- Card de Dados da Tarefa -->
        <div class="bg-white border border-gray-100 p-6 rounded-[24px] space-y-6 shadow-sm">
            <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
                
                <!-- Nome da Tarefa (Ocupa 8 colunas) -->
                <div class="md:col-span-8">
                    <label class="block text-sm font-semibold text-gray-600 mb-2 ml-1">Nome da Tarefa</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-gray-400">
                            <i data-lucide="type" class="w-5 h-5"></i>
                        </span>
                        <input type="text" name="nome" value="{{ old('nome', $tarefa->nome) }}" 
                               class="w-full pl-12 pr-4 py-4 bg-gray-50 border-none rounded-2xl focus:ring-2 focus:ring-purple-500 outline-none transition text-gray-700 font-medium" required>
                    </div>
                </div>

                <!-- Campo Valor com Máscara (Ocupa 4 colunas) -->
                <div class="md:col-span-4">
                    <label class="block text-sm font-semibold text-gray-600 mb-2 ml-1 text-nubank">Valor (R$)</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-nubank font-bold">R$</span>
                        <input type="text" 
                               name="valor_formatado" 
                               x-model="valor"
                               x-mask:dynamic="$money($input, ',', '.', 2)"
                               class="w-full pl-12 pr-4 py-4 bg-purple-50/50 border-none rounded-2xl focus:ring-2 focus:ring-purple-500 outline-none transition text-gray-700 font-bold" 
                               placeholder="0,00" required>
                    </div>
                </div>

                <!-- Data de Início -->
                <div class="md:col-span-6">
                    <label class="block text-sm font-semibold text-gray-600 mb-2 ml-1">Data de Início</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-gray-400">
                            <i data-lucide="calendar-days" class="w-5 h-5"></i>
                        </span>
                        <input type="date" name="dataInicio" value="{{ old('dataInicio', $tarefa->dataInicio) }}" 
                               class="w-full pl-12 pr-4 py-4 bg-gray-50 border-none rounded-2xl focus:ring-2 focus:ring-purple-500 outline-none transition text-gray-600" required>
                    </div>
                </div>

                <!-- Data Final -->
                <div class="md:col-span-6">
                    <label class="block text-sm font-semibold text-gray-600 mb-2 ml-1">Data Final (Entrega)</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-gray-400">
                            <i data-lucide="calendar-check" class="w-5 h-5"></i>
                        </span>
                        <input type="date" name="dataFim" value="{{ old('dataFim', $tarefa->dataFim) }}" 
                               class="w-full pl-12 pr-4 py-4 bg-gray-50 border-none rounded-2xl focus:ring-2 focus:ring-purple-500 outline-none transition text-gray-600">
                    </div>
                </div>
            </div>
        </div>

        <!-- Botões de Ação -->
        <div class="pt-6 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 shadow-purple-100 flex justify-center items-center gap-2">
                <i data-lucide="refresh-cw" class="w-5 h-5"></i> Salvar Alterações
            </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