{% extends "admin/layout.html" %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>Companies</h2>
</div>

<form class="row g-3 mb-4">
    <div class="col-md-6">
        <input type="text" name="search" class="form-control" placeholder="Search by name..." value="{{ search }}">
    </div>
    <div class="col-md-4">
        <select name="category" class="form-select">
            <option value="">All Categories</option>
            {% for cat in categories %}
            <option value="{{ cat }}" {{ 'selected' if request.args.get('category') == cat }}>{{ cat }}</option>
            {% endfor %}
        </select>
    </div>
    <div class="col-md-2">
        <select name="status" class="form-select">
            <option value="active" {{ 'selected' if current_status == 'active' }}>Active</option>
            <option value="hidden" {{ 'selected' if current_status == 'hidden' }}>Hidden</option>
            <option value="all" {{ 'selected' if current_status == 'all' }}>All Status</option>
        </select>
    </div>
    <div class="col-md-2">
        <button type="submit" class="btn btn-primary w-100">Filter</button>
    </div>
</form>

<div class="table-responsive">
    <table class="table table-striped bg-white shadow-sm rounded">
        <thead>
            <tr>
                <th>Name</th>
                <th>Category</th>
                <th>City</th>
                <th>Status</th>
                <th>Badge</th>
                <th>Hiring</th>
                <th>Paying</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for company in companies %}
            <tr class="{{ 'opacity-50' if company.status == 'hidden' }}">
                <td>
                    {{ company.business_name }}
                    {% if company.status == 'hidden' %}
                        <small class="d-block text-danger">(Hidden)</small>
                    {% endif %}
                </td>
                <td>{{ company.category_slug }}</td>
                <td>{{ company.city_slug }}</td>
                <td>
                    {% if company.status == 'active' or company.status is none %}
                        <span class="badge bg-success">Active</span>
                    {% else %}
                        <span class="badge bg-secondary">Hidden</span>
                    {% endif %}
                </td>
                <td>
                    {% if company.badge_level == 'Top Rated' %}
                        <span class="badge bg-danger">Top Rated</span>
                    {% elif company.badge_level == 'Pro' %}
                        <span class="badge bg-primary">Pro</span>
                    {% elif company.badge_level == 'Verified' %}
                        <span class="badge bg-info">Verified</span>
                    {% else %}
                        <span class="badge bg-light text-dark">Standard</span>
                    {% endif %}
                </td>
                <td>
                    {% if company.is_hiring %}
                        <span class="badge bg-primary">HIRING</span>
                    {% else %}
                        <span class="text-muted">-</span>
                    {% endif %}
                </td>
                <td>
                    {% if company.is_paying %}
                        <span class="badge bg-warning text-dark">YES</span>
                    {% else %}
                        <span class="text-muted">No</span>
                    {% endif %}
                </td>
                <td>
                    <div class="btn-group">
                        <a href="{{ url_for('edit_company', id=company.id) }}" class="btn btn-sm btn-outline-primary">Edit</a>
                        <a href="{{ url_for('toggle_status', id=company.id) }}" class="btn btn-sm {{ 'btn-outline-danger' if company.status == 'active' or company.status is none else 'btn-outline-success' }}">
                            {{ 'Hide' if company.status == 'active' or company.status is none else 'Show' }}
                        </a>
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}