@extends('site.layouts.master')

@section('seoTags')
    @seoTags()
@endsection

@section('title')
    <title>@lang('site.Blogs')</title>
@endsection

@php
    $seo = SEO\Models\Page::where('path', URL::full())->first();

    $tagTranslations = [
        'Investment & Markets' => 'الاستثمار والأسواق',
        'Projects & Opportunities' => 'المشروعات والفرص',
        'Areas & Cities' => 'المناطق والمدن',
        'Real Estate Guide' => 'الدليل العقاري',
        'Future of Real Estate' => 'مستقبل العقارات',
    ];
@endphp

@section('metatags')
    @if(!empty($seo))
        <meta name="title" content="{{ $seo->meta_title ?? $seo->title }}">
        <meta name="keywords" content="{{ $seo->meta_keywords }}">
        <meta name="description" content="{{ $seo->description ?? '' }}">
    @endif

    <link rel="canonical" href="{{ str_replace('public/', '', url()->current()) }}">
    <link rel="alternate"
          hreflang="{{ app()->getLocale() == 'ar' ? 'en' : 'ar' }}"
          href="@if(app()->getLocale() == 'en' && str_contains(url()->current(), '/en/')){{ str_replace('/en/', '/ar/', str_replace('public/', '', url()->current())) }}@else{{ str_replace('/ar/', '/en/', str_replace('public/', '', url()->current())) }}@endif">
    <link rel="alternate"
          hreflang="{{ app()->getLocale() }}"
          href="{{ str_replace('public/', '', url()->current()) }}">
@endsection

@section('content')
    <div class="d-none">
        {{ Breadcrumbs::render('Blogs') }}
    </div>

    {!! $breadcrumbSchema !!}
    {!! $blogPostSchema !!}

    <main class="untitled-blog-page">
        <section class="blog-hero">
            <div class="untitled-container">
                <div class="hero-kicker">
                    <span class="hero-kicker-dot"></span>
                    @lang('site.blog')
                </div>

              <h1>
    {{ app()->getLocale() == 'ar'
        ? 'مقالات متخصصة في سوق العقارات المصري'
        : 'Specialized Articles in the Egyptian Real Estate Market' }}
</h1>

<p>
    {{ app()->getLocale() == 'ar'
        ? 'تحليلات السوق، وفرص الاستثمار، وأحدث المشروعات، والدليل العقاري الشامل لمصر.'
        : 'Market analysis, investment opportunities, latest projects, and a comprehensive guide to real estate in Egypt.' }}
</p>

<div class="hero-stats">

    <div class="hero-stat">
        <strong>{{ $blogs->total() }}+</strong>
        <span>{{ app()->getLocale() == 'ar' ? 'مقالة منشورة' : 'Published Articles' }}</span>
    </div>

    <div class="hero-stat">
        <strong>{{ count($tags) }}</strong>
        <span>{{ app()->getLocale() == 'ar' ? 'تصنيفات' : 'Categories' }}</span>
    </div>

    <div class="hero-stat">
        <strong>{{ app()->getLocale() == 'ar' ? 'أسبوعياً' : 'Weekly' }}</strong>
        <span>{{ app()->getLocale() == 'ar' ? 'تحديثات جديدة' : 'New Updates' }}</span>
    </div>

