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

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

<VBox spacing="16.0" style="-fx-font-size: 14px;" xmlns="http://javafx.com/javafx/25" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.example.petshopdesktop.controllers.CustomerAccountsController">
    <padding>
        <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
    </padding>

    <children>
        <HBox alignment="CENTER_LEFT" spacing="20.0">
            <children>
                <Label text="Customers" textFill="#2c3e50">
                    <font>
                        <Font name="System Bold" size="30.0" />
                    </font>
                </Label>
                <Region HBox.hgrow="ALWAYS" />
                <Button fx:id="btnRefresh" mnemonicParsing="false" onAction="#btnRefreshClicked" prefHeight="44.0" prefWidth="118.0" style="-fx-background-color: #4ECDC4; -fx-cursor: hand; -fx-background-radius: 8;" text="Refresh" textFill="WHITE">
                    <font>
                        <Font name="System Bold" size="14.0" />
                    </font>
                    <padding>
                        <Insets bottom="12.0" left="24.0" right="24.0" top="12.0" />
                    </padding>
                </Button>
            </children>
        </HBox>

        <VBox spacing="10.0" VBox.vgrow="ALWAYS">
            <children>
                <HBox alignment="CENTER_LEFT" spacing="12.0">
                    <children>
                        <Region HBox.hgrow="ALWAYS" />
                        <Button fx:id="btnEditCustomer" mnemonicParsing="false" onAction="#btnEditCustomerClicked" prefHeight="40.0" style="-fx-background-color: #F4A261; -fx-cursor: hand; -fx-background-radius: 8;" text="Edit Customer" textFill="WHITE">
                            <font>
                                <Font name="System Bold" size="14.0" />
                            </font>
                            <padding>
                                <Insets bottom="10.0" left="20.0" right="20.0" top="10.0" />
                            </padding>
                        </Button>
                    </children>
                </HBox>

                <HBox alignment="CENTER_LEFT" spacing="10.0" style="-fx-background-color: white; -fx-background-radius: 14; -fx-border-width: 1; -fx-border-radius: 14; -fx-border-color: #e6e6e6;">
                    <padding>
                        <Insets bottom="10.0" left="15.0" right="15.0" top="10.0" />
                    </padding>
                    <children>
                        <TextField fx:id="txtSearchCustomer" promptText="Search customers..." style="-fx-border-width: 0; -fx-background-color: transparent;" HBox.hgrow="ALWAYS">
                            <font>
                                <Font size="15.0" />
                            </font>
                        </TextField>
                        <ComboBox fx:id="cbStatusFilter" prefWidth="140.0" promptText="All Statuses" />
                    </children>
                </HBox>

                <TableView fx:id="tvCustomers" style="-fx-background-color: white; -fx-background-radius: 12;" VBox.vgrow="ALWAYS">
                    <columns>
                        <TableColumn fx:id="colCustomerUsername" prefWidth="130.0" text="Username" />
                        <TableColumn fx:id="colCustomerName" prefWidth="160.0" text="Name" />
                        <TableColumn fx:id="colCustomerEmail" prefWidth="200.0" text="Email" />
                        <TableColumn fx:id="colCustomerPhone" prefWidth="130.0" text="Phone" />
                        <TableColumn fx:id="colCustomerLoyaltyPoints" prefWidth="120.0" text="Loyalty Points" />
                        <TableColumn fx:id="colCustomerStatus" prefWidth="90.0" text="Status" />
                        <TableColumn fx:id="colCustomerCreated" prefWidth="150.0" text="Created" />
                    </columns>
                </TableView>
            </children>
        </VBox>

        <Label fx:id="lblStatus" text="" textFill="#64748b" visible="false" managed="true">
            <font>
                <Font size="13.0" />
            </font>
        </Label>
        <Label fx:id="lblError" text="" textFill="#FF6B6B" wrapText="true" />
    </children>
</VBox>
