@model MerchandiseReturnModel
@using Grand.Web.Models.Orders;
@inject IPageHeadBuilder pagebuilder
@{
    Layout = "_SingleColumn";

    //title
    pagebuilder.AddTitleParts(Loc["Title.ReturnItems"]);
}
<div class="page return-request-page">
    <h1 class="text-center generalTitle h2">@string.Format(Loc["MerchandiseReturns.Title"], Model.OrderNumber)</h1>
    @if (!String.IsNullOrEmpty(Model.Result))
    {
        <div class="result alert alert-info">
            @Html.Raw(Model.Result)
        </div>
    }
    else
    {
        @if (!String.IsNullOrEmpty(Model.Error))
        {
            <div class="result alert alert-danger">
                @Model.Error
            </div>
        }
        <validation-observer v-slot="{ handleSubmit }">
            <form asp-route="MerchandiseReturn" method="post" ref="form" v-on:submit.prevent="handleSubmit(formSubmit)">
                <div class="mt-2">
                    <h2 class="h5 mt-3"><strong>@Loc["MerchandiseReturns.SelectProduct(s)"]</strong></h2>
                    <div class="table-responsive">
                        <table class="table table-hover merchandise-table data-table">
                            <colgroup>
                                <col />
                                <col width="200" />
                                <col width="150" />
                            </colgroup>
                            <thead class="table-inverse">
                                <tr>
                                    <th class="product">
                                        @Loc["MerchandiseReturns.Products.Name"]
                                    </th>
                                    <th class="unit-price">
                                        @Loc["MerchandiseReturns.Products.Price"]
                                    </th>
                                    <th class="quantity">
                                        @Loc["MerchandiseReturns.Products.Quantity"]
                                    </th>
                                    <th>
                                        @Loc["MerchandiseReturns.ReturnReason"]
                                    </th>
                                    <th>
                                        @Loc["MerchandiseReturns.ReturnAction"]
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @{
                                    int index = 0;
                                }
                                <tr>
                                    <td>
                                        <validation-provider tag="div" rules="required|exact_length:1,@Loc["merchandisereturns.noitemssubmitted"]" v-slot="{ errors, classes }">
                                            @foreach (var item in Model.Items)
                                            {
                                                index++;
                                                <div>
                                                    <label class="custom-control custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input" v-model="merchandisereturns.checkboxes" value="@index" @@change="merchandisereturns.allowed($event.target ,'quantity@(item.Id)')" name="checkbox_@(item.Id)" id="check_@(item.Id)">
                                                        <span class="custom-control-label"></span>
                                                        <span class="custom-control-description"></span>
                                                    </label>
                                                </div>
                                            }
                                            <span class="field-validation-error" v-if="errors[0]">{{ errors[0] }}</span>
                                        </validation-provider>
                                    </td>
                                </tr>
                                <tr>
                                    @foreach (var item in Model.Items)
                                    {
                                        index++;
                                            <td>
                                                <div class="product">
                                                    <a href="@Url.RouteUrl("Product", new { SeName = item.ProductSeName })">@item.ProductName</a>
                                                    @if (!String.IsNullOrEmpty(item.AttributeInfo))
                                                    {
                                                        <a id="attributes-btn" class="btn btn-sm btn-outline-info" v-b-tooltip.html.right.hover title="@Html.Raw(item.AttributeInfo)">Attributes</a>
                                                    }
                                                    @if (!String.IsNullOrEmpty(item.VendorName))
                                                    {
                                                        <div class="vendor">
                                                            @item.VendorName
                                                        </div>
                                                    }
                                                </div>
                                                <div class="unit-price">
                                                    @item.UnitPrice
                                                </div>
                                                <div class="quantity">
                                                    <validation-provider tag="div" rules="required" v-slot="{ errors, classes }">
                                                        <select data-val-required="@(string.Format(Loc["Fields.IsRequired"], Loc["MerchandiseReturns.Products.Quantity"]))" v-bind:class="[classes , 'custom-select form-control']" disabled="disabled" v-model="merchandisereturns.quantity_@(item.Id)" ref="quantity@(item.Id)" name="quantity@(item.Id)">
                                                            @for (int i = 0; i <= item.Quantity; i++)
                                                            {
                                                                <option value="@(i)">@(i)</option>
                                                            }
                                                        </select>
                                                        <span class="field-validation-error">{{ errors[0] }}</span>
                                                    </validation-provider>
                                                </div>
                                                <div>
                                                    @{
                                                        var reasonsSelectList = Model.AvailableReturnReasons.Select(x => new SelectListItem
                                                        {
                                                            Text = x.Name,
                                                            Value = x.Id.ToString()
                                                        }).ToList();
                                                    }
                                                    <select asp-for="@item.MerchandiseReturnReasonId" asp-items="@reasonsSelectList" name="reason@(item.Id)" class="form-control custom-select return-reasons"></select>
                                                </div>
                                                <div>
                                                    @{
                                                        var actionsSelectList = Model.AvailableReturnActions.Select(x => new SelectListItem
                                                        {
                                                            Text = x.Name,
                                                            Value = x.Id.ToString()
                                                        }).ToList();
                                                    }
                                                    <select asp-for="@item.MerchandiseReturnReasonId" asp-items="@actionsSelectList" name="action@(item.Id)" class="form-control custom-select return-actions"></select>
                                                </div>
                                            </td>
                                        }
                                    </tr>
                                </tbody>
                        </table>
                    </div>
                </div>
                <div class="form-fields">
                    <div class="form-group">
                        <label asp-for="Comments" class="col-form-label">@Loc["MerchandiseReturns.Comments"]:</label>
                        <textarea asp-for="Comments" class="form-control comment"></textarea>
                        <span asp-validation-for="Comments"></span>
                    </div>
                    @if (Model.ShowPickupAddress)
                    {
                        <div class="form-group">
                            <div class="pickup-addresses" id="pickup-addresses-form">
                                @if (Model.ExistingAddresses.Any())
                                {
                                    <div class="section select-pickup-address">
                                        <label for="pickup-address-select">@Loc["MerchandiseReturns.SelectPickupAddressOrEnterNewOne"]</label>
                                        <div>
                                            <select name="pickup_address_id" id="pickup-address-select" class="custom-select address-select"
                                                    title="" @@change="merchandisereturns.isNewAddress()">
                                                @foreach (var address in Model.ExistingAddresses)
                                                {
                                                    var addressLine = "";
                                                    addressLine += address.FirstName;
                                                    addressLine += " " + address.LastName;
                                                    if (address.StreetAddressEnabled && !String.IsNullOrEmpty(address.Address1))
                                                    {
                                                        addressLine += ", " + address.Address1;
                                                    }
                                                    if (address.CityEnabled && !String.IsNullOrEmpty(address.City))
                                                    {
                                                        addressLine += ", " + address.City;
                                                    }
                                                    if (address.StateProvinceEnabled && !String.IsNullOrEmpty(address.StateProvinceName))
                                                    {
                                                        addressLine += ", " + address.StateProvinceName;
                                                    }
                                                    if (address.ZipPostalCodeEnabled && !String.IsNullOrEmpty(address.ZipPostalCode))
                                                    {
                                                        addressLine += " " + address.ZipPostalCode;
                                                    }
                                                    if (address.CountryEnabled && !String.IsNullOrWhiteSpace(address.CountryName))
                                                    {
                                                        addressLine += ", " + address.CountryName;
                                                    }
                                                    <option selected="@(!Model.NewAddressPreselected && Model.ExistingAddresses[0].Id == address.Id)" value="@(address.Id)">@(addressLine)</option>
                                                }
                                                <option value="" selected="@Model.NewAddressPreselected">@Loc["MerchandiseReturns.NewAddress"]</option>
                                            </select>
                                        </div>
                                    </div>
                                }
                                <template v-if="merchandisereturns.newAddress">
                                    <div class="section new-pickup-address" id="pickup-new-address-form" ref="visible">
                                        <div class="enter-address">
                                            @{
                                                var dataDictAddress = new ViewDataDictionary(ViewData);
                                                dataDictAddress.TemplateInfo.HtmlFieldPrefix = "MerchandiseReturnNewAddress";
                                                <partial name="Partials/CreateOrUpdateAddress" model="Model.NewAddress" view-data="dataDictAddress" />
                                            }
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                    }
                    @if (Model.ShowPickupDate)
                    {
                        if (Model.PickupDateRequired)
                        {
                            <div class="form-group">
                                <validation-provider tag="div" rules="required" name="PickupDate" v-slot="{ errors, classes }">
                                    <label class="col-form-label">@Loc["MerchandiseReturns.PickupDate"]:</label>
                                    <span class="required">*</span>
                                    <input asp-for="PickupDate" type="date" v-model="merchandisereturns.PickupDate" v-bind:class="[classes , 'form-control datepicker']" />
                                    <span class="field-validation-error">{{ errors[0] }}</span>
                                </validation-provider>
                            </div>   
                        } else { 
                            <div class="form-group">
                                <label class="col-form-label">@Loc["MerchandiseReturns.PickupDate"]:</label>
                                <input asp-for="PickupDate" type="date" v-model="merchandisereturns.PickupDate" class="form-control datepicker" />
                            </div>
                        }
                    }
                </div>
                <div class="row">
                    <div class="col-12 btn-group mt-1 mb-1">
                        <input type="submit" name="submit-return-request" class="btn btn-secondary submit-return-request-button" value="@Loc["MerchandiseReturns.Submit"]" />
                    </div>
                </div>
            </form>
        </validation-observer>
    }
</div>
<script asp-location="Footer" asp-order="300">
    var merchandisereturns = new Vue({
        data: () => ({
            @if (Model.ShowPickupDate)
            {
                <text>
                    PickupDate: '@Html.Raw(Model.PickupDate)',
                </text>
            }
            newAddress: false,
            @foreach (var item in Model.Items)
            {
                <text>quantity_</text> @item.Id <text>: '0',</text>
            }
            checkboxes: []
        }),
        methods: {
            allowed(checkbox,element) {
                if (checkbox.checked) {
                    vm.$refs[element].removeAttribute("disabled");
                } else {
                    vm.$refs[element].setAttribute("disabled", "disabled");
                }
            },
            isNewAddress() {
                if (document.getElementById('pickup-address-select') !== null) {
                    const value = document.getElementById('pickup-address-select').value;
                    if (value === '') {
                        this.newAddress = true;
                    } else {
                        this.newAddress = false;
                    }
                } else {
                    this.newAddress = true;
                }
            }
        },
        created() {
            this.isNewAddress();
        }
    });
</script>