</div>
                <div class="hero-bottom">
                    <form method="GET" action="{{ route('blogs.index') }}" class="search-bar">
                        @if(request()->filled('tag'))
                            <input type="hidden" name="tag" value="{{ request('tag') }}">
                        @endif
                        @if(request()->filled('sort_by'))
                            <input type="hidden" name="sort_by" value="{{ request('sort_by') }}">
                        @endif
                        @if(request()->filled('sort'))
                            <input type="hidden" name="sort" value="{{ request('sort') }}">
                        @endif

                        <input type="text"
                               name="title"
                               id="blogSearch"
                               value="{{ request('title') }}"
                               placeholder="@lang('site.Search')">

                        @if(request()->filled('title'))
                            <button type="button" class="search-clear" id="clearBlogSearch" aria-label="Clear">×</button>
                        @endif

                        <button type="submit">@lang('site.Search')</button>
                    </form>
                </div>
            </div>
        </section>

        @if(!empty($tags))
            <nav class="tags-bar" aria-label="@lang('site.Popular Tags')">
                <div class="untitled-container">
                    <div class="tags-inner">
                        <a href="{{ route('blogs.index') }}"
                           class="tag-btn {{ request('tag') ? '' : 'active' }}">
                            {{ app()->getLocale() == 'ar' ? 'الكل' : 'All' }}
                        </a>

                        <span class="tags-sep"></span>

                        @foreach($tags as $tag)
                            @php
                                $tag = trim($tag);
                                $displayTag = app()->getLocale() == 'ar'
                                    ? ($tagTranslations[$tag] ?? $tag)
                                    : $tag;
                            @endphp

                            <a href="{{ route('blogs.index', ['tag' => $tag]) }}"
                               class="tag-btn {{ request('tag') === $tag ? 'active' : '' }}">
                                {{ $displayTag }}
                            </a>
                        @endforeach
                    </div>
                </div>
            </nav>
        @endif

        <section class="blog-body">
            <div class="untitled-container">
                <div class="blog-layout">
                    <div class="main-content">
                        <header class="sec-header">
                            <div class="sec-title">
                                <h2>@lang('site.blog')</h2>
                            </div>
                        </header>

                        <div id="post-data" class="cards-grid">
                            @include('site.template.blogsTemplate', ['blogs' => $blogs])
                        </div>

                       <nav class="pagination-wrap" aria-label="تصفح الصفحات">

    {{-- السابق --}}
    @if($blogs->onFirstPage())
        <span class="page-btn prev-next disabled">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                <polyline points="9 18 15 12 9 6"/>
            </svg>
      {{ app()->getLocale() == 'ar' ? 'السابق' : 'Previous' }}
        </span>
    @else
        <a href="{{ $blogs->previousPageUrl() }}" class="page-btn prev-next">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                <polyline points="9 18 15 12 9 6"/>
            </svg>
            السابق
        </a>
    @endif

   {{-- أرقام الصفحات --}}
@php
    $current = $blogs->currentPage();
    $last = $blogs->lastPage();
@endphp

@for($page = 1; $page <= $last; $page++)

    @if(
        $page == 1 ||
        $page == $last ||
        abs($page - $current) <= 1
    )

        @if($page == $current)
            <span class="page-btn active">{{ $page }}</span>
        @else
            <a href="{{ $blogs->url($page) }}" class="page-btn">{{ $page }}</a>
        @endif

    @elseif(
        $page == 2 && $current > 3
    )

        <span class="page-ellipsis">...</span>

    @elseif(
        $page == $last-1 && $current < $last-2
    )

        <span class="page-ellipsis">...</span>

    @endif

@endfor

    {{-- التالي --}}
    @if($blogs->hasMorePages())
        <a href="{{ $blogs->nextPageUrl() }}" class="page-btn prev-next">
{{ app()->getLocale() == 'ar' ? 'التالي' : 'Next' }}
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                <polyline points="15 18 9 12 15 6"/>
            </svg>
        </a>
    @else
        <span class="page-btn prev-next disabled">
            التالي
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                <polyline points="15 18 9 12 15 6"/>
            </svg>
        </span>
    @endif

</nav>
                    </div>

                    <aside class="sidebar">
                        <!-- <div class="sidebar-card sort-card">
                            <div class="sidebar-head">
                                <span class="sidebar-head-icon" aria-hidden="true">
                                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                                        <path d="M3 6h18M6 12h12M10 18h4"/>
                                    </svg>
                                </span>
                                @lang('site.sort_by')
                            </div>

                            <div class="sidebar-content">
                                <select id="sort-select" name="location" class="untitled-sort-select">
                                    <option value="" selected disabled>@lang('site.sort_by')</option>
                                    <option class="date"
                                            value="asc"
                                            {{ request('sort_by') == 'date' && request('sort') == 'asc' ? 'selected' : '' }}>
                                        {{ __('site.Date Old to New') }}
                                    </option>
                                    <option class="date"
                                            value="desc"
                                            {{ request('sort_by') == 'date' && request('sort') == 'desc' ? 'selected' : '' }}>
                                        {{ __('site.Date New to Old') }}
                                    </option>
                                </select>
                            </div>
                        </div> -->

                        @if(!empty($tags))
                            <div class="sidebar-card">
                                <div class="sidebar-head">
                                    <span class="sidebar-head-icon" aria-hidden="true">
                                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                                            <path d="M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z"/>
                                            <line x1="7" y1="7" x2="7.01" y2="7"/>
                                        </svg>
                                    </span>
                                    @lang('site.Popular Tags')
                                </div>

                                <div class="topics-list">
                                    @foreach($tags as $tag)
                                        @php
                                            $tag = trim($tag);
                                            $displayTag = app()->getLocale() == 'ar'
                                                ? ($tagTranslations[$tag] ?? $tag)
                                                : $tag;
                                        @endphp

                                        <a href="{{ route('blogs.index', ['tag' => $tag]) }}"
                                           class="topic-link {{ request('tag') === $tag ? 'active' : '' }}">
                                            <span>
                                                <span class="topic-dot"></span>
                                                {{ $displayTag }}
                                            </span>
                                        </a>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                    @php
    $recentBlogs = collect($blogs->items())
        ->sortByDesc('updated_at')
        ->take(3);
