@extends('layouts.landingPage.master')

@section('title')
    {{ __('message.Pertapindo 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 px-10">
            <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 <span
                    style="color: #BA3C3C">></span> Event <span style="color: #BA3C3C">></span> IFRC</p> --}}
        </div>
    </section>

    <section class="relative py-16">
        <div class="container text-jacarta-700 dark:text-white ">
            <div class="flex">
                <div class="w-1/2">
                    <h2 class="mb-4 mt-2 font-display text-3xl text-jacarta-700 dark:text-white"style="text-align: justify">
                        {{ $programData->title }}
                    </h2>
                    <hr style="max-width: 10%; color:#BA3C3C; padding:10px;">

                    <div class="py-2">
                        <ul class="list-disc" style="text-align: justify">
                            <p>
                                {!! $programData->description !!}
                            </p>
                            <div class="mt-4">
                                <a href="{{ $programData->link_selengkapnya }}" target="_blank"
                                    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">Selengkapnya</a>
                            </div>
                        </ul>
                    </div>
                </div>
                <div class="w-1/2">
                    <img src="{{ asset('uploads/landing-page/program/images/' . $programData->image) }}"
                        class=" px-5 inline-block rounded-2.5xl " width="550" />
                </div>
            </div>
        </div>
    </section>
    <section class="relative py-24">
        <div class="container">
            <h2 class="mt-2 font-display text-3xl text-jacarta-700 dark:text-white"style="text-align: justify">
                {{ __('message.Galeri') }}
            </h2>
            <div class="flex flex-wrap py-10 popup-gallery">
                @if ($programData->gallery_1)
                    <a href="{{ asset('uploads/landing-page/program/gallery/' . $programData->gallery_1) }}">
                        <img class="rounded-t-lg px-2 py-5 w-full object-cover"
                            src="{{ asset('uploads/landing-page/program/gallery/' . $programData->gallery_1) }}"
                            style="height: 400px;width: 350px;">
                    </a>
                @endif
                @if ($programData->gallery_2)
                    <a href="{{ asset('uploads/landing-page/program/gallery/' . $programData->gallery_2) }}">
                        <img class="rounded-t-lg px-2 py-5 w-full object-cover"
                            src="{{ asset('uploads/landing-page/program/gallery/' . $programData->gallery_2) }}"
                            style="height: 400px;width: 350px;">
                    </a>
                @endif
                @if ($programData->gallery_3)
                    <a href="{{ asset('uploads/landing-page/program/gallery/' . $programData->gallery_3) }}">
                        <img class="rounded-t-lg px-2 py-5 w-full object-cover"
                            src="{{ asset('uploads/landing-page/program/gallery/' . $programData->gallery_3) }}"
                            style="height: 400px;width: 350px;">
                    </a>
                @endif
                @if ($programData->gallery_4)
                    <a href="{{ asset('uploads/landing-page/program/gallery/' . $programData->gallery_4) }}">
                        <img class="rounded-t-lg px-2 py-5 w-full object-cover"
                            src="{{ asset('uploads/landing-page/program/gallery/' . $programData->gallery_4) }}"
                            style="height: 400px;width: 350px;">
                    </a>
                @endif
                @if ($programData->gallery_5)
                    <a href="{{ asset('uploads/landing-page/program/gallery/' . $programData->gallery_5) }}">
                        <img class="rounded-t-lg px-2 py-5 w-full object-cover"
                            src="{{ asset('uploads/landing-page/program/gallery/' . $programData->gallery_5) }}"
                            style="height: 400px;width: 350px;">
                    </a>
                @endif
                @if ($programData->gallery_6)
                    <a href="{{ asset('uploads/landing-page/program/gallery/' . $programData->gallery_6) }}">
                        <img class="rounded-t-lg px-2 py-5 w-full object-cover"
                            src="{{ asset('uploads/landing-page/program/gallery/' . $programData->gallery_6) }}"
                            style="height: 400px;width: 350px;">
                    </a>
                @endif

            </div>
            <div class="mt-4 text-center">
                <a href="{{ $programData->link_file_dokumentasi }}" target="_blank"
                    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">Link
                    {{ __('message.Dokumentasi') }}
                </a>
            </div>
        </div>
    </section>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
    <script>
        jQuery(document).ready(function($) {
            $('.popup-gallery').magnificPopup({
                delegate: 'a',
                type: 'image',
                gallery: {
                    enabled: true
                }
            });
        });
    </script>
@endsection