@using NetinaShop.AdminPanel.PWA.Extensions

@inject ISnackbar Snackbar
@inject IRestWrapper RestWrapper
@inject IUserUtility UserUtility
@inject IDialogService DialogService


<MudDialog class="mx-auto">
<DialogContent>
<MudContainer class="h-full">
<MudTabs Outlined="true" Elevation="0" Rounded="true" Centered="true">
<MudTabPanel class="h-full" Text="اطلاعات کلی" Icon="@Icons.Material.Outlined.Info">
    <div class="h-full">
        <MudStack Spacing="0" class="mt-4">

            <MudText Typo="Typo.h6">اطلاعات کلی</MudText>
            <MudText Typo="Typo.caption">اطلاعات کلی محصول را به دقت وارد کنید</MudText>
        </MudStack>
        <MudGrid>

            <MudItem sm="12" lg="4" md="6">
                <MudTextField @bind-Value="@ViewModel.PageDto.PersianName" T="string" Label="نام فارسی محصول" Variant="Variant.Outlined" />
            </MudItem>
            <MudItem sm="12" lg="4" md="6">
                <MudTextField @bind-Value="@ViewModel.PageDto.EnglishName" T="string" Label="نام انگلیسی محصول" Variant="Variant.Outlined" />
            </MudItem>
                            <MudItem sm="12" lg="4" md="6">

                <MudAutocomplete Required="true" ToStringFunc="dto => dto.Name" @bind-Value="@ViewModel.SelectedCategory"
                                 SearchFunc="ViewModel.SearchProductCategory"
                                 T="ProductCategorySDto"
                                 Label="دسته بندی"
                                 Variant="Variant.Outlined">
                    <ProgressIndicatorInPopoverTemplate>
                        <MudList Clickable="false">
                            <MudListItem>
                                <div class="flex flex-row w-full mx-auto">
                                    <MudProgressCircular class="my-auto mr-1 -ml-4" Size="Size.Small" Indeterminate="true" />
                                    <p class="font-bold my-1 mx-auto text-md">منتظر بمانید</p>
                                </div>
                            </MudListItem>
                        </MudList>
                    </ProgressIndicatorInPopoverTemplate>
                    <ItemTemplate Context="e">
                        <p>@e.Name</p>
                    </ItemTemplate>
                </MudAutocomplete>
            </MudItem>
                            <MudItem sm="12" lg="4" md="6">

                <MudAutocomplete Required="true" ToStringFunc="dto => dto.PersianName" @bind-Value="@ViewModel.SelectedBrand"
                                 SearchFunc="ViewModel.SearchBrand"
                                 T="BrandSDto"
                                 Label="برند"
                                 Variant="Variant.Outlined">
                    <ProgressIndicatorInPopoverTemplate>
                        <MudList Clickable="false">
                            <MudListItem>
                                <div class="flex flex-row w-full mx-auto">
                                    <MudProgressCircular class="my-auto mr-1 -ml-4" Size="Size.Small" Indeterminate="true" />
                                    <p class="font-bold my-1 mx-auto text-md">منتظر بمانید</p>
                                </div>
                            </MudListItem>
                        </MudList>
                    </ProgressIndicatorInPopoverTemplate>
                    <ItemTemplate Context="e">
                        <p>@e.PersianName</p>
                    </ItemTemplate>
                </MudAutocomplete>
            </MudItem>
            <MudItem sm="12" lg="4" md="6">
                                <MudTextField @bind-Value="@ViewModel.PageDto.Cost" T="double" Label="قیمت محصول" Adornment="Adornment.End" Format="N0" AdornmentText="ریالــ" Variant="Variant.Outlined" />
            </MudItem>
            <MudItem sm="12" lg="4" md="6">
                                <MudTextField @bind-Value="@ViewModel.PageDto.PackingCost" T="double" Label="مبلغ بسته بندی" Format="N0" Adornment="Adornment.End" AdornmentText="ریالــ" Variant="Variant.Outlined" />
            </MudItem>
            <MudItem sm="12" lg="4" md="6">
                                <MudTextField @bind-Value="@ViewModel.PageDto.Stock" T="int" Format="N0" Label="موجودی انبار" Variant="Variant.Outlined" />
            </MudItem>
            <MudItem sm="12" lg="4" md="6">
                <MudTextField @bind-Value="@ViewModel.PageDto.MaxOrderCount" T="int" Format="N0" Label="بیشترین خرید" Variant="Variant.Outlined" />
            </MudItem>
                            <MudItem sm="12" lg="4" md="6">
                <MudTextField @bind-Value="@ViewModel.PageDto.Warranty" T="string" Label="گارانتی" Variant="Variant.Outlined" />
            </MudItem>
            <MudItem sm="12" lg="4" md="6">
                <MudSelect T="bool" @bind-Value="@ViewModel.PageDto.HasExpressDelivery" Label="آیا ارسال سریع دارد ؟" ToStringFunc="b=>b.ToPersianString()" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter">
                    <MudSelectItem T="bool" Value="true" />
                    <MudSelectItem T="bool" Value="false" />
                </MudSelect>
            </MudItem>
                            <MudItem sm="12" lg="4" md="6">
                <MudSelect T="bool" @bind-Value="@ViewModel.PageDto.BeDisplayed" Label="آیا نمایش داده شود است ؟" ToStringFunc="b=>b.ToPersianString()" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter">
                    <MudSelectItem T="bool" Value="true" />
                    <MudSelectItem T="bool" Value="false" />
                </MudSelect>
            </MudItem>
            <MudItem sm="12" lg="12" md="12">
                <MudStack>
                    <MudTextField @bind-Value="@ViewModel.PageDto.Tags" T="string" Label="تگ ها" HelperText="تگ ها را با , میتوانید جدا کنید" HelperTextOnFocus="true" Variant="Variant.Outlined" />
                </MudStack>
            </MudItem>
                            <MudItem sm="12" lg="12" md="12">
                <MudTextField class="-mt-3" @bind-Value="@ViewModel.PageDto.Summery" T="string" Label="توضیحاتــ" Variant="Variant.Outlined"></MudTextField>
            </MudItem>
        </MudGrid>
    </div>
