@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=" 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 {{$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">
                      
                      <img src="{{asset('storage/test_package_image/'.$package->package_image)}}" alt="" style="width: 100%">
                    </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_count > 2){{number_format(($package->rating),2)}} @else{{'-'}} @endif</p>
                          @if($package->rating_count > 2)
                          <span class="rating">({{$package->rating_count}} Ratings)</span>
                          @else
                          <span class="rating">(Not Rated)</span>
                          @endif
                        </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>
                        @php 
                          $more_subject = explode(' & ', $package->exam_type);
                          if(count($more_subject) > 3){
                              $result_subject = '';
                              foreach ($more_subject as $keyss=>$valuess) {
                                  if($keyss>2){
                                      $result_subject .= '<p>'.$valuess.'</p>';
                                  }
                              }
                              $package->exam_type = '<a href="javascript:void(0)" class="more_subject" data-title="'.$result_subject.'">'.($more_subject[0].' & '.$more_subject[1].' & '.$more_subject[2]).'<span class="badge badge-primary badge-pill fs-10 ml-5">+'.(count($more_subject)-3).'</span><div id="tooltip"></div></a>';
                          } else {
                              $package->exam_type = $package->exam_type;
                          }
                        @endphp
                        <span class="fs-9 font-bold my-4 series-exam-types">{!!$package->exam_type!!}</span>
                        <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.' days' : date('d-m-Y', strtotime($package->expire_date))}}</li>
                        </ul>
                        @if($package->status == 6)
                          @if($package->sale_type < 4)
                            @if($package->discount_price > 0)
                              @php
                                $show_btn = 'Unavailable' ;
                                $show_price = $package->discount_price." <strike>".$package->product_price."</strike>" ;
                              @endphp
                            @else
                              @php
                                $show_btn = 'Unavailable' ;
                                $show_price = $package->product_price;
                              @endphp
                            @endif
                          @else
                            @php
                              $show_btn = 'Unavailable' ;
                              $show_price = ($package->product_price > 0 ? " <strike>".$package->product_price."</strike>" : 0); 
                            @endphp
                          @endif
                        @else
                          @if($package->sale_type < 4)
                            @if($package->discount_price > 0)
                              @php
                                $show_btn = ($package->on_sale_status == 1 ? 'Unavailable' : 'Buy Now') ;
                                $show_price = $package->discount_price." <strike>".$package->product_price."</strike>" ;
                              @endphp
                            @else
                              @php
                                $show_btn = ($package->on_sale_status == 1 ? 'Unavailable' : 'Buy Now') ;
                                $show_price = $package->product_price;
                              @endphp
                            @endif
                          @else
                            @php
                              $show_btn = ($package->on_sale_status == 1 ? 'Unavailable' : 'Unlock Free')  ;
                              $show_price = ($package->product_price > 0 ? " <strike>".$package->product_price."</strike>" : 0); 
                            @endphp
                          @endif
                        @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>
                      
                      <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_count > 2){{number_format(($package->rating),2)}} @else{{'-'}} @endif</p>
                          @if($package->rating_count > 2)
                          <span class="rating">({{$package->rating_count}} Ratings)</span>
                          @else
                                <span class="rating">(Not Rated)</span>
                          @endif
                        </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>
                        @php 
                          $more_subject = explode(' & ', $package->exam_type);
                          if(count($more_subject) > 3){
                              $result_subject = '';
                              foreach ($more_subject as $keyss=>$valuess) {
                                  if($keyss>2){
                                      $result_subject .= '<p>'.$valuess.'</p>';
                                  }
                              }
                              $package->exam_type = '<a href="javascript:void(0)" class="more_subject" data-title="'.$result_subject.'">'.($more_subject[0].' & '.$more_subject[1].' & '.$more_subject[2]).'<span class="badge badge-primary badge-pill fs-10 ml-5">+'.(count($more_subject)-3).'</span><div id="tooltip"></div></a>';
                          } else {
                              $package->exam_type = $package->exam_type;
                          }
                        @endphp
                        <span class="fs-9 font-bold my-4 series-exam-types">{!!$package->exam_type!!}</span>
                        @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>Total Marks : @if(isset($package->totalMarks[0])) @if(isset($package->totalMarks[0]->marks)) @if($package->totalMarks[0]->marks>0) {{(int)$package->totalMarks[0]->marks}} @else{{0}} @endif  @else{{0}} @endif @else{{0}} @endif</li>
                            <li>Time : {{$package->duration}} Minutes</li>
                            <li>{{(($package->language_id == 1) ? 'English' : 'Hindi')}}</li>
                          </ul>
                        @endif
                        @if($package->is_published == 1)
                        <button class="btn btn-preview-outline disable-btn">{{(($package->product_type == 2) ? 'Start Practice' : 'Start Quiz')}}</button>
                        @else
                        <button class="btn btn-preview-outline disable-btn">Unavailable</button>
                        @endif
                      </div>
                      </div>
                  </div>
                @endif
              </div>
          @endforeach
        @else
          <div class="no-data-found-card">
             <img src="{{asset('admin/images/no-data.png')}}" alt="">
             <h3>No Record Found</h3>
           </div>
        @endif
      </div>
      @if($section->total_packages >4)
      <div class="view-more"><a href="javascript:void(0)" class="section_view_more" data-section-id="{{$section->id}}" data-offset="4" data-total="{{$section->total_packages}}">View More <i class="fa fa-angle-down"></i></a></div>
      @endif
    </div>
  @endforeach
@else
    <div class="no-data-found-card">
       <img src="{{asset('admin/images/no-data.png')}}" alt="">
       <h3>No Record Found</h3>
     </div>
@endif
<script type="text/javascript">
  $(function(){

    $(".dragItemContainer").sortable({ containment: "parent", placeholder: "testclass"  }).disableSelection();   
    $('.dragItemContainer').sortable({
        //axis: 'x',
        placeholder: "testclass",        
        stop: function (event, ui) {     

            var order_data = $(this).sortable('serialize');
        }
    })
    $('.dragItemContainer').sortable({
        //axis: 'x',
        placeholder: "testclass",
        start: function (event, ui) {
             ui.item.toggleClass("testclass");
        },
        stop: function (event, ui) {
            ui.item.toggleClass("testclass");
            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) {  
                    //           
                }
            })
        }
    })
  })