# app.py

from flask import Flask, render_template, request, redirect, url_for, jsonify, flash
import json
import os
from werkzeug.utils import secure_filename
from werkzeug.exceptions import RequestEntityTooLarge

app = Flask(__name__)
app.secret_key = 'your_secure_secret_key'  # Replace with a secure, random key!

# Configure upload folder and allowed extensions
UPLOAD_FOLDER = 'static/images/uploads'
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
app.config['MAX_CONTENT_LENGTH'] = 2 * 1024 * 1024  # 2 MB max upload size

# Ensure upload folder exists
os.makedirs(UPLOAD_FOLDER, exist_ok=True)

# Load yoga poses data
with open('poses.json', 'r') as f:
    poses = json.load(f)

# Load or initialize selected dates
DATES_FILE = 'selected_dates.json'
if os.path.exists(DATES_FILE):
    with open(DATES_FILE, 'r') as f:
        selected_dates = json.load(f)
else:
    selected_dates = []

def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        mood = request.form.get('mood')
        if mood:
            return redirect(url_for('recommendations_page', mood=mood))
    return render_template('index1.html', selected_dates=selected_dates)

@app.route('/recommendations/<mood>')
def recommendations_page(mood):
    recommended_poses = poses.get(mood.lower(), [])
    return render_template('recommendations.html', mood=mood.capitalize(), poses=recommended_poses)

@app.route('/upload_image', methods=['POST'])
def upload_image():
    if 'image' not in request.files:
        flash('No file part.')
        return redirect(request.url)
    file = request.files['image']
    if file.filename == '':
        flash('No selected file.')
        return redirect(request.url)
    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
        file.save(filepath)
        flash('Image uploaded successfully!')
        return redirect(url_for('index'))
    else:
        flash('Invalid file type.')
    return redirect(request.url)

@app.route('/upload_date', methods=['POST'])
def upload_date():
    data = request.get_json()
    date = data.get('date')
    if date and date not in selected_dates:
        selected_dates.append(date)
        with open(DATES_FILE, 'w') as f:
            json.dump(selected_dates, f)
        return jsonify({'status': 'success', 'date': date}), 200
    return jsonify({'status': 'error'}), 400

@app.errorhandler(RequestEntityTooLarge)
def handle_large_file(error):
    flash('File is too large. Maximum size is 2MB.')
    return redirect(request.url)

if __name__ == '__main__':
    app.run(debug=True)

{
    "relaxed": [
        {
            "name": "Child's Pose",
            "image": "child_pose.jpg",
            "description": "A gentle resting pose that stretches the back and hips."
        },
        {
            "name": "Corpse Pose",
            "image": "corpse_pose.jpg",
            "description": "A pose of total relaxation, making it one of the most challenging."
        }
    ],
    "anxious": [
        {
            "name": "Tree Pose",
            "image": "tree_pose.jpg",
            "description": "Improves balance and calms the mind."
        },
        {
            "name": "Warrior II",
            "image": "warrior_ii.jpg",
            "description": "Builds stamina and concentration."
        }
    ],
    "stressed": [
        {
            "name": "Standing Forward Bend",
            "image": "forward_bend.jpg",
            "description": "Relieves stress and calms the brain."
        },
        {
            "name": "Cat-Cow Pose",
            "image": "cat_cow_pose.jpg",
            "description": "Gently stretches and warms up the spine."
        }
    ],
    "happy": [
        {
            "name": "Sun Salutation",
            "image": "sun_salutation.jpg",
            "description": "Energizes the body and mind."
        },
        {
            "name": "Half Moon Pose",
            "image": "half_moon_pose.jpg",
            "description": "Opens up the chest and shoulders."
        }
    ],
    "sad": [
        {
            "name": "Bridge Pose",
            "image": "bridge_pose.jpg",
            "description": "Opens the heart and chest."
        },
        {
            "name": "Camel Pose",
            "image": "camel_pose.jpg",
            "description": "Stimulates the nervous system and uplifts mood."
        }
    ]
}


