@extends('layouts.app')

@section('content')

    <!-- Start Home Header -->
    @include('layouts.partial.menu')
    <!-- PAGE TITLE ================================================== -->

    <!-- CONTROL BAR ================================================== -->
    <div class="container mb-6 mb-xl-8 z-index-2" style="margin-top:60px">
        <div class="d-lg-flex align-items-center mb-6 mb-xl-0">
            <!-- <p class="mb-lg-0">We found <span class="text-dark">{{ count($course) }} courses</span> available for you</p> -->
           <h1 class="mb-1 certzip-heading-color">Certzip Offers These Courses</h1> 
            <div class="ms-lg-auto d-lg-flex flex-wrap">
                <div class="mb-4 mb-lg-0 ms-lg-6">
                    <!-- <div class="border rounded d-flex align-items-center choices-label h-50p">
                        <span class="ps-5">Sort by:</span>
                        <select
                            class="form-select form-select-sm text-dark border-0 ps-1 bg-transparent flex-grow-1 shadow-none dropdown-menu-end"
                            data-choices>
                            <option>Default</option>
                            <option>New Courses</option>
                            <option>Price Low to High</option>
                            <option>Price High to low</option>
                        </select>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
    <!-- COURSE ================================================== -->
    <div class="container">
        <div class="row">
            <div class="col-xl-3 mb-5 mb-xl-0">
                <!-- SIDEBAR FILTER ================================================== -->
                <div class=" vertical-scroll" id="courseSidebar">
                    <div class="border rounded mb-6 bg-white sticky-div">
                        <!-- Heading -->
                        <div id="coursefilter1">
                            <h4 class="mb-0">
                                <button
                                    class="p-6 text-dark fw-medium d-flex align-items-center collapse-accordion-toggle line-height-one"
                                    type="button" data-bs-toggle="collapse" data-bs-target="#coursefiltercollapse1"
                                    aria-expanded="true" aria-controls="coursefiltercollapse1">
                                    Category
                                    <span class="ms-auto text-dark d-flex">
                                        <!-- Icon -->
                                        <svg width="15" height="2" viewBox="0 0 15 2" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <rect width="15" height="2" fill="currentColor" />
                                        </svg>
                                        <svg width="15" height="16" viewBox="0 0 15 16" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path d="M0 7H15V9H0V7Z" fill="currentColor" />
                                            <path d="M6 16L6 8.74228e-08L8 0L8 16H6Z" fill="currentColor" />
                                        </svg>
                                    </span>
                                </button>
                            </h4>
                        </div>
                        <div id="coursefiltercollapse1" class="collapse show mt-n2 px-6 pb-6"
                            aria-labelledby="coursefilter1" data-parent="#courseSidebar">
                           
                            <ul class="list-unstyled list-group list-checkbox">
                            @php $menus = ChildMenu(0); @endphp
                            @if(count($menus))
                            @foreach($menus as $menu)
                                <li class="custom-control custom-checkbox">
                                    <input type="radio" class="custom-control-input search-itemby-course" id="categorycustomcheckone{{$menu->id}}" name="courseradio" value="{{$menu->id}}" @if($menu->id==$cid) checked @endif>
                                    <label class="custom-control-label font-size-base" for="categorycustomcheckone{{$menu->id}}">{{$menu->name}}</label>
                                </li>
                            @endforeach
                            @endif
                            </ul>
                           
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-9">
                <div class="row row-cols-md-2 row-cols-lg-3 mb-3 " id="course_result">
                    @if(count($course)>0)
                    @foreach ($course as $item)
                    @php 
                    $coursename = $item->name;
                    $cleanedName = preg_replace('/[^A-Za-z0-9\-]/', '', strtolower($coursename));
                                                // Generate slug
                    $coursestring = Str::slug($cleanedName);
                    @endphp
                    <div class="col-md pb-4 pb-md-7" id="course_detail">
                        <!-- Card -->
                        @if($item->mark_bestseller=='Yes') <div class="bestseller"> <p>Bestseller</p> </div> @endif
                        <div class="card border shadow p-2 lift sk-fade">
                            <!-- Image -->
                            <div class="card-zoom position-relative">
                                <a href="{{ route('courseDetail',$item->slug)}}" class="card-img sk-thumbnail img-ratio-3 d-block">
                                    <img class="rounded shadow-light-lg" src="{{ url('uploads/course/'.$item->image) }}" alt="" loading="lazy">
                                </a>
                                <!-- <span class="sk-fade-right badge-float bottom-0 right-0 mb-2 me-2">
                                    <ins class="h5 mb-0 text-white">{{ Config::get('app.currency_icon') }} {{ $item->price }}</ins>
                                </span> -->
                            </div>
                            <!-- Footer -->
                            <div class="card-footer px-2 pb-2 mb-1 pt-4 position-relative">
                                <!-- Preheading -->
                                <div class="mb-4 mb-md-0">
                                      
                                      <div class="d-lg-flex align-items-center">
                                        @if($item->rating!=null)
                                            <div class="rating full-star-row">
                                                <div class="empty-star">
                                                <span class="far fa-star"></span>
                                                <span class="far fa-star"></span>
                                                <span class="far fa-star"></span>
                                                <span class="far fa-star"></span>
                                                <span class="far fa-star"></span>
                                                </div>
                                                <div class="overlay-star" style="width:100%;"  ></div>
                                                <div class="fill-star">
                                                <span class="fas fa-star"></span>
                                                <span class="fas fa-star"></span>
                                                <span class="fas fa-star"></span>
                                                <span class="fas fa-star"></span>
                                                <span class="fas fa-star"></span>
                                                </div>
                                                
                                            </div>
                                            <div class="font-size-xs ms-lg-3">
                                                <span>{{number_format((float)$item->rating, 1, '.', '')}} (@if($item->r_count>1000){{ round($item->r_count/1000,1).'k' }}@else{{$item->r_count}}@endif)</span>
                                            </div>
                                        @endif
                                      </div>
                                   </div>
                                <a href="{{ route('courseDetail',$item->slug)}}">
                                    <span class="mb-1 d-inline-block text-gray-800">{{ $item->category_name }}</span>
                                </a>
                                <!-- Heading -->
                                <div class="position-relative">
                                    <a href="{{ route('courseDetail',$item->slug)}}" class="d-block stretched-link">
                                        <h5 class="line-clamp-2 h-md-48 h-lg-58 me-md-8 me-lg-10 me-xl-4 mb-2">{{ $item->name }}</h5>
                                    </a>
                                    <div class="row mx-n2 align-items-end">
                                     <!--    <div class="col px-2">
                                            <ul class="nav mx-n3">
                                                <li class="nav-item px-3">
                                                    <div class="d-flex align-items-center">
                                                        <div class="me-2 d-flex text-secondary icon-uxs">
                                                           
                                                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <path d="M17.1947 7.06802L14.6315 7.9985C14.2476 7.31186 13.712 6.71921 13.0544 6.25992C12.8525 6.11877 12.6421 5.99365 12.4252 5.88303C13.0586 5.25955 13.452 4.39255 13.452 3.43521C13.452 1.54098 11.9124 -1.90735e-06 10.0197 -1.90735e-06C8.12714 -1.90735e-06 6.58738 1.54098 6.58738 3.43521C6.58738 4.39255 6.98075 5.25955 7.61414 5.88303C7.39731 5.99365 7.1869 6.11877 6.98502 6.25992C6.32752 6.71921 5.79178 7.31186 5.40787 7.9985L2.8447 7.06802C2.33612 6.88339 1.79688 7.26044 1.79688 7.80243V16.5178C1.79688 16.8465 2.00256 17.14 2.31155 17.2522L9.75312 19.9536C9.93073 20.018 10.1227 20.0128 10.2863 19.9536L17.7278 17.2522C18.0368 17.14 18.2425 16.8465 18.2425 16.5178V7.80243C18.2425 7.26135 17.704 6.88309 17.1947 7.06802ZM10.0197 1.5625C11.0507 1.5625 11.8895 2.40265 11.8895 3.43521C11.8895 4.46777 11.0507 5.30792 10.0197 5.30792C8.98866 5.30792 8.14988 4.46777 8.14988 3.43521C8.14988 2.40265 8.98866 1.5625 10.0197 1.5625ZM9.23844 18.1044L3.35938 15.9703V8.91724L9.23844 11.0513V18.1044ZM10.0197 9.67255L6.90644 8.54248C7.58164 7.51892 8.75184 6.87042 10.0197 6.87042C11.2875 6.87042 12.4577 7.51892 13.1329 8.54248L10.0197 9.67255ZM16.68 15.9703L10.8009 18.1044V11.0513L16.68 8.91724V15.9703Z" fill="currentColor" />
                                                            </svg>
                                                        </div>
                                                        <div class="font-size-sm">{{$item->total}} lessons</div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div> -->
                                        <form id="courseDetailForm" method="GET" action="https://www.edtia.org/paypal-buy/MTQw" class="price-modify">
                  <div class="d-flex align-items-center mb-2">
                     <input type="hidden" name="newamount" id="newamount">
                     <input type="hidden" name="courseId" id="courseId" value="140">
                     <input type="hidden" name="coursename" id="coursename" value="Measuring Social Media ROI">
                     <ins class="h2 mb-0">{{ Config::get('app.currency_icon') }}<span id="curramount">{{ $item->price }}</span></span></ins>
                     <del class="ms-3">{{ Config::get('app.currency_icon') }}{{ $item->cost }}</del>
                     <div class="badge badge-lg badge-purple text-white ms-auto fw-normal">{{ Config::get('app.currency_icon') }}{{ $item->price_diff }} Off</div>
                  </div>
                  </form>
                                        <!-- <div class="col-auto px-2 text-right">
                                            <div class="star-rating mb-2 mb-lg-0">
                                                <div class="rating" style="width:70%;"></div>
                                            </div>
                                        </div> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                    @else
                    <div class="d-lg-flex align-items-center mb-6 mb-xl-0">
                        <p class="mb-lg-0">Item not found</p>
                    </div>
                    @endif
                </div>
                <!-- PAGINATION ================================================== -->
                @if(count($course)>0)
                {{-- <div class="d-flex justify-content-center">
                    {!! $course->links() !!}
                </div> --}}
                @endif
            </div>
        </div>
    </div>
    <script>
        $('.search-itemby-course').change(function(){
            var course_id = $("input[name='courseradio']:checked").val();
            $.ajaxSetup({
            headers: {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
         });
          $.ajax({
          method:'post',
          url:"{{url('search-by-category')}}",
          // processData: false,
          // contentType: false,
          data:{course_id:course_id},
         success:function(response)
         {
            if(Object.keys(response.data).length>0){
            var APP_URL = {!! json_encode(url('/')) !!}
            $("#course_result").html("");
            $.each(response.data, function( index, value ){
                    var itemId = value.id;
                    var coursename = value.name.replace(/ /g,"-");
                    var detail = APP_URL+'/'+'course'+'/'+'details'+'/'+itemId+'/'+coursename;
                    if(value.rating!=null)
                    {
                        var bestseller = (value.mark_bestseller=='Yes')? '<div class="bestseller"> <p>Bestseller</p> </div>':'';
                        var re_com = (value.r_count>1000) ? parseFloat(value.r_count/1000).toFixed(1)+'k':value.r_count;
                        console.log(re_com);
                        var vidth = 100-((value.rating*10)*2);
                        // var review = '<div class="rating full-star-row"> <div class="empty-star"> <span class="far fa-star"></span>
                        // review += '    <span class="far fa-star"></span>';
                        // review += '    <span class="far fa-star"></span>';
                        // review += '    <span class="far fa-star"></span>';
                        // review += '    <span class="far fa-star"></span>';
                        // review += '    </div>';
                        // review += '    <div class="overlay-star" style="width:'+vidth+'%;" ></div>';
                        // review += '    <div class="fill-star">';
                        // review += '    <span class="fas fa-star"></span>';
                        // review += '    <span class="fas fa-star"></span>';
                        // review += '    <span class="fas fa-star"></span>';
                        // review += '    <span class="fas fa-star"></span>';
                        // review += '    <span class="fas fa-star"></span>';
                        // review += '    </div>';
                        // review += '    ';
                        // review += '</div>';
                        // review += '<div class="font-size-sm ms-lg-3">';
                        // review += '    <span>'+parseFloat(value.rating).toFixed(2).round(1)+' ('+re_com+')</span>';
                        // review += '</div>';

                        var review = '<div class="mb-4 mb-md-0">';
                        review += '              <div class="d-lg-flex align-items-center">';
                        review += '                                                            <div class="rating full-star-row">';
                        review += '                        <div class="empty-star">';
                        review += '                        <span class="far fa-star"></span>';
                        review += '                        <span class="far fa-star"></span>';
                        review += '                        <span class="far fa-star"></span>';
                        review += '                        <span class="far fa-star"></span>';
                        review += '                        <span class="far fa-star"></span>';
                        review += '                        </div>';
                        review += '                        <div class="overlay-star" style="width:'+vidth+'%;"></div>';
                        review += '                        <div class="fill-star">';
                        review += '                        <span class="fas fa-star"></span>';
                        review += '                        <span class="fas fa-star"></span>';
                        review += '                        <span class="fas fa-star"></span>';
                        review += '                        <span class="fas fa-star"></span>';
                        review += '                        <span class="fas fa-star"></span>';
                        review += '                        </div>';
                        review += '                        ';
                        review += '                    </div>';
                        review += '                    <div class="font-size-xs ms-lg-3">';
                        review += '                        <span>'+parseFloat(value.rating).toFixed(1)+' ('+re_com+')</span>';
                        review += '                    </div>';
                        review += '                                                      </div>';
                        review += '           </div>';
                    }
                    else{
                        review = '';
                    }
                    

                    $("#course_result").append('<div class="col-md pb-4 pb-md-7" id="course_detail">'+bestseller+'<div class="card border shadow p-2 lift sk-fade"><div class="card-zoom position-relative"><a href="'+detail+'" class="card-img sk-thumbnail img-ratio-3 d-block"><img class="rounded shadow-light-lg" src="'+APP_URL+''+'/uploads/course/'+''+value.image+'" alt="item image" loading="lazy"></a></div><div class="card-footer px-2 pb-2 mb-1 pt-4 position-relative">'+review+'<a href="#"><span class="mb-1 d-inline-block text-gray-800">'+value.category_name+'</span></a><div class="position-relative"><a href="'+detail+'" class="d-block stretched-link"><h5 class="line-clamp-2 h-md-48 h-lg-58 me-md-8 me-lg-10 me-xl-4 mb-2">'+value.name+'</h5></a><div class="row mx-n2 align-items-end"><form id="courseDetailForm" method="GET" action="https://www.edtia.org/paypal-buy/MTQw" class="price-modify"><div class="d-flex align-items-center mb-2"><input type="hidden" name="newamount" id="newamount"><input type="hidden" name="courseId" id="courseId" value="140"><input type="hidden" name="coursename" id="coursename" value="Measuring Social Media ROI"><ins class="h2 mb-0">$<span id="curramount">'+value.price+'</span></ins><del class="ms-3">$'+value.cost+'</del><div class="badge badge-lg badge-purple text-white ms-auto fw-normal">$'+value.price_diff+' Off</div></div></form></div></div></div></div></div></div>')
                });
            }else{
                var APP_URL = {!! json_encode(url('/')) !!}
                var nodata = APP_URL+'/img/avatars/nodatafound.png';
                $("#course_result").html("");
                $("#course_result").append('<div class="text-center data-image"><img src="'+nodata+'" alt="no data found image" class="img-responsive center-block no-data-img" loading="lazy"></div>');

         }
        }
    });
});
    </script>

<style>
    .sticky-div {
            /* background-color: green; */
            position: sticky !important;
            top: 0px;
            /* padding: 10px 0px; */
        }
         
        .start {
            height: 100px;
        }
         
        .end {
            
        }
</style>
@stop