{% extends 'companies/superadmin/base.html' %}
{% load humanize %}

{% block content %}

<style>
    .gradient-header {
        background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
        color: white;
        border-radius: 16px;
        padding: 24px;
        margin-bottom: 24px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    }
    .search-wrapper {
        position: relative;
        width: 100%;
        max-width: 350px;
    }
    .search-wrapper input {
        padding-left: 45px;
        border-radius: 30px;
        border: 2px solid transparent;
        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
    }
    .search-wrapper input:focus {
        border-color: #2a5298;
        box-shadow: 0 4px 12px rgba(42, 82, 152, 0.2);
    }
    .search-wrapper i {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #888;
    }
    .company-card {
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
        border-radius: 16px;
        border: none;
        overflow: hidden;
    }
    .company-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.08) !important;
    }
    .status-badge {
        padding: 6px 16px;
        border-radius: 20px;
        font-weight: 600;
        letter-spacing: 0.5px;
    }
</style>

<div class="gradient-header d-flex flex-column flex-md-row justify-content-between align-items-center gap-3">
    <h2 class="mb-0 fw-bold text-white"><i class="fas fa-building me-2 opacity-75"></i> Companies</h2>
    <div class="d-flex flex-column flex-md-row align-items-center gap-3 w-100 w-md-auto justify-content-end">
        <div class="d-flex flex-wrap gap-2 w-100">
            <select id="planFilter" class="form-select form-select-lg border-0 shadow-sm" style="border-radius: 30px; max-width: 150px;">
                <option value="">All Plans</option>
            </select>
            <select id="statusFilter" class="form-select form-select-lg border-0 shadow-sm" style="border-radius: 30px; max-width: 150px;">
                <option value="">All Status</option>
                <option value="active">Active</option>
                <option value="suspended">Suspended</option>
            </select>
            <div class="search-wrapper flex-grow-1" style="min-width: 200px;">
                <i class="fas fa-search"></i>
                <input type="text" id="companySearch" class="form-control form-control-lg" placeholder="Search companies...">
            </div>
        </div>
        <a href="{% url 'superadmin_company_create' %}" class="btn btn-light btn-lg shadow-sm text-primary fw-bold text-nowrap rounded-pill px-4">
            <i class="fas fa-plus me-2"></i> New Company
        </a>
    </div>
</div>

<div class="row g-4" id="companyContainer">
    {% for company in companies %}
    <div class="col-12 col-md-6 col-lg-4 company-item" data-status="{% if company.is_active %}active{% else %}suspended{% endif %}" data-plan="{{ company.plan.name|default:'None'|lower }}">
        <div class="card company-card shadow-sm h-100">
            <div class="card-body p-4 position-relative">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div>
                        <h5 class="fw-bold mb-1 text-dark company-name">{{ company.name }}</h5>
                        <p class="text-muted small mb-0"><i class="fas fa-link me-1"></i>/{{ company.slug }}/</p>
                    </div>
                    {% if company.is_active %}
                        <span class="badge bg-success-subtle text-success border border-success-subtle status-badge">Active</span>
                    {% else %}
                        <span class="badge bg-danger-subtle text-danger border border-danger-subtle status-badge">Suspended</span>
                    {% endif %}
                </div>
                
                <div class="d-flex flex-wrap gap-2 mb-4">
                    <div class="bg-light rounded p-2 flex-fill text-center">
                        <small class="text-muted d-block text-uppercase" style="font-size: 0.7rem;">Plan</small>
                        <span class="fw-bold text-dark">{{ company.plan.name|default:"None" }}</span>
                    </div>
                    <div class="bg-light rounded p-2 flex-fill text-center">
                        <small class="text-muted d-block text-uppercase" style="font-size: 0.7rem;">Created</small>
                        <span class="fw-bold text-dark">{{ company.created_at|date:"M d, Y" }}</span>
                    </div>
                </div>

                <a href="{% url 'superadmin_company_detail' company.slug %}" class="btn btn-outline-primary w-100 rounded-pill fw-bold">
                    Manage Workspace
                </a>
            </div>
        </div>
    </div>
    {% empty %}
    <div class="col-12 text-center py-5">
        <div class="bg-white p-5 rounded-4 shadow-sm d-inline-block">
            <i class="fas fa-box-open fa-4x text-muted mb-3 opacity-50"></i>
            <h4 class="fw-bold text-muted">No companies found</h4>
            <p class="text-muted mb-4">You haven't added any client companies yet.</p>
            <a href="{% url 'superadmin_company_create' %}" class="btn btn-primary rounded-pill px-4">Create Your First</a>
        </div>
    </div>
    {% endfor %}
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        let planFilter = document.getElementById('planFilter');
        let items = document.querySelectorAll('.company-item');
        let plans = new Set();
        
        items.forEach(item => {
            let itemPlan = item.getAttribute('data-plan');
            if (itemPlan && itemPlan !== 'none') {
                plans.add(itemPlan);
            }
        });
        
        plans.forEach(plan => {
            let option = document.createElement('option');
            option.value = plan;
            option.textContent = plan.charAt(0).toUpperCase() + plan.slice(1);
            planFilter.appendChild(option);
        });
    });

    function filterCompanies() {
        let searchFilter = document.getElementById('companySearch').value.toLowerCase();
        let statusFilter = document.getElementById('statusFilter').value;
        let planFilterValue = document.getElementById('planFilter').value;
        let items = document.querySelectorAll('.company-item');
        
        items.forEach(item => {
            let slug = item.textContent.toLowerCase();
            let itemStatus = item.getAttribute('data-status');
            let itemPlan = item.getAttribute('data-plan');
            
            let matchesSearch = slug.includes(searchFilter);
            let matchesStatus = statusFilter === "" || itemStatus === statusFilter;
            let matchesPlan = planFilterValue === "" || itemPlan === planFilterValue;
            
            item.style.display = (matchesSearch && matchesStatus && matchesPlan) ? '' : 'none';
        });
    }

    document.getElementById('companySearch').addEventListener('input', filterCompanies);
    document.getElementById('statusFilter').addEventListener('change', filterCompanies);
    document.getElementById('planFilter').addEventListener('change', filterCompanies);
</script>
{% endblock %}