</MudTabPanel>
<MudTabPanel Text="ویژگی های کلی" Icon="@Icons.Material.Outlined.AutoGraph">
    <div class="min-h-[33rem]">

        <MudStack class="mt-4" Spacing="0">

            <MudText Typo="Typo.h6">ویژگی های کلی</MudText>
            <MudText Typo="Typo.caption">می توانید ویگی های تکمیلی محصول را کامل وارد کنید</MudText>
        </MudStack>
        <MudGrid>

            <MudItem lg="4" md="6">
                <MudTextField @bind-Value="@ViewModel.SpecificationTitle" T="string" Label="عنوان" Variant="Variant.Outlined"></MudTextField>
            </MudItem>

            <MudItem lg="4" md="6">
                <MudTextField @bind-Value="@ViewModel.SpecificationValue" T="string" Label="مقدار" Variant="Variant.Outlined"></MudTextField>
            </MudItem>

            <MudItem lg="4" md="12">
                <MudButton Variant="Variant.Filled"
                           Size="Size.Large"
                           Color="Color.Info"
                           class="w-full py-3 mt-2"
                           OnClick="ViewModel.AddSpecification"
                           StartIcon="@Icons.Material.Outlined.Add">افزودن</MudButton>
            </MudItem>

            <MudItem sm="12">
                <MudDataGrid Items="@ViewModel.Specifications" Elevation="0" Outlined="true" Bordered="true" Striped="true" Filterable="false" SortMode="@SortMode.None" Groupable="false">
                    <Columns>
                        <PropertyColumn Property="x => x.Title" Title="عنوان" />
                        <PropertyColumn Property="x => x.Value" Title="مقدار" />
                        <TemplateColumn T="SpecificationSDto" CellClass="d-flex justify-end">
                            <CellTemplate>
                                <MudStack Row>
                                    <MudButton DisableElevation="true"
                                               Size="@Size.Small"
                                               Variant="@Variant.Filled"
                                               OnClick="()=>ViewModel.RemoveSpecification(context.Item)"
                                               Color="@Color.Error"
                                               StartIcon="@Icons.Material.Outlined.Delete">حذف</MudButton>
                                </MudStack>
                            </CellTemplate>
                        </TemplateColumn>
                    </Columns>
                </MudDataGrid>
            </MudItem>
        </MudGrid>
    </div>
