{% load i18n %}

<!-- Contrôles visuels Hot Box (Enrobé à chaud) -->
<div id="hotBoxSpecificFields" class="border rounded-3 p-3 mb-3 bg-white shadow-sm">
    <div class="d-flex align-items-center justify-content-between mb-3 border-bottom pb-2">
        <span class="small fw-bold text-primary text-uppercase d-flex align-items-center">
            <i class="bi bi-fire text-danger me-2 fs-6"></i>{% translate "Contrôle visuel de réparation Hot Box" %}
        </span>
        <span id="hotboxRecommendedBadge" class="badge bg-success-subtle text-success border border-success-subtle px-2.5 py-1 rounded-pill small">
            <i class="bi bi-check-circle-fill me-1"></i>{% translate "Suggéré : Conforme" %}
        </span>
    </div>

    <p class="text-muted small mb-3">
        <i class="bi bi-info-circle me-1"></i>
        {% translate "Évaluez visuellement la zone réparée sur les 4 critères simples ci-dessous :" %}
    </p>

    <!-- 1. Planéité / Arasement -->
    <div class="mb-3">
        <label class="form-label small fw-bold text-secondary mb-1 d-flex align-items-center">
            <i class="bi bi-distribute-vertical me-1 text-primary"></i>
            1. {% translate "Planéité / Arasement" %}
        </label>
        <div class="row g-2">
            <div class="col-12 col-md-4">
                <input type="radio" class="btn-check hotbox-input" name="joint_level" id="hb_level_flush" value="flush" checked>
                <label class="btn btn-outline-success btn-sm w-100 py-2 d-flex align-items-center justify-content-center gap-1 rounded-3" for="hb_level_flush">
                    <i class="bi bi-check-circle"></i>
                    <span>{% translate "Bien à niveau / Arasé" %}</span>
                </label>
            </div>
            <div class="col-12 col-md-4">
                <input type="radio" class="btn-check hotbox-input" name="joint_level" id="hb_level_slight" value="slight_bump_hollow">
                <label class="btn btn-outline-warning btn-sm w-100 py-2 d-flex align-items-center justify-content-center gap-1 rounded-3" for="hb_level_slight">
                    <i class="bi bi-exclamation-circle"></i>
                    <span>{% translate "Léger creux ou bosse" %}</span>
                </label>
            </div>
            <div class="col-12 col-md-4">
                <input type="radio" class="btn-check hotbox-input" name="joint_level" id="hb_level_step" value="step">
                <label class="btn btn-outline-danger btn-sm w-100 py-2 d-flex align-items-center justify-content-center gap-1 rounded-3" for="hb_level_step">
                    <i class="bi bi-exclamation-triangle"></i>
                    <span>{% translate "Ressaut (> 1-2 cm)" %}</span>
                </label>
            </div>
        </div>
    </div>

    <!-- 2. Joints de raccordement -->
    <div class="mb-3">
        <label class="form-label small fw-bold text-secondary mb-1 d-flex align-items-center">
            <i class="bi bi-bounding-box me-1 text-info"></i>
            2. {% translate "Joints de raccordement" %}
        </label>
        <div class="row g-2">
            <div class="col-12 col-md-4">
                <input type="radio" class="btn-check hotbox-input" name="joint_sealing" id="hb_sealing_good" value="good" checked>
                <label class="btn btn-outline-success btn-sm w-100 py-2 d-flex align-items-center justify-content-center gap-1 rounded-3" for="hb_sealing_good">
                    <i class="bi bi-check-circle"></i>
                    <span>{% translate "Bien fermés / scellés" %}</span>
                </label>
            </div>
            <div class="col-12 col-md-4">
                <input type="radio" class="btn-check hotbox-input" name="joint_sealing" id="hb_sealing_cracked" value="cracked">
                <label class="btn btn-outline-warning btn-sm w-100 py-2 d-flex align-items-center justify-content-center gap-1 rounded-3" for="hb_sealing_cracked">
                    <i class="bi bi-exclamation-circle"></i>
                    <span>{% translate "Joints fissurés / abîmés" %}</span>
                </label>
            </div>
            <div class="col-12 col-md-4">
                <input type="radio" class="btn-check hotbox-input" name="joint_sealing" id="hb_sealing_open" value="open">
                <label class="btn btn-outline-danger btn-sm w-100 py-2 d-flex align-items-center justify-content-center gap-1 rounded-3" for="hb_sealing_open">
                    <i class="bi bi-exclamation-triangle"></i>
                    <span>{% translate "Joints ouverts / décollés" %}</span>
                </label>
            </div>
        </div>
    </div>

    <!-- 3. Fissuration -->
    <div class="mb-3">
        <label class="form-label small fw-bold text-secondary mb-1 d-flex align-items-center">
            <i class="bi bi-activity me-1 text-warning"></i>
            3. {% translate "Fissuration" %}
        </label>
        <div class="row g-2">
            <div class="col-12 col-md-4">
                <input type="radio" class="btn-check hotbox-input" name="cracking" id="hb_cracking_none" value="none" checked>
                <label class="btn btn-outline-success btn-sm w-100 py-2 d-flex align-items-center justify-content-center gap-1 rounded-3" for="hb_cracking_none">
                    <i class="bi bi-check-circle"></i>
                    <span>{% translate "Aucune fissure" %}</span>
                </label>
            </div>
            <div class="col-12 col-md-4">
                <input type="radio" class="btn-check hotbox-input" name="cracking" id="hb_cracking_minor" value="minor">
                <label class="btn btn-outline-warning btn-sm w-100 py-2 d-flex align-items-center justify-content-center gap-1 rounded-3" for="hb_cracking_minor">
                    <i class="bi bi-exclamation-circle"></i>
                    <span>{% translate "Petites fissures / Faïençage" %}</span>
                </label>
            </div>
            <div class="col-12 col-md-4">
                <input type="radio" class="btn-check hotbox-input" name="cracking" id="hb_cracking_major" value="major">
                <label class="btn btn-outline-danger btn-sm w-100 py-2 d-flex align-items-center justify-content-center gap-1 rounded-3" for="hb_cracking_major">
                    <i class="bi bi-exclamation-triangle"></i>
                    <span>{% translate "Grosses fissures ouvertes" %}</span>
                </label>
            </div>
        </div>
    </div>

    <!-- 4. Évacuation des eaux pluviales -->
    <div class="mb-2">
        <label class="form-label small fw-bold text-secondary mb-1 d-flex align-items-center">
            <i class="bi bi-droplet-half me-1 text-primary"></i>
            4. {% translate "Évacuation des eaux pluviales" %}
        </label>
        <div class="row g-2">
            <div class="col-12 col-md-6">
                <input type="radio" class="btn-check hotbox-input" name="water_drainage" id="hb_drainage_good" value="good" checked>
                <label class="btn btn-outline-success btn-sm w-100 py-2 d-flex align-items-center justify-content-center gap-1 rounded-3" for="hb_drainage_good">
                    <i class="bi bi-check-circle"></i>
                    <span>{% translate "Bon écoulement / Pas de flaque" %}</span>
                </label>
            </div>
            <div class="col-12 col-md-6">
                <input type="radio" class="btn-check hotbox-input" name="water_drainage" id="hb_drainage_stagnation" value="stagnation">
                <label class="btn btn-outline-warning btn-sm w-100 py-2 d-flex align-items-center justify-content-center gap-1 rounded-3" for="hb_drainage_stagnation">
                    <i class="bi bi-droplet-fill"></i>
                    <span>{% translate "Eau stagnante / Flaque d'eau" %}</span>
                </label>
            </div>
        </div>
    </div>
