@attribute [Route(RouteConstance.CategoryProducts + "{CategoryId:long?}")]

@using CMSMicroservice.Protobuf.Protos.Products
@using BackOffice.Common.BaseComponents
@using BackOffice.Pages.AutoComplete

<BasePageComponent>
    <Content>
        <MudStack Spacing="3">
            <MudText Typo="Typo.h5">مدیریت محصولات دسته‌بندی (درگ و دراپ)</MudText>

            <MudPaper Class="pa-3">
                <MudStack Spacing="1">
                    <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
                        <MudText Typo="Typo.subtitle2">انتخاب دسته‌بندی:</MudText>
                        <CategoryAutoComplete Value="_selectedCategoryId"
                                              ValueChanged="OnCategoryChanged"
                                              Label="دسته‌بندی" />
                    </MudStack>
                    @if (!string.IsNullOrWhiteSpace(_categoryTitle))
                    {
                        <MudText Typo="Typo.body2">
                            دسته‌بندی انتخاب‌شده: <b>@_categoryTitle</b>
                        </MudText>
                    }
                </MudStack>
            </MudPaper>

            @if (_isLoading)
            {
                <MudProgressLinear Indeterminate="true" Color="Color.Primary" />
            }
            else if (_selectedCategoryId.HasValue)
            {
                <MudGrid>
                    <MudItem xs="12" md="5">
                        <MudPaper Class="pa-3" Style="height:60vh; overflow:auto;">
                            <div class="drag-drop-zone"
                                 @ondrop="@OnDropOnUnselected"
                                 @ondrop:preventDefault
                                 @ondragover="@OnDragOver"
                                 @ondragover:preventDefault>
                                <MudText Typo="Typo.subtitle2" Class="mb-2">
                                    محصولات خارج از این دسته (@UnselectedProducts.Count)
                                </MudText>
                                <MudDivider Class="mb-2" />
                                @if (UnselectedProducts.Count > 0)
                                {
                                    @foreach (var item in UnselectedProducts)
                                    {
                                        <div class="product-item drag-item"
                                             draggable="true"
                                             @ondragstart="@(() => OnDragStart(item.Id))">
                                            <MudChip T="string"
                                                     Variant="Variant.Outlined"
                                                     Color="Color.Default"
                                                     OnClick="@(() => ToggleProduct(item.Id))">
                                                @item.Title
                                            </MudChip>
                                        </div>
                                    }
                                }
                                else
                                {
                                    <MudText Typo="Typo.caption">همه محصولات در این دسته قرار دارند.</MudText>
                                }
                            </div>
                        </MudPaper>
                    </MudItem>

                    <MudItem xs="12" md="2">
                        <MudStack Class="h-100" Justify="Justify.Center" AlignItems="AlignItems.Center" Spacing="2">
                            <MudText Typo="Typo.body2" Align="Align.Center">
                                برای افزودن/حذف محصول، آیتم‌ها را درگ و دراپ کنید.
                            </MudText>
                        </MudStack>
                    </MudItem>

                    <MudItem xs="12" md="5">
                        <MudPaper Class="pa-3" Style="height:60vh; overflow:auto;">
                            <div class="drag-drop-zone"
                                 @ondrop="@OnDropOnSelected"
                                 @ondrop:preventDefault
                                 @ondragover="@OnDragOver"
                                 @ondragover:preventDefault>
                                <MudText Typo="Typo.subtitle2" Class="mb-2">
                                    محصولات داخل این دسته (@SelectedProducts.Count)
                                </MudText>
                                <MudDivider Class="mb-2" />
                                @if (SelectedProducts.Count > 0)
                                {
                                    @foreach (var item in SelectedProducts)
                                    {
                                        <div class="product-item drag-item"
                                             draggable="true"
                                             @ondragstart="@(() => OnDragStart(item.Id))">
                                            <MudChip T="string"
                                                     Variant="Variant.Filled"
                                                     Color="Color.Primary"
                                                     OnClick="@(() => ToggleProduct(item.Id))">
                                                @item.Title
                                            </MudChip>
                                        </div>
                                    }
                                }
                                else
                                {
                                    <MudText Typo="Typo.caption">هنوز محصولی به این دسته اختصاص داده نشده است.</MudText>
                                }
                            </div>
                        </MudPaper>
                    </MudItem>
                </MudGrid>

                <MudStack Row="true" Justify="Justify.FlexEnd" Class="mt-4">
                    <MudButton Color="Color.Primary"
                               Variant="Variant.Filled"
                               Disabled="_isSaving"
                               OnClick="SaveProducts">
                        ذخیره محصولات دسته
                    </MudButton>
                </MudStack>
            }
            else
            {
                <MudText Typo="Typo.body2">
                    برای شروع، یک دسته‌بندی انتخاب کنید.
                </MudText>
            }
        </MudStack>
    </Content>
</BasePageComponent>
