<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"><?php echo $title ?></h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="<?php echo base_url() ?>admin/admin/dashboard">Dashboard</a></li>
              <li class="breadcrumb-item"><a href="#"><?php echo ucwords(str_replace("_", " ", $this->uri->segment(2))); ?></a></li>
              <li class="breadcrumb-item active"><?php echo ucwords(str_replace("_", " ", $title)); ?></li>

            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->
  <?php
    $errors = $this->session->userdata('errors');
    if (isset($errors)) {
        ?>
        <script>
            swal ( "Oops" ,  "<?php echo $errors ?>" ,  "error" )
        </script>
        <?php echo $errors ?>
        <?php
        $this->session->unset_userdata('errors');
    }
    $error = $this->session->userdata('error');
    if (isset($error)) {
        ?>
         <script>
            swal ( "Oops" ,  "<?php echo $error ?>" ,  "error" )
        </script>
        <?php
        $this->session->unset_userdata('error');
    }
    $success = $this->session->userdata('success');
    if (isset($success)) {
        ?>
         <script>
            swal({
          title: "Done!",
          text: "<?php echo $success ?>",
          icon: "success",
        });
        </script>
        <?php
        $this->session->unset_userdata('success');
    }
    ?>
    <!-- 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 <?php echo $title ?></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_multipart('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>
                  <!-- Color 1 is all Fa Fa Icon, Underline Color, Video Play Background Color. -->
                </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>
                  <!-- Color 2 is Nav Bar Background Color -->
                </div>
              </div>

              <div class="col-md-12 d-none">
                <div class="form-group">
                   <label for="inputEmail" class="col-sm-12 col-form-label">Color 3</label>
                   <div class="input-group my-colorpicker2 site_color_3 colorpicker-element" data-colorpicker-id="2">
                    <input type="text" name="color_3" value="<?php echo $visual_setting->color_3 ?>" 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_3 ?>" class="fas fa-square fa_3"></i></span>
                    </div>
                  </div>
                  Color 3 is all Heading Color.
                </div>
              </div>

               <div class="col-md-12 d-none">
                <div class="form-group">
                   <label for="inputEmail" class="col-sm-12 col-form-label">Color 4</label>
                   <div class="input-group my-colorpicker2 site_color_8 colorpicker-element" data-colorpicker-id="2">
                    <input type="text" name="color_4" value="<?php echo $visual_setting->color_4 ?>" 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_4 ?>" class="fas fa-square fa_8"></i></span>
                    </div>
                  </div>
                  Color 4 is Light Background Color.
                </div>
              </div>

              <div class="col-md-12 d-none">
                <div class="form-group">
                   <label for="inputEmail" class="col-sm-12 col-form-label">Color 5</label>
                   <div class="input-group my-colorpicker2 site_color_4 colorpicker-element" data-colorpicker-id="2">
                    <input type="text" name="color_5" value="<?php echo $visual_setting->color_5 ?>" 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_5 ?>" class="fas fa-square fa_4"></i></span>
                    </div>
                  </div>
                  Color 5 is CTA Background Color, Newsletter Background Color, Copywrite Background Color.
                </div>
              </div>

               <div class="col-md-12" style="display: none;">
                <div class="form-group">
                   <label for="inputEmail" class="col-sm-12 col-form-label">Color 6</label>
                   <div class="input-group my-colorpicker2 site_color_6 colorpicker-element" data-colorpicker-id="2">
                    <input type="text" name="color_6" value="<?php echo $visual_setting->color_6 ?>" 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_6 ?>" class="fas fa-square fa_6"></i></span>
                    </div>
                  </div>
                  Color 6 is Footer background Color
                </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());
    });
  });
  $(function () {
 $('.site_color_3').colorpicker()
    $('.site_color_3').on('colorpickerChange', function(event) {
      $('.site_color_3 .fa_3').css('color', event.color.toString());
    });
  })
   $(function () {
 $('.site_color_4').colorpicker()
    $('.site_color_4').on('colorpickerChange', function(event) {
      $('.site_color_4 .fa_4').css('color', event.color.toString());
    });
  })
    $(function () {
 $('.site_color_5').colorpicker()
    $('.site_color_5').on('colorpickerChange', function(event) {
      $('.site_color_5 .fa_5').css('color', event.color.toString());
    });
  })
    $(function () {
 $('.site_color_6').colorpicker()
    $('.site_color_6').on('colorpickerChange', function(event) {
      $('.site_color_6 .fa_6').css('color', event.color.toString());
    });
  })
  $(function () {
 $('.site_color_7').colorpicker()
    $('.site_color_7').on('colorpickerChange', function(event) {
      $('.site_color_7 .fa_7').css('color', event.color.toString());
    });
  })
 $(function () {
 $('.site_color_8').colorpicker()
    $('.site_color_8').on('colorpickerChange', function(event) {
      $('.site_color_8 .fa_8').css('color', event.color.toString());
    });
  })

 $(function () {
 $('.site_color_9').colorpicker()
    $('.site_color_9').on('colorpickerChange', function(event) {
      $('.site_color_9 .fa_9').css('color', event.color.toString());
    });
  })

$(function () {
 $('.site_color_10').colorpicker()
    $('.site_color_10').on('colorpickerChange', function(event) {
      $('.site_color_10 .fa_10').css('color', event.color.toString());
    });
  })
$(function () {
 $('.site_color_11').colorpicker()
    $('.site_color_11').on('colorpickerChange', function(event) {
      $('.site_color_11 .fa_11').css('color', event.color.toString());
    });
  })
$(function () {
 $('.site_color_12').colorpicker()
    $('.site_color_12').on('colorpickerChange', function(event) {
      $('.site_color_12 .fa_12').css('color', event.color.toString());
    });
  })
$(function () {
 $('.site_color_13').colorpicker()
    $('.site_color_13').on('colorpickerChange', function(event) {
      $('.site_color_13 .fa_13').css('color', event.color.toString());
    });
  })
$(function () {
 $('.site_color_14').colorpicker()
    $('.site_color_14').on('colorpickerChange', function(event) {
      $('.site_color_14 .fa_14').css('color', event.color.toString());
    });
  })
$(function () {
 $('.site_color_15').colorpicker()
    $('.site_color_15').on('colorpickerChange', function(event) {
      $('.site_color_15 .fa_15').css('color', event.color.toString());
    });
  })
$(function () {
 $('.site_color_16').colorpicker()
    $('.site_color_16').on('colorpickerChange', function(event) {
      $('.site_color_16 .fa_16').css('color', event.color.toString());
    });
  })
$(function () {
 $('.site_color_17').colorpicker()
    $('.site_color_17').on('colorpickerChange', function(event) {
      $('.site_color_17 .fa_17').css('color', event.color.toString());
    });
  })
$(function () {
  $('.site_color_18').colorpicker()
    $('.site_color_18').on('colorpickerChange', function(event) {
      $('.site_color_18 .fa_18').css('color', event.color.toString());
    });
  })
$(function () {
  $('.site_color_19').colorpicker()
    $('.site_color_19').on('colorpickerChange', function(event) {
      $('.site_color_19 .fa_19').css('color', event.color.toString());
    });
  })
$(function () {
  $('.site_color_20').colorpicker()
    $('.site_color_20').on('colorpickerChange', function(event) {
      $('.site_color_20 .fa_20').css('color', event.color.toString());
    });
  })
$(function () {
  $('.site_color_21').colorpicker()
    $('.site_color_21').on('colorpickerChange', function(event) {
      $('.site_color_21 .fa_21').css('color', event.color.toString());
    });
  })
</script>