@endphp

@if($recentBlogs->isNotEmpty())
    <div class="sidebar-card recent-articles-card">
        <div class="sidebar-head">
            <span class="sidebar-head-icon" aria-hidden="true">
                <svg width="15"
                     height="15"
                     viewBox="0 0 24 24"
                     fill="none"
                     stroke="currentColor"
                     stroke-width="2.5">
                    <circle cx="12" cy="12" r="10"/>
                    <polyline points="12 6 12 12 16 14"/>
                </svg>
            </span>

            {{ app()->getLocale() === 'ar'
                ? 'أحدث المقالات'
                : 'Latest Articles' }}
        </div>

        <div class="recent-list">
            @foreach($recentBlogs as $latestBlog)
                <a href="{{ route('blogs.show', $latestBlog->slug) }}"
                   class="recent-item">

                    @if(
                        isset($latestBlog->image) &&
                        !empty($latestBlog->image->full_url)
                    )
                        <div class="recent-img">
                            <img src="{{ $latestBlog->image->full_url }}"
                                 alt="{{ $latestBlog->title }}"
                                 loading="lazy">
                        </div>
                    @endif

                    <div class="recent-info">
                        <h4>{{ $latestBlog->title }}</h4>

                        <span>
                            {{ \Carbon\Carbon::parse($latestBlog->updated_at)
                                ->locale(app()->getLocale())
                                ->translatedFormat('j F Y') }}
                        </span>
                    </div>
                </a>
            @endforeach
        </div>
    </div>
@endif

{{-- التواصل عبر واتساب --}}
<div class="cta-sidebar">
    <h4>
        {{ app()->getLocale() === 'ar'
            ? 'هل تبحث عن عقار؟'
            : 'Looking for a property?' }}
    </h4>

    <p>
        {{ app()->getLocale() === 'ar'
            ? 'فريق ريـ/ماكس المهاجر جاهز لمساعدتك في إيجاد أفضل الفرص العقارية في مصر.'
            : 'The RE/MAX Almohager team is ready to help you find the best real estate opportunities in Egypt.' }}
    </p>

    <a href="https://wa.me/201222126844"
       class="cta-whatsapp-btn"
       target="_blank"
       rel="noopener">

        <svg width="18"
             height="18"
             viewBox="0 0 24 24"
             fill="currentColor"
             aria-hidden="true">
            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
        </svg>

        {{ app()->getLocale() === 'ar'
            ? 'تواصل معنا الآن'
            : 'Contact us now' }}
    </a>
</div>
                    </aside>
                </div>

                @if($seo != null)
                    @php
                        $content = LaravelLocalization::getCurrentLocale() == 'ar'
                            ? $seo->content_ar
                            : $seo->content;
                    @endphp

                    @if(isset($content))
                        <section class="seo-content-card">
                            <h2>@lang('site.STAYING INFORMED')</h2>
                            <div id="seeDI" class="changeLink font_regular">
                                {!! $content !!}
                            </div>
                        </section>
                    @endif
                @endif
            </div>
        </section>
    </main>
@endsection


<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<style>


.hero-stats{
    display:flex;
    gap:28px;
    flex-wrap:wrap;
}

