@include('components.seo')
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    <div class="col-span-1 md:col-span-2 p-2 space-y-4">
        <x-client.breadcrumbs :breadcrumb="$breadcrumb"/>
        <h1>{{$article->name}}</h1>
        <div class="space-y-4">
            @foreach($article->videos as $video)
                <div class="flex flex-col items-center">
                    <video
                        class="video-js myvideo w-full xl:w-[760px] h-[429px] "
                        controls
                        preload="auto"
                        {{--                        poster="{{$course->avatar}}"--}}
                        src="{{route('article_video_stream' , $video->id)}}"
                        data-setup="{}">
                        <p class="vjs-no-js">
                            این ویدو در دستگاه شما پشتیبانی نمیشود لطفا از دستگاه به روز تری استفاده کنید.
                        </p>
                    </video>
                </div>
            @endforeach
            {{--            <img class="rounded-t w-full" src="{{$article->avatar}}" alt="{{$article->name}}">--}}
            <div
                class="bg-gray-300 dark:bg-stone-800 flex justify-between px-4 py-1 rounded-b shadow shadow-yellow-400 ">
                <div class="px-4 py-1 rounded-md">
                    نویسنده :
                    {{$article->user->name}}
                </div>
                <div class="flex items-center gap-2">
                    <span>{{jdate($article->created_at)->ago()}}</span>
                    <x-icons.clock/>
                </div>
            </div>
            @foreach($article->podcasts as $podcast)
                <div class="mt-4 space-y-4 bg-stone-300 dark:bg-stone-800 shadow shadow-yellow-400 p-2 rounded-md">
                    <span class="text-xl font-bold">مقاله پایین رو برام بخون</span>
                    <audio
                        class="w-full"
                        controls>
                        <source
                            class="w-full"
                            src="{{asset('storage/' . $podcast->podcast)}}" type="audio/mpeg">
                    </audio>
                </div>
            @endforeach
        </div>
        <div class="border p-2 rounded-md space-y-4" id="data_table">

        </div>
        <div id="description" class="text-justify leading-9 break-words">
            {!! $article->description !!}
        </div>
        <livewire:client.component.comments :id="$article->id" type="article"/>
        <livewire:client.component.free-advice/>
    </div>
    <div
        class="border rounded-md p-4 bg-amber-400 dark:bg-stone-700 h-fit sticky top-4 @include('components.transition') ">
        <h2 class="font-bold">آخرین مقالات</h2>
        <x-client.pages.side-bar type="article"/>
    </div>
    <script>
        let description = document.getElementById('description');
        let titles = description.getElementsByTagName('h2');
        let data_table = document.getElementById('data_table');

        function convertTitle(title) {
            return title
                .trim()
                .replace(/\s+/g, '-')
        }

        Array.from(titles).forEach(item => {
            // console.log(titles)
            data_table.innerHTML += `<a href="#${convertTitle(item.innerHTML)}" class="flex items-center gap-2">
                                        <x-icons.link class="size-6"/>${item.innerHTML}
                                    </a>`;
            item.id = convertTitle(item.innerHTML)
        })
    </script>
</div>