@extends('frontend.da.layouts.master')

@section('content')

<!-- عنوان صفحه و نوار مسیر -->
<div data-aos="fade" class="page-title mt-5">

    <div class="heading py-5 bg-light" style="margin-top: 80px;">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10">

                    <!-- عنوان صفحه -->
                    <h1 class="display-4 fw-bold mb-4 text-center">
                        {!! $page->name_da !!}
                    </h1>

                    <!-- بخش تصویر -->
                    <div class="d-flex justify-content-center w-100">
                        <div class="rounded overflow-hidden shadow-sm mb-4 mx-auto w-fit">
                            @if ($page->menu_image)
                                <img src="{{ asset($page->menu_image) }}" alt="تصویر صفحه" class="w-100 mx-auto">
                            @endif
                        </div>
                    </div>

                    <!-- بخش توضیحات -->
                    <p class="text-secondary">
                        @if ($page->description_da)
                            {!! $page->description_da !!}
                        @endif
                    </p>
                </div>
            </div>
        </div>
    </div>

    <nav class="breadcrumbs mt-4">
        <div class="container">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ url('/da') }}" class="text-danger">صفحه اصلی</a> |
                    {!! $page->name_da !!}
                </li>
            </ol>
        </div>
    </nav>
</div><!-- پایان عنوان صفحه -->

<!-- بخش بلاگ -->
<section id="blog" class="blog">
    <div class="container" data-aos="fade-up" data-aos-delay="100">
        <div class="row gy-4 posts-list">
            @forelse ($page->contents as $content)
                <div class="col-xl-4 col-lg-6 col-md-6">
                    <a href="{{ url('/da/content', $content->id) }}" class="card-link text-decoration-none">
                        <article class="card shadow-sm h-100">
                            <div class="post-img">
                                @if ($content->image)
                                    <img src="{{ asset($content->image) }}" alt="{{ $content->title_da }}"
                                        class="card-img-top img-fluid">
                                @else
                                    <div class="card-img-top bg-light d-flex justify-content-center align-items-center"
                                        style="height: 200px;">
                                        <span class="text-muted">تصویر موجود نیست</span>
                                    </div>
                                @endif
                            </div>
                            <div class="card-body">
                                <h2 class="card-title text-dark fs-5">{{ $content->title_da }}</h2>
                            </div>
                        </article>
                    </a>
                </div><!-- پایان آیتم فهرست -->
            @empty
                <p class="text-center text-muted">هیچ مطلبی در حال حاضر موجود نیست.</p>
            @endforelse
        </div><!-- پایان لیست پست‌ها -->

        <!-- صفحه‌بندی -->
        @if ($contents->hasPages())
            <div class="pagination d-flex justify-content-center">
                <ul>
                    <!-- صفحه قبلی -->
                    @if ($contents->onFirstPage())
                        <li class="disabled"><a href="#">&laquo;</a></li>
                    @else
                        <li><a href="{{ $contents->previousPageUrl() }}">&laquo;</a></li>
                    @endif

                    <!-- صفحات -->
                    @foreach ($contents->getUrlRange(1, $contents->lastPage()) as $page => $url)
                        @if ($page == $contents->currentPage())
                            <li class="active"><a href="#">{{ $page }}</a></li>
                        @else
                            <li><a href="{{ $url }}">{{ $page }}</a></li>
                        @endif
                    @endforeach

                    <!-- صفحه بعدی -->
                    @if ($contents->hasMorePages())
                        <li><a href="{{ $contents->nextPageUrl() }}">&raquo;</a></li>
                    @else
                        <li class="disabled"><a href="#">&raquo;</a></li>
                    @endif
                </ul>
            </div>
        @endif
    </div>
</section><!-- پایان بخش بلاگ -->

@endsection