@extends('layouts.app')

@section('content')
<div class="max-w-3xl mx-auto bg-white rounded-[32px] shadow-xl border border-gray-100 p-8 md:p-12">
    <div class="mb-10">
        <h2 class="text-3xl font-bold text-gray-800 tracking-tight">Editar Projeto</h2>
        <p class="text-gray-500 mt-2">Atualize as informações e o progresso do projeto abaixo.</p>
    </div>

    <form action="{{ route('projetos.update', $projeto->id) }}" method="POST" class="space-y-6">
        @csrf @method('PUT')

        <!-- Nome do Projeto -->
        <div>
            <label class="block text-sm font-semibold text-gray-600 mb-2 ml-1">Nome do Projeto</label>
            <input type="text" name="nome" value="{{ $projeto->nome }}" class="w-full p-4 bg-gray-50 border-none rounded-2xl focus:ring-2 focus:ring-purple-500 outline-none transition" required>
        </div>

        <!-- Descrição -->
        <div>
            <label class="block text-sm font-semibold text-gray-600 mb-2 ml-1">Descrição (opcional)</label>
            <textarea name="descricao" rows="3" class="w-full p-4 bg-gray-50 border-none rounded-2xl focus:ring-2 focus:ring-purple-500 outline-none transition">{{ $projeto->descricao }}</textarea>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Select de Responsável -->
            <div>
                <label class="block text-sm font-semibold text-gray-600 mb-2 ml-1">Responsável</label>
                <select name="Id_responsavel" class="w-full p-4 bg-gray-50 border-none rounded-2xl focus:ring-2 focus:ring-purple-500 outline-none transition appearance-none cursor-pointer" required>
                    @foreach($pessoas as $pessoa)
                        <option value="{{ $pessoa->id }}" {{ $projeto->Id_responsavel == $pessoa->id ? 'selected' : '' }}>
                            {{ $pessoa->nome }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Select de Prioridade -->
            <div>
                <label class="block text-sm font-semibold text-gray-600 mb-2 ml-1">Prioridade</label>
                <select name="prioridade" class="w-full p-4 bg-gray-50 border-none rounded-2xl focus:ring-2 focus:ring-purple-500 outline-none transition appearance-none cursor-pointer" required>
                    <option value="1" {{ $projeto->prioridade == 1 ? 'selected' : '' }}>Baixa</option>
                    <option value="2" {{ $projeto->prioridade == 2 ? 'selected' : '' }}>Média</option>
                    <option value="3" {{ $projeto->prioridade == 3 ? 'selected' : '' }}>Alta</option>
                </select>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- Select de Status -->
            <div>
                <label class="block text-sm font-semibold text-gray-600 mb-2 ml-1">Status</label>
                <select name="status" class="w-full p-4 bg-gray-50 border-none rounded-2xl focus:ring-2 focus:ring-purple-500 outline-none transition appearance-none cursor-pointer" required>
                    <option value="1" {{ $projeto->status == 1 ? 'selected' : '' }}>Planejamento</option>
                    <option value="2" {{ $projeto->status == 2 ? 'selected' : '' }}>Em Andamento</option>
                    <option value="3" {{ $projeto->status == 3 ? 'selected' : '' }}>Aguardando</option>
                </select>
            </div>

            <!-- Data Início -->
            <div>
                <label class="block text-sm font-semibold text-gray-600 mb-2 ml-1">Data Início</label>
                <input type="date" name="dataInicio" value="{{ $projeto->dataInicio }}" class="w-full p-4 bg-gray-50 border-none rounded-2xl focus:ring-2 focus:ring-purple-500 outline-none transition" required>
            </div>

            <!-- Data Fim -->
            <div>
                <label class="block text-sm font-semibold text-gray-600 mb-2 ml-1">Previsão de Entrega</label>
                <input type="date" name="dataFim" value="{{ $projeto->dataFim }}" class="w-full p-4 bg-gray-50 border-none rounded-2xl focus:ring-2 focus:ring-purple-500 outline-none transition">
            </div>
        </div>

        <!-- Botões de Ação -->
        <div class="flex flex-col md:flex-row items-center gap-4 pt-6">
            <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-lg shadow-purple-100 flex justify-center items-center gap-2">
                <i data-lucide="save" class="w-5 h-5"></i> Salvar Alterações
            </button>
            <a href="{{ route('projetos.index') }}" class="w-full md:w-auto px-8 py-4 text-gray-400 font-semibold hover:text-gray-600 transition text-center">
                Cancelar
            </a>
        </div>
    </form>
</div>
@endsection