app.py

import streamlit as st
import pandas as pd
import time
import requests
import os
from datetime import datetime

# Set page configuration (must be the first Streamlit command)
st.set_page_config(page_title="Ticket System", layout="centered", initial_sidebar_state="expanded")

# Apply custom CSS for design
st.markdown(
    """
        <style>
/* General button styling */
div.stButton > button, div[data-testid="stFormSubmitButton"] > button {
    background-color: #4CAF50 !important; /* Green background */
    color: white !important; /* White text */
    border: none !important; /* No border */
    padding: 10px 20px !important; /* Button padding */
    text-align: center !important; /* Center the text */
    text-decoration: none !important; /* No underline */
    font-size: 16px !important; /* Font size */
    font-weight: bold !important; /* Bold text */
    cursor: pointer !important; /* Pointer cursor */
    border-radius: 4px !important; /* Rounded corners */
    transition: background-color 0.3s ease, transform 0.2s ease !important; /* Smooth hover effect */
    display: inline-block !important; /* Inline block display */
    margin-top: 10px !important; /* Space above the button */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1) !important; /* Optional shadow */
}

/* Hover effect */
div.stButton > button:hover, div[data-testid="stFormSubmitButton"] > button:hover {
    background-color: #45a049 !important; /* Slightly lighter green on hover */
    transform: translateY(-2px); /* Slight lift */
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.15) !important; /* Enhanced shadow on hover */
}

/* Active effect */
div.stButton > button:active, div[data-testid="stFormSubmitButton"] > button:active {
    background-color: #3d8b40 !important; /* Darker green when clicked */
    transform: translateY(0); /* Reset lift */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1) !important; /* Reset shadow */
}

/* Focus effect for accessibility */
div.stButton > button:focus, div[data-testid="stFormSubmitButton"] > button:focus {
    outline: none !important; /* Remove default outline */
    box-shadow: 0 0 0 3px rgba(72, 207, 173, 0.5) !important; /* Custom focus ring */
}
    </style>
    
    """,
    unsafe_allow_html=True
)

# Sample user data for login
users = {
    "manager123": {"password": "managerpass", "role": "Manager"},
    "employee456": {"password": "employeepass", "role": "Employee"},
    "customer789": {"password": "customerpass", "role": "Customer"},
}

def login_page():
    # Add custom styling and an image at the top
    customize_login_page()
    st.markdown(
        """
        <style>
        .center-title {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50px; /* Optional: Adjust height */
            font-size: 36px; /* Optional: Adjust font size */
            font-weight: bold; /* Optional: Adjust font weight */
            color: #084C3C; /* Optional: Set text color */
        }
        </style>
        <div class="center-title">Login Page</div>
        """,
        unsafe_allow_html=True
    )

    username = st.text_input("Username")
    password = st.text_input("Password", type="password")

    # Check login state
    if "login_success" not in st.session_state:
        st.session_state["login_success"] = False

    st.markdown(
        """
        <style>
        div.stButton > button {
            background-color: #4CAF50 !important;
            color: white !important;
            border: none;
            padding: 10px 20px !important;
            text-align: center !important;
            text-decoration: none;
            font-size: 16px !important;
            font-weight: bold !important;
            cursor: pointer;
            border-radius: 4px !important;
            transition: background-color 0.3s ease;
            display: inline-block;
            margin-top: 20px; /* Space above the button */
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
        }
        div.stButton > button:hover {
            background-color: #45a049 !important;
            color: white !important;
        }
        </style>
        """,
        unsafe_allow_html=True,
    )



    col1, col2, col3 = st.columns(3)  # Create three columns

    with col1:  # First column for the Login button
        if st.button("Login"):
            if username in users and users[username]["password"] == password:
                st.session_state["user_type"] = users[username]["role"]
                st.session_state["logged_in"] = True
                st.session_state["login_success"] = True

                st.success(f"Logged in successfully as {users[username]['role']}")

                # Navigate to the appropriate page based on the user's role
                if users[username]["role"] == "Customer":
                    st.session_state["page"] = "Submit Ticket"
                elif users[username]["role"] == "Manager":
                    st.session_state["page"] = "Management Dashboard"
                elif users[username]["role"] == "Employee":
                    st.session_state["page"] = "Respond to a Ticket"
            else:
                st.error("Invalid username or password.")

    with col2:  # Second column for the Forget Password button
        if st.button("Forget Password"):
            st.session_state["page"] = "Forget Password"

    with col3:  # Third column for the Create Account button
        if st.button("Create an Account"):
            st.session_state["page"] = "Create Account"


            
