@extends('Layouts.index')
@section('content')

    {{-- <div class="content-wrapper"> --}}


    <section class="wrapper bg-transparent pt-lg-5 mb-8 mx-lg-13 rounded mx-2">
        <div class="swiper-container swiper-hero dots-over" data-margin="0" data-autoplay="false" data-autoplaytime="7000" data-nav="true" data-dots="true" data-items="1">
            <div class="swiper rounded">
                <div class="swiper-wrapper">
                    @if (!empty($sliderimage))
					@foreach ($sliderimage as $item)

                    <div class="swiper-slide bg-dark bg-image w-100" data-image-src="{{ $intcms->url }}upload/slider/{{ $item['File'] }}">
                        <div class="container h-100">
                            <div class="row h-100">
                                <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-0 col-xl-7 col-xxl-5 text-start justify-content-center align-self-center align-items-start ms-lg-8">
                                    <!-- <h2 class="display-1 fs-xs-30 fs-md-56 fs-xl-56 mb-0 mb-md-4 col-md-10 col-lg-12 col-xl-11 text-white animate__animated animate__slideInDown animate__delay-1s">{!! $item['Title'] !!}</h2> -->
                                    <p class="lead fs-18 fs-sm-18 lh-sm mb-4 mb-md-7 col-10 text-white animate__animated animate__slideInRight animate__delay-2s">{!! $item['Description'] !!}</span></p>
                                    <!-- <div class="animate__animated animate__slideInUp animate__delay-3s"><a href="#" class="btn btn-lg btn-outline-white rounded-pill">Read More</a></div> -->
                                </div>
                                <!--/column -->
                            </div>
                            <!--/.row -->
                        </div>
                        <!--/.container -->
                    </div>
                    @endforeach
					@endif
                
                </div>
                <!--/.swiper-wrapper -->
            </div>
            <!-- /.swiper -->
        </div>
        <!-- /.swiper-container -->
    </section>
    <!-- Slider -->

    <!-- daftar-course -->
    <section class="bg-light">
        <div class="row">
            <div class="col-md-11 mx-auto px-10">
                <div class="col-md-12">
                    <div class="d-flex align-items-center">
                        <h2 class="fs-26 fw-semibold pt-5 p-0 mb-0 text-dark"> Pelatihan <span
                                class="text-primary">Online</span></h2>
                    </div>
                    <div class="d-flex">
                        <p class="fs-16 mb-2">Tentukan Pelatihannmu, dan Pelajari sekarang juga!</p>
                    </div>
                </div>
                <div class="swiper-container nav-color nav-bottom" data-margin="10" data-nav="true" 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" style="display:none">
                                <div class="side-taby rounded-pill px-3 border border-secondary"
                                    onclick="setPelatihanOnline(event, null)">
                                    <p class="fs-13 mb-0 txt-wht">Semua</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="side-taby-content activetab px-0" id="tab1">
                    <div class="swiper-container pt-0 nav-color" id="swiper-container1" data-margin="40" data-nav="true" data-dots="false"
                    data-items-xl="4" data-items-lg="3" data-loop="true" data-items-md="2" data-items-xs="1"
                    data-autoplaytime="3000">
                        <div class="swiper" id="swiper1">
                            <div class="swiper-wrapper py-2">
                               
                            </div>
                        </div>
                        
                    </div>
                    <!-- /.swiper container -->
                </div>
               

                <div class="col-lg-12 ">
                    <div class="float-end">
                        <a href="{{ 'Course/list-course' }}" class="btn btn-expand btn-soft-primary rounded-pill">
                            <i class="uil uil-arrow-right"></i>
                            <span>Lihat Pelatihan</span>
                        </a>
                        {{-- <a href="{{('Course/list-course')}}" class="btn btn-sm btn-warning fw-semibold rounded p-3 py-1 fs-13">Lihat Pelatihan <span class="ms-4"><i class="fa-solid fa-caret-right"></i></span></a> --}}
                    </div>
                </div>

            </div>
        </div>
        <!--/.row -->
    </section>

    <!-- event -->
    {{--  <section class="image-wrapper bg-pattern2 mb-8 pt-7 pb-8">
        <div class="container">
            <div class="row justify-content-center gx-lg-10 px-4">
                <div class="col-md-12">
                    <div class="d-flex align-items-center">
                        <h2 class="fs-26 fw-semibold pt-5 p-0 mb-0 text-dark"> Agenda <span class="text-primary">Kegiatan</span></h2>
                    </div>
                    <p class="fs-16 mb-2">Catat dan ikuti agenda Kegiatannya!</p>
                </div>
                <div class="swiper-container mb-10 nav-color" data-margin="30" data-nav="true" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
                    <div class="swiper">
                        <div class="swiper-wrapper">
                        @if (!empty($bigevent))
                        @foreach ($bigevent as $item)
                        <div class="swiper-slide">
                            <div class="card">
                                <img class="card-img-top"
                                    src="{{ $intcms->url }}upload/event/{{ $item['Media'] }}" loading="eager"
                                    alt="JAGOTI" style="max-height: 199.08px;" />
                                <div class="card-body pt-1 pb-3">
                                    <div class="post-header">
                                        <h2 class="post-title h3 fs-16 mt-3 mb-0 agenda-limiter" title="{{ $item['Title'] }}">{{ $item['Title'] }}</h2>
                                        <p class="fs-13 mb-3 text-ash">{{ $item['Alamat'] }}</p>
                                        <div class="align-items-center mb-3">
                                            <div class="text-ash mb-0 fs-13"> 
                                                <span><i
                                                        class="fa-regular fa-calendar-days me-2"></i>
                                                </span>{{ date('d M Y h:i', strtotime($item['TanggalAwal'])) }}
                                                <span>- </span>{{ date('h:i', strtotime($item['TanggalAkhir'])) }}</div>
                                            <div class="text-ash mb-0 fs-13"> <span><i
                                                        class="uil uil-user-circle me-2"></i></span>Penyelenggara :
                                                {{ $item['Penyelenggara'] }}</div>
                                            <div class="text-ash mb-0 fs-13"> <span><i
                                                        class="uil uil-phone me-2"></i></span>Kontak :
                                                {{ $item['PIC'] }}</div>
                                        </div>
                                        <div class="p-0 py-2 d-flex">
                                            <div class="nav-item list-unstyled">
                                                <a href="{{ url('Event/detail-event') . '/' . $item['Id'] }}"
                                                    class="btn btn-sm btn-primary rounded p-3 py-1 fs-13">Selengkapnya</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--/.card-body -->
                            </div>
                            <!--/.card -->
                        </div>
                        <!--/.swiper-slide -->
                        @endforeach
                        @endif
                        </div>
                        <!--/.swiper-wrapper -->
                    </div>
                    <!-- /.swiper -->
                </div>
                <!-- /.swiper-container -->
                <div class="col-lg-12">
                    <div class="float-end">
                        <a href="{{ url('Event/list-event') }}" class="btn btn-expand btn-soft-primary rounded-pill">
                            <i class="uil uil-arrow-right"></i>
                            <span>Lihat Kegiatan</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section> --}}

    <!-- daftar-mitra -->
    {{-- <section class="image-wrapper bg-full bg-image" data-image-src="{{ asset('needed/img/photos/bg40.jpg') }}">
        <div class="wrapper">
            <div class="swiper-container px-lg-14 px-sm-4" data-margin="40" data-nav="false" data-dots="false"
                data-items-xl="5" data-items-md="2" data-items-xs="1">
                <div class="row">
                    <div class="col-lg-8">
                        <div class="d-flex align-items-center">
                            <h2 class="fs-lg-26 fs-sm-20 fw-semibold pt-5 p-0 mb-0 text-dark"> Daftar Mitra <span
                                    class="text-primary">Perusahaan</span></h2>
                        </div>
                        <p class="fs-lg-16 fs-sm-12 mb-2 text-dark">Berikut di bawah ini daftar-daftar Perusahaan tempat
                            lulusan Jagoti Bekerja.</p>
                    </div>
                </div>
                <div class="swiper">
                    <div class="swiper-wrapper">
                        @if (!empty($mitra))
                            @foreach ($mitra as $item)
                                <div class="swiper-slide">
                                    <div class="card hover-scale">
                                        <div class="card-body p-1 mx-auto">
                                            <img class="rounded-2"
                                                src="{{ $intcms->url }}upload/externalLogo/{!! $item['ImageMenu'] !!}"
                                                loading="eager" alt="JAGOTI" width="150" height="100" /></a>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                        <!--/.swiper-slide -->
                    </div>
                    <!--/.swiper-wrapper -->
                </div>
                <!-- /.swiper -->
            </div>
            <!-- /.swiper-container -->
        </div>
    </section> --}}

    <!-- section-iklan -->
    {{-- <section class="bg-pattern3">
			<div class="container pt-8 pb-8">
				@if (!empty($iklan)) 
				@foreach ($iklan as $item) 
				<a href="#" data-bs-toggle="modal" data-bs-target="#iklan{{$item['content_id']}}">
				<div class="card image-wrapper my-0 bg-cover bg-lefter bg-overlay bg-overlay-300 bg-image shadow-lg" data-image-src="{{ $intcms->url }}upload/{!! $item['lampiran'] !!}" loading="eager" alt="JAGOTI" style="background-image: url('{{ $intcms->url }}upload/{!! $item['lampiran'] !!}');">
					<div class="card-body p-9 py-xl-6 px-xl-15">
						<div class="row align-items-center counter-wrapper gy-8 text-center text-white">
							<div class="col-6 col-lg-3 float-end">
								<h3 class="counter counter-lg text-white" style="visibility: visible;">Iklan Disini!</h3>
							</div>
						</div>
					</div>
				</div>
				</a>
				@endforeach
				@endif

				@if (!empty($iklan))
				@foreach ($iklan as $item)
				<div class="modal fade" id="iklan{{$item['content_id']}}" tabindex="-1">
					<div class="modal-dialog modal-dialog-centered modal-lg">
					  <div class="modal-content text-center">
						<div class="modal-body">
						  <button class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
						  <div class="row">
							<div class="col-md-12">
							  <figure class="mb-0"><img class="w-100" src="{{ $intcms->url }}upload/{!! $item['lampiran'] !!}" loading="eager" alt="JAGOTI" srcset="{{ $intcms->url }}upload/{!! $item['lampiran'] !!} 2x" alt="" /></figure>
							</div>
						  </div>
						</div>
					  </div>
					</div>
				</div>
				@endforeach
				@endif
			</div>
		</section> --}}

    <!-- artikel -->
    <section class="wrapper  bg-pattern1 pt-8">
        <div class="row">
            <div class="col-md-11 mx-auto px-4">
                <div class="mb-17 mb-md-10 pt-0">
                    <div class="col-md-12">
                        <div class="d-flex align-items-center justify-content-center">
                            <h2 class="fs-26 fw-semibold pt-5 p-0 mb-0 text-dark"> Artikel <span class="text-primary">JAGOTI</span></h2>
                        </div>
                        <p class="fs-16 text-center">Baca Artikel jagoti untuk memperluas wawasan kamu!</p>
                    </div>
                    <div class="container">
                        <div class="swiper-container mb-10 nav-color" data-margin="30" data-nav="true" data-dots="true" data-items-xl="2" data-items-md="2" data-items-xs="1">
                            <div class="swiper">
                                <div class="swiper-wrapper">
                                    @if (!empty($artikel))
                                    @foreach ($artikel as $item)
                                    <div class="swiper-slide">
                                        <div class="card lift rounded-start d-flex shadow-lg">
                                            <div class="row gx-lg-0">
                                                <div class="col-lg-6 col-md-12 col-sm-4">
                                                    <figure class="hover-scale d-flex"
                                                        style="min-width:200px; min-height: 210px;">
                                                        <img class="rounded-start w-100"
                                                            src="{{ $intcms->url }}upload/{!! $item['lampiran'] !!}"
                                                            loading="eager" alt="JAGOTI" alt="" />
                                                    </figure>
                                                </div>
                                                <div class="col-lg-6 col-sm-8">
                                                    <div class="card-body py-0 px-2">
                                                        <div class="post-header p-3">
                                                            <div class="d-flex flex-row align-items-center mb-2">
                                                                <div class="text-ash mb-0 fs-13"> 
                                                                    <span>
                                                                        <i class="fa-regular fa-calendar-days me-2"></i>
                                                                    </span>
                                                                    {{ date('d M Y', strtotime($item['tgl_publish'])) }}
                                                                </div>
                                                            </div>
                                                            <h2 class="post-title h3 fs-16 mt-0 mb-0"
                                                                style="-webkit-line-clamp: 2; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box;">
                                                                <a href="{{ url('Media/detail-artikel') . '/' . $item['slug_title'] }}"
                                                                    class="link-dark">{{ $item['title'] }}</a></h2>
                                                            <p class="fs-12 mb-0 text-clamp">{!! substr(strip_tags($item['content']), 0, 150) . ' ...' !!}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                    @endif
                                    <!--/.swiper-slide -->
                                </div>
                                <!--/.swiper-wrapper -->
                            </div>
                            <!-- /.swiper -->
                        </div>
                            <!-- /.swiper-container -->
                            <!-- <div class="col-lg-6"></div>-->
                        <div class="row justify-content-center ">
                            <div class="col-lg-12">
                                <div class="float-end">
                                    <a href="{{ url('Media/list-artikel/1') }}"
                                        class="btn btn-expand btn-soft-primary rounded-pill">
                                        <i class="uil uil-arrow-right"></i>
                                        <span>Lihat Artikel</span>
                                    </a>
                                    {{-- <a href="{{url('Media/list-artikel/1')}}" class="btn btn-sm btn-warning fw-semibold rounded p-3 py-1 fs-13">Lihat Semua<span class="ms-4"><i class="fa-solid fa-caret-right"></i></span></a> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--/.row -->
    </section>

    <!-- SIMGROUP-lainnya -->
    {{-- <section class="wrapper bg-white">
        <div class="container pt-5 pt-lg-5 pb-5 pb-md-5">
            <div class="row px-3 text-center">
                <div class="col-md-12">
                    <div class="d-flex align-items-center justify-content-center">
                        <h2 class="fs-26 fw-semibold pt-5 p-0 text-dark"> Klien <span class="text-primary">JAGOTI</span></h2>
                    </div>
                </div>
            </div>
            <!-- /.row -->
            <div class="row justify-content-center  gx-lg-8 gx-xl-12 px-xxl-5 text-center d-flex align-items-end">
                <div class="swiper-container" data-margin="30" data-nav="true" data-dots="true" data-items-xl="5" data-items-md="4" data-items-xs="1">
                    <div class="swiper">
                        <div class="swiper-wrapper">
                        @if (!empty($group))
                        @foreach ($group as $item)
                            <div class="swiper-slide">
                                <figure class="mb-0 d-flex align-items-center">
                                    <img class="p-2" src="{{ $intcms->url }}upload/externalLogo/{!! $item['ImageMenu'] !!}" loading="eager" alt="JAGOTI" srcset="{{ $intcms->url }}upload/externalLogo/{!! $item['ImageMenu'] !!}" width="200" style="height: auto !important;"/>
                                </figure>
                            </div>
                        @endforeach
                        @endif
                        </div>
                        <!--/.swiper-wrapper -->
                    </div>
                    <!-- /.swiper -->
                </div>
                <!-- /.swiper-container -->
            </div>
            <!--/.row -->
            <div class="row justify-content-center ">
                <div class="col-lg-12">
                    <div class="float-end">
                        <a href="{{url('Tentang/klien')}}"
                            class="btn btn-expand btn-soft-primary rounded-pill">
                            <i class="uil uil-arrow-right"></i>
                            <span>Lihat Klien</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.container -->
    </section> --}}
    <!-- /section -->

    {{-- </div> --}}
    <div class="progress-wrap">
        <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
            <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
        </svg>
    </div>
    {{--
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    --}}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.css" 
      media="print" 
      onload="this.onload=null;this.media='all';">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11" defer></script>


@endsection
@section('script')
<script>
    $(document).ready(function(){
        setPelatihanOnline();
    });
    function gtmDetailCourse(id) {

        $.ajax({
                url: "{{ url('/cekUrutanCourse') }}",
                type: 'post',
                data: {idcourse: id,iduser: "{{ session()->get('user') ? session()->get('user')[0]['id_lms'] : null }}",_token:"{{ csrf_token() }}"},
                dataType: 'json',
                success: function(res){

                    if(res.status){
                        $('#course_id').val(id);
                        $('#callback').val('{{ url("/CoursePeserta") }}/' + id);

                        $('#gtm-form').submit();

                    }else{
                        Swal.fire({
                          icon: 'info',
                          text: res.msg,
                      })
                    }

                }
            });

        
    }

    function alertNIK() {
        Swal.fire({
            icon: 'warning',
            // title: 'Oops...',
            text: 'Harap lengkapi NIK terlebih dahulu'
        })
    }

    function setPelatihanOnline(ev = null, category = null) {
        var i, tabLinks;

        if (ev) {
            tabLinks = document.getElementsByClassName("side-taby");
            for (i = 0; i < tabLinks.length; i++) {
                tabLinks[i].classList.remove("activetab");
            }
            ev.currentTarget.classList.add("activetab");
        } else {
            tabLinks = document.getElementsByClassName("side-taby");
            tabLinks[0].classList.add("activetab");
        }

        const formTemplate = `<form id="gtm-form" method="post"
                                    action="{{ $intmoodle->url }}customcode/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>`;

        var swiperTemplate = `
        <div class="swiper-slide">
            <div class="card lift shadow-lg mb-0">
                <figure class="card-img-top hover-scale">
                    <a [link]>
                        <img src="[imageSrc]" height="160" width="260" alt="">
                    </a>
                    <a class="item-like" [link] data-bs-toggle="white-tooltip" aria-label="Informasi Seputar Course" data-bs-original-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="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">Pelatihan Ratings</div>
                                <span class="ms-4 fs-11 text-warning">[course_rating]</span>
                            </div>
                            <h2 class="post-title h3 fs-16 mt-2 text-limit" title="Jago Jualan" style="width: 220.25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom : -3px;">[fullname]</h2>
                            <span class="badge rounded-pill bg-primary fs-11 mb-1 me-3">[category]</span>
                            <p class="price fs-13"> <span class="me-2"><i class="fa-solid fa-tag"></i></span> <span class="amount">[price] </span> <ins><span class="amount text-dark">[price_tag]</span></ins></p>
                        </div>
                        <!-- /.post-header -->
                    </div>
                </div>
                <div class="card-footer p-0 py-2 d-flex justify-content-center">
                    <div class="nav-item me-4">
                        <a [link] class="btn btn-sm rounded [button_condition] p-3 py-1 fs-13">[link_text]</a>
                    </div>
                    <div class="nav-item">
                        <a href="#" class="btn btn-sm btn-primary rounded p-3 py-1 fs-13">Bagikan</a>
                    </div>
                </div>
            </div>
        </div>
        `;
        var swiperConfig = {
            slidesPerView: 4,
            spaceBetween: 40,
            loop: false,
            navigation: {
                nextEl: '#swiper-container1 .swiper-button-next',
                prevEl: '#swiper-container1 .swiper-button-prev',
            },
            breakpoints: {
                1200: { slidesPerView: 4 },
                992: { slidesPerView: 3 },
                768: { slidesPerView: 2 },
                576: { slidesPerView: 1 },
                0: { slidesPerView: 1 }
            }
        };
        var swiper = new Swiper('#swiper1', swiperConfig);
        swiper.removeAllSlides();

        const loaderHTML = `
            <div class="preloader text-center align-items-center" id="loading" style="background-color: rgb(255, 255, 255); width: 50px; height: 100%; z-index: 9999; place-items: center; margin-top: 2rem">
                <img src="{{ asset('needed/img/loading/loader-2.gif') }}">
                Loading...
            </div>
        `;
        $('#swiper1').prepend(loaderHTML);

        $.ajax({
            url: '{{ url("/indexGetPelatihanOnline") }}',
            type: 'GET',
            data: { category: category },
            success: (response) => {
                $('#loading').remove();

                swiper.update();
                $('#swiper1 .swiper-wrapper').append(formTemplate);

                for (let i = 0; i < response.length; i++) {
                    const item = response[i];

                    var imageUrl = item.image_url + '?token=fa0c6c8d52502adf7d9557a6bab115c2';
                    var priceTag = item.price_tag ?? '';
                    var price = item.price ?? '';
                    var link, linkText;

                    if (item.button_status == 1) {
                        link = `href="{{ url('DaftarCourse') }}/${item.id}"`;
                        linkText = 'Mulai Kelas';
                    } else if (item.button_status == 2) {
                        link = `onclick="gtmDetailCourse(${item.id})"`;
                        linkText = 'Mulai Kelas';
                    } else if (item.button_status == 3) {
                        link = `href="{{ url('DetailCourse') }}/${item.id}"`;
                        linkText = 'Daftar';
                    } else {
                        link = `href="{{ url('Course/list-course')}}"`;
                        linkText = 'Daftar';
                    }

                    var price = item.price ?? '0';
                    price = price.replace(/[^0-9]/g, '');
                    price = new Intl.NumberFormat('id-ID', {
                        style: 'currency',
                        currency: 'IDR',
                        minimumFractionDigits: 0
                    }).format(price);

                    var card = swiperTemplate
                        .replaceAll('[button_condition]', (item.button_status == 2) ? 'btn-primary' : 'btn-warning')
                        .replaceAll('[link]', link ?? '')
                        .replaceAll('[link_text]', linkText ?? '')
                        .replaceAll('[imageSrc]', imageUrl ?? '')
                        .replaceAll('[course_rating]', item.course_rating ?? '0.0')
                        .replaceAll('[fullname]', item.fullname ?? 'Tanpa Judul')
                        .replaceAll('[category]', (item.category == null) ? 'Non Kategori' : item.category)
                        .replaceAll('[price]', price) 
                        .replaceAll('[price_tag]', priceTag);

                    swiper.addSlide(i, card);
                }
                
                if (response.length == 0) {
                    swiper.appendSlide('<div class="swiper-slide">Tidak ada pelatihan tersedia.</div>');
                }

                swiper.update();
            },
            error: function(xhr, status, error) {
                $('#loading').remove();
                alert('Error load pelatihan online.');
            }
        });
    }
</script>
@endsection