<?php

  function echoSelected($cond, $field){
    echo (isset($cond) && $cond == $field) ? 'selected="selected"' : '';
  }

?>
<?php echo $header; ?><?php echo $column_left; ?>
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right">
        <button type="submit" form="form-promotion" data-toggle="tooltip" title="<?php echo $button_save; ?>" class="btn btn-primary"><i class="fa fa-save"></i></button>
        <a href="<?php echo $cancel; ?>" data-toggle="tooltip" title="<?php echo $button_cancel; ?>" class="btn btn-default"><i class="fa fa-reply"></i>&nbsp;Back</a></div>
      <h1><?php echo $heading_title; ?></h1>
      <ul class="breadcrumb">
        <?php foreach ($breadcrumbs as $breadcrumb) { ?>
        <li><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a></li>
        <?php } ?>
      </ul>
    </div>
  </div>
  <div class="container-fluid">
    <?php if ($error_warning) { ?>
    <div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> <?php echo $error_warning; ?>
      <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
    <?php } ?>
    <?php if ($success) { ?>
      <div class="alert alert-success"><i class="fa fa-check-circle"></i> <?php echo $success; ?>
        <button type="button" class="close" data-dismiss="alert">&times;</button>
      </div>
    <?php } ?>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-pencil"></i><?php echo isset($is_new) ? 'Add new Promotion ' : 'Promotion'; ?> <?php echo isset($moduleData['name']) ? ' - '.$moduleData['name'] : ''; ?></h3>
        <?php if(isset($is_new)) { ?>
          <a data-toggle="modal" data-target="#Tutorials" style="margin-top: -6px;padding: 5px 10px;" class="pull-right btn btn-primary">Interactive tutorial</a>
        <?php } ?>

      </div>
      <div class="panel-body">

        <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-promotion" class="form-horizontal">

          <ul class="nav nav-tabs">
            <li class="active"><a href="#tab-general" data-toggle="tab">General Settings</a></li>
            <li><a href="#tab-conditions" data-toggle="tab">Conditions</a></li>
            <li><a href="#tab-actions" data-toggle="tab">Actions</a></li>
            <li><a href="#tab-info"data-toggle="tab">Promotion page</a></li>
            <!--li><a href="#tab-popup"data-toggle="tab">Popup Settings</a></li-->
          </ul> 

          <div class="tab-content">
            <?php
            if (!function_exists('modification_vqmod')) {
              function modification_vqmod($file) {
                if (class_exists('VQMod')) {
                  return VQMod::modCheck(modification($file), $file);
                } else {
                  return modification($file);
                }
              }
            }
            ?>
            <div class="tab-pane active" id="tab-general">
            <?php require_once modification_vqmod(DIR_APPLICATION.'view/template/'.$modulePath.'/tab_general.php'); ?>
            </div>

            <div class="tab-pane" id="tab-conditions">
            <?php require_once modification_vqmod(DIR_APPLICATION.'view/template/'.$modulePath.'/tab_conditions.php'); ?>
            </div>

            <div class="tab-pane" id="tab-actions">
            <?php require_once modification_vqmod(DIR_APPLICATION.'view/template/'.$modulePath.'/tab_actions.php'); ?>
            </div>

            <div class="tab-pane" id="tab-info">
            <?php require_once modification_vqmod(DIR_APPLICATION.'view/template/'.$modulePath.'/tab_information.php'); ?>
            </div>

            <!--div class="tab-pane" id="tab-popup">
            <?php require_once modification_vqmod(DIR_APPLICATION.'view/template/'.$modulePath.'/tab_popup.php'); ?>
            </div-->
       
            </div>
        </form>
      </div>
    </div>
  </div>
</div>


<!-- Modal -->
<div id="Tutorials" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Available Tutorials</h4>
      </div>
      <div class="modal-body">
        <p>
          The interactive tutorial will help you set up the conditions and the actions. You need to configure the general settings individually.
        </p>
        <ol id="tutorials_list">
          <li style="margin-top:2px;" onclick="start_tour(data_tour_bogof);"><a class="btn btn-default" >Buy 1 Get 1 for Free</a></li>
          <li style="margin-top:2px;" onclick="start_tour(data_tour_flat_disc_on_cat);"><a class="btn btn-default" >Discount on a specific category</a></li>
          <li style="margin-top:2px;" onclick="start_tour(data_free_shipping_on_orders);"><a class="btn btn-default" >Free shipping on orders over/under/equal X</a></li>
        </ol>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>







