Time Management Tools

    <div class="timer-display">
        <div class="timer-main" id="sessionTimer">25:00</div>
        <div class="timer-subtitle">Pomodoro Session</div>
    </div>

    <div class="session-progress">
        <div class="progress-bar">
            <div class="progress" style="width: 60%"></div>
        </div>
        <div class="progress-text">15 minutes completed</div>
    </div>

    <div class="session-stats">
        <div class="stat-item">
            <div class="stat-label">Sessions Today</div>
            <div class="stat-value">3</div>
        </div>
        <div class="stat-item">
            <div class="stat-label">Total Focus Time</div>
            <div class="stat-value">1h 25m</div>
        </div>
        <div class="stat-item">
            <div class="stat-label">Average Duration</div>
            <div class="stat-value">28m</div>
        </div>
    </div>
</div>

<!-- Study Schedule -->
<div class="study-schedule">
    <h3>Today's Study Schedule</h3>
    <div class="schedule-tabs">
        <button class="tab-btn active" onclick="showSchedule('today')">Today</button>
        <button class="tab-btn" onclick="showSchedule('week')">Week</button>
        <button class="tab-btn" onclick="showSchedule('custom')">Custom</button>
    </div>

    <div id="today-schedule" class="schedule-content active">
        <div class="timeline">
            <div class="time-slot completed">
                <div class="time-slot-time">7:00 AM</div>
                <div class="time-slot-content">
                    <div class="subject-tag quantitative">Quantitative</div>
                    <div class="topic-name">Time & Work Problems</div>
                    <div class="duration">45 min</div>
                    <div class="status-badge completed">✓ Completed</div>
                </div>
            </div>

            <div class="time-slot completed">
                <div class="time-slot-time">8:00 AM</div>
                <div class="time-slot-content">
                    <div class="subject-tag reasoning">Reasoning</div>
                    <div class="topic-name">Blood Relations</div>
                    <div class="duration">30 min</div>
                    <div class="status-badge completed">✓ Completed</div>
                </div>
            </div>

            <div class="time-slot current">
                <div class="time-slot-time">9:00 AM</div>
                <div class="time-slot-content">
                    <div class="subject-tag english">English</div>
                    <div class="topic-name">Reading Comprehension</div>
                    <div class="duration">60 min</div>
                    <div class="status-badge current">⏱ In Progress</div>
                    <div class="slot-progress">
                        <div class="progress-bar">
                            <div class="progress" style="width: 40%"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="time-slot upcoming">
                <div class="time-slot-time">10:30 AM</div>
                <div class="time-slot-content">
                    <div class="subject-tag awareness">Awareness</div>
                    <div class="topic-name">Current Affairs</div>
                    <div class="duration">30 min</div>
                    <div class="status-badge upcoming">⏰ Upcoming</div>
                </div>
            </div>

            <div class="time-slot upcoming">
                <div class="time-slot-time">2:00 PM</div>
                <div class="time-slot-content">
                    <div class="subject-tag test">Mock Test</div>
                    <div class="topic-name">Full-Length Practice</div>
                    <div class="duration">120 min</div>
                    <div class="status-badge important">📝 Important</div>
                </div>
            </div>

            <div class="time-slot upcoming">
                <div class="time-slot-time">6:00 PM</div>
                <div class="time-slot-content">
                    <div class="subject-tag review">Review</div>
                    <div class="topic-name">Daily Revision</div>
                    <div class="duration">45 min</div>
                    <div class="status-badge upcoming">⏰ Upcoming</div>
                </div>
            </div>
        </div>
    </div>

    <div id="week-schedule" class="schedule-content">
        <div class="week-view">
            <div class="week-grid">
                <div class="day-header">Mon</div>
                <div class="day-header">Tue</div>
                <div class="day-header">Wed</div>
                <div class="day-header">Thu</div>
                <div class="day-header">Fri</div>
                <div class="day-header">Sat</div>
                <div class="day-header">Sun</div>

                <div class="day-cell completed">
                    <div class="day-summary">
                        <div class="day-date">Oct 21</div>
                        <div class="day-study-time">3h 45m</div>
                        <div class="day-sessions">5 sessions</div>
                    </div>
                </div>

                <div class="day-cell completed">
                    <div class="day-summary">
                        <div class="day-date">Oct 22</div>
                        <div class="day-study-time">4h 15m</div>
                        <div class="day-sessions">6 sessions</div>
                    </div>
                </div>

                <div class="day-cell current">
                    <div class="day-summary">
                        <div class="day-date">Oct 23</div>
                        <div class="day-study-time">2h 30m</div>
                        <div class="day-sessions">3 sessions (in progress)</div>
                    </div>
                </div>

                <div class="day-cell planned">
                    <div class="day-summary">
                        <div class="day-date">Oct 24</div>
                        <div class="day-study-time">4h 00m</div>
                        <div class="day-sessions">5 sessions planned</div>
                    </div>
                </div>

                <div class="day-cell planned">
                    <div class="day-summary">
                        <div class="day-date">Oct 25</div>
                        <div class="day-study-time">3h 30m</div>
                        <div class="day-sessions">4 sessions planned</div>
                    </div>
                </div>

                <div class="day-cell weekend">
                    <div class="day-summary">
                        <div class="day-date">Oct 26</div>
                        <div class="day-study-time">2h 00m</div>
                        <div class="day-sessions">3 sessions planned</div>
                    </div>
                </div>

                <div class="day-cell weekend">
                    <div class="day-summary">
                        <div class="day-date">Oct 27</div>
                        <div class="day-study-time">1h 30m</div>
                        <div class="day-sessions">2 sessions planned</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="custom-schedule" class="schedule-content">
        <div class="custom-schedule-form">
            <h4>Create Custom Schedule</h4>
            <form onsubmit="createCustomSchedule(event)">
                <div class="form-group">
                    <label>Schedule Name</label>
                    <input type="text" id="scheduleName" placeholder="e.g., Weekend Study Plan" required>
                </div>

                <div class="form-group">
                    <label>Time Slots</label>
                    <div id="timeSlots">
                        <div class="time-slot-input">
                            <input type="time" class="start-time" value="09:00" required>
                            <input type="time" class="end-time" value="10:30" required>
                            <select class="subject-select">
                                <option value="quantitative">Quantitative</option>
                                <option value="reasoning">Reasoning</option>
                                <option value="english">English</option>
                                <option value="awareness">Awareness</option>
                                <option value="test">Mock Test</option>
                                <option value="review">Review</option>
                            </select>
                            <input type="text" class="topic-input" placeholder="Topic name">
                            <button type="button" class="remove-slot" onclick="removeTimeSlot(this)">×</button>
                        </div>
                    </div>
                    <button type="button" class="add-slot-btn" onclick="addTimeSlot()">+ Add Time Slot</button>
                </div>

                <div class="form-group">
                    <label>Repeat</label>
                    <select id="repeatOption">
                        <option value="once">Once</option>
                        <option value="daily">Daily</option>
                        <option value="weekly">Weekly</option>
                        <option value="weekdays">Weekdays</option>
                        <option value="weekends">Weekends</option>
                    </select>
                </div>

                <button type="submit" class="submit-btn">Create Schedule</button>
            </form>
        </div>
    </div>
