FrymasterBadgeApp/EmployeePage.xaml

<?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="FrymasterBadgeApp.EmployeePage"
  BackgroundColor="#0f172a"
>
  <Grid RowDefinitions="80,*" ColumnDefinitions="400,*">
    <!-- Header -->
    <Border Grid.ColumnSpan="2" BackgroundColor="#1e293b" StrokeThickness="0" Padding="20,0">
      <Grid ColumnDefinitions="Auto,*">
        <Label
          Text="FRYMASTER BADGE SYSTEM"
          FontSize="20"
          FontAttributes="Bold"
          TextColor="White"
          VerticalOptions="Center"
        />
        <SearchBar
          Grid.Column="1"
          x:Name="EmployeeSearchBar"
          Placeholder="Search employees..."
          TextColor="White"
          BackgroundColor="#334155"
          PlaceholderColor="#94a3b8"
          Margin="10,0"
          VerticalOptions="Center"
          TextChanged="OnSearchTextChanged"
        />
      </Grid>
    </Border>

    <!-- Left: Employee List -->
    <Border Grid.Row="1" BackgroundColor="#1e293b" StrokeThickness="0">
      <CollectionView
        x:Name="EmployeeList"
        SelectionMode="Single"
        SelectionChanged="OnSelectionChanged"
        BackgroundColor="Transparent"
        Margin="10"
      >
        <CollectionView.ItemsLayout>
          <LinearItemsLayout Orientation="Vertical" ItemSpacing="8" />
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
          <DataTemplate>
            <Border
              BackgroundColor="#334155"
              Padding="15"
              StrokeShape="RoundRectangle 8"
              Shadow="Shadow 0 4 8 0.2 Black"
            >
              <Label
                Text="{Binding [Data2]}"
                TextColor="White"
                FontSize="16"
                FontAttributes="Bold"
              />
            </Border>
          </DataTemplate>
        </CollectionView.ItemTemplate>
      </CollectionView>
    </Border>

    <!-- Right: Preview & Controls -->
    <ScrollView Grid.Row="1" Grid.Column="1" Padding="40,20">
      <VerticalStackLayout Spacing="25" HorizontalOptions="Center">
        <!-- Company Logo (used in badge preview) -->
        <Image
          x:Name="PreviewLogoFront"
          HeightRequest="60"
          Aspect="AspectFit"
          HorizontalOptions="Center"
        />

        <!-- Badge Type & Guest Selector -->
        <Border
          BackgroundColor="#1e293b"
          Padding="20"
          StrokeShape="RoundRectangle 12"
          Shadow="Shadow 0 4 10 0.3 Black"
        >
          <VerticalStackLayout Spacing="15">
            <HorizontalStackLayout Spacing="15" HorizontalOptions="Center">
              <Label
                Text="Badge Type"
                TextColor="White"
                FontAttributes="Bold"
                FontSize="16"
                VerticalOptions="Center"
              />
              <Picker
                x:Name="BadgeTypePicker"
                Title="Select type"
                WidthRequest="250"
                TextColor="White"
                BackgroundColor="#334155"
                SelectedIndexChanged="OnBadgeTypeChanged"
              >
                <Picker.Items>
                  <x:String>Office</x:String>
                  <x:String>Plant</x:String>
                  <x:String>Maintenance</x:String>
                  <x:String>Guest</x:String>
                  <x:String>Visitor</x:String>
                  <x:String>Vendor</x:String>
                </Picker.Items>
              </Picker>
            </HorizontalStackLayout>

            <HorizontalStackLayout
              x:Name="GuestImageSelector"
              IsVisible="False"
              Spacing="15"
              HorizontalOptions="Center"
            >
              <Label
                Text="Guest Image"
                TextColor="White"
                FontAttributes="Bold"
                FontSize="16"
                VerticalOptions="Center"
              />
              <Picker
                x:Name="GuestImagePicker"
                Title="Select image"
                WidthRequest="250"
                TextColor="White"
                BackgroundColor="#334155"
                SelectedIndexChanged="OnGuestImageChanged"
              >
                <Picker.Items>
                  <x:String>Guest1.png</x:String>
                  <x:String>Guest2.png</x:String>
                  <x:String>Guest3.png</x:String>
                </Picker.Items>
              </Picker>
            </HorizontalStackLayout>
          </VerticalStackLayout>
        </Border>

        <!-- Badge Preview (Front + Back side-by-side) -->
        <Border
          x:Name="PreviewFrame"
          BackgroundColor="Transparent"
          Padding="30"
          StrokeShape="RoundRectangle 20"
          Shadow="Shadow 0 8 20 0.4 Black"
          HorizontalOptions="Center"
        >
          <!-- Content dynamically set in code-behind -->
        </Border>

        <!-- Action Buttons -->
        <HorizontalStackLayout Spacing="20" HorizontalOptions="Center">
          <Button
            Text="📷 Edit / Capture Photo"
            Clicked="OnTakePhotoClicked"
            BackgroundColor="#3b82f6"
            TextColor="White"
            FontAttributes="Bold"
            CornerRadius="12"
            HeightRequest="55"
            WidthRequest="220"
          />
          <Button
            Text="🖨️ Print Badge"
            Clicked="OnPrintClicked"
            BackgroundColor="#6366f1"
            TextColor="White"
            FontAttributes="Bold"
            CornerRadius="12"
            HeightRequest="55"
            WidthRequest="220"
          />
        </HorizontalStackLayout>
      </VerticalStackLayout>
    </ScrollView>
  </Grid>

  <!-- Photo Editor Overlay -->
  <Grid x:Name="PhotoEditorOverlay" IsVisible="False" BackgroundColor="#CC000000">
    <Border
      BackgroundColor="#1e293b"
      Padding="30"
      StrokeShape="RoundRectangle 20"
      Shadow="Shadow 0 8 20 0.4 Black"
      HorizontalOptions="Center"
      VerticalOptions="Center"
      WidthRequest="500"
    >
      <VerticalStackLayout Spacing="25">
        <Label
          Text="Adjust Photo"
          FontSize="20"
          FontAttributes="Bold"
          TextColor="White"
          HorizontalTextAlignment="Center"
        />

        <Border
          BackgroundColor="Black"
          StrokeShape="RoundRectangle 12"
          Padding="0"
          IsClippedToBounds="True"
          HeightRequest="300"
          WidthRequest="300"
        >
          <Image x:Name="EditorPhotoPreview" Aspect="AspectFill">
            <Image.GestureRecognizers>
              <PanGestureRecognizer PanUpdated="OnPanUpdated" />
            </Image.GestureRecognizers>
          </Image>
        </Border>

        <VerticalStackLayout Spacing="8">
          <Label Text="Zoom" TextColor="#cbd5e1" HorizontalTextAlignment="Center" />
          <Slider x:Name="ZoomSlider" Minimum="1" Maximum="4" Value="1" />
        </VerticalStackLayout>

        <Grid ColumnDefinitions="*,*" ColumnSpacing="20">
          <Button
            Text="Cancel"
            Clicked="OnCancelPhoto"
            BackgroundColor="#ef4444"
            TextColor="White"
            CornerRadius="10"
          />
          <Button
            Grid.Column="1"
            Text="Save Crop"
            Clicked="OnApplyPhoto"
            BackgroundColor="#22c55e"
            TextColor="White"
            CornerRadius="10"
          />
        </Grid>
      </VerticalStackLayout>
    </Border>
  </Grid>
</ContentPage>