{% extends "base.html" %}

{% block title %}Projects | PMS{% endblock %}

{% block extra_css %}
<style>
    .clients-shell {
        max-width: 1240px;
        margin: 0 auto;
    }

    .clients-panel {
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid #e5e7eb;
        border-radius: 1rem;
        box-shadow: 0 20px 35px rgba(16, 24, 40, 0.09);
        overflow: hidden;
    }

    .clients-head {
        padding: 1.2rem 1.2rem 1rem;
        border-bottom: 1px solid #edf1f7;
    }

    .toolbar-form {
        width: 100%;
        display: grid;
        gap: 0.75rem;
    }

    .toolbar-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.9rem;
        flex-wrap: wrap;
    }

    .toolbar-top-left {
        min-width: 240px;
    }

    .head-title {
        margin: 0;
        font-size: 1.35rem;
        font-weight: 700;
        color: #111827;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .head-title i {
        color: #433185;
    }

    .head-sub {
        margin: 0.3rem 0 0;
        color: #6b7280;
        font-size: 0.9rem;
    }

    .toolbar-top-right {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .search-wrap {
        position: relative;
        width: 280px;
        min-width: 180px;
    }

    .search-wrap i {
        position: absolute;
        left: 0.68rem;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
    }

    .search-input {
        width: 100%;
        height: 2.7rem;
        border: 1px solid #d6dbe6;
        border-radius: 0.62rem;
        padding: 0.5rem 0.72rem 0.5rem 2rem;
        font-size: 0.92rem;
        box-sizing: border-box;
    }

    .search-input:focus,
    .filter-select:focus,
    .per-page:focus {
        outline: none;
        border-color: #c4b5fd;
        box-shadow: 0 0 0 0.18rem rgba(67, 49, 133, 0.14);
    }

    .per-page {
        height: 2.7rem;
        border: 1px solid #d6dbe6;
        border-radius: 0.62rem;
        padding: 0.45rem 0.6rem;
        width: 110px;
        font-size: 0.9rem;
        background: #fff;
    }

    .filter-select {
        height: 2.7rem;
        border: 1px solid #d6dbe6;
        border-radius: 0.62rem;
        padding: 0.45rem 0.6rem;
        font-size: 0.9rem;
        background: #fff;
        flex: 1 1 0;
        min-width: 130px;
    }

    .search-btn,
    .add-btn,
    .clear-btn {
        height: 2.7rem;
        border: 0;
        border-radius: 0.62rem;
        padding: 0.45rem 0.9rem;
        font-size: 0.9rem;
        font-weight: 600;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        white-space: nowrap;
        cursor: pointer;
    }

    .search-btn {
        background: #433185;
        color: #fff;
    }

    .search-btn:hover {
        background: #5a4299;
        color: #fff;
    }

    .add-btn {
        background: #ede9fe;
        border: 1px solid #ddd6fe;
        color: #433185;
    }

    .add-btn:hover {
        background: #ddd6fe;
        color: #433185;
    }

    .clear-btn {
        background: #f8fafc;
        border: 1px solid #dde2ea;
        color: #374151;
    }

    .clear-btn:hover {
        background: #eef2f7;
        color: #111827;
    }

    /* Bottom filter row */
    .toolbar-bottom {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        flex-wrap: wrap;
    }

    .toolbar-bottom .filter-select {
        flex: 1 1 150px;
    }

    /* Reserve space for clear btn always so layout doesn't jump */
    .clear-btn-placeholder {
        height: 2.7rem;
        padding: 0.45rem 0.9rem;
        font-size: 0.9rem;
        visibility: hidden;
        pointer-events: none;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
    }

    .table-wrap {
        overflow-x: auto;
    }

    .clients-table {
        width: 100%;
        border-collapse: collapse;
        min-width: 1200px;
    }

    .clients-table th {
        text-align: left;
        padding: 0.92rem 1.12rem;
        color: #64748b;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-weight: 700;
        background: #f9fafc;
        border-bottom: 1px solid #e5e7eb;
    }

    .clients-table td {
        padding: 1rem 1.12rem;
        border-bottom: 1px solid #edf1f7;
        color: #1f2937;
        font-size: 0.92rem;
        vertical-align: middle;
    }

    .clients-table tr:hover {
        background: #fcfbff;
    }

    .name-link {
        text-decoration: none;
        color: #111827;
        font-weight: 700;
    }

    .name-link:hover {
        color: #433185;
    }

    .status-pill {
        display: inline-block;
        border-radius: 999px;
        padding: 0.22rem 0.56rem;
        font-size: 0.74rem;
        font-weight: 700;
        line-height: 1;
        background: #eef2ff;
        color: #433185;
    }

    .action-btn {
        width: 2.45rem;
        height: 2.45rem;
        border-radius: 0.56rem;
        border: 1px solid #dde2ea;
        background: #fff;
        color: #374151;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .action-btn:hover {
        background: #f8fafc;
        color: #111827;
    }

    .actions-wrap {
        display: inline-flex;
        align-items: center;
        gap: 0.42rem;
        flex-wrap: nowrap;
    }

    .empty-state {
        color: #6b7280;
        font-weight: 500;
    }

    .pagination-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.7rem;
        padding: 0.9rem 1.2rem;
        background: #fff;
    }

    .pager-link {
        text-decoration: none;
        color: #433185;
        font-size: 0.88rem;
        font-weight: 700;
        border-radius: 0.55rem;
        border: 1px solid #ddd6fe;
        padding: 0.45rem 0.76rem;
        background: #f5f3ff;
    }

    .pager-link:hover {
        background: #ede9fe;
    }

    .pager-meta {
        color: #6b7280;
        font-size: 0.89rem;
        font-weight: 600;
    }

    .pager-numbers {
        display: inline-flex;
        align-items: center;
        gap: 0.38rem;
        flex-wrap: wrap;
    }

    .pager-number {
        min-width: 2rem;
        height: 2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        border-radius: 0.5rem;
        border: 1px solid #dde2ea;
        background: #fff;
        color: #374151;
        font-size: 0.84rem;
        font-weight: 700;
        padding: 0 0.45rem;
    }

    .pager-number:hover {
        background: #f8fafc;
        color: #111827;
    }

    .pager-number.active {
        background: #433185;
        color: #fff;
        border-color: #433185;
    }

    @media (max-width: 900px) {
        .toolbar-top-right {
            width: 100%;
        }

        .search-wrap {
            width: 100%;
            flex: 1 1 auto;
        }
    }

    @media (max-width: 640px) {
        .toolbar-top {
            flex-direction: column;
            align-items: stretch;
        }

        .per-page,
        .search-btn,
        .add-btn {
            width: 100%;
        }

        .toolbar-bottom .filter-select {
            flex: 1 1 100%;
        }
    }
