@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">Novo Projeto</h2>
        <p class="text-gray-500 mt-2">Preencha os detalhes para iniciar um novo fluxo de trabalho.</p>
    </div>

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

        <!-- 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" placeholder="Ex: Redesign do App" 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" placeholder="Breve resumo do objetivo..."></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>
                    <option value="" disabled selected>Selecione um cliente</option>
                    @foreach($pessoas as $pessoa)
                        <option value="{{ $pessoa->id }}">{{ $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">Baixa</option>
                    <option value="2" selected>Média</option>
                    <option value="3">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">Planejamento</option>
                    <option value="2">Em Andamento</option>
                    <option value="3">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" 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" 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="check-circle" class="w-5 h-5"></i> Criar Projeto
            </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