def navigate_to_page(page_name):
    st.session_state["current_page"] = page_name  # Update the page in session state

def get_current_page():
    return st.session_state.get("current_page", "Login")  # Default to "Login"

def forget_password_page():
    # Page title and instructions
    st.markdown('<h1 style="color: #084C3C; text-align: center;">Forget Password</h1>', unsafe_allow_html=True)
    st.markdown('<p style="color: #084C3C; text-align: center;">Enter your username or email to reset your password.</p>', unsafe_allow_html=True)

    # Input field for username or email
    username_or_email = st.text_input("Username or Email")

    # Custom button styling
    st.markdown(
        """
        <style>
        div.stButton > button {
            background-color: #4CAF50 !important;
            color: white !important;
            border: none;
            padding: 10px 20px !important;
            text-align: center !important;
            text-decoration: none;
            font-size: 16px !important;
            font-weight: bold !important;
            cursor: pointer;
            border-radius: 4px !important;
            transition: background-color 0.3s ease;
            display: inline-block;
            margin-top: 10px; /* Space above the button */
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
        }
        div.stButton > button:hover {
            background-color: #45a049 !important;
            color: white !important;
        }
        </style>
        """,
        unsafe_allow_html=True,
    )

    # Reset Password button
    if st.button("Reset Password"):
        if username_or_email.strip():
            st.success(f"Password reset link has been sent to {username_or_email}.")
        else:
            st.error("Please enter a valid username or email.")

    # Back to Login button
    if st.button("Back to Login"):
        st.session_state["page"] = "Login"  # Navigate back to Login



def add_return_to_login():
    if "logged_in" in st.session_state and st.session_state["logged_in"]:
        # Add custom styling for the Back button
        st.markdown(
            """
            <style>
            div.stButton > button {
                background-color: #4CAF50 !important;
                color: white !important;
                border: none;
                padding: 10px 20px !important;
                text-align: center !important;
                text-decoration: none;
                font-size: 16px !important;
                font-weight: bold !important;
                cursor: pointer;
                border-radius: 4px !important;
                transition: background-color 0.3s ease;
                display: inline-block;
                margin-top: 20px; /* Space above the button */
                box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
            }
            div.stButton > button:hover {
                background-color: #45a049 !important;
                color: white !important;
            }
            </style>
            """,
            unsafe_allow_html=True,
        )

        # Functional and visually styled "Back" button
        if st.sidebar.button("Back"):
            # Reset the 'logged_in' state and force a redirect to the login page
            st.session_state["logged_in"] = False; st.session_state["login_success"] = False; st.session_state["page"] = "Login"
            hide_sidebar()
            
def hide_sidebar():
    st.markdown(
        """
        <style>
        section[data-testid="stSidebar"] {
            display: none; /* Hide the sidebar */
        }
        </style>
        """,
        unsafe_allow_html=True,
    )

