{% extends 'controls/controls_base_mobile.html' %}
{% load i18n %}
{% load static %}

{% block custom_style %}
<style>
    .optional-field input,
    .optional-field select,
    .optional-field textarea {
        border: 1px dashed #6c757d !important; /* Bordure grise en pointillés */
    }

    .status-badge {
        min-width: 80px;
        cursor: pointer;
    }

    #map {
        height: 40vh; /* 40% de l'écran pour la carte */
    }

    /***** Action bar mobile *****/
    :root {
    --action-bar-h: 220px; /* hauteur par défaut (2 gros boutons) */
    }

    .action-bar {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 16px rgba(0,0,0,.08);
    z-index: 1060;
    }

    .content-scroll{
    padding-bottom: calc(var(--action-bar-h) + env(safe-area-inset-bottom, 0px)) !important;
    }

    #qty-editor, .form-content{
    height: 100dvh;          /* mieux que 100vh sur mobile */
    display: flex;
    flex-direction: column;
    }
</style>
{% endblock %}

{% block top_navbar %}
    <button onclick="window.history.back()" class="btn btn-outline-secondary">
        <i class="bi bi-chevron-left"></i>
    </button>
    {% if mode == "update" %}
        <span class="navbar-brand mx-auto fw-bold">{% translate "Remarque" %} {{ remark.remark_number }}</span>
    {% else %}
    <span class="navbar-brand mx-auto fw-bold">{% translate "Nouvelle Remarque" %}</span>
    {% endif %}
    <div></div> <!-- Placeholder pour équilibrer la flèche -->
{% endblock %}

{% block content %}
    <h2 class="text-center my-4">{% translate "Remarque" %} {{ remark.remark_number }}</h2>

    {% include "controls/remark_form_content.html" %}
{% endblock %}

{% block modals %}
    <!-- Modal caméra Canvas (mode continu) -->
    <div class="modal fade" id="cameraModal" tabindex="-1" aria-labelledby="cameraModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen-sm-down modal-dialog-centered">
            <div class="modal-content bg-dark text-white">
                <div class="modal-header border-0">
                    <h5 class="modal-title" id="cameraModalLabel">
                        <i class="bi bi-camera-video"></i> {% translate "Caméra" %}
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}" id="cameraModalCloseBtn"></button>
                </div>
                <div class="modal-body d-flex flex-column justify-content-between p-2">
                    <div class="text-center mb-2">
                        <div class="position-relative" style="border-radius: 0.5rem; overflow: hidden;">
                            <video id="cameraPreview" class="w-100" playsinline autoplay muted></video>
                            <div id="cameraFlashOverlay" style="position: absolute; inset: 0; background: rgba(255, 255, 255, 0.9); opacity: 0; pointer-events: none; transition: opacity 120ms ease-out; z-index: 2;"></div>
                            <canvas id="cameraCanvas" class="d-none"></canvas>
                        </div>
                    </div>
                    <div id="cameraStatus" class="small text-center text-muted mb-2"></div>
                    <div class="d-flex justify-content-between align-items-center gap-2 mb-3">
                        <button type="button" class="btn btn-outline-light flex-fill" id="cameraStopBtn">
                            <i class="bi bi-x-circle"></i> {% translate "Terminer" %}
                        </button>
                        <button type="button" class="btn btn-outline-light px-3" id="cameraRotateBtn" title="{% translate 'Pivoter la vue de 90°' %}">
                            <i class="bi bi-arrow-clockwise fs-5"></i>
                        </button>
                        <button type="button" class="btn btn-primary flex-fill" id="cameraCaptureBtn">
                            <i class="bi bi-camera-fill"></i> {% translate "Capturer" %}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}



{% block buttom_navbar %}
{% endblock %}

{% block script %}
<!-- jQuery 3.7.1 (local) -->
<script src="{% static 'common/jquery.min.js' %}"></script>


{{ plans_data|json_script:"plans-data" }}
{{ remarks_data|json_script:"remarks-data" }}

<script>

const plansData = JSON.parse(document.getElementById('plans-data').textContent);
const remarksData = JSON.parse(document.getElementById('remarks-data').textContent);
const autocomplete_contract_posts_url = "{% url 'contracts:autocomplete-posts' %}";

let current_reference_plan;
{% if remark.reference_plan %}
    current_reference_plan = {{ remark.reference_plan.id }};
{% else %}
    current_reference_plan = "map";
{% endif %}

let remark_lon, remark_lat;
{% if remark.lon and remark.lat %}
    remark_lon = {{ remark.lon|stringformat:".8f" }};
    remark_lat = {{ remark.lat|stringformat:".8f" }};
{% endif %}

let remark_x, remark_y;
{% if remark.x and remark.y %}
    remark_x = {{ remark.x|stringformat:".8f" }};
    remark_y = {{ remark.y|stringformat:".8f" }};
{% endif %}

</script>

<script src="{% static 'controls/remarks_form.js' %}"></script>

{% endblock %}