<?php
$this->load->view('includes/header');
?>
<div class="page-title">
  <h2><span><?php echo $heading_title; ?></span></h2>
  <div class="buttons pull-right col-md-2">
    <a href="javascript:void(0);" onclick="$('#form').submit();" class="btn btn-primary pull-right">Save</a>
    <a href="<?php echo base_url('sitepanel/packages/'); ?>"  class="btn bg-red pull-left">Cancel</a>
  </div>
</div>

<div class="page-content-wrap">
  <div class="row">
    <div class="col-md-12">
      <?php echo form_open_multipart('', array('id' => 'form', 'class' => "form-horizontal")); ?>
      <div class="panel panel-default tabs">
        <ul class="nav nav-tabs" role="tablist">
          <li class="active"><a href="#tab-general" role="tab" data-toggle="tab">Package Details</a></li>
        </ul>
        <div class="panel-body tab-content">
          <div class="tab-pane active" id="tab-general">
            <div class="form-group">
              <label class="col-md-3 col-xs-12 control-label"><span class="required">*</span>Package Name</label>
              <div class="col-md-6">
                <input type="text" name="package_name" class="form-control" value="<?php echo set_value('package_name'); ?>" /><?php echo form_error('package_name'); ?>
              </div>
            </div>
            <div class="form-group">
              <label class="col-md-3 col-xs-12 control-label"><span class="required">*</span>Package Title</label>
              <div class="col-md-6">
                <input type="text" name="package_title" class="form-control" value="<?php echo set_value('package_title'); ?>" /><?php echo form_error('package_title'); ?>
              </div>
            </div>
            
            <div class="form-group">
              <label class="col-md-3 col-xs-12 control-label"><span class="required">*</span>Package Actual Price</label>
              <div class="col-md-3">
                <input type="text" name="package_actual_price" class="form-control" value="<?php echo set_value('package_actual_price'); ?>" /><?php echo form_error('package_actual_price'); ?>
              </div>
              <div class="col-md-3">Per Month</div>
            </div>
            
            <div class="form-group">
              <label class="col-md-3 col-xs-12 control-label"><span class="required">*</span>Package Price</label>
              <div class="col-md-3">
                <input type="text" name="package_price" class="form-control" value="<?php echo set_value('package_price'); ?>" /><?php echo form_error('package_price'); ?>
              </div>
              <div class="col-md-3">Per Month</div>
            </div>
            
            <div class="form-group">
              <label class="col-md-3 col-xs-12 control-label"><span class="required">*</span>Package Category</label>
              <div class="col-md-6">
                <input type="text" name="category_number" class="form-control" value="<?php echo set_value('category_number'); ?>" /><?php echo form_error('category_number'); ?>
              </div>
            </div>
            
            <div class="form-group">
              <label class="col-md-3 col-xs-12 control-label">Package Icon</label>
              <div class="col-md-9">
                <input type="file" class="fileinput btn-primary" name="package_icon"  title="Browse file"/>
                <br />
                <br />
                [ <?php echo $this->config->item('category.best.image.view'); ?> ]
              </div>
            </div>

            
            <div id="featureList">
              <?php
              for($i = 1; $i <= 10; $i++) {
                ?>
                <div class="form-group">
                  <label class="col-md-3 col-xs-12 control-label"><span class="required">*</span>Feature</label>
                  <div class="col-md-6">
                    <input type="text" name="feature[]" required class="form-control" value="" />
                  </div>
                  <div class="col-md-3">
                    <i class="fa fa-remove removeFeature" style="font-size: 18px; cursor: pointer; color: red;" title="Remove Feature"></i> &nbsp; <i class="fa fa-plus-square-o addFeature" style="font-size: 18px; cursor: pointer; color: green;" title="Add One Feature below"></i>
                  </div>
                </div>
                <?php
              }
              ?>
            </div>
            <div class="form-group">
              <label class="col-md-3 col-xs-12 control-label">&nbsp;</label>
              <div class="col-md-6">
                <i class="fa fa-plus-square-o addMore pull-right" style="font-size: 18px; cursor: pointer; margin:10px 0px; color: green;" title="Add More Feature"></i>
              </div>
            </div>
            
            <div class="form-group">
              <label class="col-md-3 col-xs-12 control-label">Payment Link</label>
              <div class="col-md-6">
                <input type="text" name="payment_link" class="form-control" value="<?php echo set_value('payment_link'); ?>" /><?php echo form_error('payment_link'); ?>
              </div>
            </div>


          </div>
        </div>
      </div>
      <?php echo form_close(); ?>
    </div>
  </div>
</div>
<?php $this->load->view('includes/footer'); ?>
<script type="text/javascript">
  $('.addMore').click(function(){
    $('#featureList').append('<div class="form-group"><label class="col-md-3 col-xs-12 control-label"><span class="required">*</span>Feature</label><div class="col-md-6"><input type="text" name="feature[]" required class="form-control" value="" /></div><div class="col-md-3"><i class="fa fa-remove removeFeature" style="font-size: 18px; cursor: pointer; color: red;" title="Remove Feature"></i> &nbsp; <i class="fa fa-plus-square-o addFeature" style="font-size: 18px; cursor: pointer; color: green;" title="Add One Feature below"></i></div></div>');
  });
  $("#featureList").on("click", ".addFeature", function () {
    $(this).parent().parent().after('<div class="form-group"><label class="col-md-3 col-xs-12 control-label"><span class="required">*</span>Feature</label><div class="col-md-6"><input type="text" name="feature[]" class="form-control" value="" /></div><div class="col-md-3"><i class="fa fa-remove removeFeature" style="font-size: 18px; cursor: pointer; color: red;" title="Remove Feature"></i> &nbsp; <i class="fa fa-plus-square-o addFeature" style="font-size: 18px; cursor: pointer; color: green;" title="Add One Feature below"></i></div></div>');
  });
  $( "#featureList").on( "click", ".removeFeature", function() {
    $(this).parent().parent().remove();
  });
</script>