<!DOCTYPE html>
<html>
<head>
  <!-- TABLES CSS CODE -->
<?php include"comman/code_css.php"; ?>
<!-- </copy> -->  
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

 <?php include"sidebar.php"; ?>
 <?php
	if(!isset($template_name)){
      $template_name=$content=$undelete_bit= $variables="";
	}

  $template_name_readonly ='';
  if($undelete_bit==1){
    $template_name_readonly ='readonly';
  }
 ?>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        <?= $this->lang->line('sms_template'); ?>
        <small>Add/Update Template</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="<?php echo $base_url; ?>dashboard"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="<?php echo $base_url; ?>templates/sms"><?= $this->lang->line('sms_templates_list'); ?></a></li>
        <li><a href="<?php echo $base_url; ?>templates/sms_new"><?= $this->lang->line('add_template'); ?></a></li>
        <li class="active"><?= $this->lang->line('sms_template'); ?></li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <!-- right column -->
        <div class="col-md-12">
          <!-- Horizontal Form -->
          <div class="box box-primary ">
            <div class="box-header with-border">
              <h3 class="box-title">Please Enter Valid Data</h3>
            </div>
            <!-- /.box-header -->
             <!-- form start -->
            <form class="form-horizontal" id="template-form" >
              <input type="hidden" name="<?php echo $this->security->get_csrf_token_name();?>" value="<?php echo $this->security->get_csrf_hash();?>">
              <input type="hidden" id="base_url" value="<?php echo $base_url;; ?>">
              <input type="hidden" name="store_id" value="<?php echo get_current_store_id(); ?>">
              <div class="box-body">
                <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                      <label for="template_name" class="col-sm-4 control-label"><?= $this->lang->line('template_name'); ?><label class="text-danger">*</label></label>

                  <div class="col-sm-8">
                    <input type="text" class="form-control input-sm" id="template_name" name="template_name" placeholder="" <?=$template_name_readonly;?>  value="<?php print $template_name; ?>" autofocus >
              <span id="template_name_msg" style="display:none" class="text-danger"></span>
                  </div>
                  </div>
                  
                  <div class="form-group">
                      <label for="content" class="col-sm-4 control-label"><?= $this->lang->line('content'); ?><label class="text-danger">*</label></label>

                  <div class="col-sm-8">
                    <textarea type="text" spellcheck="false" class="form-control" rows="6" id="content" name="content" placeholder="Hi {{customer_name}},

We have exciting news! 🎉

Visit our store {{store_name}} today and get amazing discounts!

📍 {{store_address}}
📞 {{store_mobile}}
🌐 {{store_website}}

Valid until {{current_date}}

Thank you for choosing us!"><?php print $content; ?></textarea>
                    <div class="help-block">
                      <strong>Tip:</strong> Use variables from the sidebar to personalize your messages. Click on any variable to copy it to your template.
                    </div>
          <span id="content_msg" style="display:none" class="text-danger"></span>
                  </div>
                  </div>
                 
                  
                  <!-- ########### -->
               </div>

               <div class="col-md-5">
                    <div class="form-group">
                        <div class="col-sm-12">
                          <label class="control-label"><u>AVAILABLE VARIABLES</u></label><br>
                          <div class="well well-sm" style="max-height: 300px; overflow-y: auto;">
                            <div class="variable-section">
                              <strong>Customer Info:</strong><br>
                              <span class="variable-item" onclick="insertVariable('{{customer_name}}')" title="Click to insert">{{customer_name}}</span> - Customer's name<br>
                              <span class="variable-item" onclick="insertVariable('{{customer_mobile}}')" title="Click to insert">{{customer_mobile}}</span> - Customer's mobile<br><br>
                              
                              <strong>Store Info:</strong><br>
                              <span class="variable-item" onclick="insertVariable('{{store_name}}')" title="Click to insert">{{store_name}}</span> - Your store name<br>
                              <span class="variable-item" onclick="insertVariable('{{store_mobile}}')" title="Click to insert">{{store_mobile}}</span> - Store contact number<br>
                              <span class="variable-item" onclick="insertVariable('{{store_address}}')" title="Click to insert">{{store_address}}</span> - Store address<br>
                              <span class="variable-item" onclick="insertVariable('{{store_website}}')" title="Click to insert">{{store_website}}</span> - Store website<br><br>
                              
                              <strong>Transaction Info:</strong><br>
                              <span class="variable-item" onclick="insertVariable('{{sales_id}}')" title="Click to insert">{{sales_id}}</span> - Sales/Invoice ID<br>
                              <span class="variable-item" onclick="insertVariable('{{sales_date}}')" title="Click to insert">{{sales_date}}</span> - Sales date<br>
                              <span class="variable-item" onclick="insertVariable('{{sales_amount}}')" title="Click to insert">{{sales_amount}}</span> - Total sales amount<br>
                              <span class="variable-item" onclick="insertVariable('{{paid_amt}}')" title="Click to insert">{{paid_amt}}</span> - Amount paid<br>
                              <span class="variable-item" onclick="insertVariable('{{due_amt}}')" title="Click to insert">{{due_amt}}</span> - Due amount<br><br>
                              
                              <strong>Date & Time:</strong><br>
                              <span class="variable-item" onclick="insertVariable('{{current_date}}')" title="Click to insert">{{current_date}}</span> - Today's date<br>
                              <span class="variable-item" onclick="insertVariable('{{current_time}}')" title="Click to insert">{{current_time}}</span> - Current time
                            </div>
                          </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="col-sm-12">
                          <label class="control-label"><u>TEMPLATE EXAMPLES</u></label><br>
                          <div class="well well-sm">
                            <strong>Promotional:</strong><br>
                            <small>Hi {{customer_name}}, visit {{store_name}} for 20% off! Valid until {{current_date}}</small><br><br>
                            
                            <strong>Welcome:</strong><br>
                            <small>Welcome {{customer_name}}! Thank you for choosing {{store_name}}. Call {{store_mobile}} for support.</small><br><br>
                            
                            <strong>Reminder:</strong><br>
                            <small>Hi {{customer_name}}, don't forget your appointment at {{store_name}} on {{current_date}}.</small>
                          </div>
                        </div>
                    </div>
                </div>
                  <!-- ########### -->
