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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.Font?>

<VBox spacing="20.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.PurchaseOrderController">

    <padding>
        <Insets bottom="20" left="20" right="20" top="20"/>
    </padding>

    <!-- HEADER -->
    <HBox spacing="20" alignment="CENTER_LEFT">
        <Label text="Purchase Orders" textFill="#2c3e50">
            <font>
                <Font name="System Bold" size="30"/>
            </font>
        </Label>

        <Label text="(View Only)" textFill="#7f8c8d">
            <font>
                <Font name="System Bold" size="16"/>
            </font>
            <padding>
                <Insets top="10"/>
            </padding>
        </Label>

        <Region HBox.hgrow="ALWAYS"/>

        <Button fx:id="btnRefresh"
                text="Refresh"
                onAction="#btnRefresh"
                style="-fx-background-color:#4ECDC4; -fx-background-radius:8;"
                textFill="WHITE"/>
    </HBox>

    <!-- SEARCH -->
    <HBox spacing="10"
          style="-fx-background-color:white; -fx-background-radius:14; -fx-border-width:2; -fx-border-radius:14;">
        <padding>
            <Insets bottom="10" left="15" right="15" top="10"/>
        </padding>

        <TextField fx:id="txtSearch"
                   promptText="Search Purchase Orders..."
                   style="-fx-border-width:0; -fx-background-color:transparent;"
                   HBox.hgrow="ALWAYS"/>
    </HBox>

    <!-- TABLE -->
       <Label fx:id="lblStatus" text="" textFill="#64748b" visible="false" managed="true">
          <font>
             <Font size="13.0" />
          </font>
       </Label>

    <TableView fx:id="tvPurchaseOrders"
               style="-fx-background-color:white; -fx-background-radius:12;"
               VBox.vgrow="ALWAYS">

        <columns>
            <TableColumn fx:id="colOrderId" text="Order ID" prefWidth="80"/>
            <TableColumn fx:id="colSupplier" text="Supplier" prefWidth="200"/>
            <TableColumn fx:id="colOrderDate" text="Order Date" prefWidth="150"/>
            <TableColumn fx:id="colStatus" text="Status" prefWidth="120"/>
            <TableColumn fx:id="colStoreName" text="Store" prefWidth="130"/>
        </columns>

    </TableView>

</VBox>