<!-- templates/index1.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Yoga Recommendation App</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- FullCalendar CSS -->
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.css' rel='stylesheet' />
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet">
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="{{ url_for('index') }}">YogaApp</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
                aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <!-- Navbar Items -->
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="{{ url_for('index') }}">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                    <!-- Dropdown for Yoga Instructor -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="instructorDropdown" role="button"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            Yoga Instructor
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="instructorDropdown">
                            <li><a class="dropdown-item" href="#">Instructor 1</a></li>
                            <li><a class="dropdown-item" href="#">Instructor 2</a></li>
                            <li><a class="dropdown-item" href="#">Instructor 3</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- Navbar Right Items -->
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-user"></i> Profile</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-sign-out-alt"></i> Logout</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Flash Messages -->
    <div class="container mt-4">
        {% with messages = get_flashed_messages() %}
            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-info alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}
    </div>

    <!-- Main Container -->
    <div class="container-fluid mt-5">
        <!-- Yoga Box -->
        <div class="row">
            <div class="col-12 mb-4">
                <div class="card p-4 shadow-sm">
                    <div class="row">
                        <!-- Left Side: Search and Upload -->
                        <div class="col-md-6 d-flex flex-column">
                            <h5>Yoga Search</h5>
                            <form method="POST" action="/">
                                <div class="input-group mb-3">
                                    <select name="mood" class="form-control form-control-lg" required>
                                        <option value="" disabled selected>Select your mood...</option>
                                        <option value="Relaxed">Relaxed</option>
                                        <option value="Anxious">Anxious</option>
                                        <option value="Stressed">Stressed</option>
                                        <option value="Happy">Happy</option>
                                        <option value="Sad">Sad</option>
                                    </select>
                                    <button class="btn btn-primary" type="submit"><i class="fas fa-search"></i> Search</button>
                                </div>
                            </form>
                            <h5>Upload Image</h5>
                            <form method="POST" action="/upload_image" enctype="multipart/form-data">
                                <div class="input-group mb-3">
                                    <input class="form-control" type="file" id="formFile" name="image" accept="image/*" required>
                                    <button type="submit" class="btn btn-secondary"><i class="fas fa-upload"></i> Upload</button>
                                </div>
                            </form>
                        </div>
                        <!-- Right Side: Static Image -->
                        <div class="col-md-6 d-flex align-items-center justify-content-center">
                            <img src="{{ url_for('static', filename='images/yoga_main_page.png') }}" alt="Yoga Main Page" class="img-fluid yoga-main-image">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Calendar Box -->
        <div class="row">
            <div class="col-12 mb-4">
                <div class="card p-3 shadow-sm">
                    <h5>Select a Date</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <div id='calendar' class="small-calendar"></div>
                        </div>
                        <div class="col-md-6">
                            <div class="selected-dates-box p-2 border rounded">
                                <h6>Uploaded Dates:</h6>
                                <ul id="selected-dates" class="list-group mb-3">
                                    {% if selected_dates %}
                                        {% for date in selected_dates %}
                                            <li class="list-group-item">{{ date }}</li>
                                        {% endfor %}
                                    {% endif %}
                                </ul>
                                <button id="upload-date" class="btn btn-success btn-sm"><i class="fas fa-upload"></i> Upload Date</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Yoga Poses Section -->
        <div class="row">
            <div class="col-12">
                <div class="card p-3 shadow-sm">
                    <h5>Yoga Poses</h5>
                    <div class="row">
                        {% for pose in poses %}
                            <div class="col-md-4 mb-3">
                                <div class="card h-100">
                                    <img src="{{ url_for('static', filename='images/' + pose.image) }}" class="card-img-top" alt="{{ pose.name }}">
                                    <div class="card-body">
                                        <h5 class="card-title">{{ pose.name }}</h5>
                                        <p class="card-text">{{ pose.description }}</p>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS, Popper.js, and jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- FullCalendar JS -->
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js'></script>
    <!-- Custom JS -->
    <script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
</body>
</html>

