@extends('Layouts.index')
@section('content')
<!-- artikel -->
<section class="bg-light">
    <div class="row">
        <div class="col-md-12 bg-pattern3">
            <div class="d-flex align-items-center justify-content-center">
                <span><i class="fa-solid fa-newspaper fs-16 pt-6 p-0 mb-0 me-3 text-center text-dark"></i></span><h2 class="fs-26 fw-semibold pt-5 p-0 mb-0 text-dark"> Pelatihan <span class="text-warning">Online</span></h2>
            </div>
            <p class="fs-16 text-center">Perluas Wawasanmu dengan Kelas Online</p>
        </div>
        
        <div class="col-md-11 mx-auto">
        
            <div class="swiper-container pt-0 px-7" data-margin="40" data-nav="false" data-dots="false" data-items-xl="4" data-loop="true" data-items-md="2" data-items-xs="1" data-autoplaytime="3000">
                <div class="col-md-12">
                    <div class="d-flex align-items-center">
                        <span><i class="fa-solid fa-circle-dot fs-16 pt-6 p-0 mb-0 me-3"></i></span><h2 class="fs-26 fw-semibold pt-5 p-0 mb-0 text-dark"> Pelatihan <span class="text-warning">Online</span></h2>
                    </div>
                    <div class="d-flex">
                        <p class="fs-16 mb-2 me-20">Tentukan Kelasmu, dan Pelajari sekarang juga!</p>
                        
                    </div>
                </div>
                <div class="swiper-container" data-margin="10" data-nav="false" data-dots="false" data-items-xl="8" data-items-md="2" data-items-xs="1" data-autoplaytime="3000">
                    <div class="swiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide w-auto">
                                <div class="side-taby rounded-pill px-3 border border-secondary activetab" onclick="openTab(event, 'tab1')"> 
                                    <p class="fs-13 mb-0 txt-wht">Semua</p> 
                                </div>
                            </div>
                            <div class="swiper-slide w-auto">
                                <div class="side-taby rounded-pill px-3 border border-secondary" onclick="openTab(event, 'tab2')"> 
                                    <p class="fs-13 mb-0 txt-wht">Cleaning Service</p> 
                                </div>
                            </div>
                            <div class="swiper-slide w-auto">
                                <div class="side-taby rounded-pill px-3 border border-secondary" onclick="openTab(event, 'tab3')"> 
                                    <p class="fs-13 mb-0 txt-wht">Berjualan</p>
                                </div>
                            </div>
                            <div class="swiper-slide w-auto">
                                <div class="side-taby rounded-pill px-3 border border-secondary" onclick="openTab(event, 'tab4')"> 
                                    <p class="fs-13 mb-0 txt-wht">Telecollector</p> 
                                </div>
                            </div>
                            <div class="swiper-slide w-auto">
                                <div class="side-taby rounded-pill px-3 border border-secondary" onclick="openTab(event, 'tab2')"> 
                                    <p class="fs-13 mb-0 txt-wht">Customer Service</p> 
                                </div>
                            </div>
                            <div class="swiper-slide w-auto">
                                <div class="side-taby rounded-pill px-3 border border-secondary" onclick="openTab(event, 'tab3')"> 
                                    <p class="fs-13 mb-0 txt-wht">Recruiting</p>
                                </div>
                            </div>
                            <div class="swiper-slide w-auto">
                                <div class="side-taby rounded-pill px-3 border border-secondary" onclick="openTab(event, 'tab4')"> 
                                    <p class="fs-13 mb-0 txt-wht">Writing</p> 
                                </div>
                            </div>
                            <div class="swiper-slide w-auto">
                                <div class="side-taby rounded-pill px-3 border border-secondary" onclick="openTab(event, 'tab2')"> 
                                    <p class="fs-13 mb-0 txt-wht">Programmer</p> 
                                </div>
                            </div>
                            <div class="swiper-slide w-auto">
                                <div class="side-taby rounded-pill px-3 border border-secondary" onclick="openTab(event, 'tab3')"> 
                                    <p class="fs-13 mb-0 txt-wht">Marketing</p>
                                </div>
                            </div>
                            <div class="swiper-slide w-auto">
                                <div class="side-taby rounded-pill px-3 border border-secondary" onclick="openTab(event, 'tab4')"> 
                                    <p class="fs-13 mb-0 txt-wht">Analisis</p> 
                                </div>
                            </div>
                            <div class="swiper-slide w-auto">
                                <div class="side-taby rounded-pill px-3 border border-secondary" onclick="openTab(event, 'tab4')"> 
                                    <p class="fs-13 mb-0 txt-wht">Inbound</p> 
                                </div>
                            </div>
                            <div class="swiper-slide w-auto">
                                <div class="side-taby rounded-pill px-3 border border-secondary" onclick="openTab(event, 'tab2')"> 
                                    <p class="fs-13 mb-0 txt-wht">Soft Skill</p> 
                                </div>
                            </div>
                            <div class="swiper-slide w-auto">
                                <div class="side-taby rounded-pill px-3 border border-secondary" onclick="openTab(event, 'tab3')"> 
                                    <p class="fs-13 mb-0 txt-wht">Hard Skill</p>
                                </div>
                            </div>
                            <div class="swiper-slide w-auto">
                                <div class="side-taby rounded-pill px-3 border border-secondary" onclick="openTab(event, 'tab4')"> 
                                    <p class="fs-13 mb-0 txt-wht">Terbaru</p> 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="side-taby-content activetab px-0" id="tab1">
					<div class="swiper-container pt-0 nav-color nav-bottom" data-margin="40" data-nav="true" data-dots="false" data-items-xl="4" data-loop="true" data-items-md="2" data-items-xs="1" data-autoplaytime="3000">
                        <div class="swiper">
                            <div class="swiper-wrapper py-2">
                                <form id="gtm-form" method="post" action="{{ $intmoodle->url }}auth/login/integrasiPost.php">
                                    <input type="hidden" value="@if(Session::has('user')){{ Session::get('user')[0]['username']}}@endif" name="username">
                                    <input type="hidden" value="@if(Session::has('user')){{ Session::get('user')[0]['password']}}@endif" name="password">
                                    <input type="hidden" id="course_id" name="course_id">
                                    <input type="hidden" value="" id="callback" name="callback">
                                </form>
                                @foreach($courses as $course)
                                    @if(session()->has('user'))
                                        <a onclick="gtmDetailCourse('{{ $course->id }}')">
                                    @else
                                        <a href="{{ url('/DetailCourse') }}/{{ $course->id }}">								
                                    @endif
                                        <div class="swiper-slide">
                                            <div class="card lift shadow-lg">
                                                <figure class="card-img-top hover-scale">								
                                                        <img src="{{ asset('needed/img/course/crs1.jpg') }}" height="160" width="260" alt=""/>						
                                                        <a class="item-like" href="#" data-bs-toggle="white-tooltip" title="Informasi Seputar Course"><i class="fa-solid fa-ellipsis-vertical"></i></a>				
                                                </figure>									
                                                <div class="card-body px-3 pt-2 pb-0">
                                                    <div class="post-header">
                                                        <div class="d-flex flex-row align-items-center mb-1">
                                                            <div class="text-ash mb-0 fs-12" >Rating Pelatihan</div>
                                                            <span class="ms-4 fs-11 text-warning"></span>
                                                        </div>
                                                        <h2 class="post-title h3 fs-16 mt-2 mb-1 text-limit" title="{{ $course->fullname }}" style="width: 220.25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; ">
                                                        <a href="./shop-product.html" class="link-dark">{{ $course->fullname }}</a></h2>
                                                        <p class="price fs-13"> <span class="me-2"><i class="fa-solid fa-tag"></i></span> <del><span class="amount">Rp.0.000</span></del> <ins><span class="amount text-dark">(Gratis)</span></ins></p>
                                                    </div>						
                                                    <!-- /.post-header -->
                                                </div>
                                                <!--/.card-body -->
                                                <div class="card-footer p-0 py-2 d-flex justify-content-center">
                                                    <li class="nav-item d-none d-md-block me-4">
                                                        <a href="{{ route('course.daftar.mandiri', base64_encode($course->id))}}" class="btn btn-sm btn-warning rounded p-3 py-1 fs-13">Daftar</a>
                                                    </li>
                                                    <li class="nav-item d-none d-md-block">
                                                        <a href="./contact.html" class="btn btn-sm btn-primary rounded p-3 py-1 fs-13">Bagikan</a>
                                                    </li>
                                                </div>
                                            </div>
                                            <!--/.card -->
                                        </div>
                                    </a>
                                @endforeach
                                <!--/.swiper-slide -->
                            </div>
                            <!--/.swiper-wrapper -->
                        </div>
                    </div>
                </div>
                <!-- /.swiper -->
            </div>
            <!-- /.swiper-container -->
            <div class="swiper-container mb-9 mb-md-8 pt-0 px-7" data-margin="40" data-nav="false" data-dots="false" data-items-xl="4" data-loop="true" data-items-md="2" data-items-xs="1" data-autoplaytime="3000">
                <div class="swiper">
                    <div class="swiper-wrapper py-2">
                        <form id="gtm-form" method="post" action="{{ $intmoodle->url }}auth/login/integrasiPost.php">
                            <input type="hidden" value="@if(Session::has('user')){{ Session::get('user')[0]['username']}}@endif" name="username">
                            <input type="hidden" value="@if(Session::has('user')){{ Session::get('user')[0]['password']}}@endif" name="password">
                            <input type="hidden" id="course_id" name="course_id">
                            <input type="hidden" value="" id="callback" name="callback">
                        </form>
                        @foreach($courses as $course)
                            @if(session()->has('user'))
                                <a onclick="gtmDetailCourse('{{ $course->id }}')">
                            @else
                                <a href="{{ url('/DetailCourse') }}/{{ $course->id }}">								
                            @endif
                                <div class="swiper-slide">
                                    <div class="card lift shadow-lg">
                                        <figure class="card-img-top hover-scale">							
                                                <img src="{{ asset('needed/img/course/crs1.jpg') }}" height="160" width="260" alt=""/>						
                                                <a class="item-like" href="#" data-bs-toggle="white-tooltip" title="Informasi Seputar Course"><i class="fa-solid fa-ellipsis-vertical"></i></a>				
                                        </figure>									
                                        <div class="card-body px-3 pt-2 pb-0">
                                            <div class="post-header">
                                                <div class="d-flex flex-row align-items-center mb-1">
                                                    <div class="text-ash mb-0 fs-12" >Rating Pelatihan</div> &nbsp;
                                                    <span class="ms-4 fs-11 text-warning"></span>
                                                </div>
                                                <h2 class="post-title h3 fs-16 mt-2 mb-1 text-limit" style="width: 220.25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; ">
                                                <a href="./shop-product.html" class="link-dark">{{ $course->fullname }}</a></h2>
                                                <p class="price fs-13"> <span class="me-2"><i class="fa-solid fa-tag"></i></span> <del><span class="amount">Rp.0.000</span></del> <ins><span class="amount text-dark">(Gratis)</span></ins></p>
                                            </div>						
                                            <!-- /.post-header -->
                                        </div>
                                        <!--/.card-body -->
                                        <div class="card-footer p-0 py-2 d-flex justify-content-center">
                                            <li class="nav-item d-none d-md-block me-4">
                                                <a href="{{ route('course.daftar.mandiri', base64_encode($course->id))}}" class="btn btn-sm btn-warning rounded p-3 py-1 fs-13">Daftar</a>
                                            </li>
                                            <li class="nav-item d-none d-md-block">
                                                <a href="./contact.html" class="btn btn-sm btn-primary rounded p-3 py-1 fs-13">Bagikan</a>
                                            </li>
                                        </div>
                                    </div>
                                    <!--/.card -->
                                </div>
                            </a>
                        @endforeach
                        <!--/.swiper-slide -->
                    </div>
                    <!--/.swiper-wrapper -->
                </div>
                <!-- /.swiper -->
                <nav class="d-flex d-flex justify-content-center" aria-label="pagination">
                    <ul class="pagination">
                      <li class="page-item disabled">
                        <a class="page-link" href="#" aria-label="Previous">
                          <span aria-hidden="true"><i class="uil uil-arrow-left"></i></span>
                        </a>
                      </li>
                      <li class="page-item active"><a class="page-link" href="#">1</a></li>
                      <li class="page-item"><a class="page-link" href="#">2</a></li>
                      <li class="page-item"><a class="page-link" href="#">3</a></li>
                      <li class="page-item">
                        <a class="page-link" href="#" aria-label="Next">
                          <span aria-hidden="true"><i class="uil uil-arrow-right"></i></span>
                        </a>
                      </li>
                    </ul>
                    <!-- /.pagination -->
                  </nav>
                  <!-- /nav -->
            </div>
            <!-- /.swiper-container -->
        </div>
        
    </div>
    <!--/.row -->
</section>



<script>
    function gtmDetailCourse(id){
        $('#course_id').val(id);
        $('#callback').val('{{ $intmoodle->url }}course/view.php?id=' + id);

        $('#gtm-form').submit();
    }
</script>

@endsection