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

<div class="modal inmodal fade" id="createCommissionModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-xxl" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="form-horizontal form-md">
                    <div class="row">
                        <div class="col-xs-10">
                            <h3>@Loc.CommissionCreation</h3>
                        </div>
                        <div class="col-xs-2 text-right">
                            <a class="btn-transparent m-r-sm" href="@SiteHelpAttributeHelper.GetHelpUrl(HelpIds.ExampleWholesaleCommision)"  target="_blank" title="@Loc.CheckSamples"><i class="fas fa-book-reader clickable-icon"></i></a>
                            <a class="btn-transparent m-r-sm" href="@Loc.CommissionCreateHelpUrl" target="_blank" title="@Loc.CheckInstructions"><i class="fas fa-question clickable-icon"></i></a>
                            <i class="fa fa-times clickable-icon" data-dismiss="modal" title="@Loc.Close"></i>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-7">
                            <div class="form-group">
                                @Html.LabelFor(model => model.DateFrom, Loc.CommissionDateFrom, new {
                                    @class = "col-xs-3 control-label",
                                    @title = Loc.CommissionDateFrom
                                })
                                <div class="col-xs-3">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="far fa-calendar alt"></i>
                                        </span>
                                        @Html.TextBoxFor(model => model.DateFrom, new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1).ToString(Loc.DateFormat),
                                            HtmlAttributesHelper.CreateInputAttributes("form-control datepicker", "CommissionDateFrom", false, Loc.CommissionDateFrom))
                                    </div>
                                    @Html.ValidationMessageFor(model => model.DateFrom, "", new { @class = "text-danger", @id = "CommissionDateFrom-validation" })
                                </div>
                                <label class="col-xs-1 control-label">@Loc.To.ToLower()</label>
                                <div class="col-xs-3">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="far fa-calendar alt"></i>
                                        </span>
                                        @Html.TextBoxFor(model => model.DateTo, DateTime.Now.ToString(Loc.DateFormat),
                                            HtmlAttributesHelper.CreateInputAttributes("form-control datepicker", "CommissionDateTo", false, Loc.DateOfCalculation))
                                    </div>
                                    @Html.ValidationMessageFor(model => model.DateTo, "", new { @class = "text-danger", @id = "CommissionDateTo-validation" })
                                </div>
                            </div>

                            <div class="form-group">
                                <input id="SavedSupplierId" value="@Model.SupplierId" hidden />
                                @Html.LabelFor(model => model.Supplier, Loc.Supplier, new { @class = "control-label col-xs-3", @title = Loc.Supplier })
                                <div class="col-xs-9">
                                    @Html.TextBoxFor(model => model.Supplier,
                                        HtmlAttributesHelper.CreateInputAttributes("form-control typeahead_3 typeahead_large", "CommissionSupplier", false, Loc.Supplier))
                                    @Html.ValidationMessageFor(model => model.SupplierId, "", new { @class = "text-danger", @id = "CommissionSupplierId-validation" })
                                </div>
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(model => model.SaleDocTypes, Loc.DocTypeForSale, new { @class = "control-label col-xs-3" })
                                @Html.HiddenFor(model => model.SaleDocTypes)
                                <div class="col-xs-9">
                                    @Html.DropDownList("SaleDocTypes", new SelectList(ViewBag.CommissionDocumentTypesSale != null ? ViewBag.CommissionDocumentTypesSale : new List<string>(), "Id", "Value"),
                                        HtmlAttributesHelper.CreateInputAttributes("form-control selectpicker", "CommissionSaleDocTypes", false, Loc.DocTypeForSale, true, new { @multiple = "multiple", @title = Loc.Select }))
                                    @Html.ValidationMessageFor(model => model.SaleDocTypes, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>

                        <div class="col-xs-5">
                            <div class="form-group">
                                @Html.LabelFor(model => model.CreateDate, Loc.CreationDate, new {
                                    @class = "col-xs-4 control-label",
                                    @title = Loc.CreationDate
                                })
                                <div class="col-xs-4">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="far fa-calendar alt"></i>
                                        </span>
                                        @Html.TextBoxFor(model => model.CreateDate, DateTime.Now.ToString(Loc.DateFormat),
                                            HtmlAttributesHelper.CreateInputAttributes("form-control datepicker", "CommissionCreateDate", false, Loc.CreationDate))
                                    </div>
                                    @Html.ValidationMessageFor(model => model.CreateDate, "", new { @class = "text-danger", @id = "CommissionCreateDate-validation" })
                                </div>
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(model => model.CreateDocType, Loc.CommissionDocType, new { @class = "control-label col-xs-4" })
                                @Html.HiddenFor(model => model.CreateDocType)
                                <div class="col-xs-8">
                                    @Html.DropDownListFor(model => model.CreateDocType, new SelectList(ViewBag.CreateCommissionDocumentTypes != null ? ViewBag.CreateCommissionDocumentTypes : new List<string>(), "Id", "Value", "KO00"),
                                        HtmlAttributesHelper.CreateInputAttributes("form-control custom-select", "CommissionCreateDocType", false, Loc.CommissionDocType, true))
                                    @Html.ValidationMessageFor(model => model.CreateDocType, "", new { @class = "text-danger", @id = "CommissionCreateDocType-validation" })
                                </div>
                            </div>

                            <div class="text-right">
                                <button type="button" class="btn btn-primary" onclick="browseCommissions()"><i class="fa fa-search m-r-xs"></i>@Loc.Browse</button>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div id="placeholderCommissions" class="placeholder placeholder-modal placeholder-clipboard-coins"><span class="placeholder-text">@Loc.CommissionItemsPlaceholderText</span></div>
                        <div id="commissionTableContainer" class="project-list commissionsTable m-t-sm invisible">
                            <table id="commissionsGrid" class="table" data-height="400px">
                                <thead>
                                    <tr>
                                        <th width="20%">@Loc.Supplier</th>
                                        <th width="15%">@Loc.Document</th>
                                        <th width="15%">@Loc.Ident</th>
                                        <th width="33%">@Loc.Title</th>
                                        <th width="12%" class="dt-head-right">@Loc.Quantity</th>
                                        <th width="5">@Loc.UM</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="col-xs-12">
                    <button type="button" class="btn btn-transparent" data-dismiss="modal" onclick=""><i class="fa fa-times m-r-xs"></i>@Loc.Cancel</button>
                    <button type="button" id="createCommissionBtn" class="btn btn-primary" data-dismiss="modal" onclick="createCommissionDocument()" disabled>
                        <i class="fa fa-check m-r-xs"></i>@Loc.CreateDocument
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>