{% extends "base.html" %}
{% from "components/ui.html" import page_header, breadcrumb_nav, button, filter_badge, empty_state %}

{% block content %}
{% set breadcrumbs = [
    {'text': 'Quotes'}
] %}

{{ page_header(
    icon_class='fas fa-file-contract',
    title_text='Quotes',
    subtitle_text='Manage client quotes',
    breadcrumbs=breadcrumbs,
    actions_html='<div class="flex gap-2"><a href="' + url_for("quotes.list_quotes", analytics='true' if not show_analytics else 'false') + '" class="bg-gray-200 dark:bg-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">' + ('Hide Analytics' if show_analytics else 'Show Analytics') + '</a>' + ('<a href="' + url_for("quotes.create_quote") + '" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors"><i class="fas fa-plus mr-2"></i>Create Quote</a>' if (current_user.is_admin or has_permission('create_quotes')) else '') + '</div>'
) }}

{% if show_analytics and analytics %}
<!-- Analytics Dashboard -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <div class="bg-card-light dark:bg-card-dark p-4 rounded-lg shadow">
        <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _('Total Quotes') }}</h3>
        <p class="text-2xl font-bold">{{ analytics.total_quotes }}</p>
    </div>
    <div class="bg-card-light dark:bg-card-dark p-4 rounded-lg shadow">
        <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _('Total Value') }}</h3>
        <p class="text-2xl font-bold">{{ "%.2f"|format(analytics.total_value) }} EUR</p>
    </div>
    <div class="bg-card-light dark:bg-card-dark p-4 rounded-lg shadow">
        <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _('Acceptance Rate') }}</h3>
        <p class="text-2xl font-bold">{{ analytics.acceptance_rate }}%</p>
    </div>
    <div class="bg-card-light dark:bg-card-dark p-4 rounded-lg shadow">
        <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _('Avg Quote Value') }}</h3>
        <p class="text-2xl font-bold">{{ "%.2f"|format(analytics.avg_value) }} EUR</p>
    </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
    <div class="bg-card-light dark:bg-card-dark p-4 rounded-lg shadow">
        <h3 class="text-lg font-semibold mb-4">{{ _('Quotes by Status') }}</h3>
        <div class="space-y-2">
            {% for status, count in analytics.quotes_by_status.items() %}
            <div class="flex justify-between items-center">
                <span class="capitalize">{{ _(status) }}</span>
                <span class="font-medium">{{ count }}</span>
            </div>
            {% endfor %}
        </div>
    </div>
    <div class="bg-card-light dark:bg-card-dark p-4 rounded-lg shadow">
        <h3 class="text-lg font-semibold mb-4">{{ _('Top Clients by Quotes') }}</h3>
        <div class="space-y-2">
            {% for client_data in analytics.quotes_by_client %}
            <div class="flex justify-between items-center">
                <span>{{ client_data.name }}</span>
                <span class="font-medium">{{ client_data.count }} ({{ "%.2f"|format(client_data.total) }} EUR)</span>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}

<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow mb-6">
    <div class="flex justify-between items-center mb-4">
        <h2 class="text-lg font-semibold">{{ _('Filter Quotes') }}</h2>
        <button type="button" class="px-3 py-1.5 text-sm bg-background-light dark:bg-background-dark rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" id="toggleFilters" onclick="toggleFilterVisibility()" title="{{ _('Toggle Filters') }}">
            <i class="fas fa-chevron-up" id="filterToggleIcon"></i>
        </button>
    </div>
    <div id="filterBody">
    <form method="GET" class="grid grid-cols-1 md:grid-cols-3 gap-4" id="quotesFilterForm" data-filter-form>
        <div>
            <label for="search" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('Search') }}</label>
            <input type="text" name="search" id="search" value="{{ search or '' }}" class="form-input" placeholder="{{ _('Search quotes...') }}">
        </div>
        <div>
            <label for="status" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('Status') }}</label>
            <select name="status" id="status" class="form-input">
                <option value="all" {% if status == 'all' %}selected{% endif %}>{{ _('All') }}</option>
                <option value="draft" {% if status == 'draft' %}selected{% endif %}>{{ _('Draft') }}</option>
                <option value="sent" {% if status == 'sent' %}selected{% endif %}>{{ _('Sent') }}</option>
                <option value="accepted" {% if status == 'accepted' %}selected{% endif %}>{{ _('Accepted') }}</option>
                <option value="rejected" {% if status == 'rejected' %}selected{% endif %}>{{ _('Rejected') }}</option>
                <option value="expired" {% if status == 'expired' %}selected{% endif %}>{{ _('Expired') }}</option>
            </select>
        </div>
    </form>
    </div>
</div>

<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow overflow-visible" id="quotesContainer">
    {% include 'quotes/_quotes_list.html' %}
</div>

{% endblock %}

