@extends('landing.layout')

@section('title', 'Pelatihan')

@section('content')
    <section class="relative mt-[74px] bg-slate-50 py-5 dark:bg-slate-800">
        <div class="container relative">
            <div class="grid grid-cols-1 items-center gap-2 md:grid-cols-12">
                <div class="md:col-span-4 lg:col-span-5">
                    <h3 class="text-2xl font-semibold leading-normal md:leading-normal">Pelatihan</h3>
                </div>

                <div class="md:col-span-8 md:text-end lg:col-span-7">
                    <ul class="mb-0 inline-block tracking-[0.5px]">
                        <li
                            class="inline-block text-slate-400 duration-500 ease-in-out hover:text-violet-600 dark:text-white/60 dark:hover:text-white">
                            <a href="index.html">Edupath</a>
                        </li>
                        <li class="mx-0.5 inline-block text-slate-500 ltr:rotate-0 rtl:rotate-180 dark:text-white/60"><i
                                class="iconoir-nav-arrow-right align-middle"></i></li>
                        <li
                            class="inline-block text-slate-400 duration-500 ease-in-out hover:text-violet-600 dark:text-white/60 dark:hover:text-white">
                            <a href="#">Pelatihan</a>
                        </li>
                        <li class="mx-0.5 inline-block text-slate-500 ltr:rotate-0 rtl:rotate-180 dark:text-white/60"><i
                                class="iconoir-nav-arrow-right align-middle"></i></li>
                        <li class="inline-block text-violet-600 dark:text-white" aria-current="page">Grid Courses</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section class="relative py-12">
        <div class="container relative">
            <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-12">
                <div class="order-2 md:order-1 lg:col-span-8">
                    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">

                        @forelse($pelatihan as $row)
                            <div
                                class="group rounded-md bg-white shadow-md shadow-slate-100 transition duration-500 hover:shadow-lg dark:bg-slate-900 dark:shadow-slate-800">
                                <div class="relative p-3 pb-0">
                                    <div class="relative overflow-hidden rounded-md">
                                        <img class="duration-500 group-hover:scale-105"
                                            src="{{ $row->image ? asset('storage/' . $row->image) : asset('landing/images/course/default.jpg') }}"
                                            alt="{{ $row->nama_pelatihan_nama }}">
                                    </div>
                                    <div class="absolute start-6 top-6">
                                        <span
                                            class="h-4 rounded-md bg-violet-600 px-2.5 py-1 text-[12px] text-white">Angkatan
                                            {{ $row->angkatan }}</span>
                                        <span
                                            class="h-4 rounded-md bg-violet-600 px-2.5 py-1 text-[12px] text-white">{{ $row->nama_pelatihan_jenis_pelatihan_nama }}</span>
                                    </div>

                                    {{-- <div class="absolute -bottom-5 end-6">
                                    <span
                                        class="flex size-10 items-center justify-center rounded-full bg-violet-600 font-semibold text-white shadow-md shadow-slate-100 dark:shadow-slate-800">$0</span>
                                </div> --}}
                                </div>

                                <div class="p-6">
                                    <div class="mb-3 flex">
                                        <span class="flex items-center text-sm text-slate-400"><i
                                                class="me-1 size-[14px] text-slate-900 dark:text-white"
                                                data-feather="book"></i>{{$row->mataPelatihans->count()}} Pelatihan</span>
                                        <span class="ms-3 flex items-center text-sm text-slate-400"><i
                                                class="me-1 size-[14px] text-slate-900 dark:text-white"
                                                data-feather="users"></i>{{$row->peserta_count}} Peserta</span>
                                    </div>

                                    <a class="text-lg font-medium hover:text-violet-600"
                                        href="{{ route('landing.pelatihan.show', $row->id) }}">{{ $row->nama_pelatihan_nama }}</a>

                                    <p class="mt-2 text-slate-400">{!! Str::limit($row->description, 50) !!}</p>

                                    <div class="mt-3 w-full">
                                        <a class="inline-flex h-8 w-full items-center justify-center rounded-md bg-violet-600/10 px-3 text-sm font-medium tracking-wide text-violet-600 hover:bg-violet-600 hover:text-white"
                                            href="{{ route('landing.pelatihan.show', $row->id) }}">Selengkapnya <i
                                                class="mdi mdi-arrow-right ms-1 align-middle"></i></a>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="col-span-full py-12 text-center">
                                <div class="mx-auto max-w-sm">
                                    <i class="mx-auto mb-4 size-16 text-slate-300" data-feather="file-text"></i>
                                    <h3 class="mb-2 text-lg font-semibold">Tidak ada pelatihan</h3>
                                    <p class="text-slate-400">Belum ada pelatihan yang tersedia saat ini.</p>
                                </div>
                            </div>
                        @endforelse



                    </div>

                    @if ($pelatihan->hasPages())
                        <div class="mt-6 grid grid-cols-1 md:grid-cols-12">
                            <div class="text-center md:col-span-12">
                                {{ $pelatihan->links('landing.pagination') }}
                            </div>
                        </div>
                    @endif
                </div>

                @include('landing.pelatihan.sidebar')
            </div>
        </div>

        <div class="container relative mt-16 md:mt-24">
            <div class="grid grid-cols-1">
                <div
                    class="relative overflow-hidden rounded-lg bg-white px-6 py-10 shadow-sm shadow-slate-200 lg:px-8 dark:bg-slate-900 dark:shadow-slate-800">
                    <div class="grid grid-cols-1 items-center gap-6 md:grid-cols-2">
                        <div class="z-1 text-center md:text-start">
                            <h3 class="mb-2 text-2xl font-semibold leading-normal md:text-3xl md:leading-normal">Subscribe
                                to Newsletter!</h3>
                            <p class="mx-auto max-w-xl text-slate-400">Subscribe to get latest updates and information.</p>
                        </div>

                        <div class="z-1">
                            <form class="relative mx-auto max-w-xl">
                                <input
                                    class="h-[50px] w-full rounded-full border border-slate-100 bg-white/70 pb-4 pe-40 ps-6 pt-4 text-slate-900 outline-none dark:border-slate-800 dark:bg-slate-900/70 dark:text-white"
                                    id="subemail" name="name" type="email" placeholder="Enter your email id..">
                                <button
                                    class="absolute end-[1px] top-[1px] h-12 items-center justify-center rounded-full bg-violet-600 px-6 font-medium tracking-wide text-white"
                                    type="submit">Subcribe Now</button>
                            </form>
                        </div>
                    </div>

                    <div class="absolute -start-5 -top-5">
                        <div
                            class="iconoir-mail text-7xl text-slate-900/5 lg:text-[150px] ltr:-rotate-45 rtl:rotate-45 dark:text-white/5">
                        </div>
                    </div>

                    <div class="absolute -bottom-5 -end-5">
                        <div
                            class="iconoir-edit-pencil text-7xl text-slate-900/5 lg:text-[150px] rtl:-rotate-90 dark:text-white/5">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection