scc24php/admin/add-content.php

<?php
    require('../.hta_config/env.php');
    require('../.hta_header.php');
    require('../.hta_admin_header.php');
    $current_date_time = date("Y-m-d H:i:s");
    if(isset($_POST['title'])){
        try {
          $db = new PDO("mysql:host=$mariaServer;dbname=$mariaDb", $mariaUser, $mariaPass);
          $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);   // Set the PDO error mode to exception
          $stmt = $db->prepare("INSERT INTO scc24 (date_created, type, title,  slug, content) VALUES (:date_created, :type, :title, :slug, :content)");
          $stmt->bindParam(':date_created', $current_date_time);
          $stmt->bindParam(':type', $_POST['type']);
          $stmt->bindParam(':title', $_POST['title']);
          $stmt->bindParam(':slug',  $_POST['slug']); 
          $stmt->bindParam(':content',  $_POST['content']);
          if ($stmt->execute()) {
            echo 'New '.$_POST['type'].' created.';
          } else {
              echo "Error executing statement: " . $stmt->errorInfo()[2]; // need to implement this Err. check specially for new entry to mariaDB
          }
          
        }catch (PDOException $e) {
            // echo 'errorID:3001: "New Registration Server" busy!';
            echo "Error: " . $e->getMessage();
        };
    }
?>

<div id="createNewPage" >
<h3 style="text-align: center; margin: 10px 0;">Create New Page or Notice</h3>
  <form id="createNewPageForm" method="POST"  enctype="multipart/form-data">
    <label for="type">Select Type</label>
    <select name="type" id="type" style="padding: 10px;">
      <option value="0">-Select-</option>
      <option value="notice">Notice</option>
      <option value="tender">Tender</option>
      <option value="page">Page</option>
      <option value="documents">Documents</option>
      <option value="events">Events</option>
    </select><br/>
    <label for="title">Page Title:</label><br> <input id="title" name="title" type="text">
    <label for="slug">Page unique slug:</label><br> <input id="slug" name="slug" type="text">
    <label for="editor">Content:</label>
    <div style="color: #000;" id="editor"></div>
    <div id="markup"></div>
    <textarea name="content" id="content" rows="" col="0" class="border-2 border-primary p-2 rounded" style="visibility: hidden; height: 2px;"></textarea>
    <!-- <div id="yseditor"></div> -->
    <!-- <label for="content">Page Content:</label><br> <textarea id="pageContent" name="content"> </textarea> -->
    <!-- <input type="submit" name="createNew" value="Save"> -->
    <!-- <input type="hidden" name="content" value="" id="content" > -->
    <button type="submit" id="createButton" type="button" >Create New Page</button>
  </form>
</div>
<link rel="stylesheet" type="text/css" href="/assets/pell.css">
<script src="/assets/pell.js"></script>  
<script>

  const pell = window.pell;
    const editor = document.getElementById("editor");
    const markup = document.getElementById("markup");
    let contentTextArea = document.getElementById('content');

    pell.init({
    element: editor,
    onChange: (html) => {
        // markup.innerHTML = "HTML Output: <br /><br />";
        // markup.innerText += html;
        contentTextArea.value = html;
        // console.log(html)
    }
    })


  function slugify(text) {
      return text.toString().toLowerCase()
        .replace(/\s+/g, '-')           // Replace spaces with -
        .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
        .replace(/\-\-+/g, '-')         // Replace multiple - with single -
        .replace(/^-+/, '')             // Trim - from start of text
        .replace(/-+$/, '');            // Trim - from end of text
  }

  window.onload = function() {
      var inputField = document.getElementById('title');
      var slugField = document.getElementById('slug');

      inputField.addEventListener('input', function() {
          var inputText = inputField.value;
          var slugText = slugify(inputText);
          slugField.value = slugText;
      });
  };

</script>
<style>
  #createNewPage {
    padding: 10px 50px; 
    margin: 10px auto; 
    background-color: #ffddcc;
    border-radius: 20px;
    width: 100%;
    max-width: 60%;
  }

  /* For mobile screens */
  @media (max-width: 768px) {
    #createNewPage {
        max-width: 100%;
        width: 100%;
        padding: 10px 20px; /* Optional: adjust padding for smaller screens */
    }
  }
  #createNewPage > form > input, select {
    width:100%;
    /* margin-top:10px; */
    margin-bottom:10px;
    padding: 10px;
    border-radius: 6px;
  }
  #createNewPage > form > textarea{
    width:100%;
    margin:10px;
    height:200px;
  }
  #createButton{
    background-color: #402517;
    color: #FFFFFF;
    border-radius: 10px;
    padding: 10px;
    outline: none;
    border: none;
    display: flex;
  }

  .pell-content{
      background: #fff;
      border-bottom: 1px solid black;
  }

</style>
<?php
    require('../.hta_footer.php');
?>