@using PantheonRA.BackOffice.Enums
@using PantheonRA.BackOffice.Models
@{
    ViewBag.Title = Loc.ImportProducts;
}

<div class="wrapper wrapper-content">
    <div class="tabs-container">
        @Html.Partial("~/Views/Products/_CodeListTabNavigation.cshtml")
        <div class="tab-content">
            <div class="row buttons-tabbed">
                @Html.Partial("_FormButtons", new FormButtonsViewModel
                {
                    BackUrl = Url.Action("Index", "Products"),
                    SaveButtonGroup = new FormButtonGroup
                    {
                        Buttons = new List<FormButton>
                        {
                            new FormButton { Text = Loc.Save, Icon = "far fa-print fa-lg", OnClick = "SaveProcessedProducts()" },
                        }
                    },
                })

                <a href="@Url.Action("ImportProducts", "Products")" title="@Loc.UploadAgain" id="uploadAgainBtn"
                   class="btn btn-primary btn-outline pull-right">
                    <i class="fas fa-cloud-upload-alt m-r-xs"></i>
                    <span class="visible-lg-inline visible-md-inline">@Loc.UploadAgain</span>
                </a>
            </div>

            <div id="uploadContainer" class="uploadContainer">
                <h4 class="m-t-sm">@Loc.ImportProductsFileUpload</h4>
                <div class="dropify-large">
                    <form id="importFileForm" class="" data-url="@Url.Action("UploadProductsImportFile", "Products")" method="post" enctype="multipart/form-data">
                        <input name="ImportFile" id="ImportFile" type="file" class="dropify" data-show-errors="false" data-allowed-file-extensions="xlsx xls" />
                    </form>
                </div>
            </div>

            <div id="productTableContainer" class="subjectTableContainer hidden">
                <div class="row document-head">
                    <div class="col-md-2">
                        <h4>@Loc.ShowOnlyErrors</h4>
                        <input id="showOnlyErrors" type="checkbox" class="form-control js-switch" />
                    </div>
                    <div class="col-md-2">
                        <h4>@Loc.NumberOfProductsToBeUpdated</h4>
                        <span class="badge badge-primary" id="productsToUpdateCount">0</span>
                    </div>
                    <div class="col-md-2">
                        <h4>@Loc.NumberOfProductsToBeInserted</h4>
                        <span class="badge badge-primary" id="productsToInsertCount">0</span>
                    </div>
                    <div class="col-md-6">
                        <h4>@Loc.NumberOfErrorsInColumns</h4>
                        <span class="badge badge-danger" id="errorsCount">0</span>
                    </div>
                </div>

                <div class="import-table">
                    <table id="products-grid" class="diplay nowrap dt-scroller" style="width:100%">
                        <thead>
                            <tr>
                                <th data-column-id="Id" data-visible="false"></th>
                                <th data-column-id="HasErrors">@Loc.Status</th>
                                <th data-column-id="AcIdent">@Loc.Ident</th>
                                <th data-column-id="AcName">@Loc.Name</th>
                                <th data-column-id="AcSupplier">@Loc.MainSupplier</th>
                                <th data-column-id="AcCode">@Loc.SuppliersCode</th>
                                <th data-column-id="AcUm">@Loc.MainMeasurementUnit</th>
                                <th data-column-id="AcSetOfItem">@Loc.AccountingType</th>
                                <th data-column-id="AcVatcode">@Loc.VAT</th>
                                <th data-column-id="AnRtprice">@Loc.SellingPrice</th>
                                <th data-column-id="AnWsprice">@Loc.WholesalePriceIdent 1</th>
                                <th data-column-id="AnWsprice2">@Loc.WholesalePriceIdent 2</th>
                                <th data-column-id="AnPrStPrice">@Loc.ProductParts</th>
                                <th data-column-id="AcCurrency">@Loc.Currency</th>
                                <th data-column-id="AcClassif">@Loc.PrimaryClassification</th>
                                <th data-column-id="AcClassif2">@Loc.SecondaryClassification</th>
                                <th data-column-id="AcCustTariff">@Loc.CustomsTariff</th>
                                <th data-column-id="AnPriceSupp">@Loc.SuppliersPrice</th>
                                <th data-column-id="AcVatcodeReceive">@Loc.IdForDDVReceive</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="unitsOptions" hidden>
    <option></option>
    @foreach (var unit in ViewBag.MeasurementUnits)
    {
        <option value="@unit.Id">
            @unit.Id
        </option>
    }
</div>

<div id="typesOptions" hidden>
    <option></option>
    @foreach (var type in ViewBag.Types)
    {
        <option value="@type.Id">
            @type.Id
        </option>
    }
</div>

<div id="primaryClassifOptions" hidden>
    <option></option>
    @foreach (var classif in ViewBag.PrimaryClassif)
    {
        <option value="@classif.Id">
            @classif.Id
        </option>
    }
</div>

<div id="secondaryClassifOptions" hidden>
    <option></option>
    @foreach (var classif in ViewBag.SecondaryClassif)
    {
        <option value="@classif.Id">
            @classif.Id
        </option>
    }
</div>

<div id="taxOptions" hidden>
    <option></option>
    @foreach (var tax in ViewBag.Taxes)
    {
        <option value="@tax.VATCode">
            @tax.VATCode
        </option>
    }
</div>

<div class="modal inmodal fade" id="errorModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <span id="errorModalMessage"></span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="">@Loc.OK</button>
            </div>
        </div>
    </div>
</div>

<input id="processProductsInsertAndUpdateUrl" type="hidden" value="@Url.Action("ProcessProducts", "Products")" />
<input id="processProductsUrl" type="hidden" value="@Url.Action("ProcessProducts", "Products", new { insertAndUpdate = false })" />
<input id="identsIndexUrl" type="hidden" value="@Url.Action("Index", "Products")" />
<input type="hidden" id="DragAndDropOrClick" value="@Loc.UploadExcelMessage" />
<input type="hidden" id="Remove" value="@Loc.Remove" />
<input type="hidden" id="GeneralErrorMessage" value="@Loc.GeneralError" />
<input type="hidden" id="WrongFormat" value="@Loc.WrongFormat" />
<input type="hidden" id="ValidateProductUrl" value="@Url.Action("ProjectValidation", "Products")" />
<input type="hidden" id="selectLoc" value="@Loc.Select" />

@section pageScripts{
    @Scripts.Render("~/bundles/product")
    <script>
        $(document).ready(function () {
            initializeProductsImportProducts();
        });
    </script>
}