<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"
             Width="1200"
             Height="620"
             Background="#b3b3b3"
             x:Class="DaireApplication.Settings" FontFamily="Helvetica"  >
  <Grid RowDefinitions="*">
    <!-- Main Area-->
    <Grid Grid.Row="0">
      <Grid.Styles>
        <Style Selector="Button">
          <Setter Property="Background" Value="#F9F9F9"></Setter>
          <Setter Property="CornerRadius" Value="50"></Setter>
          <Setter Property="Width" Value="150"></Setter>
          <Setter Property="Height" Value="90"></Setter>
          <Setter Property="VerticalContentAlignment" Value="Center"></Setter>
          <Setter Property="HorizontalContentAlignment" Value="Center"></Setter>
        </Style>

        <Style Selector="Button:pointerover /template/ContentPresenter">
          <Setter Property="Background" Value="#F9F9F9"></Setter>

        </Style>
        <Style Selector="Button.SpecialButtonStyle:pointerover /template/ContentPresenter" >
          <Setter Property="Background" Value="#E6E6E6"/>
          <Setter Property="CornerRadius" Value="25"/>
        </Style>

      </Grid.Styles>
    
      <Grid ColumnDefinitions="2*,1.4*,2.2*" >
        <Grid  Grid.Column="0" RowDefinitions="*,Auto,*,*" >
          <Grid Grid.Row="1" Margin="5,0,0,0">
            <StackPanel>
              <TextBlock FontSize="18" TextWrapping="WrapWithOverflow" x:Name="mixerDelayTxt"
                         IsVisible="False"
                         Foreground="Black">Mixer 
                         Delay: </TextBlock>
              <TextBlock FontSize="25" 
                         Margin="50,0,0,0"
                         x:Name="mixerDelayCounter"
                         IsVisible="False"
                         TextWrapping="WrapWithOverflow"
                         Foreground="Black">120</TextBlock>

            </StackPanel>

          </Grid>
			<Grid Grid.Row="3" Margin="5,40,0,0">
				<StackPanel>
					<TextBlock FontSize="18" TextWrapping="WrapWithOverflow" x:Name="pedalDelayTxt"
							   IsVisible="False"
							   Foreground="Black">
						Pedal OFF:
					</TextBlock>
					<TextBlock FontSize="25"
							   Margin="50,0,0,0"
							   x:Name="pedalDelayCounter"
							   IsVisible="False"
							   TextWrapping="WrapWithOverflow"
							   Foreground="Black">120</TextBlock>

				</StackPanel>

			</Grid>
            <StackPanel>
              <TextBlock FontSize="18" TextWrapping="WrapWithOverflow" x:Name="coolingDelayTxt"
                         IsVisible="False"
                         Foreground="Black">Cooling Delay: </TextBlock>
              <TextBlock FontSize="25"
                         Margin="50,0,0,0"
                         x:Name="coolingDelayCounter"
                         IsVisible="False"
                         TextWrapping="WrapWithOverflow"
                         Foreground="Black">120</TextBlock>
            </StackPanel>
        </Grid>
        <Grid  Grid.Column="2"
               RowDefinitions="*,Auto,*,*" ZIndex="200"
               Margin="0,0,0,0" >
          <Grid Grid.Row="1" Margin="305,0,0,0" ZIndex="200">
            <StackPanel>
              <TextBlock FontSize="18" TextWrapping="" x:Name="fountainDelayTxt"
                         IsVisible="False"
                         Foreground="Black">Fountain Delay: </TextBlock>
              <TextBlock FontSize="25"
                         Margin="50,0,0,0"
                         IsVisible="False"
                         Foreground="Black"
                         x:Name="fountainDelayCounter"
                         TextWrapping="WrapWithOverflow">120</TextBlock>

				<TextBlock FontSize="18" TextWrapping="" x:Name="fountainTargetTxt"
					  IsVisible="False"
					  Foreground="Black">Target Temp: </TextBlock>
				<TextBlock FontSize="25"
						   Margin="50,0,0,0"
						   IsVisible="False"
						   Foreground="Black"
						   x:Name="fountainTagetTemp"
						   TextWrapping="WrapWithOverflow">120</TextBlock>

            </StackPanel>

          </Grid>
        </Grid>
        <Grid  HorizontalAlignment="Center"  Grid.Column="0" VerticalAlignment="Center" RowDefinitions="*,7*" Margin="40,0,0,20"  ZIndex="100">

         
          <StackPanel  Grid.Row="1" Orientation="Vertical"   >
            <!--Tank Temp -->
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
            
              
              <Button IsEnabled="False" Margin="10" CornerRadius="10" >
                <Button.Styles>
                  <!-- Custom Style for Disabled Button -->
                  <Style Selector="Button:disabled /template/ContentPresenter">
                    <Setter Property="Background" Value="#E6E6E6"/>
                    <Setter Property="Foreground" Value="#231F20"/>

                  </Style>
                </Button.Styles>
                <StackPanel  Width="150" Height="90" Spacing="5">
                  <Label  CornerRadius="25"  FontSize="15.5"
                 FontWeight="Normal" Foreground="#8D8D8D" HorizontalContentAlignment="Center"
                          Margin="0,5,0,-5">TANK TEMP</Label>
                  <StackPanel 
                    Spacing="-10"
                    Orientation="Horizontal"
                    Margin="0,-5,0,0"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center">
                    <Label x:Name="TankTempValue" FontSize="35" FontWeight="Normal"
                           HorizontalContentAlignment="Center"
                           VerticalContentAlignment="Center">-100.0</Label>
                    <Label FontSize="40" FontWeight="Normal" >°C</Label>
                  </StackPanel>
                  
                </StackPanel>
              </Button>
            </StackPanel>
            <!--Mixer  -->
            <StackPanel Orientation="Horizontal"  >

            <Button x:Name="mixerBtn"  CornerRadius="10"   Margin="10" >
                <StackPanel x:Name="MixerSP">
                  <Label FontSize="15.5" FontWeight="Normal"  HorizontalContentAlignment="Center" Foreground="#666666">MIXER</Label>
                  <Label FontSize="47" FontWeight="Normal" HorizontalContentAlignment="Center" Foreground="#ff231f20" Margin="0,-15,0,0">OFF</Label>
                  <!-- Underline -->
                  <Rectangle Fill="#666666" Height="5" Width="110" Margin="0,-15,0,0"></Rectangle>
                </StackPanel>
              </Button>
            </StackPanel>
            <!--Recipe Setting  -->
            <StackPanel Orientation="Horizontal" x:Name="recipeSettings" >
 
              <Button  CornerRadius="10" Margin="10" Padding="0">
                <StackPanel Spacing="-7">
                  <Label FontSize="15"  HorizontalContentAlignment="Center" Foreground="#AF196F"  Margin="0,0,0,1">RECIPE SETTINGS</Label>

                  <Grid RowDefinitions="*">
                    <Grid Grid.Row="0" ColumnDefinitions="Auto,*,Auto">
                      <Label Grid.Column="0" FontSize="15" FontWeight="Normal" HorizontalContentAlignment="Center" Foreground="#000000">Heating:</Label>
                      <Label Grid.Column="1"  x:Name="heatingValue" FontSize="15" FontWeight="Normal" HorizontalContentAlignment="Center" Foreground="#000000">47.0</Label>
                      <Label Grid.Column="2"  FontSize="15" FontWeight="Normal" HorizontalContentAlignment="Center" Foreground="#000000">°C</Label>
                    </Grid>
                  </Grid>
                  <Grid RowDefinitions="*">
                    <Grid Grid.Row="0" ColumnDefinitions="Auto,*,Auto">
                      <Label Grid.Column="0" FontSize="15" FontWeight="Normal" HorizontalContentAlignment="Center" Foreground="#000000">Pouring:</Label>
                      <Label Grid.Column="1" x:Name="pouringValue" FontSize="15" FontWeight="Normal" HorizontalContentAlignment="Center" Foreground="#000000">47.0</Label>
                      <Label Grid.Column="2" FontSize="15" FontWeight="Normal" HorizontalContentAlignment="Center" Foreground="#000000">°C</Label>
                    </Grid>
                  </Grid>
                  <Grid RowDefinitions="*">
                    <Grid Grid.Row="0" ColumnDefinitions="Auto,*,Auto">
                      <Label Grid.Column="0" FontSize="15" FontWeight="Normal" HorizontalContentAlignment="Center" Foreground="#000000">Cooling:</Label>
                      <Label Grid.Column="1" x:Name="coolingValue" FontSize="15" FontWeight="Normal" HorizontalContentAlignment="Center" Foreground="#000000">47.0</Label>
                      <Label Grid.Column="2" FontSize="15" FontWeight="Normal" HorizontalContentAlignment="Center" Foreground="#000000">°C</Label>
                    </Grid>
                  </Grid>

                  <StackPanel Orientation="Horizontal">
                   
                  </StackPanel>
                </StackPanel>
              </Button>
            </StackPanel>
            <StackPanel   HorizontalAlignment="Center" Width="150" Height="200">

              <!-- Pedal Container -->
              <Button  Background="#F9F9F9" CornerRadius="10"  Width="150" Height="200" VerticalContentAlignment="Center" HorizontalContentAlignment="Center">
                <StackPanel Orientation="Vertical" HorizontalAlignment="Center"  Height="200"  Width="150">

                  <!-- Pedal Title -->
                  <TextBlock Margin="7" Text="PEDAL" FontSize="15" FontWeight="Normal" 
                    VerticalAlignment="Top" HorizontalAlignment="Center" Foreground="#666666" />

                  <!-- Auto Mode Button -->
                  <Button Background="#E6E6E6" CornerRadius="5" HorizontalAlignment="Center" Padding="0" Width="130" Height="50" Click="PedalBtn">
                    <StackPanel Width="130" x:Name="PedalSP">
                      <TextBlock x:Name="pedalStateTxt" Text="AUTO" Foreground="#231F20" FontSize="26.5" FontWeight="Normal" HorizontalAlignment="Center"/>
                      <!-- Underline -->
                      <Rectangle x:Name="pedalUnderLine" Fill="#A4275D" Height="5" Width="90" Margin="0,-3,0,0"/>
                    </StackPanel>
                  </Button>


                

                  <StackPanel x:Name="PedalAutoContainer" >
                    <!-- Pedal Off Time -->
                    <StackPanel.Styles>
                        <Style Selector="Button:disabled /template/ContentPresenter">
                    <Setter Property="Background" Value="#B3B3B3"/>
                    <Setter Property="Foreground" Value="#A4275D"/>
                  </Style>
                   <Style Selector="Button:pointerover /template/ContentPresenter">
                        <Setter Property="Background" Value="#E6E6E6"></Setter>
                        <Setter Property="Foreground" Value="#A4275D"></Setter>

                      </Style>
                    </StackPanel.Styles>

                   
                    <TextBlock Text="PEDAL OFF TIME" Foreground="Gray" FontSize="15" FontWeight="Normal" HorizontalAlignment="Center"/>
                    <Grid RowDefinitions="*" Margin="5,0">
                      <Grid Grid.Row="0" ColumnDefinitions="Auto,*,Auto">
                        <Button Classes="PedalOn"  Grid.Column="0" Content="−" Background="#E6E6E6" Foreground="#A4275D"
        Width="35" Height="35" CornerRadius="18" FontSize="16"
                  Click="adjustPedalTime"/>
                        <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Center">
                          <TextBlock x:Name="PedalOnTime" Text="4" FontSize="23.5" FontWeight="Normal" Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                          <TextBlock Text="s" FontSize="23.5" FontWeight="Normal" Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </StackPanel>

                        <Button Classes="PedalOn"    Grid.Column="2" Content="+" Background="#E6E6E6" Foreground="#A4275D"
                                Width="35" Height="35" CornerRadius="18" FontSize="16" Click="adjustPedalTime"/>
                      </Grid>
                    </Grid>

                    <!-- Pedal On Time -->
                    <TextBlock Text="PEDAL ON TIME" Foreground="Gray" FontSize="15" FontWeight="Normal" HorizontalAlignment="Center"/>
                    <Grid RowDefinitions="*" Margin="5,0">
                      <Grid Grid.Row="0" ColumnDefinitions="Auto,*,Auto">
                        <Button Classes="PedalOff" Grid.Column="0" Content="−" Background="#E6E6E6" Foreground="#A4275D"
        Width="35" Height="35" CornerRadius="18" FontSize="16" Click="adjustPedalTime"/>
                        <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Center">
                          <TextBlock x:Name="PedalOffTime" Text="4" FontSize="23.5" FontWeight="Normal" Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                          <TextBlock Text=" s" FontSize="23.5" FontWeight="Normal" Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </StackPanel>

                        <Button Classes="PedalOff"  Grid.Column="2" Content="+" Background="#E6E6E6" Foreground="#A4275D"
                                Width="35" Height="35" CornerRadius="18" FontSize="16" Click="adjustPedalTime"/>
                      </Grid>
                    </Grid>

                  </StackPanel>
          

                </StackPanel>
              </Button>

            </StackPanel>
          </StackPanel>
        </Grid>
  
        <Grid  Grid.Column="1" Height="596" Width="605"  IsVisible="True">
          <Grid.Background >
            <ImageBrush  Source="/Assets/TemperingMachine.png" />
          </Grid.Background>
        </Grid>
        <Grid Grid.Column="2" RowDefinitions="*,12*"  HorizontalAlignment="Center" Margin="0,0,15,0">
          <StackPanel Grid.Row="1" Orientation="Vertical" HorizontalAlignment="Left" >
            <!--Fountain Temp -->
            <StackPanel Orientation="Horizontal" >

              <Button IsEnabled="False"  Width="150" Height="90"   Margin="10" CornerRadius="10" Padding="0">
                <Button.Styles>
                  <!-- Custom Style for Disabled Button -->
                  <Style Selector="Button:disabled /template/ContentPresenter">
                    <Setter Property="Background" Value="#E6E6E6"/>
                  </Style>
                </Button.Styles>
                <StackPanel Spacing="5">
                  <Label FontSize="14.5" FontWeight="Normal" HorizontalContentAlignment="Center" Foreground="#787878" >CHOCOLATE TEMP</Label>
                  <StackPanel 
                    Spacing="-10"
                    Orientation="Horizontal"
                    Margin="0,-10,0,0" HorizontalAlignment="Center"
                    VerticalAlignment="Center">
                    <Label x:Name="FountainTempValue" FontSize="35" Foreground="#262223" VerticalAlignment="Center" >-100.0</Label>
                    <Label FontSize="40" Foreground="#262223" VerticalAlignment="Center" >°C</Label>
                  </StackPanel>

                </StackPanel>
              </Button>
              

            </StackPanel>
            <Button x:Name="fountainBtn" Margin="10" Content="on" Width="150" Height="90" CornerRadius="10">
              <StackPanel x:Name="FountainSP">
                <Label FontSize="15" FontWeight="Normal" HorizontalContentAlignment="Center" Foreground="#666666">CHOCOLATE</Label>
                <Label FontSize="47" FontWeight="Normal" HorizontalContentAlignment="Center" Margin="0,-15,0,0" Foreground="#231F20">ON</Label>
                <!-- Underline -->
                <Rectangle Fill="#A4275D" Height="5" Width="110" Margin="0,-15,0,0"></Rectangle>
              
              </StackPanel>
       
              
            </Button>

            <!--MOLD HEATER-->
            <Button x:Name="moldHeaterBtn"  Margin="10" Content="on" Width="150" Height="90" CornerRadius="10"
                    Click="toggelOnOffClick">
              <StackPanel x:Name="MoldHeaterSP">
                <Label FontSize="15" FontWeight="Normal" HorizontalContentAlignment="Center" Foreground="#666666">MOLD HEATER</Label>
                <Label FontSize="47" FontWeight="Normal" HorizontalContentAlignment="Center" Margin="0,-15,0,0" Foreground="#231F20">ON</Label>
                <!-- Underline -->
                <Rectangle Fill="#A4275D" Height="5" Width="110" Margin="0,-15,0,0"></Rectangle>

              </StackPanel>


            </Button>
            <!--Vibration-->
            <Button x:Name="vibrationBtn"  Margin="10" Content="on" Width="150" Height="90" CornerRadius="10"
                    Click="toggelOnOffClick">
              <StackPanel x:Name="VibrationSP">
                <Label FontSize="15" FontWeight="Normal" HorizontalContentAlignment="Center" Foreground="#666666">VIBRATION</Label>
                <Label FontSize="47" FontWeight="Normal" HorizontalContentAlignment="Center" Margin="0,-15,0,0" Foreground="#231F20">ON</Label>
                <!-- Underline -->
                <Rectangle Fill="#A4275D" Height="5" Width="110" Margin="0,-15,0,0"></Rectangle>

              </StackPanel>


            </Button>
            <!--VIBHeater-->
            <Button x:Name="vibHeaterBtn"  Margin="10" Content="on" Width="150" Height="90" CornerRadius="10"
                    Click="toggelOnOffClick">
              <StackPanel x:Name="VibHeaterSP">
                <Label FontSize="15" FontWeight="Normal" HorizontalContentAlignment="Center" Foreground="#666666"
                      >VIB. HEATER</Label>
                <Label FontSize="47" FontWeight="Normal" HorizontalContentAlignment="Center" Margin="0,-15,0,0" Foreground="#231F20">ON</Label>
                <!-- Underline -->
                <Rectangle Fill="#A4275D" Height="5" Width="110" Margin="0,-15,0,0"></Rectangle>

              </StackPanel>


            </Button>
          </StackPanel>
        </Grid>


      </Grid>
    </Grid>




    <!-- Overlay Background for Delet Popup -->
    <Border x:Name="DeletePopupOverlay" Background="#80000000" Grid.RowSpan="3" IsVisible="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ZIndex="99"  PointerPressed="OnIgnorePopupOverlayPointerPressed">
      <!-- Popup User Control -->

      <!-- Module for Name Entry -->
      <Grid  PointerPressed="" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20" IsVisible="True">
        <Border Background="White" CornerRadius="10" Padding="20" BorderThickness="1"  ZIndex="101" BorderBrush="#CCC">
          <StackPanel Spacing="15">
            <!-- Label for Text Input -->
            <!-- Label -->


            <TextBlock Text="Exit Warning!!"
                 FontSize="20"
                 FontWeight="Bold"
                 Foreground="Red"
                 Margin="0,0,0,8" />
            <StackPanel>
              <TextBlock x:Name="deleteMsg" Text="Are you sure?"
                 FontSize="16"
                 FontWeight="Bold"
                 Foreground="#333"
                 Margin="0,0,0,8" />
            </StackPanel>





            <!-- Button Panel -->
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Spacing="10">
              <!-- yes Button -->
              <Button
                      Content="Yes"
                      FontSize="16"
                      Padding="10,5"
                      Click="YesBtnClick"
                      Foreground="White" >
                <Button.Background>
                  <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop Color="#A4275D" Offset="0" />
                    <GradientStop Color="#A4275D" Offset="1" />
                  </LinearGradientBrush>
                </Button.Background>
                <Button.Styles>
                  <Style Selector="Button.SpecialButtonStyle:pointerover /template/ContentPresenter">
                    <Setter Property="Background" Value="#A4275D"/>
                    <Setter Property="Foreground" Value="White"/>
                  </Style>
                </Button.Styles>
              
              </Button>
              <!-- No Button -->
              <Button
                      Content="No"
                      FontSize="16"
                      Padding="10,5"
                      Background="Gray"
                      Foreground="White"
                 Click="OnIgnorePopupOverlayPointerPressed">
                <Button.Styles>
                  <Style Selector="Button.SpecialButtonStyle:pointerover /template/ContentPresenter">
                    <Setter Property="Background" Value="Gray"/>
                    <Setter Property="Foreground" Value="White"/>
                  </Style>
                </Button.Styles>
              </Button>
            </StackPanel>
          </StackPanel>
        </Border>
      </Grid>
    </Border>

    <!-- Overlay Background for Delet Popup -->
    <Border x:Name="tempErrorPopupOverlay" Background="#80000000" Grid.RowSpan="3" IsVisible="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ZIndex="99"  PointerPressed="">
      <!-- Popup User Control -->

      <!-- Module for Name Entry -->
      <Grid  PointerPressed="" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20" IsVisible="True">
        <Border Background="White" CornerRadius="10" Padding="20" BorderThickness="1"  ZIndex="101" BorderBrush="#CCC">
          <StackPanel Spacing="15">
            <!-- Label for Text Input -->
            <!-- Label -->


            <TextBlock Text="Temperature Error!!"
                 FontSize="20"
                 FontWeight="Bold"
                 Foreground="Red"
                 Margin="0,0,0,8" />
            <StackPanel>
              <TextBlock x:Name="tempErrorMsg" Text="Error locating temperature do you want to stop?"
                 FontSize="16"
                 FontWeight="Bold"
                 Foreground="#333"
                 Margin="0,0,0,8" />
            </StackPanel>





            <!-- Button Panel -->
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Spacing="10">
              <!-- yes Button -->
              <Button
                      Content="Yes"
                      FontSize="16"
                      Padding="10,5"
                      Click="ErrorYesBtnClick"
                      Foreground="White" >
                <Button.Background>
                  <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop Color="#A4275D" Offset="0" />
                    <GradientStop Color="#A4275D" Offset="1" />
                  </LinearGradientBrush>
                </Button.Background>
                <Button.Styles>
                  <Style Selector="Button.SpecialButtonStyle:pointerover /template/ContentPresenter">
                    <Setter Property="Background" Value="#A4275D"/>
                    <Setter Property="Foreground" Value="White"/>
                  </Style>
                </Button.Styles>

              </Button>
              <!-- No Button -->
              <Button
                      Content="No"
                      FontSize="16"
                      Padding="10,5"
                      Background="Gray"
                      Foreground="White"
                 Click="HideTempErrorPopUp">
                <Button.Styles>
                  <Style Selector="Button.SpecialButtonStyle:pointerover /template/ContentPresenter">
                    <Setter Property="Background" Value="Gray"/>
                    <Setter Property="Foreground" Value="White"/>
                  </Style>
                </Button.Styles>
              </Button>
            </StackPanel>
          </StackPanel>
        </Border>
      </Grid>
    </Border>

  </Grid>
</UserControl>
