app/templates/submit.html

{% extends "base.html" %}

{% block title %}Submit Contribution{% endblock %}

{% block content %}
<div class="min-vh-100 bg-light">
    <nav class="navbar navbar-light bg-white shadow-sm">
        <div class="container-fluid">
            <span class="navbar-brand mb-0 h1">Submit Your Contribution</span>
            <a href="{{ url_for('auth.logout') }}" class="btn btn-outline-secondary">Logout</a>
        </div>
    </nav>

    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card shadow">
                    <div class="card-body p-4">
                        <div class="mb-4">
                            <h5 class="card-title">Your Contribution</h5>
                            <p class="text-muted">
                                Contributor Type: <span class="badge bg-primary text-capitalize">{{ contributor_type }}</span>
                            </p>
                        </div>

                        {% if not submission_open %}
                        <div class="alert alert-warning">
                            <i class="bi bi-exclamation-triangle-fill"></i>
                            Submission period is currently closed.
                        </div>
                        {% endif %}

                        <form method="POST" id="submissionForm">
                            <div class="mb-3">
                                <label for="message" class="form-label">Your Message</label>
                                <textarea class="form-control" id="message" name="message" rows="6"
                                          placeholder="Share your expectations, objectives, concerns, ideas..."
                                          {% if not submission_open %}disabled{% endif %} required></textarea>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Location (Optional)</label>
                                <div class="d-flex gap-2 flex-wrap mb-2">
                                    <button type="button" class="btn btn-outline-primary" onclick="toggleMap()">
                                        <i class="bi bi-geo-alt-fill"></i> <span id="mapToggleText">Add Location</span>
                                    </button>
                                    <button type="button" class="btn btn-outline-success" onclick="getCurrentLocation()">
                                        <i class="bi bi-crosshair"></i> Use My Location
                                    </button>
                                    <button type="button" class="btn btn-outline-danger" onclick="clearLocation()" id="clearBtn" style="display: none;">
                                        <i class="bi bi-x-circle"></i> Clear
                                    </button>
                                </div>
                                <div id="locationDisplay" class="text-muted small" style="display: none;"></div>

                                <div id="mapContainer" style="display: none;">
                                    <div id="map" class="map-container border mt-2"></div>
                                </div>

                                <input type="hidden" id="latitude" name="latitude">
                                <input type="hidden" id="longitude" name="longitude">
                            </div>

                            <button type="submit" class="btn btn-primary btn-lg w-100"
                                    {% if not submission_open %}disabled{% endif %}>
                                <i class="bi bi-send-fill"></i> Submit Contribution
                            </button>
                        </form>

                        <div class="mt-4 pt-4 border-top text-center">
                            <p class="text-muted mb-0">
                                Your submissions: <strong class="text-primary">{{ submission_count }}</strong>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
let map = null;
let marker = null;
let mapVisible = false;

function toggleMap() {
    mapVisible = !mapVisible;
    const container = document.getElementById('mapContainer');
    const toggleText = document.getElementById('mapToggleText');

    if (mapVisible) {
        container.style.display = 'block';
        toggleText.textContent = 'Hide Map';
        if (!map) {
            initMap();
        }
    } else {
        container.style.display = 'none';
        toggleText.textContent = 'Add Location';
    }
}

function initMap() {
    map = L.map('map').setView([0, 0], 2);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap'
    }).addTo(map);

    map.on('click', function(e) {
        setLocation(e.latlng.lat, e.latlng.lng);
    });

    setTimeout(() => map.invalidateSize(), 100);
}

function setLocation(lat, lng) {
    document.getElementById('latitude').value = lat;
    document.getElementById('longitude').value = lng;

    const display = document.getElementById('locationDisplay');
    display.textContent = `Selected: ${lat.toFixed(6)}, ${lng.toFixed(6)}`;
    display.style.display = 'block';

    document.getElementById('clearBtn').style.display = 'inline-block';

    if (map) {
        if (marker) {
            map.removeLayer(marker);
        }
        marker = L.marker([lat, lng]).addTo(map);
        map.setView([lat, lng], 13);
    }
}

function getCurrentLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            (position) => {
                const lat = position.coords.latitude;
                const lng = position.coords.longitude;
                setLocation(lat, lng);

                if (!mapVisible) {
                    toggleMap();
                }
            },
            (error) => {
                alert('Unable to get your location.');
            }
        );
    } else {
        alert('Geolocation is not supported by your browser.');
    }
}

function clearLocation() {
    document.getElementById('latitude').value = '';
    document.getElementById('longitude').value = '';
    document.getElementById('locationDisplay').style.display = 'none';
    document.getElementById('clearBtn').style.display = 'none';

    if (marker && map) {
        map.removeLayer(marker);
        marker = null;
    }
}
</script>
{% endblock %}