{% extends 'layouts/base.html' %}

{% block content %}

<div class="page-head">
    <div>
        <h1>My Team</h1>
        <p class="muted">Assigned leads, lead status split and callbacks for you and everyone reporting to you.</p>
    </div>
    <div class="action-buttons">
        <a class="btn" href="{{ url_for('leads.index', scope='group') }}"><i data-lucide="contact-round" aria-hidden="true"></i>Team Leads</a>
        <a class="btn btn-sm" href="{{ url_for('sales.index') }}">Team Sales</a>
    </div>
</div>

{% if not team_rows %}
<div class="panel">
    <p class="muted">No team members are mapped to you yet. Open each employee record and set its <strong>Manager</strong> field to your name.</p>
</div>
{% else %}

<div class="kpi-grid">
    <div class="kpi-card">
        <div class="kpi-icon"><i data-lucide="users" aria-hidden="true"></i></div>
        <span>Team Members</span><strong>{{ direct_report_count }}</strong>
    </div>
    <div class="kpi-card">
        <div class="kpi-icon"><i data-lucide="target" aria-hidden="true"></i></div>
        <span>Total Assigned Leads</span><strong>{{ team_totals.assigned_leads }}</strong>
    </div>
    <div class="kpi-card">
        <div class="kpi-icon"><i data-lucide="phone-call" aria-hidden="true"></i></div>
        <span>Pending Callbacks</span><strong>{{ callback_totals.pending }}</strong>
    </div>
    <div class="kpi-card">
        <div class="kpi-icon"><i data-lucide="alarm-clock" aria-hidden="true"></i></div>
        <span>Overdue Callbacks</span><strong>{{ callback_totals.overdue }}</strong>
    </div>
    <div class="kpi-card">
        <div class="kpi-icon"><i data-lucide="indian-rupee" aria-hidden="true"></i></div>
        <span>Group Sales (Month)</span><strong>₹{{ '%.2f'|format(team_totals.approved_sales) }}</strong>
    </div>
</div>

<div class="grid-2">
    <div class="visual-panel">
        <h3>Group Leads by Status</h3>
        <div class="vertical-bar-chart">
            {% set status_max = status_chart|map(attribute='value')|max if status_chart else 1 %}
            {% for item in status_chart %}
            <div class="vbar-col">
                <div class="vbar-value">{{ item.value }}</div>
                <div class="vbar-track">
                    <div class="vbar-fill" style="height: {{ (item.value / status_max * 100) if status_max else 0 }}%"></div>
                </div>
                <div class="vbar-label">{{ item.label }}</div>
            </div>
            {% else %}
            <p class="muted">No leads assigned to your team yet.</p>
            {% endfor %}
        </div>
    </div>

    <div class="visual-panel">
        <h3>Assigned Leads per Member</h3>
        <div class="vertical-bar-chart">
            {% set member_max = member_chart|map(attribute='value')|max if member_chart else 1 %}
            {% for item in member_chart %}
            <div class="vbar-col">
                <div class="vbar-value">{{ item.value }}</div>
                <div class="vbar-track">
                    <div class="vbar-fill" style="height: {{ (item.value / member_max * 100) if member_max else 0 }}%"></div>
                </div>
                <div class="vbar-label">{{ item.label }}</div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

<section class="panel">
    <h2>Assigned Leads by Status</h2>
    <div class="table-wrap">
        <table class="modern-table">
            <thead>
                <tr>
                    <th>Team Member</th>
                    <th>Assigned Leads</th>
                    {% for status in team_statuses %}<th>{{ status.replace('_', ' ').title() }}</th>{% endfor %}
                    <th>Leads</th>
                </tr>
            </thead>
            <tbody>
                {% for member in team_rows %}
                <tr>
                    <td><strong>{{ member.name }}</strong>{% if member.is_manager %} <span class="badge">You</span>{% endif %}</td>
                    <td>{{ member.assigned_leads }}</td>
                    {% for status in team_statuses %}
                    {% set count = member.status_counts.get(status, 0) %}
                    <td>{% if count %}<a href="{{ url_for('leads.index', assigned_to=member.id, status=status) if member.is_manager else url_for('leads.index', scope='group', assigned_to=member.id, status=status) }}">{{ count }}</a>{% else %}0{% endif %}</td>
                    {% endfor %}
                    <td><a class="btn btn-sm" href="{{ url_for('leads.index', assigned_to=member.id) if member.is_manager else url_for('leads.index', scope='group', assigned_to=member.id) }}">View</a></td>
                </tr>
                {% endfor %}
            </tbody>
            <tfoot>
                <tr>
                    <th>Group Total</th>
                    <th>{{ team_totals.assigned_leads }}</th>
                    {% for status in team_statuses %}<th>{{ team_totals.status_counts.get(status, 0) }}</th>{% endfor %}
                    <th><a class="btn btn-sm" href="{{ url_for('leads.index', scope='group') }}">All</a></th>
                </tr>
            </tfoot>
        </table>
    </div>
    <p class="muted">Group Total includes your own figures. The Group Leads page lists your team members' leads only — your own leads stay under My Leads.</p>
