Intelligent Study Reminders

<!-- Quick Stats -->
<div class="stats-row">
    <div class="stat-card">
        <div class="stat-icon">⏰</div>
        <div class="stat-value">8:30 AM</div>
        <div class="stat-label">Next Reminder</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon">📚</div>
        <div class="stat-value">4/6</div>
        <div class="stat-label">Today's Sessions</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon">✅</div>
        <div class="stat-value">87%</div>
        <div class="stat-label">Completion Rate</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon">🎯</div>
        <div class="stat-value">95%</div>
        <div class="stat-label">On-Time Rate</div>
    </div>
</div>

<!-- Reminder Categories -->
<div class="reminder-categories">
    <h3>Reminder Categories</h3>
    <div class="category-grid">
        <div class="category-card active" onclick="selectCategory('daily')">
            <div class="category-icon">📅</div>
            <div class="category-name">Daily Study</div>
            <div class="category-count">5 active</div>
        </div>
        <div class="category-card" onclick="selectCategory('breaks')">
            <div class="category-icon">☕</div>
            <div class="category-name">Break Alerts</div>
            <div class="category-count">3 active</div>
        </div>
        <div class="category-card" onclick="selectCategory('goals')">
            <div class="category-icon">🎯</div>
            <div class="category-name">Goal Tracking</div>
            <div class="category-count">2 active</div>
        </div>
        <div class="category-card" onclick="selectCategory('motivation')">
            <div class="category-icon">💪</div>
            <div class="category-name">Motivation</div>
            <div class="category-count">4 active</div>
        </div>
        <div class="category-card" onclick="selectCategory('deadlines')">
            <div class="category-icon">⏳</div>
            <div class="category-name">Deadlines</div>
            <div class="category-count">1 active</div>
        </div>
        <div class="category-card" onclick="selectCategory('review')">
            <div class="category-icon">🔍</div>
            <div class="category-name">Review Sessions</div>
            <div class="category-count">2 active</div>
        </div>
    </div>
</div>

<!-- Today's Schedule -->
<div class="today-schedule">
    <h3>Today's Reminder Schedule</h3>
    <div class="schedule-timeline">
        <div class="timeline-item completed">
            <div class="time-marker">7:00 AM</div>
            <div class="reminder-content">
                <div class="reminder-title">Morning Study Session</div>
                <div class="reminder-description">Quantitative Aptitude - Time & Work</div>
                <div class="reminder-status">
                    <span class="status-badge completed">✓ Completed</span>
                    <span class="duration">45 min</span>
                </div>
            </div>
        </div>

        <div class="timeline-item completed">
            <div class="time-marker">8:00 AM</div>
            <div class="reminder-content">
                <div class="reminder-title">Break Time</div>
                <div class="reminder-description">Stretch and hydrate</div>
                <div class="reminder-status">
                    <span class="status-badge completed">✓ Completed</span>
                    <span class="duration">15 min</span>
                </div>
            </div>
        </div>

        <div class="timeline-item upcoming">
            <div class="time-marker current">8:30 AM</div>
            <div class="reminder-content">
                <div class="reminder-title">Current: Reasoning Ability</div>
                <div class="reminder-description">Blood Relations & Directions</div>
                <div class="reminder-status">
                    <span class="status-badge current">⏱ In Progress</span>
                    <span class="duration">60 min</span>
                </div>
                <div class="progress-bar">
                    <div class="progress" style="width: 35%"></div>
                </div>
            </div>
        </div>

        <div class="timeline-item pending">
            <div class="time-marker">9:30 AM</div>
            <div class="reminder-content">
                <div class="reminder-title">Quick Review</div>
                <div class="reminder-description">Yesterday's practice problems</div>
                <div class="reminder-status">
                    <span class="status-badge pending">⏰ Upcoming</span>
                    <span class="duration">20 min</span>
                </div>
            </div>
        </div>

        <div class="timeline-item pending">
            <div class="time-marker">10:00 AM</div>
            <div class="reminder-content">
                <div class="reminder-title">English Language</div>
                <div class="reminder-description">Reading Comprehension Practice</div>
                <div class="reminder-status">
                    <span class="status-badge pending">⏰ Upcoming</span>
                    <span class="duration">45 min</span>
                </div>
            </div>
        </div>

        <div class="timeline-item pending">
            <div class="time-marker">2:00 PM</div>
            <div class="reminder-content">
                <div class="reminder-title">Mock Test</div>
                <div class="reminder-description">Weekly IBPS PO Practice Test</div>
                <div class="reminder-status">
                    <span class="status-badge important">📝 Important</span>
                    <span class="duration">120 min</span>
                </div>
            </div>
        </div>

        <div class="timeline-item pending">
            <div class="time-marker">6:00 PM</div>
            <div class="reminder-content">
                <div class="reminder-title">Current Affairs</div>
                <div class="reminder-description">Daily news & banking updates</div>
                <div class="reminder-status">
                    <span class="status-badge pending">⏰ Upcoming</span>
                    <span class="duration">30 min</span>
                </div>
            </div>
        </div>

        <div class="timeline-item pending">
            <div class="time-marker">9:00 PM</div>
            <div class="reminder-content">
                <div class="reminder-title">Daily Reflection</div>
                <div class="reminder-description">Review progress & plan tomorrow</div>
                <div class="reminder-status">
                    <span class="status-badge pending">⏰ Upcoming</span>
                    <span class="duration">15 min</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Active Reminders Configuration -->