<!-- templates/recommendations.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Recommendations - {{ mood }}</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet">
</head>
<body>
    <!-- Navbar (Same as index1.html) -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
        <div class="container-fluid">
            <a class="navbar-brand" href="{{ url_for('index') }}">YogaApp</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
                aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('index') }}">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                    <!-- Dropdown for Yoga Instructor -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="instructorDropdown" role="button"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            Yoga Instructor
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="instructorDropdown">
                            <li><a class="dropdown-item" href="#">Instructor 1</a></li>
                            <li><a class="dropdown-item" href="#">Instructor 2</a></li>
                            <li><a class="dropdown-item" href="#">Instructor 3</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- Placeholder for additional navbar items -->
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-user"></i> Profile</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-sign-out-alt"></i> Logout</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Recommendations Container -->
    <div class="container mt-4">
        <h2 class="mb-4 text-center">Recommended Yoga Poses for Feeling {{ mood }}</h2>
        <div class="row">
            {% if poses %}
                {% for pose in poses %}
                    <div class="col-md-4 mb-4">
                        <div class="card h-100 shadow-sm">
                            <img src="{{ url_for('static', filename='images/' + pose.image) }}" class="card-img-top" alt="{{ pose.name }}">
                            <div class="card-body">
                                <h5 class="card-title">{{ pose.name }}</h5>
                                <p class="card-text">{{ pose.description }}</p>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            {% else %}
                <p class="text-center">No poses found for the selected mood.</p>
            {% endif %}
        </div>
        <div class="text-center">
            <a href="{{ url_for('index') }}" class="btn btn-secondary mb-5">Back to Mood Selection</a>
        </div>
    </div>

    <!-- Bootstrap JS and dependencies -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

/* static/css/styles.css */

/* General Styling */
body {
    background-color: #f8f9fa; /* Light grey background for calmness */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Navbar Styling */
.navbar-brand {
    font-weight: bold;
    color: #2c3e50 !important;
}

.navbar-nav .nav-link {
    color: #2c3e50 !important;
}

.navbar-nav .nav-link:hover {
    color: #3498db !important;
}

/* Card Styling */
.card {
    border: none;
    border-radius: 15px;
    background-color: #ffffff; /* White background for cards */
}

.card img {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    height: 200px;
    object-fit: cover;
}

/* Buttons */
.btn-primary {
    background-color: #3498db;
    border-color: #3498db;
    border-radius: 25px;
}

.btn-secondary {
    background-color: #95a5a6;
    border-color: #95a5a6;
    border-radius: 25px;
}

.btn-success {
    border-radius: 25px;
}

/* Calendar */
.small-calendar {
    max-width: 100%;
    height: 300px; /* Reduced height for smaller calendar */
}

#calendar {
    width: 100%;
    height: 100%;
}

/* Selected Dates Box */
.selected-dates-box {
    background-color: #f1f1f1;
    height: 100%;
}

.selected-dates-box h6 {
    margin-bottom: 10px;
}

.selected-dates-box ul {
    max-height: 200px;
    overflow-y: auto;
}

/* Yoga Main Image */
.yoga-main-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Uploaded Images */
.uploaded-images img {
    max-height: 200px;
    object-fit: cover;
    border-radius: 10px;
}

/* Yoga Poses Section */
.card > .row {
    margin-top: 15px;
}

.card h5 {
    margin-bottom: 15px;
}

/* Responsive Adjustments */
@media (max-width: 767px) {
    .small-calendar {
        height: 250px;
    }
    .selected-dates-box {
        margin-top: 15px;
    }
}

// static/js/scripts.js

$(document).ready(function() {
    // Initialize FullCalendar
    var calendarEl = document.getElementById('calendar');
    var selectedDates = [];

    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        selectable: true,
        select: function(info) {
            // Add the selected date to the list if not already added
            var dateStr = info.startStr;
            if(!selectedDates.includes(dateStr)){
                selectedDates.push(dateStr);
                $('#selected-dates').append('<li class="list-group-item">' + dateStr + '</li>');
                // Optionally, visually mark the date as selected
                // e.g., info.jsEvent.target.classList.add('selected-date');
            }
            // Deselect the date to allow multiple selections
            calendar.unselect();
        },
        unselectAuto: false,
    });
    calendar.render();

    // Handle Upload Date Button
    $('#upload-date').click(function(){
        // Send all selected dates to the server
        if(selectedDates.length === 0){
            alert('No dates selected to upload.');
            return;
        }
        // Send each date via AJAX
        selectedDates.forEach(function(date){
            $.ajax({
                url: '/upload_date',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({date: date}),
                success: function(response){
                    // Optionally, indicate success
                    console.log('Uploaded date:', response.date);
                },
                error: function(){
                    alert('Error uploading date: ' + date);
                }
            });
        });
        // Clear selectedDates and the list
        selectedDates = [];
        $('#selected-dates').empty();
        alert('Selected dates uploaded successfully.');
    });
});

explain the script especially the calender box