<section class="margin-top-xs-55" style="position: relative;
">
  <div class="header-text mb-0">
    <div>
      <div class="row ">
        <div class="col-lg-12 col-md-12 col-sm-12 text-center">
          <svg style="width:100%;height: 450px;" viewBox="0 0 1280 679" preserveAspectRatio="none" width="100%" height="100%">
            <defs>
              <g id="shape">
                <path d="M0 0H1280V544.882C1280 544.882 1115 679 640 679C165 679 0 544.882 0 544.882V0Z" fill="#D9D9D9"></path>
                <path d="M0 0H1280V544.882C1280 544.882 1115 679 640 679C165 679 0 544.882 0 544.882V0Z" fill="url(#gradient)"></path>
              </g>
              <radialGradient id="gradient" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(640 -261.197) rotate(90) scale(815.683 664.92)">
                <stop stop-color="#4169E1"></stop>
                <stop offset="1" stop-color="#071A34"></stop>
              </radialGradient>
            </defs>
            <use href="#shape"></use>
          </svg>
          <div class="frame-image">
            <div style="position: absolute; border-radius: inherit; inset: 0px;" data-framer-background-image-wrapper="true"><img decoding="async" sizes="100vw" src="<?php echo base_url(); ?>assets/lSHGuRrPALnsNPFyY1JslN8so.png" alt="" style="display: block; width: 100%; height: 100%; border-radius: inherit; object-position: center center; object-fit: cover;"></div>
          </div>
          <div class="text-body main-header-text">
            <h1 class="text-center text-white"><b>Compress IMAGE</b></h1>
            <h4 class="text-center text-white">Compress JPG, PNG, SVG or GIF with the best quality and compression. Reduce the filesize of your images at once.</h4>
          </div>
        </div>

        <div class="floating-icons">
          <i class="icon-facebook"></i>
          <i class="icon-adwords"></i>
          <i class="icon-seo"></i>
          <i class="icon-instagram"></i>
          <i class="icon-activecampaign"></i>
          <i class="icon-wordpress"></i>
          <i class="icon-shopify"></i>
          <i class="icon-youtube"></i>
          <i class="icon-analytics"></i>
          <i class="icon-kk"></i>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="sptb">
  <div class="container">
    <div class="row">

      <div class="col-md-12">
        <div class="card border-0 shadow-none bg-transparent">
          <div class="row justify-content-center">
            <form name="data-form" id="data-form" enctype="multipart/form-data">
              <div class="col-lg-8 col-xl-8 col-md-12 mx-auto mt-5">
                <div class="card mb-0 single-page customerpage contact">
                  <div class="card-body wrapper wrapper2 box-shadow-0" style="border :2px dotted #be1502">
                    <div class="name">
                      <label class="text-center">Upload Image</label>
                      <input type="file" class="form-control info-textarea pagetitle" name="image" id="image">
                    </div>
                    <div class="name mt-5">
                      <button class="btn btn-secondary" type="submit" id="gen_btn">Compress Now</button>
                    </div>
                    <div id="main_data">

                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<script type="text/javascript">
  $(document).ready(function() {
    $("form#data-form").on("submit", function(e) {
      e.preventDefault();
      var formData = new FormData(this);
      $.ajax({
        beforeSend: function() {
          $('#gen_btn').prop('disabled', true);
          $("#gen_btn").html('loading.......');
        },
        url: '<?php echo base_url() ?>/home/compress_image',
        type: "post",
        data: formData,
        success: function(data) {
          if (data == 3) {
            alert("Image Type not allowed");
            return false;
          } else if (data == 4) {
            alert("Some error !.. Please try Again");
            return false;
          } else {
            $('#main_data').show();
            $('#main_data').html(data);
          }
          $("#gen_btn").html('Compress Now');
          $('#gen_btn').prop('disabled', false);
          console.log(data)
        },
        error: function(e) {
          console.log(e)

        },
        contentType: false,
        processData: false
      });
    });
  });
  $(function() {

    $(".progress").each(function() {

      var value = $(this).attr('data-value');
      var left = $(this).find('.progress-left .progress-bar');
      var right = $(this).find('.progress-right .progress-bar');

      if (value > 0) {
        if (value <= 50) {
          right.css('transform', 'rotate(' + percentageToDegrees(value) + 'deg)')
        } else {
          right.css('transform', 'rotate(180deg)')
          left.css('transform', 'rotate(' + percentageToDegrees(value - 50) + 'deg)')
        }
      }

    })

    function percentageToDegrees(percentage) {

      return percentage / 100 * 360

    }

  });
</script>
<style type="text/css">
  .progress {
    width: 90px;
    height: 90px;
    background: none;
    position: relative;
  }

  .progress::after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 6px solid #eee;
    position: absolute;
    top: 0;
    left: 0;
  }

  .progress>span {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
  }

  .progress .progress-left {
    left: 0;
  }

  .progress .progress-bar {
    width: 100%;
    height: 100%;
    background: none;
    border-width: 6px;
    border-style: solid;
    position: absolute;
    top: 0;
  }

  .progress .progress-left .progress-bar {
    left: 100%;
    border-top-right-radius: 80px;
    border-bottom-right-radius: 80px;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
  }

  .progress .progress-right {
    right: 0;
  }

  .progress .progress-right .progress-bar {
    left: -100%;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
    border-right: 0;
    -webkit-transform-origin: center right;
    transform-origin: center right;
    animation: loading-2 1.5s linear forwards 1.8s;
  }

  .progress .progress-value {
    position: absolute;
    top: 7px;
    left: 0;
  }

  #main_data {
    color: #000;
    display: none;
    text-align: center;
    margin-top: 10px;
    padding: 10px;
  }

  #main_data span {
    color: #000;
    font-size: 20px;
    font-weight: 700;
  }
</style>