def main():
    if "page" not in st.session_state:
        st.session_state["page"] = "Login"  # Default to the Login page
    add_return_to_login()
    if st.session_state["page"] == "Submit Ticket":
        submit_ticket_page()
    # Show the navigation menu only if not on Login or Forget Password pages
    if st.session_state["page"] not in ["Login", "Forget Password","Create Account"]:
        st.sidebar.title("Navigation")
        user_type = st.session_state.get("user_type", "Customer")

        if user_type == "Customer":
            page = st.sidebar.radio("Go to", ["Submit Ticket", "Check Ticket Status", "FAQ & Info"])
        elif user_type == "Manager":
            page = st.sidebar.radio("Go to", ["Management Dashboard", "Ticket Dashboard", "Customer Dashboard"])
        elif user_type == "Employee":
            page = st.sidebar.radio("Go to", ["Respond to a Ticket", "Ticket Status"])
        else:
            st.sidebar.write("No pages available for this user type.")
            return
        st.session_state["page"] = page  # Update the page state based on navigation

    # Render the appropriate page
    if st.session_state["page"] == "Login":
        login_page()
    elif st.session_state["page"] == "Forget Password":
        forget_password_page()
    elif st.session_state["page"] == "Create Account":
        create_account_page()
    elif st.session_state["page"] == "Submit Ticket":
        submit_ticket_page()
    elif st.session_state["page"] == "Check Ticket Status":
        check_ticket_status_page()
    elif st.session_state["page"] == "FAQ & Info":
        faq_info_page()
    elif st.session_state["page"] == "Management Dashboard":
        management_dashboard_page()
    elif st.session_state["page"] == "Ticket Dashboard":
        ticket_dashboard_page()
    elif st.session_state["page"] == "Customer Dashboard":
        customer_dashboard_page()
    elif st.session_state["page"] == "Respond to a Ticket":
        respond_to_ticket_page()
    elif st.session_state["page"] == "Ticket Status":
        employee_ticket_status_page()

def center_logo():
    # Create three columns
    col1, col2, col3 = st.columns([1, 2, 1])  # Adjust column width ratios

    with col1:
        st.empty()  # Empty content in the first column

    with col2:
        st.image("logo.png", width=300, use_container_width=True)

    with col3:
        st.empty()
   
