{% extends "base.html" %}

{% block content %}
<section class="container py-5" data-aos="fade-up">
    <div class="row g-4">
        <!-- ===== ستون اصلی ===== -->
        <div class="col-lg-8">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url_for('index') }}">خانه</a></li>
                    <li class="breadcrumb-item"><a href="{{ url_for('regions') }}">مناطق</a></li>
                    <li class="breadcrumb-item active">{{ region.name }}</li>
                </ol>
            </nav>

            <div class="card border-0 shadow-sm" style="border-radius:16px;overflow:hidden;">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-start">
                        <h3 class="fw-bold">{{ region.name }}</h3>
                        <span class="badge bg-danger" style="font-size:1rem;padding:8px 16px;">
                            <i class="fas fa-map-pin"></i> منطقه {{ region.region_number|persian_numbers }}
                        </span>
                    </div>
                    <p class="text-secondary mt-2">{{ region.description|default('منطقه تحت پوشش خدمات تعمیرات دوو با بهترین کیفیت') }}</p>
                    
                    <!-- آمار -->
                    <div class="row g-3 mt-3">
                        <div class="col-md-3 col-6">
                            <div class="p-3 bg-light rounded-3 text-center">
                                <i class="fas fa-users" style="color:#c41e3a;font-size:1.5rem;"></i>
                                <p class="mb-0 small">جمعیت</p>
                                <strong>{{ region.population|default('---')|persian_numbers }}</strong>
                            </div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="p-3 bg-light rounded-3 text-center">
                                <i class="fas fa-check-circle" style="color:#c41e3a;font-size:1.5rem;"></i>
                                <p class="mb-0 small">پوشش</p>
                                <strong>{{ region.coverage_percentage|default(0)|persian_numbers }}%</strong>
                            </div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="p-3 bg-light rounded-3 text-center">
                                <i class="fas fa-wrench" style="color:#c41e3a;font-size:1.5rem;"></i>
                                <p class="mb-0 small">خدمات</p>
                                <strong>{{ region.service_count|default(0)|persian_numbers }}</strong>
                            </div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="p-3 bg-light rounded-3 text-center">
                                <i class="fas fa-star" style="color:#f5c518;font-size:1.5rem;"></i>
                                <p class="mb-0 small">امتیاز</p>
                                <strong>{{ region.avg_rating|default(0) }}</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- نقشه منطقه -->
            <div id="regionMap" style="height:350px;border-radius:16px;overflow:hidden;margin-top:20px;box-shadow:0 4px 20px rgba(0,0,0,0.08);"></div>

            <!-- جزئیات بیشتر -->
            <div class="row g-3 mt-3">
                {% if region.get_districts() %}
                <div class="col-md-6">
                    <div class="card border-0 shadow-sm h-100" style="border-radius:16px;overflow:hidden;">
                        <div class="card-body p-4">
                            <h6 class="fw-bold"><i class="fas fa-city" style="color:#c41e3a;"></i> محله‌ها</h6>
                            <div class="d-flex flex-wrap gap-1">
                                {% for district in region.get_districts() %}
                                <span class="badge bg-light text-dark">{{ district }}</span>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}

                {% if region.get_main_streets() %}
                <div class="col-md-6">
                    <div class="card border-0 shadow-sm h-100" style="border-radius:16px;overflow:hidden;">
                        <div class="card-body p-4">
                            <h6 class="fw-bold"><i class="fas fa-road" style="color:#c41e3a;"></i> خیابان‌های اصلی</h6>
                            <div class="d-flex flex-wrap gap-1">
                                {% for street in region.get_main_streets() %}
                                <span class="badge bg-light text-dark">{{ street }}</span>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}

                {% if region.get_landmarks() %}
                <div class="col-md-6">
                    <div class="card border-0 shadow-sm h-100" style="border-radius:16px;overflow:hidden;">
                        <div class="card-body p-4">
                            <h6 class="fw-bold"><i class="fas fa-monument" style="color:#c41e3a;"></i> اماکن مهم</h6>
                            <div class="d-flex flex-wrap gap-1">
                                {% for landmark in region.get_landmarks() %}
                                <span class="badge bg-light text-dark">{{ landmark }}</span>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}

                {% if region.get_metro_stations() %}
                <div class="col-md-6">
                    <div class="card border-0 shadow-sm h-100" style="border-radius:16px;overflow:hidden;">
                        <div class="card-body p-4">
                            <h6 class="fw-bold"><i class="fas fa-train" style="color:#c41e3a;"></i> ایستگاه‌های مترو</h6>
                            <div class="d-flex flex-wrap gap-1">
                                {% for station in region.get_metro_stations() %}
                                <span class="badge bg-light text-dark">{{ station }}</span>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- ===== سایدبار ===== -->
        <div class="col-lg-4" data-aos="fade-left">
            <!-- اطلاعات تماس -->
            <div class="card border-0 shadow-sm" style="border-radius:16px;overflow:hidden;">
                <div class="card-body p-4">
                    <h6 class="fw-bold"><i class="fas fa-info-circle" style="color:#c41e3a;"></i> اطلاعات منطقه</h6>
                    <ul class="list-unstyled small">
                        <li class="mb-2"><i class="fas fa-map-pin" style="color:#c41e3a;width:20px;"></i> منطقه {{ region.region_number }}</li>
                        <li class="mb-2"><i class="fas fa-vector-square" style="color:#c41e3a;width:20px;"></i> {{ region.area_sqkm|default('---') }} کیلومتر مربع</li>
                        <li class="mb-2"><i class="fas fa-users" style="color:#c41e3a;width:20px;"></i> {{ region.population|default('---')|persian_numbers }} نفر</li>
                        <li class="mb-2"><i class="fas fa-check-circle" style="color:#c41e3a;width:20px;"></i> {{ region.coverage_percentage|default(0)|persian_numbers }}% تحت پوشش</li>
                    </ul>
                    <hr>
                    <h6 class="fw-bold"><i class="fas fa-phone" style="color:#c41e3a;"></i> تماس با ما</h6>
                    <a href="tel:{{ settings.phone1|default('02155551234')|replace(' ', '')|replace('-', '') }}" 
                       class="btn btn-danger w-100 rounded-pill" 
                       style="background:linear-gradient(135deg,#c41e3a,#8b0000);border:none;">
                        <i class="fas fa-phone"></i> {{ settings.phone1|default('۰۲۱-۵۵۵۵-۱۲۳۴') }}
                    </a>
                </div>
            </div>

            <!-- تکنسین‌های منطقه -->
            {% if region.technicians %}
            <div class="card border-0 shadow-sm mt-4" style="border-radius:16px;overflow:hidden;">
                <div class="card-header bg-white border-0 p-4">
                    <h6 class="fw-bold mb-0"><i class="fas fa-user-cog" style="color:#c41e3a;"></i> تکنسین‌های منطقه</h6>
                </div>
                <div class="card-body p-4">
                    {% for tech in region.technicians[:3] %}
                    <a href="{{ url_for('technician_detail', technician_id=tech.id) }}" 
                       class="text-decoration-none d-block p-2 rounded-3 hover-bg-light" 
                       style="transition:0.3s;border-bottom:1px solid #f0f0f0;">
                        <div class="d-flex align-items-center gap-2">
                            <div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center" 
                                 style="width:35px;height:35px;background:linear-gradient(135deg,#c41e3a,#8b0000)!important;flex-shrink:0;">
                                <span style="font-weight:700;font-size:0.8rem;">{{ tech.fullname[0] }}</span>
                            </div>
                            <div>
                                <span style="font-size:0.85rem;">{{ tech.fullname }}</span>
                                <br><small class="text-secondary">{{ tech.expertise_display|default('تکنسین دوو')|truncate(20) }}</small>
                            </div>
                            <span class="badge bg-success ms-auto" style="font-size:0.55rem;"><i class="fas fa-circle"></i> آنلاین</span>
                        </div>
                    </a>
                    {% endfor %}
                    {% if region.technicians|length > 3 %}
                    <div class="text-center mt-2">
                        <a href="{{ url_for('technicians') }}" class="btn btn-sm btn-outline-secondary rounded-pill">
                            مشاهده همه
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            <!-- خدمات منطقه -->
            {% if region.dynamic_contents %}
            <div class="card border-0 shadow-sm mt-4" style="border-radius:16px;overflow:hidden;">
                <div class="card-header bg-white border-0 p-4">
                    <h6 class="fw-bold mb-0"><i class="fas fa-wrench" style="color:#c41e3a;"></i> خدمات در منطقه</h6>
                </div>
                <div class="card-body p-4">
                    {% for content in region.dynamic_contents[:3] %}
                    <div class="p-2 rounded-3 mb-2" style="border-bottom:1px solid #f0f0f0;">
                        <span style="font-size:0.85rem;">{{ content.title|truncate(40) }}</span>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</section>

