{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div>
                     <h1><i class="fas fa-list-ul me-2"></i>Fixtures</h1>
                     <p class="mb-0">View and manage synchronized boxing match fixtures with status tracking.</p>
                 </div>
                {% if current_user.is_admin %}
                <div>
                    <button type="button" class="btn btn-danger" id="reset-fixtures-btn">
                        <i class="fas fa-trash-alt me-1"></i>Reset All Fixtures
                    </button>
                </div>
                {% endif %}
            </div>
            
            
            <!-- Loading Spinner -->
            <div id="loading" class="text-center my-4" style="display: none;">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-2">Loading fixtures...</p>
            </div>
            
            <!-- Fixtures Summary Cards -->
            <div class="row mb-4" id="summary-cards">
                <div class="col-md-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title text-primary">
                                <i class="fas fa-list me-2"></i>Total Fixtures
                            </h5>
                            <h3 id="total-count" class="text-primary">0</h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title text-warning">
                                <i class="fas fa-clock me-2"></i>Pending
                            </h5>
                            <h3 id="pending-count" class="text-warning">0</h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title text-info">
                                <i class="fas fa-play me-2"></i>Running
                            </h5>
                            <h3 id="running-count" class="text-info">0</h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title text-success">
                                <i class="fas fa-check me-2"></i>Completed
                            </h5>
                            <h3 id="completed-count" class="text-success">0</h3>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Filters and Search -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5>Filter Options</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="upload-filter" class="form-label">Upload Status</label>
                            <select class="form-select" id="upload-filter">
                                <option value="">All Uploads</option>
                                <option value="pending">Pending</option>
                                <option value="uploading">Uploading</option>
                                <option value="completed">Completed</option>
                                <option value="failed">Failed</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="past-filter" class="form-label">Past Fixtures</label>
                            <select class="form-select" id="past-filter">
                                <option value="hide">Hide Past</option>
                                <option value="show">Show Past</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="search-input" class="form-label">Search Fighters</label>
                            <input type="text" class="form-control" id="search-input" placeholder="Search by fighter names or venue">
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button class="btn btn-primary" id="refresh-btn">
                                <i class="fas fa-sync-alt me-1"></i>Refresh
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Fixtures Table -->
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5>All Fixtures</h5>
                    <span id="filtered-count" class="badge bg-secondary">0 fixtures</span>
                </div>
                <div class="card-body p-0" style="padding-bottom: 100px !important;">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0" id="fixtures-table">
                            <thead class="table-light">
                                <tr>
                                    <th>Fixture #</th>
                                    <th>Date</th>
                                    <th>Fighters</th>
                                    <th>Venue</th>
                                    <th>Status</th>
                                    <th>Upload Status</th>
                                    <th>Start Time</th>
                                    <th>Created</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="fixtures-tbody">
                                <!-- Table content will be loaded here -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Fixture Template Section (Admin and Users only) -->
            {% if current_user.is_admin or (hasattr(current_user, 'role') and current_user.role != 'cashier') %}
            <div class="row mt-5">
                <div class="col-12">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <h2><i class="fas fa-template-icon me-2"></i>Fixture template</h2>
                            <p class="mb-0">Manage reusable fixture configurations with customizable odds.</p>
                        </div>
                    </div>

                    <!-- Loading Spinner for Templates -->
                    <div id="templates-loading" class="text-center my-4" style="display: none;">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-2">Loading match templates...</p>
                    </div>

                    <!-- Fixture Template Table -->
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5>Fixture Template</h5>
                            <span id="templates-filtered-count" class="badge bg-secondary">0 template</span>
                        </div>
                        <div class="card-body p-0" style="padding-bottom: 100px !important;">
                            <div class="table-responsive">
                                <table class="table table-hover mb-0" id="templates-table">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Fixture #</th>
                                            <th>Date</th>
                                            <th>Fighters</th>
                                            <th>Venue</th>
                                            <th>Status</th>
                                            <th>Upload Status</th>
                                            <th>Start Time</th>
                                            <th>Created</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody id="templates-tbody">
                                        <!-- Template content will be loaded here -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- Empty State for Templates -->
                    <div id="templates-empty-state" class="text-center my-5" style="display: none;">
                        <i class="fas fa-inbox fa-4x text-muted mb-3"></i>
                        <h4 class="text-muted">No Match Templates Found</h4>
                        <p class="text-muted">No match templates available. Templates are created from synchronized fixtures.</p>
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Empty State -->
            <div id="empty-state" class="text-center my-5" style="display: none;">
                <i class="fas fa-inbox fa-4x text-muted mb-3"></i>
                <h4 class="text-muted">No Fixtures Found</h4>
                <p class="text-muted">No synchronized fixtures found. Check your API synchronization settings or upload fixture files.</p>
            </div>
        </div>
    </div>
</div>

<script>
let allFixtures = [];
let allTemplates = [];

// Load fixtures and templates on page load
document.addEventListener('DOMContentLoaded', function() {
    loadFixtures();
    loadTemplates();

    // Event listeners
    document.getElementById('refresh-btn').addEventListener('click', function() {
        loadFixtures();
        loadTemplates();
    });
    document.getElementById('upload-filter').addEventListener('change', filterFixtures);
    document.getElementById('past-filter').addEventListener('change', filterFixtures);
    document.getElementById('search-input').addEventListener('input', filterFixtures);

    // Reset fixtures button (admin only)
    const resetBtn = document.getElementById('reset-fixtures-btn');
    if (resetBtn) {
        resetBtn.addEventListener('click', resetFixtures);
    }

    // Auto-refresh fixtures every 15 seconds
    setInterval(function() {
        loadFixtures();
        loadTemplates();
    }, 15000);
});

let isInitialLoad = true;

function loadFixtures() {
    const loading = document.getElementById('loading');
    const refreshBtn = document.getElementById('refresh-btn');
    
    // Only show loading spinner on initial load or manual refresh
    if (isInitialLoad || refreshBtn.disabled) {
        loading.style.display = 'block';
    }
    refreshBtn.disabled = true;
    
    fetch('/api/fixtures')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                allFixtures = data.fixtures;
                updateSummaryCards();
                filterFixtures(); // This will also render the table
            } else {
                if (isInitialLoad) {
                    alert('Error loading fixtures: ' + (data.error || 'Unknown error'));
                }
            }
        })
        .catch(error => {
            console.error('Error:', error);
            if (isInitialLoad) {
                alert('Failed to load fixtures: ' + error.message);
            }
        })
        .finally(() => {
            loading.style.display = 'none';
            refreshBtn.disabled = false;
            isInitialLoad = false;
        });
}

