{% extends 'base.html.twig' %}

{% block title %}Mettre à jour le point relais - {{ contributor.name }}{% endblock %}

{% block body %}
<div class="bg-white rounded-lg shadow-md p-6">
    {# En-tête #}
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-2xl font-bold">Mettre à jour le point relais</h1>
            <p class="text-gray-600 mt-1">{{ contributor.name }}</p>
        </div>
        <a href="{{ path('app_contributor_index') }}" 
           class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold py-2 px-4 rounded">
            ← Retour à la liste
        </a>
    </div>

    {# Informations de livraison #}
    <div class="p-4 bg-blue-50 rounded-lg mb-6">
        <h2 class="text-lg font-semibold mb-3">📍 Informations de livraison</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <p><strong>Nom :</strong> {{ contributor.deliveryFirstName ?? contributor.billingFirstName }} {{ contributor.deliveryLastName ?? contributor.billingLastName }}</p>
                <p><strong>Email :</strong> {{ contributor.email }}</p>
                {% if contributor.ululesId %}<p><strong>ID Ulule :</strong> {{ contributor.ululesId }}</p>{% endif %}
            </div>
            <div>
                <p><strong>Adresse :</strong> {{ contributor.deliveryAddress ?? contributor.address }}</p>
                {% if contributor.deliveryAddress2 %}<p><strong>Complément :</strong> {{ contributor.deliveryAddress2 }}</p>{% endif %}
                <p><strong>Code postal :</strong> {{ contributor.deliveryPostalCode ?? contributor.postalCode }}</p>
                <p><strong>Ville :</strong> {{ contributor.deliveryCity ?? contributor.city }}</p>
                <p><strong>Pays :</strong> {{ contributor.deliveryCountry ?? contributor.country }}</p>
                <p><strong>Téléphone :</strong> {{ contributor.deliveryPhone ?? contributor.phone }}</p>
            </div>
        </div>
    </div>

    <form method="post" id="relay-form">
        {# Saisie manuelle du RelayID #}
        <div class="p-4 bg-yellow-50 border border-yellow-200 rounded-lg mb-6">
            <h2 class="text-lg font-semibold mb-3">✏️ Saisie manuelle du RelayID</h2>
            <p class="text-sm text-gray-600 mb-3">
                Saisissez l'ID du point relais (6 caractères). La validation se fait automatiquement.
                <strong>Cette saisie a la priorité</strong> sur la sélection ci-dessous.
            </p>

            <div class="flex items-start space-x-3">
                <div class="flex-1 max-w-xs">
                    <label for="manual_relay_id" class="block text-sm font-medium text-gray-700 mb-1">
                        RelayID :
                    </label>
                    <div class="relative">
                        <input type="text"
                               id="manual_relay_id"
                               name="manual_relay_id"
                               placeholder="Ex: 012345"
                               maxlength="6"
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">

                        {# Indicateur de chargement #}
                        <div id="validation-spinner" class="absolute right-2 top-2 hidden">
                            <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600"></div>
                        </div>
                    </div>
                </div>
            </div>

            {# Résultat de validation en temps réel #}
            <div id="manual-validation-result" class="mt-3 hidden"></div>

            {# Champs cachés pour les données du point relais validé #}
            <input type="hidden" name="manual_relay_name" id="manual_relay_name">
            <input type="hidden" name="manual_relay_address" id="manual_relay_address">
        </div>

        {# Points relais disponibles #}
        {% if relay_points is not empty %}
            <div class="mb-6" id="relay-cards-section">
                <h2 class="text-lg font-semibold mb-4">📦 Ou choisissez parmi les points relais disponibles près de {{ postal_code }} {{ contributor.deliveryCity ?? contributor.city }}</h2>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6" id="relay-cards-container">
                    {% for relay in relay_points %}
                        <div class="border border-gray-200 rounded-lg p-4 hover:border-blue-300 hover:shadow-md transition-all duration-200 relay-card cursor-pointer"
                             data-relay-id="{{ relay.Num }}"
                             data-relay-name="{{ relay.Nom }}"
                             data-relay-address="{{ relay.Adresse1 }}, {{ relay.CP }} {{ relay.Ville }}">

                            <div class="flex items-start justify-between mb-3">
                                <div class="flex-grow">
                                    <h3 class="font-medium text-gray-900 mb-1">{{ relay.Nom }}</h3>
                                    <p class="text-sm text-gray-600">{{ relay.Adresse1 }}</p>
                                    <p class="text-sm text-gray-600">{{ relay.CP }} {{ relay.Ville }}</p>
                                </div>
                                <input type="radio"
                                       name="relay_selection"
                                       value="{{ relay.Num }}"
                                       class="mt-1 text-blue-600 border-gray-300 focus:ring-blue-500 relay-radio">
                            </div>

                            <div class="text-xs text-gray-500 space-y-1">
                                <p><strong>ID :</strong> {{ relay.Num }}</p>
                                {% if relay.Distance %}
                                    <p><strong>Distance :</strong> {{ relay.Distance }}m</p>
                                {% endif %}

                                {# Horaires (quelques jours seulement pour économiser l'espace) #}
                                <div class="mt-2 pt-2 border-t border-gray-100">
                                    {% if relay.Horaires_Lundi and relay.Horaires_Lundi != 'Fermé' %}
                                        <p><strong>Lun :</strong> {{ relay.Horaires_Lundi }}</p>
                                    {% endif %}
                                    {% if relay.Horaires_Mardi and relay.Horaires_Mardi != 'Fermé' %}
                                        <p><strong>Mar :</strong> {{ relay.Horaires_Mardi }}</p>
                                    {% endif %}
                                    {% if relay.Horaires_Vendredi and relay.Horaires_Vendredi != 'Fermé' %}
                                        <p><strong>Ven :</strong> {{ relay.Horaires_Vendredi }}</p>
                                    {% endif %}
                                    {% if relay.Horaires_Samedi and relay.Horaires_Samedi != 'Fermé' %}
                                        <p><strong>Sam :</strong> {{ relay.Horaires_Samedi }}</p>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>

                {# Champs cachés pour les données du point relais sélectionné via cartes #}
                <input type="hidden" name="relay_id" id="selected_relay_id">
                <input type="hidden" name="relay_name" id="selected_relay_name">
                <input type="hidden" name="relay_address" id="selected_relay_address">
            </div>
        {% else %}
            <div class="p-4 bg-yellow-50 border border-yellow-200 rounded-lg mb-6">
                <p class="text-yellow-700">
                    <strong>Aucun point relais trouvé</strong> pour le code postal {{ postal_code }}
                    {% if country != 'FR' %} ({{ country }}){% endif %}.
                </p>
                <p class="text-sm text-yellow-600 mt-2">
                    Utilisez la saisie manuelle ci-dessus ou vérifiez l'adresse du contributeur.
                </p>
            </div>
        {% endif %}

        {# Boutons de validation #}
        <div class="flex justify-between items-center pt-4 border-t">
            <a href="{{ path('app_contributor_detail', {'id': contributor.id}) }}"
               class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold py-2 px-4 rounded">
                Annuler
            </a>

            <button type="submit"
                    id="submit-btn"
                    disabled
                    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:bg-gray-400 disabled:cursor-not-allowed">
                Enregistrer le point relais
            </button>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const relayCards = document.querySelectorAll('.relay-card');
    const relayRadios = document.querySelectorAll('.relay-radio');
    const submitBtn = document.getElementById('submit-btn');
    const manualRelayInput = document.getElementById('manual_relay_id');
    const validationResult = document.getElementById('manual-validation-result');
    const validationSpinner = document.getElementById('validation-spinner');
    const relayCardsSection = document.getElementById('relay-cards-section');

    // État de validation
    let manualRelayValidated = false;
    let cardSelected = false;
    let validationTimeout = null;

    // Fonction pour mettre à jour l'état du bouton submit
    function updateSubmitButton() {
        const hasValidManualInput = manualRelayInput.value.trim() !== '' && manualRelayValidated;

        if (hasValidManualInput) {
            submitBtn.disabled = false;
            submitBtn.textContent = 'Enregistrer le RelayID validé';
        } else if (cardSelected && manualRelayInput.value.trim() === '') {
            submitBtn.disabled = false;
            submitBtn.textContent = 'Enregistrer le point relais sélectionné';
        } else {
            submitBtn.disabled = true;
            submitBtn.textContent = 'Enregistrer le point relais';
        }

        // Gestion des classes CSS
        if (submitBtn.disabled) {
            submitBtn.classList.add('disabled:bg-gray-400', 'disabled:cursor-not-allowed');
            submitBtn.classList.remove('hover:bg-blue-700');
        } else {
            submitBtn.classList.remove('disabled:bg-gray-400', 'disabled:cursor-not-allowed');
            submitBtn.classList.add('hover:bg-blue-700');
        }
    }

    // Fonction pour valider le RelayID via AJAX
    function validateRelayId(relayId) {
        if (relayId.length !== 6) {
            return;
        }

        validationSpinner.classList.remove('hidden');
        validationResult.classList.add('hidden');

        fetch('{{ path('app_contributor_validate_relay_ajax', {'id': contributor.id}) }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: 'relay_id=' + encodeURIComponent(relayId)
        })
        .then(response => response.json())
        .then(data => {
            validationSpinner.classList.add('hidden');

            if (data.valid) {
                // Succès - afficher les infos du point relais
                const relayData = data.relay_data;
                validationResult.innerHTML = `
                    <div class="border border-green-200 bg-green-50 rounded-lg p-4">
                        <div class="flex items-start">
                            <span class="text-green-600 text-lg mr-3">✅</span>
                            <div class="flex-grow">
                                <h4 class="font-medium text-green-900 mb-2">${relayData.name}</h4>
                                <p class="text-sm text-green-700 mb-1">
                                    <strong>Adresse :</strong> ${relayData.full_address}
                                </p>
                                <p class="text-sm text-green-700 mb-2">
                                    <strong>ID :</strong> ${relayData.id}
                                </p>

                                <div class="grid grid-cols-2 gap-2 text-xs text-green-600 mt-3">
                                    ${relayData.horaires.lundi ? `<p><strong>Lun :</strong> ${relayData.horaires.lundi}</p>` : ''}
                                    ${relayData.horaires.mardi ? `<p><strong>Mar :</strong> ${relayData.horaires.mardi}</p>` : ''}
                                    ${relayData.horaires.mercredi ? `<p><strong>Mer :</strong> ${relayData.horaires.mercredi}</p>` : ''}
                                    ${relayData.horaires.jeudi ? `<p><strong>Jeu :</strong> ${relayData.horaires.jeudi}</p>` : ''}
                                    ${relayData.horaires.vendredi ? `<p><strong>Ven :</strong> ${relayData.horaires.vendredi}</p>` : ''}
                                    ${relayData.horaires.samedi ? `<p><strong>Sam :</strong> ${relayData.horaires.samedi}</p>` : ''}
                                </div>
                            </div>
                        </div>
                    </div>
                `;

                // Remplir les champs cachés
                document.getElementById('manual_relay_name').value = relayData.name;
                document.getElementById('manual_relay_address').value = relayData.full_address;

                manualRelayValidated = true;
            } else {
                // Erreur
                validationResult.innerHTML = `
                    <div class="border border-red-200 bg-red-50 rounded-lg p-3">
                        <div class="flex items-center">
                            <span class="text-red-600 text-lg mr-2">❌</span>
                            <p class="text-red-700 text-sm">${data.error}</p>
                        </div>
                    </div>
                `;

                // Vider les champs cachés
                document.getElementById('manual_relay_name').value = '';
                document.getElementById('manual_relay_address').value = '';

                manualRelayValidated = false;
            }

            validationResult.classList.remove('hidden');
            updateSubmitButton();
        })
        .catch(error => {
            validationSpinner.classList.add('hidden');
            validationResult.innerHTML = `
                <div class="border border-red-200 bg-red-50 rounded-lg p-3">
                    <div class="flex items-center">
                        <span class="text-red-600 text-lg mr-2">❌</span>
                        <p class="text-red-700 text-sm">Erreur de connexion</p>
                    </div>
                </div>
            `;
            validationResult.classList.remove('hidden');
            manualRelayValidated = false;
            updateSubmitButton();
        });
    }

    // Gestion de la saisie manuelle avec validation temps réel
    manualRelayInput.addEventListener('input', function() {
        const value = this.value.trim();

        // Reset de l'état
        manualRelayValidated = false;
        validationResult.classList.add('hidden');
        validationSpinner.classList.add('hidden');

        // Vider les champs cachés
        document.getElementById('manual_relay_name').value = '';
        document.getElementById('manual_relay_address').value = '';

        // Si on tape dans le champ manuel, désactiver les cartes
        if (value !== '') {
            relayCards.forEach(card => {
                card.classList.remove('border-blue-500', 'bg-blue-50');
                card.classList.add('border-gray-200', 'opacity-50');
            });
            relayRadios.forEach(radio => radio.checked = false);
            cardSelected = false;

            // Vider les champs cachés des cartes
            document.getElementById('selected_relay_id').value = '';
            document.getElementById('selected_relay_name').value = '';
            document.getElementById('selected_relay_address').value = '';

            // Déclencher la validation si 6 caractères
            if (value.length === 6) {
                clearTimeout(validationTimeout);
                validationTimeout = setTimeout(() => {
                    validateRelayId(value);
                }, 500); // Délai de 500ms pour éviter trop d'appels
            }
        } else {
            // Si on vide le champ manuel, réactiver les cartes
            relayCards.forEach(card => {
                card.classList.remove('opacity-50');
            });
            clearTimeout(validationTimeout);
        }

        updateSubmitButton();
    });

    // Gestion de la sélection des cartes
    relayCards.forEach(card => {
        card.addEventListener('click', function() {
            // Si le champ manuel est rempli, on ignore le clic sur les cartes
            if (manualRelayInput.value.trim() !== '') {
                return;
            }

            // Désélectionner toutes les cartes
            relayCards.forEach(c => {
                c.classList.remove('border-blue-500', 'bg-blue-50');
                c.classList.add('border-gray-200');
            });

            // Décocher tous les radios
            relayRadios.forEach(radio => radio.checked = false);

            // Sélectionner la carte cliquée
            this.classList.remove('border-gray-200');
            this.classList.add('border-blue-500', 'bg-blue-50');

            // Cocher le radio correspondant
            const radio = this.querySelector('.relay-radio');
            radio.checked = true;

            // Remplir les champs cachés
            document.getElementById('selected_relay_id').value = this.dataset.relayId;
            document.getElementById('selected_relay_name').value = this.dataset.relayName;
            document.getElementById('selected_relay_address').value = this.dataset.relayAddress;

            cardSelected = true;
            updateSubmitButton();
        });
    });

    // Gestion directe des radios
    relayRadios.forEach(radio => {
        radio.addEventListener('change', function() {
            if (this.checked && manualRelayInput.value.trim() === '') {
                this.closest('.relay-card').click();
            }
        });
    });

    // Initialiser l'état du bouton
    updateSubmitButton();
});
</script>
{% endblock %}