import QtQuick 6
import QtQuick.Controls 6
import QtQuick.Layouts 6

ApplicationWindow {
    width: 600
    height: 501
    title: "BJ Helper ;)"
    Component.onCompleted: visible = true

    Image{  // setting background img properties 
        id: backg
        anchors.centerIn: parent
        width: parent.width
        height: parent.height
        source: "bg.jpg"
        
    }

    SplitView{  // setting up a SplitView that has 2 rectangles
        orientation: Qt.Vertical
        anchors.fill: parent

        Rectangle{
            id: rect1
            SplitView.preferredHeight: parent.height - 190 // setting the bar to be 60 ambiguous units lower than middle 
            Layout.maximumHeight: 500
            color: "transparent"

            //textfeild time
            GridLayout{
                id: grid1
                anchors.fill: parent
                columns: 6
                rows: 5
                flow: GridLayout.TopToBottom
                Layout.fillWidth: false
                Layout.preferredWidth: 200
                
                //start of name boxes
                Repeater{
                    id: names
                    model: ["name", "name", "name", "name", "name"]

                    TextField { // look at my field of TextFields
                        required property string modelData
                        id: na1
                        placeholderText: modelData
                        background: Rectangle {
                            implicitWidth: 175
                            implicitHeight: 35
                            color: na1.enabled ? "transparent" : "#353637"
                            border.color: na1.enabled ? "#87CEEB" : "transparent"
                        }
                    }
                }
                //start of bet boxes
                Repeater{
                    id: bets
                    model: 5
                    TextField{
                        id: bt1
                        placeholderText: qsTr("Enter bet")
                        background: Rectangle {
                            implicitWidth: 175
                            implicitHeight: 35
                            color: bt1.enabled ? "transparent" : "#353637"
                            border.color: bt1.enabled ? "#87CEEB" : "transparent"
                        }
                    }
                }
                //start of Push buttons
                Repeater{
                    model: 5
                    RoundButton{
                        id: p1
                        text: "P"
                        background: Rectangle{
                            implicitHeight: 35
                            implicitWidth: 35
                            color: p1.down ? "#eddc1c" : "transparent"
                            border.color: "#eddc1c"
                            border.width: 1
                            radius: 180
                        }
                    }
                }
                //start od Double buttons
                Repeater{
                    model: 5
                    RoundButton{
                        id: d1
                        text: "D"
                        background: Rectangle{
                            implicitHeight: 35
                            implicitWidth: 35
                            color: d1.down ? "#7207ed" : "transparent"
                            border.color: "#7207ed"
                            border.width: 1
                            radius: 180
                        }
                    }
                }
                //start of Win buttons
                Repeater{
                    model: 5
                    RoundButton{
                        id: w1
                        text: "W"
                        background: Rectangle{
                            implicitHeight: 35
                            implicitWidth: 35
                            color: w1.down ? "#1dbf32" : "transparent"
                            border.color: "#1dbf32"
                            border.width: 1
                            radius: 180
                        }
                    }
                }
                //start of Lose buttons
                Repeater{
                    model: 5
                    RoundButton{
                        id: l1
                        text: "L"
                        background: Rectangle{
                            implicitHeight: 35
                            implicitWidth: 35
                            color: l1.down ? "#e6050c" : "transparent"
                            border.color: "#e6050c"
                            border.width: 1
                            radius: 180
                        }
                    }
                }
            }
        }

        Rectangle{
            id: rect2
            //SplitView.preferredHeight: parent.height - 300 // not needed as it conflicts with rect1 line placement
            Layout.maximumHeight: 500
            color: "#2b2b29" //making payout window grey for better visibility 
            ListView{
                model: names
            }
        }
    }
}