{% extends "base.html" %}

{% block content %}
<div class="p-6 flex flex-col h-full overflow-y-auto">
    <div class="text-center py-8">
        <h1 class="text-3xl font-bold text-white tracking-tight">New Tour</h1>
        <p class="text-slate-400 mt-2">Set up your budget and companions</p>
    </div>

    <form method="POST" action="{{ url_for('setup') }}" class="space-y-4 flex-1">
        <div>
            <label class="block text-sm font-medium text-slate-300 mb-1">Tour Name</label>
            <input required name="name" type="text" placeholder="e.g. Cape Town Trip"
                class="w-full px-4 py-3 rounded-xl bg-slate-900 border border-slate-800 text-white focus:border-brand-500 outline-none">
        </div>

        <div class="grid grid-cols-4 gap-4">
             <div class="col-span-1">
                <label class="block text-sm font-medium text-slate-300 mb-1">Curr.</label>
                <input required name="currency" type="text" value="R"
                    class="w-full px-4 py-3 rounded-xl bg-slate-900 border border-slate-800 text-white focus:border-brand-500 outline-none text-center">
             </div>
             <div class="col-span-3">
                <label class="block text-sm font-medium text-slate-300 mb-1">Total Budget</label>
                <input required name="budget" type="number" placeholder="5000"
                    class="w-full px-4 py-3 rounded-xl bg-slate-900 border border-slate-800 text-white focus:border-brand-500 outline-none">
             </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-slate-300 mb-1">Start Date</label>
              <input required name="start_date" type="date"
                class="w-full px-4 py-3 rounded-xl bg-slate-900 border border-slate-800 text-white focus:border-brand-500 outline-none">
            </div>
            <div>
              <label class="block text-sm font-medium text-slate-300 mb-1">End Date</label>
              <input required name="end_date" type="date"
                class="w-full px-4 py-3 rounded-xl bg-slate-900 border border-slate-800 text-white focus:border-brand-500 outline-none">
            </div>
        </div>

        <div class="pt-4">
            <label class="block text-sm font-medium text-slate-300 mb-2">Travellers</label>
            <div id="people-list" class="space-y-2 mb-2">
                <div class="flex gap-2">
                    <input type="text" name="people[]" value="Me" readonly class="flex-1 px-4 py-3 rounded-xl bg-slate-800 border border-slate-700 text-slate-400 outline-none">
                </div>
            </div>
            <div class="flex gap-2">
                <input type="text" id="new-person" placeholder="Add Name" class="flex-1 px-4 py-3 rounded-xl bg-slate-900 border border-slate-800 text-white outline-none">
                <button type="button" onclick="addPerson()" class="bg-brand-600 text-white p-3 rounded-xl hover:bg-brand-500">
                    <i data-lucide="plus"></i>
                </button>
            </div>
        </div>

        <div class="pt-8 mt-auto pb-6">
            <button type="submit" class="w-full bg-brand-600 text-white py-3 rounded-xl font-bold hover:bg-brand-500 transition">Create Tour</button>
        </div>
    </form>
</div>

<script>
    function addPerson() {
        const input = document.getElementById('new-person');
        const name = input.value.trim();
        if(name) {
            const container = document.getElementById('people-list');
            const div = document.createElement('div');
            div.className = 'flex gap-2';
            div.innerHTML = `
                <input type="text" name="people[]" value="${name}" readonly class="flex-1 px-4 py-3 rounded-xl bg-slate-900 border border-slate-800 text-white outline-none">
                <button type="button" onclick="this.parentElement.remove()" class="text-red-400 p-3"><i data-lucide="trash-2"></i></button>
            `;
            container.appendChild(div);
            input.value = '';
            lucide.createIcons();
        }
    }
</script>
{% endblock %}