@attribute [Route(RouteConstance.ProductsBulkEdit)]

@using CMSMicroservice.Protobuf.Protos.Products
@using BackOffice.Common.BaseComponents
@using DataModel = CMSMicroservice.Protobuf.Protos.Products.GetAllProductsByFilterResponseModel

<BasePageComponent @ref="_basePage"
                   OnClearFilterClick="OnFilterCleared"
                   OnSubmitClick="OnFilterSubmit">
    <Filters>
        <MudItem xs="12" sm="6" md="3">
            <MudTextField T="string" Clearable="true" Label="عنوان"
                          @bind-Value="@_request.Filter.Title" Variant="Variant.Outlined" Margin="Margin.Dense" />
        </MudItem>
        <MudItem xs="12" sm="6" md="3">
            <MudNumericField T="long?" HideSpinButtons="true" Clearable="true" Label="شناسه محصول"
                             @bind-Value="@_request.Filter.Id" Variant="Variant.Outlined" Margin="Margin.Dense" />
        </MudItem>
        <MudItem xs="12" sm="6" md="3">
            <MudNumericField T="long?" HideSpinButtons="true" Clearable="true" Label="شناسه دسته‌بندی"
                             @bind-Value="@_request.Filter.CategoryId" Variant="Variant.Outlined" Margin="Margin.Dense" />
        </MudItem>
        <MudItem xs="12" sm="6" md="3">
            <MudNumericField T="long?" HideSpinButtons="true" Clearable="true" Label="قیمت"
                             @bind-Value="@_request.Filter.Price" Variant="Variant.Outlined" Margin="Margin.Dense" />
        </MudItem>
    </Filters>
    <Content>
        <MudGrid Spacing="3">
            <MudItem xs="12" md="8">
                <MudPaper Class="pa-3">
                    <MudStack Spacing="2">
                        <MudStack Row="true"
                                  AlignItems="AlignItems.Center"
                                  Justify="Justify.SpaceBetween">
                            <MudText Typo="Typo.h6">ویرایش گروهی محصولات</MudText>
                            <MudChip T="string"
                                     Color="Color.Primary"
                                     Variant="Variant.Filled"
                                     Size="Size.Small">
                                انتخاب‌شده‌ها: @_selectedProductIds.Count
                            </MudChip>
                        </MudStack>

                        <MudDataGrid T="DataModel"
                                     ServerData="@(new Func<GridState<DataModel>, Task<GridData<DataModel>>>(ServerReload))"
                                     Hover="true"
                                     @ref="_gridData"
                                     Height="calc(100vh - 340px)">
                            <ColGroup>
                                <col />
                                <col style="width: 80px;" />
                                <col />
                                <col style="width: 120px;" />
                                <col style="width: 120px;" />
                            </ColGroup>
                            <ToolBarContent>
                                <MudText Typo="Typo.subtitle2">لیست محصولات برای ویرایش گروهی</MudText>
                            </ToolBarContent>
                            <Columns>
                                <TemplateColumn Title="">
                                    <CellTemplate>
                                        <MudCheckBox T="bool" Checked="@_selectedProductIds.Contains(context.Item.Id)"
                                                     CheckedChanged="@((bool checkedValue) => ToggleSelection(context.Item.Id, checkedValue))" />
                                    </CellTemplate>
                                </TemplateColumn>

                                <PropertyColumn Property="x => x.Id" Title="شناسه" />
                                <PropertyColumn Property="x => x.Title" Title="عنوان" />
                                <PropertyColumn Property="x => x.Price" Title="قیمت فعلی" />
                                <PropertyColumn Property="x => x.Discount" Title="تخفیف (%)" />
                                <PropertyColumn Property="x => x.RemainingCount" Title="موجودی" />
                            </Columns>
            <NoRecordsContent>
                <MudAlert Severity="Severity.Info" Dense="true" Variant="Variant.Text" Class="my-4">موردی یافت نشد.</MudAlert>
            </NoRecordsContent>
                            <PagerContent>
                                <MudDataGridPager T="DataModel" PageSizeOptions="@(new int[] { 20, 50, 100 })"
                                                  InfoFormat="سطر {first_item} تا {last_item} از {all_items}"
                                                  RowsPerPageString="تعداد در صفحه" />
                            </PagerContent>
                        </MudDataGrid>
                    </MudStack>
                </MudPaper>
            </MudItem>

            <MudItem xs="12" md="4">
                <MudPaper Class="pa-3">
                    <MudStack Spacing="3">
                        <MudText Typo="Typo.subtitle1">تنظیمات ویرایش گروهی</MudText>

                        <MudDivider />

                        <MudText Typo="Typo.subtitle2">قیمت و تخفیف</MudText>

                        <MudNumericField T="long?"
                                         HideSpinButtons="true"
                                         Label="قیمت جدید (تومان)"
                                         @bind-Value="_newPrice"
                                         Variant="Variant.Outlined"
                                         Margin="Margin.Dense" />

                        <MudNumericField T="int?"
                                         HideSpinButtons="true"
                                         Label="درصد تخفیف جدید"
                                         @bind-Value="_newDiscount"
                                         Variant="Variant.Outlined"
                                         Margin="Margin.Dense" />

                        <MudNumericField T="int?"
                                         HideSpinButtons="true"
                                         Label="درصد تخفیف باشگاه جدید"
                                         @bind-Value="_newClubDiscountPercent"
                                         Variant="Variant.Outlined"
                                         Margin="Margin.Dense" />

                        <MudDivider />

                        <MudText Typo="Typo.subtitle2">وضعیت</MudText>

                        <MudSelect T="bool?"
                                   Label="وضعیت محصول"
                                   Clearable="true"
                                   Variant="Variant.Outlined"
                                   Margin="Margin.Dense"
                                   @bind-Value="_statusEnable">
                            <MudSelectItem T="bool?" Value="@(true)">فعال‌سازی</MudSelectItem>
                            <MudSelectItem T="bool?" Value="@(false)">غیرفعال‌سازی</MudSelectItem>
                        </MudSelect>

                        <MudStack Row="true"
                                  Justify="Justify.FlexEnd"
                                  Spacing="2"
                                  Class="mt-2">
                            <MudButton Variant="Variant.Outlined"
                                       Color="Color.Default"
                                       Disabled="_isApplying"
                                       OnClick="ClearForm">
                                پاک کردن فرم
                            </MudButton>
                            <MudButton Variant="Variant.Filled"
                                       Color="Color.Primary"
                                       Disabled="_isApplying"
                                       OnClick="ApplyBulkChanges">
                                اعمال تغییرات
                            </MudButton>
                        </MudStack>

                        @if (_isApplying)
                        {
                            <MudProgressLinear Indeterminate="true" Color="Color.Primary" />
                        }
                    </MudStack>
                </MudPaper>
            </MudItem>
        </MudGrid>
    </Content>
</BasePageComponent>

