@section('page-title', $detail->title)
@section('page-description', $detail->description)
@section('page-image', asset($detail->image ?? 'site/img/default.png'))

@extends('site.master')
@section('main-content')

    <section class="af-hdr ">
        <div class="header-decoration position-absolute">
            <img src="{{ asset('site/img/shape_nate.svg') }}" alt="">
        </div>
        <div class="container position-relative" style="z-index: 9">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class=" text-uppercase text-white fnt-fam-ser fs-2 fwc-700">




                        {{ isset($detail->title) ? $detail->title : '' }}</h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="list-inline-item"><a class="text-white" href="{{ URL::to('/') }}"
                                    class="text-decoration-none">@lang('language.home')</a>
                            </li>

                            <li class="list-inline-item current text-danger">
                                {{ isset($detail->title) ? $detail->title : '' }} </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <div class="decoration-pattern pattern-one position-absolute">
            <img src="{{ asset('site/img/breadcrumb_shape_pattern_1.svg') }}" alt="">
        </div>
        <div class="decoration-pattern pattern-two position-absolute">
            <img src="{{ asset('site/img/breadcrumb_shape_pattern_2.svg') }}" alt="">
        </div>
    </section>

    @if ($detail->staff_type == 0)
        <div class="container ">
            <div class="row">
                @if (Request::segment(3) === 'message-from-chairperson' || Request::segment(3) === 'message-from-ceo')
                    <div class="col-lg-12">
                    @else
                        <div class="col-lg-10 offset-lg-1">
                @endif
                <div class="mt-4">

                    @if (Request::segment(3) === 'message-from-chairperson' || Request::segment(3) === 'message-from-ceo')
                        <div class="row">
                            <div class="col-lg-4 staff-s d-flex flex-column align-items-center justify-content-start">
                                @if (isset($detail->image) && !isset($detail->file))
                                    <div class="news-content-img  mb-3 p-2">
                                        <div class="mb-4 position-relative shine-animate-item">
                                            <div class="shine-animate d-flex align-items-center justify-content-center">
                                                <image src="{{ asset($detail->image) }}"
                                                    class="{{ session('lowbandwidth') == 'low' ? 'd-none' : '' }} w-50">
                                            </div>
                                        </div>

                                    </div>
                                @endif
                                <div class="text-center">
                                    @if (Request::segment(3) === 'message-from-chairperson')
                                        <h2 class="fnt-fam-ser fs-5 fwc-500 text-custom-blue-dark2">
                                            {{ session('localeSession') == 'en' ? 'Ashish Shrestha' : 'अशिष श्रेष्ठ' }}</h2>
                                    @elseif (Request::segment(3) === 'message-from-ceo')
                                        <h2 class="fnt-fam-ser fs-5 fwc-500 text-custom-blue-dark2">
                                            {{ session('localeSession') == 'en' ? 'Mrigendra Nath Rimal' : 'मृगेन्द्र नाथ रिमाल' }}
                                        </h2>
                                    @endif
                                    @if (Request::segment(3) === 'message-from-chairperson')
                                        <span
                                            class="fnt-fam-ser fs-6 fwc-400">{{ session('localeSession') == 'en' ? 'Chairperson' : 'अध्यक्ष' }}</span>
                                    @elseif (Request::segment(3) === 'message-from-ceo')
                                        <span
                                            class="fnt-fam-ser fs-6 fwc-400">{{ session('localeSession') == 'en' ? 'Chief Executive Officer (CEO)' : 'प्रमुख कार्यकारी अधिकृत (CEO)' }}</span>
                                    @endif

                                </div>
                                @if ($detail->quote)
                                    <blockquote class="blockquote">
                                        {{ $detail->quote }}
                                    </blockquote>
                                @endif

                            </div>
                            <div class="col-lg-7 details">
                                {!! $detail->description !!}
                            </div>
                        </div>
                    @else
                        <article>



                            <div id="details" class="details d-flex flex-column gap-4 border-bottom">
                                @if (isset($detail->image) && !isset($detail->file))
                                    <div class="news-content-img d-flex align-items-center justify-content-center mb-3 p-2">
                                        <image src="{{ asset($detail->image) }}"
                                            class="{{ session('lowbandwidth') == 'low' ? 'd-none' : '' }}">
                                    </div>
                                @endif

                                <div class="content-desc mb-5 px-3 details">
                                    {!! $detail->description !!}
                                </div>

                                @if (isset($detail->file))
                                    <div class="d-flex align-items-center justify-content-center mb-5 p-2">
                                        <embed type="application/pdf" src="{{ asset($detail->file) }}"
                                            class="{{ session('lowbandwidth') == 'low' ? 'd-none' : '' }}" width="900"
                                            height="700">
                                    </div>
                                @endif
                            </div>

                            <div class="row mb-3">
                                <div class="d-flex align-items-center justify-content-between pt-3">
                                    <div class="d-flex gap-3 align-items-center">
                                        <span>Share</span>
                                        <div class="d-flex gap-4">
                                            <a target="_blank"
                                                href="https://twitter.com/intent/tweet?original_referer={{ URL::current() }}&url={{ URL::current() }}&text={{ $detail->title }}"
                                                class="text-decoration-none text-dark fs-4 text-hover-danger d-flex align-items-center gap-1">
                                                <i class="bi bi-twitter"></i> <span class="fs-6">Twitter</span>
                                            </a>

                                            <a target="_blank"
                                                href="https://www.facebook.com/sharer.php?u={{ URL::current() }}"
                                                class="text-decoration-none text-dark fs-4 text-hover-primary d-flex align-items-center gap-1">
                                                <i class="bi bi-facebook" aria-hidden="true"></i> <span
                                                    class="fs-6">Facebook</span>
                                            </a>

                                            <a target="_blank"
                                                href="https://www.linkedin.com/sharing/share-offsite/?url={{ URL::current() }}"
                                                class="text-decoration-none text-dark fs-4 text-hover-info d-flex align-items-center gap-1">
                                                <i class="bi bi-linkedin" aria-hidden="true"></i> <span
                                                    class="fs-6">LinkedIn</span>
                                            </a>

                                            <a target="_blank"
                                                href="mailto:?subject={{ urlencode($detail->title) }}&body={{ URL::current() }}"
                                                class="text-decoration-none text-dark fs-4 text-hover-success d-flex align-items-center gap-1">
                                                <i class="bi bi-envelope" aria-hidden="true"></i> <span
                                                    class="fs-6">Email</span>
                                            </a>

                                            <a target="_blank"
                                                href="https://api.whatsapp.com/send?text={{ urlencode($detail->title) }}%20{{ URL::current() }}"
                                                class="text-decoration-none text-dark fs-4 text-hover-success d-flex align-items-center gap-1">
                                                <i class="bi bi-whatsapp" aria-hidden="true"></i> <span
                                                    class="fs-6">WhatsApp</span>
                                            </a>

                                            <a target="_blank"
                                                href="sms:?body={{ urlencode($detail->title) }}%20{{ URL::current() }}"
                                                class="text-decoration-none text-dark fs-4 text-hover-secondary d-flex align-items-center gap-1">
                                                <i class="bi bi-chat-left-text-fill" aria-hidden="true"></i> <span
                                                    class="fs-6">SMS</span>
                                            </a>


                                        </div>
                                    </div>
                                    <div class="d-flex gap-3 fwc-600 text-black-50 " style="font-size: 14px;">

                                        {{--
                                        <span>@lang('language.hit'):
                                            {{ session('localeSession') == 'np' ? numEnToNp($detail->viewcount) : $detail->viewcount }}

                                        </span> --}}
                                    </div>

                                </div>

                            </div>

                        </article>
                    @endif
                </div>
            </div>
        </div>
        </div>
        @if ($detail->whyuswithstats == '1')
            @include('site.partials.whyuswithstats')
        @endif
        @if ($detail->makeaappointment == '1')
            @include('site.partials.makeaappointment')
        @endif
        @if ($detail->makeaappointment == '1')
            <section class="py-5">
                <div class="my-4">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-10 offset-1">
                                @include('site.sidebar.are_satisfied')
                            </div>
                        </div>
                    </div>

                </div>
            </section>
        @endif
    @endif
    {{-- Handle the case where staff_type is not '0' --}}


    @if ($members)
        <section class="py-5 bg-light">
            <div class="container">
                {!! $members !!}
            </div>
        </section>
    @endif



    <section class="position-relative d-none">
        <div class="container">
            meetour team

        </div>
        <div class="m-slider">
            <div class="sider-item">
                <img src="{{ asset('site/img/Portraits_True_RohitS_final_bio (1).webp') }}" alt="">
            </div>
            <div class="sider-item">
                <img src="{{ asset('site/img/Priscilla-Tyler.jpg') }}" alt="">
            </div>
            <div class="sider-item">
                <img src="{{ asset('site/img/Portraits_True_RohitS_final_bio (1).webp') }}" alt="">
            </div>
            <div class="sider-item">
                <img src="{{ asset('site/img/Priscilla-Tyler.jpg') }}" alt="">
            </div>
            <div class="sider-item">
                <img src="{{ asset('site/img/Portraits_True_RohitS_final_bio (1).webp') }}" alt="">
            </div>
            <div class="sider-item">
                <img src="{{ asset('site/img/Priscilla-Tyler.jpg') }}" alt="">
            </div>
            <div class="sider-item">
                <img src="{{ asset('site/img/Portraits_True_RohitS_final_bio (1).webp') }}" alt="">
            </div>
            <div class="sider-item">
                <img src="{{ asset('site/img/Priscilla-Tyler.jpg') }}" alt="">
            </div>
        </div>
    </section>
    <div class="section-main position-fixed w-100 h-100 top-0 start-0 bg-white d-none" style="z-index: 100999;">
        <div class="close-button">
            <a href="#"><i class="bi-times"></i></a>
        </div>
        <div class="d-flex">
            <div class="col-lg-8 d-flex align-items-center justify-content-center">
                <img src="{{ asset('site/img/Portraits_True_RohitS_final_bio (1).webp') }}" alt=""
                    class="w-50">
            </div>
            <div class="col-lg-4 bg-light d-flex align-items-start justify-content-center gap-2 flex-column px-5">
                <h3 class="mb-0 fs-5 text-custom-blue-dark2">Ramesh Shrestha</h3>
                <h3 class="mb-0 fs-6 text-danger">CEO</h3>

                <div class="d-flex gap-2" title="Appoitment Date" rel="tooltip">
                    <div class="tm-team-list-title"><i class="bi-calendar-check"></i> </div>
                    <div class="tm-team-list-value">
                        2081-01-12</div>
                </div>

                <div class=" py-3 d-flex gap-4">


                    <div class="d-flex gap-2">
                        <div class="tm-team-list-title"><i class="bi bi-telephone"></i> </div>
                        <div class="tm-team-list-value">


                            <a href="">01-0123123</a>


                        </div>
                    </div>




                    {{-- {{ $staff-> }} --}}

                    <div class="d-flex gap-2">
                        <div class="tm-team-list-title"><i class="bi-envelope"></i> </div>
                        <div class="tm-team-list-value"> <a class="phone mb-0 text-dark" href="tel:test@email.com">
                                test@email.com</a></div>
                    </div>


                </div>
                <div class="fs-7">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis quis nulla praesentium laboriosam
                        sint. Saepe quam nulla debitis, aperiam nesciunt necessitatibus enim aliquam dolorem qui cumque
                        exercitationem architecto nisi expedita?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis quis nulla praesentium laboriosam
                        sint. Saepe quam nulla debitis, aperiam nesciunt necessitatibus enim aliquam dolorem qui cumque
                        exercitationem architecto nisi expedita?</p>
                </div>

            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <!-- Lightbox2 CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet" />

    <!-- Lightbox2 JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox-plus-jquery.min.js"></script>

    <script>
        $(document).ready(function() {

            // Select the table by its ID and add a class
            $('table').addClass('table table-bordered');

            // Check if screen width is less than or equal to 922px
            if ($(window).width() <= 922) {
                $('table').parent().addClass('table-responsive');
            }

            // Handle window resize events to add or remove 'table-responsive'
            $(window).resize(function() {
                if ($(window).width() <= 922) {
                    $('table').parent().addClass('table-responsive');
                } else {
                    $('table').parent().removeClass('table-responsive');
                }
            });

            var images = document.querySelectorAll('.details img');

            for (var i = 0; i < images.length; i++) {
                var img = images[i];
                var style = img.getAttribute('style');
                var imgSrc = img.getAttribute('src'); // Thumbnail or small image source

                if (style) {
                    if (style.indexOf('float: left;') !== -1) {
                        img.classList.add('image-left-align');
                    } else if (style.indexOf('float: right;') !== -1) {
                        img.classList.add('image-right-align');
                    } else if (style.indexOf('float: center;') !== -1) {
                        img.classList.add('image-center-align');
                    }
                }

                // Add Lightbox wrapper (assuming large version of image has 'large-' prefix)
                var largeImageSrc = imgSrc.replace('thumb-',
                    'large-'); // Example of changing thumbnail to large image
                var parentLink = document.createElement('a');
                parentLink.setAttribute('href', largeImageSrc);
                parentLink.setAttribute('data-lightbox', 'image-gallery');

                // Insert image into the anchor tag
                img.parentNode.insertBefore(parentLink, img);
                parentLink.appendChild(img);
            }
        });
    </script>
    <script>
        // Function to get URL parameters
        function getURLParameter(name) {
            return new URLSearchParams(window.location.search).get(name);
        }

        if (getURLParameter('message-from-ceo') || getURLParameter('message-from-chairperson')) {
            document.getElementById('details').classList.remove('flex-column');
        }
    </script>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Article",
      "headline": "{{ $detail->title }}",
      "datePublished": "{{ $detail->published_date }}",
      "dateModified": "{{ now()->toDateString() }}",
      "author": {
        "@type": "Person",
        "name": "Author Name"
      },
      "publisher": {
        "@type": "Organization",
        "name": "Nepal Micro Insurance Company Limited",
        "logo": {
          "@type": "ImageObject",
          "url": "https://www.example.com/logo.png"
        }
      },
      "image": "{{ asset($detail->image) }}",
      "description": "{{ $detail->description }}"
    }
    </script>

    <style>
        .staff-s blockquote:before {
            font-size: 80px;
            left: 14px;
        }

        .staff-s blockquote {
            padding: 16px 16px 20px 48px;
        }
    </style>
@endpush