def create_account_page():
    center_logo()
    vspace()
    vspace()
    vspace()
    hide_sidebar()
    st.markdown("<h1 style='text-align: center; color: #084C3C;'>Create Account</h1>", unsafe_allow_html=True)
    st.markdown(
        """
        <style>
        div.stButton > button {
            background-color: #4CAF50 !important;
            color: white !important;
            border: none;
            padding: 10px 20px !important;
            text-align: center !important;
            text-decoration: none;
            font-size: 16px !important;
            font-weight: bold !important;
            cursor: pointer;
            border-radius: 4px !important;
            transition: background-color 0.3s ease;
            display: inline-block;
            margin-top: 20px; /* Space above the button */
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
        }
        div.stButton > button:hover {
            background-color: #45a049 !important;
            color: white !important;
        }
        </style>
        """,
        unsafe_allow_html=True,
    )
    st.markdown(
        """
        <style>
        div[data-testid="stFormSubmitButton"] > button {
            background-color: #4CAF50 !important; /* Green background */
            color: white !important; /* White text */
            border: none !important; /* No border */
            padding: 10px 20px !important; /* Button padding */
            text-align: center !important; /* Center the text */
            text-decoration: none !important; /* No underline */
            font-size: 16px !important; /* Font size */
            font-weight: bold !important; /* Bold text */
            cursor: pointer !important; /* Pointer cursor */
            border-radius: 4px !important; /* Rounded corners */
            transition: background-color 0.3s ease !important; /* Smooth hover effect */
            display: inline-block !important; /* Inline block display */
            margin-top: 20px !important; /* Space above the button */
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1) !important; /* Optional shadow */
        }
        div[data-testid="stFormSubmitButton"] > button:hover {
            background-color: #45a049 !important; /* Slightly lighter green on hover */
            color: white !important; /* White text on hover */
        }
        </style>
        """,
        unsafe_allow_html=True,
    )
        
    with st.form(key="create_account_form"):
        id_number = st.text_input("ID Number / Iqama Number")
        first_name = st.text_input("First Name")
        second_name = st.text_input("Second Name")
        last_name = st.text_input("Last Name")
        countries = [
            "Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", 
            "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", 
            "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burundi", 
            "Cabo Verde", "Cambodia", "Cameroon", "Canada", "Central African Republic", "Chad", "Chile", "China", "Colombia", 
            "Comoros", "Congo (Congo-Brazzaville)", "Costa Rica", "Croatia", "Cuba", "Cyprus", "Czechia (Czech Republic)", 
            "Denmark", "Djibouti", "Dominica", "Dominican Republic", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", 
            "Eritrea", "Estonia", "Eswatini", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", 
            "Georgia", "Germany", "Ghana", "Greece", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", 
            "Holy See", "Honduras", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", 
            "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea (North)", "Korea (South)", "Kosovo", 
            "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", 
            "Luxembourg", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", 
            "Mauritius", "Mexico", "Micronesia", "Moldova", "Monaco", "Mongolia", "Montenegro", "Morocco", "Mozambique", "Myanmar", 
            "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "North Macedonia", 
            "Norway", "Oman", "Pakistan", "Palau", "Palestine State", "Panama", "Papua New Guinea", "Paraguay", "Peru", 
            "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Saint Kitts and Nevis", "Saint Lucia", 
            "Saint Vincent and the Grenadines", "Samoa", "San Marino", "Sao Tome and Principe", "Saudi Arabia", "Senegal", 
            "Serbia", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", 
            "South Africa", "South Sudan", "Spain", "Sri Lanka", "Sudan", "Suriname", "Sweden", "Switzerland", "Syria", 
            "Tajikistan", "Tanzania", "Thailand", "Timor-Leste", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", 
            "Turkmenistan", "Tuvalu", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", 
            "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe"
        ]
        nationality = st.selectbox("Nationality", countries)
        email = st.text_input("E-mail")
        phone_number = st.text_input("Phone Number")
        dob = st.date_input("Date of Birth", min_value=datetime(1900, 1, 1), max_value=datetime.now())
        Short_Address = st.text_input(
            "Short Address Code (4 letters + 4 digits)",
            max_chars=8,
            help="Enter exactly 4 letters followed by 4 digits (e.g., ABCD1234)",
        )

        submitted = st.form_submit_button("Create Account")

        if submitted:
            if len(Short_Address) == 8 and Short_Address[:4].isalpha() and Short_Address[4:].isdigit():
                st.success("Account created successfully!")
            else:
                st.error("Invalid Short Address Code. It must be 4 letters followed by 4 digits (e.g., ABCD1234).")

    if st.button("Back to Login"):
        st.session_state["page"] = "Login"


def submit_ticket_page():
    center_logo()
    vspace()
    vspace()
    vspace()
    vspace()
    vspace()
    vspace()     
    st.markdown('<h1 style="color: #084C3C;">Submit a Ticket</h1>', unsafe_allow_html=True)
    st.markdown('<p style="color: #084C3C;">Please fill out the form below to submit a ticket.</p>', unsafe_allow_html=True)

    # Form for submitting a ticket
    with st.form(key="submit_ticket_form"):
        customer_id = st.text_input("Customer ID")
        st.text_input("First Name")
        st.text_input("Last Name")
        st.text_input("National ID / Residency Number")
        st.text_input("Email")
        st.text_input("Phone Number")
        st.selectbox("Ticket Type", ["General", "Billing", "Technical"])
        st.text_area("Describe your issue/request")
        st.file_uploader("Upload Attachments (if any)", accept_multiple_files=True)
        
        # Add custom styling for the Submit button
        st.markdown(
            """
            <style>
            div[data-testid="stFormSubmitButton"] > button {
                background-color: #4CAF50 !important;
                color: white !important;
                border: none;
                padding: 10px 20px !important;
                text-align: center !important;
                text-decoration: none;
                font-size: 16px !important;
                font-weight: bold !important;
                cursor: pointer;
                border-radius: 4px !important;
                transition: background-color 0.3s ease;
                display: inline-block;
                margin-top: 20px; /* Space above the button */
                box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
            }
            div[data-testid="stFormSubmitButton"] > button:hover {
                background-color: #45a049 !important;
                color: white !important;
            }
            </style>
            """,
            unsafe_allow_html=True,
        )

        # Submit button logic
        if st.form_submit_button("Submit"):
            if customer_id.strip():
                st.success(f"Your ticket has been submitted successfully. Customer ID: {customer_id}")
            else:
                st.error("Please fill out the Customer ID.")

