@extends('layouts.main')

@section('canonical')
<link rel="canonical" href="{{ url('blogs') }}" />
@endsection

@section('content')
@php
    // Data khud yahin se aata hai, controller se variables na bhi aayein to error nahi aayega
    if (!isset($all) || !($all instanceof \Illuminate\Support\Collection)) {
        $all = \App\Models\Blog::where('permission', 1)->orderBy('create_date', 'desc')->get();
    }
    $banner     = $all->take(3);                               // banner slider: latest 3
    $featured   = $all->first();                               // left: sabse latest
    $side       = $all->slice(1, 3)->values();                 // right: 2nd, 3rd, 4th latest
    $categories = $all->pluck('category')->filter()->unique()->values();

    // Images: public/assets/images/blogimages/<file>  (DB me sirf file name, jaise valplast-hero.jpg)
    $img = function ($path) {
        if (!$path) {
            return asset('public/assets/images/blogimages/blog-placeholder.jpg');
        }
        if (preg_match('#^(https?:)?//#', $path)) {
            return $path;                                   // poora URL ho to waisa hi use hoga
        }
        return asset('public/assets/images/blogimages/'.ltrim($path, '/'));
    };
    $link = function ($b) {
        return url('blogs/'.$b->id.'/'.$b->url);
    };
@endphp

