<!DOCTYPE html>
<html>

<head>
<!-- TABLES CSS CODE -->
<?php include"comman/code_css_form.php"; ?>
<!-- </copy> -->  
</head>

<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

 <?php include"sidebar.php"; ?>
 <?php
	if(!isset($category_name)){
      $category_code=$category_name=$description="";
	}
 ?>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        <?=$page_title;?>
        <small>Add/Update Category</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="<?php echo $base_url; ?>dashboard"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="<?php echo $base_url; ?>category/view"><?= $this->lang->line('categories_list'); ?></a></li>
        <li class="active"><?=$page_title;?></li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <!-- right column -->
        <div class="col-md-12">
          <!-- Horizontal Form -->
          <div class="box box-info ">
            <div class="box-header with-border">
              <h3 class="box-title">Please Enter Valid Data</h3>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
            <form class="form-horizontal" id="category-form" onkeypress="return event.keyCode != 13;">
              <input type="hidden" name="<?php echo $this->security->get_csrf_token_name();?>" value="<?php echo $this->security->get_csrf_hash();?>">
              <input type="hidden" id="base_url" value="<?php echo $base_url;; ?>">
              <div class="box-body">
				


              <div class="form-group">
                    <label for="category" class="col-sm-2 control-label"><?= $this->lang->line('category_name'); ?><label class="text-danger">*</label></label>
                  <div class="col-sm-3">
                    <!-- <input type="text" class="form-control input-sm" id="category" name="category" placeholder="" onkeyup="shift_cursor(event,'description')" value="<?php print $category_name; ?>" autofocus > -->
                    <select class="form-control select2" id="category" name="category"  style="width: 100%;"  value="<?php print $category_id; ?>">
                        <?php
                           $query1="select * from db_category where status=1";
                           $q1=$this->db->query($query1);
                           if($q1->num_rows($q1)>0)
                            {  echo '<option value="0">-Select-</option>'; 
                                foreach($q1->result() as $res1)
                              { 
                                $selected = ($category_id==$res1->id)? 'selected' : '';
                                echo "<option $selected value='".$res1->id."'>".$res1->category_name."</option>";
                              }
                            }
                            else
                            {
                               ?>
                        <option value="">No Records Found</option>
                        <?php
                           }
                           ?>
                    </select>
                      <span id="category_msg" style="display:none" class="text-danger"></span>
                    </div>

                    <label for="color" class="col-sm-2 control-label">Color<label class="text-danger">*</label></label>
                  <div class="col-sm-3">
                    <!-- <input type="text" class="form-control input-sm" id="category" name="category" placeholder="" onkeyup="shift_cursor(event,'description')" value="<?php print $category_name; ?>" autofocus > -->
                      <select class="form-control select2" id="color_id" name="color_id"  style="width: 100%;" disabled>
                        <option value="0">-Select-</option>
                      </select>
                    </div>
              </div>


				<div class="form-group" hidden>
                  <label for="description" class="col-sm-2 control-label"><?= $this->lang->line('description'); ?></label>
                  <div class="col-sm-4">
                    <textarea type="text" class="form-control" id="description" name="description" placeholder="" ><?php if($description==""){ print '-';}else{ print $description;} ?></textarea>
					<span id="description_msg" style="display:none" class="text-danger"></span>
                  </div>
                </div>

                <div class="form-group">
                  <label for="item_image" class="col-sm-2 control-label">Select Image 1</label>
                  <div class="col-sm-4">
                    <input type="text" class="form-control" name="item_image1" id="item_image1" value="<?php print $image1; ?>">
                  </div>
                  <div class="col-sm-4">
                    <div><image style='border:1px #72afd2 solid;' id="img_item_image1"  width='50' height='50'></div>
                  </div>
                </div>

                <div class="form-group">
                  <label for="item_image" class="col-sm-2 control-label">Select Image 2</label>
                  <div class="col-sm-4">
                    <input type="text" class="form-control" name="item_image2" id="item_image2" value="<?php print $image2; ?>">
                  </div>
                  <div class="col-sm-4">
                    <div><image style='border:1px #72afd2 solid;' id="img_item_image2"  width='50' height='50'></div>
                  </div>
                </div>

                <div class="form-group">
                  <label for="item_image" class="col-sm-2 control-label">Select Image 3</label>
                  <div class="col-sm-4">
                    <input type="text" class="form-control" name="item_image3" id="item_image3" value="<?php print $image3; ?>">
                  </div>
                  <div class="col-sm-4">
                    <div><image style='border:1px #72afd2 solid;' id="img_item_image3"  width='50' height='50'></div>
                  </div>
                </div>

                <div class="form-group">
                  <label for="item_image" class="col-sm-2 control-label">Select Image 4</label>
                  <div class="col-sm-4">
                    <input type="text" class="form-control" name="item_image4" id="item_image4" value="<?php print $image4; ?>">
                  </div>
                  <div class="col-sm-4">
                    <div><image style='border:1px #72afd2 solid;' id="img_item_image4"  width='50' height='50'></div>
                  </div>
                </div>

                <div class="form-group">
                  <label for="item_image" class="col-sm-2 control-label">Select Image 5</label>
                  <div class="col-sm-4">
                    <input type="text" class="form-control" name="item_image5" id="item_image5" value="<?php print $image5; ?>">
                  </div>
                  <div class="col-sm-4">
                    <div><image style='border:1px #72afd2 solid;' id="img_item_image5"  width='50' height='50'></div>
                  </div>
                </div>

              </div>
              <!-- /.box-footer -->
              <div class="box-footer">
                <div class="col-sm-8 col-sm-offset-2 text-center">
                   <!-- <div class="col-sm-4"></div> -->
                   <!-- <?php
                      //if($category_code!=""){
                          //  $btn_name="Update";
                          //  $btn_id="update";
                          ?>
                            <input type="hidden" name="q_id" id="q_id" value="<?php echo $q_id;?>"/>
                            <?php
                      //}
                                // else{
                                //     $btn_name="Save";
                                //     $btn_id="save";
                                //}
                      
                                ?> -->
                                 
                   <div class="col-md-3 col-md-offset-3">
                      <button type="button" id="save_web_image" class="btn btn-block btn-success" title="Save Data">Save</button>
                   </div>
                   <div class="col-sm-3">
                    <a href="<?=base_url('dashboard');?>">
                      <button type="button" class="col-sm-3 btn btn-block btn-warning close_btn" title="Go Dashboard">Close</button>
                    </a>
                   </div>
                </div>
             </div>
             <!-- /.box-footer -->
            </form>
          </div>
          <!-- /.box -->

        </div>
        <!--/.col (right) -->
      </div>
      <!-- /.row -->

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

 <?php include"footer.php"; ?>


  <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