</MudTabPanel>
<MudTabPanel Text="توضیحات تکمیلی" Icon="@Icons.Material.Outlined.Article">

    <div class="min-h-[33rem]">
        <MudStack class="mt-4" Spacing="0">

            <MudText Typo="Typo.h6">توضیحات تکمیلی</MudText>
            <MudText Typo="Typo.caption">می توانید توضیحاتــ تکمیلی محصول را کامل وارد کنید</MudText>
        </MudStack>
        <MudGrid>
            <MudItem sm="12">
                
                <RichTextEditorUi @bind-Text="@ViewModel.PageDto.ExpertCheck"  />

            </MudItem>
        </MudGrid>
    </div>
</MudTabPanel>
<MudTabPanel Text="تـــــصاویر" Icon="@Icons.Material.Outlined.ImageSearch">

    <div class="min-h-[33rem]">
        <MudStack class="mt-4 mb-2" Spacing="0">

            <MudText Typo="Typo.h6">تصاویر محصول</MudText>
            <MudText Typo="Typo.caption">می توانید برای محصول چند تصویر اپلود کنید</MudText>
        </MudStack>
        <MudStack Row="true">
            <MudIconButton HtmlTag="label"
                           Color="Color.Info"
                           Variant="Variant.Outlined"
                           class="w-28 h-28"
                           Size="Size.Large"
                           Icon="@Icons.Material.Outlined.Wallpaper"
                           OnClick="async () => await ViewModel.SelectFileAsync()">
            </MudIconButton>
            @foreach (var item in ViewModel.Files)
            {
                <div class="w-28 h-28">
                    <MudImage Src="@item.GetLink()" Elevation="25" Class="rounded-lg w-28 h-28 absolute" />

                    <MudIconButton DisableElevation="true"
                                   class="absolute m-1.5"
                                   Size="@Size.Small"
                                   Variant="@Variant.Filled"
                                   OnClick="() => ViewModel.RemoveFile(item)"
                                   Color="@Color.Error"
                                   Icon="@Icons.Material.Outlined.Delete" />
                    @if (item.IsHeader)
                    {
                        <p class="bg-pink-500 px-1.5 py-0.5 absolute bottom-0 mr-2 rounded-lg text-white">هدر</p>
                    }
                    @if (item.IsPrimary)
                    {
                        <p class="bg-blue-500 px-1.5 py-0.5 absolute bottom-0 mr-2 rounded-lg text-white">اصلی</p>
                    }
                </div>
            }

        </MudStack>
    </div>

</MudTabPanel>

