@extends('front.layouts.master-auth')
@section('css')
<style>
    .blog-single-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .blog-single-header .head-btns {
        flex-shrink: 0;
        white-space: nowrap;
    }
    .blog-single-header .head-btn {
        white-space: nowrap;
    }
    @media (max-width: 767px) {
        .blog-single-header {
            flex-wrap: wrap;
            gap: 10px;
        }
        .blog-single-header .page-title-cont {
            width: 100%;
        }
        .blog-single-header .pt-4 {
            width: 100%;
            padding-top: 0 !important;
        }
        .blog-single-header .head-btns {
            width: 100%;
            margin-bottom: 10px;
        }
    }
    .projectDetails-cont .projectDetails-header .projectDetails-title{
        font-size: 25px;
    }
    @media (max-width: 991px) {
    .projectDetails-cont .projectDetails-header {  
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: unset;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: flex-start;
        text-align: center;
        /* padding: 20px 30px; */
    }
}

/* Responsive videos and iframes inside blog content */
.project-desc iframe,
.project-desc video,
.project-desc embed,
.project-desc object {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    display: block;
}

.project-desc .video-wrapper,
.project-desc figure.media {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.project-desc .video-wrapper iframe,
.project-desc .video-wrapper video,
.project-desc figure.media iframe,
.project-desc figure.media video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset;
}

