{% extends "base_authenticated.html" %}

{% block title %}Export Configuration - QR Code Management{% endblock %}

{% block extra_head %}
<!-- Export Configuration specific CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/export_configuration.css') }}">
<!-- Add Sortable.js for drag & drop -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
{% endblock %}

{% block content %}
<div class="export-config-page">
    <!-- Header Section -->
    <div class="export-header">
        <div class="header-content">
            <h1>
                <i class="fas fa-file-excel"></i>
                Export Configuration
            </h1>
            <p>Customize your attendance report export with selected columns, custom names, and column ordering</p>
        </div>
        
        <div class="header-actions">
            <button onclick="goBackToReport()" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i>
                Back to Report
            </button>
        </div>
    </div>

    <!-- Filter Information -->
    {% if filters.date_from or filters.date_to or filters.location_filter or filters.employee_filter or filters.project_filter %}
    <div class="applied-filters-section">
        <div class="filters-card">
            <div class="filters-header">
                <h3>
                    <i class="fas fa-filter"></i>
                    Applied Filters
                </h3>
            </div>
            <div class="filters-display">
                {% if filters.date_from %}
                <span class="filter-tag">
                    <i class="fas fa-calendar"></i>
                    From: {{ filters.date_from }}
                </span>
                {% endif %}
                {% if filters.date_to %}
                <span class="filter-tag">
                    <i class="fas fa-calendar"></i>
                    To: {{ filters.date_to }}
                </span>
                {% endif %}
                {% if filters.location_filter %}
                <span class="filter-tag">
                    <i class="fas fa-map-marker-alt"></i>
                    Location: {{ filters.location_filter }}
                </span>
                {% endif %}
                {% if filters.employee_filter %}
                <span class="filter-tag">
                    <i class="fas fa-user"></i>
                    Employee: {{ filters.employee_filter }}
                </span>
                {% endif %}
                {% if filters.project_filter %}
                <span class="filter-tag">
                    <i class="fas fa-project-diagram"></i>
                    Project: {{ filters.project_filter }}
                </span>
                {% endif %}
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Export Configuration Form -->
    <div class="export-config-section">
        <form method="POST" action="{{ url_for('generate_excel_export') }}" id="exportForm">
            <!-- Hidden fields for filters -->
            <input type="hidden" name="date_from" value="{{ filters.date_from }}">
            <input type="hidden" name="date_to" value="{{ filters.date_to }}">
            <input type="hidden" name="location_filter" value="{{ filters.location_filter }}">
            <input type="hidden" name="employee_filter" value="{{ filters.employee_filter }}">
            <input type="hidden" name="project_filter" value="{{ filters.project_filter }}">

            <!-- Hidden field for column order -->
            <input type="hidden" id="column_order" name="column_order" value="">
            
            <div class="config-card">
                <div class="config-header" onclick="toggleSection('columnsSection')" style="cursor: pointer;">
                    <h3>
                        Select & Order Columns for Export <i class="fas fa-chevron-down toggle-icon" id="columnsSectionIcon"></i>
                    </h3>
                    <div class="config-actions" onclick="event.stopPropagation();">
                        <button type="button" onclick="selectAllColumns()" class="btn btn-sm btn-outline">
                            <i class="fas fa-check-double"></i>
                            Select All
                        </button>
                        <button type="button" onclick="deselectAllColumns()" class="btn btn-sm btn-outline">
                            <i class="fas fa-times"></i>
                            Deselect All
                        </button>
                        <button type="button" onclick="resetToDefaults()" class="btn btn-sm btn-outline">
                            <i class="fas fa-undo"></i>
                            Reset to Defaults
                        </button>
                    </div>
                </div>
                <div class="collapsible-content" id="columnsSection">
                    <!-- Instructions 
                    <div class="instructions-card">
                        <div class="instructions-content">
                            <h4><i class="fas fa-info-circle"></i> How to Use</h4>
                            <ul>
                                <li><strong>Select columns:</strong> Check the boxes for columns you want to export</li>
                                <li><strong>Customize names:</strong> Edit the "Export as" field to change column headers</li>
                                <li><strong>Reorder columns:</strong> <span class="highlight">Drag & drop</span> the selected columns to change their order in the Excel file</li>
                                <li><strong>Preview:</strong> See how your export will look in the preview below</li>
                            </ul>
                        </div>
                    </div>
                    -->
                    
                    <!-- Available Columns Grid -->
                    <div class="columns-section">
                        <h4><i class="fas fa-list"></i> Available Columns</h4>
                        <div class="columns-grid" id="columnsGrid">
                            {% for column in available_columns %}
                            <div class="column-item" data-column-key="{{ column.key }}">
                                <div class="column-checkbox">
                                    <input type="checkbox" 
                                        id="col_{{ column.key }}" 
                                        name="selected_columns" 
                                        value="{{ column.key }}"
                                        {% if column.enabled %}checked{% endif %}
                                        onchange="toggleColumnName('{{ column.key }}')">
                                    <label for="col_{{ column.key }}">
                                        <i class="fas fa-check"></i>
                                        {{ column.label }}
                                    </label>
                                </div>
                                
                                <div class="column-name-input" id="name_group_{{ column.key }}" 
                                    style="{% if not column.enabled %}display: none;{% endif %}">
                                    <label for="name_{{ column.key }}">Export as:</label>
                                    <input type="text" 
                                        id="name_{{ column.key }}" 
                                        name="name_{{ column.key }}" 
                                        value="{{ column.default_name }}"
                                        placeholder="Column name in Excel">
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>

                    <!-- Selected Columns Ordering Section -->
                    <div class="selected-columns-section" id="selectedColumnsSection" style="display: none;">
                        <h4><i class="fas fa-sort"></i> Column Order in Export <span class="drag-hint">(Drag to reorder)</span></h4>
                            <div class="selected-columns-list" id="selectedColumnsList">
                                <!-- Selected columns will appear here for reordering -->
                            </div>
                    </div>
                </div>
            <!-- Preview Section -->
            <div class="preview-section">
                <div class="preview-header">
                    <h3>
                        <i class="fas fa-eye"></i>
                        Export Preview
                    </h3>
                </div>
                <div class="preview-table-container">
                    <table class="preview-table" id="previewTable">
                        <thead>
                            <tr id="previewHeader">
                                <!-- Headers will be populated by JavaScript -->
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td colspan="100%" class="preview-placeholder">
                                    Select columns above to see preview
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Submit Section -->
            <div class="submit-section">
                <div class="submit-actions">
                    <button type="submit" class="btn btn-success btn-lg" id="generateBtn">
                        <i class="fas fa-download"></i>
                        Generate Excel Export
                    </button>
                    <p class="submit-note">
                        <i class="fas fa-info-circle"></i>
                        Your column preferences and order will be saved for next time
                    </p>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script src="{{ url_for('static', filename='js/export_configuration.js') }}"></script>
