{# templates/location/_gps_module.html.twig #}
{# Modulo GPS per visualizzare e controllare il GPS del modem SIM7600 #}
{# Parametri: macchina (entity), deviceId (string), lastGps (array|null) #}

<div class="sim7600-gps-module" data-device-id="{{ deviceId }}" data-machine-id="{{ macchina.id }}">
    
    {# Connection Status Banner #}
    <div class="module-connection-status">
        <div class="connection-indicator offline">
            <i class="fas fa-circle"></i>
            <span class="status-text">{{ 'Checking connection...'|trans }}</span>
        </div>
    </div>

    <div class="row">
        {# Left Column - GPS Status & Controls #}
        <div class="col-md-4">
            <section class="tile color transparent-black">
                <div class="tile-header">
                    <h1><i class="fas fa-satellite"></i> {{ 'GPS Status'|trans }}</h1>
                    <div class="controls">
                        <a href="#" class="refresh btn-refresh-gps" title="{{ 'Refresh'|trans }}">
                            <i class="fa fa-refresh"></i>
                        </a>
                    </div>
                </div>
                <div class="tile-body gps-status-content">
                    <div class="gps-status-display">
                        <div class="status-icon gps-off">
                            <i class="fas fa-satellite-dish"></i>
                        </div>
                        <div class="status-info">
                            <span class="status-label" data-field="gps_state">{{ 'OFF'|trans }}</span>
                            <span class="fix-status" data-field="fix_status">{{ 'No Fix'|trans }}</span>
                        </div>
                    </div>
                    
                    <div class="gps-controls">
                        <button class="btn btn-success btn-start-gps" disabled>
                            <i class="fas fa-play"></i> {{ 'Start GPS'|trans }}
                        </button>
                        <button class="btn btn-danger btn-stop-gps" disabled style="display: none;">
                            <i class="fas fa-stop"></i> {{ 'Stop GPS'|trans }}
                        </button>
                    </div>

                    <div class="satellites-info">
                        <div class="satellites-display">
                            <i class="fas fa-satellite fa-2x"></i>
                            <span class="satellites-count" data-field="satellites">0</span>
                            <span class="satellites-label">{{ 'Satellites'|trans }}</span>
                        </div>
                    </div>
                </div>
            </section>

            {# GPS Position Info #}
            <section class="tile color transparent-black">
                <div class="tile-header">
                    <h1><i class="fas fa-map-marker-alt"></i> {{ 'Position'|trans }}</h1>
                </div>
                <div class="tile-body gps-position-content">
                    <div class="position-data">
                        <div class="position-row">
                            <span class="position-label">{{ 'Latitude'|trans }}:</span>
                            <span class="position-value" data-field="latitude">--</span>
                        </div>
                        <div class="position-row">
                            <span class="position-label">{{ 'Longitude'|trans }}:</span>
                            <span class="position-value" data-field="longitude">--</span>
                        </div>
                        <div class="position-row">
                            <span class="position-label">{{ 'Altitude'|trans }}:</span>
                            <span class="position-value"><span data-field="altitude">--</span> m</span>
                        </div>
                        <div class="position-row">
                            <span class="position-label">{{ 'Speed'|trans }}:</span>
                            <span class="position-value"><span data-field="speed">--</span> km/h</span>
                        </div>
                        <div class="position-row">
                            <span class="position-label">{{ 'Course'|trans }}:</span>
                            <span class="position-value"><span data-field="course">--</span>°</span>
                        </div>
                        <div class="position-row">
                            <span class="position-label">{{ 'Last Update'|trans }}:</span>
                            <span class="position-value" data-field="timestamp">--</span>
                        </div>
                    </div>
                </div>
            </section>

            {# Tracking Settings #}
            <section class="tile color transparent-black">
                <div class="tile-header">
                    <h1><i class="fas fa-route"></i> {{ 'Tracking'|trans }}</h1>
                </div>
                <div class="tile-body tracking-settings-content">
                    <div class="form-group">
                        <label>{{ 'Minimum Distance'|trans }} (m):</label>
                        <input type="number" class="form-control input-min-distance" value="50" min="1" max="10000">
                        <small class="form-text text-muted">{{ 'Track points only if movement exceeds this distance'|trans }}</small>
                    </div>
                    <div class="form-group">
                        <label>{{ 'Date Range'|trans }}:</label>
                        <div class="date-range-inputs">
                            <input type="text" class="form-control datepicker track-date-from" placeholder="{{ 'From'|trans }}">
                            <input type="text" class="form-control datepicker track-date-to" placeholder="{{ 'To'|trans }}">
                        </div>
                    </div>
                    <div class="tracking-controls">
                        <button class="btn btn-info btn-load-track">
                            <i class="fas fa-route"></i> {{ 'Load Track'|trans }}
                        </button>
                        <button class="btn btn-secondary btn-clear-track">
                            <i class="fas fa-eraser"></i> {{ 'Clear'|trans }}
                        </button>
                    </div>
                    <div class="track-info" style="display: none;">
                        <span class="track-points-count">0</span> {{ 'points'|trans }}
                        <span class="track-total-distance">0 km</span>
                    </div>
                </div>
            </section>
        </div>

        {# Right Column - Map #}
        <div class="col-md-8">
            <section class="tile color transparent-black gps-map-section">
                <div class="tile-header">
                    <h1><i class="fas fa-map"></i> {{ 'Map'|trans }}</h1>
                    <div class="controls">
                        <a href="#" class="btn-center-map" title="{{ 'Center on position'|trans }}">
                            <i class="fas fa-crosshairs"></i>
                        </a>
                        <a href="#" class="btn-toggle-follow" title="{{ 'Follow position'|trans }}">
                            <i class="fas fa-location-arrow"></i>
                        </a>
                    </div>
                </div>
                <div class="tile-body gps-map-container">
                    <div class="gps-map" 
                         id="gps-map-{{ macchina.id }}"
                         {% if lastGps is defined and lastGps %}
                         data-lat="{{ lastGps.latitudine }}" 
                         data-lng="{{ lastGps.longitudine }}"
                         {% else %}
                         data-lat="45.4642" 
                         data-lng="9.1900"
                         {% endif %}
                         data-zoom="14">
                    </div>
                    <div class="map-overlay map-loading" style="display: none;">
                        <i class="fas fa-spinner fa-spin fa-3x"></i>
                        <p>{{ 'Loading track...'|trans }}</p>
                    </div>
                </div>
            </section>
        </div>
    </div>

    {# Error/Message Toast #}
    <div class="module-toast" style="display: none;">
        <div class="toast-content">
            <i class="toast-icon"></i>
            <span class="toast-message"></span>
        </div>
    </div>
</div>