@extends('layouts.public.app')

@section('title', @$blog['name'] . ' | Chemical Wholesale')
@section('description', @$blog['short_description'] ?: 'Default description if not available')
@section('keywords', @$blog['meta_key'] ?: 'default, keywords, here')
@section('metaimage', isset($blog['image']) ? asset($blog['image']) : asset('img/logo-lg2.png'))

@section('content')

    <div class="greybg pb-4">
        <div class="search-keywords">
            <div class="container-fluid">
                <p class="search-keywords-text">{{ @$blog['name'] }}</p>
                <p class="small text-secondary">Home > Blog > {{ @$blog['name'] }}</p>
            </div>
        </div>

        <div class="mt-4">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-9">
                        <div class="blog-single-header">
                            <h1 class="blog-h1">{{ @$blog['name'] }}</h1>
                            <div class="blog-single-details px-0">
                                <div class="blog-detail-left">
                                    <div class="blog-author">
                                        <h6 class="blog-detail-subtitle">Author: </h6>
                                        <p>{{ @$blog['getAuthor']['first_name'] }} {{ @$blog['getAuthor']['last_name'] }}
                                        </p>
                                    </div>
                                </div>
                                <div class="blog-detail-right">
                                    <div class="blog-date">
                                        <h6 class="blog-detail-subtitle">Date:</h6>
                                        <p>{{ @$blog['date'] }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="blog-body">
                            <img src="/{{ @$blog['image'] }}" alt="" class="blog-main-img">

                            <div class="blog-content">

                                {!! @$blog->content !!}
                            </div>

                        </div>
                        <div class="blog-footer">
                            <div class="row d-lg-flex justify-content-between align-items-center">

                                <div class="col-lg-8">
                                    @php
                                        $tags = explode(',', @$blog['meta_key']);
                                    @endphp
                                    @if ($tags)
                                        <div class="blog-tags">
                                            <span class="small fw-bold">Tags:</span>
                                            @foreach ($tags as $tag)
                                                <a class="blog-tag">{{ $tag }}</a>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                                <div class="col-lg-4 d-flex justify-content-lg-end pt-3 pt-lg-0 pb-2 pb-lg-0">
                                    <div class="blog-share">
                                        <a class="share-btn"><i class="bi bi-share me-2"></i> Share</a>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="col-lg-3">
                        @if (count($related_blogs) > 0)
                            <div class="recent-posts-title mb-3">
                                Recent Posts
                            </div>
                            <div>
                                @foreach ($related_blogs as $rb)
                                    <div class="blog-card">
                                        <div class="row g-0">
                                            <div class="col-lg-4">
                                                <div class="blog-img">
                                                    <img src="/{{ @$rb['image'] }}" alt="blog-img" class="img-fluid"
                                                        onerror="src='/assets/img/noimg.jpg'">
                                                </div>
                                            </div>
                                            <div class="col-lg-8">
                                                <div class="blog-content">
                                                    <div class="">
                                                        {{ @$rb['name'] }}
                                                    </div>
                                                    <a href="{{ route('public.blog', @$rb['slug']) }}"
                                                        class="blog-link">Learn More <i class="bi bi-arrow-right"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('css')
    <style>
        .blog-card .blog-img {
            height: 100%;
            width: 100%;
        }

        .blog-card .blog-img img {
            border-radius: 10px 0px 0px 10px;
            width: 100%;
            height: 100%;
        }

        .blog-card .blog-link {
            font-size: 14px;
        }

        .recent-posts-title {
            font-size: 20px;
            font-weight: 600;
        }
    </style>
@endpush
@push('js')
    <script>
        $(document).ready(function() {
            $('.share-btn').on('click', async function() {
                try {
                    await navigator.share({
                        title: 'Chemical Wholesale blog',
                        text: 'Chemical Wholesale blog share',
                        url: window.location.href,
                    });
                } catch (err) {
                    //console.error('Error sharing:', err);
                }
            });
        });
    </script>
@endpush