{% extends 'main/header.html' %}
{% load category_filters %}
{% load custom_filters %}
{% load static %}
{% block content %}

<div class="message-container">
    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }}">
                {{ message }}
                <span class="close-btn" onclick="this.parentElement.remove()">×</span>
            </div>
        {% endfor %}
    {% endif %}
</div>

<div class="stores-wrapper">
    <div class="stores-container">
        <!-- Header Section -->
        <div class="stores-header">
            <div class="header-content">
                <h1 class="stores-main-title">Ценовна историја</h1>
                <p class="stores-subtitle">Откријте ја историјата на цените на производите од вашите омилени продавници</p>
            </div>
            <div class="back-button">
                <a href="{% url 'home' %}" class="back-link">
                    <i class="fas fa-arrow-left"></i> Назад кон почетна
                </a>
            </div>
        </div>

        <!-- Search Card -->
        <div class="search-card">
            <form method="get" id="searchForm" class="store-search-form">
                <div class="form-row">
                    <div class="form-group">
                        <label for="store"><i class="fas fa-store"></i> Продавница:</label>
                        <select name="store" id="store" required class="form-input">
                            <option value="">-- Избери продавница --</option>
                            <option value="Vero" {% if store == 'Vero' %}selected{% endif %}>Vero</option>
                            <option value="Ramstore" {% if store == 'Ramstore' %}selected{% endif %}>Ramstore</option>
                            <option value="Reptil" {% if store == 'Reptil' %}selected{% endif %}>Reptil</option>
                            <option value="Zito" {% if store == 'Zito' %}selected{% endif %}>Zito</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="searchInput"><i class="fas fa-search"></i> Име на производ:</label>
                        <input type="text" name="query" id="searchInput" value="{{ query }}" required
                               class="form-input" placeholder="Внеси име на производ (латиница или кирилица)" autocomplete="off">
                        <div id="suggestions" class="suggestions-container"></div>
                    </div>
                </div>

                <div class="form-actions">
                    <button type="submit" class="action-button primary-button">
                        <i class="fas fa-search"></i> Пребарај
                    </button>
                </div>
            </form>
        </div>

        <!-- Main Content Area -->
        <div class="main-content-area">
            {% if similar_products %}
            <div class="similar-products-section">
                <h2 class="section-title"><i class="fas fa-lightbulb"></i> Слични производи</h2>
                <div class="similar-products-grid">
                    {% for p, similarity in similar_products %}
                    <div class="similar-product-card" data-product="{{ p }}">
                        <span class="product-name">{{ p }}</span>
{#                        <span class="similarity-badge">{{ similarity|floatformat:2 }}% сличност</span>#}
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            <!-- Chart Section -->
            <div class="results-section">
                <h2 class="section-title"><i class="fas fa-chart-line"></i> Графикон на цени</h2>

                <div class="chart-container" id="chartContainer">
                    <div class="chart-header">
                        <h3 class="chart-title" id="chartTitle">Изберете производ за да ја видите ценовната историја</h3>
                        <div class="chart-actions" id="chartActions" style="display: none;"></div>
                    </div>

                    <div id="chartContent">
                        <div class="no-data">
                            <i class="fas fa-chart-bar"></i>
                            <h4>Нема податоци за приказ</h4>
                            <p>Изберете производ од листата за да ја видите неговата ценовната историја</p>
                        </div>
                    </div>
                </div>

                <div class="stats-container" id="statsContainer" style="display: none;">
                    <div class="stat-card">
                        <div class="stat-icon"><i class="fas fa-tag"></i></div>
                        <div class="stat-info">
                            <span class="stat-value" id="currentPrice">-</span>
                            <span class="stat-label">Тековна цена</span>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon low"><i class="fas fa-arrow-down"></i></div>
                        <div class="stat-info">
                            <span class="stat-value" id="lowestPrice">-</span>
                            <span class="stat-label">Најниска цена</span>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon high"><i class="fas fa-arrow-up"></i></div>
                        <div class="stat-info">
                            <span class="stat-value" id="highestPrice">-</span>
                            <span class="stat-label">Највисока цена</span>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon avg"><i class="fas fa-balance-scale"></i></div>
                        <div class="stat-info">
                            <span class="stat-value" id="averagePrice">-</span>
                            <span class="stat-label">Просечна цена</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
let priceChart = null;

// Show messages
document.querySelectorAll('.alert').forEach(alert => {
    setTimeout(() => alert.classList.add('show'), 100);
    setTimeout(() => { alert.remove(); }, 5000);
});

// Handle product click
document.querySelectorAll('.similar-product-card').forEach(item => {
    item.addEventListener('click', async function() {
        document.querySelectorAll('.similar-product-card').forEach(i => i.classList.remove('active'));
        this.classList.add('active');

        const productName = this.dataset.product;
        const store = document.querySelector('#store').value;
        if (!store) {
            showNotification("Ве молам изберете продавница прво.", "error");
            return;
        }

        document.getElementById('chartTitle').innerText = `Историја на цени за: ${productName}`;
        document.getElementById('chartActions').style.display = 'flex';
        document.getElementById('chartContent').innerHTML = '<div class="loading-spinner"><div class="spinner"></div><p>Вчитување на податоци...</p></div>';
        document.getElementById('statsContainer').style.display = 'grid';
        document.querySelectorAll('.stat-value').forEach(el => el.innerText = '...');

        try {
            const res = await fetch(`/api/product-history/?store=${store}&product=${encodeURIComponent(productName)}`);
            const data = await res.json();

            if (!data?.data?.length) {
                document.getElementById('chartContent').innerHTML = `
                    <div class="no-data">
                        <i class="fas fa-exclamation-circle"></i>
                        <h4>Нема податоци за цени</h4>
                        <p>Не се пронајдени записи за цени на овој производ</p>
                    </div>`;
                document.getElementById('statsContainer').style.display = 'none';
                return;
            }

            const sorted = data.data.sort((a,b)=> new Date(a.date)-new Date(b.date));
            const labels = sorted.map(e=>e.date);
            const prices = sorted.map(e=>parseFloat(e.price));

            document.getElementById('currentPrice').innerText = prices[prices.length-1] + " МКД";
            document.getElementById('lowestPrice').innerText = Math.min(...prices) + " МКД";
            document.getElementById('highestPrice').innerText = Math.max(...prices) + " МКД";
            document.getElementById('averagePrice').innerText = (prices.reduce((a,b)=>a+b,0)/prices.length).toFixed(2) + " МКД";

            document.getElementById('chartContent').innerHTML = '<canvas id="priceChart"></canvas>';
            const ctx = document.getElementById('priceChart').getContext('2d');
            if (priceChart) priceChart.destroy();

            priceChart = new Chart(ctx, {
                type:'line',
                data:{
                    labels: labels,
                    datasets:[{
                        label:'Цена (МКД)',
                        data: prices,
                        borderColor:'#2e652e',
                        backgroundColor:'rgba(46,101,46,0.1)',
                        fill:true,
                        tension: 0.3,
                        borderWidth: 2,
                        pointBackgroundColor: '#2e652e',
                        pointRadius: 4,
                        pointHoverRadius: 6
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false,
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: false,
                            title: {
                                display: true,
                                text: 'Цена (МКД)'
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: 'Датум'
                            }
                        }
                    }
                }
            });

        } catch(err){
            console.error(err);
            document.getElementById('chartContent').innerHTML = `
                <div class="no-data">
                    <i class="fas fa-exclamation-triangle"></i>
                    <h4>Грешка при вчитување</h4>
                    <p>Настана грешка при вчитување на податоците</p>
                </div>`;
            document.getElementById('statsContainer').style.display = 'none';
        }
    });
});

// ==================== Transliteration + Search Suggestions ====================
document.addEventListener('DOMContentLoaded', function () {
    const searchInput = document.getElementById('searchInput');
    const suggestionsDiv = document.getElementById('suggestions');
    const searchForm = document.getElementById('searchForm');

    // Enhanced transliteration function
    function transliterateLatinToCyrillic(text) {
        const map = {
            'dzh': 'џ', 'dz': 'ѕ', 'zh': 'ж', 'ch': 'ч', 'sh': 'ш',
            'lj': 'љ', 'nj': 'њ', 'kj': 'ќ', 'gj': 'ѓ',
            'a': 'а', 'b': 'б', 'v': 'в', 'g': 'г', 'd': 'д',
            'e': 'е', 'z': 'з', 'i': 'и', 'j': 'ј', 'k': 'к',
            'l': 'л', 'm': 'м', 'n': 'н', 'o': 'о', 'p': 'п',
            'r': 'р', 's': 'с', 't': 'т', 'u': 'у', 'f': 'ф',
            'h': 'х', 'c': 'ц', 'y': 'ј', 'w': 'в', 'x': 'кс',
            'q': 'к'
        };

        let result = '';
        let i = 0;
        const t = text.toLowerCase();

        while (i < t.length) {
            let found = false;

            // Check for 3-character sequences first
            if (i + 2 < t.length && map[t.substring(i, i + 3)]) {
                result += map[t.substring(i, i + 3)];
                i += 3;
                found = true;
            }
            // Check for 2-character sequences
            else if (i + 1 < t.length && map[t.substring(i, i + 2)]) {
                result += map[t.substring(i, i + 2)];
                i += 2;
                found = true;
            }
            // Check for single characters
            else if (map[t[i]]) {
                result += map[t[i]];
                i++;
                found = true;
            }

            // If no mapping found, keep the original character
            if (!found) {
                result += t[i];
                i++;
            }
        }

        return result;
    }

    // Handle form submission with transliteration
    searchForm.addEventListener('submit', function(e) {
        const query = searchInput.value.trim();
        if (query) {
            // Check if the query is in Latin script
            const isLatin = /[a-zA-Z]/.test(query) && !/[а-яА-Я]/.test(query);

            if (isLatin) {
                // Convert Latin to Cyrillic for search
                const cyrillicQuery = transliterateLatinToCyrillic(query);

                // Create a hidden input to submit the Cyrillic version
                const hiddenInput = document.createElement('input');
                hiddenInput.type = 'hidden';
                hiddenInput.name = 'query_cyr';
                hiddenInput.value = cyrillicQuery;

                // Add to form and submit
                this.appendChild(hiddenInput);
            }
        }
    });

    async function fetchSuggestions(query){
        const store = document.querySelector('#store').value;
        if(!store) {
            suggestionsDiv.style.display='none';
            return [];
        }

        // Check if query is in Latin and transliterate
        const isLatin = /[a-zA-Z]/.test(query) && !/[а-яА-Я]/.test(query);
        const searchQuery = isLatin ? transliterateLatinToCyrillic(query) : query;

        try {
            const res = await fetch(`/api/similar-products/?store=${store}&q=${encodeURIComponent(searchQuery)}`);
            const data = await res.json();
            return data.products || [];
        } catch (error) {
            console.error("Error fetching suggestions:", error);
            return [];
        }
    }

    searchInput.addEventListener('input', async function(){
        const val = this.value.trim();
        if(!val) {
            suggestionsDiv.style.display='none';
            return;
        }

        const suggestions = await fetchSuggestions(val);

        if(suggestions.length){
            suggestionsDiv.innerHTML = suggestions.map(p=>`<div class="suggestion-item" data-product="${p}">${p}</div>`).join('');
            suggestionsDiv.style.display='block';

            document.querySelectorAll('.suggestion-item').forEach(el=>{
                el.addEventListener('click', function(){
                    searchInput.value = this.dataset.product;
                    suggestionsDiv.style.display='none';
                });
            });
        } else {
            suggestionsDiv.style.display='none';
        }
    });

    document.addEventListener('click', e=>{
        if(!suggestionsDiv.contains(e.target) && e.target!==searchInput) {
            suggestionsDiv.style.display='none';
        }
    });
});

function showNotification(message, type) {
    // Remove any existing notifications
    const existingNotifications = document.querySelectorAll('.notification');
    existingNotifications.forEach(notif => notif.remove());

    const notification = document.createElement('div');
    notification.className = `notification ${type}`;
    notification.innerHTML = `
        <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'}"></i>
        <span>${message}</span>
        <button onclick="this.parentElement.remove()"><i class="fas fa-times"></i></button>
    `;

    document.body.appendChild(notification);

    // Auto remove after 5 seconds
    setTimeout(() => {
        if (notification.parentElement) {
            notification.remove();
        }
    }, 5000);
}
</script>

<style>
:root {
    --primary: #2e652e;
    --primary-dark: #1f3f1f;
    --primary-light: #81c784;
    --accent: #4caf50;
    --text: #333;
    --text-light: #666;
    --background: #f9f9f9;
    --card-bg: #ffffff;
    --border: #e0e0e0;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
    --success: #4caf50;
    --error: #f44336;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background: var(--background);
    color: var(--text);
    line-height: 1.6;
}

.stores-wrapper {
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px;
}

.stores-container {
    background: var(--card-bg);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.stores-header {
    background: linear-gradient(135deg, rgba(46,101,46,0.9) 0%, rgba(76,175,80,0.8) 100%), url('{% static "images/baner1.jpg" %}') center/cover no-repeat;
    color: white;
    padding: 30px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.header-content {
    max-width: 70%;
}

.stores-main-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.stores-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    font-weight: 300;
}

.back-button {
    position: absolute;
    top: 20px;
    right: 20px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.back-link:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.search-card {
    padding: 30px;
    border-bottom: 1px solid var(--border);
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.form-group {
    flex: 1;
    min-width: 250px;
    position: relative;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.9rem;
}

.form-input, select {
    width: 100%;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-size: 1rem;
    transition: all 0.3s ease;
    background: var(--card-bg);
}

.form-input:focus, select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(46, 101, 46, 0.1);
}

.form-actions {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.action-button {
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: none;
    font-size: 1rem;
}

.primary-button {
    background: var(--primary);
    color: white;
}

.primary-button:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(46, 101, 46, 0.2);
}

/* Main content area with side-by-side layout */
.main-content-area {
    display: flex;
    padding: 20px;
    gap: 30px;
    align-items: flex-start;
}

.similar-products-section {
    flex: 0 0 35%;
    max-width: 35%;
    padding: 20px;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.results-section {
    flex: 1;
    min-width: 0;
}

.section-title {
    font-size: 1.5rem;
    margin-bottom: 25px;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.similar-products-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    max-height: 600px;
    overflow-y: auto;
    padding-right: 10px;
}

.similar-products-grid::-webkit-scrollbar {
    width: 8px;
}

.similar-products-grid::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.similar-products-grid::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: 10px;
}

.similar-products-grid::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

.similar-product-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    border-left: 4px solid var(--primary-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.similar-product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.similar-product-card.active {
    background: #e8f5e9;
    border-left: 4px solid var(--primary);
}

.product-name {
    font-weight: 500;
    color: var(--text);
    flex: 1;
}

.similarity-badge {
    background: var(--primary-light);
    color: var(--primary-dark);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: 10px;
}

.chart-container {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 25px;
    box-shadow: var(--shadow);
    margin-bottom: 25px;
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.chart-title {
    font-size: 1.2rem;
    color: var(--text);
    margin: 0;
    font-weight: 600;
}

.chart-actions {
    display: flex;
    gap: 10px;
}

.chart-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 0.9rem;
}

.export-btn {
    background: var(--primary);
    color: white;
}

.export-btn:hover {
    background: var(--primary-dark);
}

.info-btn {
    background: #2196f3;
    color: white;
}

.info-btn:hover {
    background: #0b7dda;
}

#chartContent {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#priceChart {
    flex: 1;
    min-height: 400px;
}

.no-data {
    text-align: center;
    color: var(--text-light);
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    flex: 1;
}

.no-data i {
    font-size: 3.5rem;
    margin-bottom: 15px;
    color: #ddd;
}

.no-data h4 {
    font-size: 1.3rem;
    margin: 0 0 10px 0;
    color: var(--text-light);
}

.no-data p {
    margin: 0;
    font-size: 1rem;
}

.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 30px;
    text-align: center;
    flex: 1;
}

.spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(46, 101, 46, 0.1);
    border-radius: 50%;
    border-top: 4px solid var(--primary);
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.stat-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    background: rgba(46, 101, 46, 0.1);
    color: var(--primary);
    font-size: 1.2rem;
}

.stat-icon.low {
    background: rgba(76, 175, 80, 0.1);
    color: var(--success);
}

.stat-icon.high {
    background: rgba(244, 67, 54, 0.1);
    color: var(--error);
}

.stat-icon.avg {
    background: rgba(33, 150, 243, 0.1);
    color: #2196f3;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-light);
}
.stores-wrapper{
    margin-left: 60px;
    margin-right: 60px;
}

.message-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.alert {
    position: relative;
    padding: 15px 20px;
    background: var(--card-bg);
    border-left: 4px solid var(--primary);
    border-radius: 6px;
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateX(100%);
    transition: 0.4s;
    max-width: 350px;
}

.alert.show {
    opacity: 1;
    transform: translateX(0);
}

.close-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--text-light);
}

