<?php include APP_PATH . '/views/layouts/header.php'; ?>

<div class="container-fluid">
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col">
                <h1>Notes</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="<?php echo URL_PATH; ?>/admin/dashboard">Dashboard</a></li>
                        <li class="breadcrumb-item active">Notes</li>
                    </ol>
                </nav>
            </div>
            <div class="col-auto">
                <a href="<?php echo URL_PATH; ?>/admin/notes/bulk-delete-past" class="btn btn-warning me-2" onclick="return confirm('Are you sure you want to delete all past single notes?')">
                    <i class="bi bi-trash"></i> Delete Past Single Notes
                </a>
                <a href="<?php echo URL_PATH; ?>/admin/notes/create" class="btn btn-primary">
                    <i class="bi bi-plus-circle"></i> Add New Note
                </a>
            </div>
        </div>
    </div>

    <!-- Search Box -->
    <div class="card mb-3">
        <div class="card-body">
            <div class="row">
                <div class="col-md-12">
                    <input type="text" id="noteSearch" class="form-control" placeholder="🔍 Search notes by title or description...">
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <i class="bi bi-sticky"></i> All Notes
        </div>
        <div class="card-body">

            <?php if (isset($_SESSION['info'])): ?>
                <div class="alert alert-info alert-dismissible fade show" role="alert">
                    <i class="bi bi-info-circle"></i> <?= $_SESSION['info'] ?>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
                <?php unset($_SESSION['info']); ?>
            <?php endif; ?>
            
            <div class="table-responsive">
                <table id="notesTable" class="table table-hover data-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Title</th>
                            <th>User</th>
                            <th>Type</th>
                            <th>Reminder Date</th>
                            <th>Image</th>
                            <th>Created</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="notesTableBody">
                        <!-- Data will be loaded via AJAX -->
                    </tbody>
                </table>
            </div>
            
            <div id="notesPagination"></div>
            
            <div id="notesEmpty" class="alert alert-info" style="display: none;">
                <i class="bi bi-info-circle"></i> No notes found. 
                <a href="<?php echo URL_PATH; ?>/admin/notes/create">Create your first note</a>
            </div>
        </div>
    </div>
</div>

<!-- Image Modal -->
<div class="modal fade" id="imageModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Note Image</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center">
                <img id="modalImage" src="" alt="Note image" style="max-width: 100%; height: auto;">
            </div>
        </div>
    </div>
</div>

<script src="<?php echo URL_PATH; ?>/js/ajax-search.js"></script>
<script>
function showImageModal(imageSrc) {
    document.getElementById('modalImage').src = imageSrc;
    new bootstrap.Modal(document.getElementById('imageModal')).show();
}

// Initialize AJAX table handler for notes
new AjaxTableHandler({
    searchInput: '#noteSearch',
    tableBody: '#notesTableBody',
    paginationContainer: '#notesPagination',
    emptyMessage: '#notesEmpty',
    apiEndpoint: '<?php echo URL_PATH; ?>/admin/ajax/search-notes',
    renderRow: (note) => {
        const typeBadge = note.note_type === 'single' 
            ? '<span class="badge bg-info">Single</span>' 
            : '<span class="badge bg-success">Regular</span>';
        
        let imageHtml = '<span class="text-muted">-</span>';
        if (note.image_path) {
            try {
                const images = JSON.parse(note.image_path);
                if (Array.isArray(images) && images.length > 0) {
                    const firstImg = images[0];
                    const count = images.length > 1 ? `<span class="badge bg-primary position-absolute top-0 end-0 m-1">${images.length}</span>` : '';
                    imageHtml = `<div class="position-relative" style="display: inline-block;">
                        <img src="<?php echo URL_PATH; ?>/uploads/${firstImg}" 
                             alt="Note image" 
                             style="width: 50px; height: 50px; object-fit: cover; border-radius: 5px; cursor: pointer;"
                             onclick="showImageModal('<?php echo URL_PATH; ?>/uploads/${firstImg}')">
                        ${count}
                    </div>`;
                }
            } catch (e) {
                // Single image (old format)
                imageHtml = `<img src="<?php echo URL_PATH; ?>/uploads/${note.image_path}" 
                       alt="Note image" 
                       style="width: 50px; height: 50px; object-fit: cover; border-radius: 5px; cursor: pointer;"
                       onclick="showImageModal('<?php echo URL_PATH; ?>/uploads/${note.image_path}')">`;
            }
        }
        
        return `
            <tr>
                <td>${note.id}</td>
                <td><i class="bi bi-sticky-fill"></i> ${escapeHtml(note.title)}</td>
                <td>${escapeHtml(note.username || 'N/A')}</td>
                <td>${typeBadge}</td>
                <td>${formatDate(note.reminder_date)}</td>
                <td>${imageHtml}</td>
                <td>${formatDateTime(note.created_at)}</td>
                <td>
                    <a href="<?php echo URL_PATH; ?>/admin/notes/edit/${note.id}" 
                       class="btn btn-sm btn-info" title="Edit">
                        <i class="bi bi-pencil"></i>
                    </a>
                    <a href="<?php echo URL_PATH; ?>/admin/notes/delete/${note.id}" 
                       class="btn btn-sm btn-danger btn-delete" 
                       data-name="${escapeHtml(note.title)}"
                       title="Delete">
                        <i class="bi bi-trash"></i>
                    </a>
                </td>
            </tr>
        `;
    }
});
</script>

<?php include APP_PATH . '/views/layouts/footer.php'; ?>
