@extends('master.front')
@section('title')
    {{ __('Blog Details') }}
@endsection

@php
    if ($post->meta_keywords) {
        $keyword = str_replace(['value', '{', '}', '[', ']', ':', "\""], '', $post->meta_keywords);
    } else {
        $keyword = $post->title;
    }
@endphp
@section('meta')
    <meta name="title" content="{{ $post->title }}">
    <meta name="keywords" content="{{ $keyword }}">
    <meta name="description" content="{{ $post->meta_descriptions }}">

    <meta name="twitter:title" content="{{ $post->title }}">


    <meta name="twitter:description" content="{{ $post->meta_descriptions }}">

    <meta name="og:title" content="{{ $post->title }}">
    @php

        $photos = json_decode($post->photo, true);
    @endphp

    @if (!empty($photos))
        <meta name="twitter:image" content="{{ asset('assets/images/' . reset($photos)) }}">
    @endif
    <meta name="og:description" content="{{ $post->meta_descriptions }}">
@endsection


@section('content')
    <style>
        .ratio-26x9 {
            --bs-aspect-ratio: calc(9 / 26* 100%);
        }

        .ratio-19x9 {
            --bs-aspect-ratio: calc(9 / 30* 100%);
        }

        .boximg80 {
            width: 100px;
            height: 66px;
        }
         
 
         .card.card-news .card-body .card-text {

            height: 65px;
        }
    </style>
 
    <!-- Page Content-->


    <div class="container-fluid container60 pb-5">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb py-3">
                <li class="breadcrumb-item"><a href="{{ route('front.index') }}">{{ __('Home') }}</a></li>
                <li class="breadcrumb-item"><a href="{{ route('front.blog') }}">{{ __('Blog') }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ $post->title }}</li>
            </ol>
        </nav>
        <div class="row">
            <div class="col-md-9 mt-2">
                {{-- <div class="blog-details-slider owl-carousel">

            @foreach (json_decode($post->photo, true) as $photo)
          
                <img src="{{ asset('assets/images/' . $photo) }}" alt="Image">
              

            @endforeach
        </div>  --}}


                <div class="ratio ratio-19x9 mb-4">
                    @foreach (json_decode($post->photo, true) as $photo)
                        <img src="{{ asset('assets/images/' . $photo) }}" alt="Image" class="mw-100 rounded-10">
                    @endforeach
                </div>
            </div>

            <div class="col-md-3 d-none d-md-block" style="margin-top: -45px;">
                <div class="card card-body">
                    <h5 class="fw-semibold ">{{ __('โพสต์ล่าสุด') }}</h5>

                    @foreach ($posts as $recent)
                        <div class="d-flex mb-2">
                            @if ($recent->photo !== '[]')
                                <div class="flex-shrink-0">
                                    <div class="boximg80">
                                        <div class="ratio ratio-1x1">
                                            <a href="{{ route('front.blog.details', $recent->slug) }}">
                                                <img src="{{ asset('assets/images/' . json_decode($recent->photo, true)[array_key_first(json_decode($recent->photo, true))]) }}"
                                                    alt="..." class="object-cover">
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            @endif
                            <div class="flex-grow-1 ms-3">
                                <h6 class="mb-0 textL2" style="font-size: 15px;"> {{ Str::limit($recent->title, 55) }}</h6>
                                <span class="fs-14 text-muted mb-2">

                                                                        <i class="material-symbols-outlined fs-14">calendar_today</i>{{ $date }}
{{-- 
                                    @if ($recent->category_id == 1)
                                        <p class="badge bg-blue1 fw-normal">{{ __('โปรโมชั่น') }}</p>
                                    @else
                                        <p class="badge bg-blue1 fw-normal">{{ __('บทความ') }}</p>
                                    @endif --}}
                                </span>



                            </div>
                        </div>
                    @endforeach
                </div>
            </div>


            <div class="row">
                <div class="col-md-12 mt-2">

                    @if ($post->category_id == 1)
                        <p class="badge bg-blue1 fw-normal">{{ __('โปรโมชั่น') }}</p>
                    @else
                        <p class="badge bg-blue1 fw-normal">{{ __('บทความ') }}</p>
                    @endif
                    <h4 class="fw-semibold"> {{ $post->title }} </h4>
                    
                    <p class="small">{{ $date2 }}</p>
                    <hr>
                    <div class="content mb-5">
                        {!! $post->details !!}
                    </div>
                </div>


                <div class="col-md-12">
                    <h4 class="fw-semibold">{{ __('แนะนำข่าวสาร') }}</h4>
                    <div class="row">