@extends('layouts.landingPage.master')

@section('title')
    {{ __('message.Publikasi Detail') }}
@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> Berita</p> --}}
            <h2 class="mb-4 mt-2 font-display text-3xl text-jacarta-700 dark:text-white"style="text-align: justify">
                {{ __('message.Berita') }}
            </h2>
            <hr style="max-width: 10%; color:#BA3C3C; padding:10px;">
        </div>
    </section>
    <section class="relative">
        <div class="container">
            <div class="lg:flex">
                <div class="container lg:px-10">
                    <div class="w-full">
                        <div class="overflow-hidden rounded-lg bg-white dark:bg-jacarta-900 shadow">
                            <div class="mt-4 flex px-4 gap-2">
                                <a href="">
                                    <h3 class="text-2xl font-display text-jacarta-700 dark:text-white">{{ $news->title }}
                                    </h3>
                                </a>
                            </div>
                            <div class="flex justify-between p-5">
                                <div>
                                    <p class="mb-1 text-md text-primary-500 text-accent">{{ $news->user->name }}</p>
                                </div>
                                <div>
                                    <time class="text-md text-accent">{{ date('d M Y', strtotime($news->date)) }}</time>
                                </div>
                            </div>
                            <img src="{{ asset('uploads/landing-page/news/images/' . $news->image) }}"
                                class="aspect-video w-full object-cover " height="400" alt="" />
                            <div class="mt-4 flex px-4 gap-2">
                                <span
                                    class="inline-flex items-center gap-1 rounded-full bg-jacarta-50 px-2 py-1 text-sm font-semibold text-accent">
                                    {{ $news->newsCategory->name }}
                                </span>
                            </div>
                            <div class="p-4">
                                <p class="text-gray-500" style="text-align: justify">
                                    {!! $news->description !!}
                                </p>

                            </div>
                        </div>
                    </div>
                </div>
                <!-- Filters -->
                <aside class="basis-4/12 lg:pl-5">
                    <p class="font-display text-accent text-xl py-3">{{ __('message.Rekomendasi Untuk Anda') }}</p>
                    @forelse ($newsRand as $key => $value)
                        <div class="flex py-4">
                            <div class="w-1/2">
                                <img src="{{ asset('uploads/landing-page/news/images/' . $value->image) }}"
                                    class="w-full object-cover" alt=""
                                    style="min-width: 100px;min-height:100px;max-height:100px;">
                            </div>
                            <div class="w-full">
                                <div class="px-4">
                                    <p class="text-sm text-jacarta-700 font-display hover:text-accent dark:text-white"><a
                                            href="{{ route('landing.news.detail', ['slug' => $value->slug]) }}">{{ $value->title }}</a>
                                    </p>
                                    <p class="text-accent font-display py-3 text-sm">
                                        {{ date('d M Y', strtotime($value->date)) }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    @empty
                        <p>No data</p>
                    @endforelse
                    <div>
                        @foreach ($advertisement as $item)
                            <div class="mt-4 banner">
                                <x-smart-ad-component slug="{{ $item->slug }}" />
                            </div>
                        @endforeach
                    </div>
                </aside>
            </div>
        </div>
    </section>

    <section class="relative py-16">
        <div class="container">
            <div class="lg:flex">
                <div class="lg:w-1/2">
                    <p class="font-display text-jacarta-700 text-2xl">{{ __('message.Berlanggan Sekarang!') }}</p>
                    <p class="py-6" style="text-align: justify">
                        {{ __('message.Dapatkan berita langsung di kotak masuk email Anda, sehingga Anda dapat membacanya dengan mudah kapan saja dan di mana saja.') }}
                    </p>
                </div>
                <div class="lg:w-1/2">
                    <div class="flex flex-col lg:px-10">
                        <form action="{{ route('service.landing.subscribe') }}" method="POST">
                            @csrf
                            <div class="w-full py-2">
                                <input type="text" name="name" class="w-full rounded-xl "
                                    placeholder="{{ __('message.Nama') }}" required>
                            </div>
                            <div class="w-full py-2">
                                <input type="email" name="email" class=" w-full rounded-xl"
                                    placeholder="{{ __('message.Email') }}" required>
                            </div>
                            <div class="flex flex-col mb-6">
                                <div class="form-floating">
                                    <div class="g-recaptcha" data-sitekey="{{ Helper::getGoogleKey() }}"></div>
                                </div>
                            </div>
                            <div class="w-full py-2">
                                <button
                                    class="w-full bg-accent text-white px-10 py-3 rounded-xl">{{ __('message.Berlanggan') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- <div x-data="{ showModal: true }" class="bg-accent"> --}}
    {{-- <!-- Button -->
        <button @click="showModal = !showModal"
            class="px-4 py-2 text-sm bg-white rounded-xl border transition-colors duration-150 ease-linear border-gray-200 text-gray-500 focus:outline-none focus:ring-0 font-bold hover:bg-gray-50 focus:bg-indigo-50 focus:text-indigo">Open
            Modal</button> --}}

    <!-- Modal Background -->
    {{-- <div x-show="showModal"
            class="fixed text-gray-500 flex items-center justify-center overflow-auto z-50 bg-accent bg-opacity-40 left-0 right-0 top-0 bottom-0"
            style="opacity: 90%; z-index:30">
            <div x-show="showModal" class="bg-white rounded-xl shadow-2xl p-6 sm:w-10/12 mx-10"
                @click.away="showModal = false" x-transition:enter="transition ease duration-100 transform"
                x-transition:enter-start="opacity-0 scale-90 translate-y-1"
                x-transition:enter-end="opacity-100 scale-100 translate-y-0"
                x-transition:leave="transition ease duration-100 transform"
                x-transition:leave-start="opacity-100 scale-100 translate-y-0"
                x-transition:leave-end="opacity-100 scale-90 translate-y-1">
                <div class="container py-16">
                    <div class="flex">
                        <div class="w-1/2">
                            <p class="font-display text-jacarta-700 text-2xl">{{ __('message.Berlanggan Sekarang!') }}</p>
                            <p class="py-6" style="text-align: justify">
                                {{ __('message.Dapatkan berita langsung di kotak masuk email Anda, sehingga Anda dapat membacanya dengan mudah kapan saja dan di mana saja.') }}
                            </p>
                        </div>
                        <div class="w-1/2">
                            <div class="flex flex-col px-10">
                                <form action="{{ route('service.landing.subscribe') }}" method="POST">
                                    @csrf
                                    <div class="w-full py-2">
                                        <input type="text" name="name" class="w-full rounded-xl "
                                            placeholder="{{ __('message.Nama') }}" required>
                                    </div>
                                    <div class="w-full py-2">
                                        <input type="email" name="email" class=" w-full rounded-xl"
                                            placeholder="{{ __('message.Email') }}" required>
                                    </div>
                                    <div class="flex flex-col mb-6">
                                        <div class="form-floating">
                                            <div class="g-recaptcha" data-sitekey="{{ Helper::getGoogleKey() }}"></div>
                                        </div>
                                    </div>
                                    <div class="w-full py-2">
                                        <button
                                            class="w-full bg-accent text-white px-10 py-3 rounded-xl">{{ __('message.Berlanggan') }}</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div> --}}

    <!-- Buttons -->
    {{-- <div class="text-right space-x-5 mt-5">
                    <button @click="showModal = !showModal"
                        class="px-4 py-2 text-sm bg-white rounded-xl border transition-colors duration-150 ease-linear border-gray-200 text-gray-500 focus:outline-none focus:ring-0 font-bold hover:bg-gray-50 focus:bg-indigo-50 focus:text-indigo">Nanti</button>

                </div> --}}
    {{-- </div>
        </div>
    </div> --}}
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
    <script type="text/javascript">
        $(window).on('load', function() {
            $('#myModal').modal('show');
        });
    </script>
@endsection