<script type="text/javascript">

$('.display_when_enabled').each(function() {
  if($($(this).attr('data-triggered-from')).val() == 'yes') {
    $(this).show();
  }
});

$(document).ready(function() {
  $('.display_when_enabled').each(function() {
    var ele = $(this);
    $( ele.attr('data-triggered-from') ).on('change', function() {
      if($(this).val() == 'yes') {
        ele.show();
      } else {
        ele.hide();
      }
    });
  });
});


$('#tutorials_list li').click(function() {
  $('#Tutorials').modal('hide');
});


$(document).ready(function () {


      var conds = ($('#conditions_group div[id^=condition].row').last().data('id') > 0) ? $('#conditions_group div[id^=condition].row').last().data('id') + 1 : '1';
      $('#addnewcond').click(function (){

            html =                           '<div id="condition'+ conds +'" data-id="'+ conds +'" class="row">';
            html +=                   '<hr><div class="col-xs-3">';
            html +=                       '<select id="mainSelect'+ conds +'" onchange="getFields('+ conds +');" name="conditions['+ conds +'][condSelect]" class="form-control">';
            html += '<option disabled="disabled" selected="selected">-- Select a condition --</option>'
            html +=                          '<optgroup label="Cart requirements">';
            html +=                            '<option value="cart_quantity">Cart quantity</option>';
            html +=                            '<option value="cart_total" >Cart total</option>';
            html +=                           '<option value="cart_weight">Cart weight (kg)</option>';
            html +=                         '</optgroup>';
            html +=                         '<optgroup label="Product requirements">';
            html +=                          '<option value="product_name">Product in cart (autocomplete)</option>';
            html +=                        '</optgroup>';
            html +=                         '<optgroup label="Customer requirements">';
            html +=                          '<option value="customer_name">Customer name</option>';
            html +=                          '<option value="customer_order">Customer order count</option>';
            html +=                          '<option value="customer_reg_date">Customer registred since</option>';
            html +=                         '</optgroup>';
            html +=                         '<optgroup label="Manufacturer requirements">';
            html +=                          '<option value="manufac_name">Product from manufacturer in cart</option>';
            html +=                         '</optgroup>';
            html +=                         '<optgroup label="Category requirements">';
            html +=                          '<option value="category_name">Product from category in cart</option>';
            html +=                         '</optgroup>';
            html +=                         '<optgroup label="Other requirements">';
            html +=                          '<option value="day">Day of the week</option>';                    
            html +=                        '</optgroup>';
            html +=                   '</select>'; 
            html +=                 '</div>';

             html +=                 '<div class="col-xs-1" style="font-weight: bold;width: 2%;line-height: 36px;">is</div>';


            html +=                 '<div id="equal-input'+ conds +'" class="col-xs-2">';
            html +=                   '<select name="conditions['+ conds +'][condEquals]" class="form-control">';
            html +=                     '<option value="eq" selected="selected">Equal to</option>';
            html +=                     '<option value="neq">Not equal to</option>';
            html +=                     '<option value="gtr">Greater than</option>';
            html +=                     '<option value="lth">Less than</option>';
            html +=                   '</select>';
            html +=                 '</div>';

            html +=                 '<div id="condition-input'+ conds +'" class="col-xs-2">';
            html +=                   '<input type="text" class="form-control" name="conditions['+ conds +'][condition_input]" placeholder="Enter Condition" value="" />';
            html +=                 '</div>';

            html +=                 '<div id="reg_date'+ conds +'" style="display:none;">';
            html +=                 '  <div class="col-sm-2 date">';
            html +=                 '    <div class="input-group">';
            html +=                 '      <input type="text" name="conditions['+ conds +'][customer_date]" class="form-control" value="" placeholder="YYYY-MM-DD" data-date-format="YYYY-MM-DD" />';
            html +=                 '      <span class="input-group-btn">';
            html +=                 '        <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>';
            html +=                 '      </span>';
            html +=                 '    </div>';
            html +=                 '  </div>';
            html +=                 '</div>';

            html +=                 '<div id="autocomplete-product'+ conds +'" style="display:none;">';
            html +=                   '<div class="col-xs-2">';
            html +=                   '<input type="text" class="form-control products-autocomplete" placeholder="Enter Product" value="" />';
            html +=                   '<input type="hidden" name="conditions['+ conds +'][product_id]" value="" />';
            html +=                 '</div>';

            html +=                   '<div class="col-sm-3">';
            html +=                     '<div class="input-group">';
            html +=                       '<div class="input-group-addon">Min. quantity</div>';
            html +=                       '<input type="number" name="conditions['+ conds +'][product_quantity]" class="form-control" value="1" />';
            html +=                     '</div>';
            html +=                   '</div>';
            html +=                 '</div>';

            html +=                 '<div id="autocomplete-category'+ conds +'" style="display:none;">';
            html +=                   '<div class="col-xs-2">';
            html +=                   '<input type="text" class="form-control categories-autocomplete" placeholder="Enter Category" value="" />';
            html +=                   '<input type="hidden" name="conditions['+ conds +'][category_id]" value="" />';
            html +=                 '</div>';

            html +=                 '<div style="width: 12%;" class="col-sm-2">';
            html +=                 '        Include parent categories';
            html +=                 '        <input style="float:right;" type="checkbox" name="conditions['+ conds +'][category_parent]" value="yes"> <br>';
            html +=                 '        Include child categories';
            html +=                 '        <input style="float:right;" type="checkbox" name="conditions['+ conds +'][category_child]" value="yes"> ';
            html +=                 '    </div>';



            html +=                   '<div style="width: 13%;" class="col-sm-3">';
            html +=                     '<div class="input-group">';
            html +=                       '<div class="input-group-addon">Min. quantity</div>';
            html +=                       '<input type="number" name="conditions['+ conds +'][category_quantity]" class="form-control" value="1" />';
            html +=                     '</div>';
            html +=                   '</div>';
            html +=                 '</div>';

            html +=                 '<div id="autocomplete-customer'+ conds +'" style="display:none;">';
            html +=                 ' <div class="col-xs-2">';
            html +=                 '   <input type="text" class="form-control customer-autocomplete" placeholder="Enter Customer" value="" />';
            html +=                 '   <input type="hidden" name="conditions['+ conds +'][customer_id]" value="" />';
            html +=                 ' </div>';
            html +=                 '</div>';


            html +=               '<div id="autocomplete-manufacturer'+ conds +'" style="display:none;">';
            html +=                 '<div class="col-xs-2">';
            html +=                    '<input type="text" class="form-control manufacturer-autocomplete" placeholder="Enter Manufacturer" value="" />';
            html +=                    '<input type="hidden" name="conditions['+ conds +'][manufacturer_id]" value="" />';
            html +=                 '</div>';
            html +=                  '<div class="col-sm-3">';
            html +=                     '<div class="input-group">';
            html +=                       '<div class="input-group-addon">Min. quantity</div>';
            html +=                       '<input type="number" name="conditions['+ conds +'][manufacturer_quantity]" class="form-control" value="" />';
            html +=                     '</div>';
            html +=                   '</div>';
            html +=                '</div>';


            html +=                 '<div id="dayofweek'+ conds +'" style="display:none;">';
            html +=                 '  <div class="col-xs-3">';
            html +=                 '  <select name="conditions['+ conds +'][dayofweek]" class="form-control">';
            html +=                 '    <option value="mon" selected="selected">Monday</option>';
            html +=                 '    <option value="tue">Tuesday</option>';
            html +=                 '    <option value="wed">Wednesday</option>';
            html +=                 '    <option value="thu">Thursday</option>';
            html +=                 '    <option value="fri">Friday</option>';
            html +=                 '    <option value="sat">Saturday</option>';
            html +=                 '    <option value="sun">Sunday</option>';
            html +=                 '  </select>';
            html +=                 '  </div>';
            html +=                 '</div>';


            html +=                 '<div class="col-xs-3 ">';
            html +=                 '<a data-remove-id="'+ conds +'" data-toggle="tooltip" title="Remove" class="btn btn-danger" onclick="remove_cond('+ conds +');" data-original-title="">';
            html +=                   '<i class="fa fa-trash"></i>';
            html +=                 '</a>';                  
            html +=                '</div>';


            html +=              '</div>';

             $('#conditions_group').append(html);

              $('#reg_date' + conds + ' .date').datetimepicker({
               pickTime: false
              });

             getFields(conds);

             applyAutocomplete(conds);

            conds++;
      });

});


