@props([
    'name' => 'ville',
    'codePostalInputId' => 'codePostal',
    'label' => 'Ville',
    'value' => '', 
    'fwsemibold' => ''
])

<div class="mb-3">
    <label for="{{ $name }}" class="form-label {{ $fwsemibold }}">{{ $label }}</label>
    <input list="villeList"
           id="{{ $name }}"
           name="{{ $name }}"
           class="form-control"
           value="{{ old($name, $value) }}"
           autocomplete="off">

    <datalist id="villeList"></datalist>

    @error($name)
        <small class="text-danger">{{ $message }}</small>
    @enderror
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const cpInput = document.getElementById("{{ $codePostalInputId }}");
    const villeInput = document.getElementById("{{ $name }}");
    const datalist = document.getElementById("villeList");

    async function fetchVillesParCP(cp) {
        if (cp.length === 5 && /^\d{5}$/.test(cp)) {
            try {
                const response = await fetch(`https://geo.api.gouv.fr/communes?codePostal=${cp}&fields=nom&format=json&geometry=centre`);
                const villes = await response.json();
                remplirDatalist(villes);
            } catch (error) {
                console.error("Erreur API code postal :", error);
            }
        }
    }

    async function fetchVillesParNom(nom) {
        if (nom.length >= 4) {
            try {
                const response = await fetch(`https://geo.api.gouv.fr/communes?nom=${nom}&fields=nom&format=json`);
                const villes = await response.json();
                remplirDatalist(villes);
            } catch (error) {
                console.error("Erreur API nom ville :", error);
            }
        }
    }

    function remplirDatalist(villes) {
        datalist.innerHTML = '';
        villes.forEach(ville => {
            const option = document.createElement('option');
            option.value = ville.nom;
            datalist.appendChild(option);
        });
    }

    if (cpInput && villeInput) {
        // Lorsqu'on quitte le champ code postal
        cpInput.addEventListener('blur', function () {
            fetchVillesParCP(cpInput.value);
        });

        // Lorsqu'on entre dans le champ ville, on vérifie si CP déjà rempli
        villeInput.addEventListener('focus', function () {
            fetchVillesParCP(cpInput.value);
        });

        // Lors de la saisie dans le champ ville
        villeInput.addEventListener('input', function () {
            if (!cpInput.value || cpInput.value.length !== 5) {
                fetchVillesParNom(villeInput.value);
            }
        });
    }
});

</script>