@model PantheonRA.BackOffice.Models.CashTransactionViewModel
@using PantheonRA.BackOffice.Models
@using PantheonRA.BackOffice.Enums

<script src="~/Scripts/custom/cashtransactions/cashtransactions.js"></script>

@{
    ViewBag.Title = "Create";
    string ActionMethod = "Save";
    var dateName = Model.CashRegDocument.Type == "P" ? Loc.ReceivedBillDate : Loc.DateOfIssue;
}

<div id="LocDocumentIsAlreadyConfirmed" class="invisible" data-text="@Loc.DocumentIsAlreadyConfirmed"></div>
<div id="LocYes" class="invisible" data-text="@Loc.Yes"></div>
<div id="LocNo" class="invisible" data-text="@Loc.No"></div>
<input type="hidden" id="SaveAndPrintEnum" value="@InvoiceSaveType.SaveAndPrint" />
<input type="hidden" id="SaveAndPreviewEnum" value="@InvoiceSaveType.SaveAndPreview" />
<input type="hidden" id="ConfirmLoc" value="@Loc.Confirm" />
<input type="hidden" id="PAASPrintByAcKeyAndTypeUrl" value="@Url.Action("PAASPrintByAcKeyAndType", "Move")" />
@Html.Hidden("CashItems", Url.Action("CashItems", "CashTransactions"))
@Html.Hidden("DeleteCashTransaction", Url.Action("Delete", "CashTransactions"))
@Html.Hidden("IndexUrl", Url.Action("Index", "CashTransactions"))
@Html.Hidden("TxtDeleteQuestion", Loc.DeleteQuestionRecord)
@Html.Hidden("TxtConfirm", Loc.Confirm)
@Html.Hidden("TxtCancel", Loc.Cancel)
@Html.Hidden("TxtConfirmation", Loc.Confirmation)
@Html.Hidden("LinkedDocInfo", Loc.LinkedDocInfo)
@Html.Hidden("LinkedDocInfo2", Loc.LinkedDocInfo2)
@Html.Hidden("TxtCashRegSaveText", Loc.DocumentConfirmedSaveQuestion)
@Html.Hidden("IsEditMode", Model.IsEditMode)
@Html.Hidden("PrevAcKey", Model.CashRegDocument.PrevAcKey)
@Html.Hidden("NextAcKey", Model.CashRegDocument.NextAcKey)
@Html.Hidden("ItemList", Url.Action("Index", "CashTransactions", new { page = PageType.TableView, type = Model.CashRegDocument.Type }))

@{
    var mutedClass = string.IsNullOrEmpty(Model.CashRegDocument.AcKey) ? string.Empty : "muted-background";
}

