<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <!-- Add the "Affiliate" home card next to the existing "Job Widget" one. -->
    <template id="affiliate_portal_home"
              inherit_id="portal.portal_my_home" priority="35">
        <div id="portal_common_category" position="inside">
            <t t-if="request.env.user.partner_id.role_user_type == 'affiliate'">
                <t t-call="portal.portal_docs_entry">
                    <t t-set="icon" t-value="'/account/static/src/img/Bill.svg'"/>
                    <t t-set="title">Affiliate Dashboard</t>
                    <t t-set="url" t-value="'/my/affiliate'"/>
                    <t t-set="text">Commissions, payouts, performance.</t>
                    <t t-set="placeholder_count" t-value="'affiliate_open_count'"/>
                    <t t-set="show_count" t-value="False"/>
                </t>
            </t>
        </div>
    </template>

    <!-- Breadcrumbs for the affiliate pages. -->
    <template id="affiliate_breadcrumbs"
              inherit_id="portal.portal_breadcrumbs" priority="40">
        <xpath expr="//ol[hasclass('o_portal_submenu')]" position="inside">
            <li t-elif="page_name == 'affiliate_dashboard'"
                class="breadcrumb-item active">Affiliate</li>
            <li t-elif="page_name == 'affiliate_transactions'"
                class="breadcrumb-item">
                <a href="/my/affiliate">Affiliate</a>
            </li>
            <li t-elif="page_name == 'affiliate_transaction'"
                class="breadcrumb-item">
                <a href="/my/affiliate/transactions">Transactions</a>
            </li>
            <li t-elif="page_name == 'affiliate_payout'"
                class="breadcrumb-item">
                <a href="/my/affiliate">Affiliate</a>
            </li>
        </xpath>
    </template>

    <!-- Dashboard. -->
    <template id="portal_my_affiliate_dashboard">
        <t t-call="portal.portal_layout">
            <t t-set="title">Affiliate Dashboard</t>
            <t t-set="breadcrumbs_searchbar" t-value="False"/>
            <div class="container py-4">
                <div class="mb-4">
                    <h3 class="fw-bold mb-1">Affiliate Dashboard</h3>
                    <p class="text-muted mb-0" style="font-size:14px;">
                        Track your commissions and request payouts.
                    </p>
                </div>

                <div class="row mb-4">
                    <div class="col-md-4 mb-3">
                        <div class="card h-100">
                            <div class="card-body">
                                <small class="text-muted text-uppercase">Available</small>
                                <h3 class="fw-bold mt-1 mb-0">
                                    <span t-field="partner.affiliate_current_amount"
                                          t-options='{"widget": "monetary", "display_currency": partner.affiliate_currency_id}'/>
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-3">
                        <div class="card h-100">
                            <div class="card-body">
                                <small class="text-muted text-uppercase">Pending Payouts</small>
                                <h3 class="fw-bold mt-1 mb-0">
                                    <span t-field="partner.affiliate_withdraw_amount"
                                          t-options='{"widget": "monetary", "display_currency": partner.affiliate_currency_id}'/>
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-3">
                        <div class="card h-100">
                            <div class="card-body">
                                <small class="text-muted text-uppercase">Paid Out</small>
                                <h3 class="fw-bold mt-1 mb-0">
                                    <span t-field="partner.affiliate_paid_amount"
                                          t-options='{"widget": "monetary", "display_currency": partner.affiliate_currency_id}'/>
                                </h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-flex gap-2 mb-4">
                    <a href="/my/affiliate/transactions" class="btn btn-outline-secondary">
                        <i class="fa fa-list me-1"/> View Transactions
                    </a>
                    <a href="/my/widget" class="btn btn-outline-secondary">
                        <i class="fa fa-puzzle-piece me-1"/> Manage Widget
                    </a>
                    <t t-if="partner.affiliate_payable">
                        <a href="/my/affiliate/payout/request"
                           class="btn btn-primary">
                            <i class="fa fa-paper-plane me-1"/> Request Payout
                        </a>
                    </t>
                    <t t-else="">
                        <button type="button" class="btn btn-primary" disabled="disabled"
                                t-attf-title="Minimum withdrawal: #{ '%.2f' % partner.affiliate_withdraw_limit } #{ partner.affiliate_currency_id.symbol }">
                            <i class="fa fa-paper-plane me-1"/> Request Payout
                        </button>
                        <span class="align-self-center text-muted small">
                            Minimum:
                            <span t-field="partner.affiliate_withdraw_limit"
                                  t-options='{"widget": "monetary", "display_currency": partner.affiliate_currency_id}'/>
                        </span>
                    </t>
                </div>
            </div>
        </t>
    </template>

    <!-- Transactions list. -->
    <template id="portal_my_affiliate_transactions">
        <t t-call="portal.portal_layout">
            <t t-set="breadcrumbs_searchbar" t-value="True"/>
            <t t-call="portal.portal_searchbar">
                <t t-set="title">Transactions</t>
            </t>
            <div t-if="not transactions" class="alert alert-warning" role="alert">
                No transactions on your affiliate account yet.
            </div>
            <t t-if="transactions" t-call="portal.portal_table">
                <thead>
                    <tr class="active">
                        <th>Date</th>
                        <th>Type</th>
                        <th>Job</th>
                        <th class="text-end">Amount</th>
                        <th>Status</th>
                        <th>Bill</th>
                    </tr>
                </thead>
                <t t-foreach="transactions" t-as="tx">
                    <tr>
                        <td>
                            <t t-out="tx.create_date"
                               t-options="{'widget': 'datetime', 'format': 'hh:mm - dd/MM/YYYY'}"/>
                        </td>
                        <td>
                            <t t-if="tx.transaction_type == 'commission'">Commission</t>
                            <t t-else="">Payout</t>
                        </td>
                        <td>
                            <t t-if="tx.job_id">
                                <t t-out="tx.service_title or tx.job_id.name"/>
                            </t>
                            <t t-else="">—</t>
                        </td>
                        <td class="text-end">
                            <span t-field="tx.commission_amount"/>
                        </td>
                        <td>
                            <span t-if="tx.state == 'completed'" class="badge text-bg-success">Completed</span>
                            <span t-elif="tx.state == 'pending'" class="badge text-bg-info">Pending</span>
                            <span t-elif="tx.state == 'canceled'" class="badge text-bg-secondary">Canceled</span>
                        </td>
                        <td>
                            <t t-if="tx.bill_invoice_id">
                                <a t-att-href="tx.bill_invoice_id.get_portal_url()"
                                   t-att-title="tx.bill_invoice_id.name">
                                    <t t-out="tx.bill_invoice_id.name"/>
                                </a>
                            </t>
                        </td>
                    </tr>
                </t>
            </t>
            <div class="text-muted mt-3" t-if="pager">
                <t t-call="portal.pager"/>
            </div>
        </t>
    </template>

    <!-- Payout request form. -->
    <template id="portal_my_affiliate_payout_request">
        <t t-call="portal.portal_layout">
            <t t-set="breadcrumbs_searchbar" t-value="False"/>
            <div class="container py-4">
                <h3 class="fw-bold mb-3">Request a Payout</h3>
                <t t-if="error">
                    <div class="alert alert-danger" role="alert">
                        <t t-out="error"/>
                    </div>
                </t>
                <t t-if="success">
                    <div class="alert alert-success" role="alert">
                        Your payout request was submitted. The team will review and process it shortly.
                    </div>
                    <a href="/my/affiliate" class="btn btn-outline-secondary">Back to dashboard</a>
                </t>
                <t t-if="not success">
                    <p class="text-muted">
                        Available for payout:
                        <strong><span t-field="partner.affiliate_current_amount"
                                      t-options='{"widget": "monetary", "display_currency": partner.affiliate_currency_id}'/></strong>
                        — minimum:
                        <span t-field="partner.affiliate_withdraw_limit"
                              t-options='{"widget": "monetary", "display_currency": partner.affiliate_currency_id}'/>
                    </p>
                    <form action="/my/affiliate/payout/request" method="POST" class="mt-3">
                        <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                        <div class="mb-3" style="max-width:300px;">
                            <label for="amount" class="form-label">Amount</label>
                            <input type="number" step="0.01" min="0.01" name="amount"
                                   id="amount" class="form-control" required="required"
                                   t-att-value="default_amount"/>
                        </div>
                        <div class="mb-3" style="max-width:500px;">
                            <label for="note" class="form-label">Note (optional)</label>
                            <textarea name="note" id="note" class="form-control" rows="3"
                                      placeholder="Bank details, instructions, etc."/>
                        </div>
                        <button type="submit" class="btn btn-primary">
                            <i class="fa fa-paper-plane me-1"/> Submit Request
                        </button>
                        <a href="/my/affiliate" class="btn btn-outline-secondary ms-2">Cancel</a>
                    </form>
                </t>
            </div>
        </t>
    </template>
</odoo>
