<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#667eea">
    <title>All Notes - <?php echo APP_NAME; ?></title>
    
    <link rel="manifest" href="<?php echo URL_PATH; ?>/manifest.json">
    <link rel="icon" type="image/png" href="<?php echo URL_PATH; ?>/images/icon-192.png">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="<?php echo URL_PATH; ?>/css/pwa.css">
</head>
<body>
    <?php 
    $authController = new AuthController();
    $currentUser = $authController->getCurrentUser();
    $username = $currentUser ? $currentUser->username : 'User';
    ?>
    <header class="pwa-header">
        <div class="container-fluid">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <small class="text-white-50 d-block" style="font-size: 0.75rem; margin-bottom: -2px;"><?php echo htmlspecialchars($username); ?></small>
                    <h1 class="header-title mb-0" style="font-size: 1.25rem;">
                        <i class="bi bi-journal-text me-2"></i>
                        All Notes
                    </h1>
                </div>
                <button class="btn-icon" id="menuBtn">
                    <i class="bi bi-list"></i>
                </button>
            </div>
        </div>
    </header>

    <main class="pwa-content">
        <div class="container-fluid">
            <?php if (!empty($notes)): ?>
                <div class="cards-grid">
                    <?php foreach ($notes as $note): ?>
                        <div class="note-card">
                            <?php if (!empty($note['image_path'])): ?>
                                <?php 
                                // Check if image_path is JSON array (multiple images) or single path
                                $images = json_decode($note['image_path'], true);
                                if (!is_array($images)) {
                                    $images = [$note['image_path']]; // Convert single image to array
                                }
                                ?>
                                <div class="note-image">
                                    <?php if (count($images) === 1): ?>
                                        <!-- Single image -->
                                        <img src="<?php echo URL_PATH; ?>/uploads/<?php echo htmlspecialchars($images[0]); ?>" 
                                             alt="<?php echo htmlspecialchars($note['title']); ?>"
                                             style="width: 100%; height: 200px; object-fit: cover; border-radius: 8px 8px 0 0;">
                                    <?php else: ?>
                                        <!-- Multiple images - show grid -->
                                        <div class="row g-1 p-2">
                                            <?php foreach ($images as $index => $imagePath): ?>
                                                <?php if ($index < 4): // Show max 4 images ?>
                                                    <div class="col-6">
                                                        <img src="<?php echo URL_PATH; ?>/uploads/<?php echo htmlspecialchars($imagePath); ?>" 
                                                             alt="<?php echo htmlspecialchars($note['title']); ?>"
                                                             style="width: 100%; height: 100px; object-fit: cover; border-radius: 4px;">
                                                    </div>
                                                <?php endif; ?>
                                            <?php endforeach; ?>
                                            <?php if (count($images) > 4): ?>
                                                <div class="col-12 text-center mt-1">
                                                    <small class="text-muted">+<?php echo count($images) - 4; ?> more</small>
                                                </div>
                                            <?php endif; ?>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            <?php endif; ?>
                            
                            <div class="note-content">
                                <h3 class="note-title"><?php echo htmlspecialchars($note['title']); ?></h3>
                                
                                <div class="note-meta">
                                    <span class="badge <?php echo $note['note_type'] === 'single' ? 'bg-info' : 'bg-success'; ?>">
                                        <i class="bi bi-<?php echo $note['note_type'] === 'single' ? 'calendar-event' : 'arrow-repeat'; ?> me-1"></i>
                                        <?php echo ucfirst($note['note_type']); ?>
                                    </span>
                                    <span class="note-date">
                                        <i class="bi bi-calendar3 me-1"></i>
                                        <?php echo date('M j, Y', strtotime($note['reminder_date'])); ?>
                                    </span>
                                </div>
                                
                                <?php if (!empty($note['content'])): ?>
                                    <p class="note-description"><?php echo nl2br(htmlspecialchars($note['content'])); ?></p>
                                <?php endif; ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            <?php else: ?>
                <div class="empty-state">
                    <div class="empty-icon">
                        <i class="bi bi-journal-x"></i>
                    </div>
                    <h3 class="empty-title">No Notes Yet</h3>
                    <p class="empty-text">Start adding notes to keep track of important reminders.</p>
                    <a href="<?php echo URL_PATH; ?>/add-note" class="btn btn-primary">
                        <i class="bi bi-plus-circle me-2"></i>
                        Add Note
                    </a>
                </div>
            <?php endif; ?>
        </div>
    </main>

    <nav class="bottom-nav">
        <a href="<?php echo URL_PATH; ?>/home" class="nav-item">
            <i class="bi bi-house-door"></i>
            <span>Home</span>
        </a>
        <a href="<?php echo URL_PATH; ?>/add-contact" class="nav-item">
            <i class="bi bi-person-plus"></i>
            <span>Add Contact</span>
        </a>
        <a href="<?php echo URL_PATH; ?>/templates" class="nav-item">
            <i class="bi bi-chat-square-text"></i>
            <span>Templates</span>
        </a>
        <a href="<?php echo URL_PATH; ?>/search" class="nav-item">
            <i class="bi bi-search"></i>
            <span>Search</span>
        </a>
        <a href="<?php echo URL_PATH; ?>/add-note" class="nav-item">
            <i class="bi bi-plus-circle"></i>
            <span>Add Note</span>
        </a>
    </nav>

    <div class="menu-modal" id="menuModal">
        <div class="menu-content">
            <div class="menu-header">
                <h2 class="menu-title">Menu</h2>
                <button class="btn-close-menu" id="closeMenuBtn">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>
            
            <div class="menu-body">
                <a href="<?php echo URL_PATH; ?>/home" class="menu-item">
                    <i class="bi bi-house-door"></i>
                    <span>Home</span>
                </a>
                <a href="<?php echo URL_PATH; ?>/notes" class="menu-item">
                    <i class="bi bi-journal-text"></i>
                    <span>All Notes</span>
                </a>
                <a href="<?php echo URL_PATH; ?>/templates" class="menu-item">
                    <i class="bi bi-chat-square-text"></i>
                    <span>Templates</span>
                </a>
                <a href="<?php echo URL_PATH; ?>/search" class="menu-item">
                    <i class="bi bi-search"></i>
                    <span>Search Contacts</span>
                </a>
                <div class="menu-divider"></div>
                <a href="<?php echo URL_PATH; ?>/logout" class="menu-item text-danger">
                    <i class="bi bi-box-arrow-right"></i>
                    <span>Logout</span>
                </a>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="<?php echo URL_PATH; ?>/js/pwa.js"></script>
    <script>
        document.getElementById('menuBtn').addEventListener('click', function() {
            document.getElementById('menuModal').classList.add('active');
        });
        
        document.getElementById('closeMenuBtn').addEventListener('click', function() {
            document.getElementById('menuModal').classList.remove('active');
        });
        
        document.getElementById('menuModal').addEventListener('click', function(e) {
            if (e.target === this) {
                this.classList.remove('active');
            }
        });
        
        // Show SweetAlert2 toast notifications
        <?php if (isset($_SESSION['success'])): ?>
            Swal.fire({
                toast: true,
                position: 'top-end',
                icon: 'success',
                title: '<?php echo addslashes($_SESSION['success']); ?>',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true
            });
            <?php unset($_SESSION['success']); ?>
        <?php endif; ?>
        
        <?php if (isset($_SESSION['error'])): ?>
            Swal.fire({
                toast: true,
                position: 'top-end',
                icon: 'error',
                title: '<?php echo addslashes($_SESSION['error']); ?>',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true
            });
            <?php unset($_SESSION['error']); ?>
        <?php endif; ?>
    </script>
</body>
</html>
