@extends('site.layout.layout')
@section('url'){{ Request::fullUrl() }}@stop

@section('content')
@php
    $lang = app()->getLocale();
@endphp

<div id="page-about" class="page-view active" style="padding: 4rem 5vw;">

  <!-- هيرو -->
  <div class="abt-hero">
    <div class="abt-hero-left sr vis">
      <span class="abt-hero-badge">{{ trans('app.abt_hero_badge') }}</span>
      <h1 class="abt-hero-title">{!! trans('app.abt_hero_title') !!}</h1>
      <p class="abt-hero-tagline">{{ trans('app.abt_hero_tagline') }}</p>
    </div>
  </div>

  <div class="abt-body">

    <div class="abt-intro sr vis">
      <div class="abt-intro-main">
        <span class="abt-intro-eyebrow">{{trans('app.about_org')}}</span>
        <div class="abt-intro-body story-content-area">
          {!! $page->details !!}
        </div>
      </div>

      <div class="abt-intro-pull">
        <div>
          <p class="abt-intro-pull-quote">{{ trans('app.abt_intro_quote') }}</p>
          <div class="abt-intro-pull-source">{{ trans('app.abt_intro_source') }}</div>
        </div>
      </div>
    </div>

    @if((isset($vision) && $vision) || (isset($message) && $message))
      <div class="abt-vm sr vis">


        @if(isset($vision) && $vision)
          <div class="abt-vm-card">
            <span class="abt-vm-tag">{{ $vision->title }}</span>
            <div class="abt-vm-text story-content-area">
              {!! $vision->details !!}
            </div>
          </div>
        @endif


        @if(isset($message) && $message)
          <div class="abt-vm-card">
            <span class="abt-vm-tag">{{ $message->title }}</span>
            <div class="abt-vm-text story-content-area">
              {!! $message->details !!}
            </div>
          </div>
        @endif

      </div>
    @endif

    @if(isset($programs) && $programs->count() > 0)
      <div class="abt-approach sr vis">
        <div class="abt-sec-hd">
          <h2 class="abt-sec-title">{{ trans('app.abt_programs_title') }}</h2>
        </div>
        <div class="abt-pillars">
          @foreach($programs as $index => $program)
            <div class="abt-pillar">
              <div class="abt-pillar-num">{{ sprintf('%02d', $index + 1) }}</div>
              <div class="abt-pillar-title">
                {{ $program->title }}
              </div>
              <div class="abt-pillar-text">
                {!! $program->details !!}
              </div>
            </div>
          @endforeach
        </div>
      </div>
    @endif

    @if(false)
    <!-- مجلس الإدارة -->
    <div class="abt-team sr vis">
      <div class="abt-sec-hd">
        <h2 class="abt-sec-title">{{ trans('app.abt_board_title') }}</h2>
      </div>
      <div class="abt-board-accordion">

        @for($i = 1; $i <= 7; $i++)
          <div class="abt-board-col">
            <img class="abt-board-col-img" src="{{ trans("app.abt_m{$i}_img") }}" alt="{{ trans("app.abt_m{$i}_role") }}">
            <div class="abt-board-col-overlay"></div>
            <div class="abt-board-col-ident">
              <div class="abt-board-col-name">{{ trans("app.abt_m{$i}_name") }}</div>
              <div class="abt-board-col-subrole">{{ trans("app.abt_m{$i}_role") }}</div>
            </div>
            <div class="abt-board-col-detail">
              <div class="abd-photo"><img src="{{ trans("app.abt_m{$i}_img") }}" alt="{{ trans("app.abt_m{$i}_role") }}"></div>
              <div class="abd-info">
                <div class="abd-name">{{ trans("app.abt_m{$i}_name") }}</div>
                <div class="abd-role">{{ trans("app.abt_m{$i}_role") }}</div>
                <div class="abd-grid">
                  <div class="abd-section">
                    <span class="abd-section-title">{{ trans('app.abt_bd_dob') }}</span>
                    <div class="abd-section-body">{{ trans("app.abt_m{$i}_dob") }}</div>
                  </div>
                  <div class="abd-section">
                    <span class="abd-section-title">{{ trans('app.abt_bd_edu') }}</span>
                    <ul class="abd-list">
                      {!! trans("app.abt_m{$i}_edu") !!}
                    </ul>
                  </div>
                  <div class="abd-section">
                    <span class="abd-section-title">{{ trans('app.abt_bd_exp') }}</span>
                    <ul class="abd-list">
                      {!! trans("app.abt_m{$i}_exp") !!}
                    </ul>
                  </div>
                  <div class="abd-section">
                    <span class="abd-section-title">{{ trans('app.abt_bd_career') }}</span>
                    <ul class="abd-list">
                      {!! trans("app.abt_m{$i}_career") !!}
                    </ul>
                  </div>

                  @if(trans("app.abt_m{$i}_mem") !== "app.abt_m{$i}_mem" && trans("app.abt_m{$i}_mem") != '')
                    <div class="abd-section full">
                      <span class="abd-section-title">{{ trans('app.abt_bd_mem') }}</span>
                      <div class="abd-tags">
                        {!! trans("app.abt_m{$i}_mem") !!}
                      </div>
                    </div>
                  @endif

                  @if(trans("app.abt_m{$i}_pub") !== "app.abt_m{$i}_pub" && trans("app.abt_m{$i}_pub") != '')
                    <div class="abd-section full">
                      <span class="abd-section-title">{{ trans('app.abt_bd_pub') }}</span>
                      <ul class="abd-list">
                        {!! trans("app.abt_m{$i}_pub") !!}
                      </ul>
                    </div>
                  @endif
                </div>
              </div>
            </div>
          </div>
        @endfor

      </div><!-- /accordion -->
    </div>
    @endif

    <!-- قسم أصوات من الميدان والأخبار -->
    <section class="tes sr vis">

      <div class="tesl">
        <span class="testt">{{ trans('app.abt_tes_label') }}</span>

        @if(isset($fieldVoices) && $fieldVoices->count() > 0)
          <div class="tes-quotes" id="abt-tes-wrap" aria-live="polite" aria-atomic="true">
            @foreach($fieldVoices as $vIndex => $voice)
              <div class="tes-item @if($vIndex === 0) active @endif">
                <blockquote class="tes-quote">
                  "{!! $voice->{"quote_" . $lang} !!}"
                </blockquote>
                <div class="tes-who">
                  <div class="tes-name">{{ $voice->{"name_" . $lang} }}</div>
                  <div class="tes-role">{{ $voice->{"job_title_" . $lang} }}</div>
                </div>
              </div>
            @endforeach
          </div>

          <div class="tes-dots" id="abt-tes-dots">
            @foreach($fieldVoices as $vIndex => $voice)
              <button class="tes-dot @if($vIndex === 0) on @endif" data-i="{{ $vIndex }}" aria-label="صوت {{ $vIndex + 1 }}"></button>
            @endforeach
          </div>
          <div class="tes-pbar"><div class="tes-pfill run" id="abt-tes-pfill" style="transition: width 4000ms linear; width: 100%;"></div></div>
        @else
          <div class="td-empty" style="padding: 2rem 0; color: var(--t3);">
            {{ $lang == 'ar' ? 'لا توجد أصوات من الميدان حالياً' : 'No field voices available' }}
          </div>
        @endif
      </div>

      <div class="tesr abt-news-col">
        <div class="abt-news-hd">
          <span class="abt-news-label">{{ trans('app.abt_news_label') }}</span>
          <a href="{{ route('site.news', ['lang' => $lang]) }}" class="abt-news-all">{{ trans('app.abt_news_all') }}</a>
        </div>

        @if(isset($latestNews) && $latestNews->count() > 0)
          <div class="abt-news-list">
            @foreach($latestNews as $newsItem)
              <a href="{{ route('site.news', ['lang' => $lang, 'slug' =>  $newsItem->id]) }}" class="abt-ni">
                <div class="abt-ni-img" style="    height: 100px;">
                  <img src="{{ asset('uploads/'.$newsItem->photo) }}" style="object-fit:cover" alt="{{ $newsItem->title }}" loading="lazy">
                </div>
                <div class="abt-ni-body">
                  @if($newsItem->category)
                    <span class="ncat cat-field">{{ $newsItem->category->{"name_" . $lang} ?? $newsItem->category->title ?? '' }}</span>
                  @endif
                  <div class="abt-ni-title">{{ $newsItem->title }}</div>
                  <div class="abt-ni-date">{{ $newsItem->created_at ? $newsItem->created_at->translatedFormat('M Y') : '' }}</div>
                </div>
              </a>
            @endforeach
          </div>
        @else
          <div class="td-empty" style="padding: 2rem 0; color: var(--t3); text-align: center;">
            {{ $lang == 'ar' ? 'لا توجد أخبار حالياً' : 'No news available' }}
          </div>
        @endif
      </div>

    </section>

  </div><!-- /abt-body -->
</div>
@endsection