<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">Visual Setting</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
              <li class="breadcrumb-item"><a href="#">Setting</a></li>
              <li class="breadcrumb-item active">Visual Setting</li>

            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->
    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <!-- Info boxes -->
        <div class="card card-default">
          <div class="card-header">
            <h3 class="card-title">Update Visual Setting</h3>

            <div class="card-tools">
              <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
            </div>
          </div>
          <!-- /.card-header -->
          <?php echo form_open(base_url().'/admin/setting/update_visual_setting'); ?>
          <div class="card-body">
            <div class="row">

              <div class="col-md-12">
                <div class="form-group">
                   <label for="inputEmail" class="col-sm-12 col-form-label">Color 1</label>
                   <div class="input-group my-colorpicker2 site_color_1 colorpicker-element" data-colorpicker-id="2">
                    <input type="text" name="color_1" value="<?php echo $visual_setting->color_1 ?>" class="form-control" data-original-title="" title="">

                    <div class="input-group-append">
                      <span class="input-group-text"><i style="color: <?php echo $visual_setting->color_1 ?>" class="fas fa-square fa_1"></i></span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="col-md-12">
                <div class="form-group">
                   <label for="inputEmail" class="col-sm-12 col-form-label">Color 2</label>
                   <div class="input-group my-colorpicker2 site_color_2 colorpicker-element" data-colorpicker-id="2">
                    <input type="text" name="color_2" value="<?php echo $visual_setting->color_2 ?>" class="form-control" data-original-title="" title="">

                    <div class="input-group-append">
                      <span class="input-group-text"><i style="color: <?php echo $visual_setting->color_2 ?>" class="fas fa-square fa_2"></i></span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="col-md-12">
                <div class="form-group">
                   <button name="submit" style="float: right" type="submit" class="btn btn-success">Update</button>
                </div>
              </div>

               <?php echo form_close() ?>
               

              <!-- /.col -->
            </div>
            <!-- /.row -->
          </div>
          <!-- /.card-body -->
        </div>
            <!-- /.row -->
      </div><!--/. container-fluid -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  <script type="text/javascript">
  $(function () {
 $('.site_color_1').colorpicker()
    $('.site_color_1').on('colorpickerChange', function(event) {
      $('.site_color_1 .fa_1').css('color', event.color.toString());
    });
  });
  $(function () {
 $('.site_color_2').colorpicker()
    $('.site_color_2').on('colorpickerChange', function(event) {
      $('.site_color_2 .fa_2').css('color', event.color.toString());
    });
  });
 
</script>