def check_ticket_status_page():
    center_logo()
    vspace()
    vspace()
    vspace()
    vspace()
    vspace()
    vspace()
    vspace()
    vspace()
    st.markdown('<h1 style="color: #084C3C;">Check Ticket Status</h1>', unsafe_allow_html=True)
    st.markdown('<p style="color: #084C3C;">Enter your Customer ID to view your tickets.</p>', unsafe_allow_html=True)

    # Input field for Customer ID
    customer_id = st.text_input("Customer ID")

    # Check ticket status submission state
    if "customer_check_status_success" not in st.session_state:
        st.session_state["customer_check_status_success"] = False

    # Add custom styling for the Check Status button
    st.markdown(
        """
        <style>
        div.stButton > button {
            background-color: #4CAF50 !important;
            color: white !important;
            border: none;
            padding: 10px 20px !important;
            text-align: center !important;
            text-decoration: none;
            font-size: 16px !important;
            font-weight: bold !important;
            cursor: pointer;
            border-radius: 4px !important;
            transition: background-color 0.3s ease;
            display: inline-block;
            margin-top: 20px; /* Space above the button */
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
        }
        div.stButton > button:hover {
            background-color: #45a049 !important;
            color: white !important;
        }
        </style>
        """,
        unsafe_allow_html=True,
    )

    # Functional and visually styled "Check Status" button
    if st.button("Check Status"):
        if customer_id.strip():
            st.session_state["customer_check_status_success"] = True
            st.success(f"Displaying tickets for Customer ID: {customer_id}")
            # Example ticket data
            ticket_data = {
                "Ticket Number": ["141", "565", "999"],
                "Date": ["2025-01-18", "2025-03-28", "2025-04-01"],
                "Type": ["General", "Billing", "Technical"],
                "Status": ["Resolved", "Pending", "In Progress"],
            }
            df = pd.DataFrame(ticket_data)
            st.dataframe(df)
        else:
            st.error("Please enter your Customer ID.")

def faq_info_page():
    center_logo()
    vspace()
    vspace()
    vspace()
    vspace()
    st.markdown('<h1 style="color: #084C3C;">FAQ & Information</h1>', unsafe_allow_html=True)

    faq_data = [
        ("How to open a new account?", "Visit your nearest branch with your ID or use our app for easy online account opening."),
        ("Branch Operating Hours", "Sunday to Thursday, 9:00 AM to 4:00 PM. Please check your nearest branch for details."),
        ("Update Personal Information", "You can update your information at a branch or through our app under 'Update Data'."),
        ("Technical Support", "Ensure your app is updated and your device is connected to the internet. If issues persist, contact our support.")
    ]

    for question, answer in faq_data:
        st.markdown(f'<h2 style="color: #084C3C;">{question}</h2>', unsafe_allow_html=True)
        st.markdown(f'<p style="color: #084C3C;">{answer}</p>', unsafe_allow_html=True)