</div>

<!-- Focus Tools -->
<div class="focus-tools">
    <h3>Focus Tools</h3>
    <div class="tools-grid">
        <div class="tool-card">
            <div class="tool-icon">🍅</div>
            <div class="tool-title">Pomodoro Timer</div>
            <div class="tool-description">25 min focus, 5 min break</div>
            <div class="tool-settings">
                <div class="setting-row">
                    <label>Focus Time</label>
                    <input type="number" value="25" min="1" max="60" id="focusTime">
                </div>
                <div class="setting-row">
                    <label>Break Time</label>
                    <input type="number" value="5" min="1" max="30" id="breakTime">
                </div>
            </div>
            <button class="tool-btn" onclick="startPomodoro()">Start Pomodoro</button>
        </div>

        <div class="tool-card">
            <div class="tool-icon">🎯</div>
            <div class="tool-title">Deep Work</div>
            <div class="tool-description">90 min uninterrupted study</div>
            <div class="tool-settings">
                <div class="setting-row">
                    <label>Duration</label>
                    <select id="deepWorkDuration">
                        <option value="60">60 minutes</option>
                        <option value="90" selected>90 minutes</option>
                        <option value="120">120 minutes</option>
                    </select>
                </div>
            </div>
            <button class="tool-btn" onclick="startDeepWork()">Start Deep Work</button>
        </div>

        <div class="tool-card">
            <div class="tool-icon">⏰</div>
            <div class="tool-title">Custom Timer</div>
            <div class="tool-description">Set your own study duration</div>
            <div class="tool-settings">
                <div class="setting-row">
                    <label>Hours</label>
                    <input type="number" value="0" min="0" max="8" id="customHours">
                </div>
                <div class="setting-row">
                    <label>Minutes</label>
                    <input type="number" value="30" min="0" max="59" id="customMinutes">
                </div>
            </div>
            <button class="tool-btn" onclick="startCustomTimer()">Start Timer</button>
        </div>

        <div class="tool-card">
            <div class="tool-icon">🔕</div>
            <div class="tool-title">Focus Mode</div>
            <div class="tool-description">Block distractions & notifications</div>
            <div class="tool-settings">
                <div class="setting-row">
                    <label>Block Sites</label>
                    <input type="checkbox" id="blockSites">
                </div>
                <div class="setting-row">
                    <label>Silent Mode</label>
                    <input type="checkbox" id="silentMode">
                </div>
            </div>
            <button class="tool-btn" onclick="enableFocusMode()">Enable Focus</button>
        </div>
    </div>
