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

{% block head %}
<link href="{% static 'common/maplibre-gl.css' %}" rel="stylesheet">
{% endblock head %}

{% block main %}
<div id="main">
<div class="d-flex flex-column sidebar pe-3" id="sidebar">
    <a href="{% url 'authorizations:authorization_list' %}" class="nav-link d-flex align-items-center p-2">
        <i class="bi bi-arrow-left" data-bs-toggle="tooltip" data-bs-placement="right" title="{% translate 'Retour à la liste' %}"></i>
        <span class="ms-2 text d-none d-md-inline">{% translate "Retour" %}</span>
    </a>
</div>

<div id="content-wrapper">
<div class="container-fluid py-3">

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h1 class="h4 mb-0">
            <i class="bi bi-file-earmark-text me-2"></i>
            {% translate "Demande" %} {{ authorization.code|default:authorization.pk }}
        </h1>
        <div class="d-flex gap-2">
            <a href="{% url 'authorizations:authorization_list' %}" class="btn btn-sm btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> {% translate "Retour" %}
            </a>
        </div>
    </div>

    {% if messages %}
    <div class="row mb-3">
        <div class="col-12">
            {% for message in messages %}
            <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}{{ message.tags }}{% endif %} alert-dismissible fade show mb-2" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <div class="row g-3">

        <!-- Left column: metadata -->
        <div class="col-lg-5">

            <!-- Status & type -->
            <div class="card shadow-sm mb-3">
                <div class="card-header fw-semibold">{% translate "Informations générales" %}</div>
                <div class="card-body">
                    <dl class="row mb-0">
                        <dt class="col-5">{% translate "Code" %}</dt>
                        <dd class="col-7">{{ authorization.code|default:"—" }}</dd>

                        <dt class="col-5">{% translate "Statut" %}</dt>
                        <dd class="col-7">
                            {% if authorization.status == 1 %}
                                <span class="badge bg-warning text-dark">{{ authorization.get_status_display }}</span>
                            {% elif authorization.status == 2 %}
                                <span class="badge bg-info text-dark">{{ authorization.get_status_display }}</span>
                            {% elif authorization.status == 3 %}
                                <span class="badge bg-success">{{ authorization.get_status_display }}</span>
                            {% elif authorization.status == 4 %}
                                <span class="badge bg-danger">{{ authorization.get_status_display }}</span>
                            {% else %}
                                <span class="badge bg-light text-dark">{{ authorization.get_status_display }}</span>
                            {% endif %}
                        </dd>

                        <dt class="col-5">{% translate "Type" %}</dt>
                        <dd class="col-7">{{ authorization.get_type_display }}</dd>

                        <dt class="col-5">{% translate "Créé le" %}</dt>
                        <dd class="col-7">{{ authorization.creation_date|date:"d/m/Y H:i" }}</dd>

                        <dt class="col-5">{% translate "Mis à jour" %}</dt>
                        <dd class="col-7">{{ authorization.update_date|date:"d/m/Y H:i" }}</dd>

                        {% if authorization.agent %}
                        <dt class="col-5">{% translate "Agent" %}</dt>
                        <dd class="col-7">{{ authorization.agent }}</dd>
                        {% endif %}
                    </dl>
                </div>
            </div>

            <!-- Demande -->
            <div class="card shadow-sm mb-3">
                <div class="card-header fw-semibold">{% translate "Description de la demande" %}</div>
                <div class="card-body">
                    <p class="mb-2">{{ authorization.description }}</p>
                    <dt>{% translate "Localisation" %}</dt>
                    <dd>{{ authorization.location }}</dd>
                </div>
            </div>

            <!-- Demandeur -->
            <div class="card shadow-sm mb-3">
                <div class="card-header fw-semibold">{% translate "Demandeur" %}</div>
                <div class="card-body">
                    <dl class="row mb-0">
                        <dt class="col-5">{% translate "Nom" %}</dt>
                        <dd class="col-7">{{ authorization.applicant_name }}</dd>

                        <dt class="col-5">{% translate "Email" %}</dt>
                        <dd class="col-7">
                            <a href="mailto:{{ authorization.applicant_email }}">{{ authorization.applicant_email }}</a>
                        </dd>

                        <dt class="col-5">{% translate "Adresse" %}</dt>
                        <dd class="col-7">{{ authorization.applicant_address }}</dd>

                        {% if authorization.applicant_enterprise %}
                        <dt class="col-5">{% translate "Entreprise" %}</dt>
                        <dd class="col-7">{{ authorization.applicant_enterprise }}</dd>
                        {% endif %}
                    </dl>
                </div>
            </div>

            <!-- Dates -->
            {% if authorization.dates.all %}
            <div class="card shadow-sm mb-3">
                <div class="card-header fw-semibold">{% translate "Dates d'occupation" %}</div>
                <div class="card-body p-0">
                    <table class="table table-sm mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>{% translate "Début" %}</th>
                                <th>{% translate "Fin" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for d in authorization.dates.all %}
                            <tr>
                                <td>{{ d.begin_date|date:"d/m/Y H:i" }}</td>
                                <td>{{ d.end_date|date:"d/m/Y H:i" }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            {% endif %}

            <!-- Documents -->
            <div class="card shadow-sm mb-3">
                <div class="card-header fw-semibold">{% translate "Documents joints" %}</div>
                {% if authorization.documents.all %}
                <ul class="list-group list-group-flush">
                    {% for doc in authorization.documents.all %}
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <span class="text-truncate me-2" title="{{ doc.description }}">
                            <i class="bi bi-file-earmark me-2"></i>{{ doc.description }}
                        </span>
                        <a href="{{ doc.file.url }}" class="btn btn-sm btn-outline-secondary" target="_blank" rel="noopener">
                            <i class="bi bi-download"></i>
                        </a>
                    </li>
                    {% endfor %}
                </ul>
                {% else %}
                <div class="card-body py-3 text-center text-muted small">
                    {% translate "Aucun document joint." %}
                </div>
                {% endif %}
                <div class="card-footer bg-light">
                    <form method="post" action="" enctype="multipart/form-data" class="row g-2 align-items-end">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="add_document">
                        <div class="col-12 col-sm-6">
                            <label for="docDescription" class="form-label small mb-1 fw-semibold text-muted" style="font-size: 0.75rem;">{% translate "Description du document" %}</label>
                            <input type="text" name="description" id="docDescription" class="form-control form-control-sm" required placeholder="{% translate 'Ex: Arrêté de police' %}">
                        </div>
                        <div class="col-9 col-sm-4">
                            <label for="docFile" class="form-label small mb-1 fw-semibold text-muted" style="font-size: 0.75rem;">{% translate "Fichier" %}</label>
                            <input type="file" name="file" id="docFile" class="form-control form-control-sm" required>
                        </div>
                        <div class="col-3 col-sm-2 text-end">
                            <button type="submit" class="btn btn-sm btn-primary w-100" title="{% translate 'Ajouter' %}">
                                <i class="bi bi-plus-lg"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Traitement de la demande -->
            <div class="card shadow-sm mb-3" style="border: 1px solid rgba(47, 62, 139, 0.15);">
                <div class="card-header fw-semibold bg-light text-primary d-flex justify-content-between align-items-center">
                    <span><i class="bi bi-gear-fill me-2"></i>{% translate "Traitement de la demande" %}</span>
                </div>
                <div class="card-body">
                    <form method="post" action="" class="row g-3">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="update_properties">
                        <div class="col-12">
                            <label for="statusSelect" class="form-label small fw-semibold text-muted mb-1">{% translate "Modifier le statut" %}</label>
                            <select name="status" id="statusSelect" class="form-select form-select-sm">
                                {% for status_val, status_lbl in status_choices %}
                                <option value="{{ status_val }}" {% if authorization.status == status_val %}selected{% endif %}>
                                    {{ status_lbl }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-12">
                            <label for="agentCommentText" class="form-label small fw-semibold text-muted mb-1">{% translate "Commentaire agent" %}</label>
                            <textarea name="agent_comment" id="agentCommentText" class="form-control form-control-sm" rows="3" placeholder="{% translate 'Saisir un commentaire ou des notes...' %}">{{ authorization.agent_comment|default:"" }}</textarea>
                        </div>
                        <div class="col-12 text-end">
                            <button type="submit" class="btn btn-sm btn-primary">
                                <i class="bi bi-check-lg me-1"></i>{% translate "Enregistrer le traitement" %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>

        </div>

        <!-- Right column: map -->
        <div class="col-lg-7">
            <div class="card shadow-sm">
                <div class="card-header fw-semibold">{% translate "Localisation" %}</div>
                <div class="card-body p-0">
                    <div id="detail-map" style="height: 500px; border-radius: 0 0 0.375rem 0.375rem;"></div>
                </div>
            </div>
        </div>

    </div><!-- /row -->

</div><!-- /container -->
</div><!-- /content-wrapper -->
</div><!-- /main -->

<script src="{% static 'common/maplibre-gl.js' %}"></script>
<script>
(function () {
    const geomJson = {{ authorization.geom.geojson|safe }};
    const map = new maplibregl.Map({
        container: 'detail-map',
        style: window.MAP_STYLE_LIGHT,
        center: [4.3517, 50.8503],
        zoom: 12,
    });
    map.addControl(new maplibregl.NavigationControl(), 'top-left');
    map.on('load', function () {
        map.addSource('auth-geom', { type: 'geojson', data: geomJson });
        map.addLayer({ id: 'auth-fill', type: 'fill', source: 'auth-geom',
            paint: { 'fill-color': '#0d6efd', 'fill-opacity': 0.25 } });
        map.addLayer({ id: 'auth-line', type: 'line', source: 'auth-geom',
            paint: { 'line-color': '#0d6efd', 'line-width': 2 } });

        // Fit bounds
        const coords = [];
        if (geomJson.type === 'MultiPolygon') {
            geomJson.coordinates.forEach(poly => poly[0].forEach(c => coords.push(c)));
        } else if (geomJson.type === 'Polygon') {
            geomJson.coordinates[0].forEach(c => coords.push(c));
        }
        if (coords.length > 1) {
            const lngs = coords.map(c => c[0]);
            const lats = coords.map(c => c[1]);
            map.fitBounds(
                [[Math.min(...lngs), Math.min(...lats)], [Math.max(...lngs), Math.max(...lats)]],
                { padding: 60, duration: 0 }
            );
        }
    });
})();
</script>
{% endblock main %}