@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($staff->title) ? $staff->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">Home</a>
                            </li>

                            <li class="list-inline-item current text-danger">
                                {{ isset($staff->title) ? $staff->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>
    <div class="d-flex">
        <div class="col-lg-6 d-flex align-items-start justify-content-center py-5">
            <img src=" @if ($staff->image == '') {{ asset('images/app/stafflogo.png') }}  @else {{ asset($staff->image) }} @endif"
                alt="" class="w-50">
        </div>
        <div class="col-lg-6 bg-light d-flex align-items-start justify-content-start py-5 gap-2 flex-column px-5"
            style="min-height: 700px;">
            <h3 class="mb-0 fs-5 text-custom-blue-dark2 fwc-600">{{ $staff->title }}</h3>
            <h3 class="mb-0 fs-6 text-danger"> {{ $staff->designations->pluck('title')->implode(', ') }}</h3>
            <h3 class="mb-0 fs-6 text-custom-blue-dark2">
                {{ $staff->provinces->isNotEmpty() ? $staff->provinces->implode(', ') : 'No provinces available' }}
            </h3>

            @if ($staff->appointment_date && $staff->showappointment)
            <div class="d-flex gap-2 mb-3" title="Appointment Date" rel="tooltip">
                <div class="tm-team-list-title">
                    <i class="bi-calendar-check"></i>
                </div>
                <div class="tm-team-list-value">
                    {{ getNepaliDate($staff->appointment_date) }}
                </div>
            </div>
        @endif
            <div class=" py-3 d-flex gap-4">

                @if ($staff->phone_no)
                    <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">


                            @php
                                $phoneNumbers = explode(',', $staff->phone_no);
                            @endphp
                            @foreach ($phoneNumbers as $phoneNumber)
                                <a href="tel:{{ trim($phoneNumber) }}"
                                    class="text-dark">{{ numEnToNp(trim($phoneNumber)) }}</a>
                                @if (!$loop->last)
                                    ,
                                @endif
                            @endforeach



                        </div>
                    </div>
                @endif




                {{-- {{ $staff-> }} --}}
                @if ($staff->email)
                    <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:{{ $staff->email }}">
                                {{ $staff->email }}</a></div>
                    </div>
                @endif


            </div>

            <div class="details px-3 mt-4">
                {!! $staff->description !!}
            </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 type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Article",
      "headline": "{{ $staff->title }}",
      "datePublished": "{{ $staff->created_at }}",
      "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($staff->image) }}",
      "description": "{{ $staff->description }}"
    }
    </script>
@endpush