@extends('layouts.app')

@section('seo')
    <meta name="description" content="Découvrez l'ensemble de nos actualités, nos évènements, nos salons...">
    <meta name="title" content="Diffusions Aromatiques - Actualités">
@endsection

@section('pageTitle', 'Actualités')

@section('menu')
    <x-menu background="bg-white"></x-menu>
@endsection

@section('content')
    <div class="relative py-24 overflow-x-hidden">
        <div class="absolute left-40 top-0 w-full bg-blue-contrast h-full opacity-8 -z-1"></div>
        <x-container>
            <h1 class="text-6xl md:text-8xl lg:text-10xl font-bold title-outline-blue-contrast md:ml-64 mb-8 md:mb-16">@lang('Actualités')</h1>
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-12">
                    @foreach($posts as $post)
                    <article class="w-full shadow-lg rounded-b-lg bg-white">
                        <div class="max-h-40 rounded-t-lg overflow-hidden">
                            <img class="object-cover h-40 w-full" src="/storage/{{$post->image}}" alt="{{$post->getTranslatedAttribute('title', app()->getLocale(), 'fr')}}">
                        </div>
                        <div class="relative bg-white p-8 rounded-b-lg">
                            <a href="/blog/{{$post->slug}}" class="text-blue-contrast absolute -top-5 right-10">
                                <svg width="41" height="39" viewBox="0 0 41 39" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M40.029 19.5728C40.029 29.9556 31.3148 38.4014 20.529 38.4014C9.74326 38.4014 1.02905 29.9556 1.02905 19.5728C1.02905 9.18996 9.74326 0.744141 20.529 0.744141C31.3148 0.744141 40.029 9.18996 40.029 19.5728Z"
                                        fill="currentColor" stroke="currentColor"/>
                                    <path d="M18.529 25.3711L24.529 19.5725" stroke="white" stroke-width="2"
                                          stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M24.529 19.5723L18.529 13.7737" stroke="white" stroke-width="2"
                                          stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </a>
                            <p >{{$post->getTranslatedAttribute('title', app()->getLocale(), 'fr')}}</p>
                        </div>
                    </article>
                    @endforeach
            </div>
            <div class="flex items-center justify-center mt-20" >
                {{$posts->links('vendor.pagination.simple-tailwind')}}
{{--                <x-button @click="loadMore()"--}}
{{--                        class="bg-blue-contrast hover:bg-blue ">Afficher plus--}}
{{--                </x-button>--}}
            </div>
        </x-container>
    </div>
@endsection

<script>
    // function posts() {
    //     return {
    //         posts: [],
    //         lastPage: null,
    //         disabled: false,
    //         loading: false,
    //         page: 1,
    //         init() {
    //             fetch('posts/json')
    //                 .then(response => response.json())
    //                 .then(data => {
    //                     console.log(data)
    //                     this.posts = data.data
    //                     this.lastPage = data.last_page
    //                     if (this.page >= this.lastPage) {
    //                         this.disabled = true
    //                     }
    //                 })
    //         },
    //         loadMore() {
    //             if (this.page >= this.lastPage) {
    //                 return;
    //             }
    //             this.disabled = true;
    //             this.loading = true;
    //             this.page = this.page + 1;
    //             fetch('posts/json?page=' + this.page)
    //                 .then(response => response.json())
    //                 .then(data => {
    //                     this.posts = [...this.posts, ...data.data];
    //                     this.disabled = false;
    //                     this.loading = false;
    //                     if (this.page >= this.lastPage) {
    //                         this.disabled = true
    //                     }
    //                 })
    //         },
    //     }
    // }
</script>