@extends('layouts.master')
@section('content')

@section('title', $blog->title)

@section('meta')
    <meta property="og:title" content="{{ $blog->title }}" />
    <meta property="og:description" content="{{ \Illuminate\Support\Str::limit(strip_tags($blog->description), 150) }}" />
    <meta property="og:image" content="{{ asset('public/images/' . $blog->image) }}" />
    <meta property="og:url" content="{{ url()->current() }}" />
    <meta property="og:type" content="article" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="{{ $blog->title }}" />
    <meta name="twitter:description" content="{{ \Illuminate\Support\Str::limit(strip_tags($blog->description), 150) }}" />
    <meta name="twitter:image" content="{{ asset('public/images/' . $blog->image) }}" />
@endsection

    <section class="blog-details">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12">
                    <div class="cover-images">
                        <img src="{{ URL::to('public/images/' . $blog->image)}}" alt="">
                    </div>
                    <h2>{{ $blog->title }}</h2>
                    <div class="blog-category">
                        <span><i class="fa fa-user-o" aria-hidden="true"></i> {{$blog->author}}</span>
                        <span><i class="fa fa-tags" aria-hidden="true"></i> {{$blog->tags}}</span>
                        <span><i class="fa fa-calendar-o" aria-hidden="true"></i>{{$blog->post_date}}</span>
                    </div>
                    <article>
                        {!! $blog->description !!}
                    </article>
                    
                    <div class="social-share">
                        <h4>Share on social media</h4>
                        <ul class="share__list">
                            <li class="share__item">
                              <button class="share__link  share__link--facebook">
                                <i class="fa fa-facebook" aria-hidden="true"></i>
                                <span class="sr-only">Share on Facebook</span>
                              </button>
                            </li>
                            <li class="share__item">
                              <button class="share__link share__link--twitter">
                                <i class="fa fa-twitter" aria-hidden="true"></i>
                                <span class="sr-only">Share on Twitter</span>
                              </button>
                            </li>
                            <li class="share__item">
                              <button class="share__link share__link--linkedin">
                                <i class="fa fa-linkedin" aria-hidden="true"></i>
                                <span class="sr-only">Share on LinkedIn</span>
                              </button>
                            </li>
                            <li class="share__item">
                              <button class="share__link share__link--telegram">
                                <i class="fa fa-telegram" aria-hidden="true"></i>
                                <span class="sr-only">Share on Telegram</span>
                              </button>
                            </li>
                            
                            <li class="share__item">
                              <button class="share__link share__link--whatsapp">
                                <i class="fa fa-whatsapp" aria-hidden="true"></i>
                                <span class="sr-only">Share on WhatsApp</span>
                              </button>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12">
                    <div class="card sidebar">
                        <div class="card-body">
                            <div class="recent-posts">
                                <h5>Recent Posts:</h5>
                                <ul>
                                    @foreach($blogs as $blog)
                                        @if($loop->index >= 4)
                                        <li>
                                            <a href="/blog-details.html">
                                                <div class="single-blog">
                                                    <div class="image">
                                                        <img src="{{ URL::to('public/images/' . $blog->image)}}" class="rounded"/>
                                                    </div>
                                                    <div class="content">
                                                        <span>{{$blog->post_date}}</span>
                                                        <h6><a href="{{url('blogdetails')}}/{{$blog->id}}">{{$blog->title}}</a></h6>
                                                        <article>{!! substr(strip_tags($blog->description), 0, 200) !!}...</article>
                                                        <a href="{{url('blogdetails')}}/{{$blog->id}}" class="btn btn-primary">Read More</a>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        @endif
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <script>
        
        window.onload = setShareLinks;

function setShareLinks() {
    const pageUrl = encodeURIComponent(document.URL);
    const pageTitle = encodeURIComponent(document.title);
    console.log(pageUrl);
    document.addEventListener('click', function (event) {
        let url = null;

        if (event.target.classList.contains('share__link--facebook')) {
            url = `https://www.facebook.com/sharer.php?u=${pageUrl}`;
            socialWindow(url, 570, 570);
        }

        if (event.target.classList.contains('share__link--twitter')) {
            url = `https://twitter.com/intent/tweet?url=${pageUrl}&text=${pageTitle}`;
            socialWindow(url, 570, 300);
        }

        if (event.target.classList.contains('share__link--linkedin')) {
            url = `https://www.linkedin.com/shareArticle?mini=true&url=${pageUrl}`;
            socialWindow(url, 570, 570);
        }

        if (event.target.classList.contains('share__link--telegram')) {
            // Use Telegram web share URL with both URL and text
            url = `https://t.me/share/url?url=${pageUrl}&text=${pageTitle}`;
            // For mobile, try to open the Telegram app; fallback to web
            if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
                window.location.href = url; // Direct redirect for mobile
            } else {
                socialWindow(url, 570, 570); // Popup for desktop
            }
        }

        if (event.target.classList.contains('share__link--whatsapp')) {
            url = `whatsapp://send?text=${pageTitle}%20${pageUrl}`;
            socialWindow(url, 570, 450);
        }
    }, false);
}

function socialWindow(url, width, height) {
    const left = (screen.width - width) / 2;
    const top = (screen.height - height) / 2;
    const params = `menubar=no,toolbar=no,status=no,width=${width},height=${height},top=${top},left=${left}`;
    window.open(url, '', params);
}
    </script>

@endsection

@section('footer')
    @include('layouts.footer')
@endsection