@model ParcelWeb.Core.Dto.Reports.WalletLedgerOutputReportDto
@{
    ViewBag.Title = "CustomerLedger";
}

<div class="content-header row">
    <div class="breadcrumb-wrapper col-xs-12">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="/Dashboard/Index">Home</a>
            </li>

            <li class="breadcrumb-item">
                <a href="/AppUser/Customers">Customers</a>
            </li>
            <li class="breadcrumb-item">
                <a href="/AppUser/EditCustomer/@Session["UserId"]">Wallet Transactions</a>
            </li>
            <li class="breadcrumb-item active">
                Wallet Ledger
            </li>
        </ol>
    </div>
</div>




<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Wallet Ledger</h4>
                <a class="heading-elements-toggle"><i class="icon-ellipsis font-medium-3"></i></a>

                <div class="heading-elements">
                    <ul class="list-inline mb-0">
                        <li><a data-action="collapse"><i class="icon-minus4"></i></a></li>
                        <li><a data-action="reload"><i class="icon-reload"></i></a></li>
                        <li><a data-action="expand"><i class="icon-expand2"></i></a></li>

                    </ul>
                </div>
            </div>
            <div class="card-body collapse in">
                <div class="card-block">
                    <div class="row">
                        <div class="col-md-12">
                            @using (Html.BeginForm("WalletLedger", "Reports", FormMethod.Post, new { Id = "myform" }))
                            {
                                <div class="form-group row">
                                    <div class="col-md-3">
                                        <input type="text" class="form-control col-md-3 date-range-picker" name="ApprovedDate" />
                                        <input type="datetime" name="DateFrom" hidden="hidden" id="startDate" value="@Model.DateFrom" />
                                        <input type="datetime" name="DateTo" hidden="hidden" id="EndDate" value="@Model.DateTo" />
                                    </div>

                                    <input type="button" id="WlSubmit" class="btn btn-outline-green" value="Apply" />
                                    @*<a href="#" id="GWT" class="btn btn-outline-green btn-sm">Apply</a>*@
                                    <a href="#" class="btn btn-outline-blue">Clear</a>
                                </div>
                            }
                        </div>

                        @* ------------------- *@
                        <br />
                        @if (Model.data != null && Model.data.Count != 0)
                        {
                            <br />
                            <div class="table-responsive">
                                <table class="table table-sm table-condensed table-bordered table-hover" style="width:100%">

                                    <thead class="thead-default">

                                        <tr>
                                            <th>Date</th>
                                            <th>TXN Type</th>
                                            <th>Ref No#</th>
                                            <th>Transaction Id</th>
                                            <th>Credit</th>
                                            <th>Debit</th>
                                            <th> Balance</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        <tr>
                                            <td colspan="3">   </td>
                                            <td><strong>Opening Balance </strong>  </td>
                                            <td colspan="2">    </td>
                                            <td>@Html.DisplayFor(model => model.OpeningBalance)  </td>
                                            <td>    </td>
                                        </tr>
                                        @if (Model.data.Count == 0)
                                        {
                                            <tr>
                                                <td colspan="8" style="text-align:center"><p class="m-0">No Transections Please Recharge your Wallet</p> </td>
                                            </tr>
                                        }
                                        else
                                        {
                                            foreach (var item in Model.data)
                                            {

                                                <tr>
                                                    <td> @item.createdAt </td>
                                                    <td> @item.Gateway </td>
                                                    <td>    </td>
                                                    <td> @item.TRXId </td>
                                                    <td> @item.Credit </td>
                                                    <td> @item.Debit </td>
                                                    <td> @item.Amount </td>
                                                    <td> @item.Description </td>
                                                </tr>

                                            }
                                        }

                                        <tr>
                                            <td>   </td>
                                            <td>    </td>
                                            <td>    </td>
                                            <td><strong>Closing Balance </strong>  </td>
                                            <td>    </td>
                                            <td>    </td>
                                            <td>  @Html.DisplayFor(model => model.ClosingBalance)   </td>
                                            <td>    </td>
                                        </tr>
                                    </tbody>

                                </table>
                            </div>

                        }



                    </div>
                </div>
            </div>
        </div>
    </div>



    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")

        <script type="text/javascript">
            $(document).ready(function () {
                SetValues();

                //  $('.date-range-picker').trigger('apply.daterangepicker');
                $('.date-range-picker').on('apply.daterangepicker', function (ev, picker) {
                    $("#startDate").val((picker.startDate.format('YYYY-MM-DD')));
                    $("#EndDate").val((picker.endDate.format('YYYY-MM-DD')));
                });
            });
            function SetValues() {
                debugger
                var a = $('.date-range-picker').data('daterangepicker');
                var fromdate = a.startDate.format('YYYY-MM-DD');
                var todate = a.endDate.format('YYYY-MM-DD');
                $("#startDate").val(fromdate);
                $("#EndDate").val(todate);
                console.log(a.endDate._d);
                console.log(a.startDate._d);
            }
            $("#WlSubmit").on('click', function () {
                debugger

                if ($("#startDate").val() == "" || $("#EndDate").val() == "") {
                    MyAlert("Error", "Please Select Date", "error");
                }
                else {
                    $("#myform").submit();
                }

            });
        </script>

    }