<?php
$this->load->view("top_application");
if ($this->input->get_post('attribute_name')) {
  $an = $this->input->get_post('attribute_name');
  $anName = $an[0];
  unset($an[0]);
  $av = $this->input->get_post('attribute_value');
  $avlue = $av[0];
} else {
  $an = array();
  $anName = '';
  $avlue = '';
  $av = array();
}
?>
<section>
  <div class="tz">
    <!--LEFT SECTION-->
    <div class="tz-l">      
      <?php $this->load->view("members/left"); ?>
    </div>
    <!--CENTER SECTION-->
    <div class="tz-4">
      <div class="tz-2-com tz-2-main">
        <h4>Add New Service</h4>
        <div class="db-list-com tz-db-table">
          <div class="ds-boar-title">
            <h2>Add New Service</h2>
          </div>
          <div class="hom-cre-acc-left hom-cre-acc-right">
            <div class="">
              <?php
              echo validation_message();
              ?>
              <form action="" enctype="multipart/form-data" method="post" class="chooseCategory">
                <div class="row">
                  <div class="input-field col s12">
                    <input id="product_name" name="product_name" value="<?php echo set_value('product_name'); ?>" required type="text" class="validate">
                    <label for="product_name">Service Name*</label>
                  </div>                  
                </div>
                <div class="row">
                  <div class="input-field col s3">
                    <div class="">
                      <img src="<?php echo theme_url(); ?>images/upload_image.jpg" id="pic1" class="profile_picture" width="125" height="125"  /><div class="clearfix"></div>
                      <a href="javascript:void(0);" onclick="$('#img1').trigger('click');"  class="profile_picture btn btn-xs btn-info"><i class="fa fa-plus-circle"></i> Service Image</a>
                    </div>
                    <input id="img1" name="img1" type="file" onchange="document.getElementById('pic1').src = window.URL.createObjectURL(this.files[0])" class="validate" style="display: none;" />
                  </div>
                  <div class="input-field col s3">
                    <div class="">
                      <img src="<?php echo theme_url(); ?>images/upload_image.jpg" id="pic2" class="profile_picture" width="125" height="125" /><div class="clearfix"></div>
                      <a href="javascript:void(0);" onclick="$('#img2').trigger('click');" class="profile_picture btn btn-xs btn-info"><i class="fa fa-plus-circle"></i> Service Image</a>
                    </div>
                    <input id="img2" name="img2" type="file" onchange="document.getElementById('pic2').src = window.URL.createObjectURL(this.files[0])" class="validate" style="display: none;" />
                  </div>
                  <div class="input-field col s3">
                    <div class="">
                      <img src="<?php echo theme_url(); ?>images/upload_image.jpg" id="pic3" class="profile_picture" width="125" height="125" /><div class="clearfix"></div>
                      <a href="javascript:void(0);" onclick="$('#img3').trigger('click');" class="profile_picture btn btn-xs btn-info"><i class="fa fa-plus-circle"></i> Service Image</a>
                    </div>
                    <input id="img3" name="img3" type="file" onchange="document.getElementById('pic3').src = window.URL.createObjectURL(this.files[0])" class="validate" style="display: none;" />
                  </div>
                  <div class="input-field col s3">
                    <div class="">
                      <img src="<?php echo theme_url(); ?>images/upload_image.jpg" id="pic4" class="profile_picture" width="125" height="125" /><div class="clearfix"></div>
                      <a href="javascript:void(0);" onclick="$('#img4').trigger('click');" class="profile_picture btn btn-xs btn-info"><i class="fa fa-plus-circle"></i> Service Image</a>
                    </div>
                    <input id="img4" name="img4" type="file" onchange="document.getElementById('pic4').src = window.URL.createObjectURL(this.files[0])" class="validate" style="display: none;" />
                  </div>
                </div>
                <div class="row">
                  <div class="input-field col s6">
                    <h5 style="margin-bottom: 5px; font-size: 14px;">Youtube Video ID</h5>
                    <input type="text" id="youtube_id" name="youtube_id" class="validate" value="<?php echo set_value('youtube_id'); ?>">
                  </div>
                  <div class="input-field col s6">
                    <a href="javascript:void(0);" class="modal-dialog modal-lg" data-toggle="modal" data-target="#myYoutubeModal"><img src="<?php echo theme_url(); ?>images/youtube-help.jpg" id="" class="profile_picture" width="" height="100" /></a>
                    <div id="myYoutubeModal" class="modal fade" role="dialog">
                      <div class="modal-dialog">
                        <!-- Modal content-->
                        <div class="modal-content">
                          <div class="modal-body">
                            <img src="<?php echo theme_url(); ?>images/youtube-help.jpg" id="" class="profile_picture" width="575" />
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="input-field col s4">
                    <input id="product_price" name="product_price" value="<?php echo set_value('product_price'); ?>" type="text" required class="validate">
                    <label for="product_price">Price*</label>
                  </div>
                  <div class="input-field col s4">
                    <input id="unit_value" name="unit_value" value="<?php echo set_value('unit_value'); ?>" type="text" required class="validate">
                    <label for="unit_value">Unit Value*</label>
                  </div>
                  <div class="input-field col s4">
                    <select name="unit_measurement" required>
                      <option value="" disabled selected>Unit*</option>
                      <?php
                      foreach ($unit_measurement as $k => $v) {
                        $sel = ($k == $this->input->post('unit_measurement')) ? 'selected' : '';
                        ?>
                        <option value="<?php echo $k; ?>" <?php echo $sel; ?>><?php echo $v; ?></option>
                        <?php
                      }
                      ?>
                    </select>
                  </div>
                </div>
                <div class="row"><div class="input-field col s12"></div></div>
                <div class="row">
                  <div class="input-field col s12">
                    <h5 style="margin-bottom: 5px; font-size: 14px;">Service Description</h5>
                    <textarea id="description" onclick="$(this).focus();" name="description" rows="12" cols="50" class="validate"><?php echo set_value('description'); ?></textarea><?php echo display_ckeditor($ckeditor); ?>
                  </div>
                </div>

                <div class="row"><div class="input-field col s12"></div></div>
                <div class="row"><div class="input-field col s12"><h5 style="margin-bottom: 5px;">Choose Service Category</h5></div></div>
                <div class="row"><div class="input-field col s12"><h6 style="margin-bottom: 5px;">Select Service Category*</h6></div></div>
                <div class="row">
                  <div class="input-field col s12">
                    <select name="category_id" class="selectCategory" data-selectid='1' required>
                        <option value="">Select Category</option>
                        <?php
                        foreach ($catList as $key => $catVal) {
                          ?>
                          <option value="<?php echo $catVal['category_id']; ?>"><?php echo $catVal['category_name']; ?></option>
                          <?php
                        }
                        ?>
                      </select>
                  </div> 
                </div>
                <div class="row">
                  <div class="col s12">
                <div class="subCatList"></div>
                </div>
                </div>
                <div class="clearfix"></div>
                <div class="row"><div class="input-field col s12">&nbsp;</div></div>



                <div class="row"><div class="input-field col s12">&nbsp;</div></div>
                <div class="row"><div class="input-field col s12"><h5 style="margin-bottom: 5px;">Show this Service on your Website</h5></div></div>
                <div class="row"><div class="input-field col s12"><h6 style="margin-bottom: 5px;">Select Website Category (optional)</h6></div></div>
                <div class="row">
                  <div class="input-field col s8" id="oldCat">
                    <select name="website_category_id">
                      <option value="">Category ID</option>
                      <?php
                      foreach ($websiteCategory as $k => $cval) {
                        $sel = ($cval['category_id'] == $this->input->post('website_category_id')) ? 'selected' : '';
                        ?>
                        <option value="<?php echo $cval['category_id']; ?>" <?php echo $sel; ?>><?php echo $cval['category_name']; ?></option>
                        <?php
                      }
                      ?>
                    </select>
                  </div>
                  <div class="input-field col s8 hidden" id="newCat" >
                      <input type="text" name="category_name" id="category_name" placeholder="New Category Name" value="<?php echo set_value("category_name");?>">
                  </div>
                  <div class="input-field col s4">
                  <a href="javascript:void(0);" class="btn btn-info newCat">ADD New Category</a>
                  </div>
                </div>


                <div class="row"><div class="input-field col s12">&nbsp;</div></div>
                <div class="row">
                  <div class="input-field col s12">
                    <h5 style="margin-bottom: 5px;">Service Attribute</h5>
                  </div>
                  <div class="attribute">
                    <div class="input-field col s5">
                      <input id="" name="attribute_name[]" value="<?php echo $anName; ?>" required type="text" class="validate">
                      <label for="attribute_name">Attribute Name i.e Color</label>
                    </div>
                    <div class="input-field col s5">
                      <input id="" name="attribute_value[]" value="<?php echo $avlue; ?>" required type="text" class="validate">
                      <label for="attribute_value">Attribute Value i.e Red, You can use pipe sign "|" if you have multiple sets</label>
                    </div>
                    <div class="input-field col s2">
                      <a href="javascript:void(0);" class="btn btn-info addMore">ADD More</a>
                    </div>
                  </div>
                </div>

                <div class="row">
                  <div class="input-field col s12">
                    <h5 style="margin-bottom: 5px;">Service Additional Information</h5>
                  </div>
                  <div class="input-field col s6">
                    <input id="product_code" name="product_code" value="<?php echo set_value('product_code'); ?>" type="text" class="validate">
                    <label for="product_code">Service Code</label>
                  </div>
                  <div class="input-field col s6">
                    <input id="moq" name="moq" required type="text" value="<?php echo set_value('moq'); ?>" class="validate">
                    <label for="moq">Min. Order Qty.*</label>
                  </div>


                  <div class="input-field col s6">
                    <input id="dispatch_port" name="dispatch_port" value="<?php echo set_value('dispatch_post'); ?>" type="text" class="validate">
                    <label for="dispatch_port">Port of Dispatch</label>
                  </div>
                  <div class="input-field col s6">
                    <input id="delivery_time" name="delivery_time" value="<?php echo set_value('delivery_time'); ?>" type="text" class="validate">
                    <label for="delivery_time">Delivery Time</label>
                  </div>

                  <div class="input-field col s12">
                    <textarea id="packaging_details" name="packaging_details" class="validate"><?php echo set_value('packaging_details'); ?></textarea>
                    <label for="packaging_details">Packaging Details</label>
                  </div>

                </div>

                <div class="row">
                  <div class="input-field col s12 v2-mar-top-60"> <button type="submit" class="waves-effect waves-light btn-large full-btn" >Submit Listing</button> </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</section>
