@extends('frontend.layouts.app')

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

@section('meta_description', $data->title)

@section('content')
    <section class="h-[250px] md:h-[550px] bg-center bg-cover bg-no-repeat" style="background-image: url({{ asset('img/explore/bg-explore-hero.png') }})"></section>

    <section class="pxs pt-4 md:pt-12">
        <div class="flex justify-between text-[0.4375rem] md:text-sm mb-12">
            <div class="flex gap-5 md:gap-16 max-md:text-[#1C110C]">
                <div class="uppercase max-md:text-[0.4375rem]">{{ $data->category->name }}</div>
                <div>
                    <div class="uppercase max-md:text-[0.4375rem]">{{ $data->read_time }}</div>
                    <div class="md:text-xs max-md:text-[0.375rem]">{{ Carbon\Carbon::parse($data->published_at)->format('d/m/Y') }}</div>
                </div>
            </div>
            <div class="flex gap-3 md:gap-5 max-md:!text-[0.4375rem]">
                <div class="flex gap-2">
                    <div class="max-md:text-[#1C110C]">SHARE VIA</div>
                    <div class="!mt-1 max-md:hidden">
                        <x-svg.arrow bg="rgba(255, 255, 255, 0)" fill="#000" p="0" h="0.8rem" w="0.8rem" rotate="0deg" />
                    </div>
                    <div class="!mt-[2px] md:hidden">
                        <x-svg.arrow bg="rgba(255, 255, 255, 0)" fill="#000" p="0" h="0.5rem" w="0.5rem" rotate="0deg" />
                    </div>
                </div>
                <div><a class="hover:underline max-md:text-[#1C110C]" href="{{ $shareComponent['linkedin'] }}" target="_balnk">LINKED IN</a></div>
                <div><a class="hover:underline max-md:text-[#1C110C]" href="{{ $shareComponent['facebook'] }}" target="_balnk">FACEBOOK</a></div>
                <div><a class="hover:underline max-md:text-[#1C110C]" href="{{ $shareComponent['twitter'] }}" target="_balnk">TWITTER</a></div>
            </div>
        </div>
        <div class="text-2xl md:text-7xl max-md:text-center max-md:text[1.5rem] max-md:font-[300] max-md:leading-[1.875rem] max-md:font-rubik">
            {{ $data->title }}
        </div>
        <div class="md:grid grid-cols-12 gap-20 pt-12">
            <div class="md:col-span-3 xl:col-span-3 relative">
                <div class="space-y-4 max-md:hidden">
                    <div class="text-sm">Table of Content</div>
                    <div class=""><a class="js-scroll-trigger" data-scroll="#intro" scroll-top="-100" href="#intro">Introduction</a></div>
                    @foreach ($heading as $key => $value)
                        <div class="border-t-black border-t pt-4">
                            <a class="js-scroll-trigger" data-scroll="#heading-{{ $key }}" scroll-top="-100" href="#heading-{{ $key }}">{{ $value->title }}</a>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="col-span-12 md:col-span-9 xl:col-span-9">
                <div id="intro" class="into max-md:text-[0.75rem] max-md:text-center max-md:font-[400]">
                    {!! $intro !!}
                </div>
                <hr class="border-black my-10">

                <div class="space-y-5">
                    @foreach ($heading as $key => $value)
                    <div id="heading-{{ $key }}" class="space-y-5">
                        <div class="font-bold">{{ $value->title }}</div>
                        <div class="text-justify max-md:text-[0.8125rem]">
                            {!! $value->body !!}
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
        <hr class="border-black mt-4 mb-3 md:my-10">
        <div class="flex justify-between text-[0.4375rem] md:text-sm mb-12">
            <div class="flex gap-5 md:gap-16 max-md:text-[#1C110C]">
                <div class="uppercase max-md:text-[0.4375rem]">{{ $data->category->name }}</div>
                <div>
                    <div>{{ $data->read_time }}</div>
                    <div class="md:text-xs max-md:text-[0.4375rem]">{{ Carbon\Carbon::parse($data->published_at)->format('d/m/Y') }}</div>
                </div>
            </div>
            <div class="flex gap-3 md:gap-5 max-md:!text-[0.4375rem]">
                <div class="flex gap-2">
                    <div class="max-md:text-[#1C110C]">SHARE VIA</div>
                    <div class="!mt-1 max-md:hidden">
                        <x-svg.arrow bg="rgba(255, 255, 255, 0)" fill="#000" p="0" h="0.8rem" w="0.8rem" rotate="0deg" />
                    </div>
                    <div class="!mt-[2px] md:hidden">
                        <x-svg.arrow bg="rgba(255, 255, 255, 0)" fill="#000" p="0" h="0.5rem" w="0.5rem" rotate="0deg" />
                    </div>
                </div>
                <div><a class="hover:underline max-md:text-[#1C110C]" href="{{ $shareComponent['linkedin'] }}" target="_balnk">LINKED IN</a></div>
                <div><a class="hover:underline max-md:text-[#1C110C]" href="{{ $shareComponent['facebook'] }}" target="_balnk">FACEBOOK</a></div>
                <div><a class="hover:underline max-md:text-[#1C110C]" href="{{ $shareComponent['twitter'] }}" target="_balnk">TWITTER</a></div>
            </div>
        </div>
    </section>
    <section class="bg-black pxs pt-10 md:pt-14 pb-20 text-white max-md:!text-[0.625rem] max-md:!font[400]">
        <livewire:frontend.explore-articles-show />
    </section>
@endsection

@push('after-scripts')
    <script>
        let splideWire = function () {
            var splide = new Splide( '.slide-articles', {
                type   : 'loop',
                perPage: 1,
                focus  : 'center',
                gap    : '1rem',
                autoWidth: false,
                pagination: false,
                arrows: false,
                mediaQuery: 'min',
                breakpoints: {
                        640: {
                            destroy: true,
                        },
                }
            } );
            splide.mount();
        }
        $(document).ready(function(){
            splideWire();
            window.addEventListener('loadSplideWire', event => {
                splideWire();
            })
        });
    </script>
@endpush