{% extends "base.html" %}

{% block title %}Mapa de Empresas - TallArt{% endblock %}

{% block extra_css %}
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>
<style>
    #map {
        height: 600px;
        width: 100%;
        border-radius: 1rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }
    
    .empresa-popup {
        min-width: 250px;
    }
    
    .empresa-popup h3 {
        margin: 0 0 0.5rem 0;
        color: #1e40af;
        font-size: 1.1rem;
        font-weight: bold;
    }
    
    .empresa-popup p {
        margin: 0.25rem 0;
        font-size: 0.875rem;
        color: #4b5563;
    }
    
    .empresa-popup .badge {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
        color: white;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
        margin-top: 0.5rem;
    }
    
    .empresa-popup a {
        display: inline-block;
        margin-top: 0.75rem;
        padding: 0.5rem 1rem;
        background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
        color: white;
        text-decoration: none;
        border-radius: 0.5rem;
        font-weight: 600;
        transition: all 0.3s;
    }
    
    .empresa-popup a:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    }
    
    .leaflet-popup-content {
        margin: 1rem;
    }
    
    .map-controls {
        margin-bottom: 1.5rem;
        padding: 1.5rem;
        background: white;
        border-radius: 1rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .map-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-top: 1rem;
    }
    
    .stat-card {
        padding: 1rem;
        background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
        color: white;
        border-radius: 0.75rem;
        text-align: center;
    }
    
    .stat-card .number {
        font-size: 2rem;
        font-weight: bold;
        display: block;
    }
    
    .stat-card .label {
        font-size: 0.875rem;
        opacity: 0.9;
    }
