@model PayoutsModel
@{
    Layout = "../Shared/_NavLayout.cshtml";
    ViewData.SetActivePageAndTitle(WalletsNavPages.Payouts, "Manage payouts", Context.GetStoreData().StoreName);
}

<script type="text/javascript">
    function selectAll(e)
    {
        const items = document.getElementsByClassName("selection-item");
        for (let i = 0; i < items.length; i++) {
            items[i].checked = e.checked;
        }
    }
</script>
<form method="post">
    <h4 class="mb-3">Payouts to process</h4>
    <div class="row button-row">
        @if (Model.WaitingForApproval.Any())
        {
            <div class="col text-right">
                <button type="submit" id="payCommand" name="Command" class="btn btn-primary" role="button" value="pay">Confirm selected payouts</button>
                <button type="submit" id="payCommand" name="Command" class="btn btn-secondary" role="button" value="cancel">Cancel selected payouts</button>
            </div>
        }
    </div>
    <div class="row">
        <div class="col-md-12">
            @if (Model.WaitingForApproval.Any())
            {
                <table class="table table-sm table-responsive-lg">
                    <thead class="thead-inverse">
                    <tr>
                        <th><input id="selectAllCheckbox" type="checkbox" onclick="selectAll(this); return true;" /></th>
                        <th style="min-width: 90px;" class="col-md-auto">Date</th>
                        <th class="text-left">Source</th>
                        <th class="text-left">Destination</th>
                        <th class="text-right">Amount</th>
                    </tr>
                    </thead>
                    <tbody>
                    @for (var i = 0; i < Model.WaitingForApproval.Count; i++)
                    {
                        var pp = Model.WaitingForApproval[i];
                        <tr>
                            <td>
                                <span>
                                    <input type="checkbox" class="selection-item" asp-for="WaitingForApproval[i].Selected" />
                                    <input type="hidden" asp-for="WaitingForApproval[i].PayoutId" />
                                </span>
                            </td>
                            <td><span>@pp.Date.ToBrowserDate()</span></td>
                            <td class="mw-100"><span>@pp.PullPaymentName</span></td>
                            <td><span>@pp.Destination</span></td>
                            <td class="text-right"><span>@pp.Amount</span></td>
                        </tr>
                    }
                    </tbody>
                </table>
            }
            else
            {
                <p class="text-secondary mb-0">No payout waiting for approval.</p>
            }
        </div>
    </div>

    <h4 class="mt-5 mb-3">Completed payouts</h4>
    <div class="row">
        <div class="col-md-12">
            @if (Model.Other.Any())
            {
                <table class="table table-sm table-responsive-lg">
                    <thead class="thead-inverse">
                        <tr>
                            <th style="min-width: 90px;" class="col-md-auto">Date</th>
                            <th class="text-left">Source</th>
                            <th class="text-left">Destination</th>
                            <th class="text-right">Amount</th>
                            <th class="text-right">Transaction</th>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach (var pp in Model.Other)
                    {
                        <tr>
                            <td><span>@pp.Date.ToBrowserDate()</span></td>
                            <td class="mw-100"><span>@pp.PullPaymentName</span></td>
                            <td><span>@pp.Destination</span></td>
                            <td class="text-right"><span>@pp.Amount</span></td>
                            @if (pp.TransactionLink is null)
                            {
                                <td class="text-right"><span>Cancelled</span></td>
                            }
                            else
                            {
                                <td class="text-right"><span><a class="transaction-link" href="@pp.TransactionLink">Link</a></span></td>
                            }
                        </tr>
                    }
                    </tbody>
                </table>
            }
            else
            {
                <p class="text-secondary mb-0">No payout in history.</p>
            }
        </div>
    </div>
</form>