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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.RadioButton?>
<?import javafx.scene.control.Separator?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.shape.Circle?>

<AnchorPane prefHeight="755.0" prefWidth="1111.0" stylesheets="@PatientApp.css" xmlns="http://javafx.com/javafx/23" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.clinic.AddAttachment.AddAttachment">

    <!-- Close Icon (Anchored to Top Right) -->
    <ImageView fx:id="closeIcon" fitHeight="33.0" fitWidth="36.0" styleClass="close-icon">
        <image>
            <Image url="@../../Icons/no.png" />
        </image>
        <AnchorPane.topAnchor>10.0</AnchorPane.topAnchor>
        <AnchorPane.rightAnchor>10.0</AnchorPane.rightAnchor>
    </ImageView>

    <!-- Main Content Container -->
    <VBox prefHeight="755.0" prefWidth="1111.0" spacing="20.0" styleClass="main-container" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">

        <!-- Search and Filter Section -->
        <HBox alignment="CENTER_LEFT" prefHeight="54.0" prefWidth="1091.0" spacing="20" styleClass="search-container">
            <!-- Search Field with Icon -->
            <StackPane prefHeight="57.0" prefWidth="306.0" styleClass="search-field-container">
                <children>
                    <TextField prefHeight="34.0" prefWidth="283.0" promptText="Search" styleClass="search-field" />
                    <ImageView fitHeight="26.0" fitWidth="31.0" styleClass="search-icon" StackPane.alignment="CENTER_RIGHT">
                        <image>
                            <Image url="@../../Icons/search.png" />
                        </image>
                    </ImageView>
                </children>
            </StackPane>

            <!-- Radio Buttons -->
            <HBox alignment="CENTER_LEFT" spacing="15" styleClass="radio-group">
                <children>
                    <RadioButton selected="true" text="File Number" />
                    <RadioButton text="Mobile Number" />
                    <RadioButton text="Civil ID" />
                    <RadioButton text="All" />
                </children>
            </HBox>
        </HBox>

        <!-- Patient Info Section -->
        <VBox prefHeight="180.0" prefWidth="1091.0" spacing="0" styleClass="section-container">
            <!-- Section Header -->
            <HBox alignment="CENTER_LEFT" prefHeight="45.0" prefWidth="1091.0" styleClass="section-header">
                <children>
                    <Label prefHeight="50.0" prefWidth="127.0" styleClass="section-title" text="Patient Info">
                        <graphic>
                            <ImageView fitHeight="24.0" fitWidth="24.0">
                                <image>
                                    <Image url="@../../Icons/info.png" />
                                </image>
                            </ImageView>
                        </graphic>
                    </Label>
                </children>
            </HBox>

            <!-- Patient Info Grid -->
            <VBox spacing="0" styleClass="content-container">
                <!-- Headers Row -->
                <HBox alignment="CENTER_LEFT" prefHeight="50.0" prefWidth="1091.0" styleClass="grid-header-row">
                    <children>
                        <Label styleClass="grid-header" text="File" HBox.hgrow="ALWAYS" />
                        <Separator orientation="VERTICAL" styleClass="vertical-line" />
                        <Label prefWidth="130.0" styleClass="grid-header" text="Arabic Name" HBox.hgrow="ALWAYS" />
                        <Separator orientation="VERTICAL" styleClass="vertical-line" />
                        <Label prefWidth="197.0" styleClass="grid-header" text="English Name" HBox.hgrow="ALWAYS" />
                        <Separator orientation="VERTICAL" styleClass="vertical-line" />
                        <Label prefWidth="138.0" styleClass="grid-header" text="Mobile Number" HBox.hgrow="ALWAYS" />
                        <Separator orientation="VERTICAL" styleClass="vertical-line" />
                        <Label prefWidth="100.0" styleClass="grid-header" text="Birthdate" HBox.hgrow="ALWAYS" />
                        <Separator orientation="VERTICAL" styleClass="vertical-line" />
                        <Label prefWidth="97.0" styleClass="grid-header" text="User Name" HBox.hgrow="ALWAYS" />
                        <Separator orientation="VERTICAL" styleClass="vertical-line" />
                        <Label prefWidth="111.0" styleClass="grid-header" text="Notice" HBox.hgrow="ALWAYS" />
                    </children>
                </HBox>

                <!-- Data Row -->
                <HBox alignment="CENTER_LEFT" prefHeight="51.0" prefWidth="1091.0" styleClass="grid-data-row">
                    <children>
                        <Label styleClass="grid-cell" text="42604" HBox.hgrow="ALWAYS" />
                        <Separator orientation="VERTICAL" styleClass="vertical-line" />
                        <Label styleClass="grid-cell" text="مهند درويش محمد" HBox.hgrow="ALWAYS" />
                        <Separator orientation="VERTICAL" styleClass="vertical-line" />
                        <Label styleClass="grid-cell" text="Mohanad Darwish Mohamed" HBox.hgrow="ALWAYS" />
                        <Separator orientation="VERTICAL" styleClass="vertical-line" />
                        <Label prefWidth="141.0" styleClass="grid-cell" text="01117521556" HBox.hgrow="ALWAYS" />
                        <Separator orientation="VERTICAL" styleClass="vertical-line" />
                        <Label prefWidth="100.0" styleClass="grid-cell" text="22-4-2001" HBox.hgrow="ALWAYS" />
                        <Separator orientation="VERTICAL" styleClass="vertical-line" />
                        <Label prefWidth="97.0" styleClass="grid-cell" text="Honda" HBox.hgrow="ALWAYS" />
                        <Separator orientation="VERTICAL" styleClass="vertical-line" />
                        <Label styleClass="grid-cell" text="" HBox.hgrow="ALWAYS" />
                    </children>
                </HBox>
            </VBox>
        </VBox>

        <!-- Add Attachment Button Above Patient App and Centered -->
        <HBox alignment="CENTER" prefHeight="50.0" prefWidth="866.0">
            <children>
                <Button fx:id="attachmentButton" prefHeight="21.0" prefWidth="214.0" styleClass="attachment-button" text=" Add Attachment">
                    <graphic>
                        <ImageView fitHeight="31.0" fitWidth="28.0" pickOnBounds="true" preserveRatio="true">
                            <image>
                                <Image url="@../../Icons/AddDoc.png" />
                            </image>
                        </ImageView>
                    </graphic>
                </Button>
            </children>
        </HBox>

        <!-- Patient App Section -->
        <VBox prefHeight="425.0" prefWidth="1073.0" spacing="5" styleClass="section-container">
            <!-- Section Header -->
            <HBox alignment="CENTER_LEFT" prefHeight="45.0" prefWidth="1091.0" styleClass="section-header">
                <children>
                    <Label styleClass="section-title" text="Patient App">
                        <graphic>
                            <ImageView fitHeight="24.0" fitWidth="24.0">
                                <image>
                                    <Image url="@../../Icons/sand-clock.png" />
                                </image>
                            </ImageView>
                        </graphic>
                    </Label>
                </children>
            </HBox>

            <!-- Legend Bar -->
            <HBox alignment="CENTER_LEFT" prefHeight="90.0" prefWidth="1030.0" spacing="15" styleClass="legend-bar">
                <children>
                    <!-- Individual Legend Items -->
                    <HBox alignment="CENTER_LEFT" spacing="5">
                        <Circle radius="10.0" style="-fx-fill: #90e1f4;" />
                        <Label text="موعد في المستقبل" />
                    </HBox>
                    <HBox alignment="CENTER_LEFT" spacing="5">
                        <Circle radius="10.0" style="-fx-fill: #89BC1B;" />
                        <Label text="وصول" />
                    </HBox>
                    <HBox alignment="CENTER_LEFT" spacing="5">
                        <Circle radius="10.0" style="-fx-fill: #5be26d;" />
                        <Label text="تأكيد الموعد" />
                    </HBox>
                    <HBox alignment="CENTER_LEFT" spacing="5">
                        <Circle radius="10.0" style="-fx-fill: #904E41;" />
                        <Label text="تأكيد برسالة" />
                    </HBox>
                    <HBox alignment="CENTER_LEFT" spacing="5">
                        <Circle radius="10.0" style="-fx-fill: #7695E5;" />
                        <Label text="عدم الرد" />
                    </HBox>
                    <HBox alignment="CENTER_LEFT" spacing="5">
                        <Circle radius="10.0" style="-fx-fill: #EF6B7B;" />
                        <Label prefHeight="15.0" prefWidth="68.0" text="الجهاز مغلق" />
                    </HBox>
                    <HBox alignment="CENTER_LEFT" spacing="5">
                        <Circle radius="10.0" style="-fx-fill: #8F9998;" />
                        <Label text="مفصول عن الخدمة" />
                    </HBox>
                    <HBox alignment="CENTER_LEFT" spacing="5">
                        <Circle radius="10.0" style="-fx-fill: #C25DEA;" />
                        <Label text="موعد ثاني" />
                    </HBox>
                    <HBox alignment="CENTER_LEFT" spacing="5">
                        <Circle radius="10.0" style="-fx-fill: #C08E1A;" />
                        <Label text="الغاء الموعد" />
                    </HBox>
                    <HBox alignment="CENTER_LEFT" spacing="5">
                        <Circle radius="10.0" style="-fx-fill: #23B1D7;" />
                        <Label text="تأخير في الطريق" />
                    </HBox>
                    <HBox alignment="CENTER_LEFT" spacing="5">
                        <Circle radius="10.0" style="-fx-fill: #F6F138;" />
                        <Label text="خروج" />
                    </HBox>
                    <!-- Add remaining legend items as needed -->
                </children>
            </HBox>

            <!-- Patient App Content -->
            <VBox spacing="10" styleClass="content-container">
                <!-- TableView -->
                <TableView fx:id="patientAppTable" prefHeight="300.0" prefWidth="1030.0" styleClass="patient-app-table">
                    <columns>
                        <TableColumn fx:id="fileColumn" text="File" />
                        <TableColumn fx:id="timeColumn" text="Time" />
                        <TableColumn fx:id="dateColumn" text="Date" />
                        <TableColumn fx:id="deleteColumn" text="Delete" />
                        <TableColumn fx:id="appColumn" text="App" />
                        <TableColumn fx:id="statusColumn" text="Status" />
                        <TableColumn fx:id="groupColumn" text="Group" />
                        <TableColumn fx:id="memoColumn" text="MEMO" />
                        <TableColumn fx:id="codeColumn" text="Code" />
                        <TableColumn fx:id="drNameColumn" text="Dr Name" />
                        <TableColumn fx:id="userChangeStatusColumn" text="User Change Status" />
                        <TableColumn fx:id="userNameCreatedColumn" text="User Name Created" />
                        <TableColumn fx:id="createdDateTimeColumn" text="Created Date/Time" />
                    </columns>
                    <!-- Sample rows can be populated programmatically in the controller -->
                </TableView>
            </VBox>
        </VBox>

    </VBox>
