@section('meta')
<title>{{ $post->title }}</title>
    <meta name="keywords" content="{{ $post->keyword }}" />
    <meta property="og:url" content="{{ url()->current() }}" />
    <meta property="og:type" content="article" />
    <meta property="og:image" content="{{ asset($post->feature_image) }}" />
    <meta property="og:title" content="{{ $post->title }}" />
    <meta property="og:description" content="{{ Str::limit(strip_tags($post->description), 100, '...') }}" />
    <meta property="og:locale" content="{{app()->getLocale()}}" />
    <meta property="og:site_name" content="Cambonomist" />
    <meta itemprop="name" content="{{ asset($post->title) }}">
    <meta itemprop="description" content="{{ Str::limit(strip_tags($post->description), 100, '...') }}">
    <meta itemprop="image" content="{{ asset($post->feature_image) }}">
    <meta name="twitter:title" content="{{ $post->title }}" />
    <meta name="twitter:description" content="{{ Str::limit(strip_tags($post->description), 100, '...') }}" />
    <meta name="twitter:image:src" content="{{ asset($post->feature_image) }}">
    <meta name="theme-color" content="#ffffff">
@endsection

@push('styles')
    
@endpush

<div class="main-content">
    <div id="fb-root"></div>
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v12.0" nonce="hWDEjzNV"></script>
    <div class="article-bg position-absolute index-1"></div>
    <div class="container mt-2 mb-5 px-0">
        <div class="row m-0">
            <div class="col-md-8 col-lg-9 px-1">
                @if (!empty($ads_item1))
                <a href="{{ $ads_item1->url }}">
                    <img src="{{asset($ads_item1->feature_image??'img/ads3.jpg')}}" alt="ads" class="img-thumbnail bg-transparent w-100">
                </a>
                <hr>
                @endif
                
                <div class="row m-0">
                    <div class="col-lg-6 px-1">
                        <div class="ratio ratio-16x9">
                            <img src="{{ asset($post->feature_image) }}" alt="thumbnail" class="img-thumbnail w-100 object-fit-cover bg-transparent">
                        </div>
                    </div>
                    <div class="col-lg-6 px-1 align-self-center">
                        <h3 class="font-text fw-bolder lh-base">{{ $post->title }}</h3>
                        <div class="d-flex flex-wrap flex-sm-row justify-content-between mb-1">
                            <div class="d-flex">
                                <div class="avatar">
                                    <img src="{{ isset($post->user) && $post->user->feature_image != null?asset($post->user->feature_image):asset('backend/images/avatar.jpg') }}" alt="avatar" class="img-thumbnail rounded-pill w-100">
                                </div>
                                <p class="align-items-center align-self-center mb-0 ms-1">
                                    {{ $post->user->name??'' }}
                                </p>
                            </div>
                            <x-share :post="$post" />
                        </div>
                        <div class="d-flex align-items-center mb-2">
                            <span><i class='bx bx-purchase-tag'></i></span>
                            @foreach ($post->post_categories as $categories)
                            <span class="badge bg-info rounded-pill mx-1">{{ $categories->category->name }}</span>
                            @endforeach
                        </div>
                        <div class="d-flex flex-wrap flex-sm-row justify-content-between">
                            <p class="opacity-75 tippy-tooltip" data-title="{{ $post->full_date }}"><i class='bx bx-calendar'></i> {{ $post->date }}</p>
                            <p class="opacity-75"><span class="badge bg-primary rounded-pill d-flex align-items-center"><i class='bx bx-show fs-5 me-1'></i> {{ $post->view }}</span></p>
                        </div>
                        <!-- start facebook like, share -->
                        <div class="fb-like" data-href="{{route('single', $post)}}" data-width="" data-layout="button_count" data-action="like" data-size="small" data-share="true"></div>
                        <!-- end facebook like share -->
                    </div>
                </div>
                <br>
                <div class="card border-0 rounded-0 bg-nav article-desc">
                    <div class="card-body p-0">
                        {!! $post->description !!}
                        <hr>
                        <div class="d-flex flex-wrap flex-sm-row justify-content-center justify-content-sm-between mb-1">
                            <div class="align-self-center">
                                <span><i class='bx bx-purchase-tag'></i></span>
                                @foreach ($post->post_categories as $categories)
                                <span class="badge bg-info rounded-pill mx-1">{{ $categories->category->name }}</span>
                                @endforeach
                            </div>

                            <x-share :post="$post" />

                        </div>
                    </div>
                </div>
                @if (!empty($ads_item2))
                <hr>
                <a href="{{ $ads_item2->url }}">
                    <img src="{{asset($ads_item2->feature_image??'img/ads3.jpg')}}" alt="ads" class="img-thumbnail bg-transparent w-100">
                </a>
                <hr>
                @endif

                <div class="card-footer my-5 bg-transparent">
                    <div class="d-flex justify-content-center">
                        <div class="article-footer">
                            <h4 class="text-center">អត្ថបទដោយ៖</h4>
                            <div class="d-flex justify-content-center align-items-center">
                                <div class="avatar">
                                    <img src="{{ isset($post->user) && $post->user->feature_image != null?asset($post->user->feature_image):asset('backend/images/avatar.jpg') }}" alt="avatar" class="img-thumbnail rounded-pill w-100">
                                </div>
                            </div>
                            <h5 class="text-center my-2">{{ $post->user->name??'' }}</h5>
                            <div class="article-desc">
                                <p class="fs-6">
                                    {{$post->user->desc??''}}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-lg-3">
                <div class="img-thumbnail popular-post bg-transparent">
                    @if (!empty($ads_right))
                    <a href="{{ $ads_right->url }}">
                        <img src="{{ asset($ads_right->feature_image) }}" alt="Advertising" class="img-thumbnail bg-transparent border-0 w-100">
                    </a>
                    @endif

                    <h5 class="font-title text-center popular-title">&star; អត្ថបទពេញនិយម &star;</h5>
                    <div class="row m-0 opacity-75">
                        @foreach ($related_post as $post)
                        <x-home.popular 
                            class="ratio-16x9 tippy-tooltip"
                            data-title="{{ $post->title }}"
                            card="border-0 px-1"
                            :link="route('single',$post->id)" 
                            :thumbnail="$post->feature_image"
                            title="{!! Str::limit($post->title, 80, '...') !!}" 
                            :date="$post->date" 
                            {{-- description="{!! Str::limit($post->description, 100, '...') !!}" --}}
                        />
                        @endforeach
                    </div>
                </div>
                <br>
                <div class="img-thumbnail popular-post bg-transparent opacity-75">
                    <h5 class="font-title text-center popular-title">&star; អត្ថបទថ្មី &star;</h5>
                    
                    <div class="row m-0">
                        @foreach ($newPost as $post)
                            <x-home.popular 
                                class="ratio-16x9 tippy-tooltip"
                                data-title="{{ $post->title }}"
                                card="border-0 px-1"
                                :link="route('single',$post->id)" 
                                :thumbnail="$post->feature_image"
                                title="{!! Str::limit($post->title, 80, '...') !!}" 
                                :date="$post->date" 
                                {{-- description="{!! Str::limit($post->description, 100, '...') !!}" --}}
                            />
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if (!empty($ads_popup))
    <div class="offcanvas offcanvas-bottom bg-transparent show border-top-0" data-bs-backdrop="false" data-bs-scroll="true" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
        <div class="offcanvas-body bg-transparent p-0 position-relative">
            <button class="position-absolute top-0 end-0 btn-close text-reset bg-danger" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            <a href="{{ $ads_popup->url }}">
                <img src="{{ asset($ads_popup->feature_image??'img/ads4.jpg') }}" alt="ads" class="img-thumbnail bg-transparent w-100 p-0">
            </a>
        </div>
    </div>
    @endif
</div>