`views/admin-dashboard.ejs`

486 lines
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Admin Dashboard - Nosara Beachfront Rentals CMS</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
      background: #f5f7fa;
      color: #333;
    }

    .header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 20px 30px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .header-content {
      max-width: 1400px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .header h1 {
      font-size: 24px;
      font-weight: 600;
    }

    .header-actions {
      display: flex;
      gap: 15px;
      align-items: center;
    }

    .user-info {
      font-size: 14px;
      opacity: 0.9;
    }

    .btn {
      padding: 10px 20px;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;
    }

    .btn-logout {
      background: rgba(255, 255, 255, 0.2);
      color: white;
      border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .btn-logout:hover {
      background: rgba(255, 255, 255, 0.3);
    }

    .container {
      max-width: 1400px;
      margin: 30px auto;
      padding: 0 30px;
    }

    .tabs {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      margin-bottom: 30px;
      overflow: hidden;
    }

    .tab-list {
      display: flex;
      border-bottom: 1px solid #e0e0e0;
    }

    .tab-button {
      padding: 15px 30px;
      background: none;
      border: none;
      font-size: 14px;
      font-weight: 500;
      color: #666;
      cursor: pointer;
      transition: all 0.3s;
      border-bottom: 3px solid transparent;
    }

    .tab-button:hover {
      color: #667eea;
      background: #f5f7fa;
    }

    .tab-button.active {
      color: #667eea;
      border-bottom-color: #667eea;
      background: #f5f7fa;
    }

    .tab-content {
      display: none;
      padding: 30px;
    }

    .tab-content.active {
      display: block;
    }

    .page-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
    }

    .page-card {
      background: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transition: all 0.3s;
      cursor: pointer;
    }

    .page-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }

    .page-card h3 {
      font-size: 18px;
      margin-bottom: 8px;
      color: #333;
    }

    .page-card p {
      font-size: 14px;
      color: #666;
      line-height: 1.5;
    }

    .page-meta {
      display: flex;
      justify-content: space-between;
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid #e0e0e0;
      font-size: 12px;
      color: #999;
    }

    .btn-edit {
      background: #667eea;
      color: white;
      padding: 8px 16px;
      border-radius: 6px;
      text-decoration: none;
      font-size: 12px;
      font-weight: 500;
      display: inline-block;
      margin-top: 10px;
    }

    .btn-edit:hover {
      background: #5568d3;
    }

    .loading {
      text-align: center;
      padding: 40px;
      color: #999;
    }

    .loader-spinner {
      width: 40px;
      height: 40px;
      border: 4px solid #f0f0f0;
      border-top-color: #667eea;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      margin: 0 auto 15px;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: #999;
    }

    .empty-state-icon {
      font-size: 48px;
      margin-bottom: 15px;
    }

    .images-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 15px;
    }

    .image-card {
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .image-card img {
      width: 100%;
      height: 150px;
      object-fit: cover;
    }

    .image-info {
      padding: 10px;
    }

    .image-name {
      font-size: 12px;
      color: #666;
      word-break: break-all;
    }

    .btn-delete {
      background: #ff4757;
      color: white;
      padding: 6px 12px;
      border-radius: 4px;
      font-size: 11px;
      margin-top: 8px;
      display: inline-block;
      cursor: pointer;
    }

    .btn-delete:hover {
      background: #ff3838;
    }

    .upload-section {
      background: white;
      border-radius: 8px;
      padding: 30px;
      margin-bottom: 30px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .upload-section h2 {
      margin-bottom: 20px;
      font-size: 20px;
    }

    .upload-area {
      border: 2px dashed #ddd;
      border-radius: 8px;
      padding: 40px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s;
    }

    .upload-area:hover {
      border-color: #667eea;
      background: #f5f7fa;
    }

    .upload-area input[type="file"] {
      display: none;
    }
  </style>
</head>
<body>
  <div class="header">
    <div class="header-content">
      <h1>🏖️ Admin Dashboard</h1>
      <div class="header-actions">
        <span class="user-info">Welcome, <strong id="username">Admin</strong></span>
        <button class="btn btn-logout" onclick="logout()">Logout</button>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="tabs">
      <div class="tab-list">
        <button class="tab-button active" onclick="switchTab('pages')">Page Content</button>
        <button class="tab-button" onclick="switchTab('images')">Image Gallery</button>
      </div>

      <div id="pages-tab" class="tab-content active">
        <div id="pages-loading" class="loading">
          <div class="loader-spinner"></div>
          <p>Loading pages...</p>
        </div>
        <div id="pages-list" class="page-list" style="display: none;"></div>
      </div>

      <div id="images-tab" class="tab-content">
        <div class="upload-section">
          <h2>Upload New Image</h2>
          <div class="upload-area" onclick="document.getElementById('file-input').click()">
            <input type="file" id="file-input" accept="image/*" onchange="uploadImage(this)">
            <p>📁 Click to upload or drag and drop</p>
            <p style="font-size: 12px; color: #999; margin-top: 8px;">JPG, PNG, GIF, WEBP (Max 5MB)</p>
          </div>
        </div>
        <div id="images-loading" class="loading">
          <div class="loader-spinner"></div>
          <p>Loading images...</p>
        </div>
        <div id="images-list" class="images-grid" style="display: none;"></div>
      </div>
    </div>
  </div>

  <script>
    let currentTab = 'pages';

    // Check authentication on load
    fetch('/api/cms/auth/me')
      .then(res => res.json())
      .then(data => {
        if (data.success && data.data.user) {
          document.getElementById('username').textContent = data.data.user.username;
          loadPages();
        } else {
          window.location.href = '/admin/login';
        }
      })
      .catch(() => {
        window.location.href = '/admin/login';
      });

    function switchTab(tab) {
      currentTab = tab;

      // Update tab buttons
      document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
      event.target.classList.add('active');

      // Update tab content
      document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
      document.getElementById(tab + '-tab').classList.add('active');

      // Load data if not loaded
      if (tab === 'images' && !document.getElementById('images-list').hasChildNodes()) {
        loadImages();
      }
    }

    async function loadPages() {
      try {
        const response = await fetch('/api/cms/pages');
        const data = await response.json();

        document.getElementById('pages-loading').style.display = 'none';
        const listEl = document.getElementById('pages-list');
        listEl.style.display = 'grid';

        if (data.success && data.data.length > 0) {
          listEl.innerHTML = data.data.map(page => `
            <div class="page-card" onclick="window.location.href='/admin/edit/${page.page_slug}'">
              <h3>${page.page_title}</h3>
              <p>${page.content.substring(0, 100).replace(/<[^>]*>/g, '')}...</p>
              <div class="page-meta">
                <span>Slug: ${page.page_slug}</span>
                <span>${page.gallery_images.length} images</span>
              </div>
              <a href="/admin/edit/${page.page_slug}" class="btn-edit" onclick="event.stopPropagation()">Edit Page</a>
            </div>
          `).join('');
        } else {
          listEl.innerHTML = '<div class="empty-state"><div class="empty-state-icon">📄</div><p>No pages found</p></div>';
        }
      } catch (error) {
        console.error('Error loading pages:', error);
        document.getElementById('pages-loading').innerHTML = '<p style="color: #ff4757;">Failed to load pages</p>';
      }
    }

    async function loadImages() {
      try {
        const response = await fetch('/api/cms/images');
        const data = await response.json();

        document.getElementById('images-loading').style.display = 'none';
        const listEl = document.getElementById('images-list');
        listEl.style.display = 'grid';

        if (data.success && data.data.length > 0) {
          listEl.innerHTML = data.data.map(img => `
            <div class="image-card">
              <img src="${img.url}" alt="${img.filename}">
              <div class="image-info">
                <div class="image-name">${img.filename}</div>
                <button class="btn-delete" onclick="deleteImage('${img.filename}')">Delete</button>
              </div>
            </div>
          `).join('');
        } else {
          listEl.innerHTML = '<div class="empty-state"><div class="empty-state-icon">🖼️</div><p>No images uploaded yet</p></div>';
        }
      } catch (error) {
        console.error('Error loading images:', error);
        document.getElementById('images-loading').innerHTML = '<p style="color: #ff4757;">Failed to load images</p>';
      }
    }

    async function uploadImage(input) {
      const file = input.files[0];
      if (!file) return;

      const formData = new FormData();
      formData.append('image', file);

      try {
        const response = await fetch('/api/cms/upload', {
          method: 'POST',
          body: formData
        });

        const data = await response.json();

        if (data.success) {
          alert('Image uploaded successfully!');
          loadImages();
        } else {
          alert('Failed to upload image: ' + data.message);
        }
      } catch (error) {
        console.error('Error uploading image:', error);
        alert('Failed to upload image');
      }

      input.value = '';
    }

    async function deleteImage(filename) {
      if (!confirm('Are you sure you want to delete this image?')) return;

      try {
        const response = await fetch('/api/cms/images/' + filename, {
          method: 'DELETE'
        });

        const data = await response.json();

        if (data.success) {
          loadImages();
        } else {
          alert('Failed to delete image: ' + data.message);
        }
      } catch (error) {
        console.error('Error deleting image:', error);
        alert('Failed to delete image');
      }
    }

    async function logout() {
      try {
        await fetch('/api/cms/auth/logout', { method: 'POST' });
        window.location.href = '/admin/login';
      } catch (error) {
        console.error('Error logging out:', error);
        window.location.href = '/admin/login';
      }
    }
  </script>
</body>
</html>