.project-desc img {
    max-width: 100%;
    height: auto;
}
</style>
@endsection
@section('content')

    <!-- Start Page Content -->
    <section class="page-content blog-details">
        <div class="container">
            <div class="blog-single-header">
            <div class="page-title-cont">
                @if(isset($breadcrumbs) && is_array($breadcrumbs) && count($breadcrumbs) > 0)
                    <x-breadcrumb :items="$breadcrumbs" />
                @endif
                
                <div class="d-flex flex-column gap-2">
                    <h1 class="page-title mb-0">
                        {{ $blog->title }}
                    </h1>
                    <div class="sec-info mt-2" style="display: flex; gap: 20px; align-items: center; flex-wrap: wrap;">
                        <div class="sec-info-item" style="display: flex; align-items: center; gap: 8px;">
                            <div class="item-icon">
                                <svg id="paper" xmlns="http://www.w3.org/2000/svg" width="11"
                                        height="12" viewBox="0 0 15.433 16.836">
                                    <path id="Path_29" data-name="Path 29"
                                            d="M16.171,18.03H7.754A1.756,1.756,0,0,1,6,16.276V5.754A1.756,1.756,0,0,1,7.754,4h8.418a1.756,1.756,0,0,1,1.754,1.754V16.276A1.756,1.756,0,0,1,16.171,18.03ZM7.754,4.7A1.054,1.054,0,0,0,6.7,5.754V16.276a1.054,1.054,0,0,0,1.052,1.052h8.418a1.054,1.054,0,0,0,1.052-1.052V5.754A1.054,1.054,0,0,0,16.171,4.7Z"
                                            transform="translate(-2.493 -1.194)" fill="rgba(26,26,46,0.5)" />
                                    <path id="Path_30" data-name="Path 30"
                                            d="M3.455,14.731h-.7A1.756,1.756,0,0,1,1,12.977V1.754A1.756,1.756,0,0,1,2.754,0h8.418a1.756,1.756,0,0,1,1.754,1.754.351.351,0,1,1-.7,0A1.054,1.054,0,0,0,11.171.7H2.754A1.054,1.054,0,0,0,1.7,1.754V12.977A1.054,1.054,0,0,0,2.754,14.03h.7a.351.351,0,1,1,0,.7Z"
                                            transform="translate(-1)" fill="rgba(26,26,46,0.5)" />
                                    <path id="Path_31" data-name="Path 31"
                                            d="M15.963,16.7H10.351a.351.351,0,1,1,0-.7h5.612a.351.351,0,0,1,0,.7Z"
                                            transform="translate(-3.687 -4.776)" fill="rgba(26,26,46,0.5)" />
                                    <path id="Path_32" data-name="Path 32"
                                            d="M15.963,20.7H10.351a.351.351,0,0,1,0-.7h5.612a.351.351,0,0,1,0,.7Z"
                                            transform="translate(-3.687 -5.97)" fill="rgba(26,26,46,0.5)" />
                                    <path id="Path_33" data-name="Path 33"
                                            d="M15.963,12.7H10.351a.351.351,0,1,1,0-.7h5.612a.351.351,0,0,1,0,.7Z"
                                            transform="translate(-3.687 -3.582)" fill="rgba(26,26,46,0.5)" />
                                    <path id="Path_34" data-name="Path 34"
                                            d="M15.963,8.7H10.351a.351.351,0,1,1,0-.7h5.612a.351.351,0,0,1,0,.7Z"
                                            transform="translate(-3.687 -2.388)" fill="rgba(26,26,46,0.5)" />
                                </svg>
                            </div>
                            <div class="item-text">
                                {{localized_friendly_time($blog->created_at)}}
                            </div>
                        </div>
                        <div class="sec-info-item" style="display: flex; align-items: center; gap: 8px;">
                            <div class="item-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(26,26,46,0.5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                    <circle cx="12" cy="12" r="3"></circle>
                                </svg>
                            </div>
                            <div class="item-text">
                                {{ $blog->views_count ?? 0 }} @lang('views')
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pt-4">
                <div class="head-btns">
                    <a href="{{ route('user.project.create') }}?utm_source=blog&utm_medium=cta&utm_campaign=start_project&utm_content={{ $blog->slug ?? $blog->uuid }}" class="head-btn head-btn-primary">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" style="vertical-align: middle; margin-left: 5px;">
                            <line x1="12" y1="5" x2="12" y2="19"/>
                            <line x1="5" y1="12" x2="19" y2="12"/>
                        </svg>
                        ابدأ مشروعك
                    </a>
                    <a href="javascript:void(0);" onclick="shareUrl('{{ route('blog.detail', $blog->slug) }}', '@lang('Share Article')')" class="head-btn head-btn-share" title="@lang('Share Article')">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 30 33">
                            <g id="Icon_feather-share-2" data-name="Icon feather-share-2"
                               transform="translate(1.5 1.5)">
                                <path id="Path_16425" data-name="Path 16425"
                                      d="M31.5 7.5A4.5 4.5 0 1 1 27 3a4.5 4.5 0 0 1 4.5 4.5z"
                                      transform="translate(-4.5 -3)" />
                                <path id="Path_16426" data-name="Path 16426"
                                      d="M13.5 18A4.5 4.5 0 1 1 9 13.5a4.5 4.5 0 0 1 4.5 4.5z"
                                      transform="translate(-4.5 -3)" />
                                <path id="Path_16427" data-name="Path 16427"
                                      d="M31.5 28.5A4.5 4.5 0 1 1 27 24a4.5 4.5 0 0 1 4.5 4.5z"
                                      transform="translate(-4.5 -3)" />
                                <path id="Path_16428" data-name="Path 16428"
                                      d="m12.885 20.265 10.245 5.97" transform="translate(-4.5 -3)" />
                                <path id="Path_16429" data-name="Path 16429" d="m23.115 9.765-10.23 5.97"
                                      transform="translate(-4.5 -3)" />
                            </g>
                        </svg>
                    </a>
                </div>
            </div>
            </div>

            <div class="projectDetails-cont">
                <div class="projectDetails-body">
                    <div class="projectDetails-body-section">
                        @if($blog->image)
                        <div class="blog-image mb-4">
                            <img src="{{$blog->image}}" alt="{{$blog->title}}" class="img-fluid" decoding="async" style="width: 100%; max-height: 500px; object-fit: cover;" width="800" height="400">
                        </div>
                        @endif
                        <div class="project-desc">
                            {!! $blog->content !!}
                        </div>
                    </div>
                </div>
            </div>

            {{-- Author Info --}}
            @include('front.blog._author_info')

            @if(count($recent_blogs) > 0)
            <div class="addOffer-page-title mt-4">
                <h2 class="addOffer-name">
                    @lang('Related Blogs')
                </h2>
            </div>

            <div class="projectoffers-cont">
                <div class="blog-grid">
                @foreach($recent_blogs as $blog)
                    @include('front.blog._blog_card', ['blog' => $blog])
                @endforeach
                </div>
            </div>
            @endif
        </div>
    </section>
    <!-- End Page Content -->

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var desc = document.querySelector('.project-desc');
        if (!desc) return;

        desc.querySelectorAll('iframe, video, embed').forEach(function (el) {
            el.removeAttribute('width');
            el.removeAttribute('height');
            el.style.width  = '100%';
            el.style.height = 'auto';

            if (!el.closest('.video-wrapper') && !el.closest('figure.media')) {
                var wrapper = document.createElement('div');
                wrapper.className = 'video-wrapper';
                el.parentNode.insertBefore(wrapper, el);
                wrapper.appendChild(el);
            }
        });
    });
</script>

{{-- Schema Markup --}}
@if(isset($schemas) && !empty($schemas))
    @foreach($schemas as $schema)
        <script type="application/ld+json">
{!! json_encode($schema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) !!}
        </script>
    @endforeach
@endif

@endsection