function applyAutocomplete(id_cond){
  $('#condition'+id_cond).find('.products-autocomplete').autocomplete({
                'source': function(request, response) {
                  $.ajax({
                    url: 'index.php?route=catalog/product/autocomplete&token=<?php echo $token; ?>&filter_name=' +  encodeURIComponent(request),
                    dataType: 'json',     
                    success: function(json) {

                      response($.map(json, function(item) {
                        return {
                          label: item['name'],
                          value: item['product_id']
                        }
                      }));
                    }
                  });
                },
                'select': function(item) {
                  $(this).val(item['label']);
                  $('input[name="conditions['+id_cond+'][product_id]"]').val(item['value']);
                  $(this).parent().find('.products-autocomplete').attr('readonly', true);
                  
                }
              });

             $('#condition'+id_cond).find('.products-autocomplete').click(function() {
                $(this).attr('readonly', false);
                $(this).val('');
            });

            $('#condition'+id_cond).find('.categories-autocomplete').autocomplete({
                'source': function(request, response) {
                  $.ajax({
                    url: 'index.php?route=catalog/category/autocomplete&token=<?php echo $token; ?>&filter_name=' +  encodeURIComponent(request),
                    dataType: 'json',     
                    success: function(json) {

                      response($.map(json, function(item) {
                        return {
                          label: item['name'],
                          value: item['category_id']
                        }
                      }));
                    }
                  });
                },
                'select': function(item) {
                  $(this).val(item['label']);
                  $('input[name="conditions['+id_cond+'][category_id]"]').val(item['value']);
                  $(this).parent().find('.categories-autocomplete').attr('readonly', true);
                  
                }
              });

             $('#condition'+id_cond).find('.categories-autocomplete').click(function() {
                $(this).attr('readonly', false);
                $(this).val('');
            });

             $('#condition'+id_cond).find('.customer-autocomplete').autocomplete({
              'source': function(request, response) {
                $.ajax({
                  url: 'index.php?route=customer/customer/autocomplete&token=<?php echo $token; ?>&filter_name=' +  encodeURIComponent(request),
                  dataType: 'json',     
                  success: function(json) {
                    response($.map(json, function(item) {
                      return {
                        label: item['name'],
                        value: item['customer_id']
                      }
                    }));
                  }
                });
              },
              'select': function(item) {
                  $(this).val(item['label']);
                  $('input[name="conditions['+id_cond+'][customer_id]"]').val(item['value']);
                  $(this).parent().find('.customer-autocomplete').attr('readonly', true);
              } 
            });

              $('#condition'+id_cond).find('.customer-autocomplete').click(function() {
                $(this).attr('readonly', false);
                $(this).val('');
              });

             $('#condition'+id_cond).find('.manufacturer-autocomplete').autocomplete({
                'source': function(request, response) {
                  $.ajax({
                    url: 'index.php?route=catalog/manufacturer/autocomplete&token=<?php echo $token; ?>&filter_name=' +  encodeURIComponent(request),
                    dataType: 'json',
                    success: function(json) {
                      response($.map(json, function(item) {
                        return {
                          label: item['name'],
                          value: item['manufacturer_id']
                        }
                      }));
                    }
                  });
                },
                'select': function(item) {
                  $(this).val(item['label']);
                  $('input[name="conditions['+id_cond+'][manufacturer_id]"]').val(item['value']);
                  $(this).parent().find('.manufacturer-autocomplete').attr('readonly', true);
                }
              });

              $('#condition'+id_cond).find('.manufacturer-autocomplete').click(function() {
                $(this).attr('readonly', false);
                $(this).val('');
              });



}

$('#form-promotion').submit(function(e) {
    if($('#input-name').val().length == 0) {
      e.preventDefault();
      $('a[href="#tab-general"]').click();
      $('#input-name').parents('div.form-group').addClass('has-error');
    }
});
</script>
<?php echo $footer; ?>