app.py

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

st.set_page_config(page_title="Ticket System", layout="centered", initial_sidebar_state="expanded")

# CSS 
st.markdown(
    """
        <style>
    /* Hide the header */
    header[data-testid="stHeader"] {
        display: none;
    }

    /* Adjust the main content area to fill the space */
    .stApp {
        margin-top: -50px;
    }
    <style>
    .stApp { background-color: #E4ECE3; }
    section[data-testid="stSidebar"] { background-color: #084C3C; }
    section[data-testid="stSidebar"] p, section[data-testid="stSidebar"] label { color: white; }
    input, textarea, select, .stFileUploader { background-color: white !important; border: 2px solid #084C3C !important; color: #084C3C !important; border-radius: 5px !important; }
    input:focus, textarea:focus, select:focus, .stFileUploader:focus { border: 2px solid #7FDB8B !important; outline: none !important; }
    div[data-testid="stFormSubmitButton"] button, div.stButton > button {
        background-color: #7FDB8B !important; /* Light green background */
        color: white !important; /* White text */
        border-radius: 10px !important; /* Rounded corners */
        padding: 10px 20px !important; /* Button padding */
        border: 2px solid #084C3C !important; /* Dark green border for consistency */
        font-size: 16px !important; /* Ensure text size is visible */
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    }
    div[data-testid="stFormSubmitButton"] button:hover, div.stButton > button:hover {
        background-color: #084C3C !important; /* Dark green background on hover */
        color: white !important; /* Keep white text on hover */
        border-color: #7FDB8B !important; /* Lighter green border on hover */
    }
    table { border-collapse: collapse; width: 100%; background-color: #E4ECE3; }
    th, td { border: 1px solid #084C3C; text-align: left; padding: 10px; color: #084C3C; }
    th { background-color: #7FDB8B; }
    tr:nth-child(even) { background-color: #f9f9f9; }

    /* Dark green text for specific labels */
    label[for="Customer ID"], label[for="First Name"], label[for="Last Name"], 
    label[for="National ID / Residency Number"], label[for="Email"], 
    label[for="Phone Number"], label[for="Ticket Type"], 
    label[for="Describe your issue/request"], 
    div[data-testid="stMarkdownContainer"] h2, 
    div[data-testid="stMarkdownContainer"] p {
        color: #084C3C !important;
    }

    /* Custom login button */
    .custom-login-button {
        background-color: #7FDB8B !important; /* Light green background */
        color: white !important; /* White text */
        border: 2px solid #084C3C !important; /* Dark green border */
        border-radius: 10px !important; /* Rounded corners */
        padding: 10px 20px !important; /* Button padding */
        font-size: 16px !important; /* Ensure text size is visible */
        text-align: center; /* Center-align text */
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
        cursor: pointer; /* Pointer cursor for hover */
    }
    .custom-login-button:hover {
        background-color: #084C3C !important; /* Dark green background on hover */
        color: white !important; /* Keep white text on hover */
    }
    </style>
    """,
    unsafe_allow_html=True
)

users = {
    "manager123": {"password": "managerpass", "role": "Manager"},
    "employee456": {"password": "employeepass", "role": "Employee"},
    "customer789": {"password": "customerpass", "role": "Customer"},
}

def login_page():
    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)  

    with col1:  
        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']}")

                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:  
        if st.button("Forget Password"):
            st.session_state["page"] = "Forget Password"

    with col3:  
        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  

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

