@section('page-title', $detail->title)
@section('page-description', $detail->description)
@section('page-image', asset($detail->image ?? 'site/img/default.png'))

@extends('site.master')
@section('main-content')

    <div class="container">
        <div class="cover-image py-5 position-relative d-flex align-items-end"
            style="height: 500px;background: #000000;overflow: hidden;">

            <div class="position-absolute top-0 start-0 s-feature w-100 h-100">
                <img src="{{ asset($detail->image ?? 'site/img/default.png') }}"
                    alt="{{ isset($detail->title) ? $detail->title : '' }}" class="img-fit-cover">
            </div>
            <div class="z-20 mb-3 d-flex flex-column gap-3 ps-5 w-100">
                <span class="bg-danger text-white rounded-2 px-4 py-2 text-center"
                    style="width: 180px;">{{ session('localeSession') == 'en' ? $detail->categories['0']->title_en : $detail->categories['0']->title_np }}</span>
                <h3 class="fs-3 text-white text-capitalize fwc-600 w-80">{{ isset($detail->title) ? $detail->title : '' }}
                </h3>
            </div>
        </div>
    </div>
    <section class="af-hdr d-none">
        <div class="header-decoration position-absolute">
            <img src="{{ asset('site/img/shape_nate.svg') }}" alt="">
        </div>
        <div class="container position-relative" style="z-index: 9">
            <div class="row">
                <div class="col-sm-12">
                    <h1
                        class=" text-uppercase text-white fnt-fam-ser {{ app()->getlocale() == 'np' ? 'fs-4' : 'fs-2' }} fwc-700">
                    </h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="list-inline-item"><a class="text-white" href="{{ URL::to('/') }}"
                                    class="text-decoration-none">@lang('language.home')</a>
                            </li>
                            <li class="list-inline-item"><a class="text-white"
                                    href="{{ route('post.bycategory', ['slug' => $detail->categories['0']->slug]) }}"
                                    class="text-decoration-none">
                                    {{ session('localeSession') == 'en' ? $detail->categories['0']->title_en : $detail->categories['0']->title_np }}

                                </a>
                            </li>
                            <li class="list-inline-item current text-danger">
                                {{ isset($detail->title) ? $detail->title : '' }} </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <div class="decoration-pattern pattern-one position-absolute">
            <img src="{{ asset('site/img/breadcrumb_shape_pattern_1.svg') }}" alt="">
        </div>
        <div class="decoration-pattern pattern-two position-absolute">
            <img src="{{ asset('site/img/breadcrumb_shape_pattern_2.svg') }}" alt="">
        </div>
    </section>
    <section class="d-none">
        <div class="container">
            <figure style="min-height: 300px; background: #eeeeff;">

                <div class="news-content-img d-flex align-item-center justify-content-center mb-3">
                    <embed type="image/jpg" src="{{ asset($detail->image ?? 'site/img/default.png') }}"
                        class="{{ session('lowbandwidth') == 'low' ? 'd-none' : ' ' }}" style="height:300px;">
                </div>

            </figure>
        </div>
    </section>


    <div class="container">
        <div class="row">
            <div class="col-lg-3 order-2 order-lg-1 d-none">
                <div class="mb-4">
                    <div class="d-flex gap-3 align-items-center">
                        <span>Share</span>
                        <div class="d-flex gap-4">
                            <a target="_blank"
                                href="https://twitter.com/intent/tweet?original_referer={{ URL::current() }}&url={{ URL::current() }}&text={{ $detail->title }}"
                                class="text-decoration-none text-dark fs-4 text-hover-danger d-flex align-items-center gap-1">
                                <i class="bi bi-twitter"></i> <span class="fs-6">Twitter</span>
                            </a>

                            <a target="_blank" href="https://www.facebook.com/sharer.php?u={{ URL::current() }}"
                                class="text-decoration-none text-dark fs-4 text-hover-primary d-flex align-items-center gap-1">
                                <i class="bi bi-facebook" aria-hidden="true"></i> <span class="fs-6">Facebook</span>
                            </a>

                            <a target="_blank"
                                href="https://www.linkedin.com/sharing/share-offsite/?url={{ URL::current() }}"
                                class="text-decoration-none text-dark fs-4 text-hover-info d-flex align-items-center gap-1">
                                <i class="bi bi-linkedin" aria-hidden="true"></i> <span class="fs-6">LinkedIn</span>
                            </a>

                            <a target="_blank"
                                href="mailto:?subject={{ urlencode($detail->title) }}&body={{ URL::current() }}"
                                class="text-decoration-none text-dark fs-5 text-hover-success d-flex align-items-center gap-1">
                                <i class="bi bi-envelope" aria-hidden="true"></i> <span class="fs-6">Email</span>
                            </a>

                            <a target="_blank"
                                href="https://api.whatsapp.com/send?text={{ urlencode($detail->title) }}%20{{ URL::current() }}"
                                class="text-decoration-none text-dark fs-5 text-hover-success d-flex align-items-center gap-1">
                                <i class="bi bi-whatsapp" aria-hidden="true"></i> <span class="fs-6">WhatsApp</span>
                            </a>

                            <a target="_blank" href="sms:?body={{ urlencode($detail->title) }}%20{{ URL::current() }}"
                                class="text-decoration-none text-dark fs-4 text-hover-secondary d-flex align-items-center gap-1">
                                <i class="bi bi-chat-left-text-fill" aria-hidden="true"></i> <span class="fs-6">SMS</span>
                            </a>


                        </div>
                    </div>

                </div>
                <div class="d-flex gap-2 align-items-center justify-content-start gap-3 mb-4 w-100">
                    @if ($detail->file)
                        <a download href="{{ asset($detail->file) }}" class="btn btn-primary btn-sm text-nowrap">
                            <i class="bi bi-file-arrow-down"></i>
                            <span class="fs-7 px-1">File</span>
                        </a>
                    @endif

                    @if ($detail->image)
                        <a download href="{{ asset($detail->image) }}" class="btn btn-secondary btn-sm text-nowrap">
                            <i class="bi bi-file-arrow-down"></i>
                            <span class="fs-7 px-1">Image</span>
                        </a>
                    @endif


                </div>
                @include('site.sidebar.sidebar')

            </div>
            <div class="col-lg-12 order-1 order-lg-2">
                <div>
                    <article>
                        <div class="row mb-3">
                            <div class="d-flex align-items-center justify-content-between py-3 border-bottom">
                                <div class="d-flex gap-3 fwc-600 text-black-50 " style="font-size: 14px;">

                                    @isset($detail->published_date)
                                        <span> <i class="bi-clock"></i>
                                            {{ getNepaliDate($detail->published_date) }}
                                        </span>
                                    @endisset

                                    {{-- <span>@lang('language.hit'):
                                        {{ session('localeSession') == 'np' ? numEnToNp($detail->viewcount) : $detail->viewcount }}

                                    </span> --}}
                                </div>
                                <div class="d-flex gap-3 align-items-center">
                                    <span>Share</span>
                                    <div class="d-flex gap-3">
                                        <a target="_blank"
                                            href="https://twitter.com/intent/tweet?original_referer={{ URL::current() }}&url={{ URL::current() }}&text={{ $detail->title }}"
                                            class="text-decoration-none text-dark fs-5 text-hover-danger d-flex align-items-center gap-1">
                                            <i class="bi bi-twitter"></i> <span class="fs-6">Twitter</span>
                                        </a>

                                        <a target="_blank"
                                            href="https://www.facebook.com/sharer.php?u={{ URL::current() }}"
                                            class="text-decoration-none text-dark fs-5 text-hover-primary d-flex align-items-center gap-1">
                                            <i class="bi bi-facebook" aria-hidden="true"></i> <span
                                                class="fs-6">Facebook</span>
                                        </a>

                                        <a target="_blank"
                                            href="https://www.linkedin.com/sharing/share-offsite/?url={{ URL::current() }}"
                                            class="text-decoration-none text-dark fs-5 text-hover-info d-flex align-items-center gap-1">
                                            <i class="bi bi-linkedin" aria-hidden="true"></i> <span
                                                class="fs-6">LinkedIn</span>
                                        </a>

                                        <a target="_blank"
                                            href="mailto:?subject={{ urlencode($detail->title) }}&body={{ URL::current() }}"
                                            class="text-decoration-none text-dark fs-5 text-hover-success d-flex align-items-center gap-1">
                                            <i class="bi bi-envelope" aria-hidden="true"></i> <span
                                                class="fs-6">Email</span>
                                        </a>

                                        <a target="_blank"
                                            href="https://api.whatsapp.com/send?text={{ urlencode($detail->title) }}%20{{ URL::current() }}"
                                            class="text-decoration-none text-dark fs-5 text-hover-success d-flex align-items-center gap-1">
                                            <i class="bi bi-whatsapp" aria-hidden="true"></i> <span
                                                class="fs-6">WhatsApp</span>
                                        </a>

                                        <a target="_blank"
                                            href="sms:?body={{ urlencode($detail->title) }}%20{{ URL::current() }}"
                                            class="text-decoration-none text-dark fs-5 text-hover-secondary d-flex align-items-center gap-1">
                                            <i class="bi bi-chat-left-text-fill" aria-hidden="true"></i> <span
                                                class="fs-6">SMS</span>
                                        </a>


                                    </div>
                                </div>
                            </div>

                        </div>





                        <div class="content-desc mb-3 border-bottom px-3 details">
                            {!! $detail->description !!}
                        </div>
                        @if (isset($detail->file))
                            <div class="d-flex align-item-center justify-content-center mb-3"
                                style="background: #333; min-height: 300px;">
                                <embed type="application/pdf"
                                    src="{{ asset($detail->file) }}"class="  {{ session('lowbandwidth') == 'low' ? 'd-none' : ' ' }}"
                                    height="700" style="width: 100%;">
                            </div>
                        @endif
                        @if ($detail->areyousatisfied)
                            <div class="my-4">
                                @include('site.sidebar.are_satisfied')

                            </div>
                        @endif

                        <div class="py-4">
                            <div class="pag-navigate border-top border-bottom d-flex gap-0 flex-column">
                                @if (!empty($previousPost))
                                    <a href="{{ route('post.detailwithcategory', ['postcategory' => $category->slug, 'slug' => $previousPost->slug]) }}"
                                        class="prev-class fs-6 d-flex align-items-center @isset($next['id']) border-bottom @endisset">
                                        <b class="p-3 bg-primary bg-opacity-10 text-primary w-25">Previous </b>
                                        <span class="px-3 text-primary fs-7 w-75">{{ $previousPost['title'] }} </span>
                                    </a>
                                @endif
                                @if (!empty($nextPost))
                                    <a href="{{ route('post.detailwithcategory', ['postcategory' => $category->slug, 'slug' => $nextPost->slug]) }}"
                                        class="prev-class fs-6 d-flex align-items-center">
                                        <b class="p-3 bg-danger bg-opacity-10 text-danger w-25">Next </b>
                                        <span class="px-3 text-danger fs-7 w-75">{{ $nextPost['title'] }} </span>
                                    </a>
                                @endif

                                {{-- {{ $previousPost }} --}}
                            </div>
                        </div>


                    </article>
                </div>

            </div>
        </div>
    </div>

