{% extends "base.html" %}
{% load humanize %}
{% block title %}Location Map{% endblock %}
{% block extra_css %}{% endblock %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative z-0">
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-gray-900">Location Map</h1>
            <p class="mt-2 text-sm text-gray-600">View locations around the world</p>
        </div>
        <div class="mb-6">
            <div class="flex flex-wrap gap-4">
                {% for type in marker_types %}
                    <a href="?type={{ type.id }}"
                       class="inline-flex items-center px-4 py-2 rounded-lg {% if marker_type == type.id %}bg-[#e74c3c] text-white{% else %}bg-white text-gray-700 hover:bg-gray-50 border border-gray-200{% endif %} transition-colors duration-200">
                        <i class="fas {{ type.icon }} mr-2"></i>
                        {{ type.name }}
                    </a>
                {% endfor %}
            </div>
        </div>
        <div class="relative z-0">
            <div id="map-loading" class="map-loading hidden">
                <div class="flex items-center space-x-2">
                    <i class="fas fa-spinner fa-spin text-[#e74c3c]"></i>
                    <span>Loading map...</span>
                </div>
            </div>
            <div id="map"
                 class="w-full h-[600px] rounded-lg shadow-lg mb-8 overflow-hidden relative z-0 border-2 border-black">
            </div>
        </div>
        <div class="mt-8">
            <h2 class="text-xl font-semibold text-gray-900 mb-4">Locations</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {% for location in locations %}
                    {% if location.latitude and location.longitude %}
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 hover:shadow-md transition-shadow duration-200">
                            <div class="flex items-start justify-between">
                                <div>
                                    <h3 class="text-lg font-medium text-gray-900">{{ location.name }}</h3>
                                    {% if location.city or location.country %}
                                        <p class="text-sm text-gray-600 mt-1">
                                            {% if location.city %}{{ location.city }}{% endif %}
                                            {% if location.city and location.country %},{% endif %}
                                            {% if location.country %}{{ location.country }}{% endif %}
                                        </p>
                                    {% endif %}
                                </div>
                                {% if location.logo %}
                                    <img src="{{ location.logo.url }}"
                                         alt="{{ location.name }} logo"
                                         width="40"
                                         height="40"
                                         class="w-10 h-10 object-contain" />
                                {% endif %}
                            </div>
                            <div class="mt-4">
                                {% if marker_type == 'organizations' %}
                                    <a href="{% url 'organization_detail' slug=location.slug %}"
                                       class="inline-flex items-center text-sm text-[#e74c3c] hover:text-red-700">
                                        View Details
                                        <svg class="w-4 h-4 ml-1" viewBox="0 0 20 20" fill="currentColor">
                                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                                        </svg>
                                    </a>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                {% empty %}
                    <div class="col-span-full text-center py-12">
                        <div class="mx-auto w-24 h-24 rounded-full bg-gray-100 flex items-center justify-center mb-4">
                            <svg class="w-12 h-12 text-gray-400"
                                 fill="none"
                                 viewBox="0 0 24 24"
                                 stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                        </div>
                        <p class="text-gray-500 text-lg">No locations found</p>
                        <p class="text-gray-400 mt-2">Try selecting a different location type</p>
                    </div>
                {% endfor %}
                this map was inspired by the map on OWASP Nest
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const loadingEl = document.getElementById('map-loading');
        loadingEl.classList.remove('hidden');

        try {
            const map = L.map('map', {
                center: [20, 0],
                zoom: 2,
                minZoom: 2,
                maxZoom: 18,
                zoomControl: false,
                scrollWheelZoom: true,
                worldCopyJump: true
            });

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                maxZoom: 19
            }).addTo(map);

            L.control.zoom({
                position: 'topright'
            }).addTo(map);

            const markers = L.markerClusterGroup({
                showCoverageOnHover: false,
                maxClusterRadius: 40,
                spiderfyOnMaxZoom: true,
                zoomToBoundsOnClick: true,
                chunkedLoading: true,
                disableClusteringAtZoom: 16,
                iconCreateFunction: function(cluster) {
                    const count = cluster.getChildCount();
                    let size = 40;
                    if (count > 100) size = 60;
                    else if (count > 50) size = 50;
                    
                    return L.divIcon({
                        html: `<div style=" background-color: rgba(231, 76, 60, 0.8); color: white; width: ${size}px; height: ${size}px; line-height: ${size}px; text-align: center; border-radius: 50%; border: 3px solid rgba(255,255,255,0.8); box-shadow: 0 2px 4px rgba(0,0,0,0.2); font-weight: bold; ">${count}</div>`,
                        className: 'marker-cluster-custom',
                        iconSize: L.point(size, size)
                    });
                }
            });

            const customIcon = L.divIcon({
                html: `<div style=" background-color: #e74c3c; width: 12px; height: 12px; border-radius: 50%; border: 2px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.2); "></div>`,
                className: 'custom-marker',
                iconSize: [12, 12],
                iconAnchor: [6, 6]
            });

            {% for location in locations %}
                {% if location.latitude and location.longitude %}
                    const marker = L.marker([{{ location.latitude }}, {{ location.longitude }}], {
                        icon: customIcon
                    }).bindPopup(`
                        <div class="text-center p-3">
                            {% if location.logo %}
                                <img src="{{ location.logo.url }}" alt="{{ location.name }} logo" class="w-20 h-20 mx-auto mb-4 object-contain" width="80" height="80" onload="this.style.opacity=1" style="opacity:0;transition:opacity 0.3s" />
                            {% endif %}
                            <h3 class="text-lg font-semibold text-gray-900 mb-2">{{ location.name }}</h3>
                            {% if location.city or location.country %}
                                <p class="text-sm text-gray-600 mb-4">
                                    {% if location.city %}{{ location.city }}{% endif %}
                                    {% if location.city and location.country %}, {% endif %}
                                    {% if location.country %}{{ location.country }}{% endif %}
                                </p>
                            {% endif %}
                            {% if marker_type == 'organizations' %}
                                <a href="{% url 'organization_detail' slug=location.slug %}" class="inline-block px-6 py-2 bg-[#e74c3c] text-white rounded-lg hover:bg-[#c0392b] transition-colors text-sm font-medium">
                                    View Details
                                </a>
                            {% endif %}
                        </div>
                    `, {
                        maxWidth: 300,
                        className: 'custom-popup'
                    });
                    markers.addLayer(marker);
                {% endif %}
            {% endfor %}

            map.addLayer(markers);

            if (markers.getLayers().length > 0) {
                map.fitBounds(markers.getBounds(), {
                    padding: [50, 50],
                    maxZoom: 12
                });
            }

            loadingEl.classList.add('hidden');

            let resizeTimeout;
            window.addEventListener('resize', function() {
                clearTimeout(resizeTimeout);
                resizeTimeout = setTimeout(function() {
                    map.invalidateSize();
                }, 250);
            });

        } catch (error) {
            console.error('Map initialization error:', error);
            loadingEl.innerHTML = `
                <div class="text-red-600 flex items-center">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    <span>Error initializing map</span>
                </div>
            `;
        }
    });
    </script>
{% endblock %}