<div class="row mb-3">
  <div class="col-lg-3 col-md-4">
    <?php
    if ($field_title !='') {
      ?>
      <label class="d-block mb-0" for="<?php echo $field_id ?>"><?php echo $field_title ?></label>
      <?php
    }
    if ($field_subtitle !='') {
      ?>
      <small><?php echo $field_subtitle ?></small>
      <?php
    }
     ?>
  </div>
  <style media="screen">
  .transparent_bg {
      position: absolute;
      background-image: url(assets/img/placeholder/transparent.jpg);
      display: block;
      height: 82%;
      width: 82%;
      cursor: pointer;
      background-position: center center;
      background-size: cover;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid #b1b1b1;
      border-radius: 3px;
  }
  </style>
  <div class="col-md-8">
    <div class="form-group">
      <div class="input-group w-50 mb-3">
        <div class="position-relative">
          <label style="display: <?php echo ($form_value =='') ? 'block' : 'none' ?>" id="coloPickerLabel<?php echo $field_id ?>" class="transparent_bg" for="colorPicker<?php echo $field_id ?>"></label>
          <input value="<?php echo $form_value ?>"  type="color" class="rounded-0 rounded-start form-control form-control-color" id="colorPicker<?php echo $field_id ?>">
        </div>
        <input  name="<?php echo $field_id ?>"  value="<?php echo $form_value ?>"  type="search" class="form-control w-75" id="colorInput<?php echo $field_id ?>">
      </div>
    <script>
      const colorPicker<?php echo $field_id ?> = document.getElementById("colorPicker<?php echo $field_id ?>");
      const colorInput<?php echo $field_id ?> = document.getElementById("colorInput<?php echo $field_id ?>");
      const coloPickerLabel<?php echo $field_id ?> = document.getElementById("coloPickerLabel<?php echo $field_id ?>");

      colorPicker<?php echo $field_id ?>.addEventListener("input", () => {
          colorInput<?php echo $field_id ?>.value = colorPicker<?php echo $field_id ?>.value;
          if (colorPicker<?php echo $field_id ?>.value === "" || colorInput<?php echo $field_id ?>.value === "") {
              coloPickerLabel<?php echo $field_id ?>.style.display = "block";
          }else {
              coloPickerLabel<?php echo $field_id ?>.style.display = "none";
          }
      });

      colorInput<?php echo $field_id ?>.addEventListener("input", () => {
          colorPicker<?php echo $field_id ?>.value = colorInput<?php echo $field_id ?>.value;
          if (colorPicker<?php echo $field_id ?>.value === "" || colorInput<?php echo $field_id ?>.value === "") {
            coloPickerLabel<?php echo $field_id ?>.style.display = "block";
          }else {
              coloPickerLabel<?php echo $field_id ?>.style.display = "none";
          }
      }); 
    </script>
       <?php
        if ($field_desc !='') {
          ?>
          <small><?php echo $field_desc ?></small>
          <?php
        }
      ?>
    </div>
  </div>
</div>