</style>
{% endblock %}

{% block content %}
<section class="clients-shell">
    <div class="clients-panel">
        <header class="clients-head">
            <form method="get" class="toolbar-form" id="projectFilterForm">
                <div class="toolbar-top">
                    <div class="toolbar-top-left">
                        <h1 class="head-title"><i class="bi bi-kanban"></i> All Projects</h1>
                        <p class="head-sub">Manage projects, status and industry distribution.</p>
                    </div>
                    <div class="toolbar-top-right">
                        <div class="search-wrap">
                            <i class="bi bi-search"></i>
                            <input
                                type="text"
                                name="q"
                                id="projectSearchInput"
                                class="search-input"
                                placeholder="Search by project or client name"
                                value="{{ active_filters.q }}"
                            >
                        </div>

                        <select name="per_page" id="perPageSelect" class="per-page">
                            {% for size in per_page_options %}
                                <option value="{{ size }}" {% if per_page == size %}selected{% endif %}>
                                    {{ size }} / page
                                </option>
                            {% endfor %}
                        </select>

                        <button type="submit" class="search-btn">Search</button>
                        <a href="{% url 'projects:project_create' %}" class="add-btn">
                            <i class="bi bi-plus-lg"></i> Add Project
                        </a>
                    </div>
                </div>

                <div class="toolbar-bottom">
                    <select name="industry" id="industrySelect" class="filter-select">
                        <option value="">Industry</option>
                        <option value="healthcare"  {% if active_filters.industry == "healthcare"  %}selected{% endif %}>Healthcare</option>
                        <option value="education"   {% if active_filters.industry == "education"   %}selected{% endif %}>Education</option>
                        <option value="ecommerce"   {% if active_filters.industry == "ecommerce"   %}selected{% endif %}>E-commerce</option>
                        <option value="finance"     {% if active_filters.industry == "finance"     %}selected{% endif %}>Finance</option>
                        <option value="real_estate" {% if active_filters.industry == "real_estate" %}selected{% endif %}>Real Estate</option>
                        <option value="hospitality" {% if active_filters.industry == "hospitality" %}selected{% endif %}>Hospitality</option>
                        <option value="logistics"   {% if active_filters.industry == "logistics"   %}selected{% endif %}>Logistics</option>
                        <option value="travel"      {% if active_filters.industry == "travel"      %}selected{% endif %}>Travel &amp; Tourism</option>
                        <option value="sports"      {% if active_filters.industry == "sports"      %}selected{% endif %}>Sports</option>
                        <option value="lifestyle"   {% if active_filters.industry == "lifestyle"   %}selected{% endif %}>Lifestyle</option>
                        <option value="retail"      {% if active_filters.industry == "retail"      %}selected{% endif %}>Retail</option>
                        <option value="dating"      {% if active_filters.industry == "dating"      %}selected{% endif %}>Dating</option>
                        <option value="saas"        {% if active_filters.industry == "saas"        %}selected{% endif %}>SaaS</option>
                        <option value="gaming"      {% if active_filters.industry == "gaming"      %}selected{% endif %}>Gaming</option>
                        <option value="social"      {% if active_filters.industry == "social"      %}selected{% endif %}>Social</option>
                        <option value="automotive"  {% if active_filters.industry == "automotive"  %}selected{% endif %}>Automotive</option>
                        <option value="marine"      {% if active_filters.industry == "marine"      %}selected{% endif %}>Marine</option>
                        <option value="other"       {% if active_filters.industry == "other"       %}selected{% endif %}>Other</option>
                    </select>

                    <select name="model_type" id="modelTypeSelect" class="filter-select">
                        <option value="">Type of Model</option>
                        <option value="fixed"    {% if active_filters.model_type == "fixed"    %}selected{% endif %}>Fixed Cost</option>
                        <option value="tm"       {% if active_filters.model_type == "tm"       %}selected{% endif %}>T&amp;M</option>
                        <option value="team_aug" {% if active_filters.model_type == "team_aug" %}selected{% endif %}>Team Augmentation</option>
                    </select>

                    <select name="project_type" id="projectTypeSelect" class="filter-select">
                        <option value="">Type of Project</option>
                        <option value="new"         {% if active_filters.project_type == "new"         %}selected{% endif %}>New</option>
                        <option value="bdp"         {% if active_filters.project_type == "bdp"         %}selected{% endif %}>BDP</option>
                        <option value="maintenance" {% if active_filters.project_type == "maintenance" %}selected{% endif %}>Maintenance Project</option>
                        <option value="support"     {% if active_filters.project_type == "support"     %}selected{% endif %}>Support &amp; Maintenance</option>
                        <option value="marketing"   {% if active_filters.project_type == "marketing"   %}selected{% endif %}>Marketing</option>
                    </select>

                    <select name="status" id="statusSelect" class="filter-select">
                        <option value="">Project Status</option>
                        <option value="not_started" {% if active_filters.status == "not_started" %}selected{% endif %}>Not Started</option>
                        <option value="ongoing"     {% if active_filters.status == "ongoing"     %}selected{% endif %}>Ongoing</option>
                        <option value="completed"   {% if active_filters.status == "completed"   %}selected{% endif %}>Completed</option>
                        <option value="on_hold"     {% if active_filters.status == "on_hold"     %}selected{% endif %}>On Hold</option>
                        <option value="cancelled"   {% if active_filters.status == "cancelled"   %}selected{% endif %}>Cancelled</option>
                    </select>

                    {# Always render the button area at fixed width to prevent layout shift #}
                    {% if active_filters.q or active_filters.industry or active_filters.model_type or active_filters.project_type or active_filters.status %}
                        <a href="{% url 'projects:project_list' %}" class="clear-btn">
                            <i class="bi bi-x-circle"></i> Remove Filters
                        </a>
                    {% else %}
                        <span class="clear-btn-placeholder" aria-hidden="true">
                            <i class="bi bi-x-circle"></i> Remove Filters
                        </span>
                    {% endif %}
                </div>
            </form>
        </header>

        <div class="table-wrap">
            <table class="clients-table">
                <thead>
                    <tr>
                        <th>Project Name</th>
                        <th>Client Name</th>
                        <th>Type of Model</th>
                        <th>Type of Project</th>
                        <th>Industry</th>
                        <th>Project Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for project in projects %}
                        <tr>
                            <td>
                                <a href="{% url 'projects:project_detail' project.id %}" class="name-link">
                                    {{ project.name }}
                                </a>
                            </td>
                            <td>{{ project.clients.names.first.name|default:"-" }}</td>
                            <td>{{ project.get_model_type_display }}</td>
                            <td>{{ project.get_project_type_display }}</td>
                            <td>{{ project.get_industry_display }}</td>
                            <td>
                                <span class="status-pill">{{ project.get_status_display }}</span>
                            </td>
                            <td>
                                <div class="actions-wrap">
                                    <a href="{% url 'projects:project_detail' project.id %}" class="action-btn" title="View details">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                    <a href="{% url 'projects:project_update' project.id %}" class="action-btn" title="Edit project">
                                        <i class="bi bi-pencil-square"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    {% empty %}
                        <tr>
                            <td colspan="7" class="empty-state">No projects found.</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <footer class="pagination-bar">
            <div>
                {% if page_obj.has_previous %}
                    <a class="pager-link" href="?page={{ page_obj.previous_page_number }}{% if query_string %}&{{ query_string }}{% endif %}">
                        <i class="bi bi-arrow-left"></i> Previous
                    </a>
                {% endif %}
            </div>
            <div class="pager-numbers">
                {% for num in page_obj.paginator.page_range %}
                    {% if num == page_obj.number %}
                        <span class="pager-number active">{{ num }}</span>
                    {% elif num >= page_obj.number|add:"-2" and num <= page_obj.number|add:"2" %}
                        <a class="pager-number" href="?page={{ num }}{% if query_string %}&{{ query_string }}{% endif %}">{{ num }}</a>
                    {% elif num == 1 or num == page_obj.paginator.num_pages %}
                        <a class="pager-number" href="?page={{ num }}{% if query_string %}&{{ query_string }}{% endif %}">{{ num }}</a>
                    {% elif num == page_obj.number|add:"-3" or num == page_obj.number|add:"3" %}
                        <span class="pager-meta">...</span>
                    {% endif %}
                {% endfor %}
            </div>
            <div>
                {% if page_obj.has_next %}
                    <a class="pager-link" href="?page={{ page_obj.next_page_number }}{% if query_string %}&{{ query_string }}{% endif %}">
                        Next <i class="bi bi-arrow-right"></i>
                    </a>
                {% endif %}
            </div>
        </footer>
    </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
    (function () {
        const form = document.getElementById("projectFilterForm");
        if (!form) return;

        const projectSearchInput = document.getElementById("projectSearchInput");
        const industrySelect     = document.getElementById("industrySelect");
        const modelTypeSelect    = document.getElementById("modelTypeSelect");
        const projectTypeSelect  = document.getElementById("projectTypeSelect");
        const statusSelect       = document.getElementById("statusSelect");
        const perPageSelect      = document.getElementById("perPageSelect");

        function buildQuery() {
            const query = new URLSearchParams();
            if (projectSearchInput && projectSearchInput.value.trim())
                query.set("q", projectSearchInput.value.trim());
            if (industrySelect    && industrySelect.value)    query.set("industry",      industrySelect.value);
            if (modelTypeSelect   && modelTypeSelect.value)   query.set("model_type",    modelTypeSelect.value);
            if (projectTypeSelect && projectTypeSelect.value) query.set("project_type",  projectTypeSelect.value);
            if (statusSelect      && statusSelect.value)      query.set("status",        statusSelect.value);
            if (perPageSelect     && perPageSelect.value)     query.set("per_page",      perPageSelect.value);
            return query;
        }

        function navigate() {
            const query = buildQuery();
            const qs = query.toString();
            window.location.href = qs
                ? `${window.location.pathname}?${qs}`
                : window.location.pathname;
        }

        form.addEventListener("submit", function (e) {
            e.preventDefault();
            navigate();
        });

        [industrySelect, modelTypeSelect, projectTypeSelect, statusSelect, perPageSelect].forEach(function (sel) {
            if (sel) sel.addEventListener("change", navigate);
        });
    })();
</script>
{% endblock %}