{% extends "base.html" %}

{% block content %}
<div class="page-title">Dashboard Overview</div>
<div class="page-subtitle">Monitor your telegram bot system performance and statistics</div>

<!-- Statistics Cards -->
<div class="row g-4 mb-4">
    <div class="col-xl-3 col-md-6">
        <div class="stats-card">
            <div class="card-icon" style="background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));">
                <i class="fas fa-users"></i>
            </div>
            <h3>{{ total_resellers }}</h3>
            <p>Total Resellers</p>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="stats-card">
            <div class="card-icon" style="background: linear-gradient(135deg, var(--success-color), #059669);">
                <i class="fas fa-key"></i>
            </div>
            <h3>{{ available_keys }}</h3>
            <p>Available Keys</p>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="stats-card">
            <div class="card-icon" style="background: linear-gradient(135deg, var(--warning-color), #d97706);">
                <i class="fas fa-shopping-cart"></i>
            </div>
            <h3>{{ sold_keys }}</h3>
            <p>Sold Keys</p>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="stats-card">
            <div class="card-icon" style="background: linear-gradient(135deg, var(--info-color), #0891b2);">
                <i class="fas fa-dollar-sign"></i>
            </div>
            <h3>${{ "%.2f"|format(total_balance) }}</h3>
            <p>Total Balance</p>
        </div>
    </div>
</div>

<!-- Search Section -->
<div class="row g-4 mb-4">
    <div class="col-12">
        <div class="card-modern">
            <div class="card-header-modern">
                <i class="fas fa-search me-2"></i>Global Key Search
            </div>
            <div class="card-body p-4">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <div class="search-box">
                            <i class="fas fa-search search-icon"></i>
                            <input type="text" class="form-control" id="globalKeySearch" placeholder="Search across all keys, products, and resellers..." onkeyup="searchAllKeys()">
                        </div>
                    </div>
                    <div class="col-md-4 text-end">
                        <span class="badge bg-primary fs-6 px-3 py-2" id="searchResultCount">Ready to search</span>
                    </div>
                </div>
                
                <div id="searchResults" class="mt-4" style="display: none;">
                    <div class="table-responsive">
                        <table class="table table-modern">
                            <thead>
                                <tr>
                                    <th><i class="fas fa-key me-2"></i>Key</th>
                                    <th><i class="fas fa-box me-2"></i>Product</th>
                                    <th><i class="fas fa-info-circle me-2"></i>Status</th>
                                    <th><i class="fas fa-user me-2"></i>Sold To</th>
                                    <th><i class="fas fa-cog me-2"></i>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="searchResultsBody">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Quick Actions -->
<div class="row g-4">
    <div class="col-12">
        <div class="card-modern">
            <div class="card-header-modern">
                <i class="fas fa-bolt me-2"></i>Quick Actions
            </div>
            <div class="card-body p-4">
                <div class="row g-3">
                    <div class="col-lg-3 col-md-6">
                        <a href="{{ url_for('resellers') }}" class="btn btn-outline-primary btn-modern w-100 p-3">
                            <i class="fas fa-users fa-2x mb-2 d-block"></i>
                            <div class="fw-bold">Manage Resellers</div>
                            <small class="text-muted">Add, edit, and manage reseller accounts</small>
                        </a>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <a href="{{ url_for('categories') }}" class="btn btn-outline-success btn-modern w-100 p-3">
                            <i class="fas fa-tags fa-2x mb-2 d-block"></i>
                            <div class="fw-bold">Manage Categories</div>
                            <small class="text-muted">Organize products into categories</small>
                        </a>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <button class="btn btn-outline-warning btn-modern w-100 p-3" data-bs-toggle="modal" data-bs-target="#addResellerModal">
                            <i class="fas fa-user-plus fa-2x mb-2 d-block"></i>
                            <div class="fw-bold">Add Reseller</div>
                            <small class="text-muted">Create new reseller account</small>
                        </button>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <a href="{{ url_for('purchase_history') }}" class="btn btn-outline-info btn-modern w-100 p-3">
                            <i class="fas fa-history fa-2x mb-2 d-block"></i>
                            <div class="fw-bold">Purchase History</div>
                            <small class="text-muted">View all key purchases by resellers</small>
                        </a>
                    </div>
                </div>
                <div class="row g-3 mt-2">
                    <div class="col-lg-3 col-md-6">
                        <button class="btn btn-outline-warning btn-modern w-100 p-3" data-bs-toggle="modal" data-bs-target="#addCategoryModal">
                            <i class="fas fa-plus fa-2x mb-2 d-block"></i>
                            <div class="fw-bold">Add Category</div>
                            <small class="text-muted">Create new product category</small>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Reseller Modal -->