</div>

<script>
(function() {
    function computeHotBoxStatus() {
        const level = document.querySelector('input[name="joint_level"]:checked')?.value || 'flush';
        const sealing = document.querySelector('input[name="joint_sealing"]:checked')?.value || 'good';
        const cracking = document.querySelector('input[name="cracking"]:checked')?.value || 'none';
        const drainage = document.querySelector('input[name="water_drainage"]:checked')?.value || 'good';

        let recommended = 'compliant';
        let badgeText = '{% translate "Suggéré : Conforme" %}';
        let badgeClass = 'bg-success-subtle text-success border border-success-subtle';
        let icon = 'bi-check-circle-fill';

        if (level === 'step' || sealing === 'open' || cracking === 'major') {
            recommended = 'damaged';
            badgeText = '{% translate "Suggéré : Dégradé" %}';
            badgeClass = 'bg-danger-subtle text-danger border border-danger-subtle';
            icon = 'bi-exclamation-triangle-fill';
        } else if (level === 'slight_bump_hollow' || sealing === 'cracked' || cracking === 'minor' || drainage === 'stagnation') {
            recommended = 'non_compliant';
            badgeText = '{% translate "Suggéré : Non conforme" %}';
            badgeClass = 'bg-warning-subtle text-warning-emphasis border border-warning-subtle';
            icon = 'bi-exclamation-circle-fill';
        }

        const badge = document.getElementById('hotboxRecommendedBadge');
        if (badge) {
            badge.className = `badge ${badgeClass} px-2.5 py-1 rounded-pill small`;
            badge.innerHTML = `<i class="bi ${icon} me-1"></i>${badgeText}`;
        }

        // Auto-select the corresponding general inspection result status radio if present
        const modal = document.getElementById('createInspectionModal') || document.getElementById('quickInspectionModal');
        if (modal) {
            const rad = modal.querySelector(`input[name="result_status"][value="${recommended}"]`);
            if (rad) {
                rad.checked = true;
            }
        }
    }

    document.querySelectorAll('.hotbox-input').forEach(input => {
        input.addEventListener('change', computeHotBoxStatus);
    });
})();
</script>