{% extends "base.html" %}

{% block content %}
<section class="container py-5" data-aos="fade-up">
    <div class="text-center mb-5">
        <span class="badge bg-success mb-2" style="padding:8px 20px;border-radius:50px;">
            <i class="fas fa-user-cog"></i> تکنسین‌های ما
        </span>
        <h2 class="fw-bold">تکنسین‌های مجرب <span style="color:#c41e3a;">دوو</span></h2>
        <p class="text-secondary">تکنسین‌های با تجربه و حرفه‌ای در تمام مناطق تهران</p>
        
        <!-- ===== جستجو ===== -->
        <div class="row justify-content-center mt-3">
            <div class="col-lg-6">
                <form method="GET" action="{{ url_for('technicians') }}" class="d-flex gap-2">
                    <input type="text" name="search" class="form-control form-control-sm rounded-pill" 
                           placeholder="جستجوی تکنسین..." value="{{ request.args.get('search', '') }}">
                    <button type="submit" class="btn btn-success btn-sm rounded-pill">
                        <i class="fas fa-search"></i> جستجو
                    </button>
                    {% if request.args.get('search') %}
                    <a href="{{ url_for('technicians') }}" class="btn btn-outline-secondary btn-sm rounded-pill">
                        <i class="fas fa-times"></i>
                    </a>
                    {% endif %}
                </form>
            </div>
        </div>
    </div>

    <!-- ===== نمایش تکنسین‌ها ===== -->
    <div class="row g-4">
        {% set filtered_technicians = technicians %}
        {% if request.args.get('search') %}
            {% set search_term = request.args.get('search').lower() %}
            {% set filtered_technicians = [] %}
            {% for tech in technicians %}
                {% if search_term in tech.fullname.lower() or search_term in tech.expertise_display.lower() %}
                    {% set _ = filtered_technicians.append(tech) %}
                {% endif %}
            {% endfor %}
        {% endif %}
        
        {% for tech in filtered_technicians %}
        <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="{{ loop.index * 50 }}">
            <div class="card border-0 shadow-sm h-100" style="border-radius:16px;overflow:hidden;transition:0.3s;">
                <div class="card-body text-center p-4">
                    <div class="rounded-circle mx-auto d-flex align-items-center justify-content-center" 
                         style="width:100px;height:100px;background:linear-gradient(135deg,#c41e3a,#8b0000);margin:0 auto;">
                        <span style="font-size:2.8rem;font-weight:700;color:#fff;">{{ tech.fullname[0] }}</span>
                    </div>
                    <a href="{{ url_for('technician_detail', technician_id=tech.id) }}" class="text-decoration-none">
                        <h5 class="fw-bold mt-3" style="color:#1a1a2e;">{{ tech.fullname }}</h5>
                    </a>
                    <div class="d-flex justify-content-center gap-2">
                        <span class="badge bg-success" style="font-size:0.7rem;padding:4px 10px;">
                            <i class="fas fa-circle"></i> آنلاین
                        </span>
                        <span class="badge bg-warning text-dark" style="font-size:0.7rem;padding:4px 10px;">
                            <i class="fas fa-star"></i> {{ tech.rating|default(4.8) }}
                        </span>
                        <span class="badge bg-info text-dark" style="font-size:0.7rem;padding:4px 10px;">
                            {{ tech.total_repairs|default(0)|persian_numbers }} تعمیر
                        </span>
                    </div>
                    
                    <!-- ===== تخصص ===== -->
                    <p class="text-secondary small mt-2">
                        {% if tech.expertise_display %}
                            {{ tech.expertise_display|truncate(40) }}
                        {% else %}
                            {{ tech.expertise_areas|default('تعمیرات تخصصی دوو')|replace('["', '')|replace('"]', '')|replace('", "', '، ')|truncate(40) }}
                        {% endif %}
                    </p>
                    
                    <div class="mt-2">
                        <span class="badge bg-light text-dark" style="font-size:0.7rem;padding:4px 10px;">
                            <i class="fas fa-calendar"></i> {{ tech.experience_years|default(5)|persian_numbers }} سال تجربه
                        </span>
                    </div>
                    
                    <a href="tel:{{ tech.phone|default(settings.phone1|default('02155551234'))|replace(' ', '')|replace('-', '') }}" 
                       class="btn btn-sm btn-success rounded-pill mt-3" style="font-size:0.75rem;">
                        <i class="fas fa-phone"></i> تماس با تکنسین
                    </a>
                </div>
            </div>
        </div>
        {% else %}
        <div class="col-12 text-center text-secondary py-5">
            <i class="fas fa-user-cog" style="font-size:4rem;opacity:0.3;"></i>
            <p class="mt-3">هیچ تکنسینی با این مشخصات یافت نشد.</p>
            <a href="{{ url_for('technicians') }}" class="btn btn-outline-success rounded-pill">
                <i class="fas fa-arrow-right"></i> مشاهده همه تکنسین‌ها
            </a>
        </div>
        {% endfor %}
    </div>

    <!-- ===== تعداد نتایج ===== -->
    {% if filtered_technicians %}
    <div class="text-center mt-4">
        <span class="badge bg-secondary" style="font-size:0.9rem;padding:8px 20px;">
            <i class="fas fa-users"></i> {{ filtered_technicians|length|persian_numbers }} تکنسین یافت شد
        </span>
    </div>
    {% endif %}

    <!-- ===== CTA ===== -->
    <div class="cta-section mt-5">
        <h3 class="fw-bold">به دنبال <span style="color:#f5c518;">تکنسین</span> هستید؟</h3>
        <p>همین حالا با ما تماس بگیرید تا بهترین تکنسین را به شما معرفی کنیم</p>
        <a href="tel:{{ settings.phone1|default('02155551234')|replace(' ', '')|replace('-', '') }}" 
           class="btn-hero" style="display:inline-flex;align-items:center;gap:10px;padding:14px 40px;">
            <i class="fas fa-phone-volume fa-fade"></i> {{ settings.phone1|default('۰۲۱-۵۵۵۵-۱۲۳۴') }}
        </a>
    </div>
</section>

<style>
    .cta-section {
        background: linear-gradient(135deg, #1a1a2e, #16213e);
        padding: 40px 20px;
        border-radius: 20px;
        text-align: center;
    }
    .cta-section h3 { color: #fff; font-weight: 900; }
    .cta-section p { color: rgba(255,255,255,0.7); max-width: 500px; margin: 12px auto; }
    .btn-hero {
        background: linear-gradient(135deg, #f5c518, #f5a623);
        color: #1a1a2e;
        padding: 12px 30px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 0.95rem;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: 0.3s;
        border: none;
    }
    .btn-hero:hover {
        transform: scale(1.05);
        box-shadow: 0 12px 50px rgba(245, 197, 24, 0.4);
        color: #1a1a2e;
    }
    
    /* اعداد فارسی */
    .badge, .fw-bold, strong {
        font-feature-settings: "ss02";
    }
    
    @media (max-width: 576px) {
        .card-body { padding: 15px !important; }
        .rounded-circle { width: 70px !important; height: 70px !important; }
        .rounded-circle span { font-size: 2rem !important; }
    }
</style>
{% endblock %}