@extends('frontend::layouts.app')
@section('title', $blog->meta_title)
@section('keywords', $blog->meta_keywords)
@section('description', $blog->meta_description)
@section('other_meta_tags')
    {!! $blog->other_meta_tags !!}
@endsection
@section('content')
    <div id="pageWrapper" class="BlogPage">

        <!-- Cmn_Banner -->
        <section id="InnerBanner">
            <picture>
                <source media="(min-width: 468px)" srcset="{{ $blog->banner_image_value }}" />
                <img src="{{ $blog->banner_image_mobile_value }}" width="1920" height="480" alt="{{ $blog->title }}"
                    loading="lazy" />
            </picture>
        </section>

        <!-- Blog-Detail -->
        <section id="Blog-Detail">
            <div class="container">
                <div class="dFlx cntWrap">
                    <div class="mblview">
                        <p>Search Here</p>
                        <form action="{{ route('blogs') }}" method="get" autocomplete="off">
                            <div class="frmFlx">
                                <div class="formBx">
                                    <input type="search" id="blogs-mob-search" name="q"
                                        class="form-control search-input" placeholder="Search..."
                                        value="{{ request('q') }}">
                                    <button type="submit" role="button" aria-disabled="true" class="send hoveranim"
                                        aria-label="Search">
                                        <span>
                                            <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21"
                                                fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                                                <path
                                                    d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" />
                                            </svg>
                                        </span>
                                    </button>
                                </div>
                                <div class="search-results blogs">
                                    <ul class="items"></ul>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="lftSd">
                        <div class="mainImg">
                            <img src="{{ $blog->detail_page_image_value }}" width="1151" height="634"
                                alt="{{ $blog->title }}" loading="lazy" />
                            <div class="date">{{ $blog->posted_date_value }}</div>
                        </div>
                        <div class="cntSec">
                            <h1>{{ $blog->title }}</h1>
                            {!! $blog->description_one !!}
                            @if ($blog->image_one)
                                <img src="{{ $blog->image_one_value }}" width="560" height="500"
                                    alt="{{ $blog->title }}" loading="lazy" />
                            @endif
                            @if ($blog->image_two)
                                <img src="{{ $blog->image_two_value }}" width="560" height="500"
                                    alt="{{ $blog->title }}" loading="lazy" />
                            @endif
                            @if ($blog->description_two)
                                {!! $blog->description_two !!}
                            @endif
                        </div>

                        @if ($blog->author)
                            <div class="author">
                                <div class="authorTitle">
                                    <div class="authImg">
                                        <img src="{{ $blog->author->photo_value }}" loading="lazy" width="694"
                                            height="545" alt="{{ $blog->author->name }}">
                                    </div>
                                    <div class="authInfo">
                                        <h5>{{ $blog->author->name }}</h5>
                                        <p>{{ $blog->author->intro }}</p>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <div class="sociaLinks">
                            <div class="Links">
                                <div class="txt">Share :</div>
                                <a href="{{ $shareLinks['facebook'] }}" class="iconBx" aria-label="Share on Facebook"
                                    target="_blank">
                                    <svg id="Group_180" data-name="Group 180" xmlns="http://www.w3.org/2000/svg"
                                        xmlns:xlink="http://www.w3.org/1999/xlink" width="20.466" height="21.67"
                                        viewBox="0 0 20.466 21.67">
                                        <defs>
                                            <clipPath id="clip-path_1">
                                                <rect id="Rectangle_93" data-name="Rectangle 93" width="20.466"
                                                    height="21.67" transform="translate(0 0)" />
                                            </clipPath>
                                        </defs>
                                        <g id="Group_179" data-name="Group 179" transform="translate(0 0)"
                                            clip-path="url(#clip-path)">
                                            <path id="Path_142" data-name="Path 142"
                                                d="M18.058,0H2.668A2.667,2.667,0,0,0,0,2.668V18.062a2.667,2.667,0,0,0,2.668,2.664h8.4V12.711H8.379V9.573h2.692V7.266A3.769,3.769,0,0,1,15.1,3.133a22.752,22.752,0,0,1,2.413.121v2.8H15.86c-1.3,0-1.55.619-1.55,1.522v2h3.109l-.4,3.137h-2.7v8.015h3.749a2.667,2.667,0,0,0,2.668-2.668V2.668A2.667,2.667,0,0,0,18.058,0"
                                                transform="translate(-0.044 0.385)" />
                                        </g>
                                    </svg>
                                </a>
                                <a href="{{ $shareLinks['twitter'] }}" class="iconBx" aria-label="Share on X"
                                    target="_blank">
                                    <svg id="Group_20807" data-name="Group 20807" xmlns="http://www.w3.org/2000/svg"
                                        xmlns:xlink="http://www.w3.org/1999/xlink" width="19.278" height="19.683"
                                        viewBox="0 0 19.278 19.683">
                                        <defs>
                                            <clipPath id="clip-path_2">
                                                <rect id="Rectangle_915" data-name="Rectangle 915" width="19.278"
                                                    height="19.683" />
                                            </clipPath>
                                        </defs>
                                        <g id="Group_20806" data-name="Group 20806" clip-path="url(#clip-path)">
                                            <path id="Path_101724" data-name="Path 101724"
                                                d="M19.142,19.463,15.721,14.48Q13.8,11.689,11.886,8.9h0l-.34-.553.207-.25h0c.34-.382.667-.775,1-1.162L18.365.407h0l.369-.4-.406,0c-.292,0-.585,0-.879,0h-.428l-.153.176h0Q14.019,3.5,11.172,6.815h0l-.406.452-.312-.452h0c-.326-.481-.656-.959-.985-1.439Q7.8,2.947,6.14.515L5.816,0l-.99.009c-.181,0-.362,0-.544,0H0L.481.631C.534.706.587.781.639.857L5.311,7.665Q6.3,9.112,7.3,10.56l.288.432-.2.232Q4.024,15.106.679,19c-.181.21-.354.426-.563.678.524,0,1,0,1.47,0v0h.225l.254-.308q.243-.285.487-.57,2.614-3.043,5.225-6.088h0l.558-.647.243.341h0q2.2,3.22,4.41,6.436l.555.836h.53l4.67,0h.537c-.064-.1-.1-.16-.136-.216m-2.88-.956-.161,0H14.432l-1.023-1.368h0c-2.764-4-5.557-7.971-8.339-11.953q-1.027-1.47-2.05-2.942h0L3,2.214l-.632-.92h.4l0-.005h.207c.583,0,1.165.005,1.748,0h.245l.373.515h0Q6.482,3.439,7.628,5.073,9.963,8.415,12.3,11.757l4.241,6.075.443.671-.719,0Z" />
                                        </g>
                                    </svg>
                                </a>
                                <a href="{{ $shareLinks['linkedin'] }}" class="iconBx" aria-label="Share on LinkedIn"
                                    target="_blank">
                                    <svg id="Group_175" data-name="Group 175" xmlns="http://www.w3.org/2000/svg"
                                        xmlns:xlink="http://www.w3.org/1999/xlink" width="19.995" height="19.112"
                                        viewBox="0 0 19.995 19.112">
                                        <defs>
                                            <clipPath id="clip-path_3">
                                                <rect id="Rectangle_91" data-name="Rectangle 91" width="19.995"
                                                    height="19.112" />
                                            </clipPath>
                                        </defs>
                                        <g id="Group_174" data-name="Group 174" clip-path="url(#clip-path)">
                                            <path id="Path_139" data-name="Path 139"
                                                d="M2.425,0a2.234,2.234,0,1,0-.056,4.456H2.4A2.235,2.235,0,1,0,2.425,0" />
                                            <rect id="Rectangle_90" data-name="Rectangle 90" width="4.286"
                                                height="12.895" transform="translate(0.253 6.216)" />
                                            <path id="Path_140" data-name="Path 140"
                                                d="M229.148,189.108a5.37,5.37,0,0,0-3.863,2.173v-1.87H221v12.9h4.286v-7.2a2.938,2.938,0,0,1,.141-1.046,2.346,2.346,0,0,1,2.2-1.567c1.551,0,2.171,1.183,2.171,2.916v6.9h4.286v-7.394c0-3.961-2.115-5.8-4.935-5.8"
                                                transform="translate(-214.088 -183.194)" />
                                        </g>
                                    </svg>
                                </a>
                                <a href="{{ $shareLinks['whatsapp'] }}" class="iconBx" aria-label="Share on WhatsApp"
                                    target="_blank">
                                    <svg id="Group_244" data-name="Group 244" xmlns="http://www.w3.org/2000/svg"
                                        width="22.052" height="22.048" viewBox="0 0 22.052 22.048">
                                        <g id="Layer_2" data-name="Layer 2" transform="translate(0 0)">
                                            <g id="Color">
                                                <g id="_08.Whatsapp" data-name="08.Whatsapp">
                                                    <path id="Icon"
                                                        d="M47.035,36a11.024,11.024,0,0,0-8.927,17.487l-1.378,4.1,4.242-1.356A11.024,11.024,0,1,0,47.035,36Zm5.859,15.591L51.72,52.765c-1.235,1.235-4.509-.124-7.411-3.032s-4.2-6.174-3.029-7.394l1.174-1.174a1.232,1.232,0,0,1,1.667,0l1.731,1.725A1.149,1.149,0,0,1,45.42,44.8a1.122,1.122,0,0,0-.741,1.361,5.332,5.332,0,0,0,3.214,3.211,1.177,1.177,0,0,0,1.348-.75,1.152,1.152,0,0,1,1.929-.433L52.9,49.923a1.232,1.232,0,0,1,0,1.667Z"
                                                        transform="translate(-36.015 -36)" />
                                                </g>
                                            </g>
                                        </g>
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="ritSd">
                        <div class="dskview">
                            <h2>Search Here</h2>
                            <form action="{{ route('blogs') }}" method="get" autocomplete="off">
                                <div class="frmFlx">
                                    <div class="formBx">
                                        <input type="search" id="blogs-search" name="q"
                                            class="form-control search-input" placeholder="Search..."
                                            value="{{ request('q') }}">
                                        <button type="submit" role="button" aria-disabled="true" aria-label="Search"
                                            class="send hoveranim">
                                            <span>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21"
                                                    fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                                                    <path
                                                        d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" />
                                                </svg>
                                            </span>
                                        </button>
                                    </div>
                                    <div class="search-results blogs">
                                        <ul class="items"></ul>
                                    </div>
                                </div>
                            </form>
                        </div>
                        @if ($categories->isNotEmpty())
                            <h2>Category</h2>
                            <ul id="categoryList">
                                @foreach ($categories as $category)
                                    <li>
                                        <a href="{{ route('products.category', $category->slug) }}"
                                            aria-label="View products in {{ $category->title }} category, {{ $category->products_count }} products available">
                                            {{ $category->title }} <span>({{ $category->products_count }})</span>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                        <h2>Recent Articles</h2>
                        <div class="recentList">
                            @forelse($recentBlogs as $recentBlog)
                                <div class="item">
                                    <a href="{{ route('blog-details', $recentBlog->slug) }}" class="dFlx"
                                        aria-label="Read more about {{ $recentBlog->title }}">
                                        <div class="lftBx">
                                            <div class="bgBx">
                                                <img src="{{ $recentBlog->listing_page_image_value }}" loading="lazy"
                                                    width="90" height="90" alt="{{ $recentBlog->title }}" />
                                            </div>
                                        </div>
                                        <div class="ritBx">
                                            <h6>{{ $recentBlog->posted_date_value }}</h6>
                                            <h5>{{ $recentBlog->title }}</h5>
                                        </div>
                                    </a>
                                </div>
                            @empty
                                <div class="item">
                                    <p>No recent articles found.</p>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection
@push('js')
    <script>
        var keyupTimer;
        var lastKeyword = "";
        var innerClick = false;

        // Hide results on document click
        $(document).click(function(evt) {
            if (evt.target.id !== "blogs-search" && evt.target.id !== "blogs-mob-search") {
                innerClick = false;
                $(".search-results.blogs").hide();
            }
        });

        // Handle input event to clear and hide results
        $("#blogs-search,#blogs-mob-search").on("input", function() {
            $(".search-results.blogs").hide().find(".items").empty();
        });

        // Debounced AJAX call on keyup and click events
        $("#blogs-search,#blogs-mob-search").on("keyup click", function() {
            clearTimeout(keyupTimer);
            var keyword = $(this).val().trim();

            // Debounce the AJAX call
            keyupTimer = setTimeout(function() {
                if (!innerClick || keyword !== lastKeyword) {
                    innerClick = true;
                    lastKeyword = keyword;

                    if (keyword) {
                        $.ajax({
                            url: "/blogs/search/" + encodeURIComponent(keyword),
                            dataType: "json",
                            success: function(result) {
                                if (result.success) {
                                    $(".search-results.blogs")
                                        .find(".items")
                                        .html(result.data)
                                        .end()
                                        .show();
                                } else {
                                    $(".search-results.blogs").hide();
                                }
                            },
                            error: function(jqXHR, textStatus, errorThrown) {
                                console.error(
                                    "AJAX error:",
                                    textStatus,
                                    errorThrown
                                );
                                $(".search-results.blogs").hide();
                            },
                        });
                    } else {
                        $(".search-results.blogs").hide().find(".items").empty();
                    }
                }
            }, 300); // Adjust debounce delay as needed
        });
    </script>
@endpush