</section>

<section class="panel">
    <h2>Callback Workload</h2>
    <div class="table-wrap">
        <table class="modern-table">
            <thead>
                <tr>
                    <th>Team Member</th>
                    <th>Pending</th>
                    <th>Due Today</th>
                    <th>Overdue</th>
                    <th>Completed</th>
                </tr>
            </thead>
            <tbody>
                {% for member in team_rows %}
                <tr>
                    <td><strong>{{ member.name }}</strong>{% if member.is_manager %} <span class="badge">You</span>{% endif %}</td>
                    <td>{{ member.callbacks.pending }}</td>
                    <td>{{ member.callbacks.due_today }}</td>
                    <td>{% if member.callbacks.overdue %}<span class="badge badge-danger">{{ member.callbacks.overdue }}</span>{% else %}0{% endif %}</td>
                    <td>{{ member.callbacks.completed }}</td>
                </tr>
                {% endfor %}
            </tbody>
            <tfoot>
                <tr>
                    <th>Group Total</th>
                    <th>{{ callback_totals.pending }}</th>
                    <th>{{ callback_totals.due_today }}</th>
                    <th>{{ callback_totals.overdue }}</th>
                    <th>{{ callback_totals.completed }}</th>
                </tr>
            </tfoot>
        </table>
    </div>

    <h3>Next Pending Callbacks</h3>
    <div class="table-wrap">
        <table class="modern-table">
            <thead>
                <tr>
                    <th>Due</th>
                    <th>Lead</th>
                    <th>Phone</th>
                    <th>Owner</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                {% for callback in upcoming_callbacks %}
                <tr>
                    <td>{{ callback.due_at }}</td>
                    <td><a href="{{ url_for('leads.detail', lead_id=callback.lead_id) }}">{{ callback.customer_name }}</a></td>
                    <td>{{ callback.phone or '-' }}</td>
                    <td>{{ callback.assigned_name }}</td>
                    <td>{{ callback.description or '-' }}</td>
                </tr>
                {% else %}
                <tr><td colspan="5" style="text-align:center;">No pending callbacks for your team.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</section>

<section class="panel">
    <h2>Sales &amp; Incentive This Month</h2>
    <div class="table-wrap">
        <table class="modern-table">
            <thead>
                <tr>
                    <th>Team Member</th>
                    <th>Sales Orders</th>
                    <th>Approved Sales</th>
                    <th>Incentive %</th>
                    <th>Incentive Amount</th>
                </tr>
            </thead>
            <tbody>
                {% for member in team_rows %}
                <tr>
                    <td><strong>{{ member.name }}</strong>{% if member.is_manager %} <span class="badge">You</span>{% endif %}</td>
                    <td>{{ member.sale_count }}</td>
                    <td>₹{{ '%.2f'|format(member.approved_sales) }}</td>
                    <td>{{ member.percentage }}%</td>
                    <td>₹{{ '%.2f'|format(member.incentive) }}</td>
                </tr>
                {% endfor %}
            </tbody>
            <tfoot>
                <tr>
                    <th>Group Total</th>
                    <th>{{ team_totals.sale_count }}</th>
                    <th>₹{{ '%.2f'|format(team_totals.approved_sales) }}</th>
                    <th>-</th>
                    <th>₹{{ '%.2f'|format(team_totals.incentive) }}</th>
                </tr>
            </tfoot>
        </table>
    </div>
</section>
{% endif %}

{% endblock %}