{% extends "base.html" %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>Resellers Management</h2>
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addResellerModal">
        <i class="fas fa-user-plus"></i> Add Reseller
    </button>
</div>

<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Username</th>
                        <th>Telegram ID</th>
                        <th>Balance</th>
                        <th>Status</th>
                        <th>Created</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for reseller in resellers %}
                    <tr>
                        <td>{{ reseller[0] }}</td>
                        <td>{{ reseller[1] }}</td>
                        <td>{{ reseller[2] or 'Not linked' }}</td>
                        <td>${{ "%.2f"|format(reseller[3]) }}</td>
                        <td>
                            <span class="badge bg-{% if reseller[4] == 'active' %}success{% else %}danger{% endif %}">
                                {{ reseller[4] }}
                            </span>
                        </td>
                        <td>{{ reseller[5][:10] }}</td>
                        <td>
                            <button class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#balanceModal" 
                                    onclick="setBalanceModal({{ reseller[0] }}, '{{ reseller[1] }}')">
                                <i class="fas fa-wallet"></i> Balance
                            </button>
                            <button class="btn btn-sm btn-danger ms-1" 
                                    onclick="confirmDelete('{{ reseller[1] }}', '{{ url_for('delete_reseller', reseller_id=reseller[0]) }}')">
                                <i class="fas fa-trash"></i> Delete
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </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">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 for="username" class="form-label">Username</label>
                        <input type="text" class="form-control" id="username" name="username" required>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">Password</label>
                        <input type="password" class="form-control" id="password" name="password" required>
                    </div>
                    <div class="mb-3">
                        <label for="balance" class="form-label">Initial Balance</label>
                        <input type="number" step="0.01" class="form-control" id="balance" name="balance" value="0">
                    </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 Reseller</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Balance Modal -->
<div class="modal fade" id="balanceModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Update Balance</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('update_balance') }}">
                <div class="modal-body">
                    <input type="hidden" id="reseller_id" name="reseller_id">
                    <p>Reseller: <span id="reseller_name"></span></p>
                    <div class="mb-3">
                        <label class="form-label">Action</label>
                        <div>
                            <input type="radio" class="form-check-input" id="add" name="action" value="add" checked>
                            <label class="form-check-label" for="add">Add Balance</label>
                        </div>
                        <div>
                            <input type="radio" class="form-check-input" id="subtract" name="action" value="subtract">
                            <label class="form-check-label" for="subtract">Subtract Balance</label>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="amount" class="form-label">Amount</label>
                        <input type="number" step="0.01" class="form-control" id="amount" name="amount" 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">Update Balance</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 reseller "<span id="deleteItemName"></span>"?</p>
                <p class="text-warning"><strong>This action cannot be undone!</strong></p>
                <p class="text-info">Note: Any keys sold to this reseller will remain but the reseller reference will be removed.</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 setBalanceModal(resellerId, resellerName) {
    document.getElementById('reseller_id').value = resellerId;
    document.getElementById('reseller_name').textContent = resellerName;
}

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