<div class="container-fluid">
    <div class="block-header">
        <h2>Custom Fields > Products Fields</h2>
    </div>
    <div class="row">
        <div class="col-lg-12 col-md-12">
            <div class="card">
                <div class="header">
                    <h2>Products Fields</h2> 
                    <a href="javascript:void(0)" class="btn btn-warning waves-effect waves-light m-t-20" onclick="ShowAddModal()">Create New Custom Field</a>
                </div>
                <div class="body">
                   <div class="table-responsive1">
                        <table class="table table-bordered table-striped table-hover">
                            <thead>
                                <tr>
                                   <th>ID</th>
					               <th>Field name</th>
					               <th>Type</th>
					               <th>Length</th>
					               <th>Placement</th>
					               <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php 
				                foreach (Wo_GetCustomFields('product') as $wo['field']) {
				                    echo Wo_LoadAdminPage('products-fields/list');
				                }
				                ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    </div>
    <!-- #END# Vertical Layout -->
<div class="modal fade" id="AddCustomModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content modal_content_back">
      <div class="modal-header">
        <h5 class="modal-title" id="editcategoryModalLabel">Add New Field</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="add_custom_field_form_alert"></div>
        <div class="help-block">Use {{LANG lang_variable}} to translate the field data. e.g: {{LANG first_name}}</div><br>
        <form class="add_custom_field_form" method="POST" id="modal-body-langs">
          <label for="type">Field Type</label>
          <select class="form-control show-tick chosen-select" id="type" name="type">
            <option value="textbox">Textbox</option>
            <option value="textarea">Textarea</option>
            <option value="selectbox">Select box</option>
          </select>
          <div class="clearfix"></div>
          <br>
          <div class="form-group form-float">
              <div class="form-line">
                  <input type="text" id="name" name="name" class="form-control">
                  <label class="form-label">Field Name</label>
              </div>
          </div>
         
          <div class="form-group form-float">
              <div class="form-line">
                  <input type="text" id="length" name="length" class="form-control" value="32">
                  <label class="form-label">Field Length: <small>Default value is 32, and max value is 1000</small></label>
              </div>
          </div>
           <div class="form-group form-float">
              <div class="form-line">
                  <textarea name="description" id="description" class="form-control" cols="30" rows="3"></textarea>
                  <label class="form-label">Field Description: <small>The description will show under the field</small></label>
              </div>
          </div>
          <label for="required">Required Field <small>(Can Not Be Empty)</small></label>
          <select class="form-control show-tick chosen-select" id="required" name="required">
            <option value="on">Required</option>
            <option value="off">Not Required</option>
          </select>
          <div class="clearfix"></div>
          <br><br>
          <div class="form-group form-float options" style="display:none">
              <div class="form-line">
                  <textarea name="options" id="options" class="form-control" cols="30" rows="3"></textarea>
                  <label class="form-label">Select Field Options: <small>One option per line.</small></label>
              </div>
          </div>
          <input type="hidden" name="hash_id" value="<?php echo Wo_CreateSession();?>">
          <input type="hidden" name="placement" id="placement" value="product">
          <div class="modal-footer">
        
        <button type="button" class="btn btn-secondary modal_close_btn" data-dismiss="modal">CLOSE</button>
        <button type="submit" class="btn btn-primary" id="add_custom_field_button">SAVE CHANGES</button>
      </div>
        </form>
        
      </div>
      
    </div>
  </div>
</div>


<div class="modal fade" id="EditCustomModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content modal_content_back">
      <div class="modal-header">
        <h5 class="modal-title" id="editcategoryModalLabel">Add New Field</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="edit_custom_field_form_alert"></div>
        <div class="help-block">Use {{LANG lang_variable}} to translate the field data. e.g: {{LANG first_name}}</div><br>
        <form class="edit_custom_field_form" method="POST" id="modal-body-langs">
          <div class="edit_custom_field_data"></div>

          <input type="hidden" name="hash_id" value="<?php echo Wo_CreateSession();?>">
          <input type="hidden" name="placement" id="placement" value="product">
          <div class="modal-footer">
        
        <button type="button" class="btn btn-secondary modal_close_btn" data-dismiss="modal">CLOSE</button>
        <button type="submit" class="btn btn-primary" id="edit_custom_field_button">SAVE CHANGES</button>
      </div>
        </form>
        
      </div>
      
    </div>
  </div>
