@extends('web_site.layouts.master')
@section('meta')
    @php
        $shareTitle = strip_tags($one_data->blogTitle ?? config('app.name'));

        $shareDescription = \Illuminate\Support\Str::limit(
            trim(preg_replace('/\s+/', ' ', strip_tags($one_data->blogDetails ?? ''))),
            180
        );

        $shareUrl = url()->current();

        $shareImage = asset('assets_web/img/newbaner/blog.webp');

       if (!empty($one_data->blogImgaes) && count($one_data->blogImgaes) > 0) {

    $shareImage = $one_data->blogImgaes[0]->image;

    if (!\Illuminate\Support\Str::startsWith($shareImage, ['http://', 'https://'])) {
        $shareImage = asset($shareImage);
    }
}
    @endphp

    <title>{{ $shareTitle }}</title>

    <meta name="description" content="{{ $shareDescription }}">
    <link rel="canonical" href="{{ $shareUrl }}">

    {{-- Facebook, LinkedIn, WhatsApp --}}
    <meta property="og:type" content="article">
    <meta property="og:site_name" content="{{ config('app.name') }}">
    <meta property="og:url" content="{{ $shareUrl }}">
    <meta property="og:title" content="{{ $shareTitle }}">
    <meta property="og:description" content="{{ $shareDescription }}">
    <meta property="og:image" content="{{ $shareImage }}">
    <meta property="og:image:secure_url" content="{{ $shareImage }}">
    <meta property="og:image:alt" content="{{ $shareTitle }}">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">

    {{-- X / Twitter --}}
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ $shareTitle }}">
    <meta name="twitter:description" content="{{ $shareDescription }}">
    <meta name="twitter:image" content="{{ $shareImage }}">
@endsection
@section('content')
    <!-- ============================ Page Title Start================================== -->
    <section class="page-header">
        <div class="page-header__bg" style="background-image: url({{asset('assets_web/img/newbaner/blog.webp')}})"></div>
        <div class="container">
            <div class="page-header__inner">
                <h2>{{trans('web_site.Blogs')}}</h2>
                <div class="thm-breadcrumb__box">
                    <ul class="thm-breadcrumb list-unstyled">
                        <li><a href="{{route('home')}}">{{trans('web_site.Home')}}</a></li>
                        <li><span>-</span></li>
                        <li>{{trans('web_site.Blog_Details')}}</li>
                    </ul>
                </div>
            </div>
        </div>
       
    </section>
    <!---------------------------------------------------------------------------------------->
    <section class="blog-details wow fadeInUp" data-wow-delay="400ms">
        <div class="container">
            <div class="row">
                <div class="col-xl-8 col-lg-7">
                    <div class="blog-details__left">
                        @if($one_data->blogImgaes)

                        <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
                                <div class="carousel-indicators">
                                    @foreach ($one_data->blogImgaes as $key => $img)
                                                                                <button type="button"
                                                data-bs-target="#carouselExampleIndicators"
                                                data-bs-slide-to="{{ $key }}"
                                                class="{{ $key == 0 ? 'active' : '' }}"
                                                @if($key == 0) aria-current="true" @endif
                                                aria-label="Slide {{ $key }}">
                                        </button>
                                    @endforeach
                                </div>

                                <div class="carousel-inner">
                                    @foreach ($one_data->blogImgaes as $key => $img)
                                                                                <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                                            <div class="blog-details__img servimgdetails"
                                                 style="background-image:url({{$img_url}})" alt="blog img"></div>
                                        </div>
                                    @endforeach
                                </div>
                                <button class="carousel-control-prev" type="button"
                                        data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">{{trans('website.Previous')}}</span>
                                </button>
                                <button class="carousel-control-next" type="button"
                                        data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">{{trans('website.Next')}}</span>
                                </button>

                            </div>
                        @endif
                            <!-------------------------------------------------------------------------------------------->
                            <div class="blog-details__content">
                                <ul class="blog-details__meta list-unstyled">
                                    <li><i class="fa fa-user"></i> {{$one_data->blogPublisher}}</li>
                                    <li><i class="fas fa-calendar-alt"></i>{{$one_data->blogDate}}</li>
                                </ul>
                                <h3 class="blog-details__title-1">{{$one_data->blogTitle}}</h3>
                                <div class="blog-details__text-1"> {!! $one_data->blogDetails !!}</div>

                            </div>
                            <div class="blog-details__tag-and-share">
                                <div class="blog-details__tag">
                                    share post
                                </div>
                              <!--  <div class="blog-details__social">
                                    <a href="javascript:fbShare()"><span class="fab fa-facebook-f"></span></a>
                                    <a href="javascript:twitterShare()"><span class="fab fa-twitter"></span></a>
                                    <a href="javascript:linkedinShare()"><span class="fab fa-linkedin"></span></a>
                                 </div>-->
                                 <div class="blog-details__social">
    <a href="javascript:void(0)"
       onclick="facebookShare()"
       aria-label="Share on Facebook">
        <span class="fab fa-facebook-f"></span>
    </a>

    <a href="javascript:void(0)"
       onclick="twitterShare()"
       aria-label="Share on X">
        <span class="fab fa-twitter"></span>
    </a>

    <a href="javascript:void(0)"
       onclick="linkedinShare()"
       aria-label="Share on LinkedIn">
        <span class="fab fa-linkedin"></span>
    </a>

    <a href="javascript:void(0)"
       onclick="whatsappShare()"
       aria-label="Share on WhatsApp">
        <span class="fab fa-whatsapp"></span>
    </a>

  <!--  <a href="javascript:void(0)"
       onclick="nativeShare()"
       aria-label="Share">
        <span class="fas fa-share-alt"></span>
    </a> -->
