<?php
require_once('config.php');
$page_title = 'Edit Photocard Template '; // Custom Page Title

if (isset($_GET['photocard_id'])) {
  $photocard_id_get = $_GET['photocard_id'];
}else {
  $photocard_id_get = '';
}

if (isset($_POST['update_photocard'])) {
  $data_for_update = array(
    "PC_Title"=>$_POST['PC_Title'],
    "PC_CSS"=>$_POST['PC_CSS'],
    "PC_HTML"=>$_POST['PC_HTML'],
  );
  if (UpdateData('mahamudfutureit_photocard', 'ID', $photocard_id_get, $data_for_update)) {
    header("Location:photocard-edit.php?photocard_id=".$photocard_id_get);
  }else {
    $tt_alert = ttAlert('danger', 'Something went wrong to Update Template !');
  }
}

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;
      overflow: hidden;
  }
</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">
      <?php
      if ($photocard_id_get !='') {
        $all_photocard = showAllttdata("mahamudfutureit_photocard", "WHERE ID = ".$photocard_id_get);
        if (!empty($all_photocard)) {
            foreach ($all_photocard as $the_photocard) ;
              ?>
              <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"  value="<?php echo $the_photocard['PC_Title'] ?>" 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"><?php echo $the_photocard['PC_CSS'] ?></style>
                  <div id="MahamudFutureITPhotocard" class="m-auto mahamudfutureit-photo-card border"><?php echo $the_photocard['PC_HTML'] ?></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"><?php echo $the_photocard['PC_CSS'] ?></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"><?php echo $the_photocard['PC_HTML'] ?></textarea>
                    </div>
                    <button type="submit" class="mt-3 btn btn-primary" name="update_photocard">Update Template</button>
                  </div>
                </div>
              </form>

              <?php
        }else {
          ?>
          <div class="row">
            <div class="col-md-12">
              <h5 class="text-center mb-3">Template Not Found !</h5>
            </div>
          </div> 
          <?php
        }
      }else {
        ?>
        <div class="row">
          <div class="col-md-12">
            <h5 class="text-center mb-3">Template Not Found !</h5>
          </div>
        </div>
        <?php
      }
      ?>
  </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"
  });

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

  // 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;
  });

  // Initial replacement on page load
  const outputDiv = document.getElementById("MahamudFutureITPhotocard");
  outputDiv.innerHTML = replaceShortcodes(outputDiv.innerHTML);

  const outputStyle = document.getElementById("MahamudFutureITPhotocardCSS");
  outputStyle.innerHTML = replaceShortcodes(outputStyle.innerHTML);

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