<LoginScreen>:
    BoxLayout:
        orientation: "vertical"
        padding: 20
        spacing: 20
        canvas.before:
            Color:
                rgba: 0.11, 0.10, 0.15, 1  # Background color: #1C1A27
            Rectangle:
                pos: self.pos
                size: self.size

        Image:
            source: "resources/track.png"
            size_hint: (1, 0.66)  # 2/3 of the screen height

        TextInput:
            id: username_input
            hint_text: "Username"
            multiline: False
            font_size: 20  # Text size
            height: self.minimum_height
            size_hint_y: None  # Fix height
            size_hint_x: 0.8  # Center horizontally
            pos_hint: {"center_x": 0.5}

        TextInput:
            id: password_input
            hint_text: "Password"
            multiline: False
            password: True
            font_size: 20  # Text size
            height: self.minimum_height
            size_hint_y: None  # Fix height
            size_hint_x: 0.8  # Center horizontally
            pos_hint: {"center_x": 0.5}

        BoxLayout:
            orientation: "horizontal"
            size_hint_y: None
            height: 50  # Fixed height for the button group
            size_hint_x: 0.8  # Match the width of the TextInput fields
            pos_hint: {"center_x": 0.5}  # Center horizontally
            spacing: 10

            Button:
                text: "Login"
                font_size: 20  # Match the font size of the TextInput fields
                size_hint_x: 0.5  # Half the width of the BoxLayout
                size_hint_y: None
                height: 50  # Fixed height for the button
                background_color: 0.341, 0.235, 0.980, 1  # Purple color (#573CFA)
                on_press: root.login()

            Button:
                text: "Register"
                font_size: 20
                size_hint_x: 0.5
                size_hint_y: None
                height: 50
                background_color: 0.341, 0.235, 0.980, 1  # Purple color (#573CFA)
                on_press: app.root.current = "register"  # Navigate to the RegisterScreen

<RegisterScreen>:
    BoxLayout:
        orientation: "vertical"
        padding: 20
        spacing: 20
        canvas.before:
            Color:
                rgba: 0.11, 0.10, 0.15, 1  # Background color: #1C1A27
            Rectangle:
                pos: self.pos
                size: self.size

        Image:
            source: "resources/track.png"
            size_hint: (1, 0.66)  # 2/3 of the screen height

        TextInput:
            id: set_username_input
            hint_text: "Set Username"
            multiline: False
            font_size: 20  # Text size
            height: self.minimum_height
            size_hint_y: None  # Fix height
            size_hint_x: 0.8  # Center horizontally
            pos_hint: {"center_x": 0.5}

        TextInput:
            id: set_password_input
            hint_text: "Set Password"
            multiline: False
            password: True
            font_size: 20  # Text size
            height: self.minimum_height
            size_hint_y: None  # Fix height
            size_hint_x: 0.8  # Center horizontally
            pos_hint: {"center_x": 0.5}

        TextInput:
            id: confirm_password_input
            hint_text: "Confirm Password"
            multiline: False
            password: True
            font_size: 20  # Text size
            height: self.minimum_height
            size_hint_y: None  # Fix height
            size_hint_x: 0.8  # Center horizontally
            pos_hint: {"center_x": 0.5}

        TextInput:
            id: set_email_input
            hint_text: "Set Email"
            multiline: False
            font_size: 20  # Text size
            height: self.minimum_height
            size_hint_y: None  # Fix height
            size_hint_x: 0.8  # Center horizontally
            pos_hint: {"center_x": 0.5}
        
        

        Button:
            text: "Create Username"
            font_size: 20  # Match the font size of the TextInput fields
            size_hint_x: 0.8  # Match the width of the TextInput fields
            size_hint_y: None
            height: 50  # Fixed height for the button
            pos_hint: {"center_x": 0.5}
            on_press: root.create_user()

        Button:
            text: "Back to Login"
            font_size: 20
            size_hint_x: 0.8
            size_hint_y: None
            height: 50
            pos_hint: {"center_x": 0.5}
            on_press: app.root.current = "login"

        Label:
            id: result_label
            text: ""
            size_hint: (1, 0.2)