def forget_password_page():
    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)

    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,
    )

    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.")

    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"]:
        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,
        )

        if st.sidebar.button("Back"):
            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"  
    add_return_to_login()
    if st.session_state["page"] == "Submit Ticket":
        submit_ticket_page()
    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  

    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():
    col1, col2, col3 = st.columns([1, 2, 1]) 

    with col1:
        st.empty()  

    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)

    unique_form_key = f"submit_ticket_form_{st.session_state.get('page', 'default')}"  

    with st.form(key=unique_form_key):
        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)
        
        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,
        )

        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)

    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)

    # Sample ticket data
    ticket_data = {
        "Ticket Number": ["141", "565", "999"],
        "Type": ["General", "Billing", "Technical"],
        "Status": ["Pending", "Pending", "In Progress"],
        "Assigned To": ["E001", "E002", "E003"],
    }
    df_tickets = pd.DataFrame(ticket_data)

    # Display ticket data
    st.markdown('<h2 style="color: #084C3C;">Tickets Overview</h2>', unsafe_allow_html=True)
    st.dataframe(df_tickets)

    # Add a section for ticket reassignment
    st.markdown('<h2 style="color: #084C3C;">Reassign a Ticket</h2>', unsafe_allow_html=True)
    
    # Dropdown to select a ticket to reassign
    ticket_to_reassign = st.selectbox("Select a ticket to reassign:", df_tickets["Ticket Number"].tolist())
    
    # Define employee data
    employee_data = {
        "Employee ID": ["E001", "E002", "E003"],
        "Name": ["John Doe", "Jane Smith", "Ali Ahmad"],
        "Department": ["Support", "Billing", "Technical"],
    }
    df_employee = pd.DataFrame(employee_data)

    # Option to select an employee by dropdown or enter Employee ID manually
    st.markdown('<p style="color: #084C3C;">Select an employee to assign the ticket:</p>', unsafe_allow_html=True)
    assign_option = st.radio("Choose assignment method:", ["Select from Dropdown", "Enter Employee ID"])

    if assign_option == "Select from Dropdown":
        # Dropdown list with Employee Full Name + Department
        employee_dropdown = st.selectbox(
            "Select an employee:",
            df_employee.apply(lambda row: f"{row['Name']} - {row['Department']} (ID: {row['Employee ID']})", axis=1)
        )
        # Extract Employee ID from the selected dropdown value
        selected_employee_id = employee_dropdown.split("(ID: ")[-1].strip(")")

    elif assign_option == "Enter Employee ID":
        selected_employee_id = st.text_input("Enter Employee ID:")

    # Button to confirm reassignment
    if st.button("Reassign Ticket"):
        if selected_employee_id.strip():
            st.success(f"Ticket {ticket_to_reassign} has been successfully reassigned to Employee ID: {selected_employee_id}.")
        else:
            st.error("Please select or enter a valid Employee ID.")

    # Add the Power BI dashboard iframe
    st.markdown('<h2 style="color: #084C3C;">Dashboard Insights</h2>', unsafe_allow_html=True)
    st.components.v1.iframe(
        "https://app.powerbi.com/view?r=eyJrIjoiMDEwNzA2YjUtNGY0MC00NTFjLTg1ZTctYTZlZjQzOTUwNWUxIiwidCI6ImI0NTNkOTFiLTZhYzEtNGI2MS1iOGI4LTVlNjVlNDIyMjMzZiIsImMiOjl9",
        height=800,
        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)

    # Define customer and ticket data
    customer_data = {
        "Customer ID": ["C001", "C002", "C003"],
        "Name": ["Alice", "Bob", "Charlie"],
        "ID Number / Iqama Number": ["1234567890", "9876543210", "5678901234"],
    }
    df_customers = pd.DataFrame(customer_data)

    ticket_data = {
        "Ticket Number": ["141", "565", "999", "200", "345"],
        "Customer ID": ["C001", "C002", "C003", "C001", "C003"],
        "Type": ["General", "Billing", "Technical", "General", "Technical"],
        "Status": ["Resolved", "Pending", "In Progress", "Resolved", "Closed"],
        "Response": ["Issue fixed", "Pending customer reply", "Working on it", "Completed", "Closed successfully"],
        "Assigned To": ["E001", "E002", "E003", "E001", "E003"],
    }
    df_tickets = pd.DataFrame(ticket_data)

    # Search for a specific customer
    st.markdown('<h2 style="color: #084C3C;">Search for a Customer</h2>', unsafe_allow_html=True)
    
    # Input field for ID Number / Iqama Number
    search_customer_id = st.text_input("Enter Customer ID Number / Iqama Number:")

    # Button to display customer tickets
    if st.button("Search"):
        # Find the customer based on ID Number / Iqama Number
        customer_row = df_customers[df_customers["ID Number / Iqama Number"] == search_customer_id]
        
        if not customer_row.empty:
            customer_id = customer_row["Customer ID"].values[0]
            customer_name = customer_row["Name"].values[0]

            # Filter tickets for the selected customer
            customer_tickets = df_tickets[df_tickets["Customer ID"] == customer_id]

            if not customer_tickets.empty:
                st.markdown(
                    f"<h3 style='color: #084C3C;'>Tickets filed by {customer_name} (Customer ID: {customer_id})</h3>",
                    unsafe_allow_html=True
                )
                st.dataframe(customer_tickets)
            else:
                st.warning(f"No tickets found for Customer ID: {customer_id}")
        else:
            st.error("Customer not found. Please enter a valid ID Number / Iqama Number.")

    # Add general customer stats for context
    st.markdown('<h2 style="color: #084C3C;">Customer Overview</h2>', unsafe_allow_html=True)
    customer_stats = {
        "Customer ID": ["C001", "C002", "C003"],
        "Tickets Submitted": [5, 3, 8],
        "Resolved": [4, 2, 7],
    }
    df_customer_stats = pd.DataFrame(customer_stats)
    st.dataframe(df_customer_stats)

    # Add Power BI dashboard insights
    st.markdown('<h2 style="color: #084C3C;">Dashboard Insights</h2>', unsafe_allow_html=True)
    st.components.v1.iframe(
        "https://app.powerbi.com/view?r=eyJrIjoiOThhNGJkY2ItODUyZC00Y2UyLWJkYzQtYjdhZGVhOWI1ZWM5IiwidCI6ImI0NTNkOTFiLTZhYzEtNGI2MS1iOGI4LTVlNjVlNDIyMjMzZiIsImMiOjl9",
        height=600,
        width=800,
        scrolling=True
    )

