<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:viewModels="clr-namespace:CrmDemo.ViewModels.Home"
             xmlns:models="clr-namespace:CrmDemo.DataModel.Models;assembly=CrmDemo.DataModel"
             xmlns:dshViews="clr-namespace:CrmDemo.Views.Dashboards"
             xmlns:dshViewModels="clr-namespace:CrmDemo.ViewModels.Dashboards"
             xmlns:helpers="clr-namespace:CrmDemo.Helpers"
             x:Class="CrmDemo.Views.HomePage"
             x:DataType="viewModels:HomeViewModel"
             Shell.BackgroundColor="{dx:ThemeColor SurfaceContainer}"
             Shell.NavBarHasShadow="False"
             Title="Home View">

    <ContentPage.Resources>
        <helpers:TasksConverter x:Key="TasksConverter" />
        <Style TargetType="Label" x:Key="headerStyle">
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="FontAttributes" Value="Bold"/>
            <Setter Property="TextColor" Value="{dx:ThemeColor Key=OnSurface}"/>
        </Style>
        <Style TargetType="dx:DXButton" BasedOn="{StaticResource cardButtonStyle}" x:Key="cardButtonStyleLocal">
            <Setter Property="Margin" Value="0"/>
            <Setter Property="Padding" Value="16,14"/>
            <Setter Property="PressedScale" Value="1"/>
            <Setter Property="ButtonType" Value="Text" />
            <Setter Property="RippleEffectPosition" Value="Foreground"/>
            <Setter Property="Shadow">
            <Setter.Value>
                <OnPlatform x:TypeArguments="Shadow">
                    <On Platform="Android">
                        <On.Value>
                            <Shadow Brush="{dx:ThemeColor Shadow, Alpha=0.2}" Radius="20" />
                        </On.Value>
                    </On>
                </OnPlatform>
            </Setter.Value>
        </Setter>
        </Style>
    </ContentPage.Resources>

    <ContentPage.Behaviors>
        <dx:SystemBarBehavior
            AndroidNavigationBarBackground="{dx:ThemeColor SurfaceContainer}"
            AndroidStatusBarBackground="{dx:ThemeColor SurfaceContainer}" />
    </ContentPage.Behaviors>

    <ScrollView BackgroundColor="{dx:ThemeColor Key=SurfaceContainer}">
        <Grid RowDefinitions="Auto, Auto, Auto" ColumnDefinitions="*, *" Padding="12" ColumnSpacing="14" RowSpacing="14">
            <dx:DXButton
                Style="{StaticResource cardButtonStyleLocal}"
                MinimumHeightRequest="150"
                VerticalContentAlignment="Fill"
                Command="{Binding Source={x:Reference newOrdersBottomSheet}, Path=Commands.Show}">
                <dx:DXDockLayout>
                    <Label
                        Text="New Orders"
                        dx:DXDockLayout.Dock="Top" VerticalOptions="Start"
                        Style="{StaticResource headerStyle}" />
                    <Label
                        Text="{Binding NewOrdersCount}" FontSize="60"
                        TextColor="{dx:ThemeColor Key=Primary}"
                        FontAttributes="Bold" VerticalOptions="Center" HorizontalOptions="Center"/>
                </dx:DXDockLayout>
            </dx:DXButton>

            <dx:DXButton
                Style="{StaticResource cardButtonStyleLocal}"
                Grid.Column="1"
                MinimumHeightRequest="150"
                VerticalContentAlignment="Fill"
                Command="{Binding Source={x:Reference tasksBottomSheet}, Path=Commands.Show}">
                <dx:DXDockLayout IsClippedToBounds="False">
                    <Label
                        Text="Completed Tasks"
                        dx:DXDockLayout.Dock="Top" VerticalOptions="Start" HorizontalOptions="Center"
                        Style="{StaticResource headerStyle}"/>
                    <dx:RadialGauge Margin="-4,-12,-4,0">
                        <dx:RadialScale Thickness="10" EndValue="{Binding AssignedTasksCount}" StartAngle="180" SweepAngle="180" >
                            <dx:RangeIndicator EndValue="{Binding CompletedAssignedTasksCount}" StartThickness="10" EndThickness="10" />
                        </dx:RadialScale>
                        <dx:RadialGauge.Content>
                            <Label
                                FontSize="28" FontAttributes="Bold"
                                VerticalOptions="End" HorizontalOptions="Center"
                                TextColor="{dx:ThemeColor Key=Primary}"
                                Margin="0,0,0,28">
                                <Label.Text>
                                    <MultiBinding Converter="{StaticResource TasksConverter}">
                                        <Binding Path="CompletedAssignedTasksCount" />
                                        <Binding Path="AssignedTasksCount" />
                                    </MultiBinding>
                                </Label.Text>
                            </Label>
                        </dx:RadialGauge.Content>
                    </dx:RadialGauge>
                </dx:DXDockLayout>
            </dx:DXButton>

            <dx:DXButton
                Style="{StaticResource cardButtonStyleLocal}"
                Grid.Row="1" Grid.ColumnSpan="2"
                MaximumHeightRequest="350"
                Clicked="OnFundsClicked">
                <dx:DXDockLayout InputTransparent="True">
                    <Label
                        Text="Sales (by Month)"
                        dx:DXDockLayout.Dock="Top"
                        Style="{StaticResource headerStyle}"/>
                    <dshViews:OrdersByMonthCoreView>
                        <dshViews:OrdersByMonthCoreView.BindingContext>
                            <dshViewModels:OrdersByMonthViewModel/>
                        </dshViews:OrdersByMonthCoreView.BindingContext>
                    </dshViews:OrdersByMonthCoreView>
                </dx:DXDockLayout>
            </dx:DXButton>

            <dx:DXButton
                Style="{StaticResource cardButtonStyleLocal}"
                Grid.Row="2" Grid.ColumnSpan="2"
                HorizontalContentAlignment="Fill"
                PressedBackgroundColor="Transparent">
                <dx:DXStackLayout>
                    <Grid
                        ColumnDefinitions="*, Auto" RowDefinitions="Auto, Auto"
                        RowSpacing="8">
                        <Label
                            Text="Meetings today"
                            Style="{StaticResource headerStyle}"
                            VerticalTextAlignment="Center" />
                        <dx:DXButton
                            Grid.Column="1"
                            Content="{Binding MeetingsAllCount, StringFormat='All ({0})'}"
                            ButtonType="Text"
                            HorizontalOptions="End" TextColor="{dx:ThemeColor Key=Primary}"
                            BackgroundColor="Transparent"
                            Clicked="OnAllMeetingsClicked"/>
                        <dx:DXCollectionView
                            Grid.ColumnSpan="2" Grid.Row="1"
                            ReduceSizeToContent="True"
                            ItemsSource="{Binding MeetingsToday}"
                            DisplayMember="Subject"
                            ItemSpacing="8"
                            Tap="OnMeetingsListItemTap">
                            <dx:DXCollectionView.ItemTemplate>
                                <DataTemplate x:DataType="models:Meeting">
                                    <dx:DXDockLayout
                                        Padding="12,8"
                                        BackgroundColor="{dx:ThemeColor Key=SurfaceVariant}"
                                        CornerRadius="8">
                                        <Label
                                            dx:DXDockLayout.Dock="Right"
                                            Text="{Binding StartTime, StringFormat='{0:h:mm tt}'}"
                                            FontSize="14"
                                            TextColor="{dx:ThemeColor Key=OnSurface}"/>
                                        <Label
                                            Text="{Binding Subject}"
                                            FontSize="14" FontAttributes="Bold"
                                            TextColor="{dx:ThemeColor Key=OnSurface}"/>
                                    </dx:DXDockLayout>
                                </DataTemplate>
                            </dx:DXCollectionView.ItemTemplate>
                        </dx:DXCollectionView>
                    </Grid>
                </dx:DXStackLayout>
            </dx:DXButton>

            <dx:BottomSheet x:Name="newOrdersBottomSheet" HalfExpandedRatio="0.4">
                <dx:DXDockLayout VerticalSpacing="8">
                    <Label Text="New Orders" HorizontalOptions="Center" Style="{StaticResource headerStyle}" dx:DXDockLayout.Dock="Top" />
                    <dx:DXCollectionView ItemsSource="{Binding NewOrders}" ReduceSizeToContent="False" 
                        ItemSeparatorThickness="1" ItemSeparatorCapMargin="12" ItemSeparatorColor="{dx:ThemeColor OutlineVariant}"
                        UseRippleEffect="True" VerticalOptions="Fill" dx:DXDockLayout.Dock="Top"
                        Tap="OnOrdersListItemTap">
                        <dx:DXCollectionView.ItemTemplate>
                            <DataTemplate x:DataType="models:Order">
                                <Grid Padding="12" RowSpacing="4" RowDefinitions="Auto,Auto" ColumnDefinitions="*,Auto">
                                    <Label
                                        Text="{Binding Employee.FullName}"
                                        FontSize="16" FontAttributes="Bold"
                                        TextColor="{dx:ThemeColor Key=OnSurface}"/>
                                    <Label
                                        Grid.Row="1"
                                        Text="{Binding Items.Count, StringFormat='{0} items'}"
                                        FontSize="16"
                                        TextColor="{dx:ThemeColor Key=OnSurfaceVariant}"/>
                                    <Label
                                        Grid.Column="1" Grid.RowSpan="2"
                                        Text="{Binding TotalAmount, StringFormat='{0:c}'}"
                                        FontSize="16" FontAttributes="Bold"
                                        TextColor="{dx:ThemeColor Key=OnSurface}"
                                        VerticalOptions="Center"/>
                                </Grid>
                            </DataTemplate>
                        </dx:DXCollectionView.ItemTemplate>
                    </dx:DXCollectionView>
                </dx:DXDockLayout>
            </dx:BottomSheet>

            <dx:BottomSheet x:Name="tasksBottomSheet" HalfExpandedRatio="0.4">
                <dx:DXStackLayout Orientation="Vertical" ItemSpacing="8">
                    <Label Text="Incomplete Tasks" HorizontalOptions="Center" Style="{StaticResource headerStyle}" />
                    <dx:DXCollectionView
                        ItemsSource="{Binding Tasks}" ReduceSizeToContent="False"
                        ItemSeparatorThickness="1"
                        ItemSeparatorCapMargin="16"
                        ItemSeparatorColor="{dx:ThemeColor OutlineVariant}"
                        UseRippleEffect="True"
                        Tap="OnTasksListItemTap">
                        <dx:DXCollectionView.ItemTemplate>
                            <DataTemplate x:DataType="viewModels:CheckListItemInfo">
                                <dx:DXDockLayout Padding="16" VerticalSpacing="12">
                                    <Label
                                        dx:DXDockLayout.Dock="Right"
                                        Text="{Binding Customer.FullName}"
                                        FontSize="16"
                                        TextColor="{dx:ThemeColor Key=OnSurface}"
                                        VerticalTextAlignment="Center" />
                                    <Label
                                        Text="{Binding CheckListItem.Description}"
                                        FontSize="16" FontAttributes="Bold"
                                        TextColor="{dx:ThemeColor Key=OnSurface}"
                                        VerticalTextAlignment="Center"/>
                                </dx:DXDockLayout>
                            </DataTemplate>
                        </dx:DXCollectionView.ItemTemplate>
                    </dx:DXCollectionView>
                </dx:DXStackLayout>
            </dx:BottomSheet>
        </Grid>
    </ScrollView>
</ContentPage>