{% block scripts_extra %}
<style>
.filter-collapsed { display: none !important; }
.filter-toggle-transition { transition: all 0.3s ease-in-out; }
</style>
<script>
function toggleFilterVisibility() {
    const filterBody = document.getElementById('filterBody');
    const toggleIcon = document.getElementById('filterToggleIcon');
    const toggleButton = document.getElementById('toggleFilters');
    if (!filterBody || !toggleIcon || !toggleButton) return;
    
    const isCollapsed = filterBody.classList.contains('filter-collapsed');
    
    if (isCollapsed) {
        filterBody.classList.remove('filter-collapsed');
        toggleIcon.classList.remove('fa-chevron-down');
        toggleIcon.classList.add('fa-chevron-up');
        toggleButton.title = '{{ _('Hide Filters') }}';
        localStorage.setItem('quoteListFiltersVisible', 'true');
    } else {
        filterBody.classList.add('filter-collapsed');
        toggleIcon.classList.remove('fa-chevron-up');
        toggleIcon.classList.add('fa-chevron-down');
        toggleButton.title = '{{ _('Show Filters') }}';
        localStorage.setItem('quoteListFiltersVisible', 'false');
    }
}

document.addEventListener('DOMContentLoaded', function() {
    const filterBody = document.getElementById('filterBody');
    const toggleIcon = document.getElementById('filterToggleIcon');
    const toggleButton = document.getElementById('toggleFilters');
    if (!filterBody || !toggleIcon || !toggleButton) return;
    
    const filtersVisible = localStorage.getItem('quoteListFiltersVisible');
    if (filtersVisible === 'false') {
        filterBody.classList.add('filter-collapsed');
        toggleIcon.classList.remove('fa-chevron-up');
        toggleIcon.classList.add('fa-chevron-down');
        toggleButton.title = '{{ _('Show Filters') }}';
    } else {
        filterBody.classList.remove('filter-collapsed');
        toggleIcon.classList.remove('fa-chevron-down');
        toggleIcon.classList.add('fa-chevron-up');
        toggleButton.title = '{{ _('Hide Filters') }}';
    }
    setTimeout(() => { filterBody.classList.add('filter-toggle-transition'); }, 100);
});

// Quotes Filter Handler - AJAX filtering
(function() {
    'use strict';
    
    let filterTimeout = null;
    let searchTimeout = null;
    
    function getFilterParams() {
        const form = document.getElementById('quotesFilterForm');
        if (!form) return {};
        
        const params = {};
        
        // Get search input value directly
        const searchInput = form.querySelector('input[name="search"], input#search');
        if (searchInput) {
            const searchValue = searchInput.value.trim();
            if (searchValue) {
                params.search = searchValue;
            }
        }
        
        // Get status
        const statusSelect = form.querySelector('[name="status"]');
        if (statusSelect) {
            const statusValue = statusSelect.value;
            if (statusValue && statusValue !== 'all') {
                params.status = statusValue;
            } else {
                params.status = 'all';
            }
        } else {
            params.status = 'all';
        }
        
        return params;
    }
    
    function buildFilterUrl() {
        const params = getFilterParams();
        const queryString = new URLSearchParams(params).toString();
        return `/quotes?${queryString}`;
    }
    
    function applyFilters() {
        const url = buildFilterUrl();
        const container = document.getElementById('quotesListContainer');
        
        if (!container) {
            console.error('quotesListContainer not found');
            return;
        }
        
        // Show loading state
        container.style.opacity = '0.5';
        container.style.pointerEvents = 'none';
        
        // Update URL
        if (window.history && window.history.pushState) {
            window.history.pushState({}, '', url);
        }
        
        // Fetch filtered results
        fetch(url, {
            method: 'GET',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'text/html'
            },
            credentials: 'same-origin'
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }
            return response.text();
        })
        .then(html => {
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = html.trim();
            
            const newContainer = tempDiv.querySelector('#quotesListContainer');
            
            if (newContainer) {
                container.innerHTML = newContainer.innerHTML;
            } else {
                const match = html.trim().match(/<div[^>]*id=["']quotesListContainer["'][^>]*>([\s\S]*?)<\/div>\s*$/);
                if (match && match[1]) {
                    container.innerHTML = match[1];
                } else {
                    container.innerHTML = html;
                }
            }
        })
        .catch(error => {
            console.error('Filter error:', error);
            container.style.opacity = '';
            container.style.pointerEvents = '';
            if (window.toastManager) {
                window.toastManager.show('Failed to filter quotes. Please refresh the page.', 'error');
            } else if (window.showToast) {
                window.showToast('Failed to filter quotes. Please refresh the page.', 'error');
            }
        })
        .finally(() => {
            container.style.opacity = '';
            container.style.pointerEvents = '';
        });
    }
    
    function debouncedApplyFilters(delay = 100) {
        if (filterTimeout) {
            clearTimeout(filterTimeout);
        }
        filterTimeout = setTimeout(applyFilters, delay);
    }
    
    function debouncedSearch(delay = 500) {
        if (searchTimeout) {
            clearTimeout(searchTimeout);
        }
        searchTimeout = setTimeout(applyFilters, delay);
    }
    
    // Initialize when DOM is ready
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('quotesFilterForm');
        if (!form) {
            console.error('Quotes filter form not found');
            return;
        }
        
        // Auto-submit on dropdown changes
        form.querySelectorAll('select').forEach(select => {
            select.addEventListener('change', () => {
                debouncedApplyFilters(100);
            });
        });
        
        // Auto-submit on search input (debounced)
        const searchInput = form.querySelector('input[name="search"], input#search');
        if (searchInput) {
            searchInput.addEventListener('input', () => {
                debouncedSearch(500);
            });
            
            // Submit on Enter
            searchInput.addEventListener('keydown', (e) => {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    if (searchTimeout) {
                        clearTimeout(searchTimeout);
                    }
                    applyFilters();
                }
            });
        }
        
        // Prevent form submission (use AJAX instead)
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            e.stopPropagation();
            if (searchTimeout) {
                clearTimeout(searchTimeout);
            }
            if (filterTimeout) {
                clearTimeout(filterTimeout);
            }
            applyFilters();
        });
    });
})();

