<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Body Chart - Health Tracker</title>

        <!-- Favicon -->
        <link rel="icon" href="img/favicon.ico" type="image/x-icon" />
        <link
            href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
            rel="stylesheet" />

        <!-- Firebase SDK -->
        <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app-compat.js"></script>
        <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-auth-compat.js"></script>
        <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore-compat.js"></script>
        <script src="./js/common.js"></script>

        <!-- Load the menu component with integrated styles -->
        <script type="module" src="./components/menu.js"></script>

        <!-- Bootstrap, Font Awesome and other libraries -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />

        <!-- Main CSS -->
        <link rel="stylesheet" href="css/styles.css" />

        <style>
                    /* Body Chart specific styles */
                    .body-chart-container {
                        max-width: 900px;
                        margin: 0 auto;
                    }

                    .body-container {
                        display: flex;
                        gap: 40px;
                        justify-content: center;
                        flex-wrap: wrap;
                    }

                    .body-view {
                        width: 300px;
                        height: 600px;
                        cursor: pointer;
                    }

                    svg {
                        width: 100%;
                        height: 100%;
                        border: 1px solid #ccc;
                        background-color: #f9f9f9;
                    }

                    .body-part {
                        fill: #e0e0e0;
                        stroke: #999;
                        stroke-width: 1px;
                        transition: fill 0.2s ease;
                    }

                    .body-part:hover {
                        fill: #d0d0d0;
                    }

                    .toggle-container {
                        display: flex;
                        justify-content: center;
                        margin-bottom: 20px;
                    }

                    .toggle-btn {
                        padding: 10px 20px;
                        background-color: #4CAF50;
                        color: white;
                        border: none;
                        cursor: pointer;
                        margin: 0 10px;
                    }

                    .toggle-btn.active {
                        background-color: #2E7D32;
                    }

                    .pain-form {
                        display: none;
                        position: fixed;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        background-color: white;
                        padding: 20px;
                        border-radius: 5px;
                        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
                        z-index: 1000;
                        min-width: 300px;
                    }

                    .overlay {
                        display: none;
                        position: fixed;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background-color: rgba(0, 0, 0, 0.5);
                        z-index: 999;
                    }

                    .pain-list {
                        margin-top: 20px;
                        border: 1px solid #ddd;
                        padding: 15px;
                        border-radius: 5px;
                    }

                    .pain-entry {
                        margin-bottom: 10px;
                        padding: 10px;
                        background-color: #f5f5f5;
                        border-radius: 5px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }

                    .delete-btn {
                        background-color: #f44336;
                        color: white;
                        border: none;
                        padding: 2px 8px;
                        border-radius: 3px;
                        cursor: pointer;
                    }

                    .pain-intensity-display {
                        display: inline-block;
                        width: 24px;
                        height: 24px;
                        border-radius: 50%;
                        color: white;
                        text-align: center;
                        line-height: 24px;
                        font-weight: bold;
                        margin-right: 10px;
                    }

                    .slider-container {
                        margin: 20px 0;
                        text-align: center;
                    }

                    .emoji-scale {
                        display: flex;
                        justify-content: space-between;
                        margin-top: 5px;
                        font-size: 24px;
                    }

                    .emoji {
                        cursor: pointer;
                        transition: transform 0.2s;
                    }

                    .emoji:hover {
                        transform: scale(1.2);
                    }

                    .pain-marker {
                        stroke-width: 2px;
                        fill-opacity: 0.7;
                        pointer-events: none;
                    }

                    .pain-text {
                        pointer-events: none;
                        user-select: none;
                    }

                    #pain-intensity {
                        width: 90%;
                        margin: 10px 0;
                    }

                    .button-container {
                        display: flex;
                        justify-content: space-between;
                        margin-top: 20px;
                    }

                    .body-part-name {
                        font-size: 18px;
                        font-weight: bold;
                        margin-bottom: 15px;
                    }

                    .instructions {
                        background-color: #f8f9fa;
                        padding: 10px 15px;
                        border-radius: 5px;
                        margin-bottom: 20px;
                        border-left: 4px solid #4CAF50;
                    }

                    /* Save button styling */
                    .save-actions {
                        text-align: right;
                        margin-top: 20px;
                    }

                    .save-btn {
                        background-color: #4CAF50;
                        color: blue;
                        padding: 10px 20px;
                        border: none;
                        border-radius: 4px;
                        cursor: pointer;
                    }

                    .cancel-btn {
                        background-color: #f5f5f5;
                        padding: 10px 20px;
                        border: none;
                        border-radius: 4px;
                        margin-right: 10px;
                        cursor: pointer;
                    }

            		        .cancel-btn {
                        background-color: #f5f5f5;
                        padding: 10px 20px;
                        border: none;
                        border-radius: 4px;
                        margin-right: 10px;
                        cursor: pointer;
                    }

            /* ===== PASTE NOTIFICATION STYLES HERE ===== */
            .notification {
                position: fixed;
                top: 20px;
                right: 20px;
                padding: 15px 25px;
                background-color: #4CAF50;
                color: white;
                border-radius: 4px;
                box-shadow: 0 4px 8px rgba(0,0,0,0.1);
                z-index: 10000;
                opacity: 0;
                transform: translateY(-30px);
                transition: opacity 0.3s, transform 0.3s;
                max-width: 300px;
            }

            .notification.show {
                opacity: 1;
                transform: translateY(0);
            }

            .notification.hide {
                opacity: 0;
                transform: translateY(-30px);
            }

            .notification.error {
                background-color: #f44336;
            }

            .notification.warning {
                background-color: #ff9800;
            }
            /* ===== END NOTIFICATION STYLES ===== */

                    /* For mobile responsive design */
                    @media (max-width: 768px) {


                    /* For mobile responsive design */
                    @media (max-width: 768px) {
                        .body-container {
                            gap: 20px;
                        }

                        .body-view {
                            width: 100%;
                            max-width: 280px;
                            height: auto;
                            aspect-ratio: 1/2;
                        }
                    }





                        /* NEW STYLE: Updated hero section styling */
                        .hero .container {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            text-align: center;
                            padding: .5rem 1rem;
                        }

                        .hero-content {
                            max-width: 800px;
                            margin: 0 auto;
            				 padding-top: 0;
                        }

                        .hero-image {
                            margin: 1.5rem auto;
                            max-width: 100%;
                            text-align: center;
                        }

                        .hero-image img {
                            max-width: 100%;
                            height: auto;
                            border-radius: 8px;
                            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                        }

                        /* NEW STYLE: Inline CTA styling for "Get Started" */
                        .inline-cta {
                            display: inline-block;
                            margin-left: 10px;
                            background-color: #3498db;
                            color: white;
                            text-decoration: none;
                            padding: 5px 12px;
                            border-radius: 4px;
                            font-weight: 500;
                            transition: background-color 0.3s;
                        }

                        .inline-cta:hover {
                            background-color: #2980b9;
                        }

                        /* NEW STYLE: Add more space at bottom of page */
                        .bottom-spacer {
                            height: 120px; /* Adjust as needed to ensure footer visibility */
                        }

                        /* Ensure debug box is styled consistently */
                        .debug-box {
                            border: 2px solid #4a6fa5;
                            background-color: rgba(74, 111, 165, 0.1);
                            padding: 20px;
                            margin: 20px auto; /* Center the box */
                            max-width: 600px; /* Limit width */
                            text-align: center;
                            border-radius: 8px;
                        }

                        /* Adjust timer button size */
                        .btn-settings {
                            padding: 5px 10px;
                            font-size: 0.8rem;
                        }

                        /* Modal styles */
                        .modal {
                            display: none;
                            position: fixed;
                            z-index: 1001;
                            left: 0;
                            top: 0;
                            width: 100%;
                            height: 100%;
                            overflow: auto;
                            background-color: rgba(0, 0, 0, 0.4);
                        }

                        .modal-content {
                            background-color: #fefefe;
                            margin: 15% auto;
                            padding: 20px;
                            border: 1px solid #888;
                            width: 80%;
                            max-width: 500px;
                            border-radius: 8px;
                        }

                        .close {
                            color: #aaa;
                            float: right;
                            font-size: 28px;
                            font-weight: bold;
                        }

                        .close:hover,
                        .close:focus {
                            color: black;
                            text-decoration: none;
                            cursor: pointer;
                        }

                        /* Forgot Password Link */
                        .forgot-password {
                            display: block;
                            text-align: center;
                            margin-top: 15px;
                            color: #3498db;
                            text-decoration: none;
                            font-size: 0.9rem;
                        }

                        .forgot-password:hover {
                            text-decoration: underline;
                        }

                        /* Forgot Password Modal */
                        #forgot-password-modal .modal-content {
                            max-width: 400px;
                        }

                        #forgot-password-modal .form-group {
                            margin-bottom: 20px;
                        }

                        #forgot-password-modal label {
                            display: block;
                            margin-bottom: 5px;
                            font-weight: bold;
                        }

                        #forgot-password-modal input {
                            width: 100%;
                            padding: 8px;
                            border: 1px solid #ddd;
                            border-radius: 4px;
                        }

                        #forgot-password-modal .btn {
                            background-color: #3498db;
                            color: white;
                            border: none;
                            padding: 10px 15px;
                            border-radius: 4px;
                            cursor: pointer;
                        }

                        #forgot-password-modal .btn:hover {
                            background-color: #2980b9;
                        }

                        /* User email display style */
                        #user-email-display {
                            color: white;
                            font-weight: 500;
                        }


                        /* Fixed floating feedback buttons */
                        .feedback-btn-satisfied {
                            position: fixed;
                            bottom: 179px;
                            right: 20px;
                            background-color: var(--secondary-color);
                            color: white;
                            border: none;
                            border-radius: 50%;
                            width: 60px;
                            height: 60px;
                            font-size: 24px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
                            cursor: pointer;
                            z-index: 100;
                            transition: all 0.3s;
                        }

                        .feedback-btn-dissatisfied {
                            position: fixed;
                            bottom: 100px;
                            right: 20px;
                            background-color: var(--warning-color);
                            color: white;
                            border: none;
                            border-radius: 50%;
                            width: 60px;
                            height: 60px;
                            font-size: 24px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
                            cursor: pointer;
                            z-index: 100;
                            transition: all 0.3s;
                        }

                        .feedback-btn-satisfied:hover {
                            background-color: #47a866;
                            transform: scale(1.05);
                        }

                        .feedback-btn-dissatisfied:hover {
                            background-color: #e67e22;
                            transform: scale(1.05);
                        }

                        /* Fix header layout issues */
                        .header-content {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            padding: 1rem 0;
                            width: 100%;
                        }

                        .navbar-left {
                            display: flex;
                            align-items: center;
                        }

                        .logo {
                            display: flex;
                            justify-content: center;
                            margin: 0 auto;
                        }

                        .main-nav {
                            display: flex;
                            justify-content: center;
                        }

                        .auth-section {
                            display: flex;
                            justify-content: flex-end;
                        }

                        /* Fix footer layout */
                        .footer-content {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            text-align: center;
                        }

                        .footer-info {
                            flex: 1;
                            text-align: left;
                        }

                        .footer-links {
                            flex: 1;
                            display: flex;
                            justify-content: center;
                            gap: 1.5rem;
                        }

                        /* Simplify main page decorative elements */
                        .hero h1 {
                            font-size: 2.2rem;
                            margin-bottom: 1rem;
                            text-align: center;
                        }

                        .hero p {
                            font-size: 1.1rem;
                            margin-bottom: 2rem;
                            text-align: center;
                        }

                        .features h2,
                        .how-it-works h2,
                        .testimonials h2,
                        .get-started h2,
                        .welcome-back h2 {
                            text-align: center;
                            margin-bottom: 1.5rem;
                            font-size: 1.8rem;
                        }

                        .get-started p,
                        .welcome-back p {
                            text-align: center;
                        }

                        .step-number {
                            width: 40px;
                            height: 40px;
                            font-size: 1.2rem;
                        }
            			/* Adjust emergency section spacing */
                        .emergency-info {
                            margin-bottom: 10px;
                        }

                        .emergency-content {
                            padding: 15px 0;
                        }

                        .emergency-note {
                            margin-top: 10px;
                            margin-bottom: 10px;
                        }

                        @media (max-width: 768px) {
                            .header-content {
                                position: relative;
                            }

                            .navbar-left {
                                width: auto;
                            }

                            .main-nav {
                                display: none;
                            }

                            .auth-section {
                                width: auto;
                            }

                            /* Style for mobile user email display */
                            .user-menu {
                                display: flex;
                                flex-direction: column;
                                align-items: flex-end;
                            }

                            #user-email-display {
                                margin-bottom: 5px;
                                .footer-content {
                                flex-direction: column;
                                gap: 1rem;
                            }

                            .footer-info,
                            .footer-links {
                                width: 100%;
                                text-align: center;
                            }

                            /* NEW STYLE: Make hero image smaller but visible on mobile */
                            .hero-image {
                                width: 80%;
                                margin: 1rem auto;
                                display: block;
                            }

                            .hero-image img {
                                max-width: 100%;
                                height: auto;
                                display: block;
                            }

                        }
        </style>
    </head>
    <body>
        <!-- Sidebar structure -->
        <div class="sidebar">
            <site-menu></site-menu>
        </div>
        <div class="sidebar-overlay"></div>

        <!-- Navbar -->
        <div class="navbar">
