System Manager v8.0

Editing: add-page.php

<?php include 'includes/auth.php'; ?>
<?php include 'includes/header.php'; ?>
<?php include 'includes/topbar.php'; ?>
<?php include 'includes/sidebar.php'; ?>

.service-item {
    display: flex;
    align-items: flex-start;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #f9f9f9;
    transition: all 0.3s ease;
  }

.service-item:hover {
    background: #f0f7ff;
    border-color: #0052da;
  }

.service-item input[type="checkbox"] {
    margin-right: 12px;
    margin-top: 3px;
    cursor: pointer;
  }

.service-item label {
    cursor: pointer;
    margin: 0;
    flex: 1;
  }

.service-title {
    font-weight: 600;
    color: #0052da;
    margin: 0;
  }

.service-desc {
    font-size: 0.85rem;
    color: #666;
    margin: 3px 0 0 0;
  }

.slug-status {
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.9rem;
    margin-top: 8px;
  }

.slug-available {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
  }

.slug-unavailable {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
  }

.gallery-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 20px;
  }

.gallery-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }

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

.gallery-item input {
    position: absolute;
    bottom: 5px;
    left: 5px;
    width: 140px;
  }

.upload-area {
    border: 2px dashed #0052da;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f8f9ff;
  }

.upload-area:hover {
    background: #f0f7ff;
    border-color: #003fa8;
  }

.upload-area i {
    font-size: 2rem;
    color: #0052da;
    margin-bottom: 10px;
  }

.upload-area p {
    margin: 0;
    color: #0052da;
    font-weight: 600;
  }

.file-input-hidden {
    display: none;
  }

.map-link-info {
    background: #e7f3ff;
    border-left: 4px solid #0052da;
    padding: 15px;
    border-radius: 4px;
    margin-top: 10px;
  }

.map-link-info p {
    margin: 0;
    font-size: 0.9rem;
    color: #0052da;
  }
</style>

<div class="content">
  <h2 class="mb-4">Add New Location Page</h2>

<div class="mb-3">
        <label class="form-label">Page Title *</label>
        <input type="text" name="title" id="title" class="form-control" placeholder="e.g., Carpenter Services in Dehradun" required>
        <small class="form-text text-muted">This will be displayed as the main heading</small>
      </div>

<div class="mb-3">
        <label class="form-label">URL Slug</label>
        <div class="form-check mb-2">
          <input class="form-check-input" type="checkbox" id="autoSlug" checked>
          <label class="form-check-label" for="autoSlug">
            Auto-generate from title
          </label>
        </div>
        <input type="text" name="slug" id="slug" class="form-control" placeholder="carpenter-services" required>
        <div id="slugFeedback"></div>
      </div>

<div class="mb-3">
        <label class="form-label">Select City/Location *</label>
        <div class="input-group">
          <select name="city" id="city" class="form-control" required>
            <option value="">Choose a city</option>
            <?php
            include 'includes/db.php';
            $result = mysqli_query($conn, "SELECT * FROM cities WHERE status='active' ORDER BY name");
            while ($city = mysqli_fetch_assoc($result)) {
              echo '<option value="' . htmlspecialchars($city['name']) . '">' . htmlspecialchars($city['name']) . '</option>';
            }
            ?>
          </select>
          <button class="btn btn-outline-primary" type="button" data-bs-toggle="modal" data-bs-target="#addCityModal">
            <i class="fas fa-plus"></i>
          </button>
        </div>
      </div>

<div class="mb-3">
        <label class="form-label">Page Heading</label>
        <input type="text" name="heading" class="form-control" placeholder="Professional Services in [City]">
      </div>

<div class="mb-3">
        <label class="form-label">Featured Image</label>
        <input type="file" name="featured_image" id="featured_image" class="form-control" accept="image/*">
        <small class="form-text text-muted">Recommended: 1200x630px</small>
        <div id="featuredPreview" style="margin-top: 10px;"></div>
      </div>

