<?php require_once __DIR__ . '/../../src/bootstrap.php'; ?>
<?php require_once __DIR__ . '/../../views/layout/header.php'; ?>
<script src="<?= \Tshen\asset('dashboard.js') ?>"></script>

<div class="modern-dashboard">
    <!-- Sidebar -->
    <div class="dashboard-sidebar">
        <div class="user-profile">
            <div class="avatar">
                <img src="<?= \Tshen\asset('icon.png') ?>" alt="Profile Picture">
    </div>
    <div class="user-info">
      <h3><?= htmlspecialchars($_SESSION['user']['name'] ?? 'User') ?></h3>
      
    </div>
  </div>
  
        <nav class="sidebar-nav">
    <ul>
    <li class="<?= (strpos($_SERVER['REQUEST_URI'], '/dashboard') === false && strpos($_SERVER['REQUEST_URI'], '/home') !== false) ? 'active' : '' ?>">
    <a href="<?= \Tshen\url('/') ?>"><span class="icon">🏠</span> Home</a>
      </li>

      <?php if (!empty($_SESSION['user'])): ?>
                <li class="<?= (strpos($_SERVER['REQUEST_URI'], '/dashboard') !== false) ? 'active' : '' ?>">
                <a href="<?= \Tshen\url('/dashboard') ?>"><span class="icon">📅</span> Bookings</a>
      </li>
      <?php endif; ?>

                <li class="<?= (strpos($_SERVER['REQUEST_URI'], '/studios') !== false) ? 'active' : '' ?>">
                <a href="<?= \Tshen\url('/studio') ?>"><span class="icon">🏋️</span> Studios</a>
      </li>

    <li><a href="<?= \Tshen\url('/store') ?>" class="<?= $activePage === 'store' ? 'active' : '' ?>"><span class="nav-icon">🛒</span> Store</a></li>
    <li><a href="<?= \Tshen\url('/contact') ?>" class="<?= $activePage === 'contact' ? 'active' : '' ?>"><span class="nav-icon">📞</span> Contact</a></li>
    <li><a href="<?= \Tshen\url('/about') ?>" class="<?= $activePage === 'about' ? 'active' : '' ?>"><span class="nav-icon">ℹ️</span> How It Works</a></li>
    <li><a href="<?= \Tshen\url('/profile') ?>" class="<?= $activePage === 'profile' ? 'active' : '' ?>"><span class="nav-icon">👤</span> Profile</a></li>
    </ul>
  </nav>
        <div class="sign-out">
            <a href="<?= \Tshen\url('/logout') ?>" class="signout">Sign out</a>
        </div>
    </div>

    <!-- Main Content -->
    <div class="dashboard-content">
        <!-- Search Bar and Header -->
        <div class="dashboard-header">
            <div class="search-container">
                <input type="text" class="search-input" placeholder="Search...">
            </div>
            <div class="header-actions">
            
                <a href="#" class="header-icon">⋯</a>
            </div>
        </div>

        <!-- KPI Cards -->
        <div class="kpi-container">
            <div class="kpi-card">
                <div class="kpi-header">Stats</div>
                <div class="kpi-value"><?= $credits ?? '0' ?></div>
                <div class="kpi-subtitle">visits per day</div>
            </div>
            <div class="kpi-card">
                <div class="kpi-header">Progress</div>
                <div class="kpi-value"><?= count($pastBookings ?? []) * 10 + 1234 ?></div>
                <div class="kpi-subtitle">total points</div>
            </div>
            <div class="kpi-card">
                <div class="kpi-header">
                    <span>CLASSES</span>
                </div>
                <div class="kpi-value"><?= count($upcomingBookings ?? []) ?></div>
                <div class="kpi-subtitle">upcoming</div>
            </div>
        </div>

        <!-- Chart Container -->
        <div class="chart-container">
            <!-- Bar Chart -->
            <div class="chart-card">
                <div class="chart-header">
                    <div class="chart-title">Performance Metrics</div>
                </div>
                <div class="progress-bars">
                    <div class="progress-item">
                        <div class="progress-label">
                            <span>Metric 1</span>
                            <span>75%</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-fill fill-pink"></div>
                        </div>
                    </div>
                    <div class="progress-item">
                        <div class="progress-label">
                            <span>Metric 2</span>
                            <span>45%</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-fill fill-yellow"></div>
                        </div>
                    </div>
                    <div class="progress-item">
                        <div class="progress-label">
                            <span>Metric 3</span>
                            <span>60%</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-fill fill-orange"></div>
                        </div>
                    </div>
                </div>
                
                <div class="donut-container">
                    <div class="donut-chart-wrapper">
                        <div class="donut-chart">
                            <div class="donut-label">65%</div>
                        </div>
                        <div class="donut-title">A</div>
                    </div>
                    <div class="donut-chart-wrapper">
                        <div class="donut-chart donut-second">
                            <div class="donut-label">35%</div>
                        </div>
                        <div class="donut-title">B</div>
                    </div>
                </div>
            </div>

            <!-- Line Chart -->
            <div class="chart-card">
                <div class="chart-header">
                    <div class="chart-title">Performance Over Time</div>
                    <div class="chart-legend">
                        <div class="legend-item">
                            <div class="legend-color legend-pink"></div>
                            <span>Metric A</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color legend-purple"></div>
                            <span>Metric B</span>
                        </div>
                    </div>
                </div>
                <div class="bar-chart-container">
                    <div class="bar-chart-grid">
                        <div class="grid-line"></div>
                        <div class="grid-line"></div>
                        <div class="grid-line"></div>
                        <div class="grid-line"></div>
                        <div class="grid-line"></div>
                    </div>
                    <div class="bar-chart">
                        <div class="bar-group">
                            <div class="bar bar-1" style="height: 65%;" data-value="65"></div>
                            <div class="bar bar-2" style="height: 40%;" data-value="40"></div>
                            <div class="bar-label">Mon</div>
                        </div>
                        <div class="bar-group">
                            <div class="bar bar-1" style="height: 75%;" data-value="75"></div>
                            <div class="bar bar-2" style="height: 55%;" data-value="55"></div>
                            <div class="bar-label">Tue</div>
                        </div>
                        <div class="bar-group">
                            <div class="bar bar-1" style="height: 85%;" data-value="85"></div>
                            <div class="bar bar-2" style="height: 65%;" data-value="65"></div>
                            <div class="bar-label">Wed</div>
                        </div>
                        <div class="bar-group">
                            <div class="bar bar-1" style="height: 55%;" data-value="55"></div>
                            <div class="bar bar-2" style="height: 45%;" data-value="45"></div>
                            <div class="bar-label">Thu</div>
                        </div>
                        <div class="bar-group">
                            <div class="bar bar-1" style="height: 70%;" data-value="70"></div>
                            <div class="bar bar-2" style="height: 50%;" data-value="50"></div>
                            <div class="bar-label">Fri</div>
                        </div>
                        <div class="bar-group">
                            <div class="bar bar-1" style="height: 60%;" data-value="60"></div>
                            <div class="bar bar-2" style="height: 35%;" data-value="35"></div>
                            <div class="bar-label">Sat</div>
                        </div>
                        <div class="bar-group">
                            <div class="bar bar-1" style="height: 45%;" data-value="45"></div>
                            <div class="bar bar-2" style="height: 25%;" data-value="25"></div>
                            <div class="bar-label">Sun</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Calendar Widget -->
        <div class="calendar-widget">
            <div class="calendar-header">
                <div class="calendar-title">Calendar</div>
                <div class="calendar-nav">
                    <div class="calendar-view-selector">
                        <button class="view-btn active" data-view="day">Day</button>
                        <button class="view-btn" data-view="week">Week</button>
                        <button class="view-btn" data-view="month">Month</button>
                    </div>
                    <div class="calendar-controls">
                        <button class="control-btn prev-btn">&lt;</button>
                        <div class="current-date" id="current-date">
                            <?php echo date('F Y'); ?>
                        </div>
                        <button class="control-btn next-btn">&gt;</button>
                    </div>
                </div>
            </div>
            
            <!-- Month View (Default) -->
            <div class="calendar-view month-view">
                <!-- Day headers -->
                <div class="calendar-day day-header">Sun</div>
                <div class="calendar-day day-header">Mon</div>
                <div class="calendar-day day-header">Tue</div>
                <div class="calendar-day day-header">Wed</div>
                <div class="calendar-day day-header">Thu</div>
                <div class="calendar-day day-header">Fri</div>
                <div class="calendar-day day-header">Sat</div>
                
                <!-- Calendar days -->
                <?php
                // Get current month information
                $currentMonth = date('n');
                $currentYear = date('Y');
                $currentDay = date('j');
                
                // Get the first day of the month
                $firstDayOfMonth = mktime(0, 0, 0, $currentMonth, 1, $currentYear);
                $numberDaysInMonth = date('t', $firstDayOfMonth);
                
                // What day of the week the first day falls on (0 = Sunday, 6 = Saturday)
                $dayOfWeek = date('w', $firstDayOfMonth);
                
                // Create blank days at start of calendar
                for ($i = 0; $i < $dayOfWeek; $i++) {
                    echo '<div class="calendar-day day-number day-blank"></div>';
                }
                
                // Display the days of the month
                for ($day = 1; $day <= $numberDaysInMonth; $day++) {
                    $class = 'calendar-day day-number';
                    
                    // Highlight current day
                    if ($day == $currentDay) {
                        $class .= ' day-current';
                    }
                    
                    // Add sample events (you can replace with real events)
                    $eventHtml = '';
                    if ($day % 7 == 0 || $day % 11 == 0) {
                        $class .= ' day-event';
                        $eventHtml = '<div class="event-indicator"></div>';
                    }
                    
                    echo "<div class=\"$class\">$day$eventHtml</div>";
                }
                
                // Fill in any remaining slots to complete the grid
                $totalCells = 42; // 6 rows of 7 days
                $remainingCells = $totalCells - ($dayOfWeek + $numberDaysInMonth);
                for ($i = 0; $i < $remainingCells; $i++) {
                    echo '<div class="calendar-day day-number day-blank"></div>';
                }
                ?>
            </div>
            
            <!-- Week View (Hidden by default) -->
            <div class="calendar-view week-view" style="display: none;">
                <div class="week-header">
                    <?php
                    // Get current day and calculate the start of the week (Monday)
                    $today = new DateTime();
                    $dayOfWeek = $today->format('N'); // 1 (Monday) to 7 (Sunday)
                    
                    // Calculate Monday of this week
                    $monday = clone $today;
                    $monday->modify('-' . ($dayOfWeek - 1) . ' days');
                    
                    // Generate the week days
                    $weekdays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
                    $currentDate = clone $monday;
                    
                    foreach ($weekdays as $index => $dayName) {
                        $isToday = $currentDate->format('Y-m-d') === $today->format('Y-m-d');
                        $class = $isToday ? 'week-day today' : 'week-day';
                        
                        echo '<div class="' . $class . '">';
                        echo '<div class="day-name">' . $dayName . '</div>';
                        echo '<div class="day-date">' . $currentDate->format('M j') . '</div>';
                        echo '</div>';
                        
                        $currentDate->modify('+1 day');
                    }
                    ?>
                </div>
                <div class="week-events">
                    <!-- Sample events -->
                    <div class="week-event" style="grid-column: 1; grid-row: 1;">
                        <div class="event-time">9:00 AM</div>
                        <div class="event-title">HIIT Class</div>
                    </div>
                    <div class="week-event" style="grid-column: 3; grid-row: 2;">
                        <div class="event-time">2:00 PM</div>
                        <div class="event-title">Yoga Session</div>
                    </div>
                    <div class="week-event" style="grid-column: 5; grid-row: 3;">
                        <div class="event-time">5:30 PM</div>
                        <div class="event-title">Spin Class</div>
                    </div>
                </div>
            </div>
            
            <!-- Day View (Hidden by default) -->
            <div class="calendar-view day-view" style="display: none;">
                <div class="day-header">
                    <div class="day-title"><?php echo date('l, F j'); ?></div>
                </div>
                <div class="day-schedule">
                    <div class="time-slot">
                        <div class="time-label">9:00 AM</div>
                        <div class="time-event">
                            <div class="event-title">HIIT Class</div>
                            <div class="event-location">Central London</div>
                        </div>
                    </div>
                    <div class="time-slot">
                        <div class="time-label">12:00 PM</div>
                        <div class="time-event">
                            <div class="event-title">Lunch Break</div>
                        </div>
                    </div>
                    <div class="time-slot">
                        <div class="time-label">5:30 PM</div>
                        <div class="time-event">
                            <div class="event-title">Yoga Session</div>
                            <div class="event-location">East London</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            // Calendar view switching functionality
            document.addEventListener('DOMContentLoaded', function() {
                const viewButtons = document.querySelectorAll('.view-btn');
                const calendarViews = document.querySelectorAll('.calendar-view');
                
                viewButtons.forEach(button => {
                    button.addEventListener('click', function() {
                        // Remove active class from all buttons
                        viewButtons.forEach(btn => btn.classList.remove('active'));
                        
                        // Add active class to clicked button
                        this.classList.add('active');
                        
                        // Hide all views
                        calendarViews.forEach(view => view.style.display = 'none');
                        
                        // Show selected view
                        const viewType = this.getAttribute('data-view');
                        document.querySelector(`.${viewType}-view`).style.display = 'grid';
                        
                        // Special case for day view
                        if (viewType === 'day') {
                            document.querySelector('.day-view').style.display = 'block';
                        }
                    });
                });
            });
        </script>

        <!-- Charts Section -->
        <div class="charts-section" style="display: none;">
            <!-- Bar Chart -->
            <div class="chart-card">
                <div class="chart-legend">
                    <span class="legend-item">● Classes Booked</span>
                    <span class="legend-item">● Credits Used</span>
                    <span class="legend-item">● Attendance</span>
                </div>
                <div class="chart-body">
                    <!-- Placeholder for line chart -->
                    <div class="line-chart-placeholder"></div>
                </div>
            </div>

            <!-- Progress and Calendar -->
            <div class="side-widgets">
                <div class="chart-card">
                    <div class="donut-chart">
                        <div class="donut-inner">
                            <span class="donut-percent">45</span>
                            <span class="donut-label">%</span>
                        </div>
                    </div>
                    <div class="chart-info">
                        <p>Attendance Rate</p>
                        <p>Monthly Progress</p>
                        <p>Fitness Goals</p>
                    </div>
                    <div class="chart-actions">
                        <a href="#" class="view-more">View More</a>
                    </div>
                </div>

                <div class="chart-card">
                    <div class="calendar">
                        <div class="calendar-header">
                            <div class="month-nav">◀</div>
                            <div class="current-month">June 2023</div>
                            <div class="month-nav">▶</div>
                        </div>
                        <div class="weekdays">
                            <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>
                        </div>
                        <div class="calendar-days">
                            <div class="day prev-month">28</div>
                            <div class="day prev-month">29</div>
                            <div class="day prev-month">30</div>
                            <div class="day prev-month">31</div>
                            <div class="day">1</div>
                            <div class="day">2</div>
                            <div class="day">3</div>
                            <div class="day">4</div>
                            <div class="day">5</div>
                            <div class="day">6</div>
                            <div class="day">7</div>
                            <div class="day">8</div>
                            <div class="day">9</div>
                            <div class="day">10</div>
                            <div class="day">11</div>
                            <div class="day">12</div>
                            <div class="day">13</div>
                            <div class="day">14</div>
                            <div class="day current-day">15</div>
                            <div class="day">16</div>
                            <div class="day">17</div>
                            <div class="day">18</div>
                            <div class="day">19</div>
                            <div class="day">20</div>
                            <div class="day">21</div>
                            <div class="day">22</div>
                            <div class="day">23</div>
                            <div class="day">24</div>
                            <div class="day">25</div>
                            <div class="day">26</div>
                            <div class="day">27</div>
                            <div class="day">28</div>
                            <div class="day">29</div>
                            <div class="day">30</div>
                            <div class="day next-month">1</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
  </div>
