{% extends "base.html" %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2>{{ key_type[2] }} - Keys</h2>
        <p class="text-muted">Category: {{ key_type[6] }} → {{ key_type[5] }} | Price: ${{ "%.2f"|format(key_type[3]) }}</p>
        {% if key_type[7] %}
        <p class="text-info">
            <i class="fas fa-link"></i> 
            <strong>File Channel:</strong> 
            <a href="{{ key_type[7] }}" target="_blank" class="text-decoration-none">{{ key_type[7] }}</a>
        </p>
        {% endif %}
    </div>
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addKeysModal">
        <i class="fas fa-plus"></i> Add Keys
    </button>
</div>

<!-- Search Bar -->
<div class="row mb-4">
    <div class="col-md-6">
        <div class="input-group">
            <span class="input-group-text">
                <i class="fas fa-search"></i>
            </span>
            <input type="text" class="form-control" id="keySearch" placeholder="Search keys..." onkeyup="searchKeys()">
        </div>
    </div>
    <div class="col-md-6 text-end">
        <span class="badge bg-info" id="keyCount">Total: {{ keys|length }} keys</span>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Key</th>
                        <th>Status</th>
                        <th>Sold To</th>
                        <th>Sold At</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for key in keys %}
                    <tr>
                        <td>{{ key[0] }}</td>
                        <td>
                            <code>{{ key[2] }}</code>
                        </td>
                        <td>
                            <span class="badge bg-{% if key[3] == 'available' %}success{% else %}warning{% endif %}">
                                {{ key[3] }}
                            </span>
                        </td>
                        <td>{{ key[6] or 'N/A' }}</td>
                        <td>{{ key[5][:16] if key[5] else 'N/A' }}</td>
                        <td>
                            {% if key[3] == 'available' %}
                            <button class="btn btn-danger btn-sm" onclick="confirmDelete('Key #{{ key[0] }}', '{{ url_for('delete_key', key_id=key[0]) }}')">
                                <i class="fas fa-trash"></i>
                            </button>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Add Keys Modal -->
<div class="modal fade" id="addKeysModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Keys</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('add_keys') }}">
                <input type="hidden" name="key_type_id" value="{{ key_type[0] }}">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="keys" class="form-label">Keys (one per line)</label>
                        <textarea class="form-control" id="keys" name="keys" rows="10" 
                                  placeholder="Enter keys, one per line..." required></textarea>
                        <div class="form-text">Each line will be treated as a separate key</div>
                    </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">Add Keys</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete "<span id="deleteItemName"></span>"?</p>
                <p class="text-warning"><strong>This action cannot be undone!</strong></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form id="deleteForm" method="POST" style="display: inline;">
                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function confirmDelete(itemName, deleteUrl) {
    document.getElementById('deleteItemName').textContent = itemName;
    document.getElementById('deleteForm').action = deleteUrl;
    new bootstrap.Modal(document.getElementById('deleteModal')).show();
}

function searchKeys() {
    const input = document.getElementById('keySearch');
    const filter = input.value.toLowerCase();
    const table = document.querySelector('.table tbody');
    const rows = table.getElementsByTagName('tr');
    let visibleCount = 0;

    for (let i = 0; i < rows.length; i++) {
        const row = rows[i];
        const keyValue = row.cells[1].textContent || row.cells[1].innerText;
        const status = row.cells[2].textContent || row.cells[2].innerText;
        const soldTo = row.cells[3].textContent || row.cells[3].innerText;

        if (keyValue.toLowerCase().indexOf(filter) > -1 || 
            status.toLowerCase().indexOf(filter) > -1 || 
            soldTo.toLowerCase().indexOf(filter) > -1) {
            row.style.display = '';
            visibleCount++;
        } else {
            row.style.display = 'none';
        }
    }

    document.getElementById('keyCount').textContent = `Showing: ${visibleCount} of {{ keys|length }} keys`;
}
</script>
{% endblock %}