{% extends 'base.html' %}

{% block title %}Create Business from Idea - Bizness Navigator{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto space-y-8">
    <!-- Breadcrumbs -->
    <nav class="flex items-center space-x-2 text-sm text-gray-500">
        <a href="{% url 'dashboard' %}" class="hover:text-gray-900 transition">Dashboard</a>
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
        </svg>
        <a href="{% url 'business_idea_detail' idea.id %}" class="hover:text-gray-900 transition">{{ idea.title }}</a>
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
        </svg>
        <span class="text-gray-900 font-medium">Create Business</span>
    </nav>

    <!-- Header -->
    <div class="text-center space-y-4">
        <h1 class="text-4xl font-bold text-gray-900 tracking-tight">
            Create Business from Idea
        </h1>
        <p class="text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
            Transform your AI-generated business idea into a tracked business project.
        </p>
    </div>

    <!-- Idea Summary -->
    <div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl border border-blue-200 p-8">
        <h2 class="text-lg font-semibold text-gray-900 mb-4">Selected Idea</h2>
        <div class="space-y-3">
            <div>
                <h3 class="text-xl font-bold text-gray-900">{{ idea.title }}</h3>
                {% if idea.category %}
                <p class="text-sm text-gray-600 mt-1">{{ idea.category.name }}</p>
                {% endif %}
            </div>

            <div class="grid md:grid-cols-3 gap-4 pt-4">
                <div>
                    <p class="text-sm text-gray-600 mb-1">Required Investment</p>
                    <p class="text-lg font-semibold text-gray-900">{{ idea.investment_required|floatformat:0 }} UZS</p>
                </div>
                <div>
                    <p class="text-sm text-gray-600 mb-1">Monthly Profit</p>
                    <p class="text-lg font-semibold text-green-600">{{ idea.potential_profit|floatformat:0 }} UZS</p>
                </div>
                <div>
                    <p class="text-sm text-gray-600 mb-1">Payback Period</p>
                    <p class="text-lg font-semibold text-gray-900">{{ idea.payback_period }} months</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Create Business Form -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="p-8 md:p-12">
            <form method="POST" class="space-y-8">
                {% csrf_token %}

                <!-- Business Name -->
                <div class="space-y-3">
                    <label for="name" class="block text-sm font-semibold text-gray-900">
                        Business Name
                    </label>
                    <input
                        type="text"
                        id="name"
                        name="name"
                        value="{{ idea.title }}"
                        class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition text-gray-900"
                        required
                    >
                    <p class="text-sm text-gray-500">
                        You can customize the name for your business
                    </p>
                </div>

                <!-- Initial Capital -->
                <div class="space-y-3">
                    <label for="initial_capital" class="block text-sm font-semibold text-gray-900">
                        Initial Capital (UZS)
                    </label>
                    <input
                        type="number"
                        id="initial_capital"
                        name="initial_capital"
                        value="{{ idea.investment_required|floatformat:0 }}"
                        min="0"
                        step="100000"
                        class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition text-gray-900"
                        required
                    >
                    <p class="text-sm text-gray-500">
                        Adjust if your actual capital differs from the recommendation
                    </p>
                </div>

                <!-- Description (Pre-filled) -->
                <div class="space-y-3">
                    <label for="description" class="block text-sm font-semibold text-gray-900">
                        Description
                    </label>
                    <textarea
                        id="description"
                        name="description"
                        rows="4"
                        class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition text-gray-900 resize-none"
                        readonly
                    >{{ idea.description }}</textarea>
                    <p class="text-sm text-gray-500">
                        This is imported from your AI-generated idea
                    </p>
                </div>

                <!-- Submit Buttons -->
                <div class="flex gap-4 pt-6">
                    <a href="{% url 'business_idea_detail' idea.id %}" class="flex-1 inline-flex items-center justify-center px-6 py-4 bg-white hover:bg-gray-50 text-gray-900 font-semibold rounded-lg border border-gray-300 transition">
                        Cancel
                    </a>
                    <button
                        type="submit"
                        class="flex-1 inline-flex items-center justify-center px-6 py-4 bg-gray-900 hover:bg-gray-800 text-white font-semibold rounded-lg transition-all duration-200 transform hover:scale-[1.02]"
                    >
                        Create Business
                    </button>
                </div>
            </form>
        </div>

        <!-- Info Panel -->
        <div class="bg-gray-50 border-t border-gray-200 px-8 md:px-12 py-6">
            <div class="flex items-start space-x-3">
                <svg class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <div class="text-sm text-gray-600 space-y-1">
                    <p class="font-medium text-gray-900">What happens next?</p>
                    <p>After creating the business, you'll be able to track its performance, generate financial forecasts, and manage all aspects from your dashboard.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Idea Details Preview -->
    <div class="grid md:grid-cols-2 gap-6">
        {% if idea.trends_data.risks %}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <h3 class="font-semibold text-gray-900 mb-4">Key Risks</h3>
            <ul class="space-y-2">
                {% for risk in idea.trends_data.risks|slice:":3" %}
                <li class="text-sm text-gray-700 flex items-start">
                    <svg class="w-4 h-4 text-red-500 mt-0.5 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                    </svg>
                    <span>{{ risk }}</span>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}

        {% if idea.trends_data.opportunities %}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <h3 class="font-semibold text-gray-900 mb-4">Opportunities</h3>
            <ul class="space-y-2">
                {% for opp in idea.trends_data.opportunities|slice:":3" %}
                <li class="text-sm text-gray-700 flex items-start">
                    <svg class="w-4 h-4 text-green-500 mt-0.5 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <span>{{ opp }}</span>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}