@extends('front.frontLayout')
@section('title','All Tests')
@section('pagelevelcss')
@stop
@section('content')
<section class="test-pkg-section section-padding  filter-ipad-sec" id="filter-sec">
   <div class="container">
      <div class="main">
         <div id="myBtnContainer">
            <button class="btn active" onclick="filterSelection('all')">All</button>
            @foreach($package_category as $value)
               <button class="btn remove-{{$value->id}}" onclick="filterSelection('{{ $value->id }}')">{{ $value->name }}</button>
            @endforeach
               <button class="btn remove-0" onclick="filterSelection('0')">Covid</button>
         </div>
         <!-- Portfolio Gallery Grid -->
         <div class="row">
            @if(count($packages) > 0)
               @foreach($packages as $value)
                  <div class="column icon-box package-category-{{ $value->package_category_id }}">
                     <div class="icon">
                        <img src="{{ asset('uploads/'.$value->package_image) }}" class="img-responsive" alt="{{ $value->name }}">
                     </div>
                     <!-- <h4><a href="{{ route('test.detail', ['name_url' => $value->name_url]) }}" class="main-title text-center">{{ $value->name }}</a></h4> -->
                     <h4><a href="{{ route('test.detail',$value->id) }}" class="main-title text-center">{{ $value->name }}</a></h4>
                     <p class="description">{{ $value->short_description }}</p>
                     <h4 class="mb-4"><a href="javascript::void(0);" class="main-title-red text-center">${{ $value->price }}</a></h4>
                     <a href="{{ route('test.detail',$value->id) }}" title="" class="custom-btn ">Learn More</a>
                  </div>
               @endforeach
            @else
               <!-- <div class="icon-box">
                  <p class="description">No data available.</p>
               </div> -->
            @endif
            @foreach($covids as $covid_val)
               <div class="column icon-box package-category-0 covid-panel-all">
                  <div class="icon">
                     <img src="{{ asset('uploads/'.$covid_val->image) }}" class="img-responsive" alt="{{ $covid_val->title }}">
                  </div>
                  <h4><a href="{{ route('covid') }}" class="main-title text-center">{{ $covid_val->title }}</a></h4>
                  <!-- <p class="description"></p> -->
                  <!-- <p class="description">RT-PCR</p> -->
                  <p class="description">{{ $covid_val->short_description }}</p>
                  <h4 class="mb-4"><a href="javascript::void(0);" class="main-title-red text-center">{{config('app.covid_currency')}}{{ $covid_val->price }}</a></h4>
                  @if($covid_val->id)
                     <a href="{{route('BookCovidAppointment',$covid_val->id) }}" title="" class="custom-btn ">Learn More</a>
                  @else
                     <a href="{{ route('covid') }}" title="" class="custom-btn ">Learn More</a>
                  @endif
               </div>
            @endforeach
            <!-- <div class="column icon-box package-category-0">
               <div class="icon">
                  <img src="{{ asset('frontend/images/rapid-antigen-test.jpg') }}" class="img-responsive" alt="Rapid Antigen Test">
               </div>
               <h4><a href="{{ route('covid') }}" class="main-title text-center">Rapid Antigen Test</a></h4>
               <p class="description">Covid Rapid Antigen Test</p>
               <h4 class="mb-4"><a href="javascript::void(0);" class="main-title-red text-center">{{config('app.covid_currency')}}{{config('app.covid_antigen_price')}}</a></h4>
               <a href="{{ route('covid') }}" title="" class="custom-btn ">Learn More</a>
            </div> -->
         </div>
         <!-- END MAIN -->
      </div>
   </div>
</section>
@endsection
@section('pageleveljs')
<script>
   jQuery(document).ready(function() {
      let type = 'all';
      typedata = '{{app('request')->input('type')}}';
      if(typedata != '')
      {
         $('.active').removeClass('active');
         $('.remove-'+typedata).addClass('active');         
         type = typedata;
      }
      // if(type == "all")
      // {
      //    $('.active').removeClass('active');
      //    $('.remove-'+type).addClass('active');
      // }
      filterSelection(type)
   });
   function filterSelection(c) {
       var x, i;
       x = document.getElementsByClassName("column");
       if (c == "all") c = "";
       for (i = 0; i < x.length; i++) {
           w3RemoveClass(x[i], "show");
           if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
       }
   }

   function w3AddClass(element, name) {
       var i, arr1, arr2;
       arr1 = element.className.split(" ");
       arr2 = name.split(" ");
       for (i = 0; i < arr2.length; i++) {
           if (arr1.indexOf(arr2[i]) == -1) {
               element.className += " " + arr2[i];
           }
       }
   }

   function w3RemoveClass(element, name) {
       var i, arr1, arr2;
       arr1 = element.className.split(" ");
       arr2 = name.split(" ");
       for (i = 0; i < arr2.length; i++) {
           while (arr1.indexOf(arr2[i]) > -1) {
               arr1.splice(arr1.indexOf(arr2[i]), 1);
           }
       }
       element.className = arr1.join(" ");
   }
   // Add active class to the current button (highlight it)
   var btnContainer = document.getElementById("myBtnContainer");
   var btns = btnContainer.getElementsByClassName("btn");
   for (var i = 0; i < btns.length; i++) {
       btns[i].addEventListener("click", function() {
           var current = document.getElementsByClassName("active");
           current[0].className = current[0].className.replace(" active", "");
           this.className += " active";
       });
   }
</script>
@stop