{% extends 'base.html' %}

{% block title %}Карта локаций - Bizness Navigator{% endblock %}

{% block content %}
<div class="bg-white shadow-xl rounded-lg p-6">
    <h1 class="text-3xl font-bold text-gray-900 mb-4">🗺️ Карта проверки локаций</h1>

    <div id="map" style="height: 500px; width: 100%;" class="rounded-lg mb-6"></div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-green-50 p-4 rounded-lg">
            <h3 class="font-semibold text-green-800">✅ Разрешенные зоны</h3>
            <p class="text-sm text-green-600">Коммерческие и смешанные зоны</p>
        </div>
        <div class="bg-yellow-50 p-4 rounded-lg">
            <h3 class="font-semibold text-yellow-800">⚠️ Условные зоны</h3>
            <p class="text-sm text-yellow-600">С ограничениями</p>
        </div>
        <div class="bg-red-50 p-4 rounded-lg">
            <h3 class="font-semibold text-red-800">❌ Запрещенные зоны</h3>
            <p class="text-sm text-red-600">Рядом с детскими учреждениями</p>
        </div>
    </div>
</div>

<script>
// Инициализация карты OpenStreetMap
function initMap() {
    // Центр на Ташкенте
    const map = L.map('map').setView([41.2995, 69.2401], 13);

    // Добавляем слой OpenStreetMap
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        maxZoom: 18
    }).addTo(map);

    // Добавляем маркеры для демо
    const demoLocations = [
        {
            lat: 41.2995,
            lon: 69.2401,
            title: "Центр города",
            status: "approved",
            address: "ул. Навои, 15"
        },
        {
            lat: 41.3015,
            lon: 69.2421,
            title: "Коммерческая зона",
            status: "approved",
            address: "ул. Мирабад, 20"
        },
        {
            lat: 41.2975,
            lon: 69.2381,
            title: "Возле школы",
            status: "conditional",
            address: "ул. Афросиаб, 10"
        }
    ];

    // Цвета маркеров по статусу
    const statusColors = {
        'approved': 'green',
        'conditional': 'orange',
        'rejected': 'red'
    };

    // Добавляем маркеры на карту
    demoLocations.forEach(location => {
        const marker = L.marker([location.lat, location.lon])
            .addTo(map)
            .bindPopup(`
                <div class="p-2">
                    <h3 class="font-bold">${location.title}</h3>
                    <p>${location.address}</p>
                    <p class="text-sm ${location.status === 'approved' ? 'text-green-600' :
                                      location.status === 'conditional' ? 'text-orange-600' :
                                      'text-red-600'}">
                        Статус: ${location.status === 'approved' ? '✅ Одобрено' :
                                location.status === 'conditional' ? '⚠️ Условно' :
                                '❌ Запрещено'}
                    </p>
                </div>
            `);
    });
}

// Инициализируем карту после загрузки страницы
document.addEventListener('DOMContentLoaded', initMap);
</script>
{% endblock %}