.hero-stat strong{
    display:block;
    color:#fff;
    font-size:28px;
    font-weight:900;
    letter-spacing:-.04em;
}

.hero-stat span{
    color:rgba(255,255,255,.6);
    font-size:13px;
    font-weight:700;
}

@media (max-width:720px){

    .hero-bottom{
        flex-direction:column;
        gap:16px;
    }

    .hero-stats{
        gap:20px;
    }

    .hero-stat strong{
        font-size:22px;
    }

}

.cta-sidebar {
    padding: 28px 24px;
    border-radius: 28px;
    background: linear-gradient(135deg, #173f68 0%, #2864ab 100%);
    color: #fff;
    text-align: right;
    box-shadow: 0 14px 35px rgba(16, 47, 79, 0.14);
}

.cta-sidebar h4 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.5;
}

.cta-sidebar p {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    line-height: 1.9;
}

.cta-whatsapp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 56px;
    padding: 12px 20px;
    border-radius: 999px;
    background: #e58422;
    color: #fff !important;
    font-size: 17px;
    font-weight: 900;
    text-decoration: none;
    transition: 0.2s ease;
}

.cta-whatsapp-btn:hover {
    background: #d87819;
    color: #fff !important;
    transform: translateY(-2px);
}

.recent-list {
    padding: 8px;
}

.recent-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    transition: 0.16s ease;
}

.recent-item:hover {
    background: var(--bg);
}

.recent-img {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--sky);
}

.recent-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recent-info {
    min-width: 0;
    flex: 1;
}

.recent-info h4 {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 6px;
    color: var(--navy);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.recent-info span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.pagination-wrap{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:8px !important;
    flex-wrap:wrap !important;
    margin:40px 0 !important;
}

.pagination-wrap .page-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:44px !important;
    height:44px !important;
    padding:0 18px !important;

    background:#fff !important;
    color:#102f4f !important;

    border:1.5px solid #e5eaf0 !important;
    border-radius:12px !important;

    text-decoration:none !important;
    font-weight:800 !important;
    font-size:14px !important;

    transition:.2s !important;
}

.pagination-wrap .page-btn:hover{
    background:#eaf3ff !important;
    border-color:#1f5fa8 !important;
    color:#1f5fa8 !important;
}

.pagination-wrap .page-btn.active{
    background:#102f4f !important;
    color:#fff !important;
    border-color:#102f4f !important;
}

.pagination-wrap .page-btn.prev-next{
    border-radius:999px !important;
    padding:0 20px !important;
    gap:8px !important;
}

.pagination-wrap .page-btn.disabled{
    opacity:.45 !important;
    pointer-events:none !important;
}