function updateSummaryCards() {
    const totalCount = allFixtures.length;
    const pendingCount = allFixtures.filter(f => f.fixture_status === 'pending').length;
    const runningCount = allFixtures.filter(f => f.fixture_status === 'running').length;
    const scheduledCount = allFixtures.filter(f => f.fixture_status === 'scheduled').length;
    const betCount = allFixtures.filter(f => f.fixture_status === 'bet').length;
    const ingameCount = allFixtures.filter(f => f.fixture_status === 'ingame').length;
    const endCount = allFixtures.filter(f => f.fixture_status === 'end').length;

    document.getElementById('total-count').textContent = totalCount;
    document.getElementById('pending-count').textContent = pendingCount;
    document.getElementById('running-count').textContent = runningCount;

    // Update the summary cards to show more status types
    const summaryCards = document.getElementById('summary-cards');
    const betInGameCount = betCount + ingameCount;
    summaryCards.innerHTML = `
        <div class="col-md-2">
            <div class="card text-center">
                <div class="card-body">
                    <h5 class="card-title text-primary">
                        <i class="fas fa-list me-2"></i>Total Fixtures
                    </h5>
                    <h3 id="total-count" class="text-primary">` + totalCount + `</h3>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card text-center">
                <div class="card-body">
                    <h5 class="card-title text-warning">
                        <i class="fas fa-clock me-2"></i>Pending
                    </h5>
                    <h3 id="pending-count" class="text-warning">` + pendingCount + `</h3>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card text-center">
                <div class="card-body">
                    <h5 class="card-title text-info">
                        <i class="fas fa-play me-2"></i>Running
                    </h5>
                    <h3 id="running-count" class="text-info">` + runningCount + `</h3>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card text-center">
                <div class="card-body">
                    <h5 class="card-title text-secondary">
                        <i class="fas fa-calendar me-2"></i>Scheduled
                    </h5>
                    <h3 class="text-secondary">` + scheduledCount + `</h3>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card text-center">
                <div class="card-body">
                    <h5 class="card-title text-success">
                        <i class="fas fa-gamepad me-2"></i>Bet/In Game
                    </h5>
                    <h3 class="text-success">` + betInGameCount + `</h3>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card text-center">
                <div class="card-body">
                    <h5 class="card-title text-dark">
                        <i class="fas fa-stop me-2"></i>End
                    </h5>
                    <h3 class="text-dark">` + endCount + `</h3>
                </div>
            </div>
        </div>
    `;
}