</div>
              
        
        
              </div>
              <!-- /.box-body -->

              <div class="box-footer">
                <div class="col-sm-8 col-sm-offset-2 text-center">
                   <!-- <div class="col-sm-4"></div> -->
                   <?php
                      if($template_name!=""){
                           $btn_name="Update";
                           $btn_id="update";
                          ?>
                            <input type="hidden" name="q_id" id="q_id" value="<?php echo $q_id;?>"/>
                            <?php
                      }
                                else{
                                    $btn_name="Save";
                                    $btn_id="save";
                                }
                      
                                ?>
                                 
                   <div class="col-md-3 col-md-offset-3">
                      <button type="button" id="<?php echo $btn_id;?>" class=" btn btn-block btn-success" title="Save Data"><?php echo $btn_name;?></button>
                   </div>
                   <div class="col-sm-3">
                    <a href="<?=base_url('dashboard');?>">
                      <button type="button" class="col-sm-3 btn btn-block btn-warning close_btn" title="Go Dashboard">Close</button>
                    </a>
                   </div>
                </div>
             </div>
              <!-- /.box-footer -->
            </form>
            <!-- form start -->
            
          </div>
          <!-- /.box -->

        </div>
        <!--/.col (right) -->
      </div>
      <!-- /.row -->

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

 <?php include"footer.php"; ?>


  <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- SOUND CODE -->
      <?php include"comman/code_js_sound.php"; ?>
      <!-- TABLES CODE -->
      <?php include"comman/code_js.php"; ?>
<style>
.variable-item {
  cursor: pointer;
  color: #3c8dbc;
  font-weight: bold;
  padding: 2px 4px;
  border-radius: 3px;
  transition: background-color 0.2s;
}
.variable-item:hover {
  background-color: #f0f0f0;
  color: #2c5aa0;
}
.variable-section strong {
  color: #333;
  font-size: 12px;
}
</style>

<script type="text/javascript">
  $(document).submit(function(e){
    e.preventDefault();
  });
  
  // Function to insert variable into textarea
  function insertVariable(variable) {
    var textarea = document.getElementById('content');
    var start = textarea.selectionStart;
    var end = textarea.selectionEnd;
    var text = textarea.value;
    var before = text.substring(0, start);
    var after = text.substring(end, text.length);
    
    textarea.value = before + variable + after;
    textarea.selectionStart = textarea.selectionEnd = start + variable.length;
    textarea.focus();
  }
</script>
<script src="<?php echo $theme_link; ?>js/templates.js"></script>
<!-- Make sidebar menu hughlighter/selector -->
<script>$(".<?php echo basename(__FILE__,'.php');?>-active-li").addClass("active");</script>
</body>
</html>
