{% extends 'baseadmin.html.twig' %}
{% import "_modules/bsmacros.html.twig" as bs %}

{% block title %}{{ parent() }} - Orders{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .filter-row {
            margin-bottom: 1rem;
        }
        .table-responsive {
            min-height: 400px;
        }
        .status-badge {
            padding: 0.35em 0.65em;
            border-radius: 0.25rem;
            display: inline-block;
            font-weight: 700;
            line-height: 1;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
        }
        .pagination-info {
            font-size: 0.875rem;
        }
        .clickable {
            cursor: pointer;
        }
        .search-highlight {
            background-color: #ffff00;
            padding: 0.1em;
        }
    </style>
{% endblock %}

{% block content %}
<div class="card shadow-sm">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Orders Management</h5>
        <div>
            <button class="btn btn-sm btn-outline-secondary" id="refresh-btn">
                <i class="fas fa-sync-alt"></i> Refresh
            </button>
        </div>
    </div>
    <div class="card-body">
        <!-- Filters -->
        <div class="row filter-row">
            <div class="col-md-3 mb-2">
                <div class="input-group">
                    <span class="input-group-text"><i class="fas fa-search"></i></span>
                    <input type="text" class="form-control" id="search-filter" placeholder="Search Order UUID or User">
                </div>
            </div>
            <div class="col-md-2 mb-2">
                <select class="form-select" id="status-filter">
                    <option value="">All Statuses</option>
                    {% for status in ['pending', 'partial', 'closed', 'cancelled', 'failed'] %}
                        <option value="{{ status }}">{{ status|capitalize }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2 mb-2">
                <select class="form-select" id="type-filter">
                    <option value="">All Types</option>
                    {% for type in ['purchase', 'refund', 'exchange'] %}
                        <option value="{{ type }}">{{ type|capitalize }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-3 mb-2">
                <div class="input-group">
                    <span class="input-group-text">Date Range</span>
                    <input type="date" class="form-control" id="date-from">
                    <input type="date" class="form-control" id="date-to">
                </div>
            </div>
            <div class="col-md-2 mb-2">
                <button class="btn btn-primary w-100" id="clear-filters">Clear Filters</button>
            </div>
        </div>

        <!-- Table -->
        <div class="table-responsive">
            <table class="table table-hover table-striped m-0 border" id="orders-table">
                <thead class="table-dark">
                    <tr>
                        <th class="clickable" data-sort="created">Created At <i class="fas fa-sort"></i></th>
                        <th class="clickable" data-sort="updated">Last Updated <i class="fas fa-sort"></i></th>
                        <th class="clickable" data-sort="status">Status <i class="fas fa-sort"></i></th>
                        <th class="clickable" data-sort="operations">Operations <i class="fas fa-sort"></i></th>
                        <th class="clickable" data-sort="type">Type <i class="fas fa-sort"></i></th>
                        <th>UUID</th>
                        <th>User</th>
                    </tr>
                </thead>
                <tbody>
                    {% for order in orders %}
                    <tr data-uuid="{{ order.uuid }}" data-status="{{ order.status.name|lower }}" data-type="{{ order.type }}" 
                        data-created="{{ order.createdAt|date('Y-m-d') }}" data-user="{{ order.steamId }}">
                        <td>{{ order.createdAt|date("m/d/Y") }}</td>
                        <td>{{ order.lastUpdatedAt|date("m/d/Y") }}</td>
                        <td>
                            {% set statusClass = {
                                'pending': 'bg-warning text-dark',
                                'partial': 'bg-info text-white',
                                'closed': 'bg-success text-white',
                                'cancelled': 'bg-danger text-white',
                                'failed': 'bg-danger text-white'
                            } %}
                            <span class="badge {{ statusClass[order.status.name|lower] ?? 'bg-secondary text-white' }}">
                                {{ order.status.name|capitalize }}
                            </span>
                        </td>
                        {% set operations = order.operations|length %}
                        {% set completedCount = 0 %}
                        {% for operation in order.operations %}
                            {% if operation.complete %}
                                {% set completedCount = completedCount + 1 %}
                            {% endif %}
                        {% endfor %}
                        <td>
                            <div class="progress" style="height: 20px;">
                                {% set progressPercentage = operations ? (completedCount / operations * 100) : 0 %}
                                <div class="progress-bar {{ progressPercentage == 100 ? 'bg-success' : 'bg-primary' }}" 
                                     role="progressbar" style="width: {{ progressPercentage }}%">
                                    {{ completedCount }} / {{ operations }}
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="badge {{ order.type == 'purchase' ? 'bg-primary' : (order.type == 'refund' ? 'bg-warning' : 'bg-info') }}">
                                {{ order.type|capitalize }}
                            </span>
                        </td>
                        <td>
                            <a href="{{ path("admin.order.show", {"uuid": order.uuid}) }}" 
                               class="text-decoration-none order-uuid">{{ order.uuid }}</a>
                        </td>
                        <td>{{ order.steamId }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="d-flex justify-content-between align-items-center mt-3">
            <div class="pagination-info">
                Showing <span id="showing-start">1</span> to <span id="showing-end">10</span> of <span id="total-records">{{ orders|length }}</span> orders
            </div>
            <div>
                <select id="page-size" class="form-select form-select-sm d-inline-block w-auto">
                    <option value="10">10 per page</option>
                    <option value="25">25 per page</option>
                    <option value="50">50 per page</option>
                    <option value="100">100 per page</option>
                </select>
            </div>
            <nav>
                <ul class="pagination pagination-sm mb-0" id="pagination">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" id="prev-page">&laquo;</a>
                    </li>
                    <!-- Page numbers will be inserted here by JavaScript -->
                    <li class="page-item">
                        <a class="page-link" href="#" id="next-page">&raquo;</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
{% endblock %}
{% block scripts %}
{{ parent() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize variables
    let orders = [];
    let filteredOrders = [];
    let currentPage = 1;
    let pageSize = 10;
    let sortField = 'created';
    let sortDirection = 'desc';

    // Collect all rows from the table into a JavaScript array
    document.querySelectorAll('#orders-table tbody tr').forEach(row => {
        orders.push({
            element: row,
            uuid: row.getAttribute('data-uuid'),
            status: row.getAttribute('data-status'),
            type: row.getAttribute('data-type'),
            created: row.getAttribute('data-created'),
            user: row.getAttribute('data-user'),
            operations: row.querySelector('td:nth-child(4)').textContent.trim(),
            operationsRatio: parseFloat(row.querySelector('td:nth-child(4)').textContent.trim().split('/')[0]) / 
                           parseFloat(row.querySelector('td:nth-child(4)').textContent.trim().split('/')[1] || 1)
        });
    });
    
    // Initialize with all orders
    filteredOrders = [...orders];
    applyFiltersAndSort();

    // Event listeners for filters
    document.getElementById('search-filter').addEventListener('input', applyFiltersAndSort);
    document.getElementById('status-filter').addEventListener('change', applyFiltersAndSort);
    document.getElementById('type-filter').addEventListener('change', applyFiltersAndSort);
    document.getElementById('date-from').addEventListener('change', applyFiltersAndSort);
    document.getElementById('date-to').addEventListener('change', applyFiltersAndSort);
    document.getElementById('clear-filters').addEventListener('click', clearFilters);
    document.getElementById('page-size').addEventListener('change', function() {
        pageSize = parseInt(this.value);
        currentPage = 1;
        applyFiltersAndSort();
    });
    
    // Sorting
    document.querySelectorAll('th.clickable').forEach(header => {
        header.addEventListener('click', function() {
            const field = this.getAttribute('data-sort');
            if (sortField === field) {
                sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
            } else {
                sortField = field;
                sortDirection = 'asc';
            }
            
            // Update UI to show sort direction
            document.querySelectorAll('th.clickable i').forEach(icon => {
                icon.className = 'fas fa-sort';
            });
            this.querySelector('i').className = sortDirection === 'asc' ? 'fas fa-sort-up' : 'fas fa-sort-down';
            
            applyFiltersAndSort();
        });
    });
    
    // Refresh button
    document.getElementById('refresh-btn').addEventListener('click', function() {
        location.reload();
    });
    
    // Pagination navigation
    document.getElementById('prev-page').addEventListener('click', function(e) {
        e.preventDefault();
        if (currentPage > 1) {
            currentPage--;
            displayCurrentPage();
        }
    });
    
    document.getElementById('next-page').addEventListener('click', function(e) {
        e.preventDefault();
        const totalPages = Math.ceil(filteredOrders.length / pageSize);
        if (currentPage < totalPages) {
            currentPage++;
            displayCurrentPage();
        }
    });

    function applyFiltersAndSort() {
        const searchTerm = document.getElementById('search-filter').value.toLowerCase();
        const statusFilter = document.getElementById('status-filter').value.toLowerCase();
        const typeFilter = document.getElementById('type-filter').value.toLowerCase();
        const dateFrom = document.getElementById('date-from').value;
        const dateTo = document.getElementById('date-to').value;
        
        // Filter orders based on criteria
        filteredOrders = orders.filter(order => {
            let matchesSearch = true;
            let matchesStatus = true;
            let matchesType = true;
            let matchesDateRange = true;
            
            if (searchTerm) {
                matchesSearch = order.uuid.toLowerCase().includes(searchTerm) || 
                               order.user.toLowerCase().includes(searchTerm);
            }
            
            if (statusFilter) {
                matchesStatus = order.status === statusFilter;
            }
            
            if (typeFilter) {
                matchesType = order.type === typeFilter;
            }
            
            if (dateFrom) {
                matchesDateRange = order.created >= dateFrom;
            }
            
            if (dateTo) {
                matchesDateRange = matchesDateRange && order.created <= dateTo;
            }
            
            return matchesSearch && matchesStatus && matchesType && matchesDateRange;
        });
        
        // Sort the filtered orders
        filteredOrders.sort((a, b) => {
            let comparison = 0;
            
            switch (sortField) {
                case 'created':
                    comparison = a.created.localeCompare(b.created);
                    break;
                case 'updated':
                    // Assuming the cells have the same date format
                    comparison = a.element.querySelector('td:nth-child(2)').textContent.localeCompare(
                                b.element.querySelector('td:nth-child(2)').textContent);
                    break;
                case 'status':
                    comparison = a.status.localeCompare(b.status);
                    break;
                case 'operations':
                    comparison = a.operationsRatio - b.operationsRatio;
                    break;
                case 'type':
                    comparison = a.type.localeCompare(b.type);
                    break;
            }
            
            return sortDirection === 'asc' ? comparison : -comparison;
        });
        
        // Reset to first page and display
        currentPage = 1;
        displayCurrentPage();
        updatePagination();
        highlightSearchTerms(searchTerm);
    }
    
    function displayCurrentPage() {
        const start = (currentPage - 1) * pageSize;
        const end = Math.min(start + pageSize, filteredOrders.length);
        const tableBody = document.querySelector('#orders-table tbody');
        
        // Clear the current table
        tableBody.innerHTML = '';
        
        // Display only the current page
        for (let i = start; i < end; i++) {
            tableBody.appendChild(filteredOrders[i].element.cloneNode(true));
        }
        
        // Update the info text
        document.getElementById('showing-start').textContent = filteredOrders.length > 0 ? start + 1 : 0;
        document.getElementById('showing-end').textContent = end;
        document.getElementById('total-records').textContent = filteredOrders.length;
        
        // Update pagination buttons state
        document.getElementById('prev-page').parentElement.classList.toggle('disabled', currentPage === 1);
        document.getElementById('next-page').parentElement.classList.toggle('disabled', 
            currentPage === Math.ceil(filteredOrders.length / pageSize) || filteredOrders.length === 0);
    }
    
    function updatePagination() {
        const totalPages = Math.ceil(filteredOrders.length / pageSize);
        const paginationEl = document.getElementById('pagination');
        const prevPageItem = paginationEl.querySelector('li:first-child');
        const nextPageItem = paginationEl.querySelector('li:last-child');
        
        // Remove all page number items
        Array.from(paginationEl.querySelectorAll('li:not(:first-child):not(:last-child)')).forEach(item => {
            item.remove();
        });
        
        // Add page numbers (limited to show 5 pages)
        let startPage = Math.max(1, currentPage - 2);
        let endPage = Math.min(totalPages, startPage + 4);
        startPage = Math.max(1, endPage - 4);
        
        for (let i = startPage; i <= endPage; i++) {
            const li = document.createElement('li');
            li.className = 'page-item' + (i === currentPage ? ' active' : '');
            
            const a = document.createElement('a');
            a.className = 'page-link';
            a.href = '#';
            a.textContent = i;
            a.addEventListener('click', function(e) {
                e.preventDefault();
                currentPage = i;
                displayCurrentPage();
                updatePagination();
            });
            
            li.appendChild(a);
            paginationEl.insertBefore(li, nextPageItem);
        }
    }
    
    function highlightSearchTerms(term) {
        if (!term) return;
        
        document.querySelectorAll('#orders-table tbody td').forEach(cell => {
            if (cell.querySelector('a.order-uuid')) {
                // Handle UUID cells specially
                const link = cell.querySelector('a.order-uuid');
                const originalText = link.textContent;
                const regex = new RegExp(`(${term})`, 'gi');
                link.innerHTML = originalText.replace(regex, '<span class="search-highlight">$1</span>');
            }
            else if (!cell.querySelector('.progress') && !cell.querySelector('.status-badge') && !cell.querySelector('.badge')) {
                // Skip cells with special content
                const originalText = cell.textContent;
                const regex = new RegExp(`(${term})`, 'gi');
                cell.innerHTML = originalText.replace(regex, '<span class="search-highlight">$1</span>');
            }
        });
    }
    
    function clearFilters() {
        document.getElementById('search-filter').value = '';
        document.getElementById('status-filter').value = '';
        document.getElementById('type-filter').value = '';
        document.getElementById('date-from').value = '';
        document.getElementById('date-to').value = '';
        applyFiltersAndSort();
    }
});
</script>
{% endblock %}