<div class="mb-3">
        <label class="form-label">Gallery Images (Showcase Your Work)</label>
        <div class="upload-area" id="uploadArea">
          <i class="fas fa-cloud-upload-alt"></i>
          <p>Click or drag images here to upload</p>
          <small style="color: #666;">You can upload multiple images</small>
        </div>
        <input type="file" id="galleryInput" name="gallery_images[]" class="file-input-hidden" multiple accept="image/*">
        
        <div class="gallery-preview" id="galleryPreview"></div>
        <input type="hidden" name="gallery_captions" id="galleryCaptions" value="[]">
      </div>

<div class="mb-3">
        <label class="form-label">Page Content</label>
        <div id="editor" style="height:300px;"></div>
        <input type="hidden" name="content" id="content">
      </div>

<div class="mb-4">
        <label class="form-label">Professional Services Offered *</label>
        <small class="d-block mb-3 text-muted">Select all services you want to display on this page</small>

<div class="service-checkbox-group">
          <div class="service-item">
            <input type="checkbox" name="services[]" value="carpenter" id="service-carpenter">
            <label for="service-carpenter">
              <p class="service-title">🪛 Carpenter Services</p>
              <p class="service-desc">Furniture repair, custom woodwork and installation</p>
            </label>
          </div>

<div class="service-item">
            <input type="checkbox" name="services[]" value="plumber" id="service-plumber">
            <label for="service-plumber">
              <p class="service-title">🚰 Plumber Services</p>
              <p class="service-desc">Leak repairs, pipe fitting, bathroom and kitchen</p>
            </label>
          </div>

<div class="service-item">
            <input type="checkbox" name="services[]" value="electrician" id="service-electrician">
            <label for="service-electrician">
              <p class="service-title">⚡ Electrician Services</p>
              <p class="service-desc">Wiring, electrical repairs and installation</p>
            </label>
          </div>

<div class="service-item">
            <input type="checkbox" name="services[]" value="cleaning" id="service-cleaning">
            <label for="service-cleaning">
              <p class="service-title">🧹 Cleaning Services</p>
              <p class="service-desc">Home, office and deep cleaning solutions</p>
            </label>
          </div>

<div class="service-item">
            <input type="checkbox" name="services[]" value="welder" id="service-welder">
            <label for="service-welder">
              <p class="service-title">🔥 Welder Services</p>
              <p class="service-desc">On site welding, metal fabrication and repairs</p>
            </label>
          </div>

<div class="service-item">
            <input type="checkbox" name="services[]" value="interior_designer" id="service-interior">
            <label for="service-interior">
              <p class="service-title">🎨 Interior Designer</p>
              <p class="service-desc">Modern interior design for homes and offices</p>
            </label>
          </div>

<div class="service-item">
            <input type="checkbox" name="services[]" value="cctv" id="service-cctv">
            <label for="service-cctv">
              <p class="service-title">📹 CCTV Technician</p>
              <p class="service-desc">CCTV installation, setup and maintenance</p>
            </label>
          </div>

<div class="service-item">
            <input type="checkbox" name="services[]" value="furniture_assembly" id="service-furniture">
            <label for="service-furniture">
              <p class="service-title">🛋️ Furniture Assembly</p>
              <p class="service-desc">Assembly and installation of all types</p>
            </label>
          </div>

<div class="service-item">
            <input type="checkbox" name="services[]" value="painter" id="service-painter">
            <label for="service-painter">
              <p class="service-title">🎭 Painter Services</p>
              <p class="service-desc">Interior and exterior painting services</p>
            </label>
          </div>

<div class="service-item">
            <input type="checkbox" name="services[]" value="waterproofing" id="service-waterproof">
            <label for="service-waterproof">
              <p class="service-title">💧 Waterproofing</p>
              <p class="service-desc">Roof, wall and bathroom solutions</p>
            </label>
          </div>

<div class="service-item">
            <input type="checkbox" name="services[]" value="kitchen" id="service-kitchen">
            <label for="service-kitchen">
              <p class="service-title">🍳 Modular Kitchen</p>
              <p class="service-desc">Customized design and installation</p>
            </label>
          </div>

