<?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="LSFE.MobApp.Pages.Attendance.AttendancePage"
             xmlns:viewmodels="clr-namespace:LSFE.MobApp.ViewModels"
             x:DataType="viewmodels:AttendanceVM"
             Title="Attendance"
             Shell.NavBarIsVisible="True">

    <ScrollView>
        <Grid RowDefinitions="Auto,*" 
              Padding="20"
              RowSpacing="20">

            <!-- Header Card with Time and Date -->
            <Border StrokeThickness="0"
                    BackgroundColor="{AppThemeBinding Light=#2196F3, Dark=#1976D2}"
                    StrokeShape="RoundRectangle 20"
                    Padding="20"
                    Grid.Row="0">
                <Border.Shadow>
                    <Shadow Brush="{AppThemeBinding Light=#40000000, Dark=#80000000}"
                            Offset="0,4"
                            Radius="8"
                            Opacity="0.3" />
                </Border.Shadow>

                <VerticalStackLayout Spacing="8">
                    <Label Text="{Binding CurrentTime}"
                           FontSize="48"
                           FontAttributes="Bold"
                           TextColor="White"
                           HorizontalOptions="Center" />

                    <Label Text="{Binding CurrentDate}"
                           FontSize="18"
                           TextColor="White"
                           Opacity="0.9"
                           HorizontalOptions="Center" />
                </VerticalStackLayout>
            </Border>

            <!-- Main Content -->
            <VerticalStackLayout Grid.Row="1" Spacing="20">

                <!-- Status Cards -->
                <Grid ColumnDefinitions="*,*" ColumnSpacing="15">
                    <!-- Time In Card -->
                    <Border StrokeThickness="0"
                            BackgroundColor="{AppThemeBinding Light=#ffffff, Dark=#2C2C2C}"
                            StrokeShape="RoundRectangle 15"
                            Padding="15"
                            Grid.Column="0">
                        <Border.Shadow>
                            <Shadow Brush="{AppThemeBinding Light=#20000000, Dark=#60000000}"
                                    Offset="0,2"
                                    Radius="6"
                                    Opacity="0.2" />
                        </Border.Shadow>

                        <VerticalStackLayout Spacing="8">
                            <Label Text="&#xf017;"
                                   FontFamily="FontAwesome"
                                   FontSize="32"
                                   TextColor="{AppThemeBinding Light=#4CAF50, Dark=#66BB6A}"
                                   HorizontalOptions="Center" />

                            <Label Text="Time In"
                                   FontSize="14"
                                   FontAttributes="Bold"
                                   TextColor="{AppThemeBinding Light=#666666, Dark=#AAAAAA}"
                                   HorizontalOptions="Center" />

                            <Label Text="{Binding TimeInText}"
                                   FontSize="16"
                                   FontAttributes="Bold"
                                   TextColor="{AppThemeBinding Light=#4CAF50, Dark=#66BB6A}"
                                   HorizontalOptions="Center" />
                        </VerticalStackLayout>
                    </Border>

                    <!-- Time Out Card -->
                    <Border StrokeThickness="0"
                            BackgroundColor="{AppThemeBinding Light=#ffffff, Dark=#2C2C2C}"
                            StrokeShape="RoundRectangle 15"
                            Padding="15"
                            Grid.Column="1">
                        <Border.Shadow>
                            <Shadow Brush="{AppThemeBinding Light=#20000000, Dark=#60000000}"
                                    Offset="0,2"
                                    Radius="6"
                                    Opacity="0.2" />
                        </Border.Shadow>

                        <VerticalStackLayout Spacing="8">
                            <Label Text="&#xf017;"
                                   FontFamily="FontAwesome"
                                   FontSize="32"
                                   TextColor="{AppThemeBinding Light=#FF5722, Dark=#FF7043}"
                                   HorizontalOptions="Center" />

                            <Label Text="Time Out"
                                   FontSize="14"
                                   FontAttributes="Bold"
                                   TextColor="{AppThemeBinding Light=#666666, Dark=#AAAAAA}"
                                   HorizontalOptions="Center" />

                            <Label Text="{Binding TimeOutText}"
                                   FontSize="16"
                                   FontAttributes="Bold"
                                   TextColor="{AppThemeBinding Light=#FF5722, Dark=#FF7043}"
                                   HorizontalOptions="Center" />
                        </VerticalStackLayout>
                    </Border>
                </Grid>

                <!-- Location Card -->
                <Border StrokeThickness="0"
                        BackgroundColor="{AppThemeBinding Light=#ffffff, Dark=#2C2C2C}"
                        StrokeShape="RoundRectangle 15"
                        Padding="20">
                    <Border.Shadow>
                        <Shadow Brush="{AppThemeBinding Light=#20000000, Dark=#60000000}"
                                Offset="0,2"
                                Radius="6"
                                Opacity="0.2" />
                    </Border.Shadow>

                    <VerticalStackLayout Spacing="12">
                        <HorizontalStackLayout Spacing="10">
                            <Label Text="&#xf3c5;"
                                   FontFamily="FontAwesome"
                                   FontSize="24"
                                   TextColor="{AppThemeBinding Light=#2196F3, Dark=#64B5F6}"
                                   VerticalOptions="Center" />

                            <Label Text="Current Location"
                                   FontSize="18"
                                   FontAttributes="Bold"
                                   TextColor="{AppThemeBinding Light=#333333, Dark=#DDDDDD}"
                                   VerticalOptions="Center" />
                        </HorizontalStackLayout>

                        <Label Text="{Binding LocationAddress}"
                               FontSize="14"
                               TextColor="{AppThemeBinding Light=#666666, Dark=#AAAAAA}"
                               LineBreakMode="WordWrap"
                               MaxLines="3" />

                        <Button Text="Sync to cloud"
                                Command="{Binding SyncCommand}"
                                BackgroundColor="{AppThemeBinding Light=#2196F3, Dark=#1976D2}"
                                TextColor="White"
                                CornerRadius="10"
                                HeightRequest="40"
                                Margin="0,10,0,0" />
                    </VerticalStackLayout>
                </Border>

                <!-- Photo Capture Section -->
                <Grid ColumnDefinitions="*,*" ColumnSpacing="15" Margin="0,10,0,0">

                    <!-- Time In Photo -->
                    <Border Grid.Column="0"
                    StrokeThickness="1"
                    Stroke="{AppThemeBinding Light=#E0E0E0, Dark=#404040}"
                    StrokeShape="RoundRectangle 12"
                    HeightRequest="250"
                    BackgroundColor="{AppThemeBinding Light=#FAFAFA, Dark=#1E1E1E}"
                    VerticalOptions="Center"
                    HorizontalOptions="Fill">
                        <VerticalStackLayout Padding="10" Spacing="8">
                            <Label Text="Time In Photo"
                   FontAttributes="Bold"
                   FontSize="14"
                   TextColor="{AppThemeBinding Light=#333333, Dark=#DDDDDD}"
                   HorizontalOptions="Center" />
                            <Image Source="{Binding CapturedImageIn, TargetNullValue='no_photo.svg'}"
                   Aspect="AspectFill"
                   HeightRequest="200"
                   WidthRequest="200"
                   HorizontalOptions="Center"
                   VerticalOptions="Center">
                                <Image.Shadow>
                                    <Shadow Brush="#40000000" Offset="0,2" Radius="6" Opacity="0.3" />
                                </Image.Shadow>
                            </Image>
                        </VerticalStackLayout>
                    </Border>

                    <!-- Time Out Photo -->
                    <Border Grid.Column="1"
                    StrokeThickness="1"
                    Stroke="{AppThemeBinding Light=#E0E0E0, Dark=#404040}"
                    StrokeShape="RoundRectangle 12"
                    HeightRequest="250"
                    BackgroundColor="{AppThemeBinding Light=#FAFAFA, Dark=#1E1E1E}"
                    VerticalOptions="Center"
                    HorizontalOptions="Fill">
                        <VerticalStackLayout Padding="10" Spacing="8">
                            <Label Text="Time Out Photo"
                   FontAttributes="Bold"
                   FontSize="14"
                   TextColor="{AppThemeBinding Light=#333333, Dark=#DDDDDD}"
                   HorizontalOptions="Center" />
                            <Image Source="{Binding CapturedImageOut, TargetNullValue='no_photo.svg'}"
                   Aspect="AspectFill"
                   HeightRequest="200"
                   WidthRequest="200"
                   HorizontalOptions="Center"
                   VerticalOptions="Center">
                                <Image.Shadow>
                                    <Shadow Brush="#40000000" Offset="0,2" Radius="6" Opacity="0.3" />
                                </Image.Shadow>
                            </Image>
                        </VerticalStackLayout>
                    </Border>
                </Grid>


                <!-- Action Buttons -->
                <Grid ColumnDefinitions="*,*" ColumnSpacing="15" Margin="0,10,0,20">
                    <Button Text="Time In"
                            Command="{Binding TimeInCommand}"
                            BackgroundColor="{AppThemeBinding Light=#4CAF50, Dark=#388E3C}"
                            TextColor="White"
                            FontSize="18"
                            FontAttributes="Bold"
                            CornerRadius="15"
                            HeightRequest="60"
                            Grid.Column="0"
                            IsEnabled="{Binding HasTimeIn, Converter={StaticResource InverseBoolConverter}}">
                        <Button.Shadow>
                            <Shadow Brush="#40000000"
                                    Offset="0,4"
                                    Radius="8"
                                    Opacity="0.3" />
                        </Button.Shadow>
                    </Button>

                    <Button Text="Time Out"
                            Command="{Binding TimeOutCommand}"
                            BackgroundColor="{AppThemeBinding Light=#FF5722, Dark=#E64A19}"
                            TextColor="White"
                            FontSize="18"
                            FontAttributes="Bold"
                            CornerRadius="15"
                            HeightRequest="60"
                            Grid.Column="1"
                            IsEnabled="{Binding HasTimeOut, Converter={StaticResource InverseBoolConverter}}">
                        <Button.Shadow>
                            <Shadow Brush="#40000000"
                                    Offset="0,4"
                                    Radius="8"
                                    Opacity="0.3" />
                        </Button.Shadow>
                    </Button>
                </Grid>

            </VerticalStackLayout>

            <!-- Fullscreen Loading Overlay -->
            <Grid 
                 Grid.RowSpan="3"
                 BackgroundColor="#80000000"
                 IsVisible="{Binding IsLoading}"
                 ZIndex="999"
                 HorizontalOptions="Fill"
                 VerticalOptions="Fill">        

                <!-- Centered white rounded box -->
                <Border
                 StrokeShape="RoundRectangle 16"
                 BackgroundColor="White"
                 Padding="32"
                 WidthRequest="200"
                 HeightRequest="150"
                 HorizontalOptions="Center"
                 VerticalOptions="Center">

                                <VerticalStackLayout Spacing="16"
                                  HorizontalOptions="Center"
                                  VerticalOptions="Center">
                                    <ActivityIndicator 
                     IsRunning="True"
                     Color="#0EA5E9"
                     WidthRequest="40"
                     HeightRequest="40" />
                                <Label 
                     Text="Processing..."
                     TextColor="#0EA5E9"
                     FontAttributes="Bold"
                     FontSize="16"
                     HorizontalOptions="Center" />  
                    </VerticalStackLayout>

                </Border>
            </Grid>

        </Grid>
    </ScrollView>
</ContentPage>