{% extends 'base.html' %}
{% load static_v %}
{% block title %}{{ t.fuel_log_title }} — PickkerMarket{% endblock %}
{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 600px;">
        <p class="auth-switch" style="margin-bottom: 10px;"><a href="{% url 'accounts:picker_home' %}">&larr; {{ t.nav_my_dashboard }}</a></p>
        <span class="section-kicker">{{ t.picker_dashboard_kicker }}</span>
        <h1>{{ t.fuel_log_title }}</h1>
        <p style="color: var(--muted); margin-bottom: 20px;">{{ t.fuel_log_intro }}</p>

        <form method="post" class="auth-form" enctype="multipart/form-data">
            {% csrf_token %}
            <input type="hidden" id="fuel-lat" name="lat">
            <input type="hidden" id="fuel-lng" name="lng">

            <label for="station_name">{{ t.fuel_log_station_label }}</label>
            <input type="text" id="station_name" name="station_name" placeholder="{{ t.fuel_log_station_placeholder }}">

            <button type="button" id="fuel-locate-btn" class="locate-btn" style="margin: 6px 0 14px;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="2"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/></svg>
                {{ t.fuel_log_record_location }}
            </button>
            <p id="fuel-location-status" style="color: var(--muted); font-size: 0.85rem; margin: -8px 0 14px;"></p>

            <label for="amount_spent">{{ t.fuel_log_amount_label }}</label>
            <input type="number" step="any" id="amount_spent" name="amount_spent" required>

            <label for="liters">{{ t.fuel_log_liters_label }}</label>
            <input type="number" step="any" id="liters" name="liters">

            <label for="odometer_km">{{ t.fuel_log_odometer_label }}</label>
            <input type="number" step="any" id="odometer_km" name="odometer_km">

            <label for="receipt">{{ t.fuel_log_receipt_label }}</label>
            <p style="color: var(--muted); font-size: 0.85rem; margin: -4px 0 6px;">{{ t.fuel_log_receipt_help }}</p>
            <input type="file" id="receipt" name="receipt" accept="image/*,application/pdf" capture="environment">

            <label for="notes">{{ t.fuel_log_notes_label }}</label>
            <textarea id="notes" name="notes" rows="2"></textarea>

            <button type="submit" class="btn-cta" style="margin-top: 18px;">{{ t.fuel_log_submit }}</button>
        </form>
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var btn = document.getElementById('fuel-locate-btn');
        var status = document.getElementById('fuel-location-status');
        var latInput = document.getElementById('fuel-lat');
        var lngInput = document.getElementById('fuel-lng');
        btn.addEventListener('click', function () {
            if (!navigator.geolocation) {
                status.textContent = '{{ t.picker_no_geolocation|escapejs }}';
                return;
            }
            status.textContent = '{{ t.picker_locating|escapejs }}';
            navigator.geolocation.getCurrentPosition(
                function (position) {
                    latInput.value = position.coords.latitude;
                    lngInput.value = position.coords.longitude;
                    status.textContent = '{{ t.fuel_log_location_recorded|escapejs }}';
                },
                function () {
                    status.textContent = '{{ t.picker_location_failed_permissions|escapejs }}';
                },
                { enableHighAccuracy: true, timeout: 15000 }
            );
        });
    });
</script>
{% endblock %}