<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"
    xmlns:h="clr-namespace:CrmDemo.Helpers"
    x:Class="CrmDemo.Views.AppointmentEditPage"
    HideSoftInputOnTapped="True"
    Title="{Binding Title}"
    BackgroundColor="{dx:ThemeColor Surface}">

    <Shell.TitleView><x:Null/></Shell.TitleView>
    <dxi:DXPageExtension.ToolbarItems>
        <dxi:DXToolbarItem
             x:Name="saveToolbarItem"
             Clicked="OnSaveTapped">
        </dxi:DXToolbarItem>
    </dxi:DXPageExtension.ToolbarItems>
    <ContentPage.Resources>
        <Style x:Key="RootContainerStyle" TargetType="StackLayout">
            <Setter Property="Padding" Value="0,16"/>
        </Style>
        <Style x:Key="FormItemTimePicker" TargetType="dx:TimeEdit">
            <Setter Property="HorizontalOptions" Value="End"/>
            <Setter Property="BackgroundColor" Value="Transparent" />
            <Setter Property="BorderColor" Value="Transparent" />
            <Setter Property="FocusedBorderColor" Value="Transparent"/>
            <Setter Property="IsTimeIconVisible" Value="False"/>
        </Style>
        <Style x:Key="FormItemStyleBase" TargetType="Grid" >
            <Setter Property="Padding" Value="0" />
            <Setter Property="Margin" Value="0" />
            <Setter Property="BackgroundColor" Value="Transparent" />
        </Style>
        <Style x:Key="FormItemStyle" TargetType="Grid" BasedOn="{StaticResource FormItemStyleBase}"/>
        <Style x:Key="FormDateTimeItemStyleBase" TargetType="Grid" >
            <Setter Property="Padding" Value="0" />
            <Setter Property="Margin" Value="16,0" />
            <Setter Property="BackgroundColor" Value="{dx:ThemeColor Surface}" />
        </Style>
        <Style x:Key="FormDateTimeItemStyle" TargetType="Grid" BasedOn="{StaticResource FormDateTimeItemStyleBase}">
            <Setter Property="Margin" Value="48,0,16,0" />
        </Style>
        <Style x:Key="FormItemDatePicker" TargetType="dx:DateEdit">
            <Setter Property="DisplayFormat" Value="d" />
            <Setter Property="HorizontalOptions" Value="FillAndExpand" />
            <Setter Property="BackgroundColor" Value="Transparent" />
            <Setter Property="BorderColor" Value="Transparent" />
            <Setter Property="FocusedBorderColor" Value="Transparent"/>
            <Setter Property="IsDateIconVisible" Value="False"/>
        </Style>

        <Style x:Key="FormItemPrimaryContent" TargetType="View">
            <Setter Property="HorizontalOptions" Value="StartAndExpand" />
            <Setter Property="VerticalOptions" Value="Center" />
            <Setter Property="Margin" Value="12,0,0,0" />
            <Setter Property="BackgroundColor" Value="Transparent" />
        </Style>
        <Style x:Key="FormItemPrimaryContent-Label" TargetType="Label" BasedOn="{StaticResource FormItemPrimaryContent}">
            <Setter Property="TextColor" Value="{dx:ThemeColor OnSurface}" />
            <Setter Property="FontSize" Value="Medium" />
        </Style>
        <Style x:Key="FormItemPrimaryContent-Entry" TargetType="dx:TextEdit">
            <Setter Property="TextFontSize" Value="Medium"/>
            <Setter Property="BackgroundColor" Value="Transparent"/>
            <Setter Property="BorderColor" Value="Transparent"/>
            <Setter Property="FocusedBorderColor" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="HorizontalOptions" Value="FillAndExpand" />
            <Setter Property="VerticalOptions" Value="Center" />
            <Setter Property="Margin" Value="0,0" />
            <Setter Property="ClearIconVisibility" Value="Never" />
            <Setter Property="BackgroundColor" Value="Transparent"/>
        </Style>

        <Style x:Key="FormItemIcon" TargetType="dx:DXImage">
            <Setter Property="HeightRequest" Value="24" />
            <Setter Property="WidthRequest" Value="24" />
            <Setter Property="HorizontalOptions" Value="Start" />
            <Setter Property="VerticalOptions" Value="Center" />
            <Setter Property="Margin" Value="24,0,0,0" />
            <Setter Property="BackgroundColor" Value="Transparent" />
            <Setter Property="TintColor" Value="{dx:ThemeColor OnSurface}" />
        </Style>
    </ContentPage.Resources>
    <ContentPage.Content>
        <ScrollView>
                <StackLayout x:Name="root" Style="{StaticResource RootContainerStyle}">
                    
                    <Grid Style="{StaticResource FormItemStyle}"
                      ColumnDefinitions="Auto,*">
                    <Grid.GestureRecognizers>
                        <TapGestureRecognizer Tapped="OnCaptionTapped"/>
                    </Grid.GestureRecognizers>
                    <dx:DXImage Source="dxsch_event_name.png"
                           Style="{StaticResource FormItemIcon}"
                           Grid.Column="0"/>
                    <dx:TextEdit
                        x:Name="eventNameEntry"
                        Text="{Binding Subject}"
                        PlaceholderText="{dx:SchedulerLocalizer Id=AppointmentEditPage_SubjectPlaceholder}"
                        Style="{StaticResource FormItemPrimaryContent-Entry}"
                        Grid.Column="1"/>
                    </Grid>
                    <dx:DXSeparator/>

                    
                    <Grid Style="{StaticResource FormItemStyle}" Margin="0,16,0,0" Padding="0,10"
                    ColumnDefinitions="Auto,*,Auto">
                    <Grid.GestureRecognizers>
                        <TapGestureRecognizer Tapped="OnAllDayTapped"/>
                    </Grid.GestureRecognizers>
                    <dx:DXImage Source="dxsch_time.png"
                           Grid.Column="0"
                           Style="{StaticResource FormItemIcon}"/>
                    <Label Text="{dx:SchedulerLocalizer Id=AppointmentEditPage_AllDay}"
                           Grid.Column="1"
                           Style="{StaticResource FormItemPrimaryContent-Label}"/>
                    <Switch x:Name="allDaySwitch"
                            Grid.Column="2"
                            OnColor="{dx:ThemeColor Primary, Alpha=0.38}"
                            ThumbColor="{dx:ThemeColor Primary}"
                            IsToggled="{Binding AllDay, Mode=TwoWay}"
                            BackgroundColor="Transparent"
                            Margin="0,0,24,0">
                        <Switch.VerticalOptions>
                            <OnPlatform x:TypeArguments="LayoutOptions">
                                <On Platform="Android">FillAndExpand</On>
                                <On Platform="iOS">Center</On>
                            </OnPlatform>
                        </Switch.VerticalOptions>
                    </Switch>
                    </Grid>
                    
                    <Grid Style="{StaticResource FormDateTimeItemStyle}"
                      ColumnDefinitions="*,Auto">
                    <dx:DateEdit Date="{Binding StartDate}"
                                  Grid.Column="0"
                                  Style="{StaticResource FormItemDatePicker}"/>
                    <dx:TimeEdit TimeSpan="{Binding StartTime}"
                                  Grid.Column="1"
                                  IsVisible="{Binding AllDay, Converter={h:InverseBoolConverter}}"
                                  Style="{StaticResource FormItemTimePicker}"/>
                    </Grid>
                    
                    <Grid Style="{StaticResource FormDateTimeItemStyle}"
                      ColumnDefinitions="*,Auto">
                    <dx:DateEdit Date="{Binding EndDate}"
                                  Grid.Column="0"
                                  Style="{StaticResource FormItemDatePicker}"/>
                    <dx:TimeEdit TimeSpan="{Binding EndTime}"
                                  Grid.Column="1"
                                  IsVisible="{Binding AllDay, Converter={h:InverseBoolConverter}}"
                                  Style="{StaticResource FormItemTimePicker}"/>
                    </Grid>

                    <dx:DXSeparator x:Name="deleteButtonSeparator"/>
                    <dx:DXButton
                        x:Name="deleteButton"
                        Content="Delete Appointment" ButtonType="Text"
                        TextColor="{dx:ThemeColor Error}"
                        PressedBackgroundColor="{dx:ThemeColor ErrorContainer}"
                        PressedTextColor="{dx:ThemeColor Error}"
                        Margin="12"
                        HorizontalOptions="Center"
                        Clicked="OnDeleteClicked"/>
                </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>
