@foreach($subscription_plans as $key => $plan)
   @php
      $getTrialPrice = 49;
      if($plan->min_qty == 2){
         $getTrialPrice = 99;
      }
      elseif($plan->min_qty == 5){
         $getTrialPrice = 149;
      }
   @endphp
<div class="col-md-4 mb-3">
   <div class="gz_plan_box position-relative h-100">
      @if($loop->index == 1)
         <div class="gz_rc_box text-uppercase"><img src="{{ asset('assets/gz-page/images/gz-images/Recommended.svg') }}" alt="" class="gz_rc_box_img">
         </div>
      {{-- @elseif($loop->index == 2)
         <div class="gz_rc_box text-uppercase"><img src="{{ asset('assets/gz-page/images/gz-images/creative-work.svg') }}" alt="" class="gz_rc_box_img">
         </div> --}}
      @endif
      <div class="d-flex justify-content-between mb-3">
         <div class="gz_plan_head_wrap">
            <h4 class="gz_plan_head mb-0">{{ $plan->name ?? ''}}</h4>
         </div>
      </div>
      
      <h2 class="gz_head_price mb-4">
         @php
            $getPrice = $plan->min_price;
            if(strtolower($term) == 'quater'){
            $getPrice = $plan->min_price/3;
            }
            elseif (strtolower($term) == 'year') {
            $getPrice = $plan->min_price/12;
            }
         @endphp
         <span class="text-white none-hover discount_price"><sup class="gz-h-s">$</sup>{{$getPrice}}</span>

         <span class="gz_head_price-cut"><sup class="">$</sup>{{ $getPrice ?? ''}}</span>
         <span class="per-month for-hover">/Month</span>
         <span class="none-hover trial-14days ps-2">/Month</span>
      </h2>

         <a class="btn w-100 start-14-day" href="{{ route('register') }}?sc={{ \Illuminate\Support\Facades\Crypt::encrypt([$plan->id]) }}">
            GET STARTED
            {{-- START
            14-DAY TRIAL
            FOR <span class="color-bdf200">${{$getTrialPrice}}</span> --}}
         </a>

      <div class="gz-price-feature mt-4">
         <ul class="feature-ul mb-0">
            <li class="projects-at-a-time">
               
            @if($plan->min_qty > 1)
               <h6>Up to {{$plan->min_qty ?? 2}} Projects at a time</h6>
            {{-- @elseif($loop->index == 2)
               <h6>Up to 5 Projects at a time</h6> --}}
            @else
               <h6>1 Project At a Time</h6>
            @endif
               <p>Continuously start new ones as projects are completed</p>
            </li>
            <li class="d-flex gz-f-card-li align-items-baseline">
               <img src="{{ asset('assets/gz-page/images/gz-images/check.svg') }}" alt="" class="me-2 al-tick for-hover">
               <img src="{{ asset('assets/gz-page/images/gz-images/check-white.svg') }}" alt="" class="me-2 al-tick none-hover">
               @if($loop->index == 1)
               <span>
                  <h6 class="mb-0">Designed for Large Companies</h6>Advance features for established enterprises
               </span>
               @elseif($loop->index == 2)
               <span>
                  <h6 class="mb-0">Tailored for Growing Businesses</h6>Expended features to scale your operations
               </span>
               @else
               <span>
                  <h6 class="mb-0">Perfect for Start-ups</h6>Basic features to kickstart
                  your
                  journey
               </span>
               @endif
            </li>
            <li class="d-flex gz-f-card-li align-items-baseline">
            <img src="{{ asset('assets/gz-page/images/gz-images/check.svg') }}" alt="" class="me-2 al-tick for-hover">
               <img src="{{ asset('assets/gz-page/images/gz-images/check-white.svg') }}" alt="" class="me-2 al-tick none-hover">
               Branding
            </li>
            <li class="d-flex gz-f-card-li align-items-baseline"><img src="{{ asset('assets/gz-page/images/gz-images/check.svg') }}" alt="" class="me-2 al-tick for-hover">
               <img src="{{ asset('assets/gz-page/images/gz-images/check-white.svg') }}" alt="" class="me-2 al-tick none-hover"> Social
               Media & Marketing </li>
            <li class="d-flex gz-f-card-li align-items-baseline"><img src="{{ asset('assets/gz-page/images/gz-images/check.svg') }}" alt="" class="me-2 al-tick for-hover">
               <img src="{{ asset('assets/gz-page/images/gz-images/check-white.svg') }}" alt="" class="me-2 al-tick none-hover"> UI/UX
            </li>
            <li class="d-flex gz-f-card-li align-items-baseline"><img src="{{ asset('assets/gz-page/images/gz-images/check.svg') }}" alt="" class="me-2 al-tick for-hover">
               <img src="{{ asset('assets/gz-page/images/gz-images/check-white.svg') }}" alt="" class="me-2 al-tick none-hover">
               Illustrations </li>
            <li class="d-flex gz-f-card-li align-items-baseline"><img src="{{ asset('assets/gz-page/images/gz-images/check.svg') }}" alt="" class="me-2 al-tick for-hover">
               <img src="{{ asset('assets/gz-page/images/gz-images/check-white.svg') }}" alt="" class="me-2 al-tick none-hover"> Motion
               Graphics </li>
            <li class="d-flex gz-f-card-li align-items-baseline"><img src="{{ asset('assets/gz-page/images/gz-images/check.svg') }}" alt="" class="me-2 al-tick for-hover">
               <img src="{{ asset('assets/gz-page/images/gz-images/check-white.svg') }}" alt="" class="me-2 al-tick none-hover"> Video
               Editing </li>
         </ul>
      </div>
   </div>
</div>

@endforeach