Cacher is the code snippet organizer for pro developers

var firewall_rule = 1;
$(document).ready(function(){
  $("#step1").addClass("selected");
  $(".buttonFin").addClass('buttonDisabled');
  $('.buttonPrev').addClass('buttonDisabled');
});

$(".buttonFin").click(function(){
  var data = $("#createFirewallChangeTicket").serializeArray();
  //var data = JSON.stringify( $("#createFirewallChangeTicket").serializeArray() );

  formatdata = {};
  fcrs = {};

  $.each(data, function(){
    if (this['name'].match("^fcr_")){ //Works
      
      //create the fcr dict if not already created. 
      var fcr_name = "fcr_" + this.name.split("_")[1]; //Works
      if (!fcrs[fcr_name]){
        fcrs[fcr_name] = {};
      }
      //add fcr's to the fcr dict.
      if (fcrs[fcr_name]){ // Does the fcr_# already exist?
        var clean_name = this.name.split("_")[2];
        fcrs[fcr_name][clean_name] = this.value;
      }
    } else {
      formatdata[this['name']] = this['value'];
    }
  });

  formatdata['fcrs'] = fcrs;

  data = JSON.stringify(formatdata)

  $.ajaxSetup({ 
     beforeSend: function(xhr, settings) {
         function getCookie(name) {
             var cookieValue = null;
             if (document.cookie && document.cookie != '') {
                 var cookies = document.cookie.split(';');
                 for (var i = 0; i < cookies.length; i++) {
                     var cookie = jQuery.trim(cookies[i]);
                     // Does this cookie string begin with the name we want?
                     if (cookie.substring(0, name.length + 1) == (name + '=')) {
                         cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                         break;
                     }
                 }
             }
             return cookieValue;
         }
         if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
             // Only send the token to relative URLs i.e. locally.
             xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
         }
     } 
  });

  $.ajax({
    type: "POST",
    url: "create_fcr_ticket",
    data: data,
    statusCode: {
      200: function() {
        //console.log(200)
        location.href = '/tickets/view_status/'
      },
      500: function() {
        //alert('Something went wrong.')
      },
    },
    success: function(){},
    dataType: "json"
  });
})

$('.buttonAddFirewallField').click(function(){
  var firewallChange = `
    <div id="firewallRule">
      <div class="x_panel">
          <div class="x_title">
            <h2>Firewall Rule</h2>
              <ul class="nav navbar-right panel_toolbox">
                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                </li>
              </ul>
            <div class="clearfix"></div>
          </div>
        <div class="x_content">

            <div class="form-group">
              <label class="control-label col-md-3 col-sm-3 col-xs-12" for="interface">Interface<span class="required"></label>
              <div class="col-md-6 col-sm-6 col-xs-12">
                <input type="text" name="fcr_${firewall_rule}_interface" required="required" class="form-control col-md-7 col-xs-12">
              </div>
              <div class="clearfix"></div>
            </div>

            <div class="form-group">
              <label class="control-label col-md-3 col-sm-3 col-xs-12" for="sourceIP">Source IP<span class="required"></label>
              <div class="col-md-6 col-sm-6 col-xs-12">
                <input type="text" name="fcr_${firewall_rule}_sourceip" required="required" class="form-control col-md-7 col-xs-12" placeholder="192.168.1.5/24, 192.168.1.3"><br/>
              </div>
              <div class="clearfix"></div>
            </div>

            <div class="form-group">
              <label class="control-label col-md-3 col-sm-3 col-xs-12" for="destionationIP">Destination IP<span class="required"></label>
              <div class="col-md-6 col-sm-6 col-xs-12">
                <input type="text" name="fcr_${firewall_rule}_destinationip" required="required" class="form-control col-md-7 col-xs-12" placeholder="192.168.1.5/24, 192.168.1.3"><br/>
              </div>
              <div class="clearfix"></div>
            </div>

            <div class="form-group">
              <label class="control-label col-md-3 col-sm-3 col-xs-12" for="destinationProtocolPort">Destination Protocol and port<span class="required"></label>
              <div class="col-md-6 col-sm-6 col-xs-12">
                <input type="text" name="fcr_${firewall_rule}_destinationportprotocol" required="required" class="form-control col-md-7 col-xs-12" placeholder="TCP 5555 (*comment*)"><br/>
              </div>
              <div class="clearfix"></div>
            </div>

            <div class="form-group">
              <label class="control-label col-md-3 col-sm-3 col-xs-12" for="ACLRemark">ACL Remark<span class="required"></label>
              <div class="col-md-6 col-sm-6 col-xs-12">
                <input type="text" name="fcr_${firewall_rule}_aclremarks" required="required" class="form-control col-md-7 col-xs-12">
              </div>
              <div class="clearfix"></div>
            </div>

        </div>
      </div>
    </div>
  `;

  $('#firewallRule').append(firewallChange)
  firewall_rule++;
});

$(".buttonNext").click(function(){
      var s = 0;
      for(i = 1; i < 4; i++){        
        if($('#step-'+i).is(":visible")){
          $("#step-"+i).hide();
          $("#step"+i).addClass('done')
          s= i+1;
          $("#step-"+s).show();
          $(".buttonPrev").removeClass('buttonDisabled');
          $("#step"+s).removeClass()
          $("#step"+s).addClass('selected')

          if($('#step-4').is(":visible")){
            $('.buttonNext').addClass('buttonDisabled');
            $('.buttonFin').removeClass('buttonDisabled');
            $('.buttonFin').removeClass('btn-default');
          }
          return false;
        };              
      };
});

$(".buttonPrev").click(function(){
      var v = 0;
      $('.buttonFin').addClass("buttonDisabled");
      $('.buttonNext').removeClass("buttonDisabled");
      for(i = 4; i > 1; i--){        
        if($('#step-'+i).is(":visible")){
          $("#step-"+i).hide();
          $("#step"+i).addClass('done')
          v= i-1;
          $("#step-"+v).show();
          $("#step"+v).removeClass()
          $("#step"+v).addClass('selected')

          if($('#step-1').is(":visible")){
            $('.buttonPrev').addClass('buttonDisabled');
          }
          return false;
        };              
      };
});