<h3><i class="fa fa-angle-right"></i>Product</h3>
        <!-- BASIC FORM ELELEMNTS -->
        <div class="row mt">
          <div class="col-lg-12">
            <form [formGroup]="productForm" (ngSubmit)="createProduct()">





            <input type="hidden" formControlName="id" class="hilang" />
            <div class="form-panel">
                <div class="form-group">
                  <!-- start product name input -->
                  <label class="col-sm-2 col-sm-2 control-label">Product Name</label>
                  <div class="col-sm-10">
                    <input type="text"
                           id="product_name"
                           class="form-control"
                           formControlName="product_name"
                           placeholder="fill product name here"
                           [class.is-invalid]="product_name.invalid &&
                           product_name.touched"
                    >
                    <div *ngIf="product_name.invalid && product_name.touched">
                    <small *ngIf="product_name.errors?.required" class="text-danger">product name Required</small>
                  <!-- end product name input -->
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-2 col-sm-2 control-label">Detail</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control">
                  </div>
                </div>

                <div class="form-group">
                  <label class="col-sm-2 col-sm-2 control-label">Price</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control">
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-2 col-sm-2 control-label">Update By</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control">
                  </div>
                </div>

                <div class="form-group last">
                  <label class="control-label col-md-3">Image Upload</label>
                  <div class="col-md-9">
                    <div class="fileupload fileupload-new" data-provides="fileupload">
                      <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
                        <img src="../../../assets/Backend/img/no+image.png" alt="" />
                      </div>
                      <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
                      <div>
                        <span class="btn btn-theme02 btn-file">
                          <span class="fileupload-new"><i class="fa fa-paperclip"></i> Select image</span>
                        <span class="fileupload-exists"><i class="fa fa-undo"></i> Change</span>
                        <input type="file" class="default" />
                        </span>
                        <a href="#" class="btn btn-theme04 fileupload-exists" data-dismiss="fileupload"><i class="fa fa-trash-o"></i> Remove</a>
                      </div>
                    </div>
                    <span class="label label-info">NOTE!</span>
                    <span>
                      Attached image thumbnail is
                      supported in Latest Firefox, Chrome, Opera,
                      Safari and Internet Explorer 10 only
                      </span>
                  </div>
                </div>

                <div class="form-group">
                  <label class="control-label col-md-3">Default Datepicker</label>
                  <div class="col-md-3 col-xs-11">
                    <input class="form-control form-control-inline input-medium default-date-picker" size="16" type="text" value="">
                    <span class="help-block">Select date</span>
                  </div>
                </div>

                <button type="button" class="btn btn-info">
                  Save
                </button>
              </form>

                <section class="wrapper">
                  <h3><i class="fa fa-angle-right"></i> Advanced Table Example</h3>
                  <div class="col-sm-15">

                    <!-- page start-->
                    <div class="content-panel">
                      <div class="adv-table">
                        <table cellpadding="0" cellspacing="0" border="0" class="display table table-bordered" id="hidden-table-info">
                          <thead>
                            <tr>
                              <th>Product Name</th>
                              <th>Detail</th>
                              <th class="hidden-phone">Price</th>
                              <th class="hidden-phone">Update By</th>
                              <th class="hidden-phone">Date</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>
                                <a href="#">Company Ltd</a>
                              </td>
                              <td class="hidden-phone">Lorem Ipsum dolor</td>
                              <td>12000.00$ </td>
                              <td><span class="label label-info label-mini">Wahyu</span></td>
                              <td><span class="label label-info label-mini">21-01-2020</span></td>
                              <td>
                                <button class="btn btn-success btn-xs"><i class="fa fa-check"></i></button>
                                <button class="btn btn-primary btn-xs"><i class="fa fa-pencil"></i></button>
                                <button class="btn btn-danger btn-xs"><i class="fa fa-trash-o "></i></button>
                              </td>
                            </tr>

                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
            </div>
          </div>
          <!-- col-lg-12-->
        </div>
      </div>