<?php
require_once('config.php');

if (isset($_POST['add_photocard'])) {

  $post_form_data = array(
    "PC_Title"=>$_POST['PC_Title'],
    "PC_CSS"=>$_POST['PC_CSS'],
    "PC_HTML"=>$_POST['PC_HTML'],
  );
   // Insert Database
   $insert_now = InsertData('mahamudfutureit_photocard', $post_form_data);

     if ($insert_now) {
        header("Location:photocard-edit.php?photocard_id=".$insert_now);
        $tt_alert = ttAlert('success', 'Addd Photocard !');
      }else {
        $tt_alert = ttAlert('danger', 'Something went wrong to add Photocard !');
   }
}

require_once('inc/header.php');
?>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Bengali:wght@100..900&display=swap');
  .photocard_shortcode{
    user-select: all;
  }
  #MahamudFutureITPhotocard {
      width: 360px;
      min-height: 360px;
      font-family: "Noto Serif Bengali", serif;
      position: relative;
      background-color: white;
  }
</style>
<main id="main" class="main">
  <div class="row">
    <div class="col-6 align-items-center">
      <div class="pagetitle mb-2">
        <h1><?php echo $page_title ?></h1>
      </div>
    </div>
    <div class="col-6 text-end">
        <a href="photocard.php" class="btn btn-primary btn-sm"><i class="bi bi-grid"></i> All Template </a>
    </div>
  </div>
    <?php echo $tt_alert ?? ''; ?>
  <section class="section mt-4">
    <form action="" method="post" enctype="multipart/form-data" class="row g-3">
      <div class="col-lg-12">
        <div class="bg-white rounded-2 p-3">
          <div class="form-group mb-2">
            <label>Template Name <span class="text-danger">*</span></label>
            <input name="PC_Title" type="text" class="form-control"  required>
            <div class="mt-1 text-muted">
              <small class="me-1 photocard_shortcode">[MFIT-PHOTO]</small>
              <small class="me-1 photocard_shortcode">[MFIT-TITLE]</small>
              <small class="me-1 photocard_shortcode">[MFIT-DATE]</small>
              <small class="me-1 photocard_shortcode">[MFIT-CATEGORY]</small>
              <small class="me-1 photocard_shortcode">[MFIT-QRIMG]</small>
              <small class="me-1 photocard_shortcode">[MFIT-DOMAIN]</small>

            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-5">
        <style id="MahamudFutureITPhotocardCSS"></style>
        <div id="MahamudFutureITPhotocard" class="m-auto mahamudfutureit-photo-card border"></div>
      </div>

      <div class="col-lg-7">
        <div class="bg-white rounded-2 p-3">

          <div class="form-group">
            <label for="PhotocardCSS">Photocard CSS</label>
            <textarea  id="PhotocardCSS" name="PC_CSS"  class="form-control" rows="3"></textarea>
          </div>

          <div class="form-group mt-2">
            <label for="PhotocardHTML">Photocard HTML</label>
            <textarea  id="PhotocardHTML" name="PC_HTML"  class="form-control" rows="3"></textarea>
          </div>
          <button type="submit" class="mt-3 btn btn-primary" name="add_photocard">Add Template</button>
        </div>
      </div>
    </form>
  </section>
</main>

<script>
$(document).ready(function(){

  // CodeMirror Config for CSS
  var cssEditor = CodeMirror.fromTextArea(document.getElementById('PhotocardCSS'), {
    mode: "text/css",
    extraKeys: {"Ctrl-Space": "autocomplete"},
    lineNumbers: true,
    keyMap:"sublime",
    tabSize:4,
    theme: "material-ocean"
  });

  // CodeMirror Config for HTML
  var htmlEditor = CodeMirror.fromTextArea(document.getElementById('PhotocardHTML'), {
    mode: "text/html",
    extraKeys: {"Ctrl-Space": "autocomplete"},
    lineNumbers: true,
    keyMap:"sublime",
    tabSize:4,
    theme: "material-ocean"
  });

  // Live Update CSS
  cssEditor.on("keyup", function(){
    document.getElementById("MahamudFutureITPhotocardCSS").innerHTML = cssEditor.getValue();
  });

  // Live Update HTML
  htmlEditor.on("keyup", function(){
    document.getElementById("MahamudFutureITPhotocard").innerHTML = htmlEditor.getValue();
  });

  // Replacement values for shortcodes
  const shortcodeMap = {
    "[MFIT-PHOTO]": "assets/img/placeholder/mahamudfutureit-photocard-featured.jpg",
    "[MFIT-TITLE]": "প্রযুক্তি সেবায় নতুন সম্ভবনা নিয়ে হাজির মাহামুদ ফিউচার আইটি ডেভেলপার টিম",
    "[MFIT-DATE]": "১ সেপ্টেম্বর ২০২৪",
    "[MFIT-CATEGORY]": "প্রযুক্তি",
    "[MFIT-QRIMG]": "assets/img/placeholder/qr.png",
    "[MFIT-DOMAIN]": "WWW.mf1t.com",
  };

  // Helper function to replace shortcodes in both HTML and CSS
  function replaceShortcodes(content) {
    for (let key in shortcodeMap) {
      content = content.replaceAll(key, shortcodeMap[key]);
    }
    return content;
  }

  // Live Update CSS (with shortcode replacement)
  cssEditor.on("keyup", function(){
    let cssContent = cssEditor.getValue();
    cssContent = replaceShortcodes(cssContent);
    document.getElementById("MahamudFutureITPhotocardCSS").innerHTML = cssContent;
  });

  // Live Update HTML (with shortcode replacement)
  htmlEditor.on("keyup", function(){
    let htmlContent = htmlEditor.getValue();
    htmlContent = replaceShortcodes(htmlContent);
    document.getElementById("MahamudFutureITPhotocard").innerHTML = htmlContent;
  });


});
</script>
<?php require_once('inc/footer.php'); ?>
