{% extends 'base.html' %}
{% load i18n static humanize %}
{% load custom_filters %}
{% block title %}
    {{ _("Opportunities") }}
{% endblock title %}
{% block content %}
    {% if opportunities or request.GET.q %}
        <div class="row g-3 mt-4">
            <div class="row g-3 justify-content-between mb-4">
                <div class="col-auto">
                    <div class="d-md-flex justify-content-between">
                        <h2 class="mb-3">
                            {{ _("Opportunities") }}
                            <li class="fas fas fa-rocket text-primary ms-2"></li>
                        </h2>
                    </div>
                </div>
                <div class="col-auto">
                    {% if perms.inventory.add_opportunity %}
                        <div class="d-flex justify-content-between">
                            <a class="btn btn-phoenix-primary btn-sm"
                               href="{% url 'opportunity_create' request.dealer.slug %}">
                                <span class="fas fa-plus me-2"></span>{{ _("Add Opportunity") }}
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
            <div class="col-12">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
                    <div class="d-flex flex-column flex-lg-row align-items-start align-items-lg-center gap-3 w-100"
                         id="filter-container"
                         hx-get="{% url 'opportunity_list' request.dealer.slug %}"
                         hx-target="#opportunities-grid"
                         hx-select="#opportunities-grid"
                         hx-swap="outerHTML">
                        <div class="search-box position-relative flex-grow-1 me-2"
                             style="min-width: 200px">
                            <form class="position-relative show"
                                  id="search-form"
                                  hx-get="."
                                  hx-boost="true"
                                  hx-trigger="keyup changed delay:500ms, search"
                                  hx-target="#opportunities-grid"
                                  hx-select="#opportunities-grid"
                                  hx-swap="outerHTML">
                                <input name="q"
                                       id="search-input"
                                       class="form-control form-control-sm search-input search"
                                       type="search"
                                       aria-label="Search"
                                       placeholder="{{ _("Search") }}..."
                                       value="{{ request.GET.q }}" />
                                <span class="fa fa-magnifying-glass search-box-icon"></span>
                                {% if request.GET.q %}
                                    <button type="button"
                                            class="btn-close position-absolute end-0 top-50 translate-middle cursor-pointer shadow-none"
                                            id="clear-search"
                                            aria-label="Clear Search"></button>
                                {% endif %}
                            </form>
                        </div>
                        <div class="d-flex flex-column flex-sm-row gap-3 w-100"
                             style="max-width: 400px">
                            <div class="flex-grow-1">
                                <select class="form-select"
                                        name="stage"
                                        hx-get="{% url 'opportunity_list' request.dealer.slug %}"
                                        hx-trigger="change"
                                        hx-target="#opportunities-grid"
                                        hx-select="#opportunities-grid"
                                        hx-swap="outerHTML"
                                        hx-include="#search-form input, select[name='sort']">
                                    <option value="">{% trans "All Stages" %}</option>
                                    {% for value, label in stage_choices %}
                                        <option value="{{ value }}"
                                                {% if request.GET.stage == value %}selected{% endif %}>
                                            {{ label }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="flex-grow-1">
                                <select class="form-select"
                                        name="sort"
                                        hx-get="{% url 'opportunity_list' request.dealer.slug %}"
                                        hx-trigger="change"
                                        hx-target="#opportunities-grid"
                                        hx-select="#opportunities-grid"
                                        hx-swap="outerHTML"
                                        hx-include="#search-form input, select[name='stage']">
                                    <option value="newest"
                                            {% if request.GET.sort == 'newest' %}selected{% endif %}>
                                        {% trans "Newest First" %}
                                    </option>
                                    <option value="highest"
                                            {% if request.GET.sort == 'highest' %}selected{% endif %}>
                                        {% trans "Highest Value" %}
                                    </option>
                                    <option value="closing"
                                            {% if request.GET.sort == 'closing' %}selected{% endif %}>
                                        {% trans "Earliest Close Date" %}
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="opportunities-grid" class="row g-4 px-2 px-lg-4 mt-1 mb-4">
            {% include 'crm/opportunities/partials/opportunity_grid.html' %}
        </div>
        {% if page_obj.paginator.num_pages > 1 %}
            <div id="pagination-container" class="d-flex justify-content-end mt-3">
                <div class="d-flex">
                    {% include 'partials/pagination.html' %}
                </div>
            </div>
        {% endif %}
    {% else %}
        {% url 'opportunity_create' request.dealer.slug as create_opportunity_url %}
        {% include "empty-illustration-page.html" with value=empty_state_value url=create_opportunity_url %}
    {% endif %}
    {% block customJS %}
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                const searchInput = document.getElementById("search-input");
                const clearButton = document.getElementById("clear-search");

                if (clearButton) {
                    clearButton.addEventListener("click", function() {
                        // Clear the input field
                        searchInput.value = "";

                        // Trigger HTMX search with a 'search' event
                        // This uses the hx-trigger="search" on the form
                        // and prevents a full page reload.
                        searchInput.dispatchEvent(new Event('search', { bubbles: true }));
                    });
                }
            });
        </script>
    {% endblock %}
{% endblock %}