@php
    $target_count = App\Models\Target::where('goal_id', $goal->id)->count();
    $completed_target = App\Models\Target::where('goal_id', $goal->id)->where('target_status', 1)->count();
    if($target_count < 1 || $completed_target < 1) {
        $average = 0;
        $deg = 0;
    } else {
        $average = ($completed_target / $target_count) * 100;
        $deg = ($completed_target / $target_count) * 360;
    }
@endphp
<style>
    .circular{
      height:30px;
      width: 30px;
      position: relative;
      transform:scale(2);
    }
    .circular .inner{
      position: absolute;
      z-index: 6;
      top: 50%;
      left: 50%;
      height: 24px;
      width: 24px;
      margin: -12px 0 0 -12px;
      /* background: #fff; */
      border-radius: 100%;

    }
    .circular .number{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      font-size: 7px;
      font-weight: 700;
      color: #1e74fd;
    }
    .circular .bar{
      position: absolute;
      height: 100%;
      width: 100%;
      background: #ccc;
      -webkit-border-radius: 100%;
      clip: rect(0px, 30px, 30px, 15px);
    }
    .circle .bar .progress{
      position: absolute;
      height: 100%;
      width: 100%;
      -webkit-border-radius: 100%;
      clip: rect(0px, 15px, 30px, 0px);
      background: #1e74fd;
    }
    .circle .left .progress{
        z-index:1;
        animation: left 1s linear both;
    }
    @keyframes left{
        100%{
            transform: rotate({{$deg > 180 ? 180 : $deg}}deg); /* 60% = 60/100 x 360, 216 - 180deg = 36deg */
        }
    }
    .circle .right {
        transform: rotate(180deg);
        z-index:3;
    }
    .circle .right .progress{
        animation: right 1s linear both;
        animation-delay: 1s;
    }
    @keyframes right{
        100%{
            transform: rotate({{$deg > 180 ? $deg - 180 : 0}}deg); /* 60% = 60/100 x 360, 216 - 180deg = 36deg  */
        }
    }
    </style>
    <div class="circular">
        <div class="inner bg-custom-gray dark:bg-gray-800"></div>
        <div class="number">
            {{$average}}%
        </div>
        <div class="circle">
            <div class="bar left">
            <div class="progress"></div>
            </div>
            <div class="bar right">
            <div class="progress"></div>
            </div>
        </div>
    </div>


    <script>
        const nu = document.querySelector(".number");
        let counter = 0;
        setInterval(() => {
        if(counter == {{round($average)}} ){
            clearInterval();
        }else{
            counter+=1;
            nu.textContent = counter + "%";
        }
        }, 10);
    </script>