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

@section('content')
<main id="main">
    <!-- عنوان صفحه و نوار مسیر -->
    <div data-aos="fade" class="page-title">
        <div class="heading">
            <div class="container">
                <div class="row d-flex justify-content-center text-center">
                    <div class="col-lg-8 py-4 mt-4 pb-0 mb-0">
                        <h1>{!! $content->title_da !!}</h1>
                    </div>
                </div>
            </div>
        </div>
        <nav class="breadcrumbs">
            <div class="container">
                <ol>
                    <li><a href="{{ route('home') }}" class="text-danger">صفحه اصلی</a></li>
                    <li class="current">{!! $content->title_da !!}</li>
                </ol>
            </div>
        </nav>
    </div><!-- پایان عنوان صفحه -->

    <!-- بخش جزئیات بلاگ -->
    <section id="blog-details" class="blog-details">
        <div class="container" data-aos="fade-up" data-aos-delay="100">
            <div class="row g-5">

                <!-- محتوای اصلی -->
                <div class="col-md-8 col-lg-8">
                    <article class="article">

                        <!-- عنوان اصلی -->
                        <h2 class="title mb-4">{!! $content->title_da !!}</h2>

                        <!-- تصویر اصلی -->
                        @if ($content->image)
                            <div class="post-img mb-4 mt-2">
                                <img src="{{ asset($content->image) }}" alt="{{ $content->title_da }}"
                                    class="shadow-sm w-100" style="max-height: 400px; object-fit: cover;">
                            </div>
                        @endif

                        <!-- توضیحات -->
                        <div class="content mb-5 mt-0">
                            <p>{!! $content->description_da !!}</p>
                        </div>

                        <!-- محتوای فرعی -->
                        <div class="child-contents">
                            @forelse ($content->child_contents as $childContent)
                                <div class="child-content mb-4">
                                    @if ($childContent->type === 'text')
                                        <div class="child-text mb-3">
                                            <p>{!! $childContent->description_da !!}</p>
                                        </div>
                                    @elseif($childContent->type === 'image' && $childContent->image)
                                        <div class="child-image mb-3">
                                            <img src="{{ asset($childContent->image) }}"
                                                alt="{{ $childContent->title_da }}"
                                                class="rounded shadow-sm w-100"
                                                style="max-height: 400px; object-fit: cover;">
                                        </div>
                                    @elseif($childContent->type === 'link' && $childContent->youtube_video_link)
                                        <div class="child-video-youtube mb-4">
                                            <div class="embed-container">
                                                <iframe
                                                    src="https://www.youtube.com/embed/{{ $childContent->youtube_video_link }}"
                                                    title="{{ $childContent->title_da }}" frameborder="0"
                                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                                    allowfullscreen>
                                                </iframe>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            @empty
                            @endforelse
                        </div>
                    </article>
                </div><!-- پایان محتوای اصلی -->

                <!-- سایدبار -->
                <div class="col-md-4 col-lg-4">
                    <h3 class="sidebar-title mb-3">مطالب دیگر از «{!! $content->menu->name_da !!}»</h3>
                    <div class="sidebar-item recent-posts">
                        @foreach ($other_contents as $other_content)
                            <a href="{{ url('/da/content', $other_content->id) }}"
                                class="text-decoration-none text-reset">
                                <div class="post-item d-flex align-items-center mb-4" style="gap: 20px;">
                                    @if ($other_content->image)
                                        <img src="{{ asset($other_content->image) }}" alt="{{ $other_content->title_da }}"
                                            class="post-item-img rounded shadow-sm img-fluid"
                                            style="width: 100px; height: 100px; object-fit: cover;">
                                    @endif
                                    <div class="post-item-text" style="flex-grow: 1;">
                                        <h4 style="font-size: 16px; margin-bottom: 5px;">
                                            {!! $other_content->title_da !!}
                                        </h4>
                                        <p class="text-muted mb-2"
                                            style="font-size: 14px; line-height: 1.5; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
                                            {!! Str::limit($other_content->description_da, 100) !!}
                                        </p>
                                        <time datetime="{{ $other_content->created_at->toDateString() }}"
                                            style="font-size: 12px; color: #999;">
                                            {{ $other_content->created_at->format('Y-m-d') }}
                                        </time>
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    </div><!-- پایان پست‌های اخیر -->

                    <hr />

                    <!-- بخش اشتراک‌گذاری -->
                    <div class="share-card-container mt-4">
                        <h4>این مطلب را به اشتراک بگذارید</h4>
                        <p>این محتوای جالب را با دوستان خود در شبکه‌های اجتماعی شریک سازید</p>
                        <div class="share-social-links">
                            <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}"
                                target="_blank" class="share-social-icon share-facebook">
                                <i class="bi bi-facebook"></i>
                            </a>
                            <a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($content->title_da) }}"
                                target="_blank" class="share-social-icon share-twitter">
                                <i class="bi bi-twitter"></i>
                            </a>
                            <a href="https://www.instagram.com/" target="_blank"
                                class="share-social-icon share-instagram">
                                <i class="bi bi-instagram"></i>
                            </a>
                            <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ urlencode(url()->current()) }}&title={{ urlencode($content->title_da) }}"
                                target="_blank" class="share-social-icon share-linkedin">
                                <i class="bi bi-linkedin"></i>
                            </a>
                        </div>
                    </div><!-- پایان اشتراک‌گذاری -->
                </div><!-- پایان سایدبار -->

            </div><!-- پایان ردیف -->
        </div><!-- پایان کانتینر -->
    </section><!-- پایان بخش جزئیات بلاگ -->
</main>

<style>
    .child-video-youtube .embed-container {
        position: relative;
        width: 100%;
        padding-top: 56.25%;
        height: 0;
        overflow: hidden;
    }

    .child-video-youtube iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>
@endsection