def respond_to_ticket_page():
    # Add logo and title
    center_logo()
    vspace()
    vspace()
    vspace()
    vspace()
    st.markdown('<h1 style="color: #084C3C;">Respond to a Ticket</h1>', unsafe_allow_html=True)
    
    # Display ticket data
    ticket_data = {
        "Ticket Number": ["141", "565", "999"],
        "Customer ID": ["C001", "C002", "C003"],
        "Date": ["2025-01-18", "2025-03-28", "2025-04-01"],
        "Type": ["General", "Billing", "Technical"],
        "Status": ["Pending", "Pending", "In Progress"],
        "Customer Name": ["Alice", "Bob", "Charlie"],
    }
    df = pd.DataFrame(ticket_data)
    st.dataframe(df)

    # Dropdown to select a ticket
    ticket_to_respond = st.selectbox("Select a ticket to respond to:", df["Ticket Number"].tolist())
    
    # Text area for response
    response_text = st.text_area("Response:", placeholder="Write your response here...")
    
    # Check response submission state
    if "response_success" not in st.session_state:
        st.session_state["response_success"] = False

    # Add custom styling for the button
    st.markdown(
        """
        <style>
        div.stButton > button {
            background-color: #4CAF50 !important;
            color: white !important;
            border: none;
            padding: 10px 20px !important;
            text-align: center !important;
            text-decoration: none;
            font-size: 16px !important;
            font-weight: bold !important;
            cursor: pointer;
            border-radius: 4px !important;
            transition: background-color 0.3s ease;
            display: inline-block;
            margin-top: 20px; /* Space above the button */
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
        }
        div.stButton > button:hover {
            background-color: #45a049 !important;
            color: white !important;
        }
        </style>
        """,
        unsafe_allow_html=True,
    )

    # Functional and visually styled "Respond to Ticket" button
    if st.button("Respond to Ticket"):
        if response_text.strip():
            st.session_state["response_success"] = True
            st.success(f"Response for Ticket {ticket_to_respond} submitted successfully!")
        else:
            st.error("Please write a response before submitting.")

def employee_ticket_status_page():
    # Add logo and title
    center_logo()
    vspace()
    vspace()
    vspace()
    vspace()
    st.markdown('<h1 style="color: #084C3C;">Ticket Status</h1>', unsafe_allow_html=True)

    # Input field for Customer ID
    customer_id = st.text_input("Customer ID")

    # Check ticket status submission state
    if "employee_ticket_status_success" not in st.session_state:
        st.session_state["employee_ticket_status_success"] = False

    # Add custom styling for the "Check Ticket Status" button
    st.markdown(
        """
        <style>
        div.stButton > button {
            background-color: #4CAF50 !important;
            color: white !important;
            border: none;
            padding: 10px 20px !important;
            text-align: center !important;
            text-decoration: none;
            font-size: 16px !important;
            font-weight: bold !important;
            cursor: pointer;
            border-radius: 4px !important;
            transition: background-color 0.3s ease;
            display: inline-block;
            margin-top: 20px; /* Space above the button */
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
        }
        div.stButton > button:hover {
            background-color: #45a049 !important;
            color: white !important;
        }
        </style>
        """,
        unsafe_allow_html=True,
    )

    # Functional and visually styled "Check Ticket Status" button
    if st.button("Check Ticket Status"):
        if customer_id.strip():
            st.session_state["employee_ticket_status_success"] = True
            st.success(f"Displaying tickets for Customer ID: {customer_id}")
            # Example ticket data
            ticket_data = {
                "Ticket Number": ["141", "565", "999"],
                "Status": ["Resolved", "Pending", "In Progress"],
            }
            df = pd.DataFrame(ticket_data)
            st.dataframe(df)
        else:
            st.error("Please enter your Customer ID.")

def ticket_dashboard_page():
    center_logo()
    vspace()
    vspace()
    vspace()
    vspace()
    st.markdown('<h1 style="color: #084C3C;">Ticket Dashboard</h1>', unsafe_allow_html=True)
    st.components.v1.iframe(
        "https://app.powerbi.com/view?r=eyJrIjoiMDEwNzA2YjUtNGY0MC00NTFjLTg1ZTctYTZlZjQzOTUwNWUxIiwidCI6ImI0NTNkOTFiLTZhYzEtNGI2MS1iOGI4LTVlNjVlNDIyMjMzZiIsImMiOjl9",
        height=700,
        width=1000,
        scrolling=True
    )