<div class="service-item">
            <input type="checkbox" name="services[]" value="web_development" id="service-web">
            <label for="service-web">
              <p class="service-title">💻 Web Development</p>
              <p class="service-desc">Website design and development services</p>
            </label>
          </div>
        </div>
      </div>

<div class="mb-3">
  <label class="form-label">Google Maps Link *</label>
  <input type="url" name="google_map_link" id="google_map_link" class="form-control" placeholder="https://maps.app.goo.gl/22H89CDd1LqQYwXx9" required>
  
  <div style="background: #e3f2fd; border-left: 4px solid #0052da; padding: 15px; border-radius: 4px; margin-top: 15px;">
    <p style="margin: 0 0 15px 0; color: #0052da; font-weight: 600;">
      📍 How to get your Google Maps sharing link:
    </p>
    <ol style="margin: 0; color: #0052da; padding-left: 20px;">
      <li style="margin-bottom: 8px;">Open <strong>Google Maps</strong> on your computer (maps.google.com)</li>
      <li style="margin-bottom: 8px;">Search for your business location or click the map to add a pin</li>
      <li style="margin-bottom: 8px;">Click the <strong>"Share"</strong> button (top left area)</li>
      <li style="margin-bottom: 8px;">Select <strong>"Copy link"</strong> option</li>
      <li style="margin-bottom: 8px;">The link will look like: <code style="background: white; padding: 3px 8px; border-radius: 3px; font-family: monospace;">https://maps.app.goo.gl/22H89CDd1LqQYwXx9</code></li>
      <li>Paste that link in the field above</li>
    </ol>
    
    <div style="margin-top: 15px; padding: 12px; background: #c8e6c9; border-radius: 4px; color: #2e7d32;">
      <strong>✓ Example:</strong> https://maps.app.goo.gl/22H89CDd1LqQYwXx9
    </div>
  </div>
</div>

<div class="mb-3">
        <label class="form-label">Meta Title (SEO)</label>
        <input type="text" name="meta_title" class="form-control" maxlength="60" placeholder="Professional Services in [City] - Glorious Service">
        <small class="form-text text-muted">Max 60 characters</small>
      </div>

<div class="mb-3">
        <label class="form-label">Meta Description (SEO)</label>
        <textarea name="meta_description" class="form-control" rows="2" maxlength="160" placeholder="Describe your services..."></textarea>
        <small class="form-text text-muted">Max 160 characters</small>
      </div>

<div class="mb-3">
        <label class="form-label">Status</label>
        <select name="status" class="form-control">
          <option value="published">Publish</option>
          <option value="draft">Save as Draft</option>
        </select>
      </div>

<button type="submit" class="btn btn-primary" id="submitBtn">
        <i class="fas fa-save"></i> Publish Page
      </button>

</form>
  </div>
</div>

<div class="modal fade" id="addCityModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Add New City</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form id="quickAddCityForm">
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">City Name *</label>
            <input type="text" id="quickCityName" class="form-control" placeholder="e.g., Noida" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Description</label>
            <textarea id="quickCityDescription" class="form-control" rows="2" placeholder="Describe this city..."></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary" onclick="quickAddCity()">Add City</button>
        </div>
      </form>
    </div>
  </div>
</div>

// Gallery Management
const uploadArea = document.getElementById('uploadArea');
const galleryInput = document.getElementById('galleryInput');
const galleryPreview = document.getElementById('galleryPreview');
const galleryCaptions = document.getElementById('galleryCaptions');

let uploadedFiles = [];

uploadArea.addEventListener('click', () => galleryInput.click());

uploadArea.addEventListener('dragover', (e) => {
  e.preventDefault();
  uploadArea.style.background = '#f0f7ff';
});

uploadArea.addEventListener('dragleave', () => {
  uploadArea.style.background = '#f8f9ff';
});

uploadArea.addEventListener('drop', (e) => {
  e.preventDefault();
  const files = e.dataTransfer.files;
  handleFiles(files);
});

galleryInput.addEventListener('change', (e) => {
  handleFiles(e.target.files);
});