</style>
{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 py-8">
    <!-- Header -->
    <div class="text-center mb-8">
        <h1 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
            🗺️ Mapa de Empresas Artesanas
        </h1>
        <p class="text-lg text-gray-600 max-w-2xl mx-auto">
            Descubre la ubicación de nuestros artesanos asociados en todo Perú
        </p>
    </div>

    <!-- Map Controls -->
    <div class="map-controls">
        <div class="flex items-center justify-between flex-wrap gap-4">
            <div>
                <h2 class="text-xl font-bold text-gray-800 mb-2">Filtrar por Especialidad</h2>
                <div class="flex flex-wrap gap-2">
                    <button onclick="filterByEspecialidad('all')" 
                            class="filter-btn px-4 py-2 rounded-lg bg-blue-500 text-white font-semibold hover:bg-blue-600 transition-all">
                        Todas
                    </button>
                    <button onclick="filterByEspecialidad('Cerámica')" 
                            class="filter-btn px-4 py-2 rounded-lg bg-gray-200 text-gray-700 font-semibold hover:bg-gray-300 transition-all">
                        🏺 Cerámica
                    </button>
                    <button onclick="filterByEspecialidad('Madera')" 
                            class="filter-btn px-4 py-2 rounded-lg bg-gray-200 text-gray-700 font-semibold hover:bg-gray-300 transition-all">
                        🪵 Madera
                    </button>
                    <button onclick="filterByEspecialidad('Piedra')" 
                            class="filter-btn px-4 py-2 rounded-lg bg-gray-200 text-gray-700 font-semibold hover:bg-gray-300 transition-all">
                        🗿 Piedra
                    </button>
                    <button onclick="filterByEspecialidad('Textiles')" 
                            class="filter-btn px-4 py-2 rounded-lg bg-gray-200 text-gray-700 font-semibold hover:bg-gray-300 transition-all">
                        🧵 Textiles
                    </button>
                </div>
            </div>
            
            <button onclick="centerMap()" 
                    class="px-6 py-3 bg-gradient-to-r from-green-500 to-emerald-600 text-white rounded-lg font-semibold hover:shadow-lg transition-all flex items-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <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>
                </svg>
                Centrar Mapa
            </button>
        </div>
        
        <!-- Statistics -->
        <div class="map-stats">
            <div class="stat-card">
                <span class="number" id="total-empresas">{{ empresas|length }}</span>
                <span class="label">Empresas Total</span>
            </div>
            <div class="stat-card">
                <span class="number" id="visible-empresas">{{ empresas|length }}</span>
                <span class="label">Visibles en Mapa</span>
            </div>
            <div class="stat-card">
                <span class="number">4</span>
                <span class="label">Especialidades</span>
            </div>
        </div>
    </div>

    <!-- Map Container -->
    <div id="map"></div>

    <!-- Info adicional -->
    <div class="mt-8 bg-blue-50 border-l-4 border-blue-500 rounded-lg p-6">
        <div class="flex items-start gap-3">
            <svg class="w-6 h-6 text-blue-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <div>
                <h3 class="font-bold text-blue-900 mb-2">💡 Consejos</h3>
                <ul class="text-blue-800 text-sm space-y-1">
                    <li>• Haz clic en los marcadores para ver información de cada empresa</li>
                    <li>• Usa los controles del mapa para hacer zoom y moverte</li>
                    <li>• Filtra por especialidad para encontrar artesanos específicos</li>
                    <li>• Las empresas sin coordenadas GPS no aparecen en el mapa</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>

<script>
    // Datos de empresas desde el backend
    const empresasData = {{ empresas_json|safe }};
    
    // Inicializar el mapa centrado en Perú
    const map = L.map('map').setView([-9.19, -75.0152], 6);
    
    // Agregar capa de tiles (OpenStreetMap)
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors',
        maxZoom: 19
    }).addTo(map);
    
    // Iconos personalizados por especialidad
    const icons = {
        'Cerámica': L.divIcon({
            html: '<div style="background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; padding: 8px; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">🏺</div>',
            className: 'custom-icon',
            iconSize: [40, 40],
            iconAnchor: [20, 40],
            popupAnchor: [0, -40]
        }),
        'Madera': L.divIcon({
            html: '<div style="background: linear-gradient(135deg, #92400e 0%, #78350f 100%); color: white; padding: 8px; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">🪵</div>',
            className: 'custom-icon',
            iconSize: [40, 40],
            iconAnchor: [20, 40],
            popupAnchor: [0, -40]
        }),
        'Piedra': L.divIcon({
            html: '<div style="background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); color: white; padding: 8px; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">🗿</div>',
            className: 'custom-icon',
            iconSize: [40, 40],
            iconAnchor: [20, 40],
            popupAnchor: [0, -40]
        }),
        'Textiles': L.divIcon({
            html: '<div style="background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%); color: white; padding: 8px; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">🧵</div>',
            className: 'custom-icon',
            iconSize: [40, 40],
            iconAnchor: [20, 40],
            popupAnchor: [0, -40]
        })
    };
    
    // Array para almacenar marcadores
    let markers = [];
    
    // Agregar marcadores para cada empresa
    empresasData.forEach(empresa => {
        if (empresa.Latitud && empresa.Longitud) {
            const icon = icons[empresa.Especialidad] || icons['Cerámica'];
            
            const marker = L.marker([empresa.Latitud, empresa.Longitud], { icon: icon })
                .bindPopup(`
                    <div class="empresa-popup">
                        <h3>${empresa.Nombre}</h3>
                        <span class="badge">${empresa.Especialidad}</span>
                        <p><strong>📍</strong> ${empresa.Ubicacion || 'Ubicación no especificada'}</p>
                        ${empresa.Telefono ? `<p><strong>📞</strong> ${empresa.Telefono}</p>` : ''}
                        ${empresa.Email ? `<p><strong>✉️</strong> ${empresa.Email}</p>` : ''}
                        <a href="/empresa/${empresa.Slug}" target="_blank">Ver Empresa →</a>
                    </div>
                `)
                .addTo(map);
            
            markers.push({
                marker: marker,
                especialidad: empresa.Especialidad
            });
        }
    });
    
    // Función para filtrar por especialidad
    function filterByEspecialidad(especialidad) {
        let visibleCount = 0;
        
        markers.forEach(item => {
            if (especialidad === 'all' || item.especialidad === especialidad) {
                map.addLayer(item.marker);
                visibleCount++;
            } else {
                map.removeLayer(item.marker);
            }
        });
        
        // Actualizar contador
        document.getElementById('visible-empresas').textContent = visibleCount;
        
        // Actualizar estilos de botones
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.classList.remove('bg-blue-500', 'text-white');
            btn.classList.add('bg-gray-200', 'text-gray-700');
        });
        
        event.target.classList.remove('bg-gray-200', 'text-gray-700');
        event.target.classList.add('bg-blue-500', 'text-white');
    }
    
    // Función para centrar el mapa
    function centerMap() {
        if (markers.length > 0) {
            const group = new L.featureGroup(markers.map(m => m.marker));
            map.fitBounds(group.getBounds().pad(0.1));
        } else {
            map.setView([-9.19, -75.0152], 6);
        }
    }
    
    // Centrar el mapa al cargar
    centerMap();
</script>
{% endblock %}