def management_dashboard_page():
    center_logo()
    vspace()
    vspace()
    vspace()
    vspace()
    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"],
        "Department": ["Support", "Billing", "Technical"],
        "Performance Score": [85, 90, 88],
    }
    df_employee = pd.DataFrame(employee_data)
    
    # Display the employee data table
    st.markdown('<h2 style="color: #084C3C;">Employee Overview</h2>', unsafe_allow_html=True)
    st.dataframe(df_employee)

    # Add search functionality for specific employees
    st.markdown('<h2 style="color: #084C3C;">Search for an Employee</h2>', unsafe_allow_html=True)
    
    # Option to search by Employee ID or Dropdown List
    search_option = st.radio("Search by:", ["Employee ID", "Dropdown"])
    
    if search_option == "Employee ID":
        search_employee_id = st.text_input("Enter Employee ID:")
    else:
        # Dropdown list with Employee Full Name + Department
        search_employee = st.selectbox(
            "Select an employee:",
            df_employee.apply(lambda row: f"{row['Name']} - {row['Department']} (ID: {row['Employee ID']})", axis=1)
        )
        # Extract Employee ID from the selected dropdown value
        search_employee_id = search_employee.split("(ID: ")[-1].strip(")")

    # Example ticket data
    ticket_data = {
        "Ticket Number": ["141", "565", "999", "200", "345"],
        "Type": ["General", "Billing", "Technical", "General", "Technical"],
        "Status": ["Resolved", "Pending", "In Progress", "Resolved", "Closed"],
        "Response": ["Issue fixed", "Pending customer reply", "Working on it", "Completed", "Closed successfully"],
        "Assigned To": ["E001", "E002", "E003", "E001", "E003"],
    }
    df_tickets = pd.DataFrame(ticket_data)

    # Button to display employee tickets
    if st.button("Search"):
        if search_employee_id.strip():
            # Filter tickets for the selected employee
            filtered_tickets = df_tickets[df_tickets["Assigned To"] == search_employee_id]
            
            if not filtered_tickets.empty:
                st.markdown(
                    f"<h3 style='color: #084C3C;'>Tickets worked on by Employee ID: {search_employee_id}</h3>",
                    unsafe_allow_html=True
                )
                st.dataframe(filtered_tickets)
            else:
                st.warning(f"No tickets found for Employee ID: {search_employee_id}")
        else:
            st.error("Please provide a valid Employee ID or select an employee.")

    # Add the Power BI dashboard iframe
    st.markdown('<h2 style="color: #084C3C;">Dashboard Insights</h2>', unsafe_allow_html=True)
    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()