@extends('site.layout.layout')
@section('url'){{ Request::fullUrl() }}@stop
@section('css')
<style>
    .td-filters-bar{
        margin-bottom:20px;
    }
</style>
@stop
@section('content')
@php
    $lang = app()->getLocale();
@endphp

<div id="page-announcements" class="page-view active">

  <div class="td-hero">
    <div class="td-hero-inner">
      <div class="td-hero-right">
        <span class="td-hero-badge">{{ trans('app.ann_badge') }}</span>
        <h1 class="td-hero-title">{!! trans('app.ann_title') !!}</h1>
        <p class="td-hero-sub">{{ trans('app.ann_sub') }}</p>
      </div>
      <div class="td-hero-left">
        <div class="td-count-box">
          <div class="td-count-num" id="ann-page-count">{{ $tenders->total() + $jobs->total() + $publications->total() }}</div>
          <div class="td-count-lbl">{{ trans('app.ann_active_count') }}</div>
          <div class="td-count-line"></div>
          <div class="td-compliance">
            <div class="td-comp-row">
              <span class="td-comp-dot td-comp-green"></span>
              <span>{{ trans('app.ann_f_tender') }} ({{ $tenders->total() }})</span>
            </div>
            <div class="td-comp-row">
              <span class="td-comp-dot td-comp-gold"></span>
              <span>{{ trans('app.ann_f_job') }} ({{ $jobs->total() }})</span>
            </div>
            <div class="td-comp-row">
              <span class="td-comp-dot" style="background:var(--blue)"></span>
              <span>{{ trans('app.ann_f_pub') }} ({{ $publications->total() }})</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="td-body">

    <div class="td-filters-bar">
      <div class="td-filters-label">{{ trans('app.ann_filter_by') }}</div>
      <div class="td-filters">
        <button class="td-filter td-tab-btn on" data-target="tenders-sec">{{ trans('app.ann_f_tender') }}</button>
        <button class="td-filter td-tab-btn" data-target="jobs-sec">{{ trans('app.ann_f_job') }}</button>
        <button class="td-filter td-tab-btn" data-target="pubs-sec">{{ trans('app.ann_f_pub') }}</button>
      </div>
    </div>

    <div class="ann-section-wrapper" id="tenders-sec">
      <div class="ann-page-grid">
        @if($tenders->count() > 0)
          @foreach($tenders as $tender)
            @php $tenderRoute = route('site.tender.detail', ['lang' => $lang, 'id' => $tender->id]); @endphp
            <div class="ann-page-card" style="cursor:pointer" onclick="location.href='{{ $tenderRoute }}'">
              <span class="apc-type apc-tender">{{ trans('app.type_tender') }}</span>
              <div class="apc-title">{{ $tender->{"title_$lang"} ?? $tender->title }}</div>
              <div class="apc-deadline">⏱ {{ trans('app.deadline_lbl') }}: {{ date('Y-m-d',strtotime($tender->tender_date)) }}</div>
              <div class="apc-footer">
                <a class="apc-link" href="{{ $tenderRoute }}" onclick="event.stopPropagation()">{{ trans('app.view_details') }} ←</a>
                <span class="apc-date">{{ $tender->created_at ? $tender->created_at->translatedFormat('d M Y') : '' }}</span>
              </div>
            </div>
          @endforeach
        @else
          <div class="td-empty" style="grid-column: 1/-1; text-align: center; padding: 4rem; color: var(--t3);">
            {{ $lang == 'ar' ? 'لا توجد عطاءات منشورة حالياً.' : 'No tenders available.' }}
          </div>
        @endif
      </div>

      <div class="td-pagination-wrap" style="margin-top: 2rem;">
        {{ $tenders->appends(['jobs_page' => $jobs->currentPage(), 'pubs_page' => $publications->currentPage()])->links() }}
      </div>
    </div>

    <div class="ann-section-wrapper" id="jobs-sec" style="display: none;">
      <div class="ann-page-grid">
        @if($jobs->count() > 0)
          @foreach($jobs as $job)
            @php $jobRoute = route('site.job.detail', ['lang' => $lang, 'id' => $job->id]); @endphp
            <div class="ann-page-card" style="cursor:pointer" onclick="location.href='{{ $jobRoute }}'">
              <span class="apc-type apc-job">{{ trans('app.type_job') }}</span>
              <div class="apc-title">{{ $job->{"title_$lang"} ?? $job->title }}</div>
              <div class="apc-deadline">⏱ {{ trans('app.deadline_lbl') }}: {{ date('Y-m-d',strtotime($job->tender_date)) }}</div>
              <div class="apc-footer">
                <a class="apc-link" href="{{ $jobRoute }}" onclick="event.stopPropagation()">{{ trans('app.view_details') }} ←</a>
                <span class="apc-date">{{ $job->created_at ? $job->created_at->translatedFormat('d M Y') : '' }}</span>
              </div>
            </div>
          @endforeach
        @else
          <div class="td-empty" style="grid-column: 1/-1; text-align: center; padding: 4rem; color: var(--t3);">
            {{ $lang == 'ar' ? 'لا توجد وظائف شاغرة حالياً.' : 'No job vacancies available.' }}
          </div>
        @endif
      </div>

      <div class="td-pagination-wrap" style="margin-top: 2rem;">
        {{ $jobs->appends(['tenders_page' => $tenders->currentPage(), 'pubs_page' => $publications->currentPage()])->links() }}
      </div>
    </div>

    <div class="ann-section-wrapper" id="pubs-sec" style="display: none;">
      <div class="ann-page-grid">
        @if($publications->count() > 0)
          @foreach($publications as $pub)
            @php $pubRoute = route('site.news', ['lang' => $lang, 'slug' => $pub->slug ?? $pub->id]); @endphp
            <div class="ann-page-card" style="cursor:pointer" onclick="location.href='{{ $pubRoute }}'">
              <span class="apc-type apc-pub" style="background: var(--blue); color: #fff;">{{ trans('app.type_pub') }}</span>
              <div class="apc-title">{{ $pub->title }}</div>
              <div class="apc-dept">{{ $pub->category["name_$lang"] }}</div>
              <div class="apc-deadline">📄 {{ strip_tags(Str::limit($pub->details, 50)) }}</div>
              <div class="apc-footer">
                <a class="apc-link" href="{{ $pubRoute }}" onclick="event.stopPropagation()">{{ trans('app.view_details') }} ←</a>
                <span class="apc-date">{{ $pub->created_at ? $pub->created_at->translatedFormat('M Y') : '' }}</span>
              </div>
            </div>
          @endforeach
        @else
          <div class="td-empty" style="grid-column: 1/-1; text-align: center; padding: 4rem; color: var(--t3);">
            {{ $lang == 'ar' ? 'لا توجد إصدارات أو تقارير حالياً.' : 'No publications available.' }}
          </div>
        @endif
      </div>

      <div class="td-pagination-wrap" style="margin-top: 2rem;">
        {{ $publications->appends(['tenders_page' => $tenders->currentPage(), 'jobs_page' => $jobs->currentPage()])->links() }}
      </div>
    </div>

  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.has('jobs_page')) {
        switchTab('jobs-sec', $('.td-tab-btn[data-target="jobs-sec"]'));
    } else if (urlParams.has('pubs_page')) {
        switchTab('pubs-sec', $('.td-tab-btn[data-target="pubs-sec"]'));
    } else if (urlParams.has('tenders_page')) {
        switchTab('tenders-sec', $('.td-tab-btn[data-target="tenders-sec"]'));
    } else {
        switchTab('tenders-sec', $('.td-tab-btn[data-target="tenders-sec"]'));
    }

    $('.td-tab-btn').on('click', function() {
        let targetSection = $(this).data('target');
        switchTab(targetSection, $(this));
    });

    function switchTab(targetId, buttonEl) {
        $('.td-tab-btn').removeClass('on');
        buttonEl.addClass('on');

        if (targetId === 'all') {
            $('.ann-section-wrapper').fadeIn(150);
            $('.td-pagination-wrap').hide();
        } else {
            $('.ann-section-wrapper').hide();
            $('#' + targetId).fadeIn(150);
            $('#' + targetId).find('.td-pagination-wrap').show();
        }
    }
});
</script>
@endsection