app.py

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

# 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>
    /* 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
)

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



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

    if st.button("Forget Password"):
        st.session_state["page"] = "Forget Password"

            
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()
    # Show the navigation menu only if not on Login or Forget Password pages
    if st.session_state["page"] not in ["Login", "Forget Password"]:
        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"] == "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("/Users/klnimri/Desktop/Newtest/Test/bin/logo.png", width=300, use_container_width=True)

    with col3:
        st.empty()
   
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()