<!-- Navbar -->
<div class="navbar">
    <div class="navbar-left">
        <a href="#" class="menu-toggle" id="menu-toggle">
            <i class="fas fa-bars"></i>
        </a>
        <div class="logo">SafetyBuddy</div>
    </div>
    <div class="navbar-right">
        <div class="user-actions">
            <button id="settings-btn" class="btn-settings"><i class="fas fa-cog"></i></button>
            <button id="auth-btn" class="btn-auth">Login</button>
        </div>
    </div>
</div>
                <h1>SafetyBuddy</h1>
            </div>
            <div class="navbar-right">
                <div class="user-actions">
                    <button id="settings-btn" class="btn-settings"><i class="fas fa-clock"></i> Set</button>
                    <button id="auth-btn" class="btn-auth">Login</button>
                </div>
            </div>
        </div>
        <!-- Main Content -->
        <main>
            <div class="container mt-4 body-chart-container">
                <div class="row">
                    <div class="col-12">
                        <div class="card mb-4">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="card-title mb-0"><i class="fas fa-user-injured"></i> Body Pain Locator</h5>
                            </div>
                            <div class="card-body">
                                <div class="instructions">
                                    <p>
                                        <strong>Instructions:</strong> Click on the body part where you feel pain. Then
                                        use the slider to show how much it hurts (1 = a little, 10 = a lot).
                                    </p>
                                </div>

                                <div class="toggle-container">
                                    <button id="front-toggle" class="toggle-btn active">Front View</button>
                                    <button id="back-toggle" class="toggle-btn">Back View</button>
                                </div>

                                <div class="body-container">
                                    <div id="body-front" class="body-view">
                                        <svg viewBox="0 0 200 400" xmlns="http://www.w3.org/2000/svg" id="svg-front">
                                            <!-- Head -->
                                            <ellipse
                                                id="head"
                                                cx="100"
                                                cy="40"
                                                rx="30"
                                                ry="35"
                                                class="body-part"
                                                data-name="Head" />

                                            <!-- Neck -->
                                            <rect
                                                id="neck"
                                                x="90"
                                                y="75"
                                                width="20"
                                                height="15"
                                                class="body-part"
                                                data-name="Neck" />

                                            <!-- Torso -->
                                            <path
                                                id="chest"
                                                d="M70,90 L130,90 L135,150 L65,150 Z"
                                                class="body-part"
                                                data-name="Chest" />
                                            <path
                                                id="abdomen"
                                                d="M65,150 L135,150 L130,210 L70,210 Z"
                                                class="body-part"
                                                data-name="Abdomen" />

                                            <!-- Arms -->
                                            <path
                                                id="left-shoulder"
                                                d="M70,90 L55,100 L50,120 L70,120 Z"
                                                class="body-part"
                                                data-name="Left Shoulder" />
                                            <path
                                                id="right-shoulder"
                                                d="M130,90 L145,100 L150,120 L130,120 Z"
                                                class="body-part"
                                                data-name="Right Shoulder" />

                                            <rect
                                                id="left-upper-arm"
                                                x="40"
                                                y="120"
                                                width="15"
                                                height="50"
                                                class="body-part"
                                                data-name="Left Upper Arm" />
                                            <rect
                                                id="right-upper-arm"
                                                x="145"
                                                y="120"
                                                width="15"
                                                height="50"
                                                class="body-part"
                                                data-name="Right Upper Arm" />

                                            <rect
                                                id="left-elbow"
                                                x="38"
                                                y="170"
                                                width="19"
                                                height="10"
                                                rx="5"
                                                class="body-part"
                                                data-name="Left Elbow" />
                                            <rect
                                                id="right-elbow"
                                                x="143"
                                                y="170"
                                                width="19"
                                                height="10"
                                                rx="5"
                                                class="body-part"
                                                data-name="Right Elbow" />

                                            <rect
                                                id="left-forearm"
                                                x="40"
                                                y="180"
                                                width="15"
                                                height="45"
                                                class="body-part"
                                                data-name="Left Forearm" />
                                            <rect
                                                id="right-forearm"
                                                x="145"
                                                y="180"
                                                width="15"
                                                height="45"
                                                class="body-part"
                                                data-name="Right Forearm" />

                                            <rect
                                                id="left-hand"
                                                x="38"
                                                y="225"
                                                width="19"
                                                height="20"
                                                rx="5"
                                                class="body-part"
                                                data-name="Left Hand" />
                                            <rect
                                                id="right-hand"
                                                x="143"
                                                y="225"
                                                width="19"
                                                height="20"
                                                rx="5"
                                                class="body-part"
                                                data-name="Right Hand" />

                                            <!-- Legs -->
                                            <path
                                                id="left-hip"
                                                d="M70,210 L100,210 L90,230 L65,230 Z"
                                                class="body-part"
                                                data-name="Left Hip" />
                                            <path
                                                id="right-hip"
                                                d="M100,210 L130,210 L135,230 L110,230 Z"
                                                class="body-part"
                                                data-name="Right Hip" />

                                            <rect
                                                id="left-thigh"
                                                x="65"
                                                y="230"
                                                width="25"
                                                height="70"
                                                class="body-part"
                                                data-name="Left Thigh" />
                                            <rect
                                                id="right-thigh"
                                                x="110"
                                                y="230"
                                                width="25"
                                                height="70"
                                                class="body-part"
                                                data-name="Right Thigh" />

                                            <rect
                                                id="left-knee"
                                                x="65"
                                                y="300"
                                                width="25"
                                                height="15"
                                                rx="7"
                                                class="body-part"
                                                data-name="Left Knee" />
                                            <rect
                                                id="right-knee"
                                                x="110"
                                                y="300"
                                                width="25"
                                                height="15"
                                                rx="7"
                                                class="body-part"
                                                data-name="Right Knee" />

                                            <rect
                                                id="left-calf"
                                                x="65"
                                                y="315"
                                                width="25"
                                                height="60"
                                                class="body-part"
                                                data-name="Left Calf" />
                                            <rect
                                                id="right-calf"
                                                x="110"
                                                y="315"
                                                width="25"
                                                height="60"
                                                class="body-part"
                                                data-name="Right Calf" />

                                            <rect
                                                id="left-foot"
                                                x="60"
                                                y="375"
                                                width="30"
                                                height="15"
                                                rx="5"
                                                class="body-part"
                                                data-name="Left Foot" />
                                            <rect
                                                id="right-foot"
                                                x="110"
                                                y="375"
                                                width="30"
                                                height="15"
                                                rx="5"
                                                class="body-part"
                                                data-name="Right Foot" />
                                        </svg>
                                    </div>

                                    <div id="body-back" class="body-view" style="display: none">
                                        <svg viewBox="0 0 200 400" xmlns="http://www.w3.org/2000/svg" id="svg-back">
                                            <!-- Head Back -->
                                            <ellipse
                                                id="head-back"
                                                cx="100"
                                                cy="40"
                                                rx="30"
                                                ry="35"
                                                class="body-part"
                                                data-name="Back of Head" />

                                            <!-- Neck Back -->
                                            <rect
                                                id="neck-back"
                                                x="90"
                                                y="75"
                                                width="20"
                                                height="15"
                                                class="body-part"
                                                data-name="Back of Neck" />

                                            <!-- Back -->
                                            <path
                                                id="upper-back"
                                                d="M70,90 L130,90 L135,150 L65,150 Z"
                                                class="body-part"
                                                data-name="Upper Back" />
                                            <path
                                                id="lower-back"
                                                d="M65,150 L135,150 L130,210 L70,210 Z"
                                                class="body-part"
                                                data-name="Lower Back" />

                                            <!-- Arms Back -->
                                            <path
                                                id="left-shoulder-back"
                                                d="M70,90 L55,100 L50,120 L70,120 Z"
                                                class="body-part"
                                                data-name="Left Shoulder Back" />
                                            <path
                                                id="right-shoulder-back"
                                                d="M130,90 L145,100 L150,120 L130,120 Z"
                                                class="body-part"
                                                data-name="Right Shoulder Back" />

                                            <rect
                                                id="left-upper-arm-back"
                                                x="40"
                                                y="120"
                                                width="15"
                                                height="50"
                                                class="body-part"
                                                data-name="Left Upper Arm Back" />
                                            <rect
                                                id="right-upper-arm-back"
                                                x="145"
                                                y="120"
                                                width="15"
                                                height="50"
                                                class="body-part"
                                                data-name="Right Upper Arm Back" />

                                            <rect
                                                id="left-elbow-back"
                                                x="38"
                                                y="170"
                                                width="19"
                                                height="10"
                                                rx="5"
                                                class="body-part"
                                                data-name="Left Elbow Back" />
                                            <rect
                                                id="right-elbow-back"
                                                x="143"
                                                y="170"
                                                width="19"
                                                height="10"
                                                rx="5"
                                                class="body-part"
                                                data-name="Right Elbow Back" />

                                            <rect
                                                id="left-forearm-back"
                                                x="40"
                                                y="180"
                                                width="15"
                                                height="45"
                                                class="body-part"
                                                data-name="Left Forearm Back" />
                                            <rect
                                                id="right-forearm-back"
                                                x="145"
                                                y="180"
                                                width="15"
                                                height="45"
                                                class="body-part"
                                                data-name="Right Forearm Back" />

                                            <rect
                                                id="left-hand-back"
                                                x="38"
                                                y="225"
                                                width="19"
                                                height="20"
                                                rx="5"
                                                class="body-part"
                                                data-name="Left Hand Back" />
                                            <rect
                                                id="right-hand-back"
                                                x="143"
                                                y="225"
                                                width="19"
                                                height="20"
                                                rx="5"
                                                class="body-part"
                                                data-name="Right Hand Back" />

                                            <!-- Legs Back -->
                                            <path
                                                id="left-buttock"
                                                d="M70,210 L100,210 L90,230 L65,230 Z"
                                                class="body-part"
                                                data-name="Left Buttock" />
                                            <path
                                                id="right-buttock"
                                                d="M100,210 L130,210 L135,230 L110,230 Z"
                                                class="body-part"
                                                data-name="Right Buttock" />

                                            <rect
                                                id="left-thigh-back"
                                                x="65"
                                                y="230"
                                                width="25"
                                                height="70"
                                                class="body-part"
                                                data-name="Left Thigh Back" />
                                            <rect
                                                id="right-thigh-back"
                                                x="110"
                                                y="230"
                                                width="25"
                                                height="70"
                                                class="body-part"
                                                data-name="Right Thigh Back" />

                                            <rect
                                                id="left-knee-back"
                                                x="65"
                                                y="300"
                                                width="25"
                                                height="15"
                                                rx="7"
                                                class="body-part"
                                                data-name="Left Knee Back" />
                                            <rect
                                                id="right-knee-back"
                                                x="110"
                                                y="300"
                                                width="25"
                                                height="15"
                                                rx="7"
                                                class="body-part"
                                                data-name="Right Knee Back" />

                                            <rect
                                                id="left-calf-back"
                                                x="65"
                                                y="315"
                                                width="25"
                                                height="60"
                                                class="body-part"
                                                data-name="Left Calf Back" />
                                            <rect
                                                id="right-calf-back"
                                                x="110"
                                                y="315"
                                                width="25"
                                                height="60"
                                                class="body-part"
                                                data-name="Right Calf Back" />

                                            <rect
                                                id="left-heel"
                                                x="60"
                                                y="375"
                                                width="30"
                                                height="15"
                                                rx="5"
                                                class="body-part"
                                                data-name="Left Heel" />
                                            <rect
                                                id="right-heel"
                                                x="110"
                                                y="375"
                                                width="30"
                                                height="15"
                                                rx="5"
                                                class="body-part"
                                                data-name="Right Heel" />
                                        </svg>
                                    </div>
                                </div>

                                <div class="mb-3 mt-4">
                                    <h6>Notes</h6>
                                    <textarea
                                        class="form-control"
                                        rows="3"
                                        id="notesInput"
                                        placeholder="Add notes about your symptoms (what triggers pain, what helps, when it's worse, etc.)"></textarea>
                                </div>

                                <div class="text-end">
                                    <button class="btn btn-secondary me-2" id="clearBtn">Clear All</button>
                                    <button class="btn btn-primary" id="saveBtn">Save Chart</button>
                                </div>

                                <div class="pain-list mt-4">
                                    <h2>Pain Record</h2>
                                    <div id="pain-entries-container"></div>
                                </div>

                                <!-- Debug box -->
                                <div class="debug-box" id="debug-box">
                                    <strong>Debug Information:</strong>
                                    <div id="debug-log"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <!-- Settings Modal -->
        <div id="settings-modal" class="modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2>Timer Settings</h2>
                <div class="form-group">
                    <label for="timeout-setting">Session Timeout (minutes):</label>
                    <select id="timeout-setting">
                        <option value="5">5 minutes</option>
                        <option value="10">10 minutes</option>
                        <option value="15">15 minutes</option>
                        <option value="30">30 minutes</option>
                        <option value="60">60 minutes</option>
                    </select>
                </div>
                <button id="save-settings-btn" class="btn">Save Settings</button>
            </div>
        </div>
        <!-- Pain Form Modal -->
        <div class="overlay" id="overlay"></div>
        <div class="pain-form" id="pain-form">
            <h3>Pain Details</h3>
            <div class="body-part-name" id="body-part-name">Body Part</div>

            <div class="slider-container">
                <label for="pain-intensity"><strong>How much does it hurt?</strong></label>
                <input type="range" id="pain-intensity" min="1" max="10" value="5" />
                <div class="emoji-scale">
                    <span class="emoji" data-value="1">😐</span>
                    <span class="emoji" data-value="3">😣</span>
                    <span class="emoji" data-value="5">😖</span>
                    <span class="emoji" data-value="7">😫</span>
                    <span class="emoji" data-value="10">😭</span>
                </div>
                <div style="display: flex; justify-content: space-between">
                    <span>1</span>
                    <span>10</span>
                </div>
            </div>

            <div class="button-container">
                <button id="cancel-btn">Cancel</button>
                <button id="save-btn">Save</button>
            </div>
        </div>

        <!-- Scripts -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

        <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            // ========== DOM ELEMENTS ========== //
                        	//DOM elements
                        	//State variables
                        	//Initial setup
                        	//Event listeners
                        	//Core functions

                            const bodyFrontView = document.getElementById('body-front');
                            const bodyBackView = document.getElementById('body-back');
                            const frontToggle = document.getElementById('front-toggle');
                            const backToggle = document.getElementById('back-toggle');
                            const painForm = document.getElementById('pain-form');
                            const overlay = document.getElementById('overlay');
                            const bodyPartNameElement = document.getElementById('body-part-name');
                            const painIntensity = document.getElementById('pain-intensity');
                            const saveBtn = document.getElementById('save-btn');
                            const cancelBtn = document.getElementById('cancel-btn');
                            const painEntriesContainer = document.getElementById('pain-entries-container');
                            const notesInput = document.getElementById('notesInput');
                            const clearBtn = document.getElementById('clearBtn');
                            const mainSaveBtn = document.getElementById('saveBtn');
                            const authBtn = document.getElementById('auth-btn');
                            const settingsBtn = document.getElementById('settings-btn');
                            const emojis = document.querySelectorAll('.emoji');
                            const debugBox = document.getElementById('debug-box');
                            const debugLog = document.getElementById('debug-log');
                            const menuToggle = document.querySelector(".menu-toggle");
                            const sidebar = document.querySelector(".sidebar");
                            const sidebarOverlay = document.querySelector(".sidebar-overlay");
                            const svgFront = document.getElementById('svg-front');
                            const svgBack = document.getElementById('svg-back');
                            const settingsModal = document.getElementById("settings-modal");
                            const closeModalBtns = document.querySelectorAll(".close");
                            const saveSettingsBtn = document.getElementById("save-settings-btn");

                            // ========== STATE VARIABLES ========== //
                            let currentView = 'front';
                            let painPoints = [];
                            let currentPoint = null;
                            let currentUser = null;
                            let markersAdded = 0;
                            const DEBUG_MODE = true;

                            // ========== INITIAL SETUP ========== //
                            debugBox.style.display = DEBUG_MODE ? 'block' : 'none';
                            currentUser = { uid: 'test-user' }; // Test user for development

                            // Set up event listeners for all body parts
                            document.querySelectorAll('.body-part').forEach(part => {
                                part.addEventListener('click', handleBodyPartClick);
                            });

                            // Emoji click handlers
                            emojis.forEach(emoji => {
                                emoji.addEventListener('click', function() {
                                    painIntensity.value = parseInt(this.getAttribute('data-value'));
                                    logDebug(`Pain level set to ${painIntensity.value} by emoji click`);
                                });
                            });

                        // ========== EVENT LISTENERS ========== //
                        frontToggle.addEventListener('click', () => switchView('front'));
                        backToggle.addEventListener('click', () => switchView('back'));
                        saveBtn.addEventListener('click', savePainPoint);
                        cancelBtn.addEventListener('click', closePainForm);
                        clearBtn.addEventListener('click', clearAllPainPoints);

                        // ===== FIREBASE SUBMISSION FUNCTION ===== //
                        function saveToFirebase() {
                            if (!currentUser) {
                                 showMessage("Please log in to save your chart.", "error"); // ← Changed line
                                return;
                            }

                            const notes = notesInput.value.trim();
                            const painData = {
                                userId: currentUser.uid,
                                createdAt: firebase.firestore.FieldValue.serverTimestamp(),
                                type: 'bodyChart',
                                notes: notes,
                                painPoints: painPoints.map(point => ({
                                    bodyPartId: point.bodyPartId,
                                    bodyPartName: point.bodyPartName,
                                    intensity: point.intensity,
                                    x: point.x,
                                    y: point.y,
                                    view: point.view,
                                    timestamp: new Date().toISOString()
                                }))
                            };

                            console.log("Submitting to Firebase:", painData);
                            const db = firebase.firestore();
                            db.collection("symptoms").add(painData)
                                .then(() => showMessage("Saved successfully!"))
                                .catch(error => console.error("Firebase error:", error));
                        }

                        // ===== CONNECT SAVE BUTTON ===== //
                        mainSaveBtn.addEventListener('click', saveToFirebase);  // <-- NOW CORRECTLY PLACED

                        // Menu toggle functionality (keep this AFTER all other listeners)
                        if (menuToggle) {
                            menuToggle.addEventListener("click", function(e) {
                                e.preventDefault();
                                e.stopPropagation();
                                toggleSidebar();
                            });
                        }

                            if (sidebarOverlay) {
                                sidebarOverlay.addEventListener("click", toggleSidebar);
                            }

                            document.addEventListener("click", function(e) {
                                if (sidebar.classList.contains("active") &&
                                    !sidebar.contains(e.target) &&
                                    !menuToggle.contains(e.target)) {
                                    toggleSidebar();
                                }
                            });

                            // Settings button functionality
                            if (settingsBtn) {
                                settingsBtn.addEventListener("click", function() {
                                    settingsModal.style.display = "block";
                                });
                            }
            // Settings button functionality
            if (settingsBtn) {
                settingsBtn.addEventListener("click", function() {
                    settingsModal.style.display = "block";
                });
            }

            if (saveSettingsBtn) {
                saveSettingsBtn.addEventListener("click", function() {
                    const timeoutValue = document.getElementById("timeout-setting").value;
                    localStorage.setItem("sessionTimeout", timeoutValue);
                    settingsModal.style.display = "none";
                    showMessage(`Session timeout set to ${timeoutValue} minutes`, "success");
                });
            }

            // Close modal handlers
            closeModalBtns.forEach(btn => {  // ← Added opening brace
                btn.addEventListener("click", function() {
                    this.closest(".modal").style.display = "none";
                });
            }); // ← Properly closed now

            window.addEventListener("click", function(event) {
                if (event.target === settingsModal) {
                    settingsModal.style.display = "none";
                }
            });

            // Auth button handler
            if (authBtn) {
                authBtn.addEventListener("click", function() {
                    if (this.textContent === "Login") {
                        window.location.href = "login.html";
                    } else {
                        firebase.auth().signOut().then(() => {
                            window.location.href = "index.html";
                        });
                    }
                });
            }

            // Initialize Firebase (ADD THIS AT THE TOP OF YOUR SCRIPT)
            if (typeof firebase !== 'undefined' && !firebase.apps.length) {
                firebase.initializeApp(firebaseConfig);
            }