<div class="modal fade" id="addResellerModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-user-plus me-2"></i>Add New Reseller</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('add_reseller') }}">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Username</label>
                        <input type="text" class="form-control" name="username" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Password</label>
                        <input type="password" class="form-control" name="password" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Initial Balance</label>
                        <input type="number" step="0.01" class="form-control" name="balance" value="0.00" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary-modern">Add Reseller</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Category Modal -->
<div class="modal fade" id="addCategoryModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-plus me-2"></i>Add New Category</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('add_category') }}">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Category Name</label>
                        <input type="text" class="form-control" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea class="form-control" name="description" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary-modern">Add Category</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function searchAllKeys() {
    const input = document.getElementById('globalKeySearch');
    const query = input.value.trim();
    const resultsDiv = document.getElementById('searchResults');
    const countBadge = document.getElementById('searchResultCount');
    const resultsBody = document.getElementById('searchResultsBody');

    if (query.length < 2) {
        resultsDiv.style.display = 'none';
        countBadge.textContent = 'Ready to search';
        countBadge.className = 'badge bg-primary fs-6 px-3 py-2';
        return;
    }

    // Show loading
    countBadge.textContent = 'Searching...';
    countBadge.className = 'badge bg-warning fs-6 px-3 py-2';
    resultsBody.innerHTML = '<tr><td colspan="5" class="text-center py-4"><i class="fas fa-spinner fa-spin me-2"></i>Loading...</td></tr>';
    resultsDiv.style.display = 'block';

    // Fetch search results
    fetch(`/search_keys?q=${encodeURIComponent(query)}`)
        .then(response => response.json())
        .then(data => {
            resultsBody.innerHTML = '';
            
            if (data.keys && data.keys.length > 0) {
                countBadge.textContent = `Found: ${data.keys.length} keys`;
                countBadge.className = 'badge bg-success fs-6 px-3 py-2';
                
                data.keys.forEach(key => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td><code class="bg-light px-2 py-1 rounded">${key.key_value}</code></td>
                        <td><strong>${key.product_name}</strong></td>
                        <td><span class="badge ${key.status === 'available' ? 'bg-success' : 'bg-warning'}">${key.status}</span></td>
                        <td>${key.sold_to || '<span class="text-muted">Not sold</span>'}</td>
                        <td>
                            <a href="/keys/${key.key_type_id}" class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-eye"></i> View
                            </a>
                        </td>
                    `;
                    resultsBody.appendChild(row);
                });
            } else {
                countBadge.textContent = 'No results found';
                countBadge.className = 'badge bg-secondary fs-6 px-3 py-2';
                resultsBody.innerHTML = '<tr><td colspan="5" class="text-center py-4 text-muted"><i class="fas fa-search me-2"></i>No keys found matching your search</td></tr>';
            }
        })
        .catch(error => {
            console.error('Search error:', error);
            countBadge.textContent = 'Search error';
            countBadge.className = 'badge bg-danger fs-6 px-3 py-2';
            resultsBody.innerHTML = '<tr><td colspan="5" class="text-center py-4 text-danger"><i class="fas fa-exclamation-triangle me-2"></i>Error occurred while searching</td></tr>';
        });
}
</script>
{% endblock %}