{# Modal Google Maps pour positionnement GPS #}
<div class="modal fade" id="gpsMapModal" tabindex="-1" aria-labelledby="gpsMapModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="gpsMapModalLabel">
                    <i class="fas fa-map-marker-alt me-2"></i>
                    {{ 'gps.position_marker'|trans }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <div class="modal-body p-0">
                <!-- Instructions -->
                <div class="alert alert-info m-3 mb-2">
                    <div class="row">
                        <div class="col-md-8">
                            <strong>{{ 'gps.instructions_title'|trans }}</strong>
                            <ul class="mb-0 mt-2">
                                <li>{{ 'gps.instruction_1'|trans }}</li>
                                <li>{{ 'gps.instruction_2'|trans }}</li>
                                <li>{{ 'gps.instruction_3'|trans }}</li>
                            </ul>
                        </div>
                        <div class="col-md-4">
                            <!-- Champ de recherche d'adresse -->
                            <div class="input-group">
                                <input type="text" id="addressSearch" class="form-control" 
                                       placeholder="{{ 'gps.search_address'|trans }}">
                                <button class="btn btn-outline-secondary" type="button" id="searchButton">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Affichage des coordonnées en temps réel -->
                <div class="mx-3 mb-3">
                    <div class="row">
                        <div class="col-md-4">
                            <label class="form-label small">{{ 'gps.latitude'|trans }}</label>
                            <input type="text" id="currentLatitude" class="form-control form-control-sm" readonly>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small">{{ 'gps.longitude'|trans }}</label>
                            <input type="text" id="currentLongitude" class="form-control form-control-sm" readonly>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small">{{ 'gps.address'|trans }}</label>
                            <input type="text" id="currentAddress" class="form-control form-control-sm" readonly>
                        </div>
                    </div>
                </div>

                <!-- Carte Google Maps -->
                <div id="googleMap" style="height: 500px; width: 100%;">
                    <!-- La carte sera chargée ici -->
                    <div class="d-flex align-items-center justify-content-center h-100">
                        <div class="text-center">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">{{ 'common.loading'|trans }}</span>
                            </div>
                            <p class="mt-2">{{ 'gps.loading_map'|trans }}</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="modal-footer">
                <div class="d-flex justify-content-between w-100">
                    <div>
                        <!-- Informations sur la position -->
                        <small class="text-muted" id="positionInfo">
                            {{ 'gps.click_to_position'|trans }}
                        </small>
                    </div>
                    <div>
                        <button type="button" class="btn btn-outline-secondary me-2" data-bs-dismiss="modal">
                            {{ 'common.cancel'|trans }}
                        </button>
                        <button type="button" class="btn btn-primary" id="confirmPosition" disabled>
                            <i class="fas fa-check me-1"></i>
                            {{ 'gps.confirm_position'|trans }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>