@model PullPaymentsModel
@{
    Layout = "../Shared/_NavLayout.cshtml";
    ViewData.SetActivePageAndTitle(WalletsNavPages.PullPayments);
    ViewData["Title"] = "Pull payments";
}
<style type="text/css">
    .tooltip-inner {
        text-align: left;
    }
</style>
@if (TempData.HasStatusMessage())
{
    <div class="row">
        <div class="col-md-12 text-center">
            <partial name="_StatusMessage" />
        </div>
    </div>
}
<div class="row">
    <div class="col-lg-12">
        <p>
            Pull payments are a way to allow a receiver of your payment the ability to "pull it" from your wallet at a convenient time.
            For example, if the receiver of your payment is a freelancer, you allow the freelancer to pull funds from the wallet, at his convience and with in limits, as he completes the job.

            This decreases the need of communication required between you and the freelancer.
        </p>
    </div>
</div>

<div class="row button-row">
    <div class="col">
        
    </div>
    <div class="col text-right">
        <a asp-action="NewPullPayment"
           asp-route-walletId="@this.Context.GetRouteValue("walletId")"
           class="btn btn-primary" role="button" id="NewPullPayment"><span class="fa fa-plus"></span> Create a new pull payment</a>
    </div>
</div>

<div class="row">
    @foreach (var pp in Model.PullPayments)
    {
        <script id="tooptip_template_@pp.Id" type="text/template">
            <span>Awaiting:&nbsp;<span class="float-right">@pp.Progress.Awaiting</span></span>
            <br />
            <span>Completed:&nbsp;<span class="float-right">@pp.Progress.Completed</span></span>
            <br />
            <span>Limit:&nbsp;<span class="float-right">@pp.Progress.Limit</span></span>
            @if (pp.Progress.ResetIn != null)
            {
                <br />
                <span>Resets in:&nbsp;<span class="float-right">@pp.Progress.ResetIn</span></span>
            }
            @if (pp.Progress.EndIn != null)
            {
                <br />
                <span>Expires in:&nbsp;<span class="float-right">@pp.Progress.EndIn</span></span>
            }
        </script>
    }
    <div class="col-md-12">
        <table class="table table-sm table-responsive-lg">
            <thead class="thead-inverse">
                <tr>
                    <th style="min-width: 90px;" class="col-md-auto">
                        Start
                    </th>
                    <th style="max-width: 90px;" class="text-left">Name</th>
                    <th class="text-left">Refunded</th>
                    <th class="text-right">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var pp in Model.PullPayments)
                {
                    <tr>
                        <td class="col-2"><span>@pp.StartDate.ToBrowserDate()</span></td>
                        <td class="col-2"><span>@pp.Name</span></td>
                        <td class="col-4">
                            <div class="progress ppProgress" data-pp="@pp.Id" data-toggle="tooltip" data-html="true">
                                <div class="progress-bar" role="progressbar" aria-valuenow="@pp.Progress.CompletedPercent"
                                     aria-valuemin="0" aria-valuemax="100" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:@(pp.Progress.CompletedPercent)%;">
                                </div>
                                <div class="progress-bar" role="progressbar" aria-valuenow="@pp.Progress.AwaitingPercent"
                                     aria-valuemin="0" aria-valuemax="100" style="background-color:orange; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:@(pp.Progress.AwaitingPercent)%;">
                                </div>
                            </div>
                        </td>
                        <td class="text-right col-3">
                            <a asp-action="ViewPullPayment"
                               asp-controller="PullPayment"
                               asp-route-pullPaymentId="@pp.Id">View</a>| <a class="pp-payout" asp-action="Payouts"
                                                                             asp-route-walletId="@this.Context.GetRouteValue("walletId")"
                                                                             asp-route-pullPaymentId="@pp.Id">Payouts</a> | <a asp-action="ArchivePullPayment"
                                                                                                                               asp-route-walletId="@this.Context.GetRouteValue("walletId")"
                                                                                                                               asp-route-pullPaymentId="@pp.Id">Archive</a>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
        <script type="text/javascript">
            var ppProgresses = document.getElementsByClassName("ppProgress");
            for (var i = 0; i < ppProgresses.length; i++) {
                var pp = ppProgresses[i];
                var ppId = pp.getAttribute("data-pp");
                var template = document.getElementById("tooptip_template_" + ppId);
                pp.setAttribute("title", template.innerHTML);
            }
        </script>
    </div>
</div>