<div class="reminder-config">
    <h3>Active Reminders Configuration</h3>
    <div class="config-tabs">
        <button class="tab-btn active" onclick="showConfigTab('daily')">Daily</button>
        <button class="tab-btn" onclick="showConfigTab('weekly')">Weekly</button>
        <button class="tab-btn" onclick="showConfigTab('custom')">Custom</button>
    </div>

    <!-- Daily Reminders -->
    <div id="daily-config" class="config-content active">
        <div class="reminder-list">
            <div class="reminder-item">
                <div class="reminder-toggle">
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider"></span>
                    </label>
                </div>
                <div class="reminder-details">
                    <div class="reminder-name">Morning Study Start</div>
                    <div class="reminder-schedule">Daily at 7:00 AM</div>
                    <div class="reminder-type">Study Session</div>
                </div>
                <div class="reminder-actions">
                    <button class="action-btn edit" onclick="editReminder(1)">Edit</button>
                    <button class="action-btn delete" onclick="deleteReminder(1)">Delete</button>
                </div>
            </div>

            <div class="reminder-item">
                <div class="reminder-toggle">
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider"></span>
                    </label>
                </div>
                <div class="reminder-details">
                    <div class="reminder-name">Break Alert</div>
                    <div class="reminder-schedule">Every 45 minutes during study</div>
                    <div class="reminder-type">Health & Wellness</div>
                </div>
                <div class="reminder-actions">
                    <button class="action-btn edit" onclick="editReminder(2)">Edit</button>
                    <button class="action-btn delete" onclick="deleteReminder(2)">Delete</button>
                </div>
            </div>

            <div class="reminder-item">
                <div class="reminder-toggle">
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider"></span>
                    </label>
                </div>
                <div class="reminder-details">
                    <div class="reminder-name">Daily Quiz Challenge</div>
                    <div class="reminder-schedule">Daily at 4:00 PM</div>
                    <div class="reminder-type">Practice</div>
                </div>
                <div class="reminder-actions">
                    <button class="action-btn edit" onclick="editReminder(3)">Edit</button>
                    <button class="action-btn delete" onclick="deleteReminder(3)">Delete</button>
                </div>
            </div>

            <div class="reminder-item">
                <div class="reminder-toggle">
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider"></span>
                    </label>
                </div>
                <div class="reminder-details">
                    <div class="reminder-name">Evening Review</div>
                    <div class="reminder-schedule">Daily at 9:00 PM</div>
                    <div class="reminder-type">Review</div>
                </div>
                <div class="reminder-actions">
                    <button class="action-btn edit" onclick="editReminder(4)">Edit</button>
                    <button class="action-btn delete" onclick="deleteReminder(4)">Delete</button>
                </div>
            </div>
        </div>

        <button class="add-reminder-btn" onclick="addNewReminder()">
            + Add New Reminder
        </button>
    </div>

    <!-- Weekly Reminders -->
    <div id="weekly-config" class="config-content">
        <div class="reminder-list">
            <div class="reminder-item">
                <div class="reminder-toggle">
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider"></span>
                    </label>
                </div>
                <div class="reminder-details">
                    <div class="reminder-name">Weekly Mock Test</div>
                    <div class="reminder-schedule">Every Sunday at 2:00 PM</div>
                    <div class="reminder-type">Assessment</div>
                </div>
                <div class="reminder-actions">
                    <button class="action-btn edit" onclick="editReminder(5)">Edit</button>
                    <button class="action-btn delete" onclick="deleteReminder(5)">Delete</button>
                </div>
            </div>

            <div class="reminder-item">
                <div class="reminder-toggle">
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider"></span>
                    </label>
                </div>
                <div class="reminder-details">
                    <div class="reminder-name">Study Plan Review</div>
                    <div class="reminder-schedule">Every Monday at 8:00 AM</div>
                    <div class="reminder-type">Planning</div>
                </div>
                <div class="reminder-actions">
                    <button class="action-btn edit" onclick="editReminder(6)">Edit</button>
                    <button class="action-btn delete" onclick="deleteReminder(6)">Delete</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Custom Reminders -->
    <div id="custom-config" class="config-content">
        <div class="custom-reminder-form">
            <h4>Create Custom Reminder</h4>
            <form onsubmit="createCustomReminder(event)">
                <div class="form-group">
                    <label>Reminder Name</label>
                    <input type="text" id="customName" placeholder="e.g., Important Study Session" required>
                </div>
                <div class="form-group">
                    <label>Type</label>
                    <select id="customType">
                        <option value="study">Study Session</option>
                        <option value="break">Break</option>
                        <option value="review">Review</option>
                        <option value="test">Test/Quiz</option>
                        <option value="motivation">Motivation</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Schedule</label>
                    <div class="schedule-options">
                        <select id="scheduleType" onchange="updateScheduleOptions()">
                            <option value="daily">Daily</option>
                            <option value="weekly">Weekly</option>
                            <option value="specific">Specific Date</option>
                        </select>
                        <input type="time" id="customTime" value="09:00" required>
                        <input type="date" id="customDate" style="display: none;">
                    </div>
                </div>
                <div class="form-group">
                    <label>Message</label>
                    <textarea id="customMessage" placeholder="Reminder message..." rows="3"></textarea>
                </div>
                <button type="submit" class="submit-btn">Create Reminder</button>
            </form>
        </div>
    </div>
