{% extends "base.html" %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="mb-5">
            <div class="progress" style="height: 4px;">
                <div class="progress-bar bg-primary" style="--p: {{ progress }}%; width: var(--p);"></div>
            </div>
        </div>

        <div class="card border-0 shadow-sm p-4">
            <h2 class="h4 fw-bold mb-4">Step 2: Test Period</h2>

            <div class="alert alert-info border-0 mb-4">
                <i class="bi bi-info-circle-fill me-2"></i>
                <strong>Automatic Benchmark:</strong> The benchmark period will be automatically calculated as the same
                time period from 1 year prior to your test dates. For example, if your test runs from Jan 1, 2026 to Mar
                1, 2026, the benchmark will be Jan 1, 2025 to Mar 1, 2025.
            </div>

            <form method="POST">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

                <div class="row g-4">
                    <div class="col-md-12">
                        <div class="p-3 bg-primary bg-opacity-10 rounded text-center mb-3">
                            <span class="badge bg-primary mb-2">TEST PERIOD</span>
                            <h5 class="fw-bold text-primary">When does the strategy go live?</h5>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label small text-muted text-uppercase fw-bold">Start Date</label>
                            <input type="date" name="post_start" class="form-control form-control-lg" required
                                value="{{ case_study.post_start_date }}">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label small text-muted text-uppercase fw-bold">End Date</label>
                            <input type="date" name="post_end" class="form-control form-control-lg" required
                                value="{{ case_study.post_end_date }}">
                        </div>
                    </div>
                </div>

                <!-- Benchmark Preview -->
                <div class="row g-4 mt-2">
                    <div class="col-12">
                        <div class="p-3 bg-light rounded border">
                            <div class="d-flex align-items-center mb-2">
                                <span class="badge bg-secondary me-2">BENCHMARK</span>
                                <span class="small text-muted">Auto-calculated (1 year prior)</span>
                            </div>
                            <p class="mb-0 small text-muted">
                                {% if case_study.benchmark_start_date and case_study.benchmark_end_date %}
                                Current: {{ case_study.benchmark_start_date }} <i class="bi bi-arrow-right mx-1"></i> {{
                                case_study.benchmark_end_date }}
                                {% else %}
                                Will be calculated when you proceed
                                {% endif %}
                            </p>
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-between mt-4">
                    <a href="{{ url_for('wizard.step', id=case_study.id, step=1) }}"
                        class="btn btn-outline-secondary">Back</a>
                    <button type="submit" class="btn btn-primary px-5">Next Step <i
                            class="bi bi-arrow-right ms-2"></i></button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}