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

<div class="container-fluid">
    <div class="page-header">
        <h1>Edit Note</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"><a href="<?php echo URL_PATH; ?>/admin/notes">Notes</a></li>
                <li class="breadcrumb-item active">Edit</li>
            </ol>
        </nav>
    </div>
    
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <i class="bi bi-pencil"></i> Edit Note Information
                </div>
                <div class="card-body">
                    <?php if (isset($_SESSION['error'])): ?>
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="bi bi-exclamation-triangle"></i>
                            <?= $_SESSION['error'] ?>
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                        <?php unset($_SESSION['error']); ?>
                    <?php endif; ?>
                    
                    <form action="<?php echo URL_PATH; ?>/admin/notes/update/<?= $note->id ?>" method="POST" enctype="multipart/form-data" id="noteForm" class="needs-validation" novalidate>
                        <div class="mb-3">
                            <label for="user_id" class="form-label">Assign to User *</label>
                            <select class="form-select" id="user_id" name="user_id" required>
                                <option value="">Select User</option>
                                <?php foreach ($users as $user): ?>
                                    <option value="<?= $user['id'] ?>" <?= $user['id'] == $note->user_id ? 'selected' : '' ?>>
                                        <?= htmlspecialchars($user['username']) ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                            <div class="invalid-feedback">Please select a user</div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="title" class="form-label">Title *</label>
                            <input type="text" class="form-control" id="title" name="title" value="<?= htmlspecialchars($note->title) ?>" required maxlength="200">
                            <div class="invalid-feedback">Please enter a title</div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="note_type" class="form-label">Note Type *</label>
                                <select class="form-select" id="note_type" name="note_type" required>
                                    <option value="">Select Type</option>
                                    <option value="single" <?= $note->note_type === 'single' ? 'selected' : '' ?>>Single (One-time reminder)</option>
                                    <option value="regular" <?= $note->note_type === 'regular' ? 'selected' : '' ?>>Regular (Annual reminder)</option>
                                </select>
                                <small class="text-muted">Single: Triggers once. Regular: Triggers annually.</small>
                                <div class="invalid-feedback">Please select note type</div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="reminder_date" class="form-label">Reminder Date *</label>
                                <input type="date" class="form-control" id="reminder_date" name="reminder_date" value="<?= $note->reminder_date ?>" required>
                                <div class="invalid-feedback">Please select reminder date</div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="images" class="form-label">Images (Optional)</label>
                            <?php if (!empty($note->image_path)): ?>
                                <?php 
                                $currentImages = json_decode($note->image_path, true);
                                if (!is_array($currentImages)) {
                                    $currentImages = [$note->image_path];
                                }
                                ?>
                                <div class="mb-2">
                                    <label class="text-muted">Current Images:</label><br>
                                    <div class="row g-2">
                                        <?php foreach ($currentImages as $img): ?>
                                            <div class="col-6 col-md-3">
                                                <img src="<?php echo URL_PATH; ?>/uploads/<?= htmlspecialchars($img) ?>" 
                                                     alt="Current image" 
                                                     style="width: 100%; height: 150px; object-fit: cover; border-radius: 5px; border: 1px solid #ddd; padding: 5px;">
                                            </div>
                                        <?php endforeach; ?>
                                    </div>
                                </div>
                            <?php endif; ?>
                            <input type="file" class="form-control" id="images" name="images[]" accept="image/jpeg,image/png,image/gif" multiple>
                            <small class="text-muted">Supported: JPEG, PNG, GIF. Max 5MB per image. Leave empty to keep current. Uploading new images will replace all existing images. Converts to WebP.</small>
                            <div id="imagePreview" class="mt-2 row g-2" style="display: none;"></div>
                        </div>

                        <div class="mb-3">
                            <label for="content" class="form-label">Content (Optional)</label>
                            <textarea class="form-control" id="content" name="content" rows="4"><?= htmlspecialchars($note->content ?? '') ?></textarea>
                        </div>
                        
                        <hr>
                        
                        <div class="d-flex justify-content-between">
                            <a href="<?php echo URL_PATH; ?>/admin/notes" class="btn btn-secondary">
                                <i class="bi bi-arrow-left"></i> Cancel
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-save"></i> Update Note
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <i class="bi bi-info-circle"></i> Information
                </div>
                <div class="card-body">
                    <h6>Note Guidelines:</h6>
                    <ul class="small">
                        <li><strong>Single:</strong> One-time reminder on specific date</li>
                        <li><strong>Regular:</strong> Annual reminder every year</li>
                        <li>Images automatically optimized to WebP</li>
                        <li>Past single notes can be bulk deleted</li>
                        <li>Reminders shown on dashboard</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
// Multiple images preview
document.getElementById('images').addEventListener('change', function(e) {
    const files = e.target.files;
    const previewContainer = document.getElementById('imagePreview');
    previewContainer.innerHTML = '';
    
    if (files.length > 0) {
        previewContainer.style.display = 'flex';
        
        Array.from(files).forEach((file, index) => {
            // Check file size
            const maxSize = 5 * 1024 * 1024; // 5MB
            if (file.size > maxSize) {
                alert('Image ' + file.name + ' is larger than 5MB and will be skipped');
                return;
            }
            
            // Show preview
            const reader = new FileReader();
            reader.onload = function(e) {
                const col = document.createElement('div');
                col.className = 'col-6 col-md-3';
                col.innerHTML = `
                    <img src="${e.target.result}" alt="Preview ${index + 1}" 
                         style="width: 100%; height: 150px; object-fit: cover; border-radius: 5px; border: 1px solid #ddd; padding: 5px;">
                `;
                previewContainer.appendChild(col);
            };
            reader.readAsDataURL(file);
        });
    } else {
        previewContainer.style.display = 'none';
    }
});
</script>

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