{% extends "mobile/mobile_base.html" %}
{% load static %}
{% load i18n %}

{% block extra_head %}
<style>
    .form-section {
        margin-bottom: 1.5rem;
    }
    .form-section label {
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
    .required-field::after {
        content: " *";
        color: #dc3545;
    }
    .search-results {
        max-height: 300px;
        overflow-y: auto;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        display: none;
    }
    .search-results.show {
        display: block;
    }
    .search-result-item {
        padding: 0.75rem;
        border-bottom: 1px solid #eee;
        cursor: pointer;
    }
    .search-result-item:hover {
        background-color: #f8f9fa;
    }
    .search-result-item:last-child {
        border-bottom: none;
    }
    .selected-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #e7f3ff;
        padding: 0.75rem;
        border-radius: 0.375rem;
        margin-top: 0.5rem;
    }
    .selected-item .remove-btn {
        color: #dc3545;
        cursor: pointer;
        padding: 0.25rem;
    }
    .alert-errors {
        margin-bottom: 1rem;
    }
</style>
{% endblock extra_head %}

{% block title %}
    {% translate "Nouvelle intervention" %}
{% endblock title %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex align-items-center mb-3">
        <a href="{% url 'mobile:choose_thematic_for_intervention_mobile' %}" class="btn btn-outline-secondary btn-sm me-2">
            <i class="bi bi-arrow-left"></i>
        </a>
        <h5 class="mb-0">{% translate "Nouvelle intervention" %}</h5>
    </div>

    {% if errors %}
    <div class="alert alert-danger alert-errors">
        <ul class="mb-0">
            {% for error in errors %}
            <li>{{ error }}</li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}

    <form method="post" id="addInterventionForm">
        {% csrf_token %}

        <!-- Localisation -->
        <div class="form-section">
            <label class="form-label required-field">{% translate "Localisation" %}</label>
            <input type="text"
                   class="form-control"
                   id="locationSearch"
                   placeholder="{% translate 'Rechercher une localisation...' %}"
                   autocomplete="off">
            <div id="locationResults" class="search-results"></div>
            <div id="selectedLocation" class="selected-item" style="display: none;">
                <span id="selectedLocationText"></span>
                <span class="remove-btn" onclick="clearLocation()"><i class="bi bi-x-lg"></i></span>
            </div>
            <input type="hidden" name="location_ct"  id="locationCt"   value="{{ form_data.location_ct|default:'' }}">
            <input type="hidden" name="location_obj" id="locationObj"  value="{{ form_data.location_obj|default:'' }}">
            <input type="hidden" name="location_lon" id="locationLon"  value="{{ form_data.location_lon|default:'' }}">
            <input type="hidden" name="location_lat" id="locationLat"  value="{{ form_data.location_lat|default:'' }}">
            <input type="hidden" name="location_code" id="locationCode" value="{{ form_data.location_code|default:'' }}">
        </div>

        <!-- Catégorie -->
        <div class="form-section">
            <label for="categorySelect" class="form-label required-field">{% translate "Catégorie" %}</label>
            <select class="form-select" name="category_id" id="categorySelect" required>
                <option value="">{% translate "Sélectionner une catégorie" %}</option>
                {% for category in categories %}
                <option value="{{ category.id }}" {% if form_data.category_id == category.id|stringformat:"s" %}selected{% endif %}>
                    {{ category.get_name }}
                </option>
                {% endfor %}
            </select>
        </div>

        <!-- Équipement (optionnel) -->
        <div class="form-section">
            <label class="form-label">{% translate "Équipement" %} <small class="text-muted">({% translate "optionnel" %})</small></label>
            {% if asset_search_url %}
            <input type="text"
                   class="form-control"
                   id="assetSearch"
                   placeholder="{% translate 'Rechercher un équipement...' %}"
                   autocomplete="off"
                   disabled>
            <small class="text-muted" id="assetSearchHint">{% translate "Sélectionnez d'abord une localisation" %}</small>
            <div id="assetResults" class="search-results"></div>
            <div id="selectedAsset" class="selected-item" style="display: none;">
                <span id="selectedAssetText"></span>
                <span class="remove-btn" onclick="clearAsset()"><i class="bi bi-x-lg"></i></span>
            </div>
            {% endif %}
            <input type="hidden" name="asset_ct"  id="assetCt"  value="{{ form_data.asset_ct|default:'' }}">
            <input type="hidden" name="asset_obj" id="assetObj" value="{{ form_data.asset_obj|default:'' }}">
        </div>

        <!-- Titre -->
        <div class="form-section">
            <label for="titleInput" class="form-label required-field">{% translate "Titre" %}</label>
            <input type="text"
                   class="form-control"
                   name="title"
                   id="titleInput"
                   value="{{ form_data.title|default:'' }}"
                   placeholder="{% translate 'Titre de l\'intervention' %}"
                   required>
        </div>

        <!-- Type de maintenance -->
        <div class="form-section">
            <label class="form-label required-field">{% translate "Type de maintenance" %}</label>
            <div class="d-flex gap-2 flex-wrap">
                <input type="radio" class="btn-check" name="maintain_type" id="maintainCorrective"
                       value="corrective"
                       {% if form_data.maintain_type != 'ameliorative' %}checked{% endif %}
                       autocomplete="off">
                <label class="btn btn-outline-danger" for="maintainCorrective">
                    <i class="bi bi-tools me-1"></i>{% translate "Corrective" %}
                </label>

                <input type="radio" class="btn-check" name="maintain_type" id="maintainAmeliorative"
                       value="ameliorative"
                       {% if form_data.maintain_type == 'ameliorative' %}checked{% endif %}
                       autocomplete="off">
                <label class="btn btn-outline-success" for="maintainAmeliorative">
                    <i class="bi bi-arrow-up-circle me-1"></i>{% translate "Améliorative" %}
                </label>
            </div>
        </div>

        <!-- Statut -->
        <input type="hidden" name="status" id="statusSelect" value="in_preparation">

        <!-- Boutons -->
        <div class="d-grid gap-2 mt-4">
            <button type="submit" class="btn btn-success btn-lg">
                <i class="bi bi-check-lg me-2"></i>{% translate "Créer l'intervention" %}
            </button>
            <a href="{% url 'mobile:choose_thematic_for_intervention_mobile' %}" class="btn btn-outline-secondary">
                {% translate "Annuler" %}
            </a>
        </div>
    </form>