<script>
// Initialize export configuration
document.addEventListener('DOMContentLoaded', function() {
    console.log('Export Configuration page initialized with drag & drop');
    
    // Load saved preferences if available
    loadSavedPreferences();
    
    // Initialize drag & drop
    initializeDragDrop();

    // Ensure preview is updated after all initialization is complete
    setTimeout(() => {
        const selectedColumns = document.querySelectorAll('input[name="selected_columns"]:checked');
        if (selectedColumns.length > 0) {
            console.log('Final check: ensuring preview is shown for selected columns');
            updatePreview();
        }
    }, 100);
});

function goBackToReport() {
    // Build URL with current filters
    const params = new URLSearchParams();
    const dateFrom = document.querySelector('input[name="date_from"]').value;
    const dateTo = document.querySelector('input[name="date_to"]').value;
    const locationFilter = document.querySelector('input[name="location_filter"]').value;
    const employeeFilter = document.querySelector('input[name="employee_filter"]').value;
    const projectFilter = document.querySelector('input[name="project_filter"]').value;

    if (dateFrom) params.append('date_from', dateFrom);
    if (dateTo) params.append('date_to', dateTo);
    if (locationFilter) params.append('location', locationFilter);
    if (employeeFilter) params.append('employee', employeeFilter);
    if (projectFilter) params.append('project', projectFilter);
    
    const url = "{{ url_for('attendance_report') }}" + (params.toString() ? '?' + params.toString() : '');
    window.location.href = url;
}

// Form submission handler to save preferences
document.getElementById('exportForm').addEventListener('submit', function() {
    savePreferences();
    updateColumnOrderField();
});
</script>
{% endblock %}