</AnchorPane>


/* Main Container Styles */
.main-container {
    -fx-background-color: #e0ebff;
    -fx-padding: 20;
    -fx-spacing: 30; /* Increased spacing for better layout */
    -fx-font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* Search Section Styles */
.search-container {
    -fx-padding: 10 0; /* Added vertical padding */
    -fx-alignment: CENTER_LEFT;
    -fx-spacing: 25; /* Increased spacing between search field and radio buttons */
}

.search-field-container {
    -fx-alignment: CENTER_LEFT;
    -fx-spacing: 5;
    -fx-padding: 0;
}

.search-field {
    -fx-pref-width: 300;
    -fx-background-color: white;
    -fx-background-radius: 20;
    -fx-padding: 8 30 8 8; /* Right padding to accommodate the icon */
    -fx-border-color: #b3c7e6;
    -fx-border-width: 1px;
}

.search-icon {
    -fx-opacity: 0.5;
    /* Positioned to the right via StackPane alignment in FXML */
}

/* Radio Buttons Group */
.radio-group {
    -fx-alignment: CENTER_LEFT;
    -fx-spacing: 20; /* Increased spacing between radio buttons */
}

.radio-group .radio-button {
    -fx-padding: 0 10;
    -fx-font-size: 13;
}

/* Close Icon Styles */
.close-icon {
    -fx-cursor: hand;
    -fx-background-color: transparent; /* Transparent background */
    -fx-padding: 5; /* Padding around the icon */
}

.close-icon:hover {
    -fx-opacity: 0.7; /* Slightly transparent on hover for feedback */
}

/* Section Container Styles (Both Patient Info and Patient App) */
.section-container {
    -fx-background-color: #e0ebff;
    -fx-background-radius: 10;
    -fx-padding: 15; /* Added padding for inner content */
    -fx-spacing: 0; /* Removed spacing to ensure tight alignment */
}

/* Section Header Styles */
.section-header {
    -fx-padding: 0; /* Removed padding */
    -fx-spacing: 10;
    -fx-alignment: CENTER_LEFT;
}

/* Section Title Styles */
.section-title {
    /* Grey background with rounded top-right corner */
    -fx-background-color: #e7e4e4;
    -fx-font-size: 14;
    -fx-font-weight: bold;
    -fx-text-fill: #333333;
    -fx-padding: 5 10;
    /* Rounded top-right corner: top-left, top-right, bottom-right, bottom-left */
    -fx-background-radius: 0 10 0 0;
    -fx-alignment: CENTER_LEFT; /* Align text to the left */
}

/* Content Container Styles */
.content-container {
    -fx-background-color: #e8f5e9;
    -fx-padding: 0;
    -fx-background-radius: 0 0 10 10; /* Rounded bottom corners only */
    -fx-spacing: 10; /* Added spacing between child elements */
}

/* Patient Info Grid Header Styles */
.grid-header-row {
    -fx-background-color: #c8e6c9;
    -fx-padding: 8;
    -fx-spacing: 0;
    -fx-alignment: CENTER_LEFT;
}

.grid-header-row .grid-header {
    -fx-font-size: 13;
    -fx-font-weight: bold;
}

/* Patient Info Grid Data Row Styles */
.grid-data-row {
    -fx-background-color: white;
    -fx-padding: 8;
    -fx-spacing: 0;
    -fx-alignment: CENTER_LEFT;
}

.grid-header, .grid-cell {
    -fx-padding: 8 15;
    -fx-alignment: CENTER_LEFT; /* Align cells with headers */
    -fx-min-width: 100;
    -fx-font-size: 13;
}

.grid-header {
    -fx-font-weight: bold;
}

/* Vertical Separator Lines */
.vertical-line {
    -fx-stroke: #2e7d32; /* Dark green color for visibility */
    -fx-stroke-width: 2; /* Increased stroke width for prominence */
    -fx-stroke-line-cap: ROUND; /* Rounded ends for a polished look */
    -fx-fill: transparent;
}

/* Legend Bar Styles */
.legend-bar {
    -fx-background-color: white; /* White background for contrast */
    -fx-padding: 15; /* Increased padding */
    -fx-background-radius: 10 10 0 0;
    -fx-spacing: 20; /* Increased spacing between items */
    -fx-effect: dropshadow(one-pass-box, rgba(0,0,0,0.1), 5, 0, 0, 1); /* Subtle shadow */
}

.legend-bar .circle {
    -fx-radius: 5;
}

.legend-bar Label {
    -fx-font-size: 13; /* Increased font size for better readability */
    -fx-text-fill: #333333;
}

/* Patient App Table Styles */
.patient-app-table {
    -fx-background-color: #f9f9f9; /* Light background for the table */
    -fx-padding: 10;
    -fx-border-color: #90c491;
    -fx-border-radius: 0 0 10 10; /* Rounded bottom corners */
    -fx-cell-border-color: transparent; /* Remove default cell borders */
    -fx-table-cell-border-color: transparent;
}

.patient-app-table .column-header-background {
    -fx-background-color: #c8e6c9; /* Matching Patient Info header color */
}

.patient-app-table .column-header, .patient-app-table .column-header .label {
    -fx-font-size: 13;
    -fx-font-weight: bold;
    -fx-text-fill: white;
    -fx-background-color:#90c491; /* Header text color */
}

.patient-app-table .table-row-cell:filled:odd {
    -fx-background-color: #e3f2fd; /* Light blue for odd rows */
}

.patient-app-table .table-row-cell:filled:even {
    -fx-background-color: #ffffff; /* White for even rows */
}

.patient-app-table .table-cell {
    -fx-alignment: CENTER_LEFT; /* Align cell content to the left */
    -fx-padding: 8 15; /* Padding for better readability */
    -fx-text-fill: #333333; /* Cell text color */
}

/* Styling Delete Button Within Table Cells */
.patient-app-table .table-cell .button {
    -fx-background-color: #d9534f; /* Red color for delete */
    -fx-text-fill: white;
    -fx-padding: 5 10;
    -fx-background-radius: 5;
    -fx-cursor: hand;
}

.patient-app-table .table-cell .button:hover {
    -fx-background-color: #c9302c;
}

/* Add Attachment Button Styles */
.attachment-button {
    -fx-background-color: #4a8dd1;
    -fx-text-fill: white;
    -fx-padding: 10 20; /* Increased padding for better click area */
    -fx-background-radius: 10;
    -fx-cursor: hand;
    -fx-font-size: 14;
    -fx-font-weight: bold;
    -fx-border-radius: 10;
    -fx-border-color: #346599;
    -fx-border-width: 1px;
}

.attachment-button:hover {
    -fx-background-color: #3b7bbf;
}

/* Optional: Delete Button Specific Styles */
.delete-button {
    -fx-background-color: #d9534f; /* Red color */
    -fx-text-fill: white;
    -fx-padding: 5 10;
    -fx-background-radius: 5;
    -fx-cursor: hand;
}

.delete-button:hover {
    -fx-background-color: #c9302c;
}

I want to add some rows to the table , is it ok? if it give me the whole files updated