<MudTabPanel Text="پیشنهاد ویژه" Icon="@Icons.Material.Outlined.LocalOffer">

    <div class="min-h-[33rem]">
        <MudGrid>
                            
            <MudItem sm="12">
                <MudSwitch @bind-Value="@ViewModel.IsSpecialOffer" 
                           class="mt-2" 
                           Size="Size.Large" 
                           T="bool" 
                           Label="آیا محصول در فروش ویژه میباشد ؟" 
                           Color="Color.Info" />
            </MudItem>
                            
            <MudItem md="4">

                <MudSelect Disabled="@ViewModel.IsSpecialOffer.Not()" T="DiscountAmountType" ValueChanged="@ViewModel.AmountTypeChanged" Label="نوع تخفیفـــ" ToStringFunc="b=>b.ToDisplay()" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter">
                    <MudSelectItem T="DiscountAmountType" Value="DiscountAmountType.Percent" />
                    <MudSelectItem T="DiscountAmountType" Value="DiscountAmountType.Amount" />
                </MudSelect>
            </MudItem>

            <MudItem md="4">
                                <MudTextField Disabled="@ViewModel.IsPercentType.Not()" @bind-Value="@ViewModel.Discount.DiscountPercent" Format="N0" T="int" Label="درصد تخفیف" Variant="Variant.Outlined" />
            </MudItem>

            <MudItem md="4">
                <MudTextField Disabled="@ViewModel.IsAmountType.Not()" @bind-Value="@ViewModel.Discount.DiscountAmount" Format="N0" T="long" Label="مبلغ تخفیفــ" Adornment="Adornment.End" AdornmentText="ریالــ" Variant="Variant.Outlined" />
            </MudItem>
                            
                            
            <MudItem sm="6">
                <MudDatePicker Disabled="@ViewModel.IsSpecialOffer.Not()" @bind-Date="@ViewModel.StartDate" UseShortNames="false" TitleDateFormat="dddd, dd MMMM" Label="تاریخ شروع تخفیفــ" Variant="Variant.Outlined" Culture="@PersianCultureInfo.GetPersianCulture()" />

            </MudItem>
            <MudItem sm="6">
                <MudDatePicker Disabled="@ViewModel.IsSpecialOffer.Not()" @bind-Date="@ViewModel.ExpireDate" UseShortNames="false" TitleDateFormat="dddd, dd MMMM" Label="تاریخ پایان تخفیفــ" Variant="Variant.Outlined" Culture="@PersianCultureInfo.GetPersianCulture()" />

            </MudItem>


        </MudGrid>
    </div>
</MudTabPanel>
</MudTabs>
</MudContainer>
</DialogContent>
<DialogActions>
    <MudStack Row="true" class="w-full h-fit mx-4 mb-3 bottom-0">

        @if (ViewModel.IsEditing)
        {
            <BaseButtonUi class="w-64 rounded-md" IsProcessing="@ViewModel.IsProcessing"
                          Icon="@Icons.Material.Outlined.Check"
                          Variant="Variant.Filled" Color="Color.Success"
                          Content="ثبت ویرایش" OnClickCallback="ViewModel.SubmitEditAsync" />
        }
        else
        {
            <BaseButtonUi class="w-64 rounded-md" IsProcessing="@ViewModel.IsProcessing"
                          Icon="@Icons.Material.Outlined.Check"
                          Variant="Variant.Filled" Color="Color.Success"
                          Content="تایید" OnClickCallback="ViewModel.SubmitCreateAsync" />
        }
        <MudSpacer />
        <MudButton Variant="Variant.Outlined" Size="Size.Large" Color="Color.Error" OnClick="ViewModel.Cancel">بستن</MudButton>
    </MudStack>
</DialogActions>
</MudDialog>

@code {
    [CascadingParameter]
    MudDialogInstance MudDialog { get; set; }

    [Parameter]
    public ProductSDto? Product { get; set; }

    public ProductActionDialogBoxViewModel ViewModel { get; set; }

    protected override async Task OnInitializedAsync()
    {
        if (Product == null)
            ViewModel = new ProductActionDialogBoxViewModel(Snackbar, RestWrapper, UserUtility, DialogService, MudDialog);
        else
            ViewModel = new ProductActionDialogBoxViewModel(Snackbar, RestWrapper, UserUtility, DialogService, MudDialog, Product);
        await ViewModel.InitializeAsync();
        await base.OnInitializedAsync();
    }

}