</div>

  <div class="bookings-section">
    <h3>My Bookings</h3>
    
    <div class="booking-tabs">
      <button class="tab-btn active" data-tab="upcoming">Upcoming</button>
      <button class="tab-btn" data-tab="past">Past</button>
    </div>
    
    <div class="bookings-list" id="upcoming-bookings">
      <?php if (empty($bookings)): ?>
        <p class="no-bookings">You have no upcoming bookings.</p>
      <?php else: ?>
        <table class="bookings-table">
          <thead>
            <tr>
              <th>Class</th>
              <th>Location</th>
              <th>Date & Time</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            <?php foreach ($bookings as $booking): ?>
              <tr>
                <td><?= htmlspecialchars($booking['class_title'] ?? 'Class') ?></td>
                <td><?= htmlspecialchars($booking['studio_name'] ?? 'Studio') ?></td>
                <td><?= htmlspecialchars($booking['date'] ?? 'Date') ?> at <?= htmlspecialchars($booking['time'] ?? 'Time') ?></td>
                <td>
                                    <form method="post" action="<?= \Tshen\url('/dashboard/cancel') ?>">
                    <?= \Tshen\csrf_field() ?>
                    <input type="hidden" name="booking_id" value="<?= (int)($booking['id'] ?? 0) ?>" />
                    <button type="submit" class="cancel-btn">Cancel</button>
                  </form>
                </td>
              </tr>
            <?php endforeach; ?>
          </tbody>
        </table>
      <?php endif; ?>
    </div>
    
    <div class="bookings-list hidden" id="past-bookings">
      <!-- Past bookings will be loaded here -->
      <p class="no-bookings">No past bookings to display.</p>
    </div>
  </div>
</div>