@model ParcelWeb.Core.Dto.CreateEditInvoiceDto

@{
    ViewBag.Title = "New Invoice";
}

<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">
                Invoices
            </li>

            <li class="breadcrumb-item active">
                New Invoice
            </li>
        </ol>
    </div>
</div>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">New Invoice</h4>
                    <a class="heading-elements-toggle"><i class="icon-users2 font-medium-3"></i></a>
                    <div class="heading-elements">
                        <a href="@Url.Action("Index", "Invoices")" class="btn btn-primary btn-square btn-normal"><i class="icon icon-arrow-left4"></i> Back</a>
                    </div>
                </div>
                <div class="card-body collapse in">
                    <div class="card-block">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="row">
                                    @Html.LabelFor(model => model.CustomerName, htmlAttributes: new { @class = "control-label col-md-12" })
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        @Html.DropDownListFor(model => model.CustomerName, ViewBag.Customer as SelectList, "--Select Customer--", new { @class = "form-control" })
                                        @Html.ValidationMessageFor(model => model.CustomerName, "", new { @class = "text-danger" })
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="row">
                                    @Html.LabelFor(model => model.InvoicNo, htmlAttributes: new { @class = "control-label col-md-12" })
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        @Html.EditorFor(model => model.InvoicNo, new { htmlAttributes = new { @class = "form-control" } })
                                        @Html.ValidationMessageFor(model => model.InvoicNo, "", new { @class = "text-danger" })
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="row">
                                    @Html.LabelFor(model => model.InvoiceDate, htmlAttributes: new { @class = "control-label col-md-12" })
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        @Html.EditorFor(model => model.InvoiceDate, new { htmlAttributes = new { @class = "form-control" } })
                                        @Html.ValidationMessageFor(model => model.InvoiceDate, "", new { @class = "text-danger" })
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="row">
                                    @Html.LabelFor(model => model.DueDate, htmlAttributes: new { @class = "control-label col-md-12" })
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        @Html.EditorFor(model => model.DueDate, new { htmlAttributes = new { @class = "form-control" } })
                                        @Html.ValidationMessageFor(model => model.DueDate, "", new { @class = "text-danger" })
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br />
                        <div class="row">
                            <div class="col-md-3">
                                <div class="row">
                                    @Html.LabelFor(model => model.Gateway, htmlAttributes: new { @class = "control-label col-md-12" })
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        @Html.DropDownListFor(model => model.Gateway, ViewBag.PaymentGateway as SelectList, "--Select Gateway--", new { @class = "form-control" })
                                        @Html.ValidationMessageFor(model => model.Gateway, "", new { @class = "text-danger" })
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="row">
                                    @Html.LabelFor(model => model.CurrencyCode, htmlAttributes: new { @class = "control-label col-md-12" })
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        @Html.DropDownListFor(model => model.CurrencyCode, ViewBag.currency as SelectList, "--Select Currency--", new { @class = "form-control" })
                                        @Html.ValidationMessageFor(model => model.CurrencyCode, "", new { @class = "text-danger" })
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="row">
                                    @Html.LabelFor(model => model.Remarks, htmlAttributes: new { @class = "control-label col-md-12" })
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        @Html.EditorFor(model => model.Remarks, new { htmlAttributes = new { @class = "form-control" } })
                                        @Html.ValidationMessageFor(model => model.Remarks, "", new { @class = "text-danger" })
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br />
                        <div class="row">
                            <div class="col-md-12">
                                <div class="table-responsive-sm">
                                    <table class="table table-slim table-condensed table-bordered" id="dgvShipment">
                                        <thead class="thead-default">
                                            <tr>
                                                <th><input name="select_all" value="1" id="select-all" hidden type="checkbox" /></th>
                                                <th>Product Service</th>
                                                <th>Description</th>
                                                <th>Qty</th>
                                                <th>Unit</th>
                                                <th>Weight</th>
                                                <th>Rate Per Kg</th>
                                                <th>Total</th>
                                            </tr>
                                        </thead>
                                        <tbody id="Container_List"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <br />
                       
                        <div class="row">
                            <div class="col-md-7">
                                @* <button type="button" class="btn btnaddrow btn-sm btn-success btn-flat" data-toggle="tooltip" data-placement="bottom" title="Add Item"><i class="icon-plus"></i> Add New Row</button>*@
                            </div>
                            <div class="col-md-5" style="color:grey;">
                                <div class="row">
                                    <div class="col-md-6"><b>Total Billed Amount</b></div>
                                    <div class="col-md-6" style="text-align:right"><input type="number" class="border-transparent text-xs-right" id="TotalAmount" readonly value="0"/></div>
                                </div>
                                <br />
                                <div class="row">
                                    <div class="col-md-6"><b>Conversion Rates</b></div>
                                    <div class="col-md-6" style="text-align:right"><input type="number" class="border-transparent text-xs-right" min="0" id="ConversionRate"/></div>
                                </div>
                                <br />
                                <div class="row">
                                    <div class="col-md-6 black"><h2>Net Balance:</h2></div>
                                    <div class="col-md-6" style="text-align:right"><h2 id="NetBalance">0</h2></div>
                                </div>

                            </div>
                        </div>
                        <br />
                        <div class="form-actions right">
                            <button type="button" id="BtnSave" class="btn btn-primary mr-1"><span><i class="icon-check2"></i></span> Save</button>
                        </div>
                       
                    </div>
                </div>
            </div>
        </div>
    </div>
}
    
    

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script>
        var hashtable = [];
        $(document).ready(function () {
            $("#InvoiceDate").datepicker().datepicker("setDate", new Date());
            $("#DueDate").datepicker().datepicker("setDate", new Date());
            $("#CustomerName").select2();
            var count = 0;
            $("#CustomerName").on("change", function () {
                debugger
                var username = $("#CustomerName").val();
                $.ajax({
                    url: "/Invoices/GetCustomerPendingShipping?username=" + username,
                    method: "GET",
                    success: function (response) {
                        
                        if (response.success) {
                            console.log(response);
                            var html = "";
                            for (var i = 0; i < response.shipments.length; i++) {
                                html += '<tr>' +
                                    '<td> <input type="checkbox" class="checkshipment" data-val="' + response.shipments[i].ShipmentId + '"/></td>' +
                                    '<td>' + response.shipments[i].DeliveryService + '</td>' +
                                    '<td>' + response.shipments[i].ItemDescription + '</td>' +
                                    '<td>' + response.shipments[i].TotalPieces + '</td>' +
                                    '<td>Kg</td>' +  /*unit*/
                                    '<td>' + response.shipments[i].Weight + '</td>' +
                                    '<td><input type="number" min="0" class="form-control RatePerKg" value="' + response.shipments[i].RatePerKg + '"/></td>' +
                                    '<td>' + response.shipments[i].TotalCost + '</td>' +
                                    '</tr>';
                            }
                            $("#Container_List").empty();
                            $("#Container_List").append(html);
                        }
                        else {
                            MyAlert("Error", response.message, "error");
                        }
                    },
                    error: function (err) {
                        MyAlert("Error", err, "error");
                    }
                });

            });
            $('#dgvShipment tbody').on('change keyup', '.RatePerKg', function () {
               
                var rate= $(this).val();
                var btn = $(this).parents('tr');
                var weight = parseFloat(btn[0].cells[5].innerText);
                var newRate = rate * weight;
                $(this).parents('tr')[0].cells[7].innerText = newRate;// == newRate.toString();
               
                var checkbox = btn[0].cells[0].lastChild;
                if (checkbox.checked) {
                    var shipmentId = checkbox.attributes["data-val"].value;
                    for (var i = 0; i < hashtable.length; i++) {
                        if (hashtable[i].ShipmentId == shipmentId) {
                            hashtable[i].Total = newRate;
                            hashtable[i].RatePerKg = rate;
                        }
                    }
                    CalculateTotals();               
                }
                

               
             // alert(newRate);          
            });
            $('#dgvShipment tbody').on('change', 'input[type="checkbox"]', function () {
              
                var shipmentId = $(this).attr("data-val");
                var btn = $(this).parents('tr')
                var subTotal = btn[0].cells[7].innerText;
                
                var rateperkg = btn[0].cells[6].lastChild.value;
                if (this.checked) {
                    hashtable.push({
                        ShipmentId: shipmentId,
                        Total: subTotal,
                        RatePerKg: rateperkg
                    });
                }
                else {
                    for (var i = 0; i < hashtable.length; i++) {
                        if (hashtable[i].ShipmentId == shipmentId) {
                            hashtable.splice(i, 1);
                        }
                    }
                }
                CalculateTotals();
            });
            $("#BtnSave").on("click", function () {
                var CustomerName = $("#CustomerName").val();
                var InvoiceNo = $("#InvoicNo").val();
                var InvoiceDate = $("#InvoiceDate").val();
                var DueDate = $("#DueDate").val();
                var Gateway = $("#Gateway").val();
                var CurrencyCode = $("#CurrencyCode").val();
                var Remarks = $("#Remarks").val();
                var SubTotal = $("#TotalAmount").val();
                var ConversionRate = $("#ConversionRate").val();
                var GrandTotal = $("#NetBalance").text();
                if (CustomerName == "") {
                    MyAlert("Ooops", "Customer Name is Required", "error");
                    return;
                }
                if (Gateway == "") {
                    MyAlert("Ooops", "Gateway is Required", "error");
                    return;
                }
                //if (CurrencyCode == "") {
                //    MyAlert("Ooops", "Currency is Required", "error");
                //    return;
                //}
                if (hashtable.length == 0) {
                    MyAlert("Ooops", "No Shipment is Selected!", "error");
                    return;
                }
                var detail = [];
                for (var i = 0; i < hashtable.length; i++) {
                    var data = {
                        ShipmentId: hashtable[i].ShipmentId,
                        Amount: hashtable[i].Total,
                        RatePerKg: hashtable[i].RatePerKg                        
                    };
                    detail.push(data);
                }
                var InvoiceDto = {
                    CustomerName: CustomerName,
                    InvoicNo: InvoiceNo,
                    InvoiceDate: InvoiceDate,
                    DueDate: DueDate,
                    Gateway: Gateway ,
                    CurrencyCode: CurrencyCode,
                    Remarks: Remarks,
                    TotalBillAmount: SubTotal,
                    NetBalancePayable: GrandTotal,
                    ConversionRate: ConversionRate,

                    InvoiceDetail: detail
                };
                $.ajax({
                    url: "/Invoices/Create",
                    data: InvoiceDto,
                    method: "POST",
                    success: function (response) {
                        if (response.success) {
                            window.open("/Invoices/PrintInvoice?Id=" + response.Id, "_blank");
                            window.location.replace("/Invoices/Index");

                        }
                        else {
                            MyAlert("Ooops", "Something is Missing", "error");
                        }
                    },
                    error: function (err) {
                        MyAlert("Ooops", "Server Error", "error");

                    }
                });
            });
            $("#CurrencyCode").on("change", function () {
             
                var currencyCode = $(this).val();
                $.ajax({
                    url: "/Invoices/GetCurrencyInfo?currencyCode=" + currencyCode,
                    method: "GET",
                    success: function (response) {
                        if (response.success) {
                            $("#ConversionRate").val(response.output.Rate);
                            ConvertToCurrency();
                        }
                        else {
                            MyAlert("Error", response.message, "error");
                        }
                    },
                    error: function (err) {
                        MyAlert("Error", err, "error");
                    }
                })

            });
            $("#ConversionRate").on("change", function () {
                CalculateTotals();
            });
        });
       
        function CalculateTotals() {
            var TotalAmount = 0;
            for (var i = 0; i < hashtable.length; i++) {
                TotalAmount = TotalAmount + parseFloat(hashtable[i].Total);
            }
            $("#TotalAmount").val(TotalAmount);
            ConvertToCurrency();
        }
        function ConvertToCurrency() {
            
            var initialAmount = $("#TotalAmount").val();
            var conversionRate = IsNullZeroAsFloat($("#ConversionRate").val());
            var convertedAmount = 0;
            if (conversionRate == 0) {
                convertedAmount = initialAmount;
            }
            else {
                convertedAmount = initialAmount / conversionRate;
            }
           
            $("#NetBalance").text(convertedAmount);
        }
    </script>

}