{% extends "layouts/base.html" %}
{% load multiply %}
{% load static %}
{% block title %}Products - SavvyGT{% endblock %}
{% block content %}
<div id="wrapper" class="wrap">
    <div class="breadcrumbs panel z-1 py-2 bg-primary-50 text-dark">
        <div class="container max-w-xl">
            <ul class="breadcrumb nav-x justify-center gap-1 fs-7 sm:fs-6 fw-medium m-0">
                <li><a href="{% url 'products' %}">Home</a></li>
                <li><i class="unicon-chevron-right"></i></li>
                <li><span class="opacity-60">Products</span></li>
            </ul>
        </div>
    </div>

    <div class="section py-4 lg:py-6 xl:py-8">
        <div class="container max-w-xl">
            <div class="panel vstack gap-4 lg:gap-6 xl:gap-8">
                <header class="shop-header panel vstack justify-center gap-2 lg:gap-4 text-center"
                    data-anime="onview: -100; targets: >*; translateY: [48, 0]; opacity: [0, 1]; easing: easeOutCubic; duration: 500; delay: anime.stagger(100, {start: 500});">
                    <div class="panel">
                        <h1 class="h3 lg:h1 m-0">Products</h1>
                    </div>
                    <form id="search-form" method="GET" data-url="{% url 'products_all' %}"
                        class="d-flex justify-content-center mt-3">
                        <input id="search-input" type="text" name="search" class="form-control w-50"
                            placeholder="Search products..." value="{{ search_query|default:'' }}">
                        <button type="submit" class="btn btn-primary ms-2">Search</button>
                        <a id="clear-search" class="btn btn-secondary ms-2" href="{% url 'products_all' %}">Clear</a>
                    </form>
                </header>
                {% if messages %}
                {% for message in messages %}
                <p class="error">{{ message }}</p>
                {% endfor %}
                {% endif %}
                <div id="product-results">
                    {% include 'partials/product_list.html' %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);
    const getSchema = urlParams.get("schema");
    if (getSchema === "dark") {
        setDarkMode(1);
    } else if (getSchema === "light") {
        setDarkMode(0);
    }
</script>

<script>
    $(document).ready(function () {
        $('#search-form').on('submit', function (e) {
            e.preventDefault();
            const query = $('#search-input').val().trim();
            const url = $(this).data('url');

            // ✅ Send search to Django session
            fetch('/save-search/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCookie('csrftoken'),
                },
                body: JSON.stringify({ search_query: query })
            });

            // ✅ Do your search AJAX call
            $.ajax({
                url: url,
                type: "GET",
                data: query ? { search: query } : {},
                headers: {
                    'X-CSRFToken': getCookie('csrftoken')
                },
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
                },
                success: function (response) {
                    $('#product-results').html(response.html);
                },
                error: function () {
                    $('#product-results').html('<p class="error">Something went wrong.</p>');
                }
            });
        });

        $('#clear-search').on('click', function () {
            $('#search-input').val('');
            const url = $('#search-form').data('url');
            $.ajax({
                url: url,
                type: "GET",
                data: {},
                headers: {
                    'X-CSRFToken': getCookie('csrftoken')
                },
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
                },
                success: function (response) {
                    $('#product-results').html(response.html);
                },
                error: function () {
                    $('#product-results').html('<p class="error">Something went wrong.</p>');
                }
            });
        });

        function getCookie(name) {
            let cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                const cookies = document.cookie.split(';');
                for (let i = 0; i < cookies.length; i++) {
                    const cookie = cookies[i].trim();
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
    });
</script>
{% endblock %}