@extends('layouts.landingPage.master')

@section('title')
    {{ __('message.Publikasi') }}
@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> Publikasi</p> --}}
            <h2 class="mb-4 mt-2 font-display text-3xl text-jacarta-700 dark:text-white"style="text-align: justify">
                {{ __('message.Publikasi') }}
            </h2>
            <hr style="max-width: 10%; color:#BA3C3C; padding:10px;">
        </div>
        <form action="{{ route('landing.news') }}" method="GET" enctype="multipart/form-data">
            @csrf
            <div class="container py-10">
                <div class="w-full lg:flex mt-4">
                    <input type="text" name="search"
                        class="w-full rounded-full my-5 mx-0 lg:mx-5 dark:bg-jacarta-900 dark:text-white dark:placeholder:text-jacarta-300"
                        placeholder="{{ __('message.Cari Kata Kunci Blog Pertapindo') }}" id="">
                    <select name="publikasi"
                        class="w-full lg:w-1/4 md:block my-5 mx-0 lg:mx-5 border-jacarta-500 py-1 rounded-full hover:ring-2 hover:ring-accent/10 focus:ring-accent dark:border-jacarta-600 dark:bg-jacarta-900 dark:text-white dark:placeholder:text-jacarta-300"
                        id="">
                        <option value="">{{ __('message.Semua Publikasi') }}</option>
                        @forelse ($newsCategory as $key => $value)
                            <option value="{{ $value->id }}">{{ $value->name }}</option>
                        @empty
                        @endforelse
                    </select>
                    <button type="submit"
                        class="w-full lg:w-1/4 my-5 mx-0 lg:mx-5 bg-accent text-white px-10 py-1 rounded-full">{{ __('message.Mencari') }}</button>
                </div>
            </div>
        </form>
    </section>

    <section class="relative py-16">

        <div class="container">
            <div class="lg:flex">
                <!-- Records -->
                <div class="mb-10 shrink-0 basis-8/12 space-y-5 lg:mb-0 lg:pr-10">
                    @if ($newsOne)
                        <div
                            class="w-full relative flex-col items-center rounded-2.5xl border border-jacarta-100 bg-white transition-shadow hover:shadow-lg dark:border-jacarta-700 dark:bg-accent">
                            <a href="{{ route('landing.news.detail', ['slug' => $newsOne->slug]) }}">
                                <figure class="">
                                    <img src="{{ asset('uploads/landing-page/news/images/' . $newsOne->image) }}"
                                        alt="avatar 2" class=" w-full object-cover" loading="lazy" style="height: 350px;">
                                </figure>
                                <div class="p-8">
                                    <span
                                        class="inline-flex gap-1 rounded-full bg-jacarta-50 px-2 py-1 text-sm font-semibold text-accent">
                                        {{ $newsOne->newsCategory->name }}
                                    </span>
                                    <h3 class="mb-1 font-display text-2xl font-semibold text-accent dark:text-white"
                                        style="margin-top: 15px;">
                                        {{ $newsOne->title }}
                                    </h3>
                                    <div class="mb-1 md:text-md text-base text-jacarta-700 dark:text-white"
                                        style="margin-top: 15px;">
                                        {{ Str::substr(strip_tags($newsOne->description), 0, 150) }}....
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="block text-md text-white">{{ $newsOne->user->name }}</span>
                                        <span
                                            class="block text-md text-white">{{ date('d M Y', strtotime($newsOne->date)) }}</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endif
                    @forelse ($news as $key => $value)
                        <a href="{{ route('landing.news.detail', ['slug' => $value->slug]) }}"
                            class="relative lg:flex items-center rounded-2.5xl border border-jacarta-100 bg-white  transition-shadow hover:shadow-lg dark:border-jacarta-700 dark:bg-accent">
                            <figure class="mr-5 self-start sm:pt-2" style="height: 100%">
                                <img src="{{ asset('uploads/landing-page/news/images/' . $value->image) }}" alt="avatar 2"
                                    class="w-full object-cover " loading="lazy" style="height: 250px;width:400px;">
                            </figure>

                            <div class="w-full">
                                <span
                                    class="inline-flex gap-1 rounded-full bg-jacarta-50 px-2 py-1 text-sm font-semibold text-accent mt-4">
                                    {{ $value->newsCategory->name }}
                                </span>
                                <h3 class="mb-1 font-display md:text-md text-base font-semibold text-jacarta-700 dark:text-white"
                                    style="margin-top: 15px; margin-right: 15px;">
                                    {{ $value->title }}
                                </h3>

                                <div class="mb-1 md:text-md text-base text-jacarta-700 dark:text-white"
                                    style="margin-top: 15px; margin-right: 15px;">
                                    {{ Str::substr(strip_tags($value->description), 0, 150) }}....
                                </div>

                                <div class="flex justify-between content-end">
                                    <span
                                        class="block text-xs text-jacarta-300 dark:text-white">{{ $value->user->name }}</span>
                                    <span
                                        class="block text-xs text-jacarta-300 pr-4 dark:text-white">{{ date('d M Y', strtotime($value->date)) }}</span>
                                </div>
                            </div>
                        </a>
                        {{-- <div class="flex shadow-2xl border justify-center items-center px-2"
                        style="margin-top: 40px;border-color: #D9D9D9">
                        <div class="w-full md:w-1/2 bg-white grid place-items-center">
                            <img src="{{ asset('uploads/landing-page/news/images/' . $value->image) }}"
                                class="w-full object-cover px-2" style="height: 250px !important;" />
                        </div>
                        <div class="w-full bg-white flex flex-col space-y-2 p-3">
                            <p class="font-display text-accent text-md">{{ $value->newscategory->name }}</p>
                            <h3 class="font-display text-jacarta-800 md:text-3xl text-xl hover:text-accent"><a
                                    href="{{ route('landing.news.detail', ['slug' => $newsOne->slug]) }}">
                                    {{ $value->title }}</a>

                            </h3>

                            <div class="flex justify-between pt-10">
                                <div>
                                    <p class="mb-1 text-md text-primary-500 text-accent">{{ $value->user->name }}</p>
                                </div>
                                <div>
                                    <time
                                        class="text-md text-accent">{{ date('d M Y', strtotime($value->date)) }}</time>
                                </div>
                            </div>
                        </div>
                    </div> --}}
                    @empty
                        <p>No Data</p>
                    @endforelse
                    <div class="flex justify-center py-16">
                        {!! $news->withQueryString()->links() !!}
                    </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="py-3 text-sm">
                                        {{ Str::substr(strip_tags($value->description), 0, 60) }}....
                                    </p>
                                    <p class="py-3 text-sm">
                                        <span class="text-accent font-display">{{ $value->user->name }}</span>
                                        -
                                        <span>{{ date('d M Y', strtotime($value->date)) }}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    @empty
                        <p>{{ __('message.Tidak ada 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>
@endsection