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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
        /* Common Styles */
                :root {
            --primary-color: #2e652e;
            --primary-dark: #1f3f1f;
            --secondary-color: white; /* Text color */
            --light-bg: #f5f5f5;
            --white: #ffffff;
            --text-dark: #333333;
            --text-light: #666666;
            --border-color: #e0e0e0;
            --error-color: #e74c3c;
            {#--orange-light: rgba(249,139,36,0.85);#}
            --orange-light: rgba(253,216,53,0.85);
            --orange-dark: #F2C9A1;
            {#--orange-solid: #f98b24;#}
            --orange-solid: rgba(246,215,27,0.85);
                    color: rgba(246,193,52,0.85);
                    color: rgba(246,215,27,0.85)
        }

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            background-color: var(--light-bg);
            color: var(--text-dark);
            line-height: 1.6;
        }

        /* Main Content */
        .main-content {
            display: flex;
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 15px;
            gap: 20px;
        }

        /* Left Sidebar */
        .left-sidebar {
            width: 250px;
        }

        .sidebar-section {
            background-color: var(--white);
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                        box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .sidebar-section:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        .sidebar-section h3 {
            color: var(--white);
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255,255,255,0.3);
        }

        /* Popular Categories */
        .popular-categories {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 15px;
            margin-bottom: 20px;
        }

        .popular-category {
            background-color: var(--white);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            text-align: center;
        }

        .popular-category:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }

        .popular-category-image {
            height: 100px;
            background-size: cover;
            background-position: center;
            transition: transform 0.4s ease;
        }

        .popular-category:hover .popular-category-image {
            transform: scale(1.05);
        }

        .popular-category-title {
            padding: 12px;
            font-weight: 600;
            color: var(--primary-color);
            transition: color 0.3s ease;
        }

        .popular-category:hover .popular-category-title {
            color: var(--orange-solid);
        }

        /* Main Content Area */
        .content-area {
            flex-grow: 1;
        }

        /* ====== BANNER STYLES ====== */
        .banner-container {
            margin: 0 auto 30px;
            max-width: 1200px;
            position: relative;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        }

        .banner-slides {
            position: relative;
            width: 100%;
            height: 400px;
            overflow: hidden;
        }

        .banner-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            opacity: 0;
            transform: scale(1.02);
        }

        .banner-slide.active {
            opacity: 1;
            z-index: 1;
            transform: scale(1);
        }

        .banner-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, rgba(23,47,23,0.85) 0%, rgba(42,82,42,0.85) 100%);
            transition: opacity 0.8s ease;
        }

        .banner-content {
            position: relative;
            z-index: 2;
            padding: 0 60px;
            max-width: 600px;
            color: white;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
        }

        .banner-title {
            font-size: 2.8rem;
            font-weight: 800;
            margin-bottom: 15px;
            line-height: 1.2;
            color: var(--secondary-color);
            text-shadow: none;
            transition: all 0.8s ease;
        }

        .banner-subtitle {
            font-size: 1.3rem;
            margin-bottom: 25px;
            opacity: 0.9;
            transition: all 0.8s ease;
            color: var(--secondary-color);
        }

        .banner-btn {
            display: inline-block;
            padding: 12px 30px;
            background-color: var(--orange-solid);
            color: var(--secondary-color);
            font-weight: 700;
            border-radius: 50px;
            text-decoration: none;
            box-shadow: 0 4px 15px rgba(249, 139, 36, 0.3);
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            border: none;
            cursor: pointer;
        }

        .banner-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(249, 139, 36, 0.4);
            background-color: var(--orange-light);
        }

        .banner-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            background: rgba(255,255,255,0.2);
            backdrop-filter: blur(5px);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            cursor: pointer;
            z-index: 10;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            border: 1px solid rgba(255,255,255,0.3);
            opacity: 0.7;
        }

        .banner-nav:hover {
            background: rgba(255,255,255,0.3);
            opacity: 1;
            transform: translateY(-50%) scale(1.1);
        }

        .banner-prev {
            left: 20px;
        }

        .banner-next {
            right: 20px;
        }

        .banner-dots {
            position: absolute;
            bottom: 20px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: 10px;
            z-index: 10;
        }

        .banner-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .banner-dot.active {
            background: var(--orange-solid);
            transform: scale(1.3);
        }

        .banner-dot:hover {
            transform: scale(1.2);
        }

        /* Animation */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .banner-content > * {
            animation: fadeInUp 0.8s ease forwards;
        }

        .banner-content h1 {
            animation-delay: 0.3s;
        }

        .banner-content p {
            animation-delay: 0.5s;
        }

        .banner-content a {
            animation-delay: 0.7s;
        }

        /* Section Titles */
        .section-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 20px;
            color: var(--primary-color);
            position: relative;
            padding-bottom: 10px;
        }

        .section-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 50px;
            height: 3px;
            background: linear-gradient(to right, var(--primary-color), var(--orange-solid));
            border-radius: 3px;
        }

        /* Market Flyers */
        .market-flyers {
            background-color: var(--white);
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }

        .market-flyers:hover {
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

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

        .flyer-card {
            background: var(--white);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .flyer-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }

        .flyer-header {
            padding: 15px;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            text-align: center;
            color: white;
        }

        .flyer-header h3 {
            margin: 0;
            font-size: 1.2rem;
            font-weight: 600;
        }

        .flyer-products {
            padding: 15px;
        }

        .flyer-product {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 10px 0;
            border-bottom: 1px solid var(--border-color);
            transition: transform 0.3s ease;
        }

        .flyer-product:hover {
            transform: translateX(5px);
        }

        .flyer-product img {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 5px;
            transition: transform 0.3s ease;
        }

        .flyer-product:hover img {
            transform: scale(1.05);
        }

        .product-info {
            flex: 1;
        }

        .product-name {
            display: block;
            font-weight: 500;
            margin-bottom: 5px;
            font-size: 14px;
            transition: color 0.3s ease;
        }

        .flyer-product:hover .product-name {
            color: var(--orange-solid);
        }

        .product-price {
            display: flex;
            gap: 10px;
            font-size: 14px;
        }

        .old-price {
            text-decoration: line-through;
            color: #999;
        }

        .new-price {
            color: var(--error-color);
            font-weight: bold;
        }

        .view-all-btn {
            width: 100%;
            padding: 10px;
            background-color: var(--orange-solid);
            color: var(--secondary-color);
            border: none;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            border-radius: 4px;
            margin-top: 10px;
        }

        .view-all-btn:hover {
            background-color: var(--orange-light);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(249, 139, 36, 0.3);
        }

        /* Footer */
        footer {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
            padding: 40px 20px;
            margin-top: auto;
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
        }

        .footer-section h3 {
            margin-bottom: 20px;
            font-size: 1.2rem;
            color: var(--orange-light);
            position: relative;
            padding-bottom: 10px;
        }

        .footer-section h3::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 40px;
            height: 2px;
            background: var(--orange-light);
        }

        .footer-section p, .footer-section a {
            color: #ddd;
            margin-bottom: 10px;
            display: block;
            text-decoration: none;
            transition: all 0.3s ease;
            font-size: 14px;
        }

        .footer-section a:hover {
            color: var(--orange-light);
            transform: translateX(5px);
            text-decoration: none;
        }

        .footer-section.social a {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: transform 0.3s ease;
        }

        .footer-section.social a:hover {
            transform: translateX(5px);
        }

        .copyright {
            text-align: center;
            padding-top: 20px;
            margin-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            color: #bbb;
            font-size: 0.9rem;
        }

        /* Message Styling */
        .message-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            max-width: 400px;
        }

        .alert {
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 4px;
            position: relative;
            background-color: #f8f9fa;
            border-left: 4px solid #6c757d;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            transform: translateX(100%);
            opacity: 0;
        }

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

        /* Modal */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            overflow-y: auto;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .modal.show {
            opacity: 1;
        }

        .modal-content {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 30px;
            border-radius: 15px;
            max-width: 900px;
            width: 90%;
            box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
            position: relative;
            transform: translateY(-20px);
            transition: transform 0.4s ease;
        }

        .modal.show .modal-content {
            transform: translateY(0);
        }

        .close-modal {
            position: absolute;
            right: 25px;
            top: 25px;
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .close-modal:hover {
            color: var(--orange-solid);
            transform: rotate(90deg);
        }

        .modal-title {
            font-size: 1.8rem;
            color: var(--primary-color);
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--primary-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .modal-products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 25px;
            margin-top: 20px;
        }

        .modal-product {
            background: var(--white);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .modal-product:hover {
            transform: translateY(-8px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }

        .modal-product img {
            width: 100%;
            height: 180px;
            object-fit: cover;
            border-bottom: 1px solid var(--border-color);
            transition: transform 0.4s ease;
        }

        .modal-product:hover img {
            transform: scale(1.05);
        }

        .modal-product-info {
            padding: 15px;
        }

        .modal-product-name {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--text-dark);
            display: block;
            transition: color 0.3s ease;
        }

        .modal-product:hover .modal-product-name {
            color: var(--orange-solid);
        }

        .modal-product-price {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-old-price {
            text-decoration: line-through;
            color: #999;
            font-size: 0.9rem;
        }

        .modal-new-price {
            color: var(--error-color);
            font-weight: bold;
            font-size: 1.1rem;
        }

        .discount-badge {
            background-color: var(--error-color);
            color: white;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: bold;
            margin-left: 10px;
        }

        .no-products {
            text-align: center;
            padding: 40px;
            color: var(--text-light);
            font-size: 1.1rem;
            grid-column: 1 / -1;
        }

        .loading-spinner {
            display: inline-block;
            width: 40px;
            height: 40px;
            border: 4px solid rgba(46, 101, 46, 0.2);
            border-radius: 50%;
            border-top-color: var(--primary-color);
            animation: spin 1s ease-in-out infinite;
            margin: 20px auto;
            grid-column: 1 / -1;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* Responsiveness */
        @media (max-width: 1024px) {
            .flyers-container {
                grid-template-columns: repeat(2, 1fr);
            }

            .banner-title {
                font-size: 2.4rem;
            }

            .banner-subtitle {
                font-size: 1.1rem;
            }
        }

        @media (max-width: 768px) {
            .main-content {
                flex-direction: column;
                padding: 10px;
            }

            .content-area {
                order: 1;
            }

            .left-sidebar {
                width: 100%;
                order: 2;
                margin-top: 20px;
            }

            .popular-categories {
                grid-template-columns: repeat(2, 1fr);
            }

            .banner-slides {
                height: 350px;
            }

            .banner-content {
                padding: 0 30px;
                text-align: center;
            }

            .banner-title {
                font-size: 2rem;
            }

            .banner-nav {
                width: 40px;
                height: 40px;
                font-size: 16px;
            }

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

            .modal-products-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 576px) {
            .banner-slides {
                height: 300px;
            }

            .banner-title {
                font-size: 1.8rem;
            }

            .banner-subtitle {
                font-size: 1rem;
            }

            .banner-btn {
                padding: 10px 20px;
            }

            .popular-categories {
                grid-template-columns: 1fr;
            }
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        #store-name {
            margin-left: 5px;
            color: var(--orange-solid);
        }
    </style>
</head>
<body>

<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>

<!-- Main Content -->
<div class="main-content">
    <main class="content-area">
        <div class="banner-container">
            <div class="banner-slides">
                <!-- Banner 1 -->
                <div class="banner-slide active" style="background-image: url('{% static 'images/baner1.jpg' %}')">
                    <div class="banner-overlay"></div>
                    <div class="banner-content">
                        <h1 class="banner-title">Сите производи на едно место!</h1>
                        <p class="banner-subtitle">Пронајди ги најевтините производи со <span style="color: rgba(246,215,27,0.85)"><b>Штедко</b></span></p>
                        <a href="{% url 'product_list' %}" class="banner-btn">Започни сега</a>
                    </div>
                </div>

                <!-- Banner 2 -->
                <div class="banner-slide" style="background-image: url('{% static 'images/baner2.jpg' %}')">
                    <div class="banner-overlay"></div>
                    <div class="banner-content">
                        <h1 class="banner-title">Не ги пропуштај дневните попусти!</h1>
                        <p class="banner-subtitle">До 70% попуст на избрани производи</p>
                        <a href="{% url 'product_list' %}?discounted=1" class="banner-btn">Види попусти</a>
                    </div>
                </div>

                <!-- Banner 3 -->
                <div class="banner-slide" style="background-image: url('{% static 'images/kreiraj_listi.png' %}')">
                    <div class="banner-overlay"></div>
                    <div class="banner-content">
                        <h1 class="banner-title">Направи си <span style="color: rgba(246,215,27,0.85)">листа</span> за пазарење и дознај</h1>
                        <p class="banner-subtitle">во кој маркет е <span style="color: rgba(246,215,27,0.85)">најевтино</span>!</p>
                        <a href="{% url 'product_list' %}?sort=newest" class="banner-btn">Истражувај</a>
                    </div>
                </div>
            </div>

            <button class="banner-nav banner-prev">❮</button>
            <button class="banner-nav banner-next">❯</button>

            <div class="banner-dots">
                <div class="banner-dot active"></div>
                <div class="banner-dot"></div>
                <div class="banner-dot"></div>
            </div>
        </div>

        <section class="market-flyers">
            <h2 class="section-title">Актуелни Попусти</h2>
            <div class="flyers-container">
                {% if stores_with_products %}
                    {% for store in stores_with_products %}
                        <div class="flyer-card">
                            <div class="flyer-header">
                                <h3>{{ store.name }}</h3>
                            </div>
                            <div class="flyer-products">
                                {% if store.products %}
                                    {% for product in store.products|slice:":3" %}
                                        <a href="{% url 'product_detail' product.id %}">
                                            <div class="flyer-product">
                                                <img src="{{ product.image_url }}" alt="{{ product.name }}"
                                                     onerror="this.onerror=null;this.src='{% static 'images/no-image.png' %}'">
                                                <div class="product-info">
                                                    <span class="product-name">{{ product.name }}</span>
                                                    <span class="product-price">
                                                        <span class="old-price">{{ product.price }} ден.</span>
                                                        <span class="new-price">{{ product.actual_price }} ден.</span>
                                                    </span>
                                                </div>
                                            </div>
                                        </a>
                                    {% endfor %}
                                {% else %}
                                    <p>Нема достапни попусти за {{ store.name }}.</p>
                                {% endif %}
                            </div>
                            <button class="view-all-btn" data-store="{{ store.name }}" style="box-shadow: 0 8px 25px rgba(249, 139, 36, 0.4);">
                                Види ги сите попусти
                            </button>
                        </div>
                    {% endfor %}
                {% else %}
                    <p>No flyer data available. Please log in or check back later.</p>
                {% endif %}
            </div>
        </section>
    </main>
    <aside class="left-sidebar">
        <div class="sidebar-section">
            <h3 style="background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); padding: 10px; border-radius: 10px">
                Популарни категории</h3>
            <div class="popular-categories">
                <a href="{% url 'product_list' %}?category=Dairy" class="popular-category">
                    <div class="popular-category-image"
                         style="background-image: url('{% static 'images/categories/dairy.jpg' %}')"></div>
                    <div class="popular-category-title">Млечни производи</div>
                </a>
                <a href="{% url 'product_list' %}?category=Vegetables" class="popular-category">
                    <div class="popular-category-image"
                         style="background-image: url('{% static 'images/categories/vegetables.jpg' %}')"></div>
                    <div class="popular-category-title">Зеленчук</div>
                </a>
                <a href="{% url 'product_list' %}?category=Drinks" class="popular-category">
                    <div class="popular-category-image"
                         style="background-image: url('{% static 'images/categories/drinks.jpg' %}')"></div>
                    <div class="popular-category-title">Пијалоци</div>
                </a>
                <a href="{% url 'product_list' %}?category=Cosmetics" class="popular-category">
                    <div class="popular-category-image"
                         style="background-image: url('{% static 'images/categories/cosmetics.jpg' %}')"></div>
                    <div class="popular-category-title">Козметика</div>
                </a>
            </div>
        </div>
    </aside>
</div>

<!-- Modal for showing all discounted products -->
<div id="products-modal" class="modal">
    <div class="modal-content">
        <span class="close-modal">×</span>
        <h2 class="modal-title">
            <i class="fas fa-tags"></i>
            Попусти во <span id="store-name"></span>
        </h2>
        <div class="modal-products-grid" id="modal-products">
            <!-- Products will be loaded here via JavaScript -->
        </div>
    </div>
</div>

<!-- Footer -->
<footer>
    <div class="footer-content">
        <div class="footer-section">
            <h3>За нас</h3>
            <p>Ние сме водечка онлајн продавница со најдобри цени и квалитетни производи.</p>
        </div>
        <div class="footer-section">
            <h3>Контакт</h3>
            <p>Телефон: +389 70 123 456</p>
            <p>Email: kontakt@nasataprodavnica.com</p>
            <p>Адреса: Улица ББ, Скопје</p>
        </div>
        <div class="footer-section">
            <h3>Брзи линкови</h3>
            <a href="{% url 'home' %}">Дома</a>
            <a href="{% url 'product_list' %}">Каталог</a>
            <a href="#">Услови на користење</a>
            <a href="#">Политика на приватност</a>
        </div>
        <div class="footer-section social">
            <h3>Следете нè</h3>
            <a href="#" target="_blank"><i class="fab fa-facebook-f"></i> Facebook</a>
            <a href="#" target="_blank"><i class="fab fa-instagram"></i> Instagram</a>
            <a href="#" target="_blank"><i class="fab fa-twitter"></i> Twitter</a>
        </div>
    </div>
    <div class="copyright">
        © 2023 Нашата Продавница. Сите права се задржани.
    </div>
</footer>

<script>
    // Banner carousel functionality
    document.addEventListener('DOMContentLoaded', function() {
        const bannerSlides = document.querySelectorAll('.banner-slide');
        const prevBtn = document.querySelector('.banner-prev');
        const nextBtn = document.querySelector('.banner-next');
        const dots = document.querySelectorAll('.banner-dot');
        const bannerContainer = document.querySelector('.banner-container');

        let currentIndex = 0;
        let interval;
        let touchStartX = 0;
        let touchEndX = 0;
        const ROTATION_INTERVAL = 10000; // 10 seconds

        // Initialize the first banner
        showSlide(currentIndex);

        // Auto-rotate banners
        function startAutoRotate() {
            interval = setInterval(nextSlide, ROTATION_INTERVAL);
        }

        function resetInterval() {
            clearInterval(interval);
            startAutoRotate();
        }

        function showSlide(index) {
            // Hide all slides
            bannerSlides.forEach(slide => {
                slide.classList.remove('active');
            });

            // Show current slide
            bannerSlides[index].classList.add('active');

            // Update dots
            dots.forEach(dot => dot.classList.remove('active'));
            dots[index].classList.add('active');
        }

        function nextSlide() {
            currentIndex = (currentIndex + 1) % bannerSlides.length;
            showSlide(currentIndex);
        }

        function prevSlide() {
            currentIndex = (currentIndex - 1 + bannerSlides.length) % bannerSlides.length;
            showSlide(currentIndex);
        }

        // Button controls
        nextBtn.addEventListener('click', function() {
            nextSlide();
            resetInterval();
        });

        prevBtn.addEventListener('click', function() {
            prevSlide();
            resetInterval();
        });

        // Dot navigation
        dots.forEach((dot, index) => {
            dot.addEventListener('click', function() {
                currentIndex = index;
                showSlide(currentIndex);
                resetInterval();
            });
        });

        // Touch events for mobile swipe
        bannerContainer.addEventListener('touchstart', function(e) {
            touchStartX = e.changedTouches[0].screenX;
            clearInterval(interval);
        }, {passive: true});

        bannerContainer.addEventListener('touchend', function(e) {
            touchEndX = e.changedTouches[0].screenX;
            handleSwipe();
            resetInterval();
        }, {passive: true});

        function handleSwipe() {
            const threshold = 50; // Minimum swipe distance

            if (touchEndX < touchStartX - threshold) {
                // Swiped left - next slide
                nextSlide();
            } else if (touchEndX > touchStartX + threshold) {
                // Swiped right - previous slide
                prevSlide();
            }
        }

        // Start auto-rotation
        startAutoRotate();

        // Pause on hover
        bannerContainer.addEventListener('mouseenter', function() {
            clearInterval(interval);
        });

        bannerContainer.addEventListener('mouseleave', function() {
            resetInterval();
        });

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

    // Modal functionality
    document.addEventListener('DOMContentLoaded', function() {
        const modal = document.getElementById('products-modal');
        const modalTitle = document.getElementById('store-name');
        const modalProducts = document.getElementById('modal-products');
        const closeModal = document.querySelector('.close-modal');

        document.querySelectorAll('.view-all-btn').forEach(button => {
            button.addEventListener('click', function() {
                const store = this.getAttribute('data-store');
                modalTitle.textContent = store;
                modalProducts.innerHTML = '<div class="loading-spinner"></div>';

                // Show modal with fade in
                modal.style.display = 'block';
                setTimeout(() => {
                    modal.classList.add('show');
                }, 10);

                fetch(`/get-store-products/?store=${encodeURIComponent(store)}`, {
                    credentials: 'same-origin'
                })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (data.products && data.products.length > 0) {
                            modalProducts.innerHTML = '';
                            data.products.forEach(product => {
                                const discount = Math.round(((product.price - product.actual_price) / product.price) * 100);

                                const productElement = document.createElement('div');
                                productElement.className = 'modal-product';
                                productElement.innerHTML = `
                                    <a href="/product/${product.id}/">
                                        <img src="${product.image_url}" alt="${product.name}" onerror="this.onerror=null;this.src='{% static 'images/no-image.png' %}'">
                                        <div class="modal-product-info">
                                            <span class="modal-product-name">${product.name}</span>
                                            <div class="modal-product-price">
                                                <span class="modal-old-price">${product.price} ден.</span>
                                                <div>
                                                    <span class="modal-new-price">${product.actual_price} ден.</span>
                                                    <span class="discount-badge">-${discount}%</span>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                `;
                                modalProducts.appendChild(productElement);
                            });
                        } else {
                            modalProducts.innerHTML = '<div class="no-products"><i class="fas fa-box-open" style="font-size: 2rem; color: #ccc; margin-bottom: 15px;"></i><p>Нема достапни попусти за оваа продавница.</p></div>';
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        modalProducts.innerHTML = `
                            <div class="no-products">
                                <i class="fas fa-exclamation-triangle" style="font-size: 2rem; color: #e74c3c; margin-bottom: 15px;"></i>
                                <p>Грешка при вчитување на производите.</p>
                                <a href="/login/" style="color: #2e652e; font-weight: bold;">Најави се</a> или обидете се повторно.
                            </div>
                        `;
                    });

                document.body.style.overflow = 'hidden';
            });
        });

        function closeModalHandler() {
            modal.classList.remove('show');
            setTimeout(() => {
                modal.style.display = 'none';
                document.body.style.overflow = 'auto';
            }, 400);
        }

        closeModal.addEventListener('click', closeModalHandler);

        window.addEventListener('click', function(event) {
            if (event.target === modal) {
                closeModalHandler();
            }
        });

        // Auto-close messages after 5 seconds
        setTimeout(() => {
            document.querySelectorAll('.alert').forEach(alert => {
                alert.style.opacity = '0';
                setTimeout(() => alert.remove(), 300);
            });
        }, 5000);
    });
</script>
</body>
</html>
{% endblock %}