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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Region?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>

<VBox prefHeight="520.0" prefWidth="760.0" spacing="18.0" style="-fx-font-size: 14px;" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.example.petshopdesktop.controllers.dialogcontrollers.SaleDetailDialogController">
    <padding>
        <Insets bottom="18.0" left="18.0" right="18.0" top="18.0" />
    </padding>
    <children>
        <HBox alignment="CENTER_LEFT" spacing="12.0" style="-fx-background-color: #4ECDC4; -fx-background-radius: 12;">
            <padding>
                <Insets bottom="14.0" left="16.0" right="16.0" top="14.0" />
            </padding>
            <children>
                <Label text="Sale Details" textFill="WHITE">
                    <font>
                        <Font name="System Bold" size="24.0" />
                    </font>
                </Label>
                <Region HBox.hgrow="ALWAYS" />
                <Button fx:id="btnRefund" mnemonicParsing="false" onAction="#btnRefundClicked" style="-fx-background-color: white; -fx-text-fill: #2c3e50; -fx-background-radius: 8;" text="Refund" />
                <Button mnemonicParsing="false" onAction="#btnCloseClicked" style="-fx-background-color: white; -fx-text-fill: #2c3e50; -fx-background-radius: 8;" text="Close" />
            </children>
        </HBox>

        <GridPane hgap="16.0" vgap="12.0" style="-fx-background-color: white; -fx-background-radius: 12; -fx-border-color: #e6e6e6; -fx-border-radius: 12; -fx-border-width: 1;">
            <padding>
                <Insets bottom="16.0" left="16.0" right="16.0" top="16.0" />
            </padding>
            <children>
                <Label text="Sale ID" GridPane.columnIndex="0" GridPane.rowIndex="0" />
                <Label fx:id="lblSaleId" GridPane.columnIndex="1" GridPane.rowIndex="0" />
                <Label text="Date" GridPane.columnIndex="2" GridPane.rowIndex="0" />
                <Label fx:id="lblSaleDate" GridPane.columnIndex="3" GridPane.rowIndex="0" />
                <Label text="Employee" GridPane.columnIndex="0" GridPane.rowIndex="1" />
                <Label fx:id="lblEmployee" GridPane.columnIndex="1" GridPane.rowIndex="1" />
                <Label text="Payment" GridPane.columnIndex="2" GridPane.rowIndex="1" />
                <Label fx:id="lblPayment" GridPane.columnIndex="3" GridPane.rowIndex="1" />
                <Label text="Customer" GridPane.columnIndex="0" GridPane.rowIndex="2" />
                <Label fx:id="lblCustomer" GridPane.columnIndex="1" GridPane.rowIndex="2" />
            </children>
        </GridPane>

        <HBox alignment="CENTER_RIGHT" style="-fx-background-color: white; -fx-background-radius: 8; -fx-border-color: #e6e6e6; -fx-border-radius: 8; -fx-border-width: 1;">
            <padding><Insets bottom="10.0" left="16.0" right="16.0" top="10.0" /></padding>
            <children>
                <VBox spacing="3.0" alignment="CENTER_RIGHT">
                    <children>
                        <HBox fx:id="hbDetailSubtotal" spacing="8.0" alignment="CENTER_RIGHT" visible="false" managed="false">
                            <children>
                                <Label text="Subtotal:" textFill="#2c3e50"><font><Font size="12.0" /></font></Label>
                                <Label fx:id="lblDetailSubtotal" textFill="#2c3e50"><font><Font size="12.0" /></font></Label>
                            </children>
                        </HBox>
                        <HBox fx:id="hbDetailCouponDiscount" spacing="8.0" alignment="CENTER_RIGHT" visible="false" managed="false">
                            <children>
                                <Label text="Coupon Discount:" textFill="#27ae60"><font><Font size="12.0" /></font></Label>
                                <Label fx:id="lblDetailCouponDiscount" textFill="#27ae60"><font><Font size="12.0" /></font></Label>
                            </children>
                        </HBox>
                        <HBox fx:id="hbDetailLoyaltyDiscount" spacing="8.0" alignment="CENTER_RIGHT" visible="false" managed="false">
                            <children>
                                <Label fx:id="lblDetailLoyaltyDiscountTitle" text="Loyalty Discount:" textFill="#27ae60"><font><Font size="12.0" /></font></Label>
                                <Label fx:id="lblDetailLoyaltyDiscount" textFill="#27ae60"><font><Font size="12.0" /></font></Label>
                            </children>
                        </HBox>
                        <HBox spacing="8.0" alignment="CENTER_RIGHT">
                            <children>
                                <Label text="Total:" textFill="#2c3e50"><font><Font name="System Bold" size="13.0" /></font></Label>
                                <Label fx:id="lblTotal" textFill="#2c3e50"><font><Font name="System Bold" size="15.0" /></font></Label>
                            </children>
                        </HBox>
                    </children>
                </VBox>
            </children>
        </HBox>

        <TableView fx:id="tvItems" prefHeight="320.0" VBox.vgrow="ALWAYS">
            <columns>
                <TableColumn fx:id="colProduct" text="Product" prefWidth="330.0" />
                <TableColumn fx:id="colQuantity" text="Qty" prefWidth="90.0" />
                <TableColumn fx:id="colUnitPrice" text="Unit Price" prefWidth="130.0" />
                <TableColumn fx:id="colLineTotal" text="Total" prefWidth="130.0" />
            </columns>
        </TableView>
    </children>
</VBox>
