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

{% block head %}
    <!-- Flatpickr (local) -->
    <link rel="stylesheet" href="{% static 'common/flatpickr.min.css' %}">
    <link rel="stylesheet" href="{% static 'common/flatpickr-material_blue.css' %}">

    <style>
        .noUi-connect {
            background: #42a5f5;
        }
    </style>

{% endblock head %}

{% block content %}
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-10 col-sm-12">
                <h3 style="text-align: center;">{% translate "Créer des interventions préventives" %}</h3>
                <form method="post" class="needs-validation" novalidate>
                    {% csrf_token %}

                    <input type="hidden" name="draft_id" value="{{ draft_id }}">

                    <!-- Titre -->
                    <div class="mb-3">
                        {{ form.title.label_tag }}
                        {{ form.title }}
                        {% if form.title.errors %}
                            <div class="invalid-feedback d-block">{{ form.title.errors.0 }}</div>
                        {% endif %}
                    </div>

                    <!-- Statut -->
                    <div class="mb-3">
                        {{ form.status.label_tag }}
                        {{ form.status }}
                        {% if form.status.errors %}
                            <div class="invalid-feedback d-block">{{ form.status.errors.0 }}</div>
                        {% endif %}
                    </div>

                    <!-- Type d'intervention -->
                    <div class="mb-3">
                        {{ form.type.label_tag }}
                        {{ form.type }}
                        {% if form.type.errors %}
                            <div class="invalid-feedback d-block">{{ form.type.errors.0 }}</div>
                        {% endif %}
                    </div>

                    <!-- Contrat -->
                    <div class="mb-3">
                        {{ form.contract.label_tag }}
                        {{ form.contract }}
                        {% if form.contract.errors %}
                            <div class="invalid-feedback d-block">{{ form.contract.errors.0 }}</div>
                        {% endif %}
                    </div>

                    <!-- Commande -->
                    <div class="mb-3">
                        {{ form.order.label_tag }}
                        <div class="d-flex gap-2">
                            {{ form.order }}
                            <button type="button" class="btn btn-outline-primary" id="btn-create-order" disabled>
                                <i class="bi bi-plus"></i> {% translate "Créer" %}
                            </button>
                        </div>
                        {% if form.order.errors %}
                            <div class="invalid-feedback d-block">{{ form.order.errors.0 }}</div>
                        {% endif %}
                    </div>
                    {% if redirect_to_order %}
                        <input type="hidden" name="redirect_to_order" value="{{ redirect_to_order }}">
                    {% endif %}

                    <!-- Templates Opérations -->
                    <div class="mb-3">
                        {{ form.operation_templates.label_tag }}
                        <div class="border p-3 rounded" style="max-height: 200px; overflow-y: auto;">
                            {{ form.operation_templates }}
                        </div>
                        {% if form.operation_templates.help_text %}
                            <small class="form-text text-muted">{{ form.operation_templates.help_text }}</small>
                        {% endif %}
                        {% if form.operation_templates.errors %}
                            <div class="invalid-feedback d-block">{{ form.operation_templates.errors.0 }}</div>
                        {% endif %}
                    </div>


                    <!-- Plage prévisionnelle -->
                    <hr class="mt-4">
                    <div class="mb-3">
                        <label class="form-label">{% translate "Plage prévisionnelle" %}</label>

                        <!-- Résumé -->
                        <div class="mt-2">
                            <strong>{% translate "Début" %} :</strong> <span id="startLabel"></span><br>
                            <strong>{% translate "Fin" %} :</strong> <span id="endLabel"></span>
                        </div>

                        <!-- Calendrier -->
                        <div id="inlineCalendar" class="mt-3 mb-3"></div>

                        <!-- Champs masqués -->
                        <input type="hidden" id="id_expected_begin_time" name="expected_begin_time" value="{{ form.expected_begin_time.value|default:'' }}">
                        <input type="hidden" id="id_expected_end_time" name="expected_end_time" value="{{ form.expected_end_time.value|default:'' }}">
                    </div>
                    <hr class="mb-4">

                    <!-- Nombre de répétitions -->
                    <div class="mb-3">
                        {{ form.recurrence_count.label_tag }}
                        {{ form.recurrence_count }}
                        {% if form.recurrence_count.errors %}
                            <div class="invalid-feedback d-block">{{ form.recurrence_count.errors.0 }}</div>
                        {% endif %}
                    </div>

                    <!-- Délai entre répétitions -->
                    <div class="mb-3">
                        {{ form.recurrence_delta_months.label_tag }}
                        {{ form.recurrence_delta_months }}
                        {% if form.recurrence_delta_months.errors %}
                            <div class="invalid-feedback d-block">{{ form.recurrence_delta_months.errors.0 }}</div>
                        {% endif %}
                    </div>

                    <!-- Créer une commande par répétition -->
                    <div class="mb-3">
                        <div class="form-check">
                            {{ form.create_order_per_recurrence }}
                            {{ form.create_order_per_recurrence.label_tag }}
                        </div>
                        {% if form.create_order_per_recurrence.help_text %}
                            <small class="form-text text-muted">{{ form.create_order_per_recurrence.help_text }}</small>
                        {% endif %}
                        {% if form.create_order_per_recurrence.errors %}
                            <div class="invalid-feedback d-block">{{ form.create_order_per_recurrence.errors.0 }}</div>
                        {% endif %}
                    </div>

                    <!-- Mode de création des interventions -->
                    <hr class="mt-4">
                    <div class="mb-3">
                        {{ form.intervention_creation_mode.label_tag }}
                        <div class="border p-3 rounded">
                            {% for radio in form.intervention_creation_mode %}
                                <div class="form-check">
                                    {{ radio.tag }}
                                    <label class="form-check-label" for="{{ radio.id_for_label }}">
                                        {{ radio.choice_label }}
                                    </label>
                                </div>
                            {% endfor %}
                        </div>
                        {% if form.intervention_creation_mode.help_text %}
                            <small class="form-text text-muted">{{ form.intervention_creation_mode.help_text }}</small>
                        {% endif %}
                        {% if form.intervention_creation_mode.errors %}
                            <div class="invalid-feedback d-block">{{ form.intervention_creation_mode.errors.0 }}</div>
                        {% endif %}
                    </div>

                    <!-- Sélection d'éléments -->
                    <hr class="mt-4">
                    <div class="mb-3">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="type_of_selected_elements" id="select_type_locations" 
                                   value="locations"   
                                   {% if select_elements_type == 'locations' or not select_elements_type %}checked{% endif %}>
                            <label class="form-check-label" for="select_type_locations">
                                {% translate "Localisations" %}
                            </label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="type_of_selected_elements" id="select_type_assets" 
                                   value="assets"
                                   {% if select_elements_type == 'assets' %}checked{% endif %}>
                            <label class="form-check-label" for="select_type_assets">
                                Assets
                            </label>
                        </div>
                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                            <div class="text-muted small" id="selected-elements-status" data-selected-count="{{ selected_elements_count }}">
                                {{ selected_elements_count }} {% translate "élément(s) sélectionné(s)" %}
                            </div>
                            
                            <button type="submit"
                                name="select_assets"
                                value="1"
                                formmethod="post"
                                formaction="{% url 'interventions:intervention_preventive_draft' thematic.code %}"
                                class="btn btn-outline-primary">
                            
                                <i class="bi bi-plus"></i> {% translate "Sélectionner" %}
                            </button>
                        </div>
                        <div class="mb-3">
                            <button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#assetList" aria-expanded="false" aria-controls="assetList">
                                {% translate "Afficher les éléments sélectionnés" %}
                            </button>

                            <div class="collapse mt-3" id="assetList">
                                <ul class="list-group flex-wrap" id="selected-elements-list">
                                    {% for loc in selected_locations %}
                                        <li class="list-group-item d-flex align-items-center justify-content-between py-2 px-3 mb-2 me-2" data-type="location" data-id="{{ loc.id }}">
                                            <div>
                                                <span class="badge bg-primary me-2">{{ loc.code }}</span>
                                                <span>{{ loc.name }}</span>
                                            </div>
                                            <button type="button" class="btn btn-sm btn-outline-danger btn-remove-element" data-type="location" data-id="{{ loc.id }}">
                                                <i class="bi bi-x-lg"></i>
                                            </button>
                                        </li>
                                    {% endfor %}
                                    {% for asset in selected_assets %}
                                        <li class="list-group-item d-flex align-items-center justify-content-between py-2 px-3 mb-2 me-2" data-type="asset" data-model="{{ asset.asset_type }}" data-id="{{ asset.id }}">
                                            <div>
                                                <span class="badge bg-primary me-2">{{ asset.code }}</span>
                                                <span>{{ asset.name }}</span>
                                            </div>
                                            <button type="button" class="btn btn-sm btn-outline-danger btn-remove-element" data-type="asset" data-model="{{ asset.asset_type }}" data-id="{{ asset.id }}">
                                                <i class="bi bi-x-lg"></i>
                                            </button>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                        <div id="asset-warning-placeholder"></div>
                    </div>
                    <hr>
                    
                    <div class="d-flex justify-content-center align-items-center flex-wrap gap-2 mt-4">
                        <button type="submit" class="btn btn-primary" id="submit-create-interventions">{% translate "Créer les interventions" %}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal pour créer une commande -->
    <div class="modal fade" id="createOrderModal" tabindex="-1" aria-labelledby="createOrderModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createOrderModalLabel">{% translate "Créer une commande" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="order-form-errors" class="alert alert-danger d-none"></div>
                    <div class="mb-3">
                        <label for="order_code" class="form-label">{% translate "Référence de commande" %} *</label>
                        <input type="text" class="form-control" id="order_code" required>
                    </div>
                    <div class="mb-3">
                        <label for="order_description" class="form-label">{% translate "Description" %}</label>
                        <textarea class="form-control" id="order_description" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="order_date" class="form-label">{% translate "Date de la commande" %} *</label>
                        <input type="date" class="form-control" id="order_date" required>
                    </div>
                    <div class="mb-3">
                        <label for="delivery_date" class="form-label">{% translate "Date de livraison" %} *</label>
                        <input type="date" class="form-control" id="delivery_date" required>
                    </div>
                    <div class="mb-3">
                        <label for="total_amount" class="form-label">{% translate "Montant total (€)" %}</label>
                        <input type="number" step="0.01" class="form-control" id="total_amount" placeholder="ex. 1000.00">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                    <button type="button" class="btn btn-primary" id="btn-save-order">{% translate "Créer" %}</button>
                </div>
            </div>
        </div>
    </div>

{% endblock content%}

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

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const inputStart = document.getElementById("id_expected_begin_time");
            const inputEnd = document.getElementById("id_expected_end_time");

            const rawStart = inputStart.value;
            const rawEnd = inputEnd.value;

            // Helper pour parser datetime-local format
            function parseDatetimeLocal(s) {
                // s attendu au format "YYYY-MM-DDTHH:MM"
                if (!s) return null;
                const d = new Date(s);
                return isNaN(d.getTime()) ? null : d;
            }

            const startDate = parseDatetimeLocal(rawStart);
            const endDate = parseDatetimeLocal(rawEnd);

            const today = new Date();
            today.setHours(0, 0, 0, 0);

            const defaultStart = new Date(today.getFullYear(), today.getMonth() + 2, 1);
            const defaultEnd = new Date(today.getFullYear(), today.getMonth() + 3, 0);

            const appliedStart = startDate || defaultStart;
            const appliedEnd = endDate || defaultEnd;

            const inlineCalendar = document.getElementById("inlineCalendar");
            const startLabel = document.getElementById("startLabel");
            const endLabel = document.getElementById("endLabel");
            startLabel.textContent = appliedStart.toLocaleDateString();
            endLabel.textContent = appliedEnd.toLocaleDateString();
            inputStart.value = formatDateISO(appliedStart);
            inputEnd.value = formatDateISO(appliedEnd);

            // Helper pour format datetime-local
            function formatDateISO(ts) {
                const d = new Date(ts);
                return d.toISOString().slice(0, 16);
            }

            // Init du calendrier
            const fp = flatpickr(inlineCalendar, {
                inline: true,
                mode: "range",
                dateFormat: "d/m/Y",
                minDate: today,
                defaultDate: [startDate, endDate],
                showMonths: 2,
                enableTime: false,
                time_24hr: false,
                onChange: function (selectedDates) {
                    if (selectedDates.length === 2) {
                        const start = new Date(selectedDates[0]);
                        const end = new Date(selectedDates[1]);
                        start.setHours(8, 0, 0, 0);
                        end.setHours(8, 0, 0, 0);
                        startLabel.textContent = start.toLocaleDateString();
                        endLabel.textContent = end.toLocaleDateString();
                        inputStart.value = formatDateISO(start);
                        inputEnd.value = formatDateISO(end);
                    }
                }
            });

            fp.setDate([appliedStart, appliedEnd], true);

        });



        document.addEventListener("DOMContentLoaded", function () {
            const createButton = document.getElementById("submit-create-interventions");
            const form = createButton.closest("form");
            const elementsStatus = document.getElementById("selected-elements-status");
            const warningTarget = document.getElementById("asset-warning-placeholder");

            createButton.addEventListener("click", function (e) {
                const selectedCount = parseInt(elementsStatus.dataset.selectedCount || "0");

                if (selectedCount === 0) {
                e.preventDefault(); // bloque le submit
                e.stopPropagation();

                warningTarget.innerHTML = "";

                // Ajoute un message d'alerte
                const warning = document.createElement("div");
                warning.className = "alert alert-warning alert-asset-warning mt-3 text-center w-100";
                warning.innerText = '{% translate "Veuillez sélectionner au moins un élément avant de créer les interventions." %}';
                warningTarget.appendChild(warning);

                //setTimeout(() => warning.remove(), 4000);
                }
            });
        });


        const contractSelect = document.getElementById('id_contract');
        const orderSelect = document.getElementById('id_order');
        const btnCreateOrder = document.getElementById('btn-create-order');

        contractSelect.addEventListener('change', function() {
            const contractId = this.value;
            
            orderSelect.innerHTML = '';
            orderSelect.disabled = true;
            btnCreateOrder.disabled = !contractId;

            if (!contractId) return;

            fetch(`/contracts/orders/get/?contract_id=${contractId}`)
                .then(response => response.json())
                .then(data => {
                    // Ajouter une option vide au début
                    const emptyOption = document.createElement('option');
                    emptyOption.value = '';
                    emptyOption.textContent = '{% translate "-- Sélectionner une commande --" %}';
                    orderSelect.appendChild(emptyOption);
                    
                    data.forEach(order => {
                        const option = document.createElement('option');
                        option.value = order.id;
                        option.textContent = order.order_code;
                        orderSelect.appendChild(option);
                    });
                    orderSelect.disabled = false;
                });
        });

        // Activer le bouton de création si un contrat est déjà sélectionné au chargement
        if (contractSelect.value) {
            btnCreateOrder.disabled = false;
        }

        // Gestion du modal de création de commande
        const createOrderModal = new bootstrap.Modal(document.getElementById('createOrderModal'));
        const btnSaveOrder = document.getElementById('btn-save-order');
        const orderFormErrors = document.getElementById('order-form-errors');

        btnCreateOrder.addEventListener('click', function(e) {
            e.preventDefault();
            
            // Réinitialiser le formulaire
            document.getElementById('order_code').value = '';
            document.getElementById('order_description').value = '';
            document.getElementById('order_date').value = '';
            document.getElementById('delivery_date').value = '';
            document.getElementById('total_amount').value = '';
            orderFormErrors.classList.add('d-none');
            orderFormErrors.textContent = '';
            
            createOrderModal.show();
        });

        btnSaveOrder.addEventListener('click', function() {
            const contractId = contractSelect.value;
            const orderCode = document.getElementById('order_code').value.trim();
            const description = document.getElementById('order_description').value.trim();
            const orderDate = document.getElementById('order_date').value;
            const deliveryDate = document.getElementById('delivery_date').value;
            const totalAmount = document.getElementById('total_amount').value;

            // Validation côté client
            if (!orderCode || !orderDate || !deliveryDate) {
                orderFormErrors.textContent = '{% translate "Veuillez remplir tous les champs obligatoires" %}';
                orderFormErrors.classList.remove('d-none');
                return;
            }

            // Désactiver le bouton pendant l'envoi
            btnSaveOrder.disabled = true;

            // Envoi AJAX
            fetch('/contracts/orders/create-ajax/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
                },
                body: JSON.stringify({
                    contract_id: contractId,
                    order_code: orderCode,
                    description: description,
                    order_date: orderDate,
                    delivery_date: deliveryDate,
                    total_amount: totalAmount
                })
            })
            .then(response => response.json())
            .then(data => {
                btnSaveOrder.disabled = false;
                
                if (data.success) {
                    // Ajouter la nouvelle commande au select
                    const option = document.createElement('option');
                    option.value = data.order.id;
                    option.textContent = data.order.order_code;
                    option.selected = true;
                    orderSelect.appendChild(option);
                    
                    // Fermer le modal
                    createOrderModal.hide();
                } else {
                    orderFormErrors.textContent = data.error || '{% translate "Une erreur est survenue" %}';
                    orderFormErrors.classList.remove('d-none');
                }
            })
            .catch(error => {
                btnSaveOrder.disabled = false;
                orderFormErrors.textContent = '{% translate "Une erreur est survenue lors de la création de la commande" %}';
                orderFormErrors.classList.remove('d-none');
                console.error('Error:', error);
            });
        });

        // Gestion de la suppression d'éléments
        const selectedElementsList = document.getElementById('selected-elements-list');
        const selectedElementsStatus = document.getElementById('selected-elements-status');
        const draftIdInput = document.querySelector('input[name="draft_id"]');

        if (selectedElementsList) {
            selectedElementsList.addEventListener('click', function(e) {
                const removeBtn = e.target.closest('.btn-remove-element');
                if (!removeBtn) return;

                e.preventDefault();

                const listItem = removeBtn.closest('li');
                const elementType = removeBtn.dataset.type;
                const elementId = removeBtn.dataset.id;
                const assetModel = removeBtn.dataset.model;
                const draftId = draftIdInput ? draftIdInput.value : '{{ draft_id }}';

                if (!confirm('{% translate "Êtes-vous sûr de vouloir supprimer cet élément de la sélection ?" %}')) {
                    return;
                }

                // Construire les données du formulaire
                const formData = new FormData();
                formData.append('draft_id', draftId);
                formData.append('element_type', elementType);
                formData.append('element_id', elementId);
                if (assetModel) {
                    formData.append('asset_model', assetModel);
                }
                formData.append('csrfmiddlewaretoken', document.querySelector('[name=csrfmiddlewaretoken]').value);

                // Désactiver le bouton pendant la requête
                removeBtn.disabled = true;

                // Envoi AJAX
                fetch('{% url "interventions:intervention_preventive_remove_element" thematic.code %}', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Supprimer visuellement l'élément
                        listItem.remove();

                        // Mettre à jour le compteur
                        selectedElementsStatus.dataset.selectedCount = data.total_count;
                        selectedElementsStatus.textContent = `${data.total_count} {% translate "élément(s) sélectionné(s)" %}`;
                    } else {
                        alert(data.error || '{% translate "Erreur lors de la suppression" %}');
                        removeBtn.disabled = false;
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('{% translate "Une erreur est survenue lors de la suppression" %}');
                    removeBtn.disabled = false;
                });
            });
        }

        // Dynamic status options based on intervention type
        document.addEventListener("DOMContentLoaded", function () {
            const typeSelect = document.getElementById("id_type");
            const statusSelect = document.getElementById("id_status");

            if (typeSelect && statusSelect) {
                const baseChoices = [
                    { value: "in_preparation", text: "{% translate 'En préparation' %}" },
                    { value: "to_be_approved", text: "{% translate 'À approuver' %}" },
                    { value: "to_be_planned", text: "{% translate 'À planifier' %}" }
                ];
                const inspectionChoices = [
                    { value: "to_be_processed", text: "{% translate 'À traiter' %}" },
                    { value: "assigned", text: "{% translate 'Pris en charge' %}" }
                ];

                function updateStatusChoices() {
                    const currentType = typeSelect.value;
                    const currentStatus = statusSelect.value;

                    // Clear options
                    statusSelect.innerHTML = "";

                    // Populate base choices
                    baseChoices.forEach(choice => {
                        const opt = document.createElement("option");
                        opt.value = choice.value;
                        opt.textContent = choice.text;
                        if (choice.value === currentStatus) {
                            opt.selected = true;
                        }
                        statusSelect.appendChild(opt);
                    });

                    // Populate inspection-only choices if type is inspection
                    if (currentType === "inspection") {
                        inspectionChoices.forEach(choice => {
                            const opt = document.createElement("option");
                            opt.value = choice.value;
                            opt.textContent = choice.text;
                            if (choice.value === currentStatus) {
                                opt.selected = true;
                            }
                            statusSelect.appendChild(opt);
                        });
                    } else {
                        // If current status is an inspection status, reset to 'to_be_planned'
                        if (inspectionChoices.some(c => c.value === currentStatus)) {
                            statusSelect.value = "to_be_planned";
                        }
                    }
                }

                typeSelect.addEventListener("change", updateStatusChoices);
                updateStatusChoices();
            }
        });
    </script>
{% endblock script %}