function filterFixtures() {
    const uploadFilter = document.getElementById('upload-filter').value;
    const pastFilter = document.getElementById('past-filter').value;
    const searchTerm = document.getElementById('search-input').value.toLowerCase();

    // Get today's date (start of day)
    const today = new Date();
    today.setHours(0, 0, 0, 0);

    let filteredFixtures = allFixtures.filter(fixture => {
        // Past fixtures filter
        if (pastFilter === 'hide') {
            // Hide past fixtures by default
            if (fixture.start_time) {
                const fixtureDate = new Date(fixture.start_time);
                fixtureDate.setHours(0, 0, 0, 0);
                if (fixtureDate < today) {
                    return false; // Hide past fixtures
                }
            }
            // Show fixtures with no start_time or future/today start_time
        }
        // If pastFilter is 'show', show all fixtures regardless of date

        // Upload filter - check the first match's upload status
        if (uploadFilter && fixture.matches && fixture.matches.length > 0) {
            if (fixture.matches[0].zip_upload_status !== uploadFilter) {
                return false;
            }
        }

        // Search filter
        if (searchTerm) {
            const searchText = (fixture.fighter1_township + ' ' + fixture.fighter2_township + ' ' + fixture.venue_kampala_township).toLowerCase();
            if (!searchText.includes(searchTerm)) return false;
        }

        return true;
    });

    renderFixturesTable(filteredFixtures);
    document.getElementById('filtered-count').textContent = filteredFixtures.length + ' fixtures';

    // Show/hide empty state
    const emptyState = document.getElementById('empty-state');
    const fixturesTable = document.querySelector('.card .table-responsive').parentElement;

    if (filteredFixtures.length === 0 && allFixtures.length === 0) {
        emptyState.style.display = 'block';
        fixturesTable.style.display = 'none';
    } else {
        emptyState.style.display = 'none';
        fixturesTable.style.display = 'block';
    }
}