</div>
                                 
                            </div>
                            <!------------------------------------------------------------------------------------------------->
                            <!---------------------- PDF section --------------------------->
                            @if($one_data->files)

                                <section class="attached-files">
                                    <h3>📎 {{trans('web_site.Attached_Files')}}</h3>
                                    <ul class="files-list">
                                        @foreach($one_data->files as $file)
                                            <li>
                                                <a href="!#" class="open-file" data-file="{{ $file->file_url }}"
                                                   data-bs-toggle="modal" data-bs-target="#exampleModal">
                                                    <span class="file-icon">📄</span>
                                                    <span class="file-name">{{$file->file_name}}</span>
                                                </a>
                                                <a href="!#"
                                                   data-file="{{ $file->file_url }}" data-bs-toggle="modal"
                                                   data-bs-target="#exampleModal"
                                                   class="open-file download-btn">{{ trans('web_site.view_file') }}</a>
                                            </li>
                                        @endforeach

                                    </ul>
                                </section>
                                <!--------------------------------------------------------------------------------------------------->


                            @endif
                    </div>
                </div>
                <div class="col-xl-4 col-lg-5">

                    @if(isset($recent_blogs) && $recent_blogs->count() > 0)
                        @if(isset($recent_blogs) && $recent_blogs->count() > 0)
                            <div class="sidebar">
                                <div class="sidebar__single sidebar__post">
                                    <h3 class="sidebar__title">{{ trans('web_site.recent_post') }}</h3>
                                    <ul class="sidebar__post-list list-unstyled">

                                        @foreach($recent_blogs as $blog)
                                                                                        {{--     @php
                                                    // لينك التفاصيل: slug أولاً لو موجود، وإلا id، وإلا بلا رابط
                                                    $detailsUrl = isset($blog->slug)
                                                        ? route('one_blog', $blog->slug)
                                                        : (isset($blog->id) ? route('one_blog', $blog->id) : 'javascript:void(0)');
                                                @endphp --}}

                                            <li>
                                                <div class="sidebar__post-image">
                                                    <img src="{{ $img_url }}" alt="blog img">
                                                </div>
                                                <div class="sidebar__post-content">
                                                    <h3>
                                                        <a href="{{route('one_blog',$blog->id)}}">{{ $blog->title }}</a>
                                                    </h3>
                                                    <span class="sidebar__post-content-date">{{ $blog->date_at }}</span>
                                                </div>
                                            </li>
                                        @endforeach

                                    </ul>
                                </div>
                            </div>
                        @endif

                    @endif

                </div>

                <!-------------------------------------------------------------------------------------------------->

            </div>
        </div>
    </section>
    <!------------------------------------------------------------------------------------------------>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1"
         aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body" style="padding: 0rem;">
                    <iframe id="fileFrame" src="" width="100%"
                            height="600px"></iframe>

                </div>

            </div>
        </div>
    </div>



@endsection
@section('js_old')

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.open-file').forEach(function (link) {
                link.addEventListener('click', function () {
                    let fileUrl = this.getAttribute('data-file');
                    document.getElementById('fileFrame').setAttribute('src', fileUrl);
                });
            });
        });
    </script>


@endsection

@section('js')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.open-file').forEach(function (link) {
                link.addEventListener('click', function (event) {
                    event.preventDefault();

                    const fileUrl = this.getAttribute('data-file');

                    document
                        .getElementById('fileFrame')
                        .setAttribute('src', fileUrl);
                });
            });
        });

        function openShareWindow(url, width = 650, height = 550) {
            const left = Math.max(0, (screen.width - width) / 2);
            const top = Math.max(0, (screen.height - height) / 2);

            window.open(
                url,
                'shareWindow',
                `width=${width},height=${height},top=${top},left=${left},` +
                'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes'
            );
        }

        function facebookShare() {
            const pageUrl = encodeURIComponent(window.location.href);

            openShareWindow(
                `https://www.facebook.com/sharer/sharer.php?u=${pageUrl}`
            );
        }

        function twitterShare() {
            const pageUrl = encodeURIComponent(window.location.href);
            const title = encodeURIComponent(@json($shareTitle ?? $one_data->blogTitle));

            openShareWindow(
                `https://twitter.com/intent/tweet?text=${title}&url=${pageUrl}`
            );
        }

        function linkedinShare() {
            const pageUrl = encodeURIComponent(window.location.href);

            openShareWindow(
                `https://www.linkedin.com/sharing/share-offsite/?url=${pageUrl}`
            );
        }

        function whatsappShare() {
            const pageUrl = window.location.href;
            const title = @json($shareTitle ?? $one_data->blogTitle);
            const message = encodeURIComponent(`${title}\n${pageUrl}`);

            window.open(
                `https://wa.me/?text=${message}`,
                '_blank',
                'noopener,noreferrer'
            );
        }

        async function nativeShare() {
            const shareData = {
                title: @json($shareTitle ?? $one_data->blogTitle),
                text: @json($shareDescription ?? ''),
                url: window.location.href
            };

            if (navigator.share) {
                try {
                    await navigator.share(shareData);
                } catch (error) {
                    if (error.name !== 'AbortError') {
                        console.error('Share failed:', error);
                    }
                }

                return;
            }

            try {
                await navigator.clipboard.writeText(window.location.href);
                alert('تم نسخ رابط المقال');
            } catch (error) {
                console.error('Copy failed:', error);
            }
        }
    </script>
@endsection