let captions = {};

function updateCaption(index, caption) {
  captions[index] = caption;
  document.getElementById('galleryCaptions').value = JSON.stringify(captions);
}

function removeGalleryItem(index) {
  uploadedFiles.splice(index, 1);
  delete captions[index];
  renderGallery();
}

// Featured Image Preview
document.getElementById('featured_image').addEventListener('change', function(e) {
  const preview = document.getElementById('featuredPreview');
  const file = e.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      preview.innerHTML = `<img src="${e.target.result}" style="max-width: 300px; border-radius: 6px;">`;
    };
    reader.readAsDataURL(file);
  }
});

// Slug conversion function
function convertToSlug(text) {
  return text
    .toLowerCase()
    .trim()
    .replace(/\s+/g, '-')
    .replace(/[^\w\-]+/g, '')
    .replace(/\-\-+/g, '-')
    .replace(/^-+/, '')
    .replace(/-+$/, '');
}

const titleInput = document.getElementById('title');
const slugInput = document.getElementById('slug');
const autoSlugCheckbox = document.getElementById('autoSlug');
const slugFeedback = document.getElementById('slugFeedback');
const submitBtn = document.getElementById('submitBtn');

let isSlugAvailable = true;
let checkTimeout;

function checkSlugAvailability(slug) {
  if (slug.length < 2) {
    slugFeedback.innerHTML = '';
    isSlugAvailable = false;
    return;
  }

clearTimeout(checkTimeout);
  slugFeedback.innerHTML = '<small class="text-muted">Checking availability...</small>';

checkTimeout = setTimeout(function() {
    fetch('check-page-slug.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: 'slug=' + encodeURIComponent(slug)
    })
    .then(response => response.json())
    .then(data => {
      if (data.available) {
        slugFeedback.innerHTML = '<div class="slug-status slug-available">✓ Slug is available</div>';
        isSlugAvailable = true;
        submitBtn.disabled = false;
      } else {
        slugFeedback.innerHTML = '<div class="slug-status slug-unavailable">✗ This slug is already in use</div>';
        isSlugAvailable = false;
        submitBtn.disabled = true;
      }
    })
    .catch(error => {
      console.error('Error:', error);
      isSlugAvailable = true;
      submitBtn.disabled = false;
    });
  }, 500);
}

titleInput.addEventListener('input', function() {
  if (autoSlugCheckbox.checked) {
    slugInput.value = convertToSlug(this.value);
    checkSlugAvailability(slugInput.value);
  }
});

autoSlugCheckbox.addEventListener('change', function() {
  if (this.checked) {
    slugInput.value = convertToSlug(titleInput.value);
    slugInput.setAttribute('readonly', true);
    checkSlugAvailability(slugInput.value);
  } else {
    slugInput.removeAttribute('readonly');
  }
});

slugInput.addEventListener('input', function() {
  if (!autoSlugCheckbox.checked) {
    this.value = convertToSlug(this.value);
  }
  checkSlugAvailability(this.value);
});

document.getElementById('pageForm').addEventListener('submit', function(e) {
  document.querySelector('#content').value = quill.root.innerHTML;
  
  if (!isSlugAvailable) {
    e.preventDefault();
    alert('Please choose a different slug.');
  }
});

if (autoSlugCheckbox.checked) {
  slugInput.setAttribute('readonly', true);
}

// Quick Add City
function quickAddCity() {
  const cityName = document.getElementById('quickCityName').value;
  const cityDescription = document.getElementById('quickCityDescription').value;
  
  if (!cityName) {
    alert('Please enter city name');
    return;
  }

const formData = new FormData();
  formData.append('action', 'add');
  formData.append('city_name', cityName);
  formData.append('city_description', cityDescription);
  formData.append('city_status', 'active');

fetch('manage-cities.php', {
    method: 'POST',
    body: formData
  })
  .then(response => response.text())
  .then(data => {
    location.reload();
  })
  .catch(error => {
    alert('Error adding city: ' + error);
  });
}
</script>

</body>
</html>

Cancel