function renderFixturesTable(fixtures) {
    const tbody = document.getElementById('fixtures-tbody');
    const existingRows = Array.from(tbody.children);
    
    // Create a map of existing fixtures for comparison
    const existingFixtures = new Map();
    existingRows.forEach(row => {
        const fixtureId = row.getAttribute('data-fixture-id');
        if (fixtureId) {
            existingFixtures.set(fixtureId, row);
        }
    });
    
    // Track which fixtures we've processed
    const processedFixtures = new Set();
    
    fixtures.forEach((fixture, index) => {
        const fixtureId = fixture.fixture_id.toString();
        processedFixtures.add(fixtureId);
        
        const startTimeDisplay = fixture.start_time ? new Date(fixture.start_time).toLocaleString() : 'Not set';
        const fixtureDate = fixture.start_time ? new Date(fixture.start_time).toLocaleDateString() : 'Not set';

        // Determine if this is yesterday, today, or other date
        let dateBadge = '';
        if (fixture.start_time) {
            const matchDate = new Date(fixture.start_time);
            const today = new Date();
            const yesterday = new Date(today);
            yesterday.setDate(yesterday.getDate() - 1);

            const matchDay = new Date(matchDate.getFullYear(), matchDate.getMonth(), matchDate.getDate());
            const todayDay = new Date(today.getFullYear(), today.getMonth(), today.getDate());
            const yesterdayDay = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate());

            if (matchDay.getTime() === yesterdayDay.getTime()) {
                dateBadge = '<span class="badge bg-warning">Yesterday</span>';
            } else if (matchDay.getTime() === todayDay.getTime()) {
                dateBadge = '<span class="badge bg-success">Today</span>';
            } else {
                dateBadge = '<span class="badge bg-secondary">' + fixtureDate + '</span>';
            }
        } else {
            dateBadge = '<span class="badge bg-secondary">Not set</span>';
        }

        const newRowHTML = `
            <td>
                <strong>#` + fixture.match_number + `</strong>
                <br>
                <small class="text-muted">` + fixture.match_count + ` matches</small>
            </td>
            <td>` + dateBadge + `</td>
            <td>
                <div class="fw-bold">` + fixture.fighter1_township + `</div>
                <small class="text-muted">vs</small>
                <div class="fw-bold">` + fixture.fighter2_township + `</div>
            </td>
            <td>` + fixture.venue_kampala_township + `</td>
            <td>` + getFixtureStatusBadge(fixture) + `</td>
            <td>` + getUploadStatusBadge(fixture) + `</td>
            <td>
                <small class="text-info">` + startTimeDisplay + `</small>
            </td>
            <td>
                <small class="text-muted">
                    ` + new Date(fixture.created_at).toLocaleString() + `
                </small>
            </td>
            <td>
                <a href="/fixtures/` + fixture.fixture_id + `" class="btn btn-sm btn-outline-primary">
                    <i class="fas fa-eye me-1"></i>Details
                </a>
            </td>
        `;
        
        const existingRow = existingFixtures.get(fixtureId);
        if (existingRow) {
            // Update existing row only if content has changed
            if (existingRow.innerHTML !== newRowHTML) {
                existingRow.innerHTML = newRowHTML;
                existingRow.style.backgroundColor = '#fff3cd'; // Highlight changed row briefly
                setTimeout(() => {
                    existingRow.style.backgroundColor = '';
                }, 1000);
            }
        } else {
            // Add new row
            const row = document.createElement('tr');
            row.setAttribute('data-fixture-id', fixtureId);
            row.innerHTML = newRowHTML;
            row.style.backgroundColor = '#d4edda'; // Highlight new row briefly
            tbody.appendChild(row);
            setTimeout(() => {
                row.style.backgroundColor = '';
            }, 1000);
        }
    });
    
    // Remove rows that are no longer in the data
    existingFixtures.forEach((row, fixtureId) => {
        if (!processedFixtures.has(fixtureId)) {
            row.style.backgroundColor = '#f8d7da'; // Highlight removed row briefly
            setTimeout(() => {
                if (row.parentNode) {
                    row.parentNode.removeChild(row);
                }
            }, 500);
        }
    });
}