<style>
    :root { --bl-red: #c41013; --bl-grey: #f3f3f3; }
    .bl-page { color: #222; }
    .bl-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
    .bl-page a { text-decoration: none; }
    .bl-clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

    /* ================= Banner slider ================= */
    .bl-banner { background: var(--bl-red); color: #fff; padding: 60px 0 40px; }
    .bl-slides { position: relative; min-height: 440px; }
    .bl-slide {
        position: absolute; inset: 0; display: flex; align-items: center; gap: 40px;
        opacity: 0; visibility: hidden; transition: opacity .6s ease;
    }
    .bl-slide.active { opacity: 1; visibility: visible; position: relative; }
    .bl-slide-text { flex: 1; }
    .bl-slide-text h2 { font-size: 2.6rem; font-weight: 700; line-height: 1.2; margin-bottom: 22px; color: #fff; }
    .bl-slide-text p { font-size: 1.1rem; line-height: 1.5; margin-bottom: 26px; -webkit-line-clamp: 4; }
    .bl-meta { font-size: .95rem; font-weight: 600; }
    .bl-meta i { display: inline-block; width: 2px; height: 14px; background: #fff; margin: 0 8px -2px; }
    .bl-slide-img { flex: 1; }
    .bl-slide-img img { width: 100%; height: 440px; object-fit: cover; border-radius: 22px; display: block; background: #f5c0c0; }
    .bl-dashes { display: flex; justify-content: center; gap: 14px; margin-top: 30px; }
    .bl-dashes button {
        width: 40px; height: 5px; border: none; border-radius: 3px; cursor: pointer;
        background: rgba(255,255,255,.45); padding: 0;
    }
    .bl-dashes button.active { background: #fff; }

    /* ================= Featured + side list ================= */
    .bl-feature { display: flex; gap: 60px; padding: 60px 0 40px; }
    .bl-feature-main { flex: 1 1 48%; display: block; }
    .bl-feature-main img { width: 100%; height: 270px; object-fit: cover; border-radius: 20px; display: block; background: #f5c0c0; }
    .bl-feature-main h3 { color: var(--bl-red); font-size: 1.7rem; font-weight: 700; margin: 22px 0 10px; line-height: 1.25; }
    .bl-feature-main p { font-size: 1.15rem; color: #111; margin: 0; -webkit-line-clamp: 2; }
    .bl-feature-side { flex: 1 1 48%; display: flex; flex-direction: column; justify-content: space-between; }
    .bl-side-item { display: flex; align-items: center; gap: 28px; padding: 20px 0; border-bottom: 1px solid #bbb; }
    .bl-side-item:last-child { border-bottom: none; }
    .bl-side-item img { width: 135px; height: 88px; object-fit: cover; border-radius: 10px; flex: 0 0 135px; background: #f5c0c0; }
    .bl-side-item span { color: var(--bl-red); font-weight: 700; font-size: 1.05rem; line-height: 1.35; }

    /* ================= Category tabs ================= */
    .bl-cats { display: flex; align-items: center; gap: 14px; margin: 20px 0 40px; }
    .bl-arrow {
        flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; border: none;
        background: #e3e3e3; color: var(--bl-red); font-size: 22px; line-height: 1; cursor: pointer;
    }
    .bl-arrow:hover { background: var(--bl-red); color: #fff; }
    .bl-cat-track { flex: 1; display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; padding: 4px 0; }
    .bl-cat-track::-webkit-scrollbar { display: none; }
    .bl-cat {
        flex: 0 0 auto; border: none; background: var(--bl-grey); color: #222;
        padding: 12px 24px; border-radius: 6px; font-size: 1.05rem; cursor: pointer; white-space: nowrap;
    }
    .bl-cat.active { background: var(--bl-red); color: #fff; }

    /* ================= Blog grid ================= */
    .bl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
    .bl-card { background: var(--bl-grey); border-radius: 22px; padding: 28px; display: none; }
    .bl-card.bl-on { display: block; }
    .bl-card img { width: 100%; height: 190px; object-fit: cover; border-radius: 18px; display: block; background: #f5c0c0; }
    .bl-card h4 { color: var(--bl-red); font-size: 1.3rem; font-weight: 700; margin: 22px 0 14px; line-height: 1.3; -webkit-line-clamp: 2; }
    .bl-card p { margin: 0; color: #111; font-size: 1.05rem; -webkit-line-clamp: 2; }
    .bl-empty { text-align: center; padding: 50px 0; font-size: 1.1rem; display: none; }

    /* ================= Pagination ================= */
    .bl-pager { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 50px 0 70px; }
    .bl-dot { width: 15px; height: 15px; border-radius: 50%; border: none; background: #d9d9d9; padding: 0; cursor: pointer; }
    .bl-dot.active { background: var(--bl-red); }

    /* ================= Responsive ================= */
    @media (max-width: 991px) {
        .bl-grid { grid-template-columns: repeat(2, 1fr); gap: 25px; }
        .bl-feature { gap: 35px; }
    }
    @media (max-width: 767px) {
        .bl-banner { padding: 35px 0 25px; }
        .bl-slides { min-height: 0; }
        .bl-slide { flex-direction: column-reverse; gap: 20px; align-items: stretch; }
        .bl-slide-text h2 { font-size: 1.6rem; }
        .bl-slide-img img { height: 210px; }
        .bl-feature { flex-direction: column; padding: 35px 0 20px; }
        .bl-feature-main img { height: 220px; }
        .bl-side-item img { width: 100px; flex-basis: 100px; height: 70px; }
        .bl-grid { grid-template-columns: 1fr; }
        .bl-card { padding: 20px; }
    }
</style>

<div class="bl-page">

    {{-- ================= Banner slider (latest 3) ================= --}}
    @if($banner->count())
    <section class="bl-banner">
        <div class="bl-wrap">
            <div class="bl-slides" id="blSlides">
                @foreach($banner as $i => $b)
                <div class="bl-slide {{ $i === 0 ? 'active' : '' }}">
                    <div class="bl-slide-text">
                        <h2>{{ $b->title }}</h2>
                        <p class="bl-clamp">{{ $b->short_desc }}</p>
                        <div class="bl-meta">
                            {{ $b->author ?: 'Admin' }} <i></i> {{ $b->create_date->format('d/m/Y') }}
                        </div>
                    </div>
                    <div class="bl-slide-img">
                        <a href="{{ $link($b) }}">
                            <img src="{{ $img($b->blog_image) }}" alt="{{ $b->imagealttag ?: $b->title }}">
                        </a>
                    </div>
                </div>
                @endforeach
            </div>

            @if($banner->count() > 1)
            <div class="bl-dashes" id="blDashes">
                @foreach($banner as $i => $b)
                    <button type="button" class="{{ $i === 0 ? 'active' : '' }}" data-i="{{ $i }}" aria-label="Slide {{ $i + 1 }}"></button>
                @endforeach
            </div>
            @endif
        </div>
    </section>
    @endif

    <div class="bl-wrap">

        {{-- ================= Latest + next 3 ================= --}}
        @if($featured)
        <section class="bl-feature">
            <a class="bl-feature-main" href="{{ $link($featured) }}">
                <img src="{{ $img($featured->blog_image) }}" alt="{{ $featured->imagealttag ?: $featured->title }}">
                <h3>{{ $featured->title }}</h3>
                <p class="bl-clamp">{{ $featured->short_desc }}</p>
            </a>

            <div class="bl-feature-side">
                @foreach($side as $s)
                <a class="bl-side-item" href="{{ $link($s) }}">
                    <img src="{{ $img($s->blog_image) }}" alt="{{ $s->imagealttag ?: $s->title }}">
                    <span>{{ $s->title }}</span>
                </a>
                @endforeach
            </div>
        </section>
        @endif

        {{-- ================= Categories ================= --}}
        <div class="bl-cats">
            <button type="button" class="bl-arrow" id="catPrev" aria-label="Previous">&#8249;</button>
            <div class="bl-cat-track" id="catTrack">
                <button type="button" class="bl-cat active" data-cat="all">All</button>
                @foreach($categories as $cat)
                    <button type="button" class="bl-cat" data-cat="{{ \Illuminate\Support\Str::slug($cat) }}">{{ $cat }}</button>
                @endforeach
            </div>
            <button type="button" class="bl-arrow" id="catNext" aria-label="Next">&#8250;</button>
        </div>

        {{-- ================= Blog grid ================= --}}
        <div class="bl-grid" id="blGrid">
            @foreach($all as $idx => $b)
            <a class="bl-card {{ $idx < 6 ? 'bl-on' : '' }}" href="{{ $link($b) }}" data-cat="{{ $b->category ? \Illuminate\Support\Str::slug($b->category) : 'uncategorized' }}">
                <img src="{{ $img($b->blog_image) }}" alt="{{ $b->imagealttag ?: $b->title }}" loading="lazy">
                <h4 class="bl-clamp">{{ $b->title }}</h4>
                <p class="bl-clamp">{{ $b->short_desc }}</p>
            </a>
            @endforeach
        </div>
        <div class="bl-empty" id="blEmpty">Is category me abhi koi blog nahi hai.</div>

        {{-- ================= Pagination ================= --}}
        <div class="bl-pager" id="blPager"></div>

    </div>
</div>
<script>
(function () {
    /* ---------- Banner slider ---------- */
    var slides = document.querySelectorAll('#blSlides .bl-slide');
    var dashes = document.querySelectorAll('#blDashes button');
    var cur = 0, timer;

    function goTo(n) {
        if (!slides.length) return;
        slides[cur].classList.remove('active');
        if (dashes[cur]) dashes[cur].classList.remove('active');
        cur = (n + slides.length) % slides.length;
        slides[cur].classList.add('active');
        if (dashes[cur]) dashes[cur].classList.add('active');
    }
    function auto() {
        clearInterval(timer);
        if (slides.length > 1) timer = setInterval(function () { goTo(cur + 1); }, 5000);
    }

    dashes.forEach(function (d) {
        d.addEventListener('click', function () { goTo(parseInt(d.dataset.i, 10)); auto(); });
    });
    auto();

    /* ---------- Category tabs scroll ---------- */
    var track = document.getElementById('catTrack');
    document.getElementById('catNext').addEventListener('click', function () { track.scrollBy({ left: 260 }); });
    document.getElementById('catPrev').addEventListener('click', function () { track.scrollBy({ left: -260 }); });

    /* ---------- Filter + pagination ---------- */
    var PER_PAGE = 6;                       // 2 rows x 3 cards
    var cards    = Array.prototype.slice.call(document.querySelectorAll('#blGrid .bl-card'));
    var pager    = document.getElementById('blPager');
    var emptyBox = document.getElementById('blEmpty');
    var current  = 'all', page = 1, list = cards;

    function scrollGrid() {
        var top = track.getBoundingClientRect().top + window.pageYOffset - 100;
        window.scrollTo({ top: top, behavior: 'smooth' });
    }

    function render() {
        var pages = Math.max(1, Math.ceil(list.length / PER_PAGE));
        if (page > pages) page = pages;

        cards.forEach(function (c) { c.classList.remove('bl-on'); });
        list.slice((page - 1) * PER_PAGE, page * PER_PAGE).forEach(function (c) { c.classList.add('bl-on'); });
        emptyBox.style.display = list.length ? 'none' : 'block';

        pager.innerHTML = '';
        if (pages <= 1) return;

        var prev = document.createElement('button');
        prev.className = 'bl-arrow'; prev.innerHTML = '&#8249;'; prev.setAttribute('aria-label', 'Previous page');
        prev.onclick = function () { if (page > 1) { page--; render(); scrollGrid(); } };
        pager.appendChild(prev);

        for (var i = 1; i <= pages; i++) {
            (function (n) {
                var d = document.createElement('button');
                d.className = 'bl-dot' + (n === page ? ' active' : '');
                d.setAttribute('aria-label', 'Page ' + n);
                d.onclick = function () { page = n; render(); scrollGrid(); };
                pager.appendChild(d);
            })(i);
        }

        var next = document.createElement('button');
        next.className = 'bl-arrow'; next.innerHTML = '&#8250;'; next.setAttribute('aria-label', 'Next page');
        next.onclick = function () { if (page < pages) { page++; render(); scrollGrid(); } };
        pager.appendChild(next);
    }

    document.querySelectorAll('.bl-cat').forEach(function (btn) {
        btn.addEventListener('click', function () {
            document.querySelectorAll('.bl-cat').forEach(function (b) { b.classList.remove('active'); });
            btn.classList.add('active');
            current = btn.dataset.cat;
            list = current === 'all' ? cards : cards.filter(function (c) { return c.dataset.cat === current; });
            page = 1;
            render();
        });
    });

    render();
})();
</script>
@endsection