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

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

<div id="page-projects" 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.proj_hero_badge') }}</span>
        <h1 class="td-hero-title">{!! trans('app.proj_hero_title') !!}</h1>
        <p class="td-hero-sub">{{ trans('app.proj_hero_sub') }}</p>
      </div>
      <div class="td-hero-left">
        <div class="td-count-box">
          <div class="td-count-num" id="proj-count">{{ $projects->count() }}</div>
          <div class="td-count-lbl">{{ trans('app.proj_count_lbl') }}</div>
          <div class="td-count-line"></div>
          <div class="td-compliance">
            {{-- العدادات الفرعية بناءً على الـ status_id --}}
            <div class="td-comp-row">
              <span class="td-comp-dot td-comp-green"></span>
              <span>{{ trans('app.proj_status_completed') }} ({{ $projects->where('status_id', 1)->count() }})</span>
            </div>
            <div class="td-comp-row">
              <span class="td-comp-dot td-comp-gold"></span>
              <span>{{ trans('app.proj_status_ongoing') }} ({{ $projects->where('status_id', 2)->count() }})</span>
            </div>
            <div class="td-comp-row">
              <span class="td-comp-dot td-comp-grey"></span>
              <span>{{ trans('app.proj_status_paused') }} ({{ $projects->where('status_id', 3)->count() }})</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="td-body">

    <div class="td-filters-bar">
      <div class="td-filters-label">{{ trans('app.proj_filters_lbl') }}</div>
      <div class="td-filters">
        <button class="td-filter on" data-prjf="all">{{ trans('app.proj_f_all') }}</button>
        <button class="td-filter" data-prjf="status-2">{{ trans('app.proj_f_active') }}</button>
        <button class="td-filter" data-prjf="status-1">{{ trans('app.proj_f_done') }}</button>

      </div>
 
      <div class="td-search-inline">
        <span class="td-search-icon">🔍</span>
        <input class="td-search-input" id="proj-search" type="text" placeholder="{{ trans('app.search_placeholder') }}">
        <button class="td-search-clear" id="proj-search-clear">✕</button>
      </div>
      <div class="td-total-label">{{ trans('app.showing_lbl') }}: <span id="proj-showing-count">{{ $projects->count() }}</span> {{ trans('app.project_unit') }}</div>
    </div>

    <div class="td-list" id="proj-grid">
      @if($projects->count() > 0)
        @foreach($projects as $project)
          @php
            // تحديد كلاس الخلفية وشارات الحالة
            $statusBg = 'var(--t3)'; // موقوف مؤقتاً افتراضياً
            if($project->status_id == 1) $statusBg = 'var(--sage)'; // مكتمل
            if($project->status_id == 2) $statusBg = 'var(--gold)'; // جارٍ

            
            $detailRoute = route('site.project.details', ['lang' => $lang, 'id' => $project->id]);

            // تفكيك مصفوفة الحقول الديناميكية المخزنة كـ JSON
            $custom_fields_array = array();
            $custom_fields = $project->custom_fields;
            if($custom_fields){
                $custom_fields_array = json_decode($project->custom_fields, true);
            }
          @endphp

          <a class="prj-card" href="{{ $detailRoute }}"
             data-status="status-{{ $project->status_id }}"
             data-intervention="inter-{{ $project->intervention_id }}">

            <div class="prj-img-wrap">
              <img class="prj-img" src="{{ asset('uploads/'.$project->main_image)}}" alt="{{ $project->{"title_$lang"} }}" loading="lazy" onerror="this.style.display='none'">
              <span class="prj-status-badge" style="background: {{ $statusBg }}">
                {{ $project->status_relation->{"name_$lang"} ?? $project->status_relation->name ?? '' }}
              </span>
            </div>

            <div class="prj-body">
              <div class="prj-title">{{ $project->{"title_$lang"} ?? $project->title }}</div>
              <p class="prj-desc">{{ $project->{"summary_$lang"} }}</p>

              <div class="prj-footer">

                <div class="prj-info">
                  @if(!empty($custom_fields_array) && is_array($custom_fields_array))
                    @foreach($custom_fields_array as $custom)
                      @if(!empty($custom["label_$lang"]) && !empty($custom["value_$lang"]))
                        <div class="prj-info-row">
                          <span class="pdl">{{ $custom["label_$lang"] }}:</span>
                          <span class="pdv g" style="font-size:13px">{{ $custom["value_$lang"] }}</span>
                        </div>
                      @endif
                    @endforeach
                  @endif
                </div>

              </div>
            </div>
          </a>
        @endforeach
      @else
        <div class="td-empty-state" style="grid-column: 1/-1; text-align: center; padding: 5rem 2rem; color: var(--t3);">
          {{ $lang == 'ar' ? 'لا توجد مشاريع مسجلة حالياً.' : 'No projects found.' }}
        </div>
      @endif
    </div>

  </div>
</div>

{{-- محرك التصفية والبحث الفوري المباشر السلس --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {

    // التصفية الفورية عند الضغط على الأزرار
    $('.td-filter').on('click', function() {
        $('.td-filter').removeClass('on');
        $(this).addClass('on');
        applyProjectFilters();
    });

    // التصفية والبحث الفوري أثناء الكتابة
    $('#proj-search').on('input', function() {
        applyProjectFilters();
    });

    // مسح حقل البحث
    $('#proj-search-clear').on('click', function() {
        $('#proj-search').val('');
        applyProjectFilters();
    });

    function applyProjectFilters() {
        let activeFilter = $('.td-filter.on').data('prjf'); // الكل، حالة، أو نوع تدخل
        let searchQuery = $('#proj-search').val().toLowerCase().trim();
        let visibleCount = 0;

        $('.prj-card').each(function() {
            let prjStatus = $(this).data('status');
            let prjIntervention = $(this).data('intervention');

            let prjTitle = $(this).find('.prj-title').text().toLowerCase();
            let prjDesc  = $(this).find('.prj-desc').text().toLowerCase();
            let prjLoc   = $(this).find('.prj-loc').text().toLowerCase();
            let prjInfo  = $(this).find('.prj-info').text().toLowerCase();

            let matchFilter = (activeFilter === 'all') ||
                              (activeFilter === prjStatus) ||
                              (activeFilter === prjIntervention);

            let matchQuery = !searchQuery ||
                             prjTitle.includes(searchQuery) ||
                             prjDesc.includes(searchQuery) ||
                             prjLoc.includes(searchQuery) ||
                             prjInfo.includes(searchQuery);

            if (matchFilter && matchQuery) {
                $(this).fadeIn(180);
                visibleCount++;
            } else {
                $(this).fadeOut(180);
            }
        });

        $('#proj-showing-count').text(visibleCount);
    }
});
</script>
@endsection