<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:dx="http://schemas.devexpress.com/maui"
             xmlns:dxi="clr-namespace:DevExpress.Maui.Core.Internal;assembly=DevExpress.Maui.Core"
             x:Class="CrmDemo.Views.OrderEditPage"
             Title="Order">
    <dxi:DXPageExtension.ToolbarItems>
        <dxi:DXToolbarItem Text="Save" Clicked="OnSaveToolbarItemClicked"/>
    </dxi:DXPageExtension.ToolbarItems>
    <ScrollView>
        <VerticalStackLayout Padding="16,17,16,34">
            <Label Text="Order information" TextColor="{dx:ThemeColor OnSurface}" VerticalOptions="Center" FontSize="16" FontAttributes="Bold" />
            <dx:DataFormView x:Name="dataForm" DataObject="{Binding Item}" BackgroundColor="Transparent"
                EditorLabelColor="{dx:ThemeColor Primary}"
                IsAutoGenerationEnabled="False" ContentPadding="0" Margin="0,8,0,0">
                <dx:DataFormComboBoxItem FieldName="Customer" ReturnType="Next" IsLabelVisible="False"
                    InplaceLabelText="Customer" IsInplaceLabelFloating="True" DisplayMember="FullName" PickerShowMode="Page"
                    ItemsSource="{Binding DataControlContext.Customers}"
                />
                <dx:DataFormComboBoxItem FieldName="Employee" ReturnType="Next" IsLabelVisible="False"
                    InplaceLabelText="Responsible Employee" IsInplaceLabelFloating="True" DisplayMember="FullName" PickerShowMode="Page"
                    ItemsSource="{Binding DataControlContext.Employees}"
                />
                <dx:DataFormComboBoxItem x:Name="T1220900_Item" FieldName="State" ReturnType="Next" IsLabelVisible="False"
                    InplaceLabelText="State" IsInplaceLabelFloating="True" PickerShowMode="BottomSheet"
                    ItemsSource="{Binding DataControlContext.States}"
                />
                <dx:DataFormMultilineItem FieldName="Comment" IsLabelVisible="False"
                    InplaceLabelText="Comment" IsInplaceLabelFloating="True"
                />
            </dx:DataFormView>

            <Label Text="Ordered Items" TextColor="{dx:ThemeColor OnSurface}" VerticalOptions="Center" FontSize="16" FontAttributes="Bold" Margin="0,16,0,0" />
            <dx:DXCollectionView
                    x:Name="orderItemsCollectionView"
                    ItemsSource="{Binding Item.Items}"
                    ReduceSizeToContent="True"
                    ItemSeparatorColor="{dx:ThemeColor Key=OutlineVariant}"
                    ItemSeparatorThickness="1" ItemSpacing="5" Margin="0,8,0,0">
                <dx:DXCollectionView.ItemTemplate>
                    <DataTemplate>
                        <Grid ColumnDefinitions="*,Auto" RowDefinitions="*,*" HeightRequest="56" Padding="12,0,0,0">
                            <Label Text="{Binding Product.Name}" FontSize="16" TextColor="{dx:ThemeColor Key=OnSurface}" VerticalOptions="End" />
                            <Label TextColor="{dx:ThemeColor Key=OnSurfaceVariant}" VerticalOptions="Start" Grid.Row="1">
                                <Label.Text>
                                    <MultiBinding StringFormat="{}{0} x {1}">
                                        <Binding Path="Quantity"/>
                                        <Binding Path="Product.UnitPrice"/>
                                    </MultiBinding>
                                </Label.Text>
                            </Label>
                            <Label Text="{Binding Amount, StringFormat='${0}'}"
                                TextColor="{dx:ThemeColor Key=OnSurface}" FontSize="16" FontAttributes="Bold" VerticalOptions="Center" Grid.Column="1" Grid.RowSpan="2"
                            />
                        </Grid>
                    </DataTemplate>
                </dx:DXCollectionView.ItemTemplate>
            </dx:DXCollectionView>

            <dx:ComboBoxEdit x:Name="productComboBox" LabelText="Product" ItemsSource="{Binding DataControlContext.Products}" DisplayMember="Name" PickerShowMode="BottomSheet" Margin="0,14,0,0" />
            <dx:NumericEdit x:Name="quantityEditor" LabelText="Quantity" MinValue="0" StepValue="1" AllowLooping="False" IsUpDownIconVisible="True" UpDownIconAlignment="End" Margin="0,14,0,0" />
            <dx:DXButton Content="Add Product" Padding="16,14" Clicked="OnAddOrderItemClicked" Margin="0,16,0,0" />
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>
