{% extends "admin_base.html" %}

{% block page_title %}Channel payouts{% endblock %}

{% block admin_content %}
<main class="mx-auto w-full max-w-6xl space-y-6 px-4 py-6 md:px-6" data-currency-symbol="{{ settings.currency_symbol | default(value='₹') }}">
    <header class="flex flex-wrap items-start justify-between gap-3">
        <div>
            <a href="/plugins/orders" class="text-sm text-brand hover:underline">← Orders</a>
            <h1 class="mt-2 text-2xl font-semibold text-foreground">Match a delivery service payout</h1>
            <p class="mt-1 max-w-3xl text-sm text-muted">Choose the unpaid orders on the service statement. Compare the order total with fees, adjustments and the amount that reached your bank.</p>
        </div>
    </header>

    <div id="channelPayoutMessage" class="blocks-workspace-notice" role="status" aria-live="polite" tabindex="-1" hidden></div>

    <form id="channelPayoutForm" class="space-y-5 rounded-xl border border-divider bg-surface p-4 sm:p-6">
        <section class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4" aria-label="Payout details">
            <label class="block text-sm font-medium text-foreground">Delivery service
                <select id="payoutChannel" name="channel" required class="mt-1 w-full">
                    <option value="">Loading delivery services…</option>
                </select>
            </label>
            <label class="block text-sm font-medium text-foreground">Payout reference from statement
                <input id="payoutReference" name="settlement_ref" required maxlength="120" class="mt-1 w-full" placeholder="For example, payout ID">
            </label>
            <label class="block text-sm font-medium text-foreground">Statement period starts
                <input id="payoutPeriodStart" name="period_start" type="date" required class="mt-1 w-full">
            </label>
            <label class="block text-sm font-medium text-foreground">Statement period ends
                <input id="payoutPeriodEnd" name="period_end" type="date" required class="mt-1 w-full">
            </label>
        </section>

        <section class="space-y-3" aria-labelledby="payoutOrdersTitle">
            <div class="flex flex-wrap items-end justify-between gap-2">
                <div><h2 id="payoutOrdersTitle" class="text-lg font-semibold text-foreground">Orders on this payout</h2>
                    <p class="text-sm text-muted">Select each unpaid order shown on the service statement. Orders are counted once.</p></div>
                <button id="refreshPayoutOrders" type="button" class="blocks-button blocks-button-secondary min-h-11">Refresh orders</button>
            </div>
            <div class="overflow-x-auto rounded-lg border border-divider">
                <table class="w-full min-w-[38rem] text-left text-sm">
                    <thead class="bg-canvas text-xs uppercase tracking-wide text-muted"><tr><th class="w-12 px-4 py-3">Select</th><th class="px-4 py-3">Order</th><th class="px-4 py-3">Date</th><th class="px-4 py-3">Payment</th><th class="px-4 py-3 text-right">Order total</th></tr></thead>
                    <tbody id="payoutOrderRows"><tr><td colspan="5" class="px-4 py-8 text-center text-muted">Loading unpaid orders…</td></tr></tbody>
                </table>
            </div>
        </section>

        <section class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4" aria-label="Settlement amounts">
            <div class="rounded-lg bg-canvas p-3"><div class="text-sm text-muted">Selected order total</div><div id="payoutGross" class="mt-1 text-lg font-semibold text-foreground">₹0.00</div></div>
            <label class="block text-sm font-medium text-foreground">Service fees / commission
                <input id="payoutFees" name="fee_amount" type="number" min="0" step="0.01" value="0" required class="mt-1 w-full">
            </label>
            <label class="block text-sm font-medium text-foreground">Other adjustment
                <input id="payoutAdjustments" name="adjustment_amount" type="number" step="0.01" value="0" required class="mt-1 w-full">
            </label>
            <label class="block text-sm font-medium text-foreground">Amount received in bank
                <input id="payoutReceived" name="received_amount" type="number" min="0" step="0.01" required class="mt-1 w-full">
            </label>
        </section>
        <p class="rounded-lg bg-canvas p-3 text-sm text-muted">Expected bank amount: <strong id="payoutExpected" class="text-foreground">₹0.00</strong>. Difference: <strong id="payoutVariance" class="text-foreground">₹0.00</strong>. A difference stays visible for review; it is not hidden in order totals.</p>

        <section class="grid gap-4 sm:grid-cols-2">
            <label class="block text-sm font-medium text-foreground">Date the bank received it
                <input id="payoutReceivedOn" name="received_on" type="date" required class="mt-1 w-full">
            </label>
            <label class="block text-sm font-medium text-foreground">Bank statement reference <span class="font-normal text-muted">(optional)</span>
                <input id="payoutBankReference" name="bank_reference" maxlength="160" class="mt-1 w-full" placeholder="Bank transfer note or reference">
            </label>
            <label class="block text-sm font-medium text-foreground sm:col-span-2">Note <span class="font-normal text-muted">(optional)</span>
                <textarea id="payoutNote" name="note" maxlength="500" rows="2" class="mt-1 w-full" placeholder="For example, fee differs from the app statement"></textarea>
            </label>
        </section>
        <div class="flex flex-wrap items-center gap-3">
            <button id="savePayout" type="submit" class="blocks-button blocks-button-primary min-h-11">Save payout match</button>
            <a href="/plugins/orders" class="blocks-button blocks-button-secondary min-h-11">Back to orders</a>
        </div>
    </form>

    <section class="overflow-hidden rounded-xl border border-divider bg-surface" aria-labelledby="payoutHistoryTitle">
        <header class="border-b border-divider px-4 py-4 sm:px-6"><h2 id="payoutHistoryTitle" class="text-lg font-semibold text-foreground">Saved payout history</h2><p class="mt-1 text-sm text-muted">Matched means the bank amount equals the calculated payout. Review means there is a difference.</p></header>
        <div class="overflow-x-auto"><table class="w-full min-w-[54rem] text-left text-sm">
            <thead class="bg-canvas text-xs uppercase tracking-wide text-muted"><tr><th class="px-4 py-3">Service / reference</th><th class="px-4 py-3">Period</th><th class="px-4 py-3 text-right">Order total</th><th class="px-4 py-3 text-right">Fees</th><th class="px-4 py-3 text-right">Expected</th><th class="px-4 py-3 text-right">Received</th><th class="px-4 py-3 text-right">Difference</th><th class="px-4 py-3">Status</th></tr></thead>
            <tbody id="payoutHistoryRows"><tr><td colspan="8" class="px-4 py-8 text-center text-muted">Loading payout history…</td></tr></tbody>
        </table></div>
    </section>
</main>
{% endblock %}

{% block scripts %}
<script src="/plugins/orders/assets/js/channel-settlements.js?v={{ asset_version | default(value='1') }}" defer></script>
{% endblock %}