<!-- ============================================================
   اسکریپت نقشه
   ============================================================ -->
<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>
document.addEventListener('DOMContentLoaded', function() {
    var region = {{ region_dict|tojson|safe }};
    
    var map = L.map('regionMap').setView(
        [region.latitude || 35.6892, region.longitude || 51.3890], 
        13
    );
    
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap'
    }).addTo(map);
    
    var icon = L.divIcon({
        html: '<i class="fas fa-map-pin" style="color:#c41e3a;font-size:2.5rem;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.3));"></i>',
        iconSize: [30, 30],
        className: 'custom-div-icon'
    });
    
    if (region.latitude && region.longitude) {
        L.marker([region.latitude, region.longitude], {icon: icon}).addTo(map)
            .bindPopup(`
                <div style="text-align:center;font-family:Vazirmatn;min-width:150px;">
                    <strong style="color:#c41e3a;font-size:1.1rem;">${region.name}</strong><br>
                    <span style="font-size:0.85rem;color:#666;">منطقه ${region.region_number}</span><br>
                    <span class="badge bg-success">${region.coverage_percentage || 0}% تحت پوشش</span>
                </div>
            `);
    }
    
    setTimeout(function() { map.invalidateSize(); }, 300);
    window.addEventListener('resize', function() { map.invalidateSize(); });
});
</script>

<style>
    .custom-div-icon { background: transparent !important; border: none !important; }
    .hover-bg-light:hover { background: #f8f9fa; }
    .badge { font-size: 0.7rem; padding: 4px 8px; }
</style>
{% endblock %}