{% extends 'services/base_services.html' %}
{% load static %}
{% load service_filters %}

{% block title %}{{ block.super }} | Professional Services{% endblock %}

{% block page_header %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h2 mb-0">Our Services</h1>
    <div class="d-flex align-items-center">
        <div class="input-group input-group-sm" style="max-width: 250px;">
            <input type="text" id="searchInput" class="form-control" placeholder="Search services..." value="{{ search_query|default:'' }}">
            <button class="btn btn-outline-primary" type="button" id="searchButton">
                <i class="fas fa-search"></i>
            </button>
        </div>
    </div>
</div>
{% endblock %}

{% block page_subheader %}
<p class="text-muted mb-0">Browse our professional services to find the perfect solution for your needs</p>
{% endblock %}

{% block extra_css %}
{{ block.super }}
<style>
    /* Service card styles */
    .service-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 12px;
        overflow: hidden;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: white;
    }
    
    .service-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
    }
    
    .card-img-container {
        position: relative;
        background-color: #f8f9fa;
        height: 180px;
        overflow: hidden;
    }
    
    .card-img-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    
    .service-card:hover .card-img-container img {
        transform: scale(1.05);
    }
    
    /* Category filter buttons */
    .category-filter {
        background-color: transparent;
        color: var(--bs-body-color);
        border: 1px solid #dee2e6;
        transition: all 0.2s ease;
        font-size: 0.85rem;
        padding: 0.4rem 0.9rem;
        margin: 0.1rem;
        border-radius: 20px;
    }
    
    .category-filter:hover {
        background-color: rgba(var(--bs-primary-rgb), 0.1);
        border-color: var(--bs-primary);
        color: var(--bs-primary);
    }
    
    .category-filter.active {
        background-color: var(--bs-primary) !important;
        border-color: var(--bs-primary) !important;
        color: white !important;
    }
    
    .category-badge {
        font-size: 0.7rem;
        min-width: 1.25rem;
        background-color: rgba(0, 0, 0, 0.1);
        padding: 0.15em 0.4em;
        border-radius: 10px;
    }
    
    .category-filter.active .badge {
        background: white !important;
        color: var(--bs-primary) !important;
        transform: scale(1.1);
    }
    
    /* Empty state animation */
    .empty-state-animation {
        position: relative;
        width: 160px;
        height: 160px;
        margin: 0 auto 2rem;
    }
    
    @keyframes pulse {
        0% { transform: scale(0.8); opacity: 0.1; }
        50% { transform: scale(1.2); opacity: 0.2; }
        100% { transform: scale(0.8); opacity: 0.1; }
    }
    
    .empty-state-animation .spinner-grow {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.1;
        border-radius: 50%;
        animation: pulse 2s infinite ease-in-out;
    }
</style>
{% endblock %}

