@extends('site.inner')

@section('title')
{!! label('lbl_leadership_magazine') !!}
@endsection

{{-- @section('page_title')
{!! label('lbl_news') !!}
@endsection --}}

@section('content')

<div class="about-page pb-0  mt-0 pages-decorater-bottom bg-white">
    <div class="row intro-image-container px-0">
        <div class="bg-secondary">
            <div class="px-3 px-md-5 pt-4">
                {{ breadcrumb() }}
            </div>
            <div class="container">
                <!--- BEGIN: TOP ---->
                <h2 class="school-leadership-title">
                    <span class="bg-primary p-2 title-icon-holder rounded-circle text-center">
                        <i class="fas fa-calendar text-sm text-white icon"></i>
                    </span>
                    <span class="me-2 text-uppercase text-primary text-bold fs-18em">{{ label('lbl_leadership_magazine') }}</span>
                </h2>
                <!--- END: TOP ------>
                @if ($introduction_magazine)
                
                <div class="p-2 p-md-5">
                    <div class="mx-auto w-100 mb-5">
                        <div class="row d-flex align-items-center">
                            <div class="col-lg-6 px-5">
                                <h4 class="text-bold text-primary py-4">{{ $introduction_magazine->title }}</h4>
                                <span class="text-justify lh18"> {!! $introduction_magazine->content !!}</span>
                            </div>
                            <div class="col-lg-6 px-5 d-flex justify-content-center align-items-center">
                                <div class="about-image">
                                    <img src="{{asset('uploads/leadership_magazine/'.$introduction_magazine->photo_url)}}" width="400" alt="magazine" class="img-fluid">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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

    @if ($magazine_features)
    <div class="col-12 bg-white p-5">
        <div class="p-2 p-md-5">
            <div class="mx-auto w-100 mb-5">
                <div class="row d-flex align-items-center">
                    <div class="col-lg-6 px-5 d-flex justify-content-center align-items-center">
                        <div class="about-image">
                            <img src="images/sliders/map.png" width="400" alt="magazine" class="img-fluid">
                        </div>
                    </div>
                    <div class="col-lg-6 px-5">
                        <h4 class="text-bold text-primary py-4">{{ $magazine_features->title }}</h4>
                        <span class="text-justify lh18"> {!! $magazine_features->content !!}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    @if ($collaboration)
    <div class="col-12 bg-secondary p-5">
        <div class="p-2 p-md-5">
            <div class="mx-auto w-100 mb-5">
                <div class="row d-flex align-items-center">
                    <div class="col-lg-6 px-5">
                        <h4 class="text-bold text-primary py-4">{{ $collaboration->title }}</h4>
                        <span class="text-justify lh18"> {!! $collaboration->content !!}</span>
                    </div>
                    <div class="col-lg-6 px-5 d-flex justify-content-center align-items-center">
                        <div class="about-image">
                            <img src="images/sliders/cap.png" width="300" alt="magazine" class="img-fluid">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <div class="col-12 board-of-trustees-container">
        <div class="row">
            <div class="col-12 d-flex justify-content-center align-items-start">
                <div class="explore-our-courses-banner box-shadow-slight">
                    <h2 class="explore-our-courses-banner-title">LEADERSHIP MAGAZINE DIGITAL COPIES</h2>
                </div>
            </div>
        </div>

        <div class="col-12 page-section px-0 my-5">
            <div class="container">
                <div class="row">
                    <div class="col-12">

                        @if(count($digital_copies))
                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                @foreach ($digital_copies as $index => $category)
                                    <li class="nav-item" role="presentation">
                                        <!-- note: we use data-target without # to match your original pattern -->
                                        <a class="nav-link py-3 {{ $index === 0 ? 'active' : '' }}"
                                        id="{{ $category->slug }}-tab"
                                        data-target="{{ $category->slug }}"
                                        href="javascript:void(0);"
                                        role="tab"
                                        aria-controls="{{ $category->slug }}"
                                        aria-selected="{{ $index === 0 ? 'true' : 'false' }}">
                                            <span>{!! $category->title !!}</span>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        @endif

                        <div class="tab-content py-4 primary-border px-3 pr-lg-4 bg-secondary" id="diningRoomTabsContent">
                            @foreach ($digital_copies as $index => $category)
                                <div class="tab-pane fade {{ $index === 0 ? 'show active' : '' }}"
                                    id="{{ $category->slug }}"
                                    role="tabpanel"
                                    aria-labelledby="{{ $category->slug }}-tab">
                                    <div class="row py-4">
                                        @foreach ($category->documents as $document)
                                            <div class="magazine d-flex flex-column justify-content-center align-items-center col-md-6 col-xl-3">
                                                <img width="80" class="shadow"
                                                    src="{{ $document->cover_image ? asset('uploads/covers/'.$document->cover_image) : asset('site/images/sample.png') }}"
                                                    alt="">
                                                <span class="text-bold text-sm mt-2">{!! \Illuminate\Support\Str::limit($document->title, 100) !!}</span>
                                                <span class="text-primary text-sm my-2">
                                                    {{ \Carbon\Carbon::parse($document->published_date)->format('d F Y') }}
                                                </span>

                                                <div class="action-magazine bg-primary text-secondary text-sm my-2 rounded-small d-flex justify-content-center align-items-center cursor-pointer">
                                                    <span class="p-2 br-2"
                                                        onclick="window.open('{!! asset('uploads/documents/'.$document->file) !!}', '_blank')">
                                                        {{ label('lbl_view') }}
                                                    </span>

                                                    <span class="p-2">
                                                        <a href="{{ asset('uploads/documents/'.$document->file) }}"
                                                        download="{{ $document->file }}"
                                                        class="text-secondary text-sm d-block">
                                                            {{ label('lbl_download') }}
                                                        </a>
                                                    </span>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        </div> <!-- /.tab-content -->

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

    @if ($contribution_and_partnership)
    <div class="col-12 bg-secondary p-5">
        <div class="p-2 p-md-5">
            <div class="mx-auto w-100 mb-5">
                <div class="row d-flex align-items-center">
                    <div class="col-lg-6 px-5">
                        <h4 class="text-bold text-primary py-4">{{ $contribution_and_partnership->title }}</h4>
                        <span class="text-justify lh18"> {!! $contribution_and_partnership->content !!}</span>
                    </div>
                    <div class="col-lg-6 px-5 d-flex justify-content-center align-items-center">
                        <div class="about-image">
                            <img src="images/sliders/hands.png" width="300" alt="magazine" class="img-fluid">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    @if ($content_submission_guidlines)
    <div class="col-12 bg-white p-5">
        <div class="p-2 p-md-5">
            <div class="mx-auto w-100 mb-5">
                <div class="row d-flex align-items-center">
                    <div class="col-lg-6 px-5 d-flex justify-content-center align-items-center">
                        <div class="about-image">
                            <img src="images/sliders/article.png" width="400" alt="magazine" class="img-fluid">
                        </div>
                    </div>
                    <div class="col-lg-6 px-5">
                        <h4 class="text-bold text-primary py-4">{{ $content_submission_guidlines->title }}</h4>
                        <span class="text-justify lh18"> {!! $content_submission_guidlines->content !!}</span>
                        @if ($inquiries)
                        <h4 class="text-bold text-primary py-4">{{ $inquiries->title }}</h4>
                        <span class="text-justify lh18"> {!! $inquiries->content !!}</span>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