<HomeScreen>:
    BoxLayout:
        orientation: "vertical"
        padding: 10
        spacing: 10
        canvas.before:
            Color:
                rgba: 0.11, 0.10, 0.15, 1  # Background color: #1C1A27
            Rectangle:
                pos: self.pos
                size: self.size

        Label:
            text: "Welcome to Home Screen"
            font_size: 24
            size_hint_y: None
            height: 50
            color: 1, 1, 1, 1  # White text color

        ScrollView:
            size_hint: (1, 0.6)
            GridLayout:
                id: projects_list
                cols: 1
                size_hint_y: None
                height: self.minimum_height

        Button:
            text: "Create New Project / Trip"
            size_hint_y: None
            height: 50
            background_color: 0.341, 0.235, 0.980, 1  # Purple color (#573CFA)
            on_press: root.create_new_project()

        Label:
            id: result_label
            text: ""
            size_hint_y: None
            height: 30
            color: 1, 1, 1, 1  # White text color

<GetTripFromServer>:
    BoxLayout:
        orientation: "vertical"
        padding: 20
        spacing: 20
        canvas.before:
            Color:
                rgba: 0.11, 0.10, 0.15, 1  # Background color: #1C1A27
            Rectangle:
                pos: self.pos
                size: self.size

        # First row: Server settings
        BoxLayout:
            id: server_info_settings
            orientation: "horizontal"
            size_hint_y: None
            height: 30
            spacing: 10
            canvas.before:
                Color:
                    rgba: root.server_box_color  # Dynamic color for the box
                Rectangle:
                    pos: self.pos
                    size: self.size

            Label:
                id: server_info_label
                text: root.server_info_text  # Dynamic text for the label
                font_size: 14  # Reduced font size
                size_hint_x: 0.8

            Button:
                text: "Settings"
                size_hint_x: 0.2
                background_color: 0.341, 0.235, 0.980, 1  # Purple color (#573CFA)
                on_press: app.root.current = "settings"

        # Second row: Frame for device and date selection
        BoxLayout:
            orientation: "vertical"
            size_hint_y: None
            height: 180  # Adjusted height for the frame
            spacing: 10
            padding: 10
            canvas.before:
                Color:
                    rgba: 0.2, 0.2, 0.2, 1  # Frame background color
                Rectangle:
                    pos: self.pos
                    size: self.size

            Label:
                text: "Select device and the day of the data"  # Main label
                font_size: 14  # Reduced font size
                size_hint_y: None
                height: 20

            BoxLayout:
                orientation: "horizontal"
                size_hint_y: None
                height: 30
                spacing: 10

                Spinner:
                    id: devices_spinner
                    text: "Loading devices..."  # Default text
                    values: []  # Initially empty
                    size_hint: (0.5, None)
                    height: 25
                    font_size: 14
                    on_text: root.on_device_selected(self.text)

            # New row: Starting date and hour
            BoxLayout:
                orientation: "horizontal"
                size_hint_y: None
                height: 30
                spacing: 10

                Label:
                    text: "Starting Date"
                    size_hint_x: 0.3
                    font_size: 14

                Button:
                    id: start_date_picker_button
                    text: "Select Start Date"
                    size_hint_x: 0.4
                    height: 25
                    font_size: 14
                    on_press: root.open_date_picker('start')

                Spinner:
                    id: start_hour_spinner
                    text: "00"
                    values: [f"{i:02d}" for i in range(24)]
                    size_hint_x: 0.2
                    height: 25
                    font_size: 14

            # New row: End date and hour
            BoxLayout:
                orientation: "horizontal"
                size_hint_y: None
                height: 30
                spacing: 10

                Label:
                    text: "End Date"
                    size_hint_x: 0.3
                    font_size: 14

                Button:
                    id: end_date_picker_button
                    text: "Select End Date"
                    size_hint_x: 0.4
                    height: 25
                    font_size: 14
                    on_press: root.open_date_picker('end')

                Spinner:
                    id: end_hour_spinner
                    text: "23"
                    values: [f"{i:02d}" for i in range(24)]
                    size_hint_x: 0.2
                    height: 25
                    font_size: 14

            # New row: Get trip server data button
            Button:
                id: get_trip_data_button
                text: "Get trip server data"
                size_hint: (1, None)
                height: 30
                font_size: 14
                background_color: 0.341, 0.235, 0.980, 1  # Purple color (#573CFA)
                on_press: root.get_trip_server_data()

        # Third row: Result label
        Label:
            id: result_label
            text: "Welcome to the Home Screen!"
            font_size: 14  # Reduced font size
            size_hint: (1, 0.8)

        # Fourth row: Back to Home button
        Button:
            text: "Back to Home"
            size_hint_y: None
            height: 50
            size_hint_x: 0.8
            pos_hint: {"center_x": 0.5}
            background_color: 0.341, 0.235, 0.980, 1  # Purple color (#573CFA)
            on_press: app.root.current = "home"

