<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GMCabsDriverAssistantSolution.Views.UserSignUpPage"
             xmlns:vm="clr-namespace:GMCabsDriverAssistantSolution.ViewModels"
             xmlns:custom="clr-namespace:GMCabsDriverAssistantSolution.CustomControls"
             Shell.FlyoutBehavior="Disabled"
             Title="User Signup">
    <ContentPage.BindingContext>
        <vm:UserSignUpViewModel />
    </ContentPage.BindingContext>
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="EntryStyle" TargetType="Entry">
                <Setter Property="TextColor" Value="#000"></Setter>
                <Setter Property="PlaceholderColor" Value="#9999"></Setter>
                <Setter Property="TranslationY"  Value="1" />
                <Setter Property="MinimumHeightRequest" Value="36" />
                <Setter Property="Margin" Value="0,10,0,-8"/>
            </Style>
            <Style x:Key="NoUnderlineEntryFrameStyle" TargetType="Frame">
                <Setter Property="Padding">
                    <OnPlatform x:TypeArguments="Thickness">
                        <On Platform="Android">16,4</On>
                        <On Platform="iOS">16</On>
                    </OnPlatform>
                </Setter>
                <Setter Property="CornerRadius" Value="12"></Setter>
                <Setter Property="Margin" Value="4,8,4,4"></Setter>
                <Setter Property="HasShadow" Value="True"></Setter>
                <Setter Property="MinimumHeightRequest" Value="50" />
                <Setter Property="BackgroundColor" Value="White" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout Orientation="Vertical" 
                     BackgroundColor="#DCDCDC">
            <StackLayout.Padding>
                <OnPlatform x:TypeArguments="Thickness">
                    <On Platform="Android">20</On>
                    <On Platform="iOS">20,60</On>
                </OnPlatform>
            </StackLayout.Padding>
            <ScrollView>
                <StackLayout Orientation="Vertical">
                    <Label Text="Enter your details to complete your registration"
                   FontSize="Title"
                   HorizontalOptions="CenterAndExpand"
                   TextColor="Black"
                   Margin="15,15,15,5"/>
                    <Frame Style="{StaticResource NoUnderlineEntryFrameStyle}" Margin="15,15,15,5">
                        <Grid MinimumHeightRequest="50" >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="1"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <custom:NoUnderlineEntry Grid.Column="1"
                                             x:Name="DriverLicence"
                                             FontSize="20"
                                             Keyboard="Text"
                                             Text="{Binding DriverLicence}"
                                             Placeholder="Driver Licence"
                                             Style="{StaticResource EntryStyle}"/>
                        </Grid>
                    </Frame>
                    <StackLayout Orientation="Horizontal" Margin="15,5,15,5">
                        <Frame Style="{StaticResource NoUnderlineEntryFrameStyle}" WidthRequest="178" Margin="0,0,3,0">
                            <Grid MinimumHeightRequest="50" >
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="1"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <custom:NoUnderlineEntry Grid.Column="1"
                                             x:Name="FirstName"
                                             FontSize="20"
                                             Keyboard="Text"
                                             Text="{Binding FirstName}"
                                             Placeholder="First Name"
                                             Style="{StaticResource EntryStyle}"/>
                            </Grid>
                        </Frame>
                        <Frame Style="{StaticResource NoUnderlineEntryFrameStyle}" WidthRequest="178" Margin="3,0,0,0">
                            <Grid MinimumHeightRequest="50" >
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="1"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <custom:NoUnderlineEntry Grid.Column="1"
                                             x:Name="LastName"
                                             FontSize="20"
                                             Keyboard="Text"
                                             Text="{Binding LastName}"
                                             Placeholder="Last Name"
                                             Style="{StaticResource EntryStyle}"/>
                            </Grid>
                        </Frame>
                    </StackLayout>
                    <Frame Style="{StaticResource NoUnderlineEntryFrameStyle}" Margin="15,5,15,5">
                        <Grid MinimumHeightRequest="50" >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="1"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <custom:NoUnderlineEntry Grid.Column="1"
                                             x:Name="PhoneNumber"
                                             FontSize="20"
                                             Keyboard="Telephone"
                                             MaxLength="10"
                                             Text="{Binding PhoneNumber}"
                                             Placeholder="Mobile Number"
                                             Style="{StaticResource EntryStyle}"/>
                        </Grid>
                    </Frame>
                    <Frame Style="{StaticResource NoUnderlineEntryFrameStyle}" Margin="15,5,15,5">
                        <Grid MinimumHeightRequest="50" >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="1"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <custom:NoUnderlineEntry Grid.Column="1"
                                             x:Name="Password"
                                             FontSize="20"
                                             Keyboard="Text"
                                             Text="{Binding Password}"
                                             Placeholder="Password"
                                             IsPassword="True"
                                             Style="{StaticResource EntryStyle}"/>
                        </Grid>
                    </Frame>
                    <Frame Style="{StaticResource NoUnderlineEntryFrameStyle}" Margin="15,5,15,5">
                        <Grid MinimumHeightRequest="50" >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="1"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <custom:NoUnderlineEntry Grid.Column="1"
                                             x:Name="Email"
                                             FontSize="20"
                                             Keyboard="Email"
                                             Text="{Binding Email}"
                                             Placeholder="Email"
                                             Style="{StaticResource EntryStyle}"/>
                        </Grid>
                    </Frame>
                    <Label Text="{Binding ErrorMessage}" 
                   HorizontalTextAlignment="Center" 
                   FontSize="20" 
                   TextColor="Red"/>
                </StackLayout>
            </ScrollView>
            <Grid Margin="20,30,20,0"
                  MinimumHeightRequest="40"
                  VerticalOptions="EndAndExpand">
                <ActivityIndicator IsRunning="True" IsVisible="{Binding IsBusy}"/>
                <Button Text="SignUp" 
                        FontSize="20"
                        Command="{Binding SignUpCommand}"
                        IsVisible="{Binding IsBusy}"
                        MinimumHeightRequest="40" Margin="0,16,0,10">
                    <Button.Triggers>
                        <DataTrigger TargetType="Button" Binding="{Binding IsBusy}" Value="False">
                            <Setter Property="IsVisible" Value="True" />
                        </DataTrigger>
                        <DataTrigger TargetType="Button" Binding="{Binding IsBusy}" Value="True">
                            <Setter Property="IsVisible" Value="False" />
                        </DataTrigger>
                    </Button.Triggers>
                </Button>
            </Grid>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>