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

@section('content')
    <main id="main">
        <!-- Blog Details Page Title & Breadcrumbs -->
        <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_pa !!}</h1>
                            <!-- <p class="mb-0">{!! $content->description_pa !!}</p> -->
                        </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_pa !!}</li>
                    </ol>
                </div>
            </nav>
        </div><!-- End Page Title -->

        <!-- Blog-details Section -->
        <section id="blog-details" class="blog-details">
            <div class="container" data-aos="fade-up" data-aos-delay="100">
                <div class="row g-5">

                    <!-- Blog Content -->
                    <div class="col-md-8 col-lg-8">
                        <article class="article">

                            <!-- Main Content Title -->
                            <h2 class="title mb-4 ">{!! $content->title_pa !!}</h2>

                            <!-- Main Content Image -->
                            @if ($content->image)
                                <div class="post-img mb-4 mt-2">
                                    <img src="{{ asset($content->image) }}" alt="{{ $content->title_pa }}"
                                        class=" shadow-sm w-100" style="max-height: 400px; object-fit: cover;">
                                </div>
                            @endif
                            <!-- Main Content Description -->
                            <div class="content mb-5 mt-0">
                                <p>{!! $content->description_pa !!}</p>
                            </div>


                            <!-- Iterate Over Child Contents -->
                            <div class="child-contents">
                                @forelse ($content->child_contents as $childContent)
                                    <div class="child-content mb-4">

                                        @if ($childContent->type === 'text')
                                            <!-- Text Content -->
                                            <div class="child-text mb-3">
                                                <p>{!! $childContent->description_pa !!}</p>
                                            </div>
                                        @elseif($childContent->type === 'image' && $childContent->image)
                                            <!-- Image Content -->
                                            <div class="child-image mb-3">
                                                <img src="{{ asset($childContent->image) }}"
                                                    alt="{{ $childContent->title_pa }}" class="rounded shadow-sm w-100"
                                                    style="max-height: 400px; object-fit: cover;">
                                            </div>
                                        @elseif($childContent->type === 'link' && $childContent->youtube_video_link)
                                            <!-- YouTube Embed -->
                                            <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_pa }}" frameborder="0"
                                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                                        allowfullscreen>
                                                    </iframe>
                                                </div>
                                            </div>
                                        @endif

                                    </div>
                                @empty
                                @endforelse
                            </div>
                        </article>
                    </div><!-- End Blog Content -->


                    <!-- Sidebar Content -->
                    <div class="col-md-4 col-lg-4">
                        <h3 class="sidebar-title mb-3">بل {!! $content->menu->name_pa !!}</h3>
                        <div class="sidebar-item recent-posts">
                            @foreach ($other_contents as $other_content)
                                <a href="{{ url('/pa/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 }}"
                                                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_pa !!}
                                            </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_pa, 100) !!}
                                            </p>
                                            <time datetime="{{ $other_content->created_at->toDateString() }}"
                                                style="font-size: 12px; color: #999;">
                                                {{ $other_content->created_at->format('M d, Y') }}
                                            </time>
                                        </div>
                                    </div><!-- End post item -->
                                </a>
                            @endforeach
                        </div><!-- End sidebar recent posts -->

                        <hr />

                        <!-- Social Sharing Section -->
                        <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) }}"
                                    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) }}"
                                    target="_blank" class="share-social-icon share-linkedin">
                                    <i class="bi bi-linkedin"></i>
                                </a>
                            </div>
                        </div><!-- End Social Sharing -->
                    </div><!-- End Sidebar Content -->

                </div><!-- End Row -->
            </div><!-- End Container -->
        </section><!-- End Blog-details Section -->
    </main>

    <style>
        /* Make the iframe responsive */
        .child-video-youtube .embed-container {
            position: relative;
            width: 100%;
            padding-top: 56.25%;
            /* This gives a 16:9 aspect ratio (9 / 16 = 0.5625, hence 56.25%) */
            height: 0;
            overflow: hidden;
        }

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