.close-btn:hover {
    color: var(--text);
}

.suggestions-container {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--border);
    border-radius: 0 0 8px 8px;
    box-shadow: var(--shadow);
    z-index: 100;
    display: none;
    max-height: 200px;
    overflow-y: auto;
}

.suggestion-item {
    padding: 12px 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
}

.suggestion-item:hover {
    background: #e8f5e9;
}

.suggestion-item:last-child {
    border-bottom: none;
}

/* Notification system */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 20px;
    border-radius: 10px;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow);
    z-index: 1000;
    animation: slideIn 0.3s ease;
    max-width: 350px;
}

.notification.success {
    background: var(--success);
}

.notification.error {
    background: var(--error);
}

.notification button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    margin-left: 10px;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Responsive design */
@media (max-width: 1200px) {
    .main-content-area {
        flex-direction: column;
    }

    .similar-products-section {
        flex: 1;
        max-width: 100%;
        width: 100%;
    }

    .similar-products-grid {
        max-height: 300px;
    }
}

@media (max-width: 768px) {
    .stores-header {
        flex-direction: column;
        gap: 20px;
    }

    .header-content {
        max-width: 100%;
    }

    .back-button {
        position: relative;
        top: 0;
        right: 0;
        align-self: flex-end;
    }

    .stores-main-title {
        font-size: 2rem;
    }

    .form-row {
        flex-direction: column;
        gap: 15px;
    }

    .form-group {
        min-width: 100%;
    }

    .form-actions {
        flex-direction: column;
    }

    .action-button {
        width: 100%;
        justify-content: center;
    }

    .stats-container {
        grid-template-columns: 1fr;
    }

    .chart-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .chart-actions {
        width: 100%;
        justify-content: center;
    }
}
</style>

{% endblock %}