Challenge_15_Magazijn_App_Maken/public/js/admin-reservations.js

// Admin reservations page functionality
let reservations = [];

// Check authentication
function checkAuth() {
    const token = localStorage.getItem('token');
    const role = localStorage.getItem('userRole');
    
    if (!token || role !== 'admin') {
        window.location.href = '/index.html';
    }
}

// Initialize page
async function initializePage() {
    checkAuth();
    await loadReservations();
    setupEventListeners();
    displayUserInfo();
}

// Display user info
function displayUserInfo() {
    const username = localStorage.getItem('username');
    document.getElementById('userInfo').textContent = `Admin: ${username}`;
}

// Load and filter reservations
async function loadReservations() {
    try {
        const response = await fetch('/api/reservations', {
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('token')}`
            }
        });
        reservations = await response.json();
        filterAndDisplayReservations();
    } catch (error) {
        console.error('Error loading reservations:', error);
        alert('Failed to load reservations');
    }
}

// Filter and display reservations
function filterAndDisplayReservations() {
    const locationFilter = document.getElementById('locationFilter').value;
    const statusFilter = document.getElementById('statusFilter').value;

    const filteredReservations = reservations.filter(reservation => {
        const locationMatch = locationFilter === 'all' || reservation.location === locationFilter;
        const statusMatch = statusFilter === 'all' || reservation.status === statusFilter;
        return locationMatch && statusMatch;
    });

    const reservationsList = document.getElementById('reservationsList');
    reservationsList.innerHTML = filteredReservations.map(reservation => `
        <tr>
            <td><strong>${reservation.studentName}</strong></td>
            <td>${reservation.itemName}</td>
            <td><span class="badge bg-info">${reservation.quantity || 1}</span></td>
            <td>${reservation.location}</td>
            <td>${new Date(reservation.reservedDate).toLocaleDateString('en-US', { 
                year: 'numeric', 
                month: 'short', 
                day: 'numeric' 
            })}</td>
            <td><span class="badge reservation-${reservation.status.toLowerCase()}">${reservation.status}</span></td>
            <td>
                <div class="btn-group btn-group-sm" role="group">
                    ${reservation.status === 'PENDING' ? `
                        <button class="btn btn-success" onclick="updateReservation('${reservation._id}', 'APPROVED')" title="Approve">
                            <i class="bi bi-check-lg"></i><span class="btn-text"> Approve</span>
                        </button>
                        <button class="btn btn-warning" onclick="updateReservation('${reservation._id}', 'REJECTED')" title="Reject">
                            <i class="bi bi-x-lg"></i><span class="btn-text"> Reject</span>
                        </button>
                    ` : reservation.status === 'APPROVED' ? `
                        <button class="btn btn-info" onclick="updateReservation('${reservation._id}', 'RETURNED')" title="Mark as Returned">
                            <i class="bi bi-arrow-return-left"></i><span class="btn-text"> Return</span>
                        </button>
                    ` : reservation.status === 'RETURNED' ? `
                        <button class="btn btn-secondary" onclick="archiveReservation('${reservation._id}')" title="Archive Reservation">
                            <i class="bi bi-archive"></i><span class="btn-text"> Archive</span>
                        </button>
                    ` : ''}
                    <button class="btn btn-danger" onclick="deleteReservation('${reservation._id}')" title="Delete">
                        <i class="bi bi-trash"></i><span class="btn-text"> Delete</span>
                    </button>
                </div>
            </td>
        </tr>
    `).join('');
}

// Update reservation status
async function updateReservation(reservationId, status) {
    try {
        const response = await fetch(`/api/reservations/${reservationId}`, {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${localStorage.getItem('token')}`
            },
            body: JSON.stringify({ status })
        });

        if (response.ok) {
            await loadReservations();
        } else {
            const error = await response.json();
            alert(error.message || 'Failed to update reservation');
        }
    } catch (error) {
        console.error('Error updating reservation:', error);
        alert('Failed to update reservation');
    }
}

// Delete reservation
async function deleteReservation(reservationId) {
    if (!confirm('Are you sure you want to delete this reservation?')) return;

    try {
        const response = await fetch(`/api/reservations/${reservationId}`, {
            method: 'DELETE',
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('token')}`
            }
        });

        if (response.ok) {
            await loadReservations();
        } else {
            const error = await response.json();
            alert(error.message || 'Failed to delete reservation');
        }
    } catch (error) {
        console.error('Error deleting reservation:', error);
        alert('Failed to delete reservation');
    }
}

// Archive reservation
async function archiveReservation(reservationId) {
    if (!confirm('Are you sure you want to archive this reservation? It will be hidden from the list but remain in the database.')) return;

    try {
        const response = await fetch(`/api/reservations/${reservationId}/archive`, {
            method: 'PATCH',
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('token')}`
            }
        });

        if (response.ok) {
            await loadReservations();
            // Show success message
            const alert = document.createElement('div');
            alert.className = 'alert alert-success alert-dismissible fade show';
            alert.innerHTML = `
                Reservation archived successfully!
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            const container = document.querySelector('.container');
            container.prepend(alert);
            setTimeout(() => alert.remove(), 3000);
        } else {
            const error = await response.json();
            alert(error.message || 'Failed to archive reservation');
        }
    } catch (error) {
        console.error('Error archiving reservation:', error);
        alert('Failed to archive reservation');
    }
}

// Set up event listeners
function setupEventListeners() {
    document.getElementById('locationFilter').addEventListener('change', filterAndDisplayReservations);
    document.getElementById('statusFilter').addEventListener('change', filterAndDisplayReservations);
    document.getElementById('logoutBtn').addEventListener('click', () => {
        localStorage.clear();
        window.location.href = '/index.html';
    });
}

// Initialize the page when DOM is loaded
document.addEventListener('DOMContentLoaded', initializePage);