<!-- SOUND CODE -->
<?php include"comman/code_js_sound.php"; ?>
<!-- TABLES CODE -->
<?php include"comman/code_js_form.php"; ?>

<script src="<?php echo $theme_link; ?>js/category.js"></script>
<!-- Make sidebar menu hughlighter/selector -->
<script>$(".<?php echo basename(__FILE__,'.php');?>-active-li").addClass("active");</script>

<script>
    $('#category').on('change',function(){
      $('#color_id').val('0').trigger('change');
      $('#color_id').attr('disabled', true);
      $('#item_image1').val("");
      $('#img_item_image1').attr('src', "");
      $('#item_image2').val("");
      $('#img_item_image2').attr('src', "");
      $('#item_image3').val("");
      $('#img_item_image3').attr('src', "");
      $('#item_image4').val("");
      $('#img_item_image4').attr('src', "");
      $('#item_image5').val("");
      $('#img_item_image5').attr('src', "");

      var category_id    = $('#category').val();
      $.ajax({
         url: '<?php echo $base_url; ?>category/s_itm_colors',
            type: 'POST',
            data: {category_id:category_id},
            dataType: 'json',
            success: function(data) {
              var d_count = parseInt(data.colorInfo.length);
              if(d_count>0){
                $('#color_id').empty();
                $('#color_id').append('<option value="0">-Select-</option>');
                $.each(data.colorInfo, function(){
                    //console.log(this['id']);
                    $('#color_id').append($("<option></option>").val(this['id']).html(this['color']));
                });

                $('#color_id').attr('disabled', false);
              }
            }
      });
    });
