<?php

$this->load->view('includes/header');

$pcatID = ($this->uri->segment(4) > 0) ? $this->uri->segment(4) : "0";

$pcatID = (int) $pcatID;

$selcatID = ($this->input->post('category_id') != '') ? $this->input->post('category_id') : $pcatID;

$selcatID = (int) $selcatID;



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();

}

?>

<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/products'); ?>"  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('sitepanel/products/add/'.$cId, array('id' => 'form', 'class' => "form-horizontal"));
      echo form_open_multipart(current_url_query_string(), 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">Service Details</a></li>
        </ul>
        <div class="panel-body tab-content">
          <div class="tab-pane active" id="tab-general">
            <?php
            echo validation_message();
            ?>
            <div class="form-group">
              <label class="col-md-3 col-xs-12 control-label"><span class="required">*</span>Category</label>
              <div class="col-md-6">
                <select name="category_id[]" multiple="multiple" size="15" class="form-control">
                  <?php echo get_nested_dropdown_menu(0, $selcatID); ?>
                </select>
              </div>
              <label class="pull-right">
                <span class="required">*Required Fields</span>
                <span class="required" style="display: block;">**Conditional Fields</span>
              </label>
            </div>
            <?php
            $default_params = array(
                'heading_element' => array(
                    'field_heading' => "Name",
                    'field_name' => "product_name",
                    'field_placeholder' => "Your Service Name",
                    'exparams' => 'size="50"'
                ),
                'url_element' => array(
                    'field_heading' => "Page URL",
                    'field_name' => "friendly_url",
                    'field_placeholder' => "Your Page URL",
                    'exparams' => 'size="50"',
                    'pre_seo_url' => '',
                    'pre_url_tag' => FALSE
                )
            );
            seo_add_form_element($default_params);
            ?>

            <div class="form-group">

              <label class="col-md-3 col-xs-12 control-label">Service Images</label>

              <div class="col-md-2">

                <div class="">

                  <img src="<?php echo get_image('product_images', '', '125', '125', 'R'); ?>" 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">Add 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="col-md-2">

                <div class="">

                  <img src="<?php echo get_image('product_images', '', '125', '125', 'R'); ?>" 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">Add 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="col-md-2">

                <div class="">

                  <img src="<?php echo get_image('product_images', '', '125', '125', 'R'); ?>" 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">Add 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="col-md-2">

                <div class="">

                  <img src="<?php echo get_image('product_images', '', '125', '125', 'R'); ?>" 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">Add 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="form-group">

              <label class="col-md-3 col-xs-12 control-label">Youtube Video ID</label>

              <div class="col-md-4">

                <input type="text" id="youtube_id" name="youtube_id" class="form-control" value="<?php echo set_value('youtube_id'); ?>">

              </div>

              <div class="col-md-4">

                <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="form-group">

              <label class="col-md-3 col-xs-12 control-label"><span class="required">*</span>Service Code</label>

              <div class="col-md-6">                                            

                <input type="text" name="product_code" class="form-control" value="<?php echo set_value('product_code'); ?>" />

              </div>

            </div>

            <div class="form-group">

              <label class="col-md-3 col-xs-12 control-label">Service Price</label>

              <div class="col-md-2">

                <input id="product_price" name="product_price" value="<?php echo set_value('product_price'); ?>" type="text" required class="form-control">

                <label for="product_price">Price*</label>

              </div>

              <div class="col-md-2">

                <input id="unit_value" name="unit_value" value="<?php echo set_value('unit_value'); ?>" type="text" required class="form-control">

                <label for="unit_value">Unit Value*</label>

              </div>

              <div class="col-md-2">

                <select name="unit_measurement" class="form-control" 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="form-group">

              <label class="col-md-3 col-xs-12 control-label">Service Attribute</label>



              <div class="col-md-3">

                <input id="" name="attribute_name[]" value="<?php echo $anName; ?>" required type="text" class="form-control">

                <label for="attribute_name">Attribute Name i.e Color*</label>

              </div>

              <div class="col-md-3">

                <input id="" name="attribute_value[]" value="<?php echo $avlue; ?>" required type="text" class="form-control">

                <label for="attribute_value">Attribute Value i.e red* , You can use pipe sign "|" if you have multiple sets</label>

              </div>

              <div class="col-md-3">

                <a href="javascript:void(0);" class="btn btn-info addMore">ADD More</a>

              </div>



            </div>

            <div class="attribute">



            </div>



            <div class="form-group">

              <label class="col-md-3 col-xs-12 control-label">Service Additional Information</label>

              <div class="col-md-3">

                <input id="product_code" name="product_code" value="<?php echo set_value('product_code'); ?>" type="text" class="form-control">

                <label for="product_code">Service Code</label>

              </div>

              <div class="col-md-3">

                <input id="moq" name="moq" required type="text" value="<?php echo set_value('moq'); ?>" class="form-control">

                <label for="moq">Min. Order Qty.*</label>

              </div>

            </div>

            <div class="form-group">

              <label class="col-md-3 col-xs-12 control-label"></label>

              <div class="col-md-3">

                <input id="dispatch_port" name="dispatch_port" value="<?php echo set_value('dispatch_port'); ?>" type="text" class="form-control">

                <label for="dispatch_port">Port of Dispatch</label>

              </div>

              <div class="col-md-3">

                <input id="delivery_time" name="delivery_time" value="<?php echo set_value('delivery_time'); ?>" type="text" class="form-control">

                <label for="delivery_time">Delivery Time</label>

              </div>

            </div>

            <div class="form-group">

              <label class="col-md-3 col-xs-12 control-label">Service Packaging Details</label>

              <div class="col-md-6">

                <textarea id="packaging_details" name="packaging_details" class="form-control"><?php echo set_value('packaging_details'); ?></textarea>

              </div>

            </div>



            <div class="form-group">

              <label class="col-md-3 col-xs-12 control-label">Description</label>

              <div class="col-md-6 col-xs-12">                                            

                <textarea name="description" rows="5" cols="50" id="description" ><?php echo set_value('description'); ?></textarea> <?php echo display_ckeditor($ckeditor); ?>

              </div>

            </div>          

            <div class="form-group">

              <div class="col-md-6 col-xs-12">

                <input type="hidden" name="action" value="addnews" />
                 <input type="hidden" name="productType" value="1" />

                <input type="hidden" name="pcatID" value="<?php echo $pcatID; ?>" />

              </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 () {

    $('.attribute').append('<div class="form-group"><div class="col-md-3"></div><div class="col-md-3"><input id="" name="attribute_name[]" value="<?php echo $anName; ?>" type="text" class="form-control"><label for="attribute_name">Attribute Name i.e Color</label></div><div class="col-md-3"><input id="" name="attribute_value[]" value="<?php echo $avlue; ?>" type="text" class="form-control"><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('.form-group').remove();

  });



<?php

if ($this->input->get_post('attribute_name')) {

  foreach ($an as $k => $val) {

    $avalue = $av[$k];

    ?>

      $('.attribute').append('<div class="form-group"><div class="col-md-3"></div><div class="col-md-3"><input id="" name="attribute_name[]" value="<?php echo $anName; ?>" type="text" class="form-control"><label for="attribute_name">Attribute Name i.e Color</label></div><div class="col-md-3"><input id="" name="attribute_value[]" value="<?php echo $avalue; ?>" type="text" class="form-control"><label for="attribute_value">Attribute Value i.e red , You can use pipe sign "|" if you have multiple sets</label></div><div class="col-md-3"><a href="javascript:void(0);" class="btn btn-danger remove">Remove</a></div></div>');

    <?php

  }

}

?>

</script>