<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             x:Class="DaireApplication.RecipeEdit"
             Width="1200" 
             mc:Ignorable="d" >
  <Grid>
    <!-- Main Content (machine picture on left, etc.) -->
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="*"/>
      </Grid.ColumnDefinitions>
      <!-- Machine Picture on Left -->
      <Grid Grid.Column="0">
        <Grid x:Name="machinePic" IsVisible="True" Width="937" Height="567">
          <Grid.Background>
            <ImageBrush Source="/Assets/TemperingGraphics.png"/>
          </Grid.Background>
        </Grid>
      </Grid>
      <!-- (Optional additional content on right if needed) -->
    </Grid>

    <!-- Popup Overlay -->
    <Border x:Name="PopupOverlay"
            Background="#80000000"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            IsVisible="False"
            ZIndex="50"
            PointerPressed="OnPopupOverlayPointerPressed">
      <Grid MaxWidth="500" MaxHeight="500" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Border x:Name="PopupControl"
                BorderThickness="2"
                CornerRadius="10"
                Padding="10"
                PointerPressed="OnPopupOverlayPointerPressed">
          <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Spacing="10">
            <!-- Popup Content (Keypad etc.) -->
            <Grid IsVisible="True">
              <Grid.Styles>
                <Style Selector="Button">
                  <Setter Property="Background" Value="White"/>
                  <Setter Property="CornerRadius" Value="20"/>
                  <Setter Property="Width" Value="100"/>
                  <Setter Property="Height" Value="100"/>
                  <Setter Property="FontSize" Value="50"/>
                  <Setter Property="Foreground" Value="Black"/>
                  <Setter Property="VerticalContentAlignment" Value="Center"/>
                  <Setter Property="HorizontalContentAlignment" Value="Center"/>
                </Style>
                <Style Selector="Button:pointerover /template/ContentPresenter">
                  <Setter Property="Foreground" Value="Black"/>
                  <Setter Property="Background" Value="White"/>
                  <Setter Property="CornerRadius" Value="20"/>
                  <Setter Property="RenderTransform" Value="scale(1.11)"/>
                </Style>
              </Grid.Styles>
              <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
              </Grid.RowDefinitions>
              <Grid Grid.Row="1" Margin="10">
                <Grid.RowDefinitions>
                  <RowDefinition Height="1*"/>
                  <RowDefinition Height="1*"/>
                  <RowDefinition Height="1*"/>
                  <RowDefinition Height="1*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="1*"/>
                  <ColumnDefinition Width="1*"/>
                  <ColumnDefinition Width="1*"/>
                </Grid.ColumnDefinitions>
                <!-- Keypad Buttons -->
                <Button Content="1" Grid.Row="0" Grid.Column="0" FontSize="24" Background="White" Margin="5" Click="OnKeyClick"/>
                <Button Content="2" Grid.Row="0" Grid.Column="1" FontSize="24" Background="White" Margin="5" Click="OnKeyClick"/>
                <Button Content="3" Grid.Row="0" Grid.Column="2" FontSize="24" Background="White" Margin="5" Click="OnKeyClick"/>
                <Button Content="4" Grid.Row="1" Grid.Column="0" FontSize="24" Background="White" Margin="5" Click="OnKeyClick"/>
                <Button Content="5" Grid.Row="1" Grid.Column="1" FontSize="24" Background="White" Margin="5" Click="OnKeyClick"/>
                <Button Content="6" Grid.Row="1" Grid.Column="2" FontSize="24" Background="White" Margin="5" Click="OnKeyClick"/>
                <Button Content="7" Grid.Row="2" Grid.Column="0" FontSize="24" Background="White" Margin="5" Click="OnKeyClick"/>
                <Button Content="8" Grid.Row="2" Grid.Column="1" FontSize="24" Background="White" Margin="5" Click="OnKeyClick"/>
                <Button Content="9" Grid.Row="2" Grid.Column="2" FontSize="24" Background="White" Margin="5" Click="OnKeyClick"/>
                <Button Content="BACK" Grid.Row="3" Grid.Column="0" FontSize="20" Background="#D3D3D3" Margin="5" Click="OnBackClick"/>
                <Button Content="0" Grid.Row="3" Grid.Column="1" FontSize="24" Background="White" Margin="5" Click="OnKeyClick"/>
                <Button Content="ENTER" Grid.Row="3" Grid.Column="2" FontSize="20" Background="#A4275D" Foreground="White" Margin="5" Click="EnterClick"/>
              </Grid>
            </Grid>
          </StackPanel>
        </Border>
      </Grid>
    </Border>

    <!-- Overlay Container for the Three Buttons (always at the right side) -->
    <StackPanel x:Name="ButtonOverlayContainer"
                Orientation="Vertical"
                HorizontalAlignment="Right"
                VerticalAlignment="Center"
                Margin="0,0,20,20"
                Spacing="20"
                ZIndex="100" 
                >
      <Border CornerRadius="10"
                      Background="White"
                      Padding="20"
                      Margin="20"
                      Width="270"
                      Height="400" ZIndex="49"  >
        <!-- Use a Grid with RowDefinitions to position elements -->
        <Grid ZIndex="49">
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto"  />
            <!-- First button -->
            <RowDefinition Height="9*"   />
            <!-- Spacer to push content to bottom -->
            <RowDefinition Height="Auto" />
            <!-- Second button -->
            <RowDefinition Height="3*"   />
            <!-- Spacer to push content to bottom -->
            <RowDefinition Height="Auto"  />
            <!-- Third button -->
            <RowDefinition Height="7*"   />
            <!-- Spacer to push content to bottom -->
            <RowDefinition Height="Auto" />
            <!-- Arrow + label at bottom -->
          </Grid.RowDefinitions>
          <Grid.Styles>

            <Style Selector="Button:pointerover /template/ContentPresenter">
              <Setter Property="Foreground" Value="Black"></Setter>
              <Setter Property="Background" Value="LightGray"></Setter>



            </Style>
        

          </Grid.Styles>

          <Grid.Styles>
            <Style Selector="Button:disabled /template/ContentPresenter" >
              <Setter Property="Background" Value="Gray"/>
              <Setter Property="Foreground" Value="White"/>
            </Style>
          </Grid.Styles>
          <!-- Red Button for Heating -->
          
          <Button Grid.Row="0" x:Name="heatingBtn"
                  Background="#FFFF5252"
                  Foreground="White"
                  FontSize="25"
                  Padding="10,5"
                  BorderThickness="0"
                  Width="230"
                  HorizontalAlignment="Center"
                  HorizontalContentAlignment="Center"
                  CornerRadius="10"
                  Click="showPopUp"
                  >
            <StackPanel Spacing="5" Orientation="Horizontal">
              <TextBlock>HEATING: </TextBlock>
              <TextBlock x:Name="heatingValue"></TextBlock>
              <TextBlock> °C</TextBlock>
            </StackPanel>

          </Button>
          <TextBlock Grid.Row="1" TextWrapping="WrapWithOverflow" VerticalAlignment="Center"  FontWeight="Normal" FontSize="14" Foreground="Red"  x:Name="tempErrorMsg">
            </TextBlock>

          <!-- Brown Button for Pouring -->
          <Button Grid.Row="2" x:Name="pouringBtn"
                  Background="#FF795548"
                  Foreground="White"
                  FontSize="25"
                  Padding="10,5"
                  BorderThickness="0"
                  Width="230"
                  HorizontalAlignment="Center"
                  HorizontalContentAlignment="Center"
                  CornerRadius="10"
                  Click="showPopUp" >
            <StackPanel Spacing="5" Orientation="Horizontal">
              <TextBlock>POURING: </TextBlock>
              <TextBlock x:Name="pouringValue"></TextBlock>
              <TextBlock> °C</TextBlock>
            </StackPanel>
          </Button>

          <!-- Blue Button for Cooling -->
          <Button Grid.Row="4" x:Name="coolingBtn" 
                 Classes="NotEnabled"
                  FontSize="25"
                  Background="#FF448AFF"
                  Foreground="White"
                  Padding="10,5"
                  BorderThickness="0"
                  Width="230"
                  HorizontalAlignment="Center"
                  CornerRadius="10"
                  HorizontalContentAlignment="Center"
                  Click="showPopUp" >
            <StackPanel Spacing="5" Orientation="Horizontal">
              <TextBlock>COOLING: </TextBlock>
              <TextBlock x:Name="coolingValue"></TextBlock>
              <TextBlock> °C</TextBlock>
            </StackPanel>
          
          </Button>
     

          <!-- Arrow and 'EDIT HERE' Label at the Bottom -->
          <StackPanel Grid.Row="6" HorizontalAlignment="Center">
            <TextBlock Text="↑"
                       FontSize="50"
                       FontWeight="Normal"
                       HorizontalAlignment="Center"
                       Foreground="Black"/>
            <TextBlock Text="EDIT HERE"
                       FontSize="30"
                       FontWeight="Normal"
                       HorizontalAlignment="Center"
                       Foreground="Black"
                           />
          </StackPanel>
        </Grid>
      </Border>
    </StackPanel>
  </Grid>
</UserControl>
