@extends('layouts.landingPage.master')

@section('title')
    {{ __('message.Program') }}
@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">
            {{-- <p class="text-jacarta-700 font-display">Beranda <span style="color: #BA3C3C">></span> Program</p> --}}
            <h2 class="mb-4 mt-2 font-display text-3xl text-jacarta-700 dark:text-white"style="text-align: justify">
                {{ __('message.Program Kami') }}
            </h2>
            <hr style="max-width: 10%; color:#BA3C3C; padding:10px;">
        </div>
    </section>
    <section class="relative lg:py-10">
        <div class="container">
            <div class="flex">
                <div class="lg:w-1/2 sm:hidden">
                    <img src="{{ asset('') }}landing/img/bgprogram.png"
                        class="absolute animate-fly dark:opacity-10 my-10" width="400" alt="">
                    <div class="container relative">
                        @if (Helper::programSetting('programImage'))
                            <img src="{{ asset('uploads/landing-page/program/images/' . Helper::programSetting('programImage')) }}"
                                class="px-10 py-10 w-full object-cover h-full" alt="">
                        @else
                            <p class="dark:text-white">No data</p>
                        @endif
                    </div>
                </div>
                <div class="lg:w-1/2 py-10">
                    <p class="font-display text-jacarta-700 text-3xl  max-w-lg" style="color: #BA3C3C">
                        {{ Helper::programSetting('programTitle') }}</p>

                    <p class=" max-w-lg py-10 dark:text-white" style="text-align: justify">
                        {{ Helper::programSetting('programDesc') }}
                    </p>
                </div>
            </div>
        </div>
    </section>
    <section class="relative py-10">
        <div class="container">
            <p class="text-center font-display text-jacarta-700 text-2xl" style="color: #BA3C3C">
                {{ __('message.Apa yang kami lakukan ?') }}</p>
            <p class="text-center py-5 px-10 dark:text-white"></p>
            <div class="flex flex-wrap">

                @foreach ($programCategory as $key => $value)
                    <div class="lg:w-1/2 py-10">
                        <div class="container">
                            <div class="">
                                <div class="space-y-4 text-center">
                                    <div class="relative">
                                        <img class="w-64 h-80 mx-auto object-cover rounded-xl" style="height: 500px;"
                                            src="{{ asset('uploads/landing-page/program/images/' . $value->image) }}"
                                            alt="man" loading="lazy" width="1000" height="667">
                                        <div class="absolute" style="bottom: 0px;">
                                            <div class=" bg-white pb-2 rounded rounded-xl"
                                                style="background-color: #BA3C3C; opacity:90%">
                                                <h4 class="text-xl font-display text-white py-5">{{ $value->title }}</h4>
                                                <span
                                                    class="block text-sm text-white lg:px-10 py-5">{{ $value->short_description }}</span>
                                                <div class="py-5">
                                                    <a href="{{ route('landing.program.categoryDetail', ['slug' => $value->slug]) }}"
                                                        class="rounded-full bg-white py-3 px-8 text-center font-semibold text-accent  hover:bg-accent-dark hover:text-white">
                                                        {{ __('message.Selengkapnya') }}
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
                {{-- <div class="w-1/2">
                    <div class="container">
                        <div class=" ">
                            <div class="space-y-4 text-center">
                                <img class="0 mx-auto object-cover rounded-xl" style="height: 800px"
                                    src="{{ asset('landing/img/program3.png') }}" alt="man" loading="lazy"
                                    width="1000" height="667">
                                <div class="relative">
                                    <div class=" bg-white pb-2 rounded rounded-xl"
                                        style="margin-top: -212px; background-color: #BA3C3C; opacity:90%">
                                        <h4 class="text-xl font-display text-white py-5">Layanan Masyarakat</h4>
                                        <span class="block text-sm text-white px-10 py-5">Program Layanan Masyarakat
                                            Pertapindo</span>
                                        <div class="py-5">
                                            <a href="{{ route('landing.program.service') }}"
                                                class="rounded-full bg-white py-3 px-8 text-center font-semibold text-accent  hover:bg-accent-dark hover:text-white">
                                                Selengkapnya
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> --}}
                {{-- <div class="w-1/2" style="margin-top:-300px;">
                    <div class="container">
                        <div class=" ">
                            <div class="space-y-4 text-center">
                                <img class="0 mx-auto object-cover rounded-xl" style="height: 800px"
                                    src="{{ asset('landing/img/program4.png') }}" alt="man" loading="lazy"
                                    width="1000" height="667">
                                <div class="relative">
                                    <div class=" bg-white pb-2 rounded rounded-xl"
                                        style="margin-top: -212px; background-color: #BA3C3C; opacity:90%">
                                        <h4 class="text-xl font-display text-white py-5">Sertifikasi</h4>
                                        <span class="block text-sm text-white px-10 py-5">Program Sertifikasi
                                            Pertapindo</span>
                                        <div class="py-5">
                                            <a href="{{ route('landing.program.certification') }}"
                                                class="rounded-full bg-white py-3 px-8 text-center font-semibold text-accent hover:text-white  hover:bg-accent-dark">
                                                Selengkapnya
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-1/2" style="margin-top: 25px">
                    <div class="container">
                        <div class="">
                            <div class="space-y-4 text-center">
                                <img class="w-64 h-80 mx-auto object-cover rounded-xl" style="height: 70%"
                                    src="{{ asset('landing/img/program5.png') }}" alt="man" loading="lazy"
                                    width="1000" height="667">
                                <div class="relative">
                                    <div class=" bg-white pb-2 rounded rounded-xl"
                                        style="margin-top: -212px; background-color: #BA3C3C; opacity:90%">
                                        <h4 class="text-xl font-display text-white py-5">Pelatihan</h4>
                                        <span class="block text-sm text-white px-10 py-5">Program Pelatihan
                                            Pertapindo</span>
                                        <div class="py-5">
                                            <a href="{{ route('landing.program.training') }}"
                                                class="rounded-full bg-white py-3 px-8 text-center font-semibold text-accent hover:text-white  hover:bg-accent-dark">
                                                Selengkapnya
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> --}}
            </div>
        </div>

    </section>
@endsection