@endsection
@push('scripts')
    <!-- Lightbox2 CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet" />

    <!-- Lightbox2 JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox-plus-jquery.min.js"></script>

    <script>
        $(document).ready(function() {
            // Add Bootstrap classes to tables
            $('table').addClass('table table-bordered');

            // Function to add or remove 'table-responsive' based on screen width
            function toggleTableResponsive() {
                if ($(window).width() <= 922) {
                    $('table').parent().addClass('table-responsive');
                } else {
                    $('table').parent().removeClass('table-responsive');
                }
            }

            // Initial check and on window resize
            toggleTableResponsive();
            $(window).resize(function() {
                toggleTableResponsive();
            });

            // Apply alignment classes based on inline style for all elements in '.details'
            var elements = document.querySelectorAll('.details *');
            for (var i = 0; i < elements.length; i++) {
                var element = elements[i];
                var style = element.getAttribute('style');

                if (style) {
                    if (style.indexOf('float: left;') !== -1) {
                        element.classList.add('left-align');
                    } else if (style.indexOf('float: right;') !== -1) {
                        element.classList.add('right-align');
                    } else if (style.indexOf('float: center;') !== -1) {
                        element.classList.add('center-align');
                    }
                }
            }

            // Add Lightbox wrapper for images (including images inside <figure> tags)
            $('.details img').each(function() {
                var img = $(this);
                var imgSrc = img.attr('src');

                // Handle <figure> wrapping logic
                var parentElement = img.parent('figure').length ? img.parent('figure') : img;

                // Ensure it's a thumbnail image and replace with large image
                if (imgSrc.includes('thumb-')) {
                    var largeImageSrc = imgSrc.replace('thumb-', 'large-');
                    var parentLink = $('<a></a>').attr('href', largeImageSrc).attr('data-lightbox',
                        'image-gallery');

                    // Wrap the <figure> or <img> in an anchor for Lightbox
                    parentElement.wrap(parentLink);

                    // Remove any fixed height to maintain aspect ratio
                    img.css('height', 'auto');
                }
            });
        });
    </script>

    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Article",
      "headline": "{{ $detail->title }}",
      "datePublished": "{{ $detail->published_date }}",
      "dateModified": "{{ now()->toDateString() }}",
      "author": {
        "@type": "Person",
        "name": "Author Name"
      },
      "publisher": {
        "@type": "Organization",
        "name": "Nepal Micro Insurance Company Limited",
        "logo": {
          "@type": "ImageObject",
          "url": "https://www.example.com/logo.png"
        }
      },
      "image": "{{ asset($detail->image) }}",
      "description": "{{ $detail->description }}"
    }
    </script>
@endpush