</div>

@stop

@section('scripts')
    <script>
        (function () {
  // safe init after DOM loaded
  function qs(sel, ctx) { return (ctx || document).querySelector(sel); }
  function qsa(sel, ctx) { return Array.from((ctx || document).querySelectorAll(sel)); }

  // handle click on nav links
  var tabContainers = qsa('.nav.nav-tabs');
  tabContainers.forEach(function(tabList){
    tabList.addEventListener('click', function(e){
      var link = e.target.closest('.nav-link');
      if (!link) return;
      e.preventDefault();

      // identify target id (allow both data-target="slug" or href="#slug")
      var targetSlug = link.getAttribute('data-target') || (link.getAttribute('href') || '').replace('#', '');
      if (!targetSlug) return;

      // nav links in this tab list
      var links = qsa('.nav-link', tabList);
      links.forEach(function(l){
        l.classList.remove('active');
        l.setAttribute('aria-selected', 'false');
      });

      // activate clicked link
      link.classList.add('active');
      link.setAttribute('aria-selected', 'true');

      // find the closest tab-content container (by id on the parent markup)
      // we assume your tab-content container is present in the DOM and contains tab-panes with matching ids
      var tabContent = qs('.tab-content');
      if (!tabContent) {
        // fallback: find parent .container then .tab-content
        tabContent = link.closest('.container')?.querySelector('.tab-content') || document.querySelector('.tab-content');
      }
      if (!tabContent) return;

      // deactivate all panes in that content
      var panes = qsa('.tab-pane', tabContent);
      panes.forEach(function(p){
        p.classList.remove('show','active');
        // keep fade class if present
      });

      // activate matching pane by id
      var targetPane = document.getElementById(targetSlug);
      if (targetPane) {
        targetPane.classList.add('show','active');
        // move focus for accessibility
        targetPane.setAttribute('tabindex','-1');
        targetPane.focus && targetPane.focus();
      }
    });
  });

  // Optional: support initial deep-link via hash (e.g., site.com/page#slug)
  if (location.hash) {
    var slug = location.hash.replace('#','');
    var initialLink = document.querySelector('.nav-link[data-target="' + slug + '"]') ||
                      document.querySelector('.nav-link[href="#' + slug + '"]');
    if (initialLink) {
      initialLink.click();
    }
  }
})();
    </script>
@stop