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

{% block title %}{{ 'gps.title'|trans }} - {{ parent() }}{% endblock %}

{% block dashboard_content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- En-tête de la page -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h1 class="h3 mb-1">{{ 'gps.title'|trans }}</h1>
                    <p class="text-muted mb-0">{{ 'gps.description'|trans }}</p>
                </div>
                
                {% if googleMapsEnabled %}
                    <div class="badge bg-success">
                        <i class="fas fa-check-circle me-1"></i>
                        {{ 'gps.google_maps_enabled'|trans }}
                    </div>
                {% else %}
                    <div class="badge bg-warning">
                        <i class="fas fa-exclamation-triangle me-1"></i>
                        {{ 'gps.google_maps_disabled'|trans }}
                    </div>
                {% endif %}
            </div>

            <!-- Carte/Status actuel -->
            <div class="row mb-4">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-map-marker-alt me-2"></i>
                                {{ 'gps.current_location'|trans }}
                            </h5>
                        </div>
                        <div class="card-body">
                            {% if hasGps and coordinates %}
                                <!-- Coordonnées actuelles -->
                                <div class="row mb-3">
                                    <div class="col-md-4">
                                        <strong>{{ 'gps.latitude'|trans }}:</strong><br>
                                        <code>{{ coordinates.latitude|number_format(8) }}</code>
                                    </div>
                                    <div class="col-md-4">
                                        <strong>{{ 'gps.longitude'|trans }}:</strong><br>
                                        <code>{{ coordinates.longitude|number_format(8) }}</code>
                                    </div>
                                    <div class="col-md-4">
                                        <strong>{{ 'gps.heading'|trans }}:</strong><br>
                                        {% if coordinates.heading %}
                                            <code>{{ coordinates.heading|number_format(2) }}°</code>
                                        {% else %}
                                            <span class="text-muted">{{ 'gps.not_defined'|trans }}</span>
                                        {% endif %}
                                    </div>
                                </div>

                                <!-- Mini-carte -->
                                <div id="miniMap" class="border rounded" style="height: 200px; width: 100%;">
                                    <!-- La carte sera chargée ici via JavaScript -->
                                </div>
                            {% else %}
                                <div class="text-center py-4">
                                    <i class="fas fa-map-marker-alt fa-3x text-muted mb-3"></i>
                                    <h5 class="text-muted">{{ 'gps.no_coordinates'|trans }}</h5>
                                    <p class="text-muted">{{ 'gps.no_coordinates_help'|trans }}</p>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-info-circle me-2"></i>
                                {{ 'gps.info'|trans }}
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <i class="fas fa-check text-success me-2"></i>
                                {{ 'gps.info_precision'|trans }}
                            </div>
                            <div class="mb-3">
                                <i class="fas fa-eye text-info me-2"></i>
                                {{ 'gps.info_streetview'|trans }}
                            </div>
                            <div class="mb-3">
                                <i class="fas fa-search text-primary me-2"></i>
                                {{ 'gps.info_search'|trans }}
                            </div>
                            <div>
                                <i class="fas fa-shield-alt text-warning me-2"></i>
                                {{ 'gps.info_privacy'|trans }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Formulaire GPS -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-cog me-2"></i>
                        {{ 'gps.configuration'|trans }}
                    </h5>
                </div>
                <div class="card-body">
                    {% if googleMapsEnabled %}
                        {{ form_start(form, {'attr': {'class': 'gps-form', 'data-member-id': member.id}}) }}
                            <div class="row">
                                <!-- Coordonnées GPS -->
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        {{ form_label(form.gpsLatitude) }}
                                        {{ form_widget(form.gpsLatitude) }}
                                        {{ form_help(form.gpsLatitude) }}
                                        {{ form_errors(form.gpsLatitude) }}
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        {{ form_label(form.gpsLongitude) }}
                                        {{ form_widget(form.gpsLongitude) }}
                                        {{ form_help(form.gpsLongitude) }}
                                        {{ form_errors(form.gpsLongitude) }}
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        {{ form_label(form.streetviewHeading) }}
                                        {{ form_widget(form.streetviewHeading) }}
                                        {{ form_help(form.streetviewHeading) }}
                                        {{ form_errors(form.streetviewHeading) }}
                                    </div>
                                </div>
                            </div>

                            <!-- Boutons d'actions -->
                            <div class="row">
                                <div class="col-12">
                                    <div class="d-flex flex-wrap gap-2 mb-3">
                                        {{ form_widget(form.openMapsModal) }}
                                        {{ form_widget(form.openStreetViewModal) }}
                                        {{ form_widget(form.clearLocation) }}
                                    </div>
                                    
                                    <hr>
                                    
                                    <div class="d-flex justify-content-between">
                                        <a href="{{ path('dashboard_member') }}" class="btn btn-outline-secondary">
                                            <i class="fas fa-arrow-left me-1"></i>
                                            {{ 'common.back'|trans }}
                                        </a>
                                        {{ form_widget(form.save) }}
                                    </div>
                                </div>
                            </div>

                            {{ form_rest(form) }}
                        {{ form_end(form) }}
                    {% else %}
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            {{ 'gps.service_disabled'|trans }}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modals -->
{% include 'dashboard/profile/_gps_map_modal.html.twig' %}
{% include 'dashboard/profile/_streetview_modal.html.twig' %}
{% endblock %}

{% block javascripts %}
{{ parent() }}

<!-- Variables JavaScript -->
<script>
    window.GPS_CONFIG = {
        apiKey: null, // Sera chargé via AJAX pour la sécurité
        enabled: {{ googleMapsEnabled ? 'true' : 'false' }},
        member: {
            id: {{ member.id }},
            address: {{ member.address ? '"' ~ member.address|e('js') ~ '"' : 'null' }},
            zipCode: {{ member.zipCode ? '"' ~ member.zipCode|e('js') ~ '"' : 'null' }},
            city: {{ member.city ? '"' ~ member.city.name|e('js') ~ '"' : 'null' }},
            coordinates: {{ coordinates ? coordinates|json_encode : 'null' }}
        },
        urls: {
            config: '{{ path('dashboard_gps_config') }}',
            saveCoordinates: '{{ path('dashboard_gps_save_coordinates') }}'
        },
        translations: {
            confirmClear: '{{ 'gps.clear_confirm'|trans|e('js') }}',
            errorSaving: '{{ 'gps.error_saving'|trans|e('js') }}',
            coordinatesSaved: '{{ 'gps.coordinates_saved'|trans|e('js') }}',
            invalidCoordinates: '{{ 'gps.invalid_coordinates'|trans|e('js') }}',
            mapsError: '{{ 'gps.maps_error'|trans|e('js') }}'
        }
    };
</script>
<script src="{{ asset('assets/js/gps-manager.js') }}"></script>
{% endblock %}