<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.effect.DropShadow?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.shape.Circle?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.Separator?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="742.0" prefWidth="1069.0" stylesheets="@styles/desktop-ui.css" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.example.petshopdesktop.controllers.MainLayoutController">
   <left>
      <VBox prefWidth="200.0" style="-fx-background-color: #2C3E50;" BorderPane.alignment="CENTER">
         <children>
            <VBox spacing="6.0" style="-fx-background-color: #2C3E50;">
               <padding>
                  <Insets bottom="12.0" left="15.0" right="15.0" top="15.0" />
               </padding>
               <children>
                  <HBox alignment="CENTER">
                     <StackPane fx:id="logoContainer" maxHeight="118.0" maxWidth="118.0" minHeight="118.0" minWidth="118.0" onMouseClicked="#logoClicked" prefHeight="118.0" prefWidth="118.0" style="-fx-cursor: hand;">
                        <effect>
                           <DropShadow blurType="GAUSSIAN" color="0x0f172838" height="18.0" offsetY="6.0" radius="9.0" spread="0.16" width="18.0" />
                        </effect>
                     </StackPane>
                     <VBox.margin>
                        <Insets bottom="15.0" />
                     </VBox.margin>
                  </HBox>
                  <Label fx:id="lblUsername" text="Name" textFill="WHITE">
                     <font>
                        <Font name="System Bold" size="18.0" />
                     </font>
                  </Label>
                  <Label fx:id="lblRole" text="Leon's Petstore" textFill="#ffe66d">
                     <font>
                        <Font name="System" size="12.0" />
                     </font>
                     <padding>
                        <Insets bottom="4.0" />
                     </padding>
                  </Label>
                  <HBox alignment="CENTER_LEFT" spacing="10.0">
                     <children>
                        <StackPane fx:id="avatarPreview" maxHeight="58.0" maxWidth="58.0" minHeight="58.0" minWidth="58.0" prefHeight="58.0" prefWidth="58.0" />
                        <VBox spacing="6.0">
                           <children>
                              <Button fx:id="btnChangeAvatar" mnemonicParsing="false" onAction="#btnChangeAvatarClicked" style="-fx-background-color: rgba(255,255,255,0.12); -fx-background-radius: 8; -fx-cursor: hand; -fx-focus-color: transparent; -fx-faint-focus-color: transparent;" text="Change Photo" textFill="#e2e8f0">
                                 <font>
                                    <Font name="System" size="11.0" />
                                 </font>
                                 <padding>
                                    <Insets bottom="6.0" left="10.0" right="10.0" top="6.0" />
                                 </padding>
                              </Button>
                              <Button fx:id="btnRemoveAvatar" mnemonicParsing="false" onAction="#btnRemoveAvatarClicked" style="-fx-background-color: transparent; -fx-border-color: rgba(226,232,240,0.35); -fx-border-radius: 8; -fx-background-radius: 8; -fx-cursor: hand; -fx-focus-color: transparent; -fx-faint-focus-color: transparent;" text="Remove" textFill="#cbd5e1">
                                 <font>
                                    <Font name="System" size="11.0" />
                                 </font>
                                 <padding>
                                    <Insets bottom="5.0" left="10.0" right="10.0" top="5.0" />
                                 </padding>
                              </Button>
                           </children>
                        </VBox>
                     </children>
                     <VBox.margin>
                        <Insets bottom="8.0" top="4.0" />
                     </VBox.margin>
                  </HBox>
                  <Separator prefWidth="200.0" style="-fx-background-color: #444444; -fx-opacity: 0.35;" />
               </children>
            </VBox>
            <ScrollPane fitToWidth="true" hbarPolicy="NEVER" styleClass="sidebar-scroll-pane" style="-fx-background-color: #2C3E50; -fx-background: #2C3E50;" VBox.vgrow="ALWAYS">
               <content>
                  <VBox spacing="6.0" style="-fx-background-color: #2C3E50;">
                     <padding>
                        <Insets bottom="15.0" left="15.0" right="15.0" top="8.0" />
                     </padding>
                     <children>
                        <Label text="BUSINESS" textFill="#94a3b8">
                           <font>
                              <Font name="System Bold" size="10.0" />
                           </font>
                           <padding>
                              <Insets top="4.0" />
                           </padding>
                        </Label>

                        <Button fx:id="btnAnalytics" alignment="CENTER_LEFT" maxWidth="Infinity" mnemonicParsing="false" onAction="#btnAnalyticsClicked" style="-fx-background-color: transparent; -fx-background-radius: 8; -fx-cursor: hand; -fx-focus-color: transparent; -fx-faint-focus-color: transparent;" text="Analytics" textFill="#cbd5e1">
                           <font>
                              <Font name="System" size="12.0" />
                           </font>
                           <padding>
                              <Insets bottom="8.0" left="10.0" right="10.0" top="8.0" />
                           </padding>
                        </Button>
                        <Button fx:id="btnSalesHistory" alignment="CENTER_LEFT" maxWidth="Infinity" mnemonicParsing="false" onAction="#btnSalesHistoryClicked" style="-fx-background-color: transparent; -fx-background-radius: 8; -fx-cursor: hand; -fx-focus-color: transparent; -fx-faint-focus-color: transparent;" text="Sales History" textFill="#cbd5e1">
                           <font>
                              <Font name="System" size="12.0" />
                           </font>
                           <padding>
                              <Insets bottom="8.0" left="10.0" right="10.0" top="8.0" />
                           </padding>
                        </Button>
                        <Button fx:id="btnAppointments" alignment="CENTER_LEFT" maxWidth="Infinity" mnemonicParsing="false" onAction="#btnAppointmentsClicked" style="-fx-background-color: transparent; -fx-background-radius: 8; -fx-cursor: hand; -fx-focus-color: transparent; -fx-faint-focus-color: transparent;" text="Appointments" textFill="#cbd5e1">
                           <font>
                              <Font name="System" size="12.0" />
                           </font>
                           <padding>
                              <Insets bottom="8.0" left="10.0" right="10.0" top="8.0" />
                           </padding>
                        </Button>
                        <Button fx:id="btnServices" alignment="CENTER_LEFT" maxWidth="Infinity" mnemonicParsing="false" onAction="#btnServicesClicked" style="-fx-background-color: transparent; -fx-background-radius: 8; -fx-cursor: hand; -fx-focus-color: transparent; -fx-faint-focus-color: transparent;" text="Services" textFill="#cbd5e1">
                           <font>
                              <Font name="System" size="12.0" />
                           </font>
                           <padding>
                              <Insets bottom="8.0" left="10.0" right="10.0" top="8.0" />
                           </padding>
                        </Button>
                        <StackPane alignment="CENTER_LEFT">
                            <Button fx:id="btnChat" alignment="CENTER_LEFT" maxWidth="Infinity" mnemonicParsing="false" onAction="#btnChatClicked" style="-fx-background-color: transparent; -fx-background-radius: 8; -fx-cursor: hand; -fx-focus-color: transparent; -fx-faint-focus-color: transparent;" text="Chat" textFill="#cbd5e1">
                                <font>
                                    <Font name="System" size="12.0" />
                                </font>
                                <padding>
                                    <Insets bottom="8.0" left="10.0" right="10.0" top="8.0" />
                                </padding>
                            </Button>
                            <javafx.scene.shape.Circle fx:id="chatBadge" fill="#ff4d4d" radius="4.0" visible="false" StackPane.alignment="CENTER_LEFT">
                                <StackPane.margin>
                                    <Insets left="40.0" top="-8.0" />
                                </StackPane.margin>
                            </javafx.scene.shape.Circle>
                        </StackPane>

                        <Separator prefWidth="200.0" style="-fx-background-color: #444444; -fx-opacity: 0.35;" />

                        <Label text="STORE" textFill="#94a3b8">
                           <font>
                              <Font name="System Bold" size="10.0" />
                           </font>
                           <padding>
                              <Insets top="4.0" />
                           </padding>
                        </Label>

                        <Button fx:id="btnPets" alignment="CENTER_LEFT" maxWidth="Infinity" mnemonicParsing="false" onAction="#btnPetsClicked" style="-fx-background-color: transparent; -fx-background-radius: 8; -fx-cursor: hand; -fx-focus-color: transparent; -fx-faint-focus-color: transparent;" text="Pets" textFill="#cbd5e1">
                           <font>
                              <Font name="System" size="12.0" />
                           </font>
                           <padding>
                              <Insets bottom="8.0" left="10.0" right="10.0" top="8.0" />
                           </padding>
                        </Button>
                        <Button fx:id="btnAdoptions" alignment="CENTER_LEFT" maxWidth="Infinity" mnemonicParsing="false" onAction="#btnAdoptionsClicked" style="-fx-background-color: transparent; -fx-background-radius: 8; -fx-cursor: hand; -fx-focus-color: transparent; -fx-faint-focus-color: transparent;" text="Adoptions" textFill="#cbd5e1">
                           <font>
                              <Font name="System" size="12.0" />
                           </font>
                           <padding>
                              <Insets bottom="8.0" left="10.0" right="10.0" top="8.0" />
                           </padding>
                        </Button>
                        <Button fx:id="btnProducts" alignment="CENTER_LEFT" maxWidth="Infinity" mnemonicParsing="false" onAction="#btnProductsClicked" style="-fx-background-color: transparent; -fx-background-radius: 8; -fx-cursor: hand; -fx-focus-color: transparent; -fx-faint-focus-color: transparent;" text="Products" textFill="#cbd5e1">
                           <font>
                              <Font name="System" size="12.0" />
                           </font>
                           <padding>
                              <Insets bottom="8.0" left="10.0" right="10.0" top="8.0" />
                           </padding>
                        </Button>

                        <Separator fx:id="separatorAdmin" prefWidth="200.0" style="-fx-background-color: #444444; -fx-opacity: 0.35;" />

                        <Label fx:id="lblAdminSection" text="ADMIN" textFill="#94a3b8">
                           <font>
                              <Font name="System Bold" size="10.0" />
                           </font>
                           <padding>
                              <Insets top="4.0" />
                           </padding>
                        </Label>

                        <Button fx:id="btnInventory" alignment="CENTER_LEFT" maxWidth="Infinity" mnemonicParsing="false" onAction="#btnInventoryClicked" style="-fx-background-color: transparent; -fx-background-radius: 8; -fx-cursor: hand; -fx-focus-color: transparent; -fx-faint-focus-color: transparent;" text="Inventory" textFill="#cbd5e1">
                           <font>
                              <Font name="System" size="12.0" />
                           </font>
                           <padding>
                              <Insets bottom="8.0" left="10.0" right="10.0" top="8.0" />
                           </padding>
                        </Button>
                        <Button fx:id="btnSuppliers" alignment="CENTER_LEFT" maxWidth="Infinity" mnemonicParsing="false" onAction="#btnSuppliersClicked" style="-fx-background-color: transparent; -fx-background-radius: 8; -fx-cursor: hand; -fx-focus-color: transparent; -fx-faint-focus-color: transparent;" text="Suppliers" textFill="#cbd5e1">
                           <font>
                              <Font name="System" size="12.0" />
                           </font>
                           <padding>
                              <Insets bottom="8.0" left="10.0" right="10.0" top="8.0" />
                           </padding>
                        </Button>
                        <Button fx:id="btnProductSuppliers" alignment="CENTER_LEFT" maxWidth="Infinity" mnemonicParsing="false" onAction="#btnProductSuppliersClicked" style="-fx-background-color: transparent; -fx-background-radius: 8; -fx-cursor: hand; -fx-focus-color: transparent; -fx-faint-focus-color: transparent;" text="Product-Suppliers" textFill="#cbd5e1">
                           <font>
                              <Font name="System" size="12.0" />
                           </font>
                           <padding>
                              <Insets bottom="8.0" left="10.0" right="10.0" top="8.0" />
                           </padding>
                        </Button>
                        <Button fx:id="btnPurchaseOrders" alignment="CENTER_LEFT" maxWidth="Infinity" mnemonicParsing="false" onAction="#btnPurchaseOrdersClicked" style="-fx-background-color: transparent; -fx-background-radius: 8; -fx-cursor: hand; -fx-focus-color: transparent; -fx-faint-focus-color: transparent;" text="Purchase Orders" textFill="#cbd5e1">
                           <font>
                              <Font name="System" size="12.0" />
                           </font>
                           <padding>
                              <Insets bottom="8.0" left="10.0" right="10.0" top="8.0" />
                           </padding>
                        </Button>
                         <Button fx:id="btnStaffAccounts" alignment="CENTER_LEFT" maxWidth="Infinity" mnemonicParsing="false" onAction="#btnStaffAccountsClicked" style="-fx-background-color: transparent; -fx-background-radius: 8; -fx-cursor: hand; -fx-focus-color: transparent; -fx-faint-focus-color: transparent;" text="User Accounts" textFill="#cbd5e1">
                            <font>
                               <Font name="System" size="12.0" />
                            </font>
                            <padding>
                               <Insets bottom="8.0" left="10.0" right="10.0" top="8.0" />
                            </padding>
                         </Button>
                         <Button fx:id="btnActivityLogs" alignment="CENTER_LEFT" maxWidth="Infinity" mnemonicParsing="false" onAction="#btnActivityLogsClicked" style="-fx-background-color: transparent; -fx-background-radius: 8; -fx-cursor: hand; -fx-focus-color: transparent; -fx-faint-focus-color: transparent;" text="Activity Logs" textFill="#cbd5e1">
                            <font>
                               <Font name="System" size="12.0" />
                            </font>
                            <padding>
                               <Insets bottom="8.0" left="10.0" right="10.0" top="8.0" />
                            </padding>
                         </Button>

                         <Button fx:id="btnLogout" alignment="CENTER_LEFT" maxWidth="Infinity" mnemonicParsing="false" onAction="#btnLogoutClicked" style="-fx-background-color: rgba(255,255,255,0.08); -fx-background-radius: 8; -fx-cursor: hand; -fx-focus-color: transparent; -fx-faint-focus-color: transparent;" text="Logout" textFill="#e2e8f0">
                           <font>
                              <Font name="System" size="12.0" />
                           </font>
                           <padding>
                              <Insets bottom="8.0" left="10.0" right="10.0" top="8.0" />
                           </padding>
                           <VBox.margin>
                              <Insets top="8.0" />
                           </VBox.margin>
                        </Button>
                     </children>
                  </VBox>
               </content>
            </ScrollPane>
         </children>
      </VBox>
   </left>
   <center>
      <StackPane fx:id="spContentArea" prefHeight="150.0" prefWidth="200.0" BorderPane.alignment="CENTER" />
   </center>
</BorderPane>