.pagination-wrap .page-ellipsis{
    width:44px;
    text-align:center;
    color:#777;
    font-size:18px;
    font-weight:bold;
}
    .untitled-blog-page {
        --bg: #f7f9fc;
        --surface: #ffffff;
        --surface-soft: #eef5ff;
        --navy: #102f4f;
        --blue: #1f5fa8;
        --blue-2: #2c7be5;
        --sky: #eaf3ff;
        --orange: #d9822b;
        --orange-soft: #fff3e7;
        --text: #1f2937;
        --muted: #667085;
        --line: #e5eaf0;
        --shadow-soft: 0 12px 40px rgba(16,47,79,.08);
        --radius: 24px;
        --max: 1220px;
        background: var(--bg);
        color: var(--text);
        line-height: 1.75;
        font-family: "Cairo", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
    }

    .untitled-blog-page *,
    .untitled-blog-page *::before,
    .untitled-blog-page *::after { box-sizing: border-box; }

    .untitled-blog-page a { text-decoration: none; }

    .untitled-container {
        width: min(var(--max), calc(100% - 40px));
        margin-inline: auto;
    }

    .blog-hero {
        position: relative;
        overflow: hidden;
        padding: 56px 0 52px;
        background: linear-gradient(135deg, var(--navy) 0%, #173f6a 100%);
    }

    .blog-hero::before,
    .blog-hero::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
    }

    .blog-hero::before {
        top: -80px;
        left: -80px;
        width: 400px;
        height: 400px;
        background: rgba(44,123,229,.14);
    }

    .blog-hero::after {
        right: -60px;
        bottom: -60px;
        width: 300px;
        height: 300px;
        background: rgba(217,130,43,.12);
    }

    .blog-hero .untitled-container { position: relative; z-index: 2; }

    .hero-kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
        padding: 6px 14px;
        border: 1px solid rgba(255,255,255,.2);
        border-radius: 999px;
        background: rgba(255,255,255,.12);
        color: #b9d4ef;
        font-size: 13px;
        font-weight: 700;
    }

    .hero-kicker-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--orange);
    }

   .blog-hero h1 {
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(48px, 6vw, 78px);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.15;
}

    .blog-hero p {
        max-width: 560px;
        margin: 0;
        color: rgba(255,255,255,.72);
        font-size: 17px;
    }

    .hero-bottom {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 36px;
    }

    .search-bar {
        display: flex;
        align-items: center;
        width: min(100%, 480px);
        padding: 6px;
        border: 1px solid rgba(255,255,255,.22);
        border-radius: 999px;
        background: rgba(255,255,255,.12);
        backdrop-filter: blur(10px);
    }

    .search-bar input {
        min-width: 0;
        flex: 1;
        padding: 6px 14px;
        border: 0;
        outline: 0;
        background: transparent;
        color: #fff;
        font: inherit;
        font-size: 14px;
    }

    .search-bar input::placeholder { color: rgba(255,255,255,.5); }

    .search-bar button {
        flex-shrink: 0;
        padding: 10px 20px;
        border: 0;
        border-radius: 999px;
        background: var(--orange);
        color: #fff;
        font: inherit;
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
    }

    .search-bar .search-clear {
        padding: 4px 10px;
        background: transparent;
        color: rgba(255,255,255,.8);
        font-size: 20px;
        line-height: 1;
    }

    .tags-bar {
        position: sticky;
        top: 0;
        z-index: 40;
        padding: 12px 0;
        border-bottom: 1px solid var(--line);
        background: #fff;
    }

    .tags-bar .untitled-container {
        padding: 6px 8px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: var(--bg);
    }

    .tags-inner {
        display: flex;
        align-items: center;
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .tags-inner::-webkit-scrollbar { display: none; }

    .tag-btn {
        flex-shrink: 0;
        padding: 9px 18px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: #fff;
        color: #344054;
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
        transition: .18s;
    }

    .tag-btn:hover { border-color: var(--blue); background: var(--sky); color: var(--blue); }
    .tag-btn.active { border-color: var(--navy); background: var(--navy); color: #fff; }

    .tags-sep {
        width: 1px;
        height: 28px;
        flex-shrink: 0;
        background: var(--line);
    }

    .blog-body { padding: 48px 0 80px; }

    .blog-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 32px;
        align-items: start;
    }

    .main-content { min-width: 0; }

    .sec-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 20px;
    }

    .sec-title h2 {
        margin: 0;
        color: var(--navy);
        font-size: 20px;
        font-weight: 900;
        letter-spacing: -.03em;
    }

    .cards-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        margin-bottom: 32px;
    }

    /* يجعل عناصر partial الحالية تأخذ شبكة Untitled من غير تغيير البيانات */
    .cards-grid > * {
        min-width: 0;
        margin: 0 !important;
    }

    .cards-grid .card,
    .cards-grid article,
    .cards-grid .blog-card,
    .cards-grid > div {
        overflow: hidden;
        border: 1px solid var(--line) !important;
        border-radius: var(--radius) !important;
        background: #fff !important;
        box-shadow: 0 8px 22px rgba(16,47,79,.05) !important;
        transition: transform .22s, box-shadow .22s;
    }

    .cards-grid .card:hover,
    .cards-grid article:hover,
    .cards-grid .blog-card:hover,
    .cards-grid > div:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-soft) !important;
    }

    .cards-grid img {
        display: block;
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

    .cards-grid h2,
    .cards-grid h3,
    .cards-grid h4 {
        color: var(--navy) !important;
        font-size: 17px !important;
        font-weight: 800 !important;
        line-height: 1.4 !important;
    }

    .cards-grid p {
        color: var(--muted) !important;
        font-size: 13px !important;
        line-height: 1.7 !important;
    }

    .cards-grid a:not(.wa-btn) { color: var(--blue); font-weight: 800; }

    .load-more-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-top: 32px;
    }

    .page-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 42px;
        height: 42px;
        padding: 0 18px;
        gap: 6px;
        border: 1.5px solid var(--line);
        border-radius: 999px;
        background: #fff;
        color: var(--navy);
        font-size: 14px;
        font-weight: 800;
        transition: .18s;
    }

    .page-btn:hover { border-color: var(--blue); background: var(--sky); color: var(--blue); }

    .sidebar {
        position: sticky;
        top: 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .sidebar-card {
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: #fff;
    }

    .sidebar-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 18px 20px 14px;
        border-bottom: 1px solid var(--line);
        color: var(--navy);
        font-size: 15px;
        font-weight: 900;
    }

    .sidebar-head-icon {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border-radius: 10px;
        background: var(--sky);
        color: var(--blue);
    }

    .sidebar-content { padding: 14px; }

    .untitled-sort-select {
        width: 100%;
        padding: 12px 14px;
        border: 1px solid var(--line);
        border-radius: 14px;
        outline: 0;
        background: #fff;
        color: var(--text);
        font: inherit;
        font-size: 13px;
    }

    .untitled-sort-select:focus { border-color: var(--blue); }

    .topics-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 14px;
    }

    .topic-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        border-radius: 14px;
        color: var(--text);
        font-size: 14px;
        font-weight: 700;
        transition: .16s;
    }

    .topic-link > span { display: flex; align-items: center; gap: 10px; }
    .topic-link:hover,
    .topic-link.active { background: var(--sky); color: var(--blue); }

    .topic-dot {
        width: 8px;
        height: 8px;
        flex-shrink: 0;
        border-radius: 50%;
        background: var(--blue);
    }

    .seo-content-card {
        margin-top: 40px;
        padding: 28px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: #fff;
    }

    .seo-content-card h2 {
        margin: 0 0 18px;
        color: var(--navy);
        font-size: 20px;
        font-weight: 900;
    }

    .seo-content-card .changeLink { color: var(--muted); }

    @media (max-width: 1024px) {
        .blog-layout { grid-template-columns: 1fr; }
        .sidebar { position: static; }
        .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 720px) {
        .untitled-container { width: calc(100% - 24px); }
        .blog-hero { padding: 36px 0 32px; }
        .blog-hero h1 { font-size: 26px; }
        .blog-hero p { font-size: 15px; }
        .hero-bottom { margin-top: 22px; }
        .search-bar { width: 100%; }
        .search-bar button { padding-inline: 15px; }
        .blog-body { padding: 28px 0 56px; }
        .cards-grid { grid-template-columns: 1fr; }
        .cards-grid img { height: 220px; }
        .seo-content-card { padding: 20px; }
    }