</div>
{% endblock content %}

{% block extra_scripts %}
<script>
(function() {
    const locationSearch = document.getElementById('locationSearch');
    const locationResults = document.getElementById('locationResults');
    const locationCt   = document.getElementById('locationCt');
    const locationObj  = document.getElementById('locationObj');
    const locationLon  = document.getElementById('locationLon');
    const locationLat  = document.getElementById('locationLat');
    const locationCode = document.getElementById('locationCode');
    const selectedLocation = document.getElementById('selectedLocation');
    const selectedLocationText = document.getElementById('selectedLocationText');

    const assetSearch     = document.getElementById('assetSearch');
    const assetResults    = document.getElementById('assetResults');
    const assetCt         = document.getElementById('assetCt');
    const assetObj        = document.getElementById('assetObj');
    const selectedAsset   = document.getElementById('selectedAsset');
    const selectedAssetText = document.getElementById('selectedAssetText');
    const assetSearchHint = document.getElementById('assetSearchHint');

    const categorySelect  = document.getElementById('categorySelect');

    const thematic = '{{ thematic.code }}';
    const assetSearchUrl = '{{ asset_search_url|default:"" }}';

    let searchTimeout = null;

    locationSearch.addEventListener('input', function() {
        clearTimeout(searchTimeout);
        const query = this.value.trim();
        if (query.length < 2) {
            locationResults.classList.remove('show');
            return;
        }
        searchTimeout = setTimeout(() => searchLocations(query), 300);
    });

    async function searchLocations(query) {
        try {
            const url = `{% url 'assets:locations_autocomplete' %}?q=${encodeURIComponent(query)}&thematic=${encodeURIComponent(thematic)}`;
            const response = await fetch(url);
            const data = await response.json();

            locationResults.innerHTML = '';
            if (data.length > 0) {
                data.forEach(item => {
                    const div = document.createElement('div');
                    div.className = 'search-result-item';
                    div.innerHTML = `<strong>${item.code || ''}</strong>${item.code && item.name ? ' - ' : ''}${item.name || item.label || ''}`;
                    div.addEventListener('click', () => selectLocation(item));
                    locationResults.appendChild(div);
                });
            } else {
                locationResults.innerHTML = '<div class="search-result-item text-muted">{% translate "Aucun résultat" %}</div>';
            }
            locationResults.classList.add('show');
        } catch (error) {
            console.error('Error searching locations:', error);
        }
    }

    window.selectLocation = function(item) {
        locationCt.value  = item.value ? item.value.ct  : (item.ct || '');
        locationObj.value = item.value ? item.value.obj : (item.obj || '');
        locationLon.value = item.lon || '';
        locationLat.value = item.lat || '';
        locationCode.value = item.code || '';

        const label = item.code && item.name
            ? `${item.code} - ${item.name}`
            : (item.label || item.name || item.code || '');
        selectedLocationText.textContent = label;
        selectedLocation.style.display = 'flex';
        locationSearch.value = '';
        locationResults.classList.remove('show');

        // Activer la recherche d'équipement si disponible
        if (assetSearch && assetSearchUrl) {
            assetSearch.disabled = false;
            if (assetSearchHint) assetSearchHint.style.display = 'none';
        }
    };

    window.clearLocation = function() {
        locationCt.value = '';
        locationObj.value = '';
        locationLon.value = '';
        locationLat.value = '';
        locationCode.value = '';
        selectedLocation.style.display = 'none';
        selectedLocationText.textContent = '';

        // Désactiver et réinitialiser la recherche d'équipement
        if (assetSearch) {
            clearAsset();
            assetSearch.disabled = true;
            if (assetSearchHint) assetSearchHint.style.display = 'block';
        }
    };

    // Recherche d'équipement
    if (assetSearch && assetSearchUrl) {
        assetSearch.addEventListener('input', function() {
            clearTimeout(searchTimeout);
            const query = this.value.trim();
            if (query.length < 2 || !locationObj.value) {
                assetResults.classList.remove('show');
                return;
            }
            searchTimeout = setTimeout(() => searchAssets(query), 300);
        });
    }

    async function searchAssets(query) {
        try {
            const categoryId = categorySelect ? categorySelect.value : '';
            let url = `${assetSearchUrl}?q=${encodeURIComponent(query)}&location_id=${locationObj.value}`;
            if (categoryId) {
                url += `&asset_category=${categoryId}`;
            }
            const response = await fetch(url);
            const data = await response.json();

            assetResults.innerHTML = '';
            if (data.length > 0) {
                data.forEach(item => {
                    const div = document.createElement('div');
                    div.className = 'search-result-item';
                    div.innerHTML = item.label;
                    div.addEventListener('click', () => selectAsset(item));
                    assetResults.appendChild(div);
                });
            } else {
                assetResults.innerHTML = '<div class="search-result-item text-muted">{% translate "Aucun résultat" %}</div>';
            }
            assetResults.classList.add('show');
        } catch (error) {
            console.error('Error searching assets:', error);
        }
    }

    window.selectAsset = function(item) {
        if (assetCt)  assetCt.value  = item.equipment_ct;
        if (assetObj) assetObj.value = item.id;
        if (selectedAssetText) selectedAssetText.textContent = item.label;
        if (selectedAsset) selectedAsset.style.display = 'flex';
        if (assetSearch) assetSearch.value = '';
        if (assetResults) assetResults.classList.remove('show');
    };

    window.clearAsset = function() {
        if (assetCt)  assetCt.value  = '';
        if (assetObj) assetObj.value = '';
        if (selectedAsset) selectedAsset.style.display = 'none';
        if (selectedAssetText) selectedAssetText.textContent = '';
    };

    // Fermer les résultats en cliquant en dehors
    document.addEventListener('click', function(e) {
        if (!locationSearch.contains(e.target) && !locationResults.contains(e.target)) {
            locationResults.classList.remove('show');
        }
        if (assetSearch && assetResults) {
            if (!assetSearch.contains(e.target) && !assetResults.contains(e.target)) {
                assetResults.classList.remove('show');
            }
        }
    });
})();
</script>
{% endblock extra_scripts %}