{% comment %}
Bloomerp dropdown component. 
Parameters:
- slot : everything inside of the component
- trigger_text : text to display on the dropdown button (default: "Options")
- trigger_icon : HTML for a custom icon to display instead of text (default: None)
- trigger_icon_class : CSS classes for a Font Awesome or other icon element rendered before the trigger text
- trigger_button_class : use btn-based trigger styling instead of the default inline trigger styling
- trigger_class : additional CSS classes for the trigger button
- menu_class : additional CSS classes for the dropdown menu
- position : dropdown position - "left", "right", or "center" (default: "right")
- direction : dropdown direction - "up" or "down" (default: "down")
- size : dropdown size - "sm", "md", "lg" (default: "md")
- width : custom width class for the dropdown menu (e.g. "w-80"). Overrides size.
- disabled : whether the dropdown is disabled (default: False)
- icon : whether to show the arrow indicator icon (default: True; ignored when trigger_icon is set)
- close_on_item_event : event name used to close this dropdown from nested items/submenus (default: "dropdown-close")
{% endcomment %}

{% load static %}
{% load bloomerp %}

{% if icon %}{% endif %}

<div class="relative inline-block text-left {% if wrapper_class %}{{ wrapper_class }}{% endif %}"
    x-data="{ open: false, wasOpen: false }"
    x-effect="
        if (open) {
            wasOpen = true;
        } else if (wasOpen) {
            window.dispatchEvent(new CustomEvent('{{ close_on_item_event|default:'dropdown-close' }}'));
            wasOpen = false;
        }
    "
    @click.away="open = false"
    @{{ close_on_item_event|default:'dropdown-close' }}="open = false"
    {% if trigger_selector %}
    x-init="(() => {
        const el = document.querySelector('{{ trigger_selector }}');
        if (el) {
            el.addEventListener('focus', () => open = true);
            el.addEventListener('input', () => open = true);
        }
    })()"
    {% endif %}
>
    <!-- Dropdown trigger button -->
{% if trigger_html %}
    {{ trigger_html|safe }}
{% elif not trigger_selector %}
    <button 
        type="button" 
        class="
            {% if trigger_button_class %}
                btn
                {% if size == 'sm' %}
                    btn-sm
                {% elif size == 'lg' %}
                    btn-lg
                {% endif %}
                {{ trigger_button_class }}
            {% else %}
                {% if size == 'sm' %}
                    px-2 py-1.5 text-sm
                {% elif size == 'lg' %}
                    px-6 py-3 text-lg
                {% else %}
                    px-3 py-2 text-base
                {% endif %}

                inline-flex items-center justify-center w-full rounded-xl font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors duration-200

                {% if disabled %}
                    opacity-50 cursor-not-allowed
                {% else %}
                    cursor-hover:cursor-pointer
                {% endif %}
            {% endif %}
            {{ trigger_class }}
        " 
        @click="{% if not disabled %}open = !open{% endif %}"
        aria-expanded="false" 
        aria-haspopup="true"
        {% if disabled %}disabled{% endif %}
    >
        {# Show custom trigger_icon if provided, else use trigger_text #}
        {% if trigger_icon_class %}
            <i class="{{ trigger_icon_class }}"></i>
        {% elif trigger_icon %}
            {% load_icon trigger_icon size=24 %}
        {% else %}
            {{ trigger_text|default:"Options"|safe }}
        {% endif %}
        {% if trigger_icon_class and trigger_text %}
            <span>{{ trigger_text|safe }}</span>
        {% endif %}
        {# Arrow icon shown only when icon is true and no custom trigger_icon #}
        {% if icon|default:True and not trigger_icon and not trigger_icon_class %}
            <svg class="-mr-1 ml-2 h-5 w-5 transition-transform duration-200" 
                :class="{ 'rotate-180': open }"
                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
            </svg>
        {% endif %}
    </button>
    {% endif %}

    <!-- Dropdown menu -->
    <div 
        class="
            absolute z-[90] 
            {% if direction == 'up' %}
                bottom-full mb-2
            {% else %}
                mt-2
            {% endif %}
            {% if width %}
                {{ width }}
            {% elif size == 'sm' %}
                w-48
            {% elif size == 'lg' %}
                w-72
            {% else %}
                w-56
            {% endif %}
            {% if position == 'left' %}
                {% if direction == 'up' %}origin-bottom-left{% else %}origin-top-left{% endif %} left-0
            {% elif position == 'center' %}
                {% if direction == 'up' %}origin-bottom{% else %}origin-top{% endif %} left-1/2 transform -translate-x-1/2
            {% else %}
                {% if direction == 'up' %}origin-bottom-right{% else %}origin-top-right{% endif %} right-0
            {% endif %}
                bg-white border border-gray-200 rounded-xl focus:outline-none transition-all duration-200 ease-in-out
            {{ menu_class }}
            shadow-lg
        " 
        x-show="open"
        x-transition:enter="transition ease-out duration-100"
        x-transition:enter-start="transform opacity-0 scale-95"
        x-transition:enter-end="transform opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-75"
        x-transition:leave-start="transform opacity-100 scale-100"
        x-transition:leave-end="transform opacity-0 scale-95"
        role="menu" 
        aria-orientation="vertical" 
        style="display: none;"
    >
        <div class="py-1" role="none">
            {{ slot }}
        </div>
    </div>
</div>