{% extends "base.html" %}
{% load i18n %}

{% block head %}
    
<style>
    .status-badge.pending { background-color: #ffc107; color: black; }
    .status-badge.sent { background-color: #0dcaf0; color: white; }
    .status-badge.completed { background-color: #198754; color: white; }
    .status-badge.invoiced { background-color: #6f42c1; color: white; }
    .status-badge.paid { background-color: #28a745; color: white; }
    .status-badge.cancelled { background-color: #dc3545; color: white; }
</style>

{% endblock head %}

{% block content %}
<div class="container mt-5">
    <h2>{% translate "Détail du marché / contrat" %}</h2>
    <div class="card mt-4">
        <div class="card-header d-flex align-items-center">
            <strong>{% translate "Contrat" %} : </strong> <span class="ms-2">{{ contract.contract_number }}</span>
        </div>
        <div class="card-body">
            <p><strong>{% translate "Description" %} :</strong> {{ contract.description }}</p>
            <p><strong>{% translate "Prestataire" %} :</strong> {{ contract.company }}</p>

            <p><strong>{% translate "Début" %} :</strong> {{ contract.start_date|date:"d/m/Y" }}</p>
            <p><strong>{% translate "Fin" %} :</strong> {{ contract.end_date|date:"d/m/Y" }}</p>
            
            <p><strong>{% translate "Fonctionnaire dirigeant" %} :</strong> {{ contract.executive_officer }}</p>

            <p>
                <strong>{% translate "Notifications email" %} :</strong>
                {% if contract.send_email_notifications %}
                    {% translate "Oui" %}
                {% else %}
                    {% translate "Non" %}
                {% endif %}
            </p>

            <hr>
            
            <p>
                <strong>{% translate "Montant engagé" %} :</strong> {{ contract.committed_amount|default:"Non renseigné" }} €
            </p>

            <div class="mb-2 d-flex align-items-center gap-2">
                <div class="text-nowrap" style="min-width: 130px;"><strong>{% translate 'Montant "presté' %}</strong></div>
                <div class="text-nowrap">{{ contract.get_total_realized_amount|floatformat:2 }} €</div>
                <div class="flex-grow-1" style="max-width: 400px;">
                    <div class="progress" style="height: 8px;">
                        <div class="progress-bar bg-info"
                            role="progressbar"
                            style="width: {{ contract.realized_percent|floatformat:0 }}%;"
                            aria-valuenow="{{ contract.realized_percent|floatformat:0 }}"
                            aria-valuemin="0" aria-valuemax="100">
                        </div>
                    </div>
                </div>
                <div class="text-nowrap text-muted" style="width: 40px; text-align: right;">
                    {% if order.committed_amount %} {{ contract.realized_percent|floatformat:0 }} {% endif %}
                </div>
            </div>

            <div class="mb-2 d-flex align-items-center gap-2">
                <div class="text-nowrap" style="min-width: 130px;"><strong>{% translate "Montant validé" %}</strong></div>
                <div class="text-nowrap">{{ contract.get_total_validated_amount|floatformat:2 }} €</div>
                <div class="flex-grow-1" style="max-width: 400px;">
                    <div class="progress" style="height: 8px;">
                        <div class="progress-bar bg-success"
                            role="progressbar"
                            style="width: {{ contract.validated_percent|floatformat:0 }}%;"
                            aria-valuenow="{{ contract.validated_percent|floatformat:0 }}"
                            aria-valuemin="0" aria-valuemax="100">
                        </div>
                    </div>
                </div>
                <div class="text-nowrap text-muted" style="width: 40px; text-align: right;">
                    {{ contract.validated_percent|floatformat:0 }}%
                </div>
            </div>
            
            {% if is_intern %}
            <hr>
            <p>
                <strong>{% translate "Dossier interne" %} :</strong>
                <a href="{{ contract.internal_link.url }}" target="_blank" class="ms-2">
                    {% if contract.internal_link %} Evia {% endif %}
                </a>
            </p>
            {% endif %}
            
        </div>
        <div class="card-footer text-end">
            <a href="{% url 'contracts:contracts_index' %}" class="btn btn-secondary">{% translate "Retour à la liste" %}</a>
        </div>
    </div>


    <!-- Commandes -->
    <div class="card mt-4 mb-4">
        <div class="card-header">
            <h4>{% translate "Commandes" %}</h4>
        </div>
        <div class="card-body">
            <table id="interventions-table" class="table"
                data-height="550"
                data-pagination="true"
                data-page-size="25"
                data-click-to-select="true" >
                <thead>
                    <tr>
                        <th data-field="actions" data-width="100"></th>
                        <th data-field="code">{% translate "Code" %}</th>
                        <th data-field="title">{% translate "Titre" %}</th>
                        <th data-field="begin_date">{% translate "Début" %}</th>
                        <th data-field="statut">{% translate "Statut" %}</th>
                    </tr>
                    <tbody>
                        {% for order in contract.orders.all %}
                            <tr>
                                <td>
                                    <a href="{% url 'contracts:contracts_orders_detail' order_id=order.id %}" type="button" class="btn btn-sm btn-light detail-btn" data-id="${row.id}" data-bs-toggle="tooltip" title="Detail">
                                        <i class="bi bi-info-circle"></i>
                                    </a>
                                </td>
                                <td>{{ order.order_code }}</td>
                                <td>{{ order.description }}</td>
                                <td>{{ order.order_date|date:"d-m-Y" }}</td>
                                <td>
                                    <span class="badge rounded-pill status-badge {{ order.order_status }}">
                                        {{ order.get_order_status_display }}
                                    </span>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </thead>
            </table>
        </div>
    </div>

</div>
{% endblock %}

{% block script %}
<script>
try {
    const item = {
        type: 'contract',
        id: '{{ contract.id }}',
        title: 'Marché {{ contract.contract_number|escapejs }}',
        subtitle: '{{ contract.description|truncatechars:60|default:""|escapejs }}',
        company: '{{ contract.company.name|default:""|escapejs }}',
        url: window.location.pathname,
        timestamp: new Date().toISOString()
    };
    let h = JSON.parse(localStorage.getItem('loko_user_recent_history') || '[]');
    h = h.filter(x => !(x.type === item.type && String(x.id) === String(item.id)));
    h.unshift(item);
    if (h.length > 20) h = h.slice(0, 20);
    localStorage.setItem('loko_user_recent_history', JSON.stringify(h));
} catch(e) {}
</script>
{% endblock %}