@extends('Layouts.index')
@section('content')
<!-- artikel -->
<section class="bg-light mt-15">
    <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">Wajib</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="position-relative" >

            </div>
            <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"> Kelas <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 class="row">
                            <div class="col-lg-2 px-2 py-0 ms-20">
                                <div class="form-group mb-0">
                                    <select class="form-select form-select-md fs-13 ms-20 p-2 text-dark" aria-label="Default select example" style="width: 155px; height: 40px;">
                                        <option selected>Filter By</option>
                                        <option value="1">Eksternal</option>
                                        <option value="1">Internal</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <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('{{ base64_encode($course->id) }}')">
                            @else
                                <a href="{{ url('/DetailCourse') }}/{{ base64_encode($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" >Course Ratings</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">Register</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 -->
            </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('{{ base64_encode($course->id) }}')">
                            @else
                                <a href="{{ url('/DetailCourse') }}/{{ base64_encode($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" >Course Ratings</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">Register</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 -->
                <div class="col-lg-12 ">
                    <a href="#" class="btn btn-primary fw-normal px-3 fs-13 float-end">Lihat Kelas</a>
                </div>
            </div>
            <!-- /.swiper-container -->
        </div>
    </div>
    <!--/.row -->
</section>



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

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

@endsection