// CORRECT (fixed version):
closeModalBtns.forEach(btn => {
    btn.addEventListener("click", function() {
        this.closest(".modal").style.display = "none";
    });
});  // Properly closed now

                            window.addEventListener("click", function(event) {
                                if (event.target === settingsModal) {
                                    settingsModal.style.display = "none";
                                }
                            });

                            // Auth button handler
                            if (authBtn) {
                                authBtn.addEventListener("click", function() {
                                    if (this.textContent === "Login") {
                                        window.location.href = "login.html";
                                    } else {
                                        firebase.auth().signOut().then(() => {
                                            window.location.href = "index.html";
                                        });
                                    }
                                });
                            }

                            // ========== CORE FUNCTIONS ========== //
                            function toggleSidebar() {
                                sidebar.classList.toggle("active");
                                sidebarOverlay.classList.toggle("active");
                            }

                            function switchView(view) {
                                currentView = view;
                                if (view === 'front') {
                                    bodyFrontView.style.display = 'block';
                                    bodyBackView.style.display = 'none';
                                    frontToggle.classList.add('active');
                                    backToggle.classList.remove('active');
                                } else {
                                    bodyFrontView.style.display = 'none';
                                    bodyBackView.style.display = 'block';
                                    frontToggle.classList.remove('active');
                                    backToggle.classList.add('active');
                                }
                                logDebug(`Switched to ${view} view`);
                            }

                            function handleBodyPartClick(event) {
                                const bodyPart = event.target;
                                const svg = bodyPart.closest('svg');
                                const pt = svg.createSVGPoint();
                                pt.x = event.clientX;
                                pt.y = event.clientY;
                                const svgPoint = pt.matrixTransform(svg.getScreenCTM().inverse());

                                currentPoint = {
                                    id: Date.now(),
                                    view: currentView,
                                    x: svgPoint.x,
                                    y: svgPoint.y,
                                    bodyPartId: bodyPart.id,
                                    bodyPartName: bodyPart.dataset.name,
                                    intensity: 5
                                };

                                bodyPartNameElement.textContent = bodyPart.dataset.name;
                                openPainForm();
                                logDebug(`Clicked on ${bodyPart.dataset.name} at (${Math.round(svgPoint.x)}, ${Math.round(svgPoint.y)})`);
                            }

                            function openPainForm() {
                                painForm.style.display = 'block';
                                overlay.style.display = 'block';
                                painIntensity.value = 5;
                            }

                            function closePainForm() {
                                painForm.style.display = 'none';
                                overlay.style.display = 'none';
                                currentPoint = null;
                            }

                            function savePainPoint() {
                                if (!currentPoint) {
                                    logDebug("Error: No current point to save");
                                    return;
                                }

                                currentPoint.intensity = parseInt(painIntensity.value);
                                painPoints.push(currentPoint);
                                markersAdded++;

                                const svg = currentPoint.view === 'front' ? svgFront : svgBack;
                                const intensity = currentPoint.intensity;
                                const colors = [
                                    '#00ff00', '#40ff00', '#80ff00', '#c0ff00', '#ffff00',
                                    '#ffc000', '#ff8000', '#ff4000', '#ff0000', '#c00000'
                                ];

                                // Create marker
                                const marker = document.createElementNS("http://www.w3.org/2000/svg", "circle");
                                marker.setAttribute("cx", currentPoint.x);
                                marker.setAttribute("cy", currentPoint.y);
                                marker.setAttribute("r", "10");
                                marker.setAttribute("class", "pain-marker");
                                marker.setAttribute("data-id", currentPoint.id);
                                marker.setAttribute("fill", colors[intensity - 1] || '#ff0000');
                                marker.setAttribute("stroke", "black");
                                svg.appendChild(marker);

                                // Create text
                                const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
                                text.setAttribute("x", currentPoint.x);
                                text.setAttribute("y", currentPoint.y);
                                text.setAttribute("text-anchor", "middle");
                                text.setAttribute("dominant-baseline", "central");
                                text.setAttribute("font-weight", "bold");
                                text.setAttribute("font-size", "12");
                                text.setAttribute("class", "pain-text");
                                text.setAttribute("data-id", `text-${currentPoint.id}`);
                                text.textContent = intensity;
                                text.setAttribute("fill", intensity > 5 ? "white" : "black");
                                svg.appendChild(text);

                                updatePainList();
                                closePainForm();
                                logDebug(`Added marker #${markersAdded} with intensity ${intensity}`);
                            }

                            function updatePainList() {
                                painEntriesContainer.innerHTML = painPoints.length === 0 ?
                                    '<p>No pain points recorded yet.</p>' :
                                    painPoints.map(point => {
                                        const colors = [
                                            '#00ff00', '#40ff00', '#80ff00', '#c0ff00', '#ffff00',
                                            '#ffc000', '#ff8000', '#ff4000', '#ff0000', '#c00000'
                                        ];
                                        const intensityColor = colors[point.intensity - 1] || '#ff0000';
                                        return `
                                        <div class="pain-entry">
                                            <div>
                                                <span class="pain-intensity-display" style="background-color: ${intensityColor}">${point.intensity}</span>
                                                <strong>${point.bodyPartName}</strong> (${point.view} view)
                                            </div>
                                            <button class="delete-btn" data-id="${point.id}">×</button>
                                        </div>
                                        `;
                                    }).join('');

                                document.querySelectorAll('.delete-btn').forEach(btn => {
                                    btn.addEventListener('click', function() {
                                        deletePoint(parseInt(this.dataset.id));
                                    });
                                });
                            }

                            function deletePoint(id) {
                                document.querySelector(`.pain-marker[data-id="${id}"]`)?.remove();
                                document.querySelector(`text[data-id="text-${id}"]`)?.remove();
                                painPoints = painPoints.filter(point => point.id !== id);
                                updatePainList();
                                logDebug(`Deleted marker with id ${id}`);
                            }

                            function clearAllPainPoints() {
                                document.querySelectorAll('.pain-marker').forEach(marker => marker.remove());
                                document.querySelectorAll('.pain-text').forEach(text => text.remove());
                                painPoints = [];
                                updatePainList();
                                logDebug("Cleared all pain points");
                            }


                                const notes = notesInput.value.trim();
                                localStorage.setItem('bodyChartData', JSON.stringify({
                                    painPoints,
                                    notes,
                                    timestamp: new Date().toISOString()
                                }));

                                const chartData = {
                                    userId: currentUser.uid,
                                    createdAt: firebase.firestore.FieldValue.serverTimestamp(),
                                    notes: notes,
                                    type: 'bodyChart',
                                    recordDate: new Date().toISOString(),
                                    painPoints: painPoints.map(point => ({
                                        bodyPartId: point.bodyPartId,
                                        bodyPartName: point.bodyPartName,
                                        intensity: point.intensity,
                                        x: point.x,
                                        y: point.y,
                                        view: point.view
                                    }))
                                };

                               function saveToFirebase() {
    if (!currentUser) {
        showMessage('Please login to save your chart', 'error');
        return;
    }

    if (painPoints.length === 0) {
        showMessage('Please mark at least one pain area before saving', 'warning');
        return;
    }

    const notes = notesInput.value.trim();
    const chartData = {
        userId: currentUser.uid,
        createdAt: firebase.firestore.FieldValue.serverTimestamp(),
        notes: notes,
        type: 'bodyChart',
        recordDate: new Date().toISOString(),
        painPoints: painPoints.map(point => ({
            bodyPartId: point.bodyPartId,
            bodyPartName: point.bodyPartName,
            intensity: point.intensity,
            x: point.x,
            y: point.y,
            view: point.view
        }))
    };

    // Debug log
    logDebug("Saving to Firebase: " + JSON.stringify(chartData));
    
    db.collection('symptoms').add(chartData)
        .then((docRef) => {
            showMessage('Pain chart saved successfully!', 'success');
            logDebug("Data saved with ID: " + docRef.id);
        })
        .catch(error => {
            console.error('Error saving chart:', error);
            showMessage('Error saving chart: ' + error.message, 'error');
        });
}  // <-- Make sure this closing brace exists

                            function logDebug(message) {
                                if (DEBUG_MODE) {
                                    console.log(message);
                                    debugLog.innerHTML += `<div>${new Date().toLocaleTimeString()}: ${message}</div>`;
                                    debugLog.scrollTop = debugLog.scrollHeight;
                                }
                            }



                            // Initialize
                            logDebug("Page initialized. Click on body parts to add pain markers.");
                            updatePainList();
                        });


                        // ===== NEW NOTIFICATION SYSTEM =====
                        function showMessage(msg, type = 'success') {
                            const notif = document.getElementById('notification');
                            if (!notif) return;

                            // Set message and style
                            notif.textContent = msg;
                            notif.className = `notification show ${type}`;

                            // Auto-hide after 3 seconds
                            setTimeout(() => {
                                notif.classList.replace('show', 'hide');
                                setTimeout(() => notif.className = 'notification', 300);
                            }, 3000);
                        }
                        // ===== END NEW SYSTEM =====

                        // Keep everything below this (like auth state listeners)
                        firebase.auth().onAuthStateChanged(function(user) {
                            // ... existing code ...
                        });

                        // Auth state listener
                        firebase.auth().onAuthStateChanged(function(user) {
                            const authBtn = document.getElementById("auth-btn");
                            if (authBtn) {
                                authBtn.textContent = user ? "Logout" : "Login";
                            }
                        });
        </script>

        <!-- Notification container -->
        <div id="notification" class="notification"></div>
    </body>
</html>