<?php $this->load->view("bottom_application"); ?>
<script type="text/javascript">

<?php if($this->input->post('category_name')!=""){ ?>
      $('#oldCat').addClass('hidden');
      $('#newCat').removeClass('hidden');
      $('.newCat').addClass('hidden');
  <?php } ?>
  $('.newCat').click(function () {
    $('#oldCat').addClass('hidden');
    $('#newCat').removeClass('hidden');
    $('.newCat').addClass('hidden');
  });

  $(".chooseCategory").on("change",'.selectCategory', function (e) {
    e.preventDefault();
    var catId = $(this).val();
    var countselect = $('select').length;
    var myselectId = $(this).attr('data-selectid');

    $.post(site_url + 'category/getsubcatlist', {catId: catId, countselect: countselect, catType:0 }, function (data) {
      if (myselectId < countselect) {
        $("select").each(function () {
          var currSelectID = $(this).attr('data-selectid');
          if (myselectId < currSelectID) {
            //$(this).parent().parent().parent().parent().remove();
            //$(this).parent().parent().parent().remove();
            //$('.admin_selling_box').parent().parent().remove();
            $(this).remove();
            //$('.admin_selling_box').parent().parent().remove();
          }
        });
      }
      $('.subCatList').append(data);
    });
  });

  /*
  //Limit checkbox selection to 3
  var limit = 3;
  $('.categoryList').on('click', '.dashcheckbox', function (evt) {
    //alert($('input.dashcheckbox:checked').length);
    if ($('input.dashcheckbox:checked').length > limit) {
      alert('You can select maximum 3 category for a product.');
      this.checked = false;
    }
  });*/


  $('.addMore').click(function () {
    $('.attribute').append('<div class="additionalAttr"><div class="input-field col s5"><input id="" name="attribute_name[]" type="text" class="validate"><label for="attribute_name">Attribute Name i.e Color</label></div><div class="input-field col s5"><input id="" name="attribute_value[]" type="text" class="validate"><label for="attribute_value">Attribute Value i.e red , You can use pipe sign "|" if you have multiple sets</label></div><div class="input-field col s2"><a href="javascript:void(0);" class="btn btn-danger remove">Remove</a></div></div>');
  });
  $('.attribute').on('click', '.remove', function () {
    $(this).parent().parent('.additionalAttr').remove();
  });
  //search category
  $('#dashkeyword').keyup(function () {
    var key = $(this).val();
    if (key.length >= 3) {
      $.post('<?php echo site_url(); ?>category/category_search_service', {keyword: key}, function (data) {
        //alert(data);
        //$('.categoryList').html('');
        $('.dashcheckbox').each(function () {
          if ($(this).prop('checked') == false) {
            $(this).parent().parent().remove();
          }
        });
        $('.categoryList').append(data);
      });
    }
  });

<?php
if ($this->input->get_post('dashkeyword')) {
  $selval = ($this->input->get_post('category_id')) ? implode(',', $this->input->post('category_id')) : '';
  ?>
    var key = '<?php echo $this->input->get_post('dashkeyword'); ?>';
    if (key.length >= 3) {
      $.post('<?php echo site_url(); ?>category/category_search_service', {keyword: key, "selvel": '<?php echo $selval; ?>'}, function (data) {
        //alert(data);
        //$('.categoryList').html('');
        $('.dashcheckbox').each(function () {
          if ($(this).prop('checked') == false) {
            $(this).parent().parent().remove();
          }
        });
        $('.categoryList').append(data);
      });
    }
  <?php
}

if ($this->input->get_post('attribute_name')) {
  foreach ($an as $k => $val) {
    $avalue = $av[$k];
    ?>
      $('.attribute').append('<div class="additionalAttr"><div class="input-field col s5"><input id="" name="attribute_name[]" value="<?php echo $val; ?>" type="text" class="validate"><label for="attribute_name">Attribute Name i.e Color</label></div><div class="input-field col s5"><input id="" name="attribute_value[]" value="<?php echo $avalue; ?>" type="text" class="validate"><label for="attribute_value">Attribute Value i.e red , You can use pipe sign "|" if you have multiple sets</label></div><div class="input-field col s2"><a href="javascript:void(0);" class="btn btn-danger remove">Remove</a></div></div>');
    <?php
  }
}
?>

</script>