{% load i18n static inspections_tags short_name %}

{# Inspections et contrôles liés à l'asset #}
<div class="card mb-3" id="asset-inspections-card">
    <div class="card-header bg-light d-flex align-items-center justify-content-between">
        <h5 class="mb-0 fs-6 fw-bold">
            <i class="bi bi-patch-check me-2 text-primary"></i>{% translate "Inspections et contrôles terrain" %}
            {% if inspections %}
                <span class="badge bg-secondary rounded-pill ms-1">{{ total_count }}</span>
            {% endif %}
        </h5>
        {% if can_inspect %}
            <button type="button" 
                    class="btn btn-outline-primary btn-sm btn-trigger-asset-inspection" 
                    data-bs-toggle="modal" 
                    data-bs-target="#quickInspectionModal"
                    data-content-type-id="{{ asset_ct_id }}"
                    data-model-name="{{ asset_ct_model }}"
                    data-object-id="{{ asset_pk }}"
                    data-target-code="{{ asset.code|default:asset.pk }}"
                    data-target-name="{{ asset.name_fr|default:asset.name_nl|default:asset }}"
                    data-target-type="{% if asset.category %}{{ asset.category.name_fr }}{% else %}{% translate 'Zone / Équipement' %}{% endif %}"
                    data-target-status="{% if asset.get_status_display %}{{ asset.get_status_display }}{% else %}-{% endif %}">
                <i class="bi bi-plus-lg me-1"></i>{% translate "Nouvelle inspection" %}
            </button>
        {% endif %}
    </div>
    <div class="card-body p-0">
        {% if inspections %}
            <div class="table-responsive">
                <table class="table table-hover table-sm mb-0 align-middle">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 15%;" class="ps-3">{% translate "Date & Heure" %}</th>
                            <th style="width: 18%;">{% translate "Statut du contrôle" %}</th>
                            <th style="width: 15%;">{% translate "Nature" %}</th>
                            <th style="width: 20%;">{% translate "Inspecteur" %}</th>
                            <th style="width: 22%;">{% translate "Remarques" %}</th>
                            <th style="width: 10%;" class="pe-3 text-end">{% translate "Action" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for insp in inspections %}
                            <tr class="{% if insp.is_cancelled %}table-light text-muted opacity-75 fst-italic{% endif %}">
                                <td class="ps-3 fw-semibold">
                                    {{ insp.inspection_date|date:"d/m/Y H:i" }}
                                </td>
                                <td>
                                    <span class="badge {{ insp.status_badge_class }}">
                                        <i class="bi {{ insp.status_icon }} me-1"></i>{{ insp.get_result_status_display }}
                                    </span>
                                </td>
                                <td>
                                    <span class="badge bg-light text-dark border">{{ insp.get_nature_display }}</span>
                                </td>
                                <td>
                                    <i class="bi bi-person me-1 text-muted"></i>{{ insp.inspector|short_name|default:"-" }}
                                </td>
                                <td>
                                    <span class="small text-muted text-truncate d-inline-block" style="max-width: 220px;" title="{{ insp.details_summary }}">
                                        {{ insp.details_summary }}
                                    </span>
                                </td>
                                <td class="pe-3 text-end">
                                    <button type="button" class="btn btn-xs btn-outline-primary px-2 py-1 rounded" data-bs-toggle="modal" data-bs-target="#assetInspectionDetailModal{{ insp.id }}">
                                        <i class="bi bi-eye me-1"></i>{% translate "Détail" %}
                                    </button>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="p-3 text-center text-muted small">
                <i class="bi bi-info-circle fs-5 d-block mb-1 text-secondary"></i>
                {% translate "Aucune inspection ni vérification enregistrée pour cet équipement." %}
            </div>
        {% endif %}
    </div>
</div>

{% for insp in inspections %}
<!-- Modale de détail de l'inspection pour l'asset -->
<div class="modal fade" id="assetInspectionDetailModal{{ insp.id }}" tabindex="-1" aria-labelledby="assetInspectionDetailModalLabel{{ insp.id }}" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-light py-2.5">
                <h5 class="modal-title fs-6 fw-bold" id="assetInspectionDetailModalLabel{{ insp.id }}">
                    <i class="bi bi-patch-check me-2 text-primary"></i>{% translate "Détail de l'inspection" %} - {{ insp.inspection_date|date:"d/m/Y H:i" }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-3">
                {% if insp.is_cancelled %}
                <div class="alert alert-secondary py-2 px-3 small d-flex align-items-center mb-3">
                    <i class="bi bi-slash-circle me-2 fs-6"></i>
                    <div>
                        <strong>{% translate "Inspection annulée" %}</strong> — {% translate "Cette inspection a été annulée et n'est plus prise en compte dans la conformité active de la cible." %}
                    </div>
                </div>
                {% endif %}
                {% if insp.related_intervention %}
                <div class="mb-3">
                    <a href="{% url 'interventions:intervention_detail' insp.related_intervention.id %}" class="btn btn-outline-primary w-100 fw-semibold" target="_blank">
                        <i class="bi bi-tools me-2"></i>{% translate "Consulter l'intervention" %} {{ insp.related_intervention.code }}
                    </a>
                </div>
                {% endif %}
                <ul class="list-group list-group-flush mb-3">
                    <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                        <span class="text-muted"><i class="bi bi-geo-alt me-1"></i>{% translate "Équipement cible" %}</span>
                        <span class="fw-bold text-end ms-2">{{ insp.target_display }}</span>
                    </li>
                    {% if insp.related_intervention %}
                    <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                        <span class="text-muted"><i class="bi bi-tools me-1"></i>{% translate "Intervention liée" %}</span>
                        <span class="fw-semibold text-end ms-2">
                            <a href="{% url 'interventions:intervention_detail' insp.related_intervention.id %}" class="text-decoration-none fw-bold" target="_blank">
                                <i class="bi bi-box-arrow-up-right me-1"></i>{{ insp.related_intervention.code }}
                            </a>
                            {% if insp.related_intervention.sub_type %}
                            <span class="badge bg-light text-dark border ms-1">{{ insp.related_intervention.sub_type.get_name }}</span>
                            {% endif %}
                        </span>
                    </li>
                    {% endif %}
                    <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                        <span class="text-muted"><i class="bi bi-calendar-event me-1"></i>{% translate "Date & Heure" %}</span>
                        <span class="fw-semibold">{{ insp.inspection_date|date:"d/m/Y H:i" }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                        <span class="text-muted"><i class="bi bi-shield-check me-1"></i>{% translate "Résultat du contrôle" %}</span>
                        <span class="badge {{ insp.status_badge_class }}"><i class="bi {{ insp.status_icon }} me-1"></i>{{ insp.get_result_status_display }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                        <span class="text-muted"><i class="bi bi-eye me-1"></i>{% translate "Nature" %}</span>
                        <span class="badge bg-light text-dark border">{{ insp.get_nature_display }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                        <span class="text-muted"><i class="bi bi-person me-1"></i>{% translate "Inspecteur" %}</span>
                        <span class="fw-semibold">{{ insp.inspector|short_name|default:"-" }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                        <span class="text-muted"><i class="bi bi-clock-history me-1"></i>{% translate "Date de modification" %}</span>
                        <span class="fw-semibold">{{ insp.updated_at|date:"d/m/Y H:i" }}</span>
                    </li>


                    {% get_inspection_detail_template insp as detail_template %}
                    {% if detail_template %}
                        {% include detail_template with insp=insp %}
                    {% endif %}
                </ul>

                {% if insp.notes %}
                <div class="mb-3">
                    <label class="form-label text-muted small fw-semibold"><i class="bi bi-journal-text me-1"></i>{% translate "Remarques / Observations" %}:</label>
                    <div class="p-2 bg-light rounded border text-secondary small">
                        {{ insp.notes|linebreaksbr }}
                    </div>
                </div>
                {% endif %}

                {% if insp.documents.all %}
                <div>
                    <label class="form-label text-muted small fw-semibold mb-2"><i class="bi bi-camera me-1"></i>{% translate "Photos & Documents joints" %} ({{ insp.documents.count }}):</label>
                    <div class="d-flex flex-wrap gap-2 align-items-center">
                        {% for doc in insp.documents.all %}
                            {% if doc.is_image %}
                            <a href="{{ doc.file_url }}" target="_blank" class="d-inline-block border rounded p-1 bg-light" title="{{ doc.filename }}">
                                <img data-src="{{ doc.file_url }}" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E" loading="lazy" alt="{{ doc.filename }}" class="rounded" style="width: 75px; height: 75px; object-fit: cover;">
                            </a>
                            {% else %}
                            <a href="{{ doc.file_url }}" target="_blank" class="btn btn-sm btn-outline-secondary d-inline-flex align-items-center gap-1" title="{{ doc.filename }}">
                                <i class="bi bi-file-earmark-arrow-down text-primary"></i>
                                <span class="text-truncate" style="max-width: 160px;">{{ doc.filename }}</span>
                            </a>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
            </div>
            <div class="modal-footer py-2 bg-light">
                {% can_edit_inspection insp request.user as user_can_edit %}
                {% if user_can_edit %}
                    {% if insp.is_cancelled %}
                    <button type="button" class="btn btn-outline-success btn-sm fw-semibold" onclick="handleToggleCancelAssetInspection({{ insp.id }}, 'restore')">
                        <i class="bi bi-arrow-counterclockwise me-1"></i>{% translate "Rétablir l'inspection" %}
                    </button>
                    {% else %}
                    <button type="button" class="btn btn-outline-danger btn-sm fw-semibold" onclick="handleToggleCancelAssetInspection({{ insp.id }}, 'cancel')">
                        <i class="bi bi-x-circle me-1"></i>{% translate "Annuler l'inspection" %}
                    </button>
                    {% endif %}
                    <button type="button" class="btn btn-outline-primary btn-sm fw-semibold" onclick="openEditInspectionModal({{ insp.id }})" data-bs-dismiss="modal">
                        <i class="bi bi-pencil me-1"></i>{% translate "Modifier l'inspection" %}
                    </button>
                {% endif %}
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{% translate "Fermer" %}</button>
            </div>

        </div>
    </div>
</div>
{% endfor %}

{% if can_inspect %}
{% include "inspections/components/inspection_form_modal.html" %}

<script>
document.addEventListener('DOMContentLoaded', function() {
    const triggerBtns = document.querySelectorAll('.btn-trigger-asset-inspection');
    triggerBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const ctId = this.getAttribute('data-content-type-id');
            const objId = this.getAttribute('data-object-id');
            const code = this.getAttribute('data-target-code');
            const name = this.getAttribute('data-target-name');
            const type = this.getAttribute('data-target-type');
            const status = this.getAttribute('data-target-status');

            const modalCtInput = document.getElementById('insp_content_type_id');
            const modalObjInput = document.getElementById('insp_object_id');
            const modalTypeCode = document.getElementById('insp_target_code');
            const modalTypeName = document.getElementById('insp_target_name');
            const modalTypeBadge = document.getElementById('insp_target_type');
            const modalStatusBadge = document.getElementById('insp_target_status');

            if (modalCtInput) modalCtInput.value = ctId;
            if (modalObjInput) modalObjInput.value = objId;
            if (modalTypeCode) modalTypeCode.textContent = code;
            if (modalTypeName) modalTypeName.textContent = name;
            if (modalTypeBadge) modalTypeBadge.textContent = type;
            if (modalStatusBadge) modalStatusBadge.textContent = status;

            const modelName = (this.getAttribute('data-model-name') || '').toLowerCase();
            const codeUpper = (code || '').toUpperCase();
            const isRwiz = (modelName === 'naturerwiz' || codeUpper.startsWith('RWIZ'));
            if (typeof window.toggleMissingResultChoice === 'function') {
                window.toggleMissingResultChoice(isRwiz);
            }
        });
    });

    const form = document.getElementById('quickInspectionForm');
    if (form && !form.dataset.ajaxHandlerAttached) {
        form.dataset.ajaxHandlerAttached = 'true';
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            const submitBtn = document.getElementById('submitQuickInspectionBtn');
            const spinner = document.getElementById('submitQuickInspectionSpinner');
            const icon = document.getElementById('submitQuickInspectionIcon');
            const alertBox = document.getElementById('quickInspectionAlert');

            if (alertBox) {
                alertBox.classList.add('d-none');
                alertBox.textContent = '';
            }
            if (submitBtn) submitBtn.disabled = true;
            if (spinner) spinner.classList.remove('d-none');
            if (icon) icon.classList.add('d-none');

            const formData = new FormData(form);

            fetch(form.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(res => {
                if (res.redirected) {
                    window.location.href = res.url;
                    return null;
                }
                return res.json();
            })
            .then(data => {
                if (!data) return;
                if (data.success) {
                    const modalEl = document.getElementById('quickInspectionModal');
                    const modal = bootstrap.Modal.getInstance(modalEl);
                    if (modal) modal.hide();
                    window.location.reload();
                } else {
                    if (alertBox) {
                        {% translate "Erreur lors de l'enregistrement." as err_save_msg %}
                        alertBox.textContent = data.error || "{{ err_save_msg|escapejs }}";
                        alertBox.classList.remove('d-none');
                    }
                    if (submitBtn) submitBtn.disabled = false;
                    if (spinner) spinner.classList.add('d-none');
                    if (icon) icon.classList.remove('d-none');
                }
            })
            .catch(err => {
                console.error("Erreur lors de l'enregistrement de l'inspection:", err);
                window.location.reload();
            });
        });
    }
});
</script>
{% endif %}

<script>
(function() {
    function loadLazyModalImages(modal) {
        if (!modal || typeof modal.querySelectorAll !== 'function') return;
        modal.querySelectorAll('img[data-src]').forEach(function(img) {
            const dataSrc = img.getAttribute('data-src');
            if (dataSrc) {
                img.src = dataSrc;
                img.removeAttribute('data-src');
            }
        });
    }
    document.addEventListener('show.bs.modal', function(e) {
        loadLazyModalImages(e.target);
    });
    document.addEventListener('shown.bs.modal', function(e) {
        loadLazyModalImages(e.target);
    });
})();

window.handleToggleCancelAssetInspection = function(inspectionId, action) {
    const confirmMsg = action === 'cancel' 
        ? "{% filter escapejs %}{% translate 'Êtes-vous sûr de vouloir annuler cette inspection ?' %}{% endfilter %}" 
        : "{% filter escapejs %}{% translate 'Êtes-vous sûr de vouloir rétablir cette inspection ?' %}{% endfilter %}";
    if (!confirm(confirmMsg)) return;

    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, 10) === 'csrftoken=') {
                cookieValue = decodeURIComponent(cookie.substring(10));
                break;
            }
        }
    }

    const formData = new FormData();
    formData.append('action', action);

    fetch(`/inspections/api/${inspectionId}/toggle-cancel/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': cookieValue
        },
        body: formData
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            window.location.reload();
        } else {
            alert(data.error || "{% filter escapejs %}{% translate 'Une erreur est survenue.' %}{% endfilter %}");
        }
    })
    .catch(err => {
        console.error(err);
        alert("{% filter escapejs %}{% translate 'Erreur de communication avec le serveur.' %}{% endfilter %}");
    });
};
</script>

{% include "inspections/components/edit_inspection_modal.html" %}