{% block services_content %}
<div class="container py-4">
    <!-- Category Tabs with Counters -->
    <div class="mb-4">
        <h2 class="h5 mb-3">Filter by Category</h2>
        <div class="d-flex flex-wrap gap-2" id="category-filters">
            <button type="button" 
                    class="btn btn-sm btn-outline-primary category-filter {% if not current_category %}active{% endif %}" 
                    data-category="all">
                All Services
                <span class="badge bg-secondary ms-1">{{ services.paginator.count }}</span>
            </button>
            
            {% for cat in categories %}
                {% if cat.id != 'all' %}
                <button type="button" 
                        class="btn btn-sm btn-outline-primary category-filter {% if current_category == cat.id %}active{% endif %}" 
                        data-category="{{ cat.id }}">
                    {{ cat.name }}
                    <span class="badge bg-secondary ms-1">{{ cat.count }}</span>
                </button>
                {% endif %}
            {% endfor %}
        </div>
    </div>
    
    <!-- Services Grid -->
    <div class="mt-4">
        {% if services %}
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4" id="services-grid">
            {% for service in services %}
            <div class="col service-item" data-category="{{ service.category }}">
                <div class="card service-card h-100">
                    <div class="card-img-container">
                        {% if service.image %}
                        <img src="{{ service.image.url }}" class="card-img-top" alt="{{ service.title }}">
                        {% else %}
                        <div class="bg-light d-flex align-items-center justify-content-center h-100">
                            <i class="fas {{ service.icon|default:'fa-camera' }} fa-3x text-muted"></i>
                        </div>
                        {% endif %}
                        <span class="position-absolute top-0 end-0 m-2 badge bg-primary">
                            {{ service.get_category_display }}
                        </span>
                    </div>
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title h6 mb-2">{{ service.title }}</h5>
                        <p class="card-text text-muted small flex-grow-1 mb-3">
                            {{ service.short_description|truncatewords:15 }}
                        </p>
                        <div class="d-flex justify-content-between align-items-center mt-auto">
                            <div>
                                <span class="h6 mb-0 text-primary">KSh {{ service.base_price|floatformat:2 }}</span>
                                <span class="text-muted small d-block">Starting price</span>
                            </div>
                            <a href="{{ service.get_absolute_url }}" class="btn btn-sm btn-outline-primary">
                                View Details
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        
        <!-- Pagination -->
        {% if services.has_other_pages %}
        <nav aria-label="Services pagination" class="mt-4">
            <ul class="pagination justify-content-center">
                {% if services.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ services.previous_page_number }}{% if current_category %}&category={{ current_category }}{% endif %}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                {% endif %}
                
                {% for i in services.paginator.page_range %}
                    {% if services.number == i %}
                    <li class="page-item active">
                        <span class="page-link">{{ i }}</span>
                    </li>
                    {% else %}
                        {% if i > services.number|add:'-3' and i < services.number|add:'3' %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ i }}{% if current_category %}&category={{ current_category }}{% endif %}">{{ i }}</a>
                        </li>
                        {% endif %}
                    {% endif %}
                {% endfor %}
                
                {% if services.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ services.next_page_number }}{% if current_category %}&category={{ current_category }}{% endif %}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}
        
        {% else %}
        <!-- Empty State -->
        <div class="empty-state-container text-center py-5 my-5">
            <div class="empty-state-animation mb-4">
                <i class="fas fa-camera fa-5x text-muted mb-3"></i>
                <div class="d-flex justify-content-center">
                    <div class="spinner-grow text-primary" role="status" style="width: 3rem; height: 3rem;">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            </div>
            <h3 class="h4 mb-3">No Services Found</h3>
            <p class="text-muted mb-4">
                We couldn't find any services matching your criteria. 
                Try adjusting your filters or check back later for new additions.
            </p>
            <div class="d-flex gap-2 justify-content-center">
                <a href="{% url 'services:list' %}" class="btn btn-primary">
                    <i class="fas fa-redo me-2"></i>Reset Filters
                </a>
                <a href="{% url 'contact:contact' %}" class="btn btn-outline-primary">
                    <i class="fas fa-envelope me-2"></i>Contact Us
                </a>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
{{ block.super }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Search functionality
    const searchInput = document.getElementById('searchInput');
    const searchButton = document.getElementById('searchButton');
    
    function performSearch() {
        const query = searchInput.value.trim();
        const url = new URL(window.location.href);
        
        if (query) {
            url.searchParams.set('q', query);
        } else {
            url.searchParams.delete('q');
        }
        
        // Reset to first page when searching
        url.searchParams.set('page', '1');
        
        window.location.href = url.toString();
    }
    
    if (searchButton) {
        searchButton.addEventListener('click', performSearch);
    }
    
    if (searchInput) {
        searchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                performSearch();
            }
        });
    }
    
    // Category filter functionality
    const categoryFilters = document.querySelectorAll('.category-filter');
    
    categoryFilters.forEach(filter => {
        filter.addEventListener('click', function() {
            const category = this.dataset.category;
            const url = new URL(window.location.href);
            
            if (category === 'all') {
                url.searchParams.delete('category');
            } else {
                url.searchParams.set('category', category);
            }
            
            // Reset to first page when changing categories
            url.searchParams.set('page', '1');
            
            window.location.href = url.toString();
        });
    });
});
</script>
{% endblock %}