{% extends "shared/frontend/base.html" %}

{% block title %}Salg Dashboard - BMC Hub{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-4">
        <div>
            <h1 class="h3 mb-1">💼 Salg Dashboard</h1>
            <p class="text-muted mb-0">Pipeline-overblik og opfølgning for salgsteamet</p>
        </div>
        <div class="d-flex gap-2">
            <a href="/opportunities" class="btn btn-outline-primary btn-sm">Åbn Opportunities</a>
            <a href="/" class="btn btn-outline-secondary btn-sm">Til hoveddashboard</a>
        </div>
    </div>

    <div class="alert alert-info border-0 shadow-sm mb-4" role="alert">
        Vælg standard-dashboard under <strong>Indstillinger → System</strong>. Dashboard åbnes altid fra roden <code>/</code>.
    </div>

    <div class="row g-3 mb-4">
        <div class="col-6 col-lg-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="small text-muted">Åbne opportunities</div>
                    <div class="h3 mb-0">{{ pipeline_stats.open_count or 0 }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="small text-muted">Lukkede opportunities</div>
                    <div class="h3 mb-0">{{ pipeline_stats.closed_count or 0 }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="small text-muted">Åben pipeline værdi</div>
                    <div class="h4 mb-0">{{ "{:,.0f}".format((pipeline_stats.open_value or 0)|float).replace(',', '.') }} kr.</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="small text-muted">Gns. sandsynlighed</div>
                    <div class="h3 mb-0">{{ "%.0f"|format((pipeline_stats.avg_probability or 0)|float) }}%</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0"><h5 class="mb-0">Seneste opportunities</h5></div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>ID</th>
                                    <th>Titel</th>
                                    <th>Kunde</th>
                                    <th>Stage</th>
                                    <th>Beløb</th>
                                    <th>Sandsynlighed</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                            {% for item in recent_opportunities %}
                                <tr>
                                    <td>#{{ item.id }}</td>
                                    <td>{{ item.titel }}</td>
                                    <td>{{ item.customer_name }}</td>
                                    <td>{{ item.pipeline_stage or '-' }}</td>
                                    <td>{{ "{:,.0f}".format((item.pipeline_amount or 0)|float).replace(',', '.') }} kr.</td>
                                    <td>{{ "%.0f"|format((item.pipeline_probability or 0)|float) }}%</td>
                                    <td><a href="/sag/{{ item.id }}" class="btn btn-sm btn-outline-primary">Åbn</a></td>
                                </tr>
                            {% else %}
                                <tr><td colspan="7" class="text-center text-muted py-4">Ingen opportunities fundet.</td></tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0"><h5 class="mb-0">Deadline næste 14 dage</h5></div>
                <div class="card-body">
                    {% for item in due_soon %}
                        <div class="border rounded p-2 mb-2">
                            <div class="fw-semibold">{{ item.titel }}</div>
                            <div class="small text-muted">{{ item.customer_name }} · {{ item.owner_name }}</div>
                            <div class="small text-muted">Deadline: {{ item.deadline.strftime('%d/%m/%Y') if item.deadline else '-' }}</div>
                            <a href="/sag/{{ item.id }}" class="btn btn-sm btn-outline-secondary mt-2">Åbn</a>
                        </div>
                    {% else %}
                        <p class="text-muted mb-0">Ingen deadlines de næste 14 dage.</p>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}