</div>

<script>
var add_custom_field_form = $('form.add_custom_field_form');

add_custom_field_form.ajaxForm({
    url: Wo_Ajax_Requests_File() + '?f=admin_setting&s=add_custom_field_form',
    beforeSend: function() {
        $('#add_custom_field_button').text("Please wait..");
    },
    success: function(data) {
        if (data.status == 200) {
            $('#add_custom_field_button').text('SAVE CHANGES');
            $('.add_custom_field_form_alert').html('<div class="alert alert-success"><i class="fa fa-check"></i> Custom Field successfully added</div>');
            setTimeout(function () {
                $('.add_custom_field_form_alert').empty();
            }, 2000);
            window.location.reload();
        }
        else{
          $('.add_custom_field_form_alert').html('<div class="alert alert-danger"><i class="fa fa-check"></i> '+data.message+'</div>');
            setTimeout(function () {
                $('.add_custom_field_form_alert').empty();
            }, 2000);
        }
    }
});

var edit_custom_field_form = $('form.edit_custom_field_form');

edit_custom_field_form.ajaxForm({
    url: Wo_Ajax_Requests_File() + '?f=admin_setting&s=edit_custom_field_form',
    beforeSend: function() {
        $('#edit_custom_field_button').text("Please wait..");
    },
    success: function(data) {
        if (data.status == 200) {
            $('#edit_custom_field_button').text('SAVE CHANGES');
            $('.edit_custom_field_form_alert').html('<div class="alert alert-success"><i class="fa fa-check"></i> Custom Field successfully edited</div>');
            setTimeout(function () {
                $('.edit_custom_field_form_alert').empty();
            }, 2000);
            window.location.reload();
        }
        else{
          $('.edit_custom_field_form_alert').html('<div class="alert alert-danger"><i class="fa fa-check"></i> '+data.message+'</div>');
            setTimeout(function () {
                $('.edit_custom_field_form_alert').empty();
            }, 2000);
        }
    }
});


$(function() {
  $('.chosen-select').on('change', function(evt, params) {
       var selectedValue = $(this).val();
       if (selectedValue == 'selectbox') {
          $('.options').fadeIn(200);
       } else {
          $('.options').fadeOut(200);
       }
   });
});
function ShowAddModal() {
  $('#AddCustomModal').modal('show');
}
function ShowEditModal(self,id) {
  $(self).text("Please wait..");
  $.post(Wo_Ajax_Requests_File() + '?f=admin_setting&s=get_custom_field_info', {id: id,type: 'product'}, function(data, textStatus, xhr) {
    if (data.status == 200) {
      $('.edit_custom_field_data').html(data.html);
      $('#EditCustomModal').modal('show');
    }
    $(self).text("EDIT");
  });
  
}
$(function () {
  $('table').DataTable();
});


function Wo_DeleteStatus(id){
  if (!id || !confirm('Are you sure you want to delete this status?')) {
    return false;
  }
  $("[data-status-id='"+id+"']").slideUp(function(){
    $(this).remove();
  });
  $.ajax({
    url: Wo_Ajax_Requests_File(),
    type: 'GET',
    dataType: 'json',
    data: {f: 'status',s:'remove',id:id},
  })
  .done(function(data) {
    
  })
  .fail(function() {
    console.log("error");
  })
}
function Wo_DeleteField(id) {
  if (id == '') {
    return false;
  }
  if (!confirm('Are you sure you want to delete this field?')) {
    return false;
  }
  $('#' + id).fadeOut(300, function () {
    $(this).remove();
  });
  $.get(Wo_Ajax_Requests_File(), {f: 'admin_setting', s:'delete_custom_field', id:id, type:'product'});
}
</script>