</script>

<script>
    $('#color_id').on('change',function(){
      $('#item_image1').val("");
      $('#img_item_image1').attr('src', "");
      $('#item_image2').val("");
      $('#img_item_image2').attr('src', "");
      $('#item_image3').val("");
      $('#img_item_image3').attr('src', "");
      $('#item_image4').val("");
      $('#img_item_image4').attr('src', "");
      $('#item_image5').val("");
      $('#img_item_image5').attr('src', "");

      var category_id    = $('#category').val();
      var color_id    = $('#color_id').val();
      $.ajax({
         url: '<?php echo $base_url; ?>category/s_itm_image',
            type: 'POST',
            data: {category_id:category_id,color_id:color_id},
            dataType: 'json',
            success: function(data) {
              var d_count = parseInt(data.imageInfo.length);
              if(d_count>0){
                $.each(data.imageInfo, function(){
                    $('#item_image1').val(this['image_1']);
                    $('#img_item_image1').attr('src', this['image_1']);
                    $('#item_image2').val(this['image_2']);
                    $('#img_item_image2').attr('src', this['image_2']);
                    $('#item_image3').val(this['image_3']);
                    $('#img_item_image3').attr('src', this['image_3']);
                    $('#item_image4').val(this['image_4']);
                    $('#img_item_image4').attr('src', this['image_4']);
                    $('#item_image5').val(this['image_5']);
                    $('#img_item_image5').attr('src', this['image_5']);
                });
              }
            }
      });
    });
</script>

<script>
    $('#item_image1').on('change',function(){
      var image_link    = $('#item_image1').val();
      $('#img_item_image1').attr('src', image_link);
    });
</script>

<script>
    $('#item_image2').on('change',function(){
      var image_link    = $('#item_image2').val();
      $('#img_item_image2').attr('src', image_link);
    });
</script>

<script>
    $('#item_image3').on('change',function(){
      var image_link    = $('#item_image3').val();
      $('#img_item_image3').attr('src', image_link);
    });
</script>

<script>
    $('#item_image4').on('change',function(){
      var image_link    = $('#item_image4').val();
      $('#img_item_image4').attr('src', image_link);
    });
</script>
<script>
    $('#item_image5').on('change',function(){
      var image_link    = $('#item_image5').val();
      $('#img_item_image5').attr('src', image_link);
    });
</script>

<script>
    $('#save_web_image').on('click',function(){
      var category_id    = $('#category').val();
      var color_id    = $('#color_id').val();
      var item_image1 = $('#item_image1').val();
      var item_image2 = $('#item_image2').val();
      var item_image3 = $('#item_image3').val();
      var item_image4 = $('#item_image4').val();
      var item_image5 = $('#item_image5').val();

      if((color_id=="0") || (category_id=="0")){
        toastr["warning"]("Please select category and color !");
      }else{
        $.ajax({
          url: '<?php echo $base_url; ?>category/save_web_image',
          type: 'POST',
          data: {category_id:category_id,color_id:color_id,item_image1:item_image1,item_image2:item_image2,item_image3:item_image3,item_image4:item_image4,item_image5:item_image5},
          dataType: 'JSON',
          success: function(data) {
             //console.log(data);
             if (data=="success") {
                //swal("Successfully!", "Size Added !", "success");
                toastr["success"]("Image Details Added!!");
             }else if (data=="failed"){
                //swal("Sorry","Error occured !!","error");
                toastr["error"]("Sorry! Something Wrong.Try again!");
             }
          }
        });
      }

    });
</script>

</body>
</html>
