@model ParcelWeb.Core.Dto.RawDataSubLedgerDto
@{
    ViewBag.Title = "Account Ledger";
}

<style>
    table > tbody > .rowpadding {
        padding-top: 10px;
    }

    @@media print {
        .pagebreak {
            clear: both;
            page-break-after: always;
        }
    }

    tr {
        page-break-inside: avoid;
    }
</style>
<div class="content-header row">
    <div class="breadcrumb-wrapper col-xs-12">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="/GLAMF/Index">Accounts</a>
            </li>
            <li class="breadcrumb-item">
                <a href="/Reports/Index">Reports</a>
            </li>
            <li class="breadcrumb-item active">
                Account Ledger
            </li>
        </ol>
    </div>
</div>


<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Account 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 pt-0">
                    <div class="row">
                        <div class="col-md-12">
                            <form method="get" id="myFrom" action="/ManagementReports/PrintAccountLedger">
                                <div class="row">
                                    <div class="form-group">
                                        <div class="col-md-2">
                                            <label>From Date: </label>
                                            <div class="input-group">
                                                <input type="text" name="DateFrom" required id="DateFrom" value="@DateTime.Now.ToShortDateString()" class="date form-control" />
                                                <span class="input-group-addon" id="basic-addon1">
                                                    <i class="icon-calendar4"></i>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <label>To Date: </label>
                                            <div class="input-group">
                                                <input type="text" name="DateTo" required id="DateTo" value="@DateTime.Now.ToShortDateString()" class="date form-control" />
                                                <span class="input-group-addon" id="basic-addon1">
                                                    <i class="icon-calendar4"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-md-2">
                                            <label>From A/C Code: </label>
                                            <select class="form-control" name="FromCOA" id="cbxFromAccount" required onchange="SelectAccount(this)">
                                                <option>--select Account--</option>
                                            </select>
                                            @Html.ValidationMessageFor(mode => Model.FromCOA, "", new { @class = "text-danger" })
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-md-2">
                                            <label>Contact: </label>
                                            @*   @Html.DropDownList("FromSubAcc", ViewBag.SubAcc as SelectList, "--Select All--", new { @class = "form-control select2" })*@
                                            <select class="form-control" id="cbxFromSubAccount" name="FromSubAcc">
                                                <option></option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group pt-2">
                                        <div class="col-md-4">
                                            <label class="mr-1">
                                                @Html.CheckBoxFor(x => x.DetailedNarration)
                                                Show Detailed Narration
                                            </label>
                                            <label>
                                                @Html.CheckBoxFor(x => x.VoidTransaction)
                                                Show Void Transaction
                                            </label>
                                        </div>
                                    </div>
                                </div>

                            </form>
                            <div class="row">
                                <div class="col-md-12 mt-1">
                                    <button id="btnLoadSheet" style="cursor:pointer;" class="btn btn-success float-right"><i class="icon-check"></i> Run Report</button>
                                    <button id="btnPrintSheet" style="cursor:pointer;" class="btn btn-success float-right mr-1"><i class="icon-print"></i> Print Report</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




<div id="LegderData">

</div>

<div class="modal fade text-xs-left" id="Modalprintdialogue" tabindex="-1" role="dialog" aria-labelledby="myModalLabel16" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel16">Basic Modal</h4>
            </div>
            <div class="modal-body" id="printdialogue">

            </div>

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

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script>
        $(document).ready(function () {
            var accounts = [];
            LoadAccounts();
            $(document).ready(function () {

                $("#btnPrintSheet").on("click", function () {
                    var form = $('#myFrom').get(0);
                    $.validator.unobtrusive.parse(form);
                    if ($(form).valid({ ignore: ":hidden,.tt-input" })) {
                        $("#myFrom").submit();
                    }

                });



                $("#btnLoadSheet").on("click", function () {

                    var form = $('#myFrom').get(0);
                    $.validator.unobtrusive.parse(form);
                    if ($(form).valid({ ignore: ":hidden,.tt-input" })) {

                        var DetailedNarration = false;
                        var VoidTransaction = false;
                        if ($("input[name='DetailedNarration']").is(':checked')) {
                            DetailedNarration = true;
                        }
                        if ($("input[name='VoidTransaction']").is(':checked')) {
                            VoidTransaction = true;
                        }
                        var DateFrom = $("#DateFrom").val();
                        var DateTo = $("#DateTo").val();
                        var FromCOA = $("#cbxFromAccount").val();
                        var FromSubAcc = $("#cbxFromSubAccount").val();
                        var obj = {
                            DateFrom: DateFrom,
                            DateTo: DateTo,
                            FromCOA: FromCOA,
                            FromSubAcc: FromSubAcc,
                            DetailedNarration: DetailedNarration,
                            VoidTransaction: VoidTransaction
                        };
                        $("#LegderData").load("/ManagementReports/_PartialViewAccountLedger", obj);

                    }
                   
                });
                $("#cbxFromAccount").on('change', function () {
                    var AccountID = $(this).val();
                    $.ajax({
                        url: '/GLTRHs/GetSubAccounts?AccountID=' + AccountID,
                        type: 'get',
                        dataType: 'json',
                        success: function (data) {
                            debugger
                            var html = "<option value=''>--ALL--</option>";
                            for (var i = 0; i < data.length; i++) {
                                html += "<option value='" + data[i].Value + "'>" + data[i].Name + "</option>";
                            }
                            $('#cbxFromSubAccount').html(html);
                            $('#cbxFromSubAccount').select2();
                        }
                    });
                });
            });
            function LoadAccounts() {
                $.ajax({
                    url: '/GLTRHs/GetAccounts',
                    type: 'get',
                    dataType: 'json',
                    success: function (data) {
                        accounts = data;
                        var html = "<option value=''>--Select Account--</option>";
                        for (var i = 0; i < data.length; i++) {
                            html += "<option value='" + data[i].Value + "'>" + data[i].Name + "</option>";
                        }

                        $('#cbxFromAccount').html(html);

                        $('#cbxFromAccount').select2({
                            width: '100%'
                        });
                        $('#cbxToAccount').select2({
                            width: '100%'
                        });
                    }
                });
            }
        })

        function SelectAccount(element) {
            var id = $(element).val();

        }



        function IsEmpty(input, output) {
            if (input === '') {
                return output;
            }
            return input;
        }
    </script>
}