@extends('layouts.landingPage.master')

@section('title')
    {{ __('message.Persyaratan') }}
@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">
            <div class="container">
                <h2 class="mb-4 mt-2 font-display text-3xl text-jacarta-700 dark:text-white"style="text-align: justify">
                    {{ __('message.Persyaratan') }}
                </h2>
                <hr style="max-width: 10%; color:#BA3C3C; padding:10px;">
            </div>
            {{-- <p class="text-jacarta-700 font-display">Beranda <span style="color: #BA3C3C">></span> Keanggotaan <span
                    style="color: #BA3C3C">></span> Regulasi Keanggotaan</p> --}}
        </div>
    </section>

    <section class="relative py-16">
        <div class="container py-5">
            <div class="lg:flex lg:justify-between">
                <!-- Info -->
                <div class="lg:w-[45%] lg:pl-16">
                    <h2 class="mb-6 font-display text-2xl text-jacarta-700 dark:text-white">
                        {{ $regulationTitle->value ?? '-' }}
                    </h2>
                    <div class="flex space-x-4 sm:space-x-12">
                        <div class="w-full">
                            @forelse ($regulationBenefit as $key => $value)
                                <div class="mb-5 flex items-center space-x-4">
                                    <img src="{{ asset('landing/img/archivement.png') }}" alt="" width="50">
                                    <span class="block text-base text-jacarta-700 dark:text-white">{{ $value->title }}
                                    </span>
                                </div>
                            @empty
                                <p>{{ __('message.Tidak ada data') }}</p>
                            @endforelse


                        </div>
                    </div>
                </div>
                <!-- Image -->
                <div class="lg:w-[45%]">
                    <div class="relative">
                        @if (isset($regulationImage->value))
                            <img src="{{ asset('uploads/landing-page/membership/regulation/' . $regulationImage->value) }}"
                                alt="" class="absolute top-0 animate-fly">
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="relative py-16">
        <div class="w-full">
            <div class="lg:flex lg:justify-between">
                <!-- Image -->
                <div class="lg:w-1/2">
                    @if (isset($regulationBannerImage->value))
                        <img src="{{ asset('uploads/landing-page/membership/regulation/banner/' . $regulationBannerImage->value) }}"
                            class="w-full object-cover sm:pt-8" alt="" loading="lazy">
                    @endif
                </div>
                <!-- Info -->
                <div
                    class="w-full flex flex-col items-start justify-center bg-custom-800 dark:bg-jacarta-900 text-white gap-40 ml-10">
                    <div class="lg:py-10 lg:px-10 lg:pl-28 ">
                        <div class="container lg:px-10 my-5">
                            <h2 class="mb-6 font-display text-5xl text-white">
                                {{ $regulationBannerTitle->value ?? '-' }}
                            </h2>
                            <p class="mb-12 text-lg leading-normal dark:text-jacarta-300" style="text-align: justify">
                                {{ $regulationBannerDesc->value ?? '-' }}
                            </p>
                            <a href="{{ $regulationBannerUrl->value ?? 'javascript:void(0)' }}"
                                class="rounded-full bg-accent py-3 px-8 text-center font-semibold text-white  hover:bg-accent-dark">
                                {{ __('message.Selengkapnya') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="relative py-16">
        <div class="container">
            <p class="font-display text-2xl text-jacarta-700 dark:text-white">
                {{ __('message.Tahapan Alur Menjadi Anggota Pertapindo') }}
            </p>

            <div class="lg:flex flex-wrap py-5">
                                @forelse($regulationStep as $key => $value)
                    <div class="lg:w-1/2 py-3">
                        <div class="container">
                            <div class="border">
                                <div class="p-5">
                                    <p class="text-2xl font-display text-jacarta-700 dark:text-white">
                                        {{ $i++ }} . {{ $value->title }}</p>
                                    <p class="p-5 dark:text-jacarta-300">{{ $value->description }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <p>{{ __('message.Tidak ada data') }}</p>
                @endforelse
            </div>
        </div>
    </section>
@endsection