<?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.PasswordField?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="800.0" prefWidth="1200.0" xmlns="http://javafx.com/javafx/23.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.PrimaryController">
   <top>
      <HBox id="header" alignment="CENTER" prefHeight="60.0" prefWidth="631.0" spacing="20.0" styleClass="header" BorderPane.alignment="CENTER">
         <children>
            <!-- Main Title -->
            <Label id="mainTitle" styleClass="mainTitle" text="Bookshop - Fantasy Brigade" />
            
            <!-- Spacer for alignment -->
            <Pane HBox.hgrow="ALWAYS" />
            
            <!-- Buttons -->
            <Button id="cartBtn" mnemonicParsing="false" styleClass="cartBtn" text="Cart" />
            <Button id="loginBtn" mnemonicParsing="false" styleClass="loginBtn" text="Login" />
         </children>
         <padding>
            <Insets bottom="10.0" left="20.0" right="20.0" top="10.0" />
         </padding>
      </HBox>
   </top>
   <bottom>
      <VBox id="footer" prefHeight="188.0" prefWidth="1200.0" styleClass="footer" BorderPane.alignment="CENTER">
         <children>
            <HBox id="footerLinks" alignment="TOP_CENTER" prefHeight="100.0" prefWidth="200.0">
               <children>
                  <VBox id="quickLinks" alignment="TOP_LEFT" prefHeight="145.0" prefWidth="470.0" spacing="10.0">
                     <children>
                        <Label id="footerText" prefHeight="25.0" prefWidth="226.0" styleClass="footerHeading" text="Quick Links" />
                        <Label id="footerHome" styleClass="footerText" text="Home" />
                        <Label id="footerAbout" styleClass="footerText" text="About Us" />
                        <Label id="footerContact" styleClass="footerText" text="Contact" />
                     </children>
                  </VBox>
                  <VBox id="contactUs" prefHeight="145.0" prefWidth="583.0" spacing="10.0">
                     <children>
                        <Label id="footerHeading2" prefWidth="534.0" styleClass="footerHeading" text="Contact Us" />
                        <Label id="footerEmail" styleClass="footerText" text="Email: info@example.com" />
                        <Label id="footerPhone" styleClass="footerText" text="Phone: +1 123 456 7890" />
                     </children>
                  </VBox>
                  <VBox id="followUs" alignment="TOP_RIGHT" spacing="10.0">
                     <children>
                        <Label id="footerHeading3" styleClass="footerHeading" text="Follow Us" />
                        <Label id="footerFacebook" styleClass="footerLink" text="Facebook" />
                        <Label id="footerTwitter" styleClass="footerLink" text="Twitter" />
                        <Label id="footerInstagram" styleClass="footerLink" text="Instagram" />
                     </children>
                  </VBox>
               </children>
            </HBox>
            <VBox id="footerCopy" alignment="BOTTOM_CENTER" prefHeight="68.0" prefWidth="1170.0" spacing="10.0">
               <children>
                  <Label id="footerCopyText" alignment="CENTER" contentDisplay="CENTER" styleClass="footerCopy" text="© 2024 My Website. All rights reserved." />
               </children>
            </VBox>
         </children>
      </VBox>
   </bottom>
   <center>
      <GridPane id="main" styleClass="main" BorderPane.alignment="CENTER">
        <columnConstraints>
          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        </columnConstraints>
        <rowConstraints>
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        </rowConstraints>
         <children>
            <GridPane fx:id="billingForm" alignment="TOP_CENTER" hgap="10" prefHeight="600.0" prefWidth="800.0" style="-fx-background-color: rgba(238, 130, 238, 0.8);" vgap="20">
               <children>
                  <!-- Check Out Header -->
                  <Label id="checkoutHeader" style="-fx-font-size: 24px; -fx-font-weight: bold;" text="Check out" textFill="WHITE" GridPane.columnSpan="2" GridPane.rowIndex="0" />
      
                        <!-- Payment Title -->
                  <Label id="paymentTitle" style="-fx-font-size: 30px; -fx-font-weight: bold;" text="Payment" textFill="WHITE" GridPane.columnSpan="2" GridPane.rowIndex="1" />
                  <Label id="paymentSubtitle" style="-fx-font-size: 14px;" text="Choose payment method below" textFill="WHITE" GridPane.columnSpan="2" GridPane.rowIndex="2" />
      
                        <!-- Payment Icons -->
                  <HBox id="paymentMethods" alignment="CENTER" spacing="20" GridPane.columnSpan="2" GridPane.rowIndex="3">
                     <Button id="creditCard" mnemonicParsing="false" styleClass="creditCard" />
                     <Button id="bill" mnemonicParsing="false" styleClass="bill" />
                     <Button id="paypal" mnemonicParsing="false" styleClass="paypal" />
                  </HBox>
      
                        <!-- Billing Info Section -->
                  <Label id="billingInfoTitle" style="-fx-font-size: 18px; -fx-font-weight: bold;" text="Billing Info" textFill="WHITE" GridPane.columnIndex="0" GridPane.rowIndex="4" />
                  <HBox id="billingName" spacing="10" GridPane.columnIndex="0" GridPane.rowIndex="5">
                        <Label id="fullNameLabel" text="Full Name:" textFill="WHITE" />
                     <TextField fx:id="addressField1" prefWidth="200" promptText="Jon Doe" />
                  </HBox>
      
                        <HBox id="billingAddress" spacing="10" GridPane.columnIndex="0" GridPane.rowIndex="6">
                        <Label id="addressLabel" text="Address:" textFill="WHITE" />
                        <TextField fx:id="addressField" prefWidth="200" promptText="497 Evergreen Rd." />
                  </HBox>
      
                        <HBox id="billingCityZip" spacing="10" GridPane.columnIndex="0" GridPane.rowIndex="7">
                        <Label id="cityLabel" text="City:" textFill="WHITE" />
                        <TextField fx:id="cityField" prefWidth="100" promptText="Roseville" />
                        <Label id="zipLabel" text="ZIP Code:" textFill="WHITE" />
                        <TextField fx:id="zipField" prefWidth="80" promptText="95673" />
                  </HBox>
      
                        <HBox id="billingCountry" spacing="10" GridPane.columnIndex="0" GridPane.rowIndex="8">
                        <Label id="countryLabel" text="Country:" textFill="WHITE" />
                     <ComboBox fx:id="countryComboBox" prefWidth="150.0" />
                  </HBox>
      
                        <!-- Credit Card Info Section -->
                  <Label id="creditCardInfoTitle" style="-fx-font-size: 18px; -fx-font-weight: bold;" text="Credit Card Info" textFill="WHITE" GridPane.columnIndex="1" GridPane.rowIndex="4" />
                  <HBox id="creditCardNumber" spacing="10" GridPane.columnIndex="1" GridPane.rowIndex="5">
                        <Label id="cardNumberLabel" text="Card Number:" textFill="WHITE" />
                        <TextField fx:id="cardNumberField" prefWidth="200" promptText="1234 5678 3456 2456" />
                  </HBox>
                  <HBox id="creditCardHolder" spacing="10" GridPane.columnIndex="1" GridPane.rowIndex="6">
                        <Label id="cardHolderNameLabel" text="Cardholder Name:" textFill="WHITE" />
                        <TextField fx:id="cardHolderNameField" prefWidth="200" promptText="John Doe" />
                  </HBox>
                  <HBox id="creditCardExpiry" spacing="10" GridPane.columnIndex="1" GridPane.rowIndex="7">
                        <Label id="expiryDateLabel" text="Expire Date:" textFill="WHITE" />
                        <TextField fx:id="expiryDateField" prefWidth="80" promptText="MM / YY" />
                        <Label id="cvvLabel" text="CVV:" textFill="WHITE" />
                     <PasswordField fx:id="cvvField" />
                  </HBox>
      
                        <!-- Submit Button -->
                  <Button id="submitBtn" fx:id="submitButton" alignment="CENTER" contentDisplay="CENTER" prefWidth="150" style="-fx-alignment: #4CAF50; -fx-text-fill: white; -fx-font-size: 16px; -fx-font-weight: bold;" styleClass="cartBtn" text="Submit" GridPane.columnSpan="2" GridPane.rowIndex="9" />
               </children>
               <columnConstraints>
                  <ColumnConstraints />
                  <ColumnConstraints />
               </columnConstraints>
               <rowConstraints>
                  <RowConstraints />
                  <RowConstraints />
                  <RowConstraints />
                  <RowConstraints />
                  <RowConstraints />
                  <RowConstraints />
                  <RowConstraints />
                  <RowConstraints />
                  <RowConstraints />
                  <RowConstraints />
               </rowConstraints>
               <opaqueInsets>
                  <Insets />
               </opaqueInsets>
               <GridPane.margin>
                  <Insets />
               </GridPane.margin>
               <padding>
                  <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
               </padding>
            </GridPane>
         </children>
      </GridPane>
   </center>
</BorderPane>
