@extends('web_site.layouts.master')

@section('meta')
    @php
        $shareTitle = strip_tags(
            $one_data->title ?? config('app.name')
        );

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

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

        // الصورة الافتراضية
        $shareImage = asset('assets_web/img/newbaner/casestudies.webp');

        // الصورة الرئيسية للـ Case Study
        if (!empty($one_data->image_path)) {
            $shareImage = $one_data->image_path;
        } elseif (!empty($one_data->images)) {
            // متوافق سواء images Array أو Collection
            $firstImage = collect($one_data->images)->first();

            if ($firstImage && !empty($firstImage->image_path)) {
                $shareImage = $firstImage->image_path;
            }
        }

        // تحويل الصورة إلى رابط كامل
        if (
            !\Illuminate\Support\Str::startsWith(
                $shareImage,
                ['http://', 'https://']
            )
        ) {
            $shareImage = asset(ltrim($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/casestudies.webp')}})" loading="lazy" alt="breadcrumb img"></div>
        <div class="container">
            <div class="page-header__inner">
                <h2>{{trans('web_site.Case_Studies')}}</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.Case_Studies_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 (isset($one_data->images) && (!empty($one_data->images)))
                            <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
                                <div class="carousel-indicators">
                                    <button type="button"
                                            data-bs-target="#carouselExampleIndicators"
                                            data-bs-slide-to="0"
                                            class="active"
                                            aria-current="true"
                                            aria-label="Slide 0">
                                    </button>
                                    @foreach ($one_data->images 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">
                                                                            <div class="carousel-item active">
                                        <div class="blog-details__img servimgdetails"
                                             style="background-image:url({{$img_url2}})" alt="blog img"></div>
                                    </div>

                                    @foreach ($one_data->images as $key => $img)
                                                                                <div class="carousel-item ">
                                            <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>
                                @endif
                            </div>

                            <!-------------------------------------------------------------------------------------------->
                            <div class="blog-details__content">

                                <h3 class="blog-details__title-1">{{$one_data->title}}</h3>
                                <div class="blog-details__text-1"> {!! $one_data->details !!}</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>
                                    <a href="javascript:whatsappShare()"><span class="fab fa-whatsapp"></span></a>
                                </div -->
                                <div class="blog-details__social">

    <a href="javascript:void(0)"
       onclick="facebookShare()"
       aria-label="Share on Facebook"
       title="Facebook">
        <span class="fab fa-facebook-f"></span>
    </a>

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

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

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

   <!-- <a href="javascript:void(0)"
       onclick="nativeShare()"
       aria-label="Share"
       title="Share">
        <span class="fas fa-share-alt"></span>
    </a> -->

</div>
                            </div>
                            <!------------------------------------------------------------------------------------------------->
                            <!---------------------- PDF section --------------------------->

                    </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_case_Studies',$blog->id)}}">{{ $blog->title }}</a>
                                                    </h3>
                                                </div>
                                            </li>
                                        @endforeach

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

                    @endif
                        @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>
    </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');

                    const fileFrame = document.getElementById('fileFrame');

                    if (fileFrame && fileUrl) {
                        fileFrame.setAttribute('src', fileUrl);
                    }
                });

            });

        });

        function openShareWindow(url, width = 650, height = 550) {

            const left = Math.max(
                0,
                (window.screen.width - width) / 2
            );

            const top = Math.max(
                0,
                (window.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)
            );

            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);

            const message = encodeURIComponent(
                `${title}\n${pageUrl}`
            );

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

        async function nativeShare() {

            const shareData = {
                title: @json($shareTitle),
                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