@if(count($sections)>0)
  @foreach($sections as $key=>$section)
    <div class="dragSection product_section_tab_{{$section->id}} product_section_tab_list" style="@if($key>0){{'display:none;'}}@endif">
        <div  class="row dragItemContainer">
        @if(count($section->packages)>0)
          @foreach($section->packages as $key=>$package)
            @php $color = ''; @endphp
            @if($package->product_type != 1)
              @if(fmod($key,4) == 0)
                @php $color = 'orange'; @endphp
              @elseif(fmod($key,4) == 1)
                @php $color = 'light-blue'; @endphp
              @elseif(fmod($key,4) == 2)
                @php $color = 'dark-blue'; @endphp
              @else
                @php $color = 'green'; @endphp
              @endif
            @endif
            <div class="drag-item col-lg-3 col-md-4 col-sm-6 {{$color}}" id="item-{{$package->product_main_id}}">
              <span class="drag-section-icon"><img src="{{asset('admin/images/drag-v.svg')}}" alt=""></span>
              <span class="delete-icon remove_product" data-id="{{base64_encode($package->product_id)}}" data-section-id="{{base64_encode($package->section_id)}}"><img src="{{asset('admin/images/recycle-bin.svg')}}" alt=""></span>
                @if($package->product_type == 1)
                  <div class="preview-container ml-0 mb-5">
                    <div class="preview-header">
                      <i class="fa fa-heart-o"></i>
                      <img src="{{asset('storage/test_package_image/'.$package->package_image)}}" alt="">
                    </div>
                    <div class="preview-body">
                      <div class="preview-body-top">
                        <h6>{{$package->package_name}}</h6>
                        <div class="preview-avatar">
                          @if($coachingDetails->logo)
                          <span class="avatar cover-image avatar-lg brround" style="background-image: url('{{asset('storage/coaching_logo/'.$coachingDetails->logo)}}')"></span>
                          @else
                          <span class="avatar cover-image avatar-lg brround" style="background-image: url('{{asset('admin/images/institute.jpg')}}')"></span>
                          @endif
                          <p class="star"><i class="fa fa-star"></i> @if($package->rating > 0){{number_format(($package->rating),1)}} @else{{'0.0'}} @endif</p>
                          <span class="rating">({{$package->rating_count}} Ratings)</span>
                        </div>
                      </div>
                      <div class="preview-body-content">
                        <p class="label-name">
                          <img src="{{asset('admin/images/map-location-line.svg')}}" alt="">
                          <span>{{$coachingDetails->coaching_name}}</span>
                        </p>
                        <p class="fs-9 font-bold my-4">{{$package->exam_type}}</p>
                        <ul class="preview-list">
                          <li>No of Tests : {{$package->no_of_test}}</li>
                          @php $test_type_name = ''; @endphp
                          @if(isset($package->testByTestType))
                            @foreach($package->testByTestType as $test_type_key=>$test_types)
                              @if(isset($test_types->testTypeByTest) && $test_type_key < 2)
                                @php $test_type_name .= $test_types->count.' '.$test_types->testTypeByTest->test_type_name.' + '; @endphp
                              @endif
                            @endforeach
                            @if(count($package->testByTestType)>0)<li>{{trim($test_type_name, ' + ')}}</li>@else<li>N/A</li>@endif
                          @endif
                          @php $test_language = ''; $languages = explode(' & ',$package->languages);  @endphp
                          @if(count($languages)>0)
                            @foreach($languages as $lang)
                              @if($lang == 1)
                                @php $test_language .= 'English | '; @endphp
                              @else
                                @php $test_language .= 'Hindi | '; @endphp
                              @endif
                            @endforeach
                          @endif
                          <li>{{trim($test_language, ' | ')}}</li>
                          <li>Validity {{($package->validity_type ==0) ? $package->validity : date('d-m-Y', strtotime($package->expire_date))}}</li>
                        </ul>
                        @if($package->sale_type < 4)
                          @if($package->discount_price > 0)
                            @php
                              $show_btn = ($package->share_unlock_discount_price ? 'Share & Unlock' : 'Buy Now') ;
                              $show_price = $package->discount_price." <strike>".$package->product_price."</strike>" ;
                            @endphp
                          @else
                            @php
                              $show_btn = 'Buy Now' ;
                              $show_price = $package->product_price;
                            @endphp
                          @endif
                        @else
                          @php
                            $show_btn = 'Unlock Free' ;
                            $show_price = 0 ;
                          @endphp
                        @endif
                        <p class="preview-price"><i class="fa fa-rupee"></i> {!!$show_price!!} /-</p>
                        <button class="btn btn-preview-outline disable-btn">{!!$show_btn!!}</button>
                      </div>
                    </div>
                  </div>
                @else 
                  <div class="preview-container ml-0 mb-5">
                    <div class="preview-header">
                      <div class="header-content">
                        <h3>{{(($package->product_type == 2) ? $package->set_name : $package->quiz_name)}}</h3>
                        <p>Attempted by {{$package->total_attempt}}</p>
                      </div>
                      <i class="fa fa-heart-o"></i>
                      <img src="{{asset('admin/images/students.jpg')}}" alt="">
                    </div>
                    <div class="preview-body">
                      <div class="preview-body-top">
                        <h6>{{$coachingDetails->coaching_name}}</h6>
                        <div class="preview-avatar">
                          @if($coachingDetails->logo)
                          <span class="avatar cover-image avatar-lg brround" style="background-image: url('{{asset('storage/coaching_logo/'.$coachingDetails->logo)}}')"></span>
                          @else
                          <span class="avatar cover-image avatar-lg brround" style="background-image: url('{{asset('admin/images/institute.jpg')}}')"></span>
                          @endif
                          <p class="star"><i class="fa fa-star"></i> @if($package->rating > 0){{number_format(($package->rating),1)}} @else{{'0.0'}} @endif</p>
                          <span class="rating">({{$package->rating_count}} Ratings)</span>
                        </div>
                      </div>
                      <div class="preview-body-content">
                        <p class="label-name">
                          <img src="{{asset('admin/images/map-location-line.svg')}}" alt="">
                          <span>{{$coachingDetails->city.', '.$coachingDetails->name}}</span>
                        </p>
                        <p class="fs-9 font-bold my-4">{{$package->exam_type}}</p>
                        @if($package->product_type == 2)
                          <ul class="preview-list">
                            <li>Total Chapters : @if(isset($package->chapters)){{count($package->chapters)}}@else{{0}}@endif</li>
                            <li>Total Questions : @if(isset($package->questions)){{count($package->questions)}}@else{{0}}@endif</li>
                            <li>{{(($package->language_id == 1) ? 'English' : 'Hindi')}}</li>
                          </ul>
                        @else
                          <ul class="preview-list">
                            <li>Questions : @if(isset($package->questions)){{count($package->questions)}}@else{{0}}@endif</li>
                            <li>Time : {{$package->duration}}</li>
                            <li>{{(($package->language_id == 1) ? 'English' : 'Hindi')}}</li>
                          </ul>
                        @endif
                        <button class="btn btn-preview-outline disable-btn">{{(($package->product_type == 2) ? 'Start Practice' : 'Start Quiz')}}</button>
                      </div>
                      </div>
                  </div>
                @endif
              </div>
          @endforeach
        @else
          No products found..
        @endif
      </div>
      @if($section->total_packages >2)
      <div class="view-more"><a href="javascript:void(0)" class="section_view_more" data-section-id="{{$section->id}}" data-offset="2" data-total="{{$section->total_packages}}">View More <i class="fa fa-angle-down"></i></a></div>
      @endif
    </div>
  @endforeach
@else
    No products found..
@endif
<script type="text/javascript">
  $(function(){
    $(".dragItemContainer").sortable({ containment: "parent" });
    $(".dragItemContainer").disableSelection();
    $('.sectionAdd').attr('data-total-section', '{{count($sections)}}');
    $('.dragItemContainer').sortable({
        axis: 'x',
        stop: function (event, ui) {
            var order_data = $(this).sortable('serialize');
            console.log('serialize-------',order_data);
            $.ajax({
                url: update_product_order,
                type: "POST",
                data: order_data,
                headers: {
                    'X-CSRF-TOKEN': csrf_token,
                    '_token' : csrf_token
                },    
                dataType: 'JSON',
                success:function (data) {
                    console.log(data);
                    if (data.status == 200){
                        //
                    } else {
                        alertify.error(data.message);
                    }
                }, error:function (data) {  
                    //           
                }
            })
        }
    })
  })
</script>