def customer_dashboard_page():
    center_logo()
    vspace()
    vspace()
    vspace()
    vspace()
    st.markdown('<h1 style="color: #084C3C;">Customer Dashboard</h1>', unsafe_allow_html=True)
    customer_data = {
        "Customer ID": ["C001", "C002", "C003"],
        "Tickets Submitted": [5, 3, 8],
        "Resolved": [4, 2, 7],
    }
    df = pd.DataFrame(customer_data)
    st.dataframe(df)
    st.components.v1.iframe(
        "https://app.powerbi.com/view?r=eyJrIjoiY2Q0ODE1NGItOThjMy00MzM4LWE2OGUtMjRkNmUzYmZlMDk3IiwidCI6ImI0NTNkOTFiLTZhYzEtNGI2MS1iOGI4LTVlNjVlNDIyMjMzZiIsImMiOjl9",
        height=600,
        width=800,
        scrolling=True
    )

def management_dashboard_page():
    center_logo()
    vspace()
    vspace()
    vspace()
    vspace()
    #center_logo("logo.png")  # Center the logo
    st.markdown('<h1 style="color: #084C3C;">Management Dashboard</h1>', unsafe_allow_html=True)
    
    # Define employee data
    employee_data = {
        "Employee ID": ["E001", "E002", "E003"],
        "Name": ["John Doe", "Jane Smith", "Ali Ahmad"],
        "Performance Score": [85, 90, 88],
    }
    df_employee = pd.DataFrame(employee_data)
    
    # Display the employee data table
    st.dataframe(df_employee)

    # Add the Power BI dashboard iframe
    st.components.v1.iframe(
        "https://app.powerbi.com/view?r=eyJrIjoiMzQ5N2RlMDQtY2I5ZC00NWE5LWE0ZjItMjExMzgyNmNmZWFjIiwidCI6ImI0NTNkOTFiLTZhYzEtNGI2MS1iOGI4LTVlNjVlNDIyMjMzZiIsImMiOjl9",
        height=800,
        width=1000,
        scrolling=True
    )



def customize_navigation_menu_dark_green():
    st.markdown(
        """
        <style>
        /* Customize the navigation menu (sidebar) */
        section[data-testid="stSidebar"] {
            background-color: #084C3C !important; /* Set background to dark green */
        }
        section[data-testid="stSidebar"] p, 
        section[data-testid="stSidebar"] label, 
        section[data-testid="stSidebar"] h1, 
        section[data-testid="stSidebar"] h2, 
        section[data-testid="stSidebar"] h3, 
        section[data-testid="stSidebar"] div {
            color: white !important; /* Set text to white */
        }
        </style>
        """,
        unsafe_allow_html=True
    )


def customize_login_page():
    # Add custom CSS for styling
    st.markdown(
        """
        <style>
        .center-content {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-top: 20px;
        }
        </style>
        """,
        unsafe_allow_html=True,
    )

    # Use st.markdown to create a centered container for the image
    st.markdown('<div class="center-content">', unsafe_allow_html=True)
    
    # Display the image in the center
    center_logo()
    vspace()
    vspace()
    vspace()
    vspace()
   
def vspace():
    st.empty()
    st.text("")

def customize_submit_button():
    st.markdown(
        """
        <style>
        /* General styling for submit buttons */
        button[class^="css-"] {
            background-color: #084C3C !important; /* Dark green background */
            color: white !important; /* White text */
            border-radius: 10px !important; /* Rounded corners */
            padding: 10px 20px !important; /* Padding for the button */
            font-size: 16px !important; /* Ensure text size is visible */
            border: none !important; /* Remove border */
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Add subtle shadow */
        }
        button[class^="css-"]:hover {
            background-color: #056C4C !important; /* Slightly lighter green on hover */
            color: white !important; /* Keep text white on hover */
        }
        </style>
        """,
        unsafe_allow_html=True
    )




if __name__ == "__main__":
    customize_navigation_menu_dark_green()
    main()