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

{% block title %}{{ agreement.agreement_number }} - Fastpris Aftale{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/fixed-price-agreements">Fastpris Aftaler</a></li>
                    <li class="breadcrumb-item active">{{ agreement.agreement_number }}</li>
                </ol>
            </nav>
            <h1 class="h3 mb-0">📋 {{ agreement.agreement_number }}</h1>
            <p class="text-muted">{{ agreement.customer_name }}</p>
        </div>
        <div class="col-auto">
            {% if agreement.status == 'active' %}
            <span class="badge bg-success fs-6">Aktiv</span>
            {% elif agreement.status == 'suspended' %}
            <span class="badge bg-warning fs-6">Suspenderet</span>
            {% elif agreement.status == 'expired' %}
            <span class="badge bg-danger fs-6">Udløbet</span>
            {% elif agreement.status == 'cancelled' %}
            <span class="badge bg-secondary fs-6">Annulleret</span>
            {% endif %}
        </div>
    </div>

    <!-- Overview Cards -->
    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <h6 class="text-muted mb-2">Månedlige Timer</h6>
                    <h3 class="mb-0">{{ '%.0f'|format(agreement.monthly_hours or 0) }} t</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <h6 class="text-muted mb-2">Timepris</h6>
                    <h3 class="mb-0">{{ '%.0f'|format(agreement.hourly_rate or 0) }} kr</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <h6 class="text-muted mb-2">Denne Måned</h6>
                    <h3 class="mb-0">{{ '%.1f'|format(agreement.current_used_hours or 0) }} / {{ '%.0f'|format(agreement.monthly_hours or 0) }} t</h3>
                    <small class="text-muted">{{ '%.1f'|format(agreement.current_remaining_hours or 0) }}t tilbage</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <h6 class="text-muted mb-2">Binding</h6>
                    <h3 class="mb-0">{{ agreement.binding_months }} mdr</h3>
                    {% if agreement.binding_end_date %}
                    <small class="text-muted">Til {{ agreement.binding_end_date }}</small>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Tabs -->
    <ul class="nav nav-tabs mb-3" role="tablist">
        <li class="nav-item">
            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#details-tab">Detaljer</button>
        </li>
        <li class="nav-item">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#periods-tab">
                Perioder <span class="badge bg-secondary">{{ periods|length }}</span>
            </button>
        </li>
        <li class="nav-item">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#sager-tab">
                Sager <span class="badge bg-secondary">{{ sager|length }}</span>
            </button>
        </li>
        <li class="nav-item">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#time-tab">
                Tidsregistreringer <span class="badge bg-secondary">{{ time_entries|length }}</span>
            </button>
        </li>
    </ul>

    <!-- Tab Content -->
    <div class="tab-content">
        <!-- Details Tab -->
        <div class="tab-pane fade show active" id="details-tab">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h5 class="mb-3">Aftale Information</h5>
                            <table class="table table-sm">
                                <tr>
                                    <th width="40%">Kunde ID:</th>
                                    <td>{{ agreement.customer_id }}</td>
                                </tr>
                                <tr>
                                    <th>Kunde:</th>
                                    <td>{{ agreement.customer_name }}</td>
                                </tr>
                                <tr>
                                    <th>Start Dato:</th>
                                    <td>{{ agreement.start_date }}</td>
                                </tr>
                                {% if agreement.end_date %}
                                <tr>
                                    <th>Slut Dato:</th>
                                    <td>{{ agreement.end_date }}</td>
                                </tr>
                                {% endif %}
                                <tr>
                                    <th>Oprettet:</th>
                                    <td>{{ agreement.created_at }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <h5 class="mb-3">Priser & Vilkår</h5>
                            <table class="table table-sm">
                                <tr>
                                    <th width="40%">Månedlige Timer:</th>
                                    <td>{{ '%.0f'|format(agreement.monthly_hours or 0) }} timer</td>
                                </tr>
                                <tr>
                                    <th>Normal Timepris:</th>
                                    <td>{{ '%.0f'|format(agreement.hourly_rate or 0) }} kr</td>
                                </tr>
                                <tr>
                                    <th>Overtid Timepris:</th>
                                    <td>{{ '%.0f'|format(agreement.overtime_rate or 0) }} kr {% if agreement.overtime_rate and agreement.hourly_rate %}({{ '%.0f'|format((agreement.overtime_rate / agreement.hourly_rate - 1) * 100) }}%){% endif %}</td>
                                </tr>
                                <tr>
                                    <th>Afrunding:</th>
                                    <td>{% if agreement.rounding_minutes == 0 %}Ingen{% else %}{{ agreement.rounding_minutes }} min{% endif %}</td>
                                </tr>
                                <tr>
                                    <th>Bindingsperiode:</th>
                                    <td>{{ agreement.binding_months }} måneder</td>
                                </tr>
                                <tr>
                                    <th>Opsigelsesfrist:</th>
                                    <td>{{ agreement.notice_period_days }} dage</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Periods Tab -->
        <div class="tab-pane fade" id="periods-tab">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Periode</th>
                                    <th>Status</th>
                                    <th>Brugte Timer</th>
                                    <th>Resterende Timer</th>
                                    <th>Overtid</th>
                                    <th>Månedlig Værdi</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for period in periods %}
                                <tr>
                                    <td>
                                        <strong>{{ period.period_start }}</strong> til {{ period.period_end }}
                                    </td>
                                    <td>
                                        {% if period.status == 'active' %}
                                        <span class="badge bg-success">Aktiv</span>
                                        {% elif period.status == 'pending_approval' %}
                                        <span class="badge bg-warning">⚠️ Overtid</span>
                                        {% elif period.status == 'ready_to_bill' %}
                                        <span class="badge bg-info">Klar til faktura</span>
                                        {% elif period.status == 'billed' %}
                                        <span class="badge bg-secondary">Faktureret</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ '%.1f'|format(period.used_hours or 0) }}t</td>
                                    <td>{{ '%.1f'|format(period.remaining_hours or 0) }}t</td>
                                    <td>
                                        {% if period.overtime_hours and period.overtime_hours > 0 %}
                                        <span class="text-danger">+{{ '%.1f'|format(period.overtime_hours) }}t</span>
                                        {% else %}
                                        <span class="text-muted">-</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ '%.0f'|format(period.base_amount or 0) }} kr</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sager Tab -->
        <div class="tab-pane fade" id="sager-tab">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    {% if sager %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Sag ID</th>
                                    <th>Titel</th>
                                    <th>Status</th>
                                    <th>Oprettet</th>
                                    <th>Handlinger</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for sag in sager %}
                                <tr>
                                    <td><strong>#{{ sag.id }}</strong></td>
                                    <td>{{ sag.titel }}</td>
                                    <td>
                                        {% if sag.status == 'open' %}
                                        <span class="badge bg-success">Åben</span>
                                        {% elif sag.status == 'in_progress' %}
                                        <span class="badge bg-primary">I gang</span>
                                        {% elif sag.status == 'closed' %}
                                        <span class="badge bg-secondary">Lukket</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ sag.created_at.strftime('%Y-%m-%d') if sag.created_at else '-' }}</td>
                                    <td>
                                        <a href="/sag/{{ sag.id }}" class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-eye"></i> Vis
                                        </a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-center text-muted py-5">
                        <i class="bi bi-inbox fs-1 mb-3"></i>
                        <p>Ingen sager endnu</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Time Entries Tab -->
        <div class="tab-pane fade" id="time-tab">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    {% if time_entries %}
                    <div class="table-responsive">
                        <table class="table table-sm table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Dato</th>
                                    <th>Sag</th>
                                    <th>Beskrivelse</th>
                                    <th>Timer</th>
                                    <th>Afrundet</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for entry in time_entries %}
                                <tr>
                                    <td>{{ entry.created_at.strftime('%Y-%m-%d') if entry.created_at else '-' }}</td>
                                    <td>
                                        {% if entry.sag_id %}
                                        <a href="/sag/{{ entry.sag_id }}">#{{ entry.sag_id }}</a>
                                        {% if entry.sag_titel %}
                                        <br><small class="text-muted">{{ entry.sag_titel[:30] }}</small>
                                        {% endif %}
                                        {% else %}
                                        <span class="text-muted">-</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <small>{{ entry.note[:50] if entry.note else '-' }}</small>
                                    </td>
                                    <td>{{ '%.2f'|format(entry.approved_hours or entry.original_hours or 0) }}t</td>
                                    <td>
                                        {% if entry.rounded_to %}
                                        <span class="badge bg-info">{{ entry.rounded_to }} min</span>
                                        {% else %}
                                        <span class="text-muted">-</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-center text-muted py-5">
                        <i class="bi bi-clock fs-1 mb-3"></i>
                        <p>Ingen tidsregistreringer endnu</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}