{% extends 'main/header.html' %}
{% load static %}

{% block content %}
<div class="stores-wrapper">
    <div class="stores-container">
        <!-- Header Section -->
        <div class="stores-header">
            <div class="header-content">
                <h1 class="stores-main-title">Најблиски продавници</h1>
                <p class="stores-subtitle">Пронајди ги најблиските продавници и заштеди гориво</p>
            </div>
            <div class="back-button">
                <a href="{% url 'home' %}" class="back-link">
                    <i class="fas fa-arrow-left"></i> Назад кон почетна
                </a>
            </div>
        </div>

        <!-- Search Form -->
        <div class="search-card">
            <form method="get" action="{% url 'nearby_stores' %}" class="store-search-form" id="searchForm">
                <div class="form-row">
                    <div class="form-group">
                        <label for="latitude"><i class="fas fa-map-marker-alt"></i> Latitude:</label>
                        <input type="text" id="latitude" name="latitude" required class="form-input"
                               value="{{ request.GET.latitude|default:'' }}" placeholder="41.9981">
                    </div>
                    <div class="form-group">
                        <label for="longitude"><i class="fas fa-map-marker-alt"></i> Longitude:</label>
                        <input type="text" id="longitude" name="longitude" required class="form-input"
                               value="{{ request.GET.longitude|default:'' }}" placeholder="21.4254">
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="fuel_consumption"><i class="fas fa-gas-pump"></i> Потрошувачка на гориво (L/100km):</label>
                        <input type="number" step="0.1" id="fuel_consumption" name="fuel_consumption" required
                               class="form-input" value="{{ request.GET.fuel_consumption|default:'' }}" placeholder="6.5">
                    </div>
                    <div class="form-group">
                        <label for="store_chain"><i class="fas fa-store"></i> Продавничка мрежа:</label>
                        <select name="store_chain" id="store_chain" required class="form-input">
                            <option value="Reptil" {% if request.GET.store_chain == "Reptil" %}selected{% endif %}>Reptil</option>
                            <option value="Vero" {% if request.GET.store_chain == "Vero" %}selected{% endif %}>Vero</option>
                            <option value="Ramstore" {% if request.GET.store_chain == "Ramstore" %}selected{% endif %}>Ramstore</option>
                        </select>
                    </div>
                </div>

                <div class="form-actions">
                    <button type="button" onclick="getLocation()" class="action-button secondary-button">
                        <i class="fas fa-location-arrow"></i> Користи моја локација
                    </button>
                    <button type="submit" class="action-button primary-button" id="submitButton">
                        <i class="fas fa-search"></i> Пронајди продавници
                    </button>
                </div>
            </form>
        </div>

        {% if calculating %}
            <div class="loading-container">
                <div class="loading-spinner">
                    <div class="spinner"></div>
                </div>
                <div class="loading-text">
                    <h3>Пресметуваме растојанија и времиња на патување...</h3>
                    <p>Ова може да потрае неколку секунди.</p>
                </div>
            </div>
        {% elif nearest_stores %}
            <div class="results-section">
                <h2 class="section-title"><i class="fas fa-store"></i> Најблиски продавници</h2>
                <div class="stores-grid">
                    {% for store in nearest_stores|slice:":5" %}
                        <div class="store-card">
                            <div class="store-card-header">
                                <h3 class="store-title">{{ store.store }}</h3>
                                <span class="store-distance">{{ store.distance_km|floatformat:2 }} km</span>
                            </div>
                            <div class="store-meta">
                                <div class="meta-item">
                                    <i class="fas fa-clock"></i>
                                    <span>{{ store.duration }}</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-gas-pump"></i>
                                    <span>{{ store.gas_used|floatformat:2 }} L</span>
                                </div>
                            </div>
                            <div class="store-card-footer">
                                <span class="store-chain-badge">{{ request.GET.store_chain }}</span>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>

            <!-- Map Container -->
            <div class="map-section">
                <h2 class="section-title"><i class="fas fa-map-marked-alt"></i> Мапа на локации</h2>
                <div id="map-container">
                    <div id="map"></div>
                </div>
                <div class="map-controls">
                    <button onclick="centerMapOnUser()" class="action-button secondary-button">
                        <i class="fas fa-location-arrow"></i> Центрирај на мојата локација
                    </button>
                </div>
            </div>
        {% else %}
            <div class="no-stores">
                <div class="no-stores-icon">
                    <i class="fas fa-exclamation-circle"></i>
                </div>
                <h3>Нема пронајдени продавници</h3>
                <p>Внесете ги вашите координати за да ги видите најблиските продавници.</p>
            </div>
        {% endif %}

        {% if least_gas_stores %}
            <div class="results-section">
                <h2 class="section-title"><i class="fas fa-gas-pump"></i> Продавници со најмало користење на гориво</h2>
                <div class="stores-grid">
                    {% for store in least_gas_stores|slice:":5" %}
                        <div class="store-card">
                            <div class="store-card-header">
                                <h3 class="store-title">{{ store.store }}</h3>
                                <span class="store-distance">{{ store.distance_km|floatformat:2 }} km</span>
                            </div>
                            <div class="store-meta">
                                <div class="meta-item">
                                    <i class="fas fa-clock"></i>
                                    <span>{{ store.duration }}</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-gas-pump"></i>
                                    <span>{{ store.gas_used|floatformat:2 }} L</span>
                                </div>
                            </div>
                            <div class="store-card-footer">
                                <span class="store-chain-badge">{{ request.GET.store_chain }}</span>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endif %}
    </div>