@using (Html.BeginForm(ActionMethod, "CashTransactions", null, FormMethod.Post, new { @id = "cashRegisterForm" }))
{
    @Html.Hidden("redirectToCreate", "false")

    @Html.HiddenFor(m => m.CashRegDocument.AcKey);
    @Html.HiddenFor(m => m.CashRegDocument.Type);
    <input id="formSubmit" type="submit" hidden="hidden" />
    <input class="hidden" id="AcKey" value="@Model.CashRegDocument.AcKey" />
    <input class="hidden" id="PmKey" value="@Model.CashRegDocument.PaymentMethodId" />
    <input class="hidden" id="PmTxt" value="@Model.CashRegDocument.PaymentMethod" />

    <div id="cash-tabbed-buttons" class="row buttons-tabbed">
        @if (string.IsNullOrWhiteSpace(Model.CashRegDocument.AcKey))
        {
            @Html.Partial("_FormButtons", new FormButtonsViewModel
           {
               BackUrl = Url.Action("Index", "CashTransactions"),
               SaveButtonGroup = new FormButtonGroup
               {
                   Buttons = new List<FormButton>
                   {
                       new FormButton { OnClick = "return saveCashReg()" }
                   }
               }
           })
        }

        @if (!string.IsNullOrWhiteSpace(Model.CashRegDocument.AcKey))
        {
            @Html.Partial("_FormButtons", new FormButtonsViewModel
            {
                DeleteButtonGroup = new FormButtonGroup
                {
                    Buttons = new List<FormButton>
                         {
                             new FormButton { OnClick="deleteCashTransaction('" + Model.CashRegDocument.AcKey + "','" + Model.CashRegDocument.Type + "')" }
                         }
                },
                BackUrl = Url.Action("Index", "CashTransactions"),
                SaveButtonGroup = new FormButtonGroup
                {
                    Buttons = new List<FormButton>
                          {
                              new FormButton { OnClick = "return saveCashReg()" }
                          }
                },
                PrintType = ReportFormName.CashTransactions,
                PrintMenuButtonGroup = ReportsHelper.FormatReportTree(
                    Model.ReportTreeViewModel,
                    "print('" + InvoiceSaveType.SaveAndPrint + "', '{0}')",
                    "print('" + InvoiceSaveType.SaveAndPreview + "', '{0}')"
                ),
           })
        }

        <button title="@Loc.New" id="newInvoice" onclick="createNewInvoice('@Url.Action("Index", "CashTransactions")', 'DocType', '@Model.CashRegDocument.Type')"
           class="btn btn-default btn-outline pull-right">
            <i class="fas fa-plus m-r-xs"></i>
            <span class="visible-lg-inline">@Loc.New</span>
        </button>
    </div>

    <div class="divided-content">
        <div class="divided-content-main">
            <!--header-->
            <div class="row document-head">
                <div class="col-md-3 col-sm-6 @mutedClass">
                    <div class="form-group" disabled="@Model.IsEditMode ? 'disabled' : ''">
                        @Html.LabelFor(model => model.CashRegDocument.DocumentType, Loc.DocumentType, new { @class = "control-label" })
                        <div>
                            <select name="CashRegDocument.DocumentType"
                                    data-placeholder="@Loc.DocTypeShort"
                                    class="form-control select2withAPI"
                                    data-url="@Url.Action("GetDocumentTypes", "CashTransactions", new { type = Model.CashRegDocument.Type })"
                                    id="DocType"
                                    data-column-names="@Loc.DocType,@Loc.Name"
                                    data-bootstrap-columns="col-md-4,col-md-8"
                                    data-selector-separator=" - "
                                    data-search-width="500"
                                    onchange="ChangeFormValue('@Model.CashRegDocument.DocumentType', 'DocType');"
                                    required>
                                <option value="@Model.CashRegDocument.DocumentType" selected="selected">@Model.DocumentTypeText</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 col-sm-6">
                    <div class="form-group">
                        @Html.LabelFor(model => model.CashRegDocument.SubjectId, Loc.Subject, new { @class = "control-label" })
                        <div>
                            <select id="Subject"
                                    name="CashRegDocument.SubjectId"
                                    data-placeholder="@Loc.PickSubject"
                                    class="form-control select2withAPI"
                                    data-url=@Url.Action("SearchSubjects", "TravelOrdersDistances")
                                    data-column-names="@Loc.Company,@Loc.Name,@Loc.Address,@Loc.Post"
                                    data-bootstrap-columns="col-md-4,col-md-4,col-md-3,col-md-1"
                                    data-splitter=","
                                    data-search-width="800"
                                    onchange="ChangeFormValue('@Model.CashRegDocument.SubjectId', 'Subject');">
                                <option selected="selected">@Model.CashRegDocument.SubjectId</option>
                            </select>
                        </div>
                        @Html.ValidationMessageFor(m => m.CashRegDocument.SubjectId, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="col-md-2 col-sm-6">
                    <div class="form-group">
                        @Html.LabelFor(model => model.CashRegDocument.PaymentMethod, Loc.PaymentMethod, new { @class = "control-label" })
                        <div>
                            <select name="CashRegDocument.PaymentMethodId"
                                    data-placeholder="@Loc.PaymentMethod"
                                    class="form-control select2withAPI"
                                    data-url="@Url.Action("GetPaymentMethods", "CashTransactions")"
                                    id="PaymentMethodId"
                                    data-column-names="@Loc.PaymentMethod,@Loc.Name"
                                    data-bootstrap-columns="col-md-4,col-md-8"
                                    data-selector-separator=" - "
                                    data-search-width="400"
                                    onchange="ChangeFormValue('@Model.CashRegDocument.PaymentMethodId', 'PaymentMethodId');"
                                    required>
                                <option value="@Model.CashRegDocument.PaymentMethodId" selected="selected">@Model.PaymentMethodText</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="col-md-2 col-sm-6">
                    <div class="form-group">
                        @Html.LabelFor(model => model.CashRegDocument.Status, Loc.Status, new { @class = "control-label" })
                        <div>
                            <select name="CashRegDocument.Status"
                                    data-placeholder="@Loc.Status"
                                    class="form-control select2withAPI"
                                    data-url="@Url.Action("GetStatuses", "CashTransactions")"
                                    id="DocStatus"
                                    data-column-names="@Loc.Status,@Loc.Name"
                                    data-bootstrap-columns="col-md-4,col-md-8"
                                    data-selector-separator=" - "
                                    data-search-width="400"
                                    required>
                                <option value="@Model.CashRegDocument.Status" selected="selected">@Model.DocumentStatusText</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="col-md-2 col-sm-12 document-head-disabled-input">
                    <div class="form-group">
                        @Html.LabelFor(model => model.CashRegDocument.AcKeyView, Loc.AcKey, new { @class = "control-label m-t-xs" })
                        <div>
                            @Html.HiddenFor(model => model.CashRegDocument.AcKeyView)
                            <h4 class="control-label @(string.IsNullOrEmpty(Model.CashRegDocument.AcKey) ? "hidden" : string.Empty)" id="AcKeyDisplayContainer">
                                <div class="prev-next-key-display">
                                    <i class="fa fa-chevron-left" onclick="prevNeighbour('@Model.CashRegDocument.PrevAcKey')"></i>
                                    <span title="@Loc.OpenReceiptsExpendituresList" onclick="goToList('@Model.CashRegDocument.AcKey', '@Model.CashRegDocument.Date.Value.ToString("o")')">@Model.CashRegDocument.AcKeyView</span>
                                    <i class="fa fa-chevron-right" onclick="nextNeighbour('@Model.CashRegDocument.NextAcKey')"></i>
                                </div>
                            </h4>
                        </div>
                    </div>
                </div>
            </div>

            <!--Cash items-->
            <div class="row document-body">
                <!-- Placeholder P -->
                <div id="placeholderP" class="invisible placeholder placeholder-coins-up">
                    <span class="placeholder-text">@Loc.CashTransReceiptPlaceholder</span>
                </div>
                <!-- Placeholder I -->
                <div id="placeholderI" class="invisible placeholder placeholder-coins-down">
                    <span class="placeholder-text">@Loc.CashTransExpPlaceholder</span>
                </div>
                <!-- Cash Items -->
                <div id="tblCashItemsDiv"></div>
            </div>

            <!--footer-->
            <div id="footer-cash-transactions" class="row document-footer">
                <div class="col-md-5 col-xs-12">
                    <div class="form-group text-center" onclick="openInvoiceNoteModal()">
                        @Html.LabelFor(model => model.CashRegDocument.Note, Loc.Note)
                        <i id="noteIcon" class="fa fa-comment clickable-icon @(string.IsNullOrEmpty(Model.CashRegDocument.Note) ? string.Empty : "btn-active")"></i>
                        @Html.TextAreaFor(model => model.CashRegDocument.Note,
                            HtmlAttributesHelper.CreateInputAttributes("form-control", "Note", false, Loc.Note, false, new { @rows = 3, @maxlength = "4096", @class = "hidden" }))
                    </div>
                </div>
                <div class="col-md-2 col-xs-4 document-head-disabled-input">
                    <div class="form-group text-right">
                        <label>@Loc.Total</label>
                        <input type="text"
                               id="nmTotal"
                               class="form-control text-right numberInput"
                               name="CashRegDocument.PaidString"
                               readonly />
                    </div>
                </div>
                <div class="col-md-2 col-xs-4 document-head-disabled-input">
                    <div class="form-group text-right">
                        <label>@Loc.AlreadyPaid</label>
                        <input type="text"
                               id="nmPaid"
                               class="form-control text-right numberInput"
                               value="@Model.CashRegDocument.Value"
                               readonly />
                    </div>
                </div>
                <div class="col-md-3 col-xs-4 document-head-highlight-input">
                    <div class="form-group text-right">
                        <label>@Loc.Difference</label>
                        <div>
                            <span id="nmDifference"></span>
                            <span>@Model.CashRegDocument.Currency</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--right sidebar-->
        <div class="divided-content-side">
            <div class="tabs-container">
                <ul class="nav nav-tabs horizontal-menu text-center">
                    <li class="active divided-tab-1"><a data-toggle="tab" href="#home" class="local-tab">@Loc.BasicData</a></li>
                </ul>
            </div>
            <div class="tab-content">
                <div id="home" class="tab-pane fade in active">
                    <div class="form-horizontal form-md form-right m-t-lg">

                        <div class="form-group">
                            @Html.LabelFor(model => model.CashRegDocument.Date, dateName, new { @class = "col-md-4 control-label" })
                            <div class="col-md-8">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                                    @Html.TextBoxFor(model => model.CashRegDocument.Date, Model.CashRegDocument.Date.HasValue ? Model.CashRegDocument.Date.Value.ToString(Loc.DateFormat) : null,
                                            HtmlAttributesHelper.CreateInputAttributes("form-control custom-datepicker", "Birth", false))
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.HiddenFor(model => model.CashRegDocument.Currency)
                            @Html.LabelFor(model => model.CashRegDocument.Currency, Loc.Currency, new { @class = "col-md-4 control-label" })
                            <div class="col-md-8">
                                <select id="Currency"
                                        name="Currency"
                                        class="form-control select2withAPI"
                                        onchange="onHeaderCurrencyChange()"
                                        data-search-width="100"
                                        data-url=@Url.Action("GetDropDownValues", "GlobalHelper", new { apiPath = "/v1/travel-orders/expenses/currencies-lookupitems" })>
                                    <option selected="selected">@Model.CashRegDocument.Currency</option>
                                </select>
                            </div>
                        </div>

                        <hr />

                        @if (Model.CashRegDocument.DocumentType != null && Model.CashRegDocument.DocumentType.StartsWith("8"))
                        {
                            <div class="form-group">
                                <label class="col-md-4 col-sm-12 text-left-sm control-label">@Loc.Invoice</label>
                                <div class="col-md-4 col-sm-6">
                                    @Html.TextBoxFor(model => model.CashRegDocument.Doc1, Model.CashRegDocument.Doc1,
                                            HtmlAttributesHelper.CreateInputAttributes("form-control", "Doc1", false, Loc.Document + " 1"))
                                </div>
                                <div class="col-md-4 col-sm-6 padding-left-none-sm padding-left-none-md padding-left-none-lg">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="far fa-calendar alt"></i>
                                        </span>
                                        @Html.TextBoxFor(model => model.CashRegDocument.DateDoc1, Model.CashRegDocument.DateDoc1.HasValue ? Model.CashRegDocument.DateDoc1.Value.ToString(Loc.DateFormat) : null,
                                            HtmlAttributesHelper.CreateInputAttributes("form-control custom-datepicker", "DateDoc1", false, Loc.Date + " 1"))
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-4 col-sm-12 text-left-sm control-label">@Loc.OrderForm</label>
                                <div class="col-md-4 col-sm-6">
                                    @Html.TextBoxFor(model => model.CashRegDocument.Doc2, Model.CashRegDocument.Doc2,
                                            HtmlAttributesHelper.CreateInputAttributes("form-control", "Doc2", false, Loc.Document + " 2"))
                                </div>
                                <div class="col-md-4 col-sm-6 padding-left-none-sm padding-left-none-md padding-left-none-lg">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="far fa-calendar alt"></i>
                                        </span>
                                        @Html.TextBoxFor(model => model.CashRegDocument.DateDoc2, Model.CashRegDocument.DateDoc2.HasValue ? Model.CashRegDocument.DateDoc2.Value.ToString(Loc.DateFormat) : null,
                                            HtmlAttributesHelper.CreateInputAttributes("form-control custom-datepicker", "DateDoc2", false, Loc.Date + " 2"))
                                    </div>
                                </div>
                            </div>

                            <hr />
                        }

                        <div class="form-group">
                            @Html.LabelFor(model => model.CashRegDocument.Name, Loc.Title, new { @class = "col-md-4 control-label" })
                            <div class="col-md-8">
                                @Html.EditorFor(model => model.CashRegDocument.Name,
                                    new { htmlAttributes = new { @id = "document-name", @class = "form-control", @autocomplete = "off", @title = Model.CashRegDocument.Name } })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.CashRegDocument.Clerk, Loc.Clerk, new { @class = "col-md-4 control-label" })
                            <div class="col-md-8">
                                @Html.EditorFor(model => model.CashRegDocument.Clerk,
                                        new { htmlAttributes = new { @class = "form-control", @autocomplete = "off", @disabled = "disabled" } })
                            </div>
                        </div>


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

<div class="modal inmodal fade" id="invoiceNoteModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" 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="exampleModalLabel"></h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="item-note" class="control-label">@Loc.Note:</label>
                        <textarea class="form-control" id="item-note" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveInvoiceNote()" data-dismiss="modal">@Loc.Save</button>
            </div>
        </div>
    </div>
</div>

@Scripts.Render("~/bundles/cashTransactions")
@Scripts.Render("~/bundles/moment")
@Scripts.Render("~/bundles/fileDisplay")
@Scripts.Render("~/bundles/wizardHelper")

<script language="JavaScript" type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
@Scripts.Render("~/bundles/globalHelpers")
<script src="~/Scripts/custom/initializers.js"></script>

<script>
    //var select2_open;
    //$(document).on('focus', '.select2-selection--single', function (e) {
    //    select2_open = $(this).parent().parent().siblings('select');
    //    select2_open.select2('open');
    //});

    $(document).ready(function () {
        reloadItems();

        if ($("#IsEditMode").val() == "True") {
            $("#DocType").attr("disabled", "disabled");
            $("#printButton").attr("disabled", false);
            $("#printButton + button").prop("disabled", false);
        }

        if (@Model.CashRegDocument.IsNew.ToString().ToLower() == true) {
            setTimeout(() => {
                $("#Subject").select2('open').next().find(".select2-selection--single").focus();
            }, 700);
        }

        disableChangeAcKey();
    });
</script>

@* TODO: remove after refactor *@
@section pageScripts{
    @Scripts.Render("~/bundles/validation")
    <script src="~/Scripts/global-script.js"></script>
}

<style>
    .close-btn {
        display: none;
    }

    .select2-selection {
        background-color: unset !important;
    }
</style>