{% if current_user.is_admin or has_permission('create_quotes') %}
function toggleAllQuotes(){
    const selectAll = document.getElementById('selectAll');
    document.querySelectorAll('.quote-checkbox').forEach(cb => cb.checked = !!(selectAll && selectAll.checked));
    updateQuotesBulkState();
}
function updateQuotesBulkState(){
    const selected = document.querySelectorAll('.quote-checkbox:checked').length;
    const btn = document.getElementById('bulkActionsBtn');
    const cnt = document.getElementById('selectedCount');
    if (cnt) cnt.textContent = selected;
    if (btn) btn.disabled = selected === 0;
}
function closeAllMenus(){
    document.querySelectorAll('.bulk-menu').forEach(m => m.classList.add('hidden'));
}
function openMenu(triggerEl, menuId){
    const menu = document.getElementById(menuId);
    if (!menu) return;
    const willOpen = menu.classList.contains('hidden');
    closeAllMenus();
    if (!willOpen) return;
    const rect = triggerEl.getBoundingClientRect();
    const menuHeight = menu.offsetHeight || 200;
    const spaceBelow = window.innerHeight - rect.bottom;
    const spaceAbove = rect.top;
    if (spaceBelow < menuHeight + 16 && spaceAbove > menuHeight + 16){
        menu.style.bottom = 'calc(100% + 8px)';
    } else {
        menu.style.top = 'calc(100% + 8px)';
    }
    menu.classList.remove('hidden');
}
document.addEventListener('click', function(e){
    const insideTrigger = e.target.closest('#bulkActionsBtn');
    const insideMenu = e.target.closest('#quotesBulkMenu');
    if (!insideTrigger && !insideMenu){ closeAllMenus(); }
});
document.addEventListener('keydown', function(e){ if (e.key === 'Escape') closeAllMenus(); });

function showBulkAction(action){
    const count = document.querySelectorAll('.quote-checkbox:checked').length;
    if (count === 0) return false;
    
    const actions = {
        'duplicate': { label: '{{ _('Duplicate') }}', msg: `{{ _('Are you sure you want to duplicate') }} ${count} {{ _('quote(s)?') }}` },
        'mark_sent': { label: '{{ _('Mark as Sent') }}', msg: `{{ _('Are you sure you want to mark') }} ${count} {{ _('quote(s) as sent?') }}` },
        'delete': { label: '{{ _('Delete') }}', msg: `{{ _('Are you sure you want to delete') }} ${count} {{ _('quote(s)?') }}`, variant: 'danger' }
    };
    
    const actionData = actions[action];
    if (!actionData) return false;
    
    if (window.showConfirm){
        window.showConfirm(actionData.msg, { title: actionData.label, confirmText: actionData.label, variant: actionData.variant || 'default' }).then(function(ok){
            if (ok) submitBulkAction(action);
        });
    } else if (confirm(actionData.msg)) {
        submitBulkAction(action);
    }
    return false;
}

function submitBulkAction(action){
    const form = document.getElementById('bulk-action-form');
    document.getElementById('bulkActionValue').value = action;
    form.querySelectorAll('input[name="quote_ids[]"]').forEach(n => n.remove());
    document.querySelectorAll('.quote-checkbox:checked').forEach(cb => {
        const i = document.createElement('input');
        i.type='hidden';
        i.name='quote_ids[]';
        i.value=cb.value;
        form.appendChild(i);
    });
    form.submit();
}
{% endif %}
</script>
{% endblock %}