</style>

<style>
    /*
     * blogsTemplate يحتوي غالباً على:
     * <div class="blogs-grid"> ...cards... </div>
     *
     * display: contents يجعل الكروت أبناء مباشرين لـ #post-data
     * بدون حذف أو تغيير بيانات الـ partial.
     */
    #post-data.cards-grid > .blogs-grid,
    #post-data.cards-grid > .d-lg-flex,
    #post-data.cards-grid > .blog-list-wrapper {
        display: contents !important;
    }

    /*
     * إلغاء أي تنسيق كارت تم تطبيقه بالخطأ على الحاوية الداخلية.
     */
    #post-data.cards-grid > .blogs-grid,
    #post-data.cards-grid > .d-lg-flex,
    #post-data.cards-grid > .blog-list-wrapper {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        transform: none !important;
    }

    /*
     * كل كارت يأخذ عموداً كاملاً داخل شبكة الصفحة.
     */
    #post-data.cards-grid > article,
    #post-data.cards-grid > .blog-card-item,
    #post-data.cards-grid > .untitled-blog-card,
    #post-data.cards-grid > .blogs-grid > article,
    #post-data.cards-grid > .blogs-grid > .blog-card-item,
    #post-data.cards-grid > .blogs-grid > .untitled-blog-card,
    #post-data.cards-grid > .d-lg-flex > div {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }

    /*
     * تعطيل كلاس w-48 القديم إن كان ما زال موجوداً في partial.
     */
    #post-data.cards-grid .w-48,
    #post-data.cards-grid .w-1000 {
        width: 100% !important;
        max-width: none !important;
    }

    /*
     * الشبكة النهائية: 3 ديسكتوب، 2 تابلت، 1 موبايل.
     */
    #post-data.cards-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 20px !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    @media (max-width: 1199px) {
        #post-data.cards-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
    }

    @media (max-width: 767px) {
        #post-data.cards-grid {
            grid-template-columns: minmax(0, 1fr) !important;
        }
    }
