@extends('frontend.layouts.app')

@section('title', __('Explore'))

@section('meta_description', 'Discover our curated collection of recent
news and thought-provoking articles. Delve
into our latest endeavors and gain inspiration
to <i>enrich your mind and elevate your ideas.</i>')

@section('content')
    <section class="flex max-md:flex-col pt-7 md:pt-40 md:pb-20 max-md:pb-10 pxs bg-[#e5e7e7]">
        <div class="basis-2/5 2xl:basis-4/5 space-y-2 md:space-y-14 max-md:order-2">
            <div class="font-medium max-md:font-[600] font-rubik text-4xl max-md:text-[2.375rem] max-md:leading-normal md:text-6xl max-md:text-center">
                Thoughts
            </div>
            <div class="text-[0.75rem] max-md:font-[400] md:text-lg text-center md:text-justify">
                Discover our <span class="relative">
                    <span class="absolute top-0 -bottom-1 -left-1 md:-bottom-2 md:-left-2 right-0">
                        <svg class="h-[80%] w-full" viewBox="0 0 457 166" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
                            <path class="draw-circle" pathLength="100" vector-effect="non-scaling-stroke"
                                d="M23.652 37.57c-49.713 32.158-36.71 138.536 237.723 125.923 173.239-7.961 203.906-74.972 191.822-96.122C441.112 46.22 407.649 3.28 254.105 1.05 92.241-1.303 31.338 80.263 64.788 92.366"
                                stroke="#000" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </span>
                    curated collection
                </span> of recent
                news and thought-provoking articles. Delve
                into our latest endeavors and gain inspiration
                to <i class="font-cambria">enrich your mind </i> and <i class="font-cambria">elevate your ideas.</i>
            </div>
        </div>
        <div class="relative w-full max-md:order-1">
            <div class="atropos my-atropos relative z-10">
                <!-- scale container (required) -->
                <div class="atropos-scale">
                  <!-- rotate container (required) -->
                  <div class="atropos-rotate">
                    <!-- inner container (required) -->
                    <div class="atropos-inner overflow-visible">
                        <img class="md:absolute -top-16 3xl:-top-48 -right-20 w-full" src="{{ asset('img/explore/hero-explore.png') }}" alt="" data-atropos-offset="1">
                    </div>
                  </div>
                </div>
            </div>
        </div>
    </section>
    <section class="pxs py-10">
        <div class="grid grid-cols-12">
            <div class="md:col-span-3 xl:col-span-2 relative max-md:hidden">
                <ul class="space-y-3">
                    <li><a href="{{ route('frontend.explore') }}" class="underline {{ request('category') == null ? 'font-bold' : '' }}">All ({{ $all->count() }})</a></li>
                    @foreach ($categories as $category)
                    <li><a href="{{ route('frontend.explore') }}?category={{ $category->slug }}" class="underline {{ request('category') == $category->slug ? 'font-bold' : '' }}">{{ $category->name . ' ('.$category->explore->count().')' }}</a></li>
                    @endforeach
                </ul>
            </div>
            @if ($explores->count() !== 0)
            <div class="col-span-12 md:col-span-9 xl:col-span-10">
                <div class="flex justify-center self-center flex-wrap gap-8">
                    @foreach ($explores as $explore)
                        <a href="{{ route('frontend.explore.show', $explore->slug) }}" class="card-wrapp">
                            <div class="thumb overflow-hidden">
                                @if ($explore->image !== null)
                                    <img class="w-full h-full hover:scale-110 transition-all duration-500 object-cover" src="{{ file_exists(public_path($explore->image))? asset($explore->image) : asset('img/explore/gravatar-article.png') }}" alt="">
                                @else
                                    <img class="w-full h-full hover:scale-110 transition-all duration-500 object-cover" src="{{ asset('img/explore/gravatar-article.png') }}" alt="">
                                @endif
                                <div class="bg-white rounded p-1 absolute md:top-4 md:left-5 font-medium text-black max-md:p-[2px] max-md:bottom-1 max-md:left-1 max-md:!text-[0.75rem] max-md:leading-[0.75rem]">{{ $explore->category->name }}</div>
                            </div>
                            <div class="card-body max-md:space-x-2">
                                <div class="col-span-9 md:col-span-10 underline max-md:!text-[1rem]">
                                    {{ $explore->title }}
                                </div>
                                <div class="col-span-3 md:col-span-2">
                                    <div class="">
                                        <div class="md:hidden mt-1.5">
                                            <div class="max-md:!text-[0.625rem] max-md:!font-[400] leading-normal max-md:text-[#1C110C]">{{ $explore->read_time }}</div>
                                            <div class="max-md:!text-[0.5rem] max-md:!font-[400] leading-normal max-md:text-[#1C110C]">{{ Carbon\Carbon::parse($explore->published_at)->format('d/m/Y') }}</div>
                                        </div>
                                        <div class="float-right max-md:hidden">
                                            <x-svg.arrow bg="rgba(255, 255, 255, 0)" fill="#000" h="2.5rem" w="2.5rem" rotate="-45deg" />
                                        </div>
                                        <div class="float-right mr-3 md:hidden">
                                            <x-svg.arrow bg="rgba(255, 255, 255, 0)" fill="#000" h="2rem" w="2rem" rotate="-45deg" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer h-10 max-md:!hidden">
                                <div class="absolute left-5 right-5 bottom-5 flex justify-between max-md:!text-[0.5rem] max-md:!font-[400] max-md:hidden">
                                    <div>{{ Carbon\Carbon::parse($explore->published_at)->format('d/m/Y') }}</div>
                                    <div>{{ $explore->read_time }}</div>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
                {{-- <div class="flex justify-center">{{ $explores->links() }}</div> --}}
            </div>

            @else
                <div class="col-span-12 md:col-span-9 xl:col-span-10 text-center my-auto">NOT FOUND</div>
            @endif

        </div>
    </section>
@endsection

@push('after-scripts')
    <script>
        const myAtropos = Atropos({
            el: '.my-atropos',
            shadow: false,
            alwaysActive: false,
            activeOffset: 0,
            commonOrigin: false,
            rotateXMax: 1,
            rotateYMax: 1,
            shadowOffset: 0,
            highlight: false
        });
    </script>
@endpush