<SettingsScreen>:
    BoxLayout:
        orientation: "vertical"
        padding: 20
        spacing: 20
        canvas.before:
            Color:
                rgba: 0.11, 0.10, 0.15, 1  # Background color: #1C1A27
            Rectangle:
                pos: self.pos
                size: self.size

        Image:
            source: "resources/track.png"
            size_hint: (1, 0.66)  # 2/3 of the screen height

        TextInput:
            id: server_url_input
            hint_text: "Traccar Server URL"
            multiline: False
            font_size: 20
            size_hint_y: None
            height: self.minimum_height
            size_hint_x: 0.8
            pos_hint: {"center_x": 0.5}

        TextInput:
            id: username_input
            hint_text: "Username"
            multiline: False
            font_size: 20
            size_hint_y: None
            height: self.minimum_height
            size_hint_x: 0.8
            pos_hint: {"center_x": 0.5}

        TextInput:
            id: password_input
            hint_text: "Password"
            multiline: False
            password: True
            font_size: 20
            size_hint_y: None
            height: self.minimum_height
            size_hint_x: 0.8
            pos_hint: {"center_x": 0.5}

        TextInput:
            id: token_input
            hint_text: "Token"
            multiline: False
            font_size: 20
            size_hint_y: None
            height: self.minimum_height
            size_hint_x: 0.8
            pos_hint: {"center_x": 0.5}    

        BoxLayout:
            orientation: "horizontal"
            size_hint_y: None
            height: 50
            size_hint_x: 0.8
            pos_hint: {"center_x": 0.5}
            spacing: 10

            Button:
                text: "Test Connection"
                size_hint_x: 0.5  # Half the width of the BoxLayout
                size_hint_y: None
                height: 50
                background_color: 0.341, 0.235, 0.980, 1  # Purple color (#573CFA)
                on_press: root.test_connection()

            Button:
                text: "Save Settings"
                size_hint_x: 0.5  # Half the width of the BoxLayout
                size_hint_y: None
                height: 50
                background_color: 0.008, 0.525, 0.290, 1  # Purple color (#573CFA)
                on_press: root.save_settings()

        Label:
            id: result_label
            text: "Waiting to test connection..."
            size_hint_y: None
            height: 50
            size_hint_x: 0.8
            pos_hint: {"center_x": 0.5}
            canvas.before:
                Color:
                    rgba: 1, 1, 1, 1  # White color
                Line:
                    width: 1.5
                    rectangle: self.x, self.y, self.width, self.height

        Button:
            text: "Return to Home"
            size_hint_y: None
            height: 50
            size_hint_x: 0.8
            pos_hint: {"center_x": 0.5}
            background_color: 0.341, 0.235, 0.980, 1  # Purple color (#573CFA)
            on_press: app.root.current = "home"