</style>

@section('script')
    <script>
        $('#clearBlogSearch').on('click', function () {
            $('#blogSearch').val('');
            window.location.href = "{{ route('blogs.index') }}";
        });

        function loadMore(page) {
            var url = new URL(window.location.href);
            url.searchParams.set('page', page);

            $.ajax({
                url: url.toString(),
                type: 'get',
                beforeSend: function () {
                    $('.ajax-load').show();
                }
            }).done(function (data) {
                if (data.html === '') {
                    $('.ajax-load').html('@lang('site.no_more_records')');
                    $('#load_more').hide();
                    return;
                }

                $('.ajax-load').hide();
                $('#post-data').append(data.html);

                $('.price-commas').each(function () {
                    var num = $(this).text();
                    var numParts = num.toString().split('.');
                    numParts[0] = numParts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                    $(this).html(numParts.join('.'));
                });
            }).fail(function () {
                alert('@lang('site.something_went_wrong')');
            });
        }

        var page = 1;

        $('#load_more').on('click', function (event) {
            event.preventDefault();
            page++;
            loadMore(page);
        });

        $('#sort-select').on('change', function () {
            var selectedValue = $(this).children('option:selected');

            if (selectedValue.hasClass('date')) {
                applySortFilter('date', selectedValue.val());
            }
        });
    </script>

    <a href="https://wa.me/201222126844"
       class="desktop-whatsapp"
       target="_blank"
       rel="noopener"
       aria-label="WhatsApp">
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 16 16">
            <path d="M13.601 2.326A7.854 7.854 0 0 0 8.022 0C3.61 0 .026 3.582.026 7.99c0 1.408.368 2.783 1.066 3.995L0 16l4.122-1.08a7.96 7.96 0 0 0 3.9 1.003h.003c4.411 0 7.995-3.582 7.995-7.99a7.94 7.94 0 0 0-2.419-5.607zM8.025 14.58h-.002a6.6 6.6 0 0 1-3.36-.92l-.24-.142-2.447.64.653-2.387-.156-.245a6.56 6.56 0 0 1-1.01-3.5c0-3.64 2.965-6.6 6.607-6.6a6.56 6.56 0 0 1 4.676 1.94 6.56 6.56 0 0 1 1.93 4.67c-.002 3.64-2.967 6.6-6.607 6.6zm3.615-4.933c-.197-.099-1.17-.578-1.352-.644-.181-.066-.313-.099-.445.099-.131.197-.51.644-.626.776-.115.131-.23.148-.428.05-.197-.1-.833-.307-1.587-.98-.586-.522-.981-1.167-1.096-1.364-.115-.197-.012-.304.087-.402.09-.089.197-.23.296-.346.099-.115.131-.197.197-.329.066-.131.033-.247-.017-.346-.05-.099-.445-1.074-.61-1.47-.16-.387-.323-.334-.445-.34l-.379-.007c-.131 0-.346.05-.527.247-.181.197-.692.677-.692 1.65 0 .973.709 1.913.807 2.045.099.131 1.394 2.13 3.378 2.987.472.204.84.326 1.127.417.474.151.906.13 1.247.079.38-.057 1.17-.479 1.335-.941.164-.462.164-.858.115-.94-.05-.083-.181-.132-.379-.23z"/>
        </svg>
    </a>

    <style>
        .desktop-whatsapp {
            position: fixed;
            right: 25px;
            bottom: 25px;
            z-index: 999999;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: #25D366;
            color: #fff;
            text-decoration: none;
            box-shadow: 0 4px 15px rgba(0,0,0,.25);
            transition: transform .2s;
        }

        .desktop-whatsapp:hover { color: #fff; transform: scale(1.05); }

        @media (max-width: 991px) {
            .desktop-whatsapp { display: none; }
        }
    </style>
@endsection