</div>

<!-- Time Analytics -->
<div class="time-analytics">
    <h3>Time Analytics</h3>
    <div class="analytics-grid">
        <div class="chart-container">
            <h4>Weekly Study Time</h4>
            <canvas id="weeklyChart"></canvas>
        </div>

        <div class="stats-container">
            <h4>Productivity Stats</h4>
            <div class="stat-item">
                <div class="stat-label">Average Daily Study</div>
                <div class="stat-value">3h 45m</div>
                <div class="stat-change positive">↑ 15m</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">Peak Study Time</div>
                <div class="stat-value">9:00 AM - 11:00 AM</div>
                <div class="stat-detail">Most productive hours</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">Focus Efficiency</div>
                <div class="stat-value">87%</div>
                <div class="stat-change positive">↑ 5%</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">Goal Completion</div>
                <div class="stat-value">92%</div>
                <div class="stat-change positive">↑ 3%</div>
            </div>
        </div>
    </div>

    <div class="subject-time-breakdown">
        <h4>Subject Time Distribution</h4>
        <div class="subject-chart">
            <canvas id="subjectChart"></canvas>
        </div>
    </div>
</div>

<!-- Study Goals -->
<div class="study-goals">
    <h3>Study Goals</h3>
    <div class="goals-overview">
        <div class="goal-summary">
            <div class="goal-stat">
                <div class="goal-value">85%</div>
                <div class="goal-label">Daily Goal Completion</div>
            </div>
            <div class="goal-stat">
                <div class="goal-value">4.2h</div>
                <div class="goal-label">Average Study Time</div>
            </div>
            <div class="goal-stat">
                <div class="goal-value">28</div>
                <div class="goal-label">Consecutive Days</div>
            </div>
        </div>

        <div class="active-goals">
            <h4>Active Goals</h4>
            <div class="goal-list">
                <div class="goal-item">
                    <div class="goal-progress">
                        <div class="progress-bar">
                            <div class="progress" style="width: 75%"></div>
                        </div>
                        <div class="goal-info">
                            <div class="goal-name">Daily 4 Hours</div>
                            <div class="goal-detail">3h 15m / 4h</div>
                        </div>
                    </div>
                </div>

                <div class="goal-item">
                    <div class="goal-progress">
                        <div class="progress-bar">
                            <div class="progress" style="width: 90%"></div>
                        </div>
                        <div class="goal-info">
                            <div class="goal-name">Complete 5 Sessions</div>
                            <div class="goal-detail">4 / 5 sessions</div>
                        </div>
                    </div>
                </div>

                <div class="goal-item">
                    <div class="goal-progress">
                        <div class="progress-bar">
                            <div class="progress" style="width: 60%"></div>
                        </div>
                        <div class="goal-info">
                            <div class="goal-name">Focus 80%+ Efficiency</div>
                            <div class="goal-detail">Current: 87%</div>
                        </div>
                    </div>
                </div>
            </div>

            <button class="add-goal-btn" onclick="addStudyGoal()">+ Add New Goal</button>
        </div>
    </div>
</div>