{% extends 'agent/_layout.html.twig' %}

{% block title %}Casino Commissions Guide{% endblock %}

{% block agent_content %}

<div class="d-flex align-items-start justify-content-between flex-wrap gap-3 mb-4">
    <div>
        <h1 class="fw-bold mb-0 text-white" data-testid="commission-guide-title">
            Casino Commissions Guide
        </h1>
        <p class="mb-0 mt-1" style="font-size:13px; color:#afafaf;">
            Everything you need to know about how commissions work.
        </p>
    </div>
</div>

{# ── Your Commission Rate ── #}
<div class="card-body--compact dark-card mb-4">
    <div class="row align-items-center g-3">
        <div class="col-12 col-md-6">
            <p class="stat-label--sm mb-1">Your Total Commission Rate</p>
            <p class="stat-value--lg text-white mb-0" style="font-size:28px;">
                {{ effectiveRate|number_format(2) }}%
            </p>
            {% if overrideRate is not null %}
                <p class="mb-0 mt-1" style="font-size:12px; color:#60a5fa;">
                    Per-master-agent override · Global rate is {{ globalCommissionRate|number_format(2) }}%
                </p>
            {% else %}
                <p class="mb-0 mt-1" style="font-size:12px; color:#afafaf;">
                    Global commission rate{% if globalCommissionRate != effectiveRate %} (set by admin){% endif %}
                </p>
            {% endif %}
        </div>
        <div class="col-12 col-md-6" style="border-left:1px solid #2a2a2a; padding-left:24px;">
            <p class="stat-label--sm mb-1">This is the total commission earned from every bet placed by your referred players.</p>
            <p class="mb-0" style="font-size:13px; color:#afafaf;">
                You can set how much of this goes to your Agents. The rest stays with you.
            </p>
        </div>
    </div>
</div>

{# ── How It Works ── #}
<h2 class="fw-bold text-white mb-3" style="font-size:16px;">How It Works</h2>

<div class="row g-3 mb-4">
    <div class="col-12 col-md-4">
        <div class="card-body--compact dark-card h-100">
            <div class="d-flex align-items-center gap-2 mb-2">
                <span style="display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:#ffffff; color:#000000; font-size:13px; font-weight:700;">1</span>
                <span class="fw-semibold text-white" style="font-size:14px;">Player places a bet</span>
            </div>
            <p class="mb-0" style="font-size:13px; color:#afafaf;">
                When a player you referred bets on a game, the system calculates a commission based on the total bet amount.
            </p>
        </div>
    </div>
    <div class="col-12 col-md-4">
        <div class="card-body--compact dark-card h-100">
            <div class="d-flex align-items-center gap-2 mb-2">
                <span style="display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:#ffffff; color:#000000; font-size:13px; font-weight:700;">2</span>
                <span class="fw-semibold text-white" style="font-size:14px;">Total commission is computed</span>
            </div>
            <p class="mb-0" style="font-size:13px; color:#afafaf;">
                Total Commission = Bet Amount × <strong style="color:#ffffff;">{{ effectiveRate|number_format(2) }}%</strong>
            </p>
        </div>
    </div>
    <div class="col-12 col-md-4">
        <div class="card-body--compact dark-card h-100">
            <div class="d-flex align-items-center gap-2 mb-2">
                <span style="display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:#ffffff; color:#000000; font-size:13px; font-weight:700;">3</span>
                <span class="fw-semibold text-white" style="font-size:14px;">Commission is split (if needed)</span>
            </div>
            <p class="mb-0" style="font-size:13px; color:#afafaf;">
                If the referrer is one of your Agents, the total commission is split between you and your Agent based on the Agent's commission rate.
            </p>
        </div>
    </div>
</div>

{# ── Flow Diagram ── #}
<div class="card-body--compact dark-card mb-4">
    <p class="text-white fw-semibold mb-3" style="font-size:14px;">Commission Flow</p>
    <div style="font-size:13px; line-height:1.8;">
        <div class="mb-2" style="padding:10px 16px; background:#0a0a0a; border-radius:8px; border:1px solid #2a2a2a; display:inline-block;">
            <span style="color:#60a5fa;">Total Commission</span>
            <span style="color:#ffffff;"> = </span>
            <span style="color:#ffffff;">Bet Amount</span>
            <span style="color:#afafaf;"> × </span>
            <span style="color:#ffffff;">{{ effectiveRate|number_format(2) }}%</span>
        </div>

        <div class="mt-3" style="padding:12px 16px; background:#0a0a0a; border-radius:8px; border:1px solid #2a2a2a;">
            <div class="mb-2" style="color:#ffffff; font-weight:600;">Was the referrer an Agent (with a Master Agent)?</div>
            <div class="row g-2">
                <div class="col-12 col-md-6" style="border-right:1px solid #2a2a2a;">
                    <div style="color:#22c55e; font-weight:600;">✅ Yes — Split the commission</div>
                    <div style="color:#afafaf; padding-left:12px;">
                        Agent gets: Total Commission × <strong style="color:#ffffff;">(Agent's Rate ÷ 100)</strong>
                    </div>
                    <div style="color:#afafaf; padding-left:12px;">
                        You get: Total Commission <span style="color:#afafaf;">−</span> Agent's Share
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div style="color:#22c55e; font-weight:600;">✅ No — Full commission goes to the referrer</div>
                    <div style="color:#afafaf; padding-left:12px;">
                        If the referrer is you (a Master Agent) or a regular user, they keep <strong style="color:#ffffff;">100%</strong> of the total commission.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{# ── The Common Misconception ── #}
<h2 class="fw-bold text-white mb-3" style="font-size:16px;">The Key Concept to Understand</h2>

<div class="card-body--compact dark-card mb-4" style="border-left:3px solid #facc15;">
    <p class="fw-semibold text-white mb-2" style="font-size:14px;">
        The Agent's Commission Rate is a percentage of the total commission, not of the bet amount.
    </p>
    <p class="mb-3" style="font-size:13px; color:#afafaf;">
        This is the most common misunderstanding. Many agents think: <em>"If the total commission is 3.5% and my Master set my rate to 2%, then I should get 2% of the bet."</em>
    </p>
    <p class="mb-3" style="font-size:13px; color:#afafaf;">
        <strong style="color:#ffffff;">That is incorrect.</strong> When you set an Agent's commission rate to <strong style="color:#ffffff;">2%</strong>, it means:
    </p>
    <div style="padding:12px 16px; background:#0a0a0a; border-radius:8px; border:1px solid #2a2a2a;">
        <div style="font-size:13px; color:#afafaf; line-height:2;">
            <div>
                Agent gets: <span style="color:#ffffff;">2%</span> of the total commission
                <span style="color:#6b7280;">(= 0.07% of the bet if total commission is 3.5%)</span>
            </div>
            <div>
                You (Master) get: <span style="color:#ffffff;">98%</span> of the total commission
                <span style="color:#6b7280;">(= 3.43% of the bet)</span>
            </div>
        </div>
    </div>
</div>

{# ── Examples Table ── #}
<h2 class="fw-bold text-white mb-3" style="font-size:16px;">Example Scenarios</h2>

<div class="card table-card mb-4">
    <div class="table-scroll">
        <table class="data-table">
            <thead>
                <tr class="thead-row--light">
                    <th class="th-white">Scenario</th>
                    <th class="th-white">Agent's Rate</th>
                    <th class="th-white">Bet</th>
                    <th class="th-white">Total Comm.</th>
                    <th class="th-white">Agent Gets</th>
                    <th class="th-white">You Get</th>
                </tr>
            </thead>
            <tbody>
                {% set bet = 100 %}
                {% set rate = effectiveRate %}
                {% set totalComm = (bet * rate / 100)|round(2) %}
                <tr class="table-row">
                    <td class="td-cell fw-semibold">50/50 Split</td>
                    <td class="td-cell"><span style="color:#60a5fa; font-weight:600;">50%</span></td>
                    <td class="td-cell td-cell--muted">₱{{ bet|number_format(2) }}</td>
                    <td class="td-cell fw-semibold">₱{{ totalComm|number_format(2) }}</td>
                    {% set agentShare = (totalComm * 50 / 100)|round(2) %}
                    {% set masterShare = (totalComm - agentShare)|round(2) %}
                    <td class="td-cell" style="color:#22c55e;">₱{{ agentShare|number_format(2) }}</td>
                    <td class="td-cell" style="color:#facc15;">₱{{ masterShare|number_format(2) }}</td>
                </tr>
                <tr class="table-row">
                    <td class="td-cell fw-semibold">Agent gets 25%</td>
                    <td class="td-cell"><span style="color:#60a5fa; font-weight:600;">25%</span></td>
                    <td class="td-cell td-cell--muted">₱{{ bet|number_format(2) }}</td>
                    <td class="td-cell fw-semibold">₱{{ totalComm|number_format(2) }}</td>
                    {% set agentShare = (totalComm * 25 / 100)|round(2) %}
                    {% set masterShare = (totalComm - agentShare)|round(2) %}
                    <td class="td-cell" style="color:#22c55e;">₱{{ agentShare|number_format(2) }}</td>
                    <td class="td-cell" style="color:#facc15;">₱{{ masterShare|number_format(2) }}</td>
                </tr>
                <tr class="table-row">
                    <td class="td-cell fw-semibold">Agent gets 75%</td>
                    <td class="td-cell"><span style="color:#60a5fa; font-weight:600;">75%</span></td>
                    <td class="td-cell td-cell--muted">₱{{ bet|number_format(2) }}</td>
                    <td class="td-cell fw-semibold">₱{{ totalComm|number_format(2) }}</td>
                    {% set agentShare = (totalComm * 75 / 100)|round(2) %}
                    {% set masterShare = (totalComm - agentShare)|round(2) %}
                    <td class="td-cell" style="color:#22c55e;">₱{{ agentShare|number_format(2) }}</td>
                    <td class="td-cell" style="color:#facc15;">₱{{ masterShare|number_format(2) }}</td>
                </tr>
                <tr class="table-row">
                    <td class="td-cell fw-semibold">Agent gets 100%</td>
                    <td class="td-cell"><span style="color:#60a5fa; font-weight:600;">100%</span></td>
                    <td class="td-cell td-cell--muted">₱{{ bet|number_format(2) }}</td>
                    <td class="td-cell fw-semibold">₱{{ totalComm|number_format(2) }}</td>
                    {% set agentShare = totalComm %}
                    {% set masterShare = 0 %}
                    <td class="td-cell" style="color:#22c55e;">₱{{ agentShare|number_format(2) }}</td>
                    <td class="td-cell" style="color:#facc15;">₱{{ masterShare|number_format(2) }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

{# ── Formula Explanation ── #}
<h2 class="fw-bold text-white mb-3" style="font-size:16px;">Formula Reference</h2>

<div class="row g-3 mb-4">
    <div class="col-12 col-md-6">
        <div class="card-body--compact dark-card h-100">
            <p class="fw-semibold text-white mb-2" style="font-size:14px;">
                Total Commission
            </p>
            <div class="mb-2" style="padding:10px 14px; background:#0a0a0a; border-radius:6px; font-size:13px; font-family:monospace; color:#60a5fa;">
                Bet Amount × (Commission Rate ÷ 100)
            </div>
            <p class="mb-0" style="font-size:12px; color:#6b7280;">
                The Commission Rate is either your per-master-agent override ({{ overrideRate is not null ? overrideRate|number_format(2) : 'not set' }}%) or the global rate ({{ globalCommissionRate|number_format(2) }}%).
            </p>
        </div>
    </div>
    <div class="col-12 col-md-6">
        <div class="card-body--compact dark-card h-100">
            <p class="fw-semibold text-white mb-2" style="font-size:14px;">
                Agent's Share
            </p>
            <div class="mb-2" style="padding:10px 14px; background:#0a0a0a; border-radius:6px; font-size:13px; font-family:monospace; color:#22c55e;">
                Total Commission × (Agent's Rate ÷ 100)
            </div>
            <div class="mb-2" style="padding:10px 14px; background:#0a0a0a; border-radius:6px; font-size:13px; font-family:monospace; color:#facc15;">
                Your Share = Total Commission − Agent's Share
            </div>
            <p class="mb-0" style="font-size:12px; color:#6b7280;">
                You control the Agent's Rate (0–100%) when you promote a player or edit their commission.
            </p>
        </div>
    </div>
</div>

{# ── Tips ── #}
<div class="card-body--compact dark-card mb-4" style="border-left:3px solid #60a5fa;">
    <p class="fw-semibold text-white mb-2" style="font-size:14px;">💡 Tips for Master Agents</p>
    <ul class="mb-0" style="font-size:13px; color:#afafaf; line-height:2.2; padding-left:16px;">
        <li>A <strong style="color:#ffffff;">0%</strong> Agent rate means the Agent gets nothing — all commission stays with you.</li>
        <li>A <strong style="color:#ffffff;">50%</strong> Agent rate means a 50/50 split of the total commission.</li>
        <li>A <strong style="color:#ffffff;">100%</strong> Agent rate means the Agent gets all the commission — applicable if you want to give everything to your downline.</li>
        <li>You can change an Agent's rate anytime from the <a href="{{ path('app_agent_agents') }}" style="color:#60a5fa;">Agents page</a>.</li>
        <li>Your Agents see their own commission rate on their dashboard — make sure you communicate clearly how it works.</li>
    </ul>
</div>

{% endblock %}