@extends('landing.layout')

@section('title', 'Pelatihan Detail')

@section('header')
    @include('landing.header-beranda')
@endsection

@section('content')
    <section
        class="relative table w-full py-32 lg:py-44 bg-[url('../../{{ asset('landing') }}/images/bg/3.html')] bg-no-repeat bg-center bg-cover"style="background-image: url('{{ asset('landing/images/bg/3.jpg') }}')">
        <div class="absolute inset-0 bg-slate-900 opacity-80"></div>
        <div class="container relative">
            <div class="grid grid-cols-1 pb-8 text-center mt-10">
                {{-- <span class="bg-violet-600 text-white text-xs font-bold px-2.5 py-0.5 rounded w-fit mx-auto h-5">$11/Lesson</span> --}}
                <h3 class="mt-3 text-4xl md:text-5xl lg:text-6xl leading-snug font-bold text-white">
                    {{ $pelatihan->nama_pelatihan_nama }}
                </h3>
            </div>

        </div>

        <div class="absolute text-center z-10 bottom-5 start-0 end-0 mx-3">
            <ul class="tracking-[0.5px] mb-0 inline-block">
                <li class="inline-flex items-center mt-2 mx-3">
                    <i class="iconoir-clock text-lg text-white"></i>
                    <span class="text-white/60 ms-2"> {{ $pelatihan->total_jam ?? 0 }} Jam</span>
                </li>

                <li class="inline-flex items-center mt-2 mx-3">
                    <i class="iconoir-wifi text-lg text-white"></i>
                    <span class="text-white/60 ms-2">Angkatan {{ $pelatihan->angkatan }}</span>
                </li>

                <li class="inline-flex items-center mt-2 mx-3">
                    <i class="iconoir-book text-lg text-white"></i>
                    <span class="text-white/60 ms-2">
                        {{ $pelatihan->mataPelatihans->count() }} Mata Pelatihan
                    </span>
                </li>                

                <li class="inline-flex items-center mt-2 mx-3">
                    <i class="iconoir-open-book text-lg text-white"></i>
                    <span class="text-white/60 ms-2">{{ $pelatihan->peserta_count }} Peserta</span>
                </li>


            </ul>
        </div>
    </section>
    <div class="relative">
        <div class="shape overflow-hidden z-1 text-white dark:text-slate-900">
            <svg viewBox="0 0 2880 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 48H1437.5H2880V0H2160C1442.5 52 720 0 720 0H0V48Z" fill="currentColor"></path>
            </svg>
        </div>
    </div>

    <section class="relative md:py-24 py-16 overflow-hidden">
        <div class="container relative">
            <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-12">
                <!-- Deskripsi -->
                <div class="lg:col-span-8">
                    {{-- <h5 class="text-2xl font-semibold mb-4">Deskripsi</h5> --}}

                    <div class="relative mb-6">
                        <img src="{{ $pelatihan->image ? asset('storage/' . $pelatihan->image) : asset('landing/images/course/default.jpg') }}"
                            alt="{{ $pelatihan->nama_pelatihan_nama }}" class="w-full h-64 md:h-80 rounded-md object-cover">
                    </div>

                    {!! $pelatihan->description !!}
                </div>

                <!-- Sidebar -->
                <div class="lg:col-span-4">
                    <div class="p-4">
                        <!-- Gambar -->
                        <div class="border-b border-gray-300 pb-2 mb-4">
                            <h2 class="font-bold text-xl">Detail</h2>
                        </div>

                        <!-- Jadwal -->
                        <div class="mt-4 flex items-start">
                            <i class="mdi mdi-calendar me-2 text-gray-500"></i>
                            <div>
                                <h6 class="font-medium">Jadwal</h6>
                                <p class="text-sm text-gray-600">
                                    {{ $pelatihan->tanggal_mulai->equalTo($pelatihan->tanggal_selesai)
                                        ? $pelatihan->tanggal_mulai->locale('id')->isoFormat('D MMMM Y')
                                        : $pelatihan->tanggal_mulai->locale('id')->isoFormat('D MMMM Y') .
                                            ' - ' .
                                            $pelatihan->tanggal_selesai->locale('id')->isoFormat('D MMMM Y') }}
                                </p>
                            </div>

                        </div>

                        <!-- Tempat -->
                        <div class="mt-4 flex items-start">
                            <i class="mdi mdi-school me-2 text-gray-500"></i>
                            <div>
                                <h6 class="font-medium">Tempat Pelatihan</h6>
                                <p class="text-sm text-gray-600">{{ $pelatihan->tempat_penyelenggara_nama ?? '-' }}</p>
                            </div>
                        </div>

                        <div class="mt-4 flex items-start">
                            <i class="mdi mdi-map-marker me-2 text-gray-500"></i>
                            <div>
                                <h6 class="font-medium">Lokasi</h6>
                                <p class="text-sm text-gray-600">{{ $pelatihan->lokasi ?? '-' }}</p>
                            </div>
                        </div>

                        <div class="mt-4 q mb-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="">Daftar Sekarang <i class="mdi mdi-arrow-right ms-1 align-middle"></i></a>
                        </div>
                    </div>

                    <div class="p-4">
                        <div class="border-b border-gray-300 pb-2 mb-4">
                            <h2 class="font-bold text-xl">Narasumber</h2>
                        </div>

                        @forelse($pelatihan->narasumbers as $narasumber)
                            <div class="mt-4 flex items-start space-x-3">
                                <i class="mdi mdi-account-circle text-gray-500 text-2xl"></i>
                                <div>
                                    <h6 class="font-medium text-gray-800">{{ $narasumber->nama }}</h6>
                                    <p class="text-sm text-gray-600">{{ $narasumber->jabatan ?? '-' }}</p>
                                </div>
                            </div>
                        @empty
                            <p class="text-gray-500">Belum ada narasumber.</p>
                        @endforelse
                    </div>

                    <div class="p-4">
                        <div>
                            <div class="border-b border-gray-300 pb-2 mb-4">
                                <h2 class="font-bold text-xl">Mata Pelatihan</h2>
                            </div>
                    
                            <div class="relative overflow-x-auto w-full bg-white dark:bg-slate-900 shadow-sm shadow-slate-200 dark:shadow-slate-800 rounded-md">
                                <table class="w-full text-start">
                                    <tbody>
                                        @forelse($pelatihan->mataPelatihans as $mata)
                                            <tr class="border-t border-slate-100 dark:border-slate-800">
                                                <td class="p-4">
                                                    <a href="#" class="flex items-center space-x-1">
                                                        <i class="iconoir-clipboard-check me-2 text-lg"></i>
                                                        <span>{{ $mata->mata_pelatihan_nama }}</span>
                                                    </a>
                                                </td>
                                                <td class="p-4 text-end">
                                                        <i class="iconoir-lock text-lg text-red-500"></i>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td class="p-4 text-center text-gray-500" colspan="2">
                                                    Belum ada mata pelatihan.
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    


                </div>
            </div>

        </div>

        <div class="container relative md:mt-24 mt-16">
            <div class="grid grid-cols-1 pb-6 text-center">
                <h4 class="mb-6 md:text-3xl text-2xl md:leading-normal leading-normal font-semibold">Pelatihan Lainnya</h4>

                <p class="text-slate-400 max-w-xl mx-auto">Temukan berbagai pilihan pelatihan lainnya untuk menambah
                    pengetahuan dan keterampilan Anda.</p>
            </div>

            <div class="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 mt-6 gap-6">
                @forelse($recentPosts 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>
        </div>

        <div class="container relative md:mt-24 mt-16">
            <div class="md:flex justify-center">
                <div class="lg:w-2/3 text-center">
                    <h3 class="md:text-3xl text-2xl md:leading-normal leading-normal font-semibold mb-6">Subscribe our
                        weekly subscription</h3>

                    <p class="text-slate-400 max-w-xl mx-auto">Add some text to explain benefits of subscripton on your
                        services. We'll send you the best of our blog just once a weekly.</p>

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

@endsection