</div>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<script>
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                document.getElementById("latitude").value = position.coords.latitude.toFixed(6);
                document.getElementById("longitude").value = position.coords.longitude.toFixed(6);
                if (typeof map !== 'undefined') updateMap(position.coords.latitude, position.coords.longitude);

                // Show success notification
                showNotification('Локацијата е успешно поставена!', 'success');
            }, function (error) {
                let errorMsg;
                switch(error.code) {
                    case error.PERMISSION_DENIED:
                        errorMsg = "Корисникот одби пристап до локацијата.";
                        break;
                    case error.POSITION_UNAVAILABLE:
                        errorMsg = "Информациите за локацијата не се достапни.";
                        break;
                    case error.TIMEOUT:
                        errorMsg = "Истекло времето за барање на локацијата.";
                        break;
                    default:
                        errorMsg = "Непозната грешка.";
                        break;
                }
                showNotification('Грешка при геолокација: ' + errorMsg, 'error');
            }, { timeout: 10000 });
        } else {
            showNotification("Геолокацијата не е поддржана од овој пребарувач.", 'error');
        }
    }

    let map, userMarker, storeMarkers = [];

    document.addEventListener('DOMContentLoaded', function () {
        {% if nearest_stores %}
            initMap();
        {% endif %}
        document.getElementById('searchForm').addEventListener('submit', function() {
            document.getElementById('submitButton').innerHTML = '<i class="fas fa-spinner fa-spin"></i> Пресметувам...';
            document.getElementById('submitButton').disabled = true;
        });
    });

    function initMap() {
        const userLat = parseFloat(document.getElementById('latitude').value) || 41.9981;
        const userLng = parseFloat(document.getElementById('longitude').value) || 21.4254;

        map = L.map('map').setView([userLat, userLng], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap contributors'
        }).addTo(map);

        // Custom icon for user location
        const userIcon = L.divIcon({
            className: 'user-marker',
            html: '<div class="pulse-dot"></div><i class="fas fa-user"></i>',
            iconSize: [30, 30],
            iconAnchor: [15, 15]
        });

        userMarker = L.marker([userLat, userLng], {icon: userIcon}).addTo(map).bindPopup("<b>Вашата локација</b>").openPopup();

        storeMarkers.forEach(m => map.removeLayer(m));
        storeMarkers = [];

        const stores = [
            {% for store in nearest_stores %}
                {
                    name: "{{ store.store|escapejs }}",
                    latitude: {{ store.latitude }},
                    longitude: {{ store.longitude }},
                    distance: {{ store.distance_km }},
                    duration: "{{ store.duration|escapejs }}",
                    gasUsed: {{ store.gas_used }}
                },
            {% endfor %}
        ];

        // Custom icon for stores
        const storeIcon = L.divIcon({
            className: 'store-marker',
            html: '<i class="fas fa-store"></i>',
            iconSize: [25, 25],
            iconAnchor: [12, 12]
        });

        stores.forEach(store => {
            const marker = L.marker([store.latitude, store.longitude], {icon: storeIcon}).addTo(map);
            marker.bindPopup(`<b>${store.name}</b><br>Растојание: ${store.distance.toFixed(2)} km<br>Време: ${store.duration}<br>Гориво: ${store.gasUsed.toFixed(2)} L`);
            storeMarkers.push(marker);
        });
    }

    function updateMap(lat, lng) {
        userMarker.setLatLng([lat, lng]).bindPopup("<b>Вашата локација</b>").openPopup();
        map.setView([lat, lng], 13);
    }

    function centerMapOnUser() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position){
                updateMap(position.coords.latitude, position.coords.longitude);
                document.getElementById('latitude').value = position.coords.latitude.toFixed(6);
                document.getElementById('longitude').value = position.coords.longitude.toFixed(6);
                showNotification('Мапата е центрирана на вашата локација', 'success');
            });
        }
    }

    function showNotification(message, type) {
        // Remove any existing notifications
        const existingNotifications = document.querySelectorAll('.notification');
        existingNotifications.forEach(notif => notif.remove());

        const notification = document.createElement('div');
        notification.className = `notification ${type}`;
        notification.innerHTML = `
            <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'}"></i>
            <span>${message}</span>
            <button onclick="this.parentElement.remove()"><i class="fas fa-times"></i></button>
        `;

        document.body.appendChild(notification);

        // Auto remove after 5 seconds
        setTimeout(() => {
            if (notification.parentElement) {
                notification.remove();
            }
        }, 5000);
    }
</script>

<style>
    :root {
        --primary: #2e652e;
        --primary-dark: #1f3f1f;
        --primary-light: #81c784;
        --accent: #4caf50;
        --text: #333;
        --text-light: #666;
        --background: #f9f9f9;
        --card-bg: #ffffff;
        --border: #e0e0e0;
        --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        --shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
        --success: #4caf50;
        --error: #f44336;
    }

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
    font-family: Arial, sans-serif;
        background: var(--background);
        color: var(--text);
        line-height: 1.6;
    }

    .stores-wrapper {
        max-width: 1400px;
        margin: 0 auto;
        padding: 20px;
    }

    .stores-container {
        background: var(--card-bg);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: var(--shadow);
    }

    .stores-header {
        background: linear-gradient(135deg, rgba(46,101,46,0.9) 0%, rgba(76,175,80,0.8) 100%), url('{% static "images/baner1.jpg" %}') center/cover no-repeat;
        color: white;
        padding: 30px;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .header-content {
        max-width: 70%;
    }

    .stores-main-title {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 10px;
        text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .stores-subtitle {
        font-size: 1.1rem;
        opacity: 0.9;
        font-weight: 300;
    }

    .back-button {
        position: absolute;
        top: 20px;
        right: 20px;
    }

    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        color: white;
        padding: 10px 20px;
        border-radius: 30px;
        text-decoration: none;
        transition: all 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .back-link:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
    }

    .search-card {
        padding: 30px;
        border-bottom: 1px solid var(--border);
    }

    .form-row {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    .form-group {
        flex: 1;
        min-width: 250px;
    }

    .form-group label {
        display: block;
        margin-bottom: 8px;
        color: var(--primary);
        font-weight: 600;
        font-size: 0.9rem;
    }

    .form-input, select {
        width: 100%;
        padding: 14px 16px;
        border-radius: 10px;
        border: 1px solid var(--border);
        font-size: 1rem;
        transition: all 0.3s ease;
        background: var(--card-bg);
    }

    .form-input:focus, select:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(46, 101, 46, 0.1);
    }

    .form-actions {
        display: flex;
        gap: 15px;
        margin-top: 20px;
        flex-wrap: wrap;
    }

    .action-button {
        padding: 14px 28px;
        border-radius: 10px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        border: none;
        font-size: 1rem;
    }

    .primary-button {
        background: var(--primary);
        color: white;
    }

    .primary-button:hover {
        background: var(--primary-dark);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(46, 101, 46, 0.2);
    }

    .secondary-button {
        background: #e8f5e9;
        color: var(--primary);
    }

    .secondary-button:hover {
        background: #d0f0d0;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(46, 101, 46, 0.1);
    }

    .loading-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 30px;
        text-align: center;
    }

    .loading-spinner {
        margin-bottom: 20px;
    }

    .spinner {
        width: 60px;
        height: 60px;
        border: 4px solid rgba(46, 101, 46, 0.1);
        border-radius: 50%;
        border-top: 4px solid var(--primary);
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .loading-text h3 {
        color: var(--primary);
        margin-bottom: 10px;
    }

    .loading-text p {
        color: var(--text-light);
    }

    .results-section {
        padding: 30px;
        border-bottom: 1px solid var(--border);
    }

    .section-title {
        font-size: 1.5rem;
        margin-bottom: 25px;
        color: var(--primary);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .stores-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
    }

    .store-card {
        background: var(--card-bg);
        border-radius: 12px;
        padding: 20px;
        box-shadow: var(--shadow);
        transition: all 0.3s ease;
        border-left: 4px solid var(--primary-light);
        display: flex;
        flex-direction: column;
    }

    .store-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-hover);
    }

    .store-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 15px;
    }

    .store-title {
        color: var(--primary);
        font-size: 1.2rem;
        font-weight: 600;
    }

    .store-distance {
        background: var(--primary-light);
        color: var(--primary-dark);
        padding: 4px 10px;
        width: 100px;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 600;
    }

    .store-meta {
        margin-bottom: 15px;
    }

    .meta-item {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
        color: var(--text-light);
    }

    .store-card-footer {
        margin-top: auto;
    }

    .store-chain-badge {
        background: #e8f5e9;
        color: var(--primary);
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
    }

    .map-section {
        padding: 30px;
    }

    #map-container {
        height: 500px;
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 20px;
        box-shadow: var(--shadow);
    }

    #map {
        width: 100%;
        height: 100%;
    }

    .map-controls {
        display: flex;
        justify-content: center;
    }

    .no-stores {
        padding: 60px 30px;
        text-align: center;
    }

    .no-stores-icon {
        font-size: 3rem;
        color: #bdbdbd;
        margin-bottom: 20px;
    }

    .no-stores h3 {
        color: var(--text-light);
        margin-bottom: 10px;
    }

    .no-stores p {
        color: var(--text-light);
    }

    /* Custom map markers */
    .user-marker {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 14px;
        background: var(--primary);
        border-radius: 50%;
        width: 30px;
        height: 30px;
        box-shadow: 0 0 0 4px rgba(46, 101, 46, 0.3);
    }

    .pulse-dot {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: var(--primary);
        animation: pulse 2s infinite;
        z-index: -1;
    }

    @keyframes pulse {
        0% {
            transform: scale(1);
            opacity: 0.8;
        }
        70% {
            transform: scale(2.5);
            opacity: 0;
        }
        100% {
            transform: scale(1);
            opacity: 0;
        }
    }

    .store-marker {
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 14px;
        background: var(--accent);
        border-radius: 50%;
        width: 25px;
        height: 25px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    /* Notification system */
    .notification {
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 15px 20px;
        border-radius: 10px;
        color: white;
        display: flex;
        align-items: center;
        gap: 10px;
        box-shadow: var(--shadow);
        z-index: 1000;
        animation: slideIn 0.3s ease;
        max-width: 350px;
    }

    .notification.success {
        background: var(--success);
    }

    .notification.error {
        background: var(--error);
    }

    .notification button {
        background: none;
        border: none;
        color: white;
        cursor: pointer;
        margin-left: 10px;
    }

    @keyframes slideIn {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    /* Responsive design */
    @media (max-width: 768px) {
        .stores-header {
            flex-direction: column;
            gap: 20px;
        }

        .header-content {
            max-width: 100%;
        }

        .back-button {
            position: relative;
            top: 0;
            right: 0;
            align-self: flex-end;
        }

        .stores-main-title {
            font-size: 2rem;
        }

        .form-row {
            flex-direction: column;
            gap: 15px;
        }

        .form-group {
            min-width: 100%;
        }

        .form-actions {
            flex-direction: column;
        }

        .action-button {
            width: 100%;
            justify-content: center;
        }

        #map-container {
            height: 300px;
        }
    }
</style>
{% endblock %}