@extends('layouts.landingPage.master')

@section('title')
    {{ __('message.Program Event') }}
@endsection

@section('content')
    <section class="relative pb-10 pt-20 lg:pt-48">
        <picture class="pointer-events-none absolute inset-x-0 top-0 -z-10 dark:hidden h-full">
            <img src="{{ asset('uploads/landing-page/home/images/' . Helper::homeSetting('heroBg')) }}" alt="gradient"
                class="w-full h-full object-cover" />
        </picture>
        <div class="container">
            <h2 class="mb-4 mt-2 font-display text-3xl text-jacarta-700 dark:text-white"style="text-align: justify">
                {{ $programCategory->title }} Pertapindo
            </h2>
            <hr style="max-width: 10%; color:#BA3C3C; padding:10px;">
        </div>
    </section>

    <section class="relative py-16">
        <div class="container">
            <div class="lg:flex">
                <div class="lg:w-1/2 sm:pb-1">
                    <div class="container">
                        <div class="flex justify-center items-center">
                            <img src="{{ asset('uploads/landing-page/program/images/' . $programCategory->image) }}"
                                class="inline-block rounded-2.5xl " width="450" />
                        </div>
                        <div class="mt-10 text-center">
                            <a href="{{ route('landing.download') }}"
                                class="inline-block rounded-full bg-accent py-2 text-base px-8 text-center font-semibold text-white  transition-all hover:bg-accent-dark">{{ __('message.Selengkapnya') }}</a>
                        </div>
                    </div>
                </div>
                <div class="lg:w-1/2 sm:pt-2">
                    <div class="container text-jacarta-700 dark:text-white "
                        style="height:600px;overflow-x: hidden;text-align:justify!important;
                    overflow-y: scroll;">
                        <p class="font-display text-jacarta-700 dark:text-white text-2xl">{{ $programCategory->title }}
                            Pertapindo</p>
                        <p class="py-4 font-display text-jacarta-700 dark:text-white"
                            style="text-align: justify !important;">{!! $programCategory->description !!}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="relative py-16">
        <div class="container">
            @if (count($programData) > 0)
                <h2 class="mb-4 mt-2 font-display text-3xl text-jacarta-700 dark:text-white"style="text-align: justify">
                    {{ $programData ? 'Daftar ' . $programCategory->title . ' Pertapindo' : '' }}
                </h2>
                <div class="flex flex-wrap py-10">
                    @forelse ($programData as $key => $value)
                        <div class="w-1/3 py-5">
                            <div
                                class="dark:bg-accent shadow-2xl mx-4 rounded-xl max-w-sm dark:text-white dark:border-gray-700">
                                <a
                                    href="{{ route('landing.program.detail', ['category' => $programCategory->slug, 'slug' => $value->slug]) }}">
                                    <img class="rounded-t-lg w-full object-cover px-5 py-5"
                                        src="{{ asset('uploads/landing-page/program/images/' . $value->image) }}"
                                        alt="" style="height: 400px;width: 350px;">
                                </a>
                                <div class="px-5 pb-2" style="height: 75px;">
                                    <a
                                        href="{{ route('landing.program.detail', ['category' => $programCategory->slug, 'slug' => $value->slug]) }}">
                                        <h5
                                            class="text-jacarta-700 dark:text-white text-left font-bold text-lg tracking-tight mb-2 dark:text-light-base hover:text-accent">
                                            {{ $value->title }}</h5>
                                    </a>
                                </div>

                            </div>
                        </div>
                    @empty
                    @endforelse
                </div>
            @endif
        </div>
    </section>
@endsection