function getFixtureStatusBadge(fixture) {
    const status = fixture.fixture_status;

    switch (status) {
        case 'pending':
            return '<span class="badge bg-warning"><i class="fas fa-clock me-1"></i>Pending</span>';
        case 'running':
            return '<span class="badge bg-info"><i class="fas fa-play me-1"></i>Running</span>';
        case 'scheduled':
            return '<span class="badge bg-secondary"><i class="fas fa-calendar me-1"></i>Scheduled</span>';
        case 'bet':
            return '<span class="badge bg-primary"><i class="fas fa-money-bill me-1"></i>Bet</span>';
        case 'ingame':
            return '<span class="badge bg-success"><i class="fas fa-gamepad me-1"></i>In Game</span>';
        case 'end':
            return '<span class="badge bg-dark"><i class="fas fa-stop me-1"></i>End</span>';
        default:
            return '<span class="badge bg-secondary"><i class="fas fa-question me-1"></i>Unknown</span>';
    }
}

function getUploadStatusBadge(fixture) {
    // Get upload status from the first match in the fixture
    if (!fixture.matches || fixture.matches.length === 0) {
        return '<span class="badge bg-secondary"><i class="fas fa-clock me-1"></i>Pending</span>';
    }

    const firstMatch = fixture.matches[0];
    const status = firstMatch.zip_upload_status || 'pending';
    const progress = firstMatch.zip_upload_progress || 0;

    switch (status) {
        case 'completed':
            return '<span class="badge bg-success"><i class="fas fa-check me-1"></i>Completed</span>';
        case 'uploading':
            return '<span class="badge bg-info"><i class="fas fa-spinner fa-spin me-1"></i>Uploading (' + progress.toFixed(1) + '%)</span>';
        case 'failed':
            return '<span class="badge bg-danger"><i class="fas fa-times me-1"></i>Failed</span>';
        default:
            return '<span class="badge bg-secondary"><i class="fas fa-clock me-1"></i>Pending</span>';
    }
}

function loadTemplates() {
    const loading = document.getElementById('templates-loading');
    const refreshBtn = document.getElementById('refresh-btn');

    // Only show loading spinner on initial load or manual refresh
    if (isInitialLoad || refreshBtn.disabled) {
        loading.style.display = 'block';
    }

    fetch('/api/matches-templates')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                allTemplates = data.templates;
                renderTemplatesTable(allTemplates);
            } else {
                if (isInitialLoad) {
                    console.error('Error loading templates: ' + (data.error || 'Unknown error'));
                }
            }
        })
        .catch(error => {
            console.error('Error:', error);
            if (isInitialLoad) {
                console.error('Failed to load templates: ' + error.message);
            }
        })
        .finally(() => {
            loading.style.display = 'none';
        });
}

function renderTemplatesTable(templates) {
    const tbody = document.getElementById('templates-tbody');
    const filteredCount = document.getElementById('templates-filtered-count');
    const emptyState = document.getElementById('templates-empty-state');
    const templatesTable = document.querySelector('#templates-table').parentElement.parentElement;

    filteredCount.textContent = templates.length + ' template';

    // Show/hide empty state
    if (templates.length === 0) {
        emptyState.style.display = 'block';
        templatesTable.style.display = 'none';
        return;
    } else {
        emptyState.style.display = 'none';
        templatesTable.style.display = 'block';
    }

    // Create a map of existing templates for comparison
    const existingRows = Array.from(tbody.children);
    const existingTemplates = new Map();
    existingRows.forEach(row => {
        const templateId = row.getAttribute('data-template-id');
        if (templateId) {
            existingTemplates.set(templateId, row);
        }
    });

    // Track which templates we've processed
    const processedTemplates = new Set();

    templates.forEach((template, index) => {
        const templateId = template.fixture_id.toString(); // Use fixture_id as identifier
        processedTemplates.add(templateId);

        // For templates, show creation date as the date
        const fixtureDate = new Date(template.created_at).toLocaleDateString();
        const dateBadge = '<span class="badge bg-secondary">' + fixtureDate + '</span>';

        const newRowHTML = `
            <td>
                <strong>#` + template.match_number + `</strong>
                <br>
                <small class="text-muted">` + template.match_count + ` matches</small>
            </td>
            <td>` + dateBadge + `</td>
            <td>
                <div class="fw-bold">` + template.fighter1_township + `</div>
                <small class="text-muted">vs</small>
                <div class="fw-bold">` + template.fighter2_township + `</div>
            </td>
            <td>` + template.venue_kampala_township + `</td>
            <td>` + getTemplateStatusBadge(template) + `</td>
            <td><span class="badge bg-secondary"><i class="fas fa-clock me-1"></i>N/A</span></td>
            <td>
                <small class="text-info">Not scheduled</small>
            </td>
            <td>
                <small class="text-muted">
                    ` + new Date(template.created_at).toLocaleString() + `
                </small>
            </td>
            <td>
                <a href="/templates-details" class="btn btn-sm btn-outline-primary">
                    <i class="fas fa-eye me-1"></i>Details
                </a>
            </td>
        `;

        const existingRow = existingTemplates.get(templateId);
        if (existingRow) {
            // Update existing row only if content has changed
            if (existingRow.innerHTML !== newRowHTML) {
                existingRow.innerHTML = newRowHTML;
                existingRow.style.backgroundColor = '#fff3cd'; // Highlight changed row briefly
                setTimeout(() => {
                    existingRow.style.backgroundColor = '';
                }, 1000);
            }
        } else {
            // Add new row
            const row = document.createElement('tr');
            row.setAttribute('data-template-id', templateId);
            row.innerHTML = newRowHTML;
            row.style.backgroundColor = '#d4edda'; // Highlight new row briefly
            tbody.appendChild(row);
            setTimeout(() => {
                row.style.backgroundColor = '';
            }, 1000);
        }
    });

    // Remove rows that are no longer in the data
    existingTemplates.forEach((row, templateId) => {
        if (!processedTemplates.has(templateId)) {
            row.style.backgroundColor = '#f8d7da'; // Highlight removed row briefly
            setTimeout(() => {
                if (row.parentNode) {
                    row.parentNode.removeChild(row);
                }
            }, 500);
        }
    });
}

function getTemplateStatusBadge(template) {
    const status = template.fixture_status || template.status || 'pending';

    switch (status) {
        case 'template':
            return '<span class="badge bg-info"><i class="fas fa-template-icon me-1"></i>Template</span>';
        case 'pending':
            return '<span class="badge bg-warning"><i class="fas fa-clock me-1"></i>Pending</span>';
        case 'active':
            return '<span class="badge bg-success"><i class="fas fa-check me-1"></i>Active</span>';
        case 'inactive':
            return '<span class="badge bg-secondary"><i class="fas fa-pause me-1"></i>Inactive</span>';
        default:
            return '<span class="badge bg-secondary"><i class="fas fa-question me-1"></i>Unknown</span>';
    }
}

function resetFixtures() {
    const confirmMessage = 'WARNING: This will permanently delete ALL fixture data including:\n\n' +
                           '• All synchronized matches and outcomes\n' +
                           '• All match templates and template outcomes\n' +
                           '• All downloaded ZIP files\n' +
                           '• This action cannot be undone!\n\n' +
                           'Are you sure you want to reset all fixtures data?';

    if (!confirm(confirmMessage)) {
        return;
    }

    const resetBtn = document.getElementById('reset-fixtures-btn');
    const originalText = resetBtn.innerHTML;

    resetBtn.disabled = true;
    resetBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Resetting...';

    fetch('/api/fixtures/reset', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(`Fixtures reset successfully!\n\nRemoved:\n• ${data.removed.matches} matches\n• ${data.removed.outcomes} outcomes\n• ${data.removed.templates} match templates\n• ${data.removed.template_outcomes} template outcomes\n• ${data.removed.zip_files} ZIP files`);
            // Reload fixtures and templates to show empty state
            loadFixtures();
            loadTemplates();
        } else {
            alert('Error resetting fixtures: ' + (data.error || 'Unknown error'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Failed to reset fixtures: ' + error.message);
    })
    .finally(() => {
        resetBtn.disabled = false;
        resetBtn.innerHTML = originalText;
    });
}
</script>
{% endblock %}