</div>

<!-- Smart Features -->
<div class="smart-features">
    <h3>Smart Reminder Features</h3>
    <div class="features-grid">
        <div class="feature-card">
            <div class="feature-icon">🤖</div>
            <div class="feature-title">AI-Powered Timing</div>
            <div class="feature-description">Reminders adapt based on your study patterns and optimal learning times</div>
            <div class="feature-status">Active</div>
        </div>

        <div class="feature-card">
            <div class="feature-icon">📊</div>
            <div class="feature-title">Performance-Based</div>
            <div class="feature-description">More reminders for weaker subjects, fewer for mastered topics</div>
            <div class="feature-status">Active</div>
        </div>

        <div class="feature-card">
            <div class="feature-icon">🔔</div>
            <div class="feature-title">Multi-Channel</div>
            <div class="feature-description">Push notifications, email, and in-app alerts</div>
            <div class="feature-status">Configured</div>
        </div>

        <div class="feature-card">
            <div class="feature-icon">🎯</div>
            <div class="feature-title">Goal-Oriented</div>
            <div class="feature-description">Reminders aligned with your exam preparation goals</div>
            <div class="feature-status">Active</div>
        </div>

        <div class="feature-card">
            <div class="feature-icon">⚡</div>
            <div class="feature-title">Priority-Based</div>
            <div class="feature-description">Important reminders get higher priority and multiple notifications</div>
            <div class="feature-status">Active</div>
        </div>

        <div class="feature-card">
            <div class="feature-icon">📈</div>
            <div class="feature-title">Progress Tracking</div>
            <div class="feature-description">Track reminder completion rates and study consistency</div>
            <div class="feature-status">Active</div>
        </div>
    </div>
</div>

<!-- Analytics -->
<div class="reminder-analytics">
    <h3>Reminder Analytics</h3>
    <div class="analytics-grid">
        <div class="chart-container">
            <h4>Weekly Completion Rate</h4>
            <canvas id="completionChart"></canvas>
        </div>

        <div class="stats-container">
            <h4>Performance Metrics</h4>
            <div class="metric-list">
                <div class="metric-item">
                    <div class="metric-label">This Week</div>
                    <div class="metric-value">92%</div>
                    <div class="metric-trend positive">↑ 5%</div>
                </div>
                <div class="metric-item">
                    <div class="metric-label">Last Week</div>
                    <div class="metric-value">87%</div>
                    <div class="metric-trend negative">↓ 3%</div>
                </div>
                <div class="metric-item">
                    <div class="metric-label">Monthly Average</div>
                    <div class="metric-value">89%</div>
                    <div class="metric-trend positive">↑ 7%</div>
                </div>
                <div class="metric-item">
                    <div class="metric-label">Best Day</div>
                    <div class="metric-value">Monday</div>
                    <div class="metric-trend">98% completion</div>
                </div>
            </div>
        </div>
    </div>

    <div class="insights-section">
        <h4>Study Pattern Insights</h4>
        <div class="insights-list">
            <div class="insight-item">
                <div class="insight-icon">📈</div>
                <div class="insight-text">Most productive study time: 7:00 AM - 9:00 AM</div>
            </div>
            <div class="insight-item">
                <div class="insight-icon">⚡</div>
                <div class="insight-text">Average session duration: 52 minutes</div>
            </div>
            <div class="insight-item">
                <div class="insight-icon">🎯</div>
                <div class="insight-text">Best reminder response time: 8:30 AM</div>
            </div>
            <div class="insight-item">
                <div class="insight-icon">💪</div>
                <div class="insight-text">Longest study streak: 23 days (personal best!)</div>
            </div>
        </div>
    </div>
</div>