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

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

    // لون شارة الحالة
    $statusBg = 'var(--t3)';
    if($project->status_id == 1) $statusBg = 'var(--sage)';
    if($project->status_id == 2) $statusBg = 'var(--gold)';

    // الحقول الديناميكية
    $custom_fields_array = [];
    if($project->custom_fields){
        $custom_fields_array = json_decode($project->custom_fields, true) ?? [];
    }

    $title = $project->{"title_$lang"} ?? $project->title ?? '';
    $desc = $project->{"details_$lang"} ?? $project->details ?? '';
    $imgSrc = $project->main_image ? asset('uploads/'.$project->main_image) : 'https://images.unsplash.com/photo-1590486803833-1c5dc8ddd4c8?w=600&q=70';
@endphp

<div id="page-project-detail" class="page-view active">
  <div class="tdd-layout">

    {{-- العمود الرئيسي --}}
    <div class="tdd-main">
      <div class="tdd-status-row">
        <span class="tdd-status-badge" id="prd-status-badge" style="background: {{ $statusBg }}; color: #fff; padding: 0.2rem 0.7rem; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em;">
          {{ $project->status_relation->{"name_$lang"} ?? $project->status_relation->name ?? '' }}
        </span>
      </div>

      <h1 class="tdd-title" id="prd-title">{{ $title }}</h1>


      {{-- صورة المشروع --}}
      <div class="prd-img-wrap">
        <img id="prd-img" src="{{ $imgSrc }}" alt="{{ $title }}" loading="lazy">
        <div class="prd-img-grad"></div>
      </div>

      {{-- نبذة عن المشروع --}}
      <div class="tdd-section">
        <div class="tdd-section-title">{{ trans('app.prd_about') }}</div>
        <p class="tdd-desc" id="prd-desc" style="text-align: justify;">
          {!! $desc !!}
        </p>
      </div>

      {{-- الحقول الديناميكية (أهداف / تفاصيل إضافية) --}}
      @if(!empty($custom_fields_array))
        <div class="tdd-section">
          <div class="tdd-section-title">{{ trans('app.prd_dynamic_spec') }}</div>
          <ul class="tdd-reqs" id="prd-goals">
            @foreach($custom_fields_array as $custom)
              @if(!empty($custom["value_$lang"]))
                <li>
                  @if(!empty($custom["label_$lang"]))
                    <strong style="color: var(--t2);">{{ $custom["label_$lang"] }}:</strong>
                  @endif
                  {{ $custom["value_$lang"] }}
                </li>
              @endif
            @endforeach
          </ul>
        </div>
      @endif

      {{-- نسبة الإنجاز --}}
      @if(isset($project->progress_bar) && $project->progress_bar !== null)
        <div class="tdd-section">
          <div class="tdd-section-title">{{ trans('app.prd_progress') }}</div>
          <div class="prd-prog-wrap">
            <div class="prd-prog-track">
              <div class="prd-prog-fill" id="prd-prog-fill" style="width: {{ $project->progress_bar }}%;"></div>
            </div>
            <span class="prd-prog-pct" id="prd-prog-pct">{{ $project->progress_bar }}٪</span>
          </div>
        </div>
      @endif
    </div>

    {{-- الشريط الجانبي --}}
    <aside class="tdd-sidebar">
      <div class="tdd-back-wrap">
        <button class="tdd-back" onclick="location.href='{{ route('site.projects', ['lang' => $lang]) }}'">
          <span>{{ $lang == 'ar' ? '←' : '→' }}</span>
          <span>{{ trans('app.prd_back') }}</span>
        </button>
        <div class="tdd-breadcrumb">
          <span>{{ trans('app.proj_f_all') }}</span>
          <span class="tdd-bc-sep">/</span>
          <span id="prd-bc-id">PRJ-{{ $project->id }}</span>
        </div>
      </div>


      <div class="tdd-other-tenders">
        <div class="tdd-other-title">{{ trans('app.prd_other_title') }}</div>
        <div id="prd-other-list">
          @foreach($other_projects as $other)
            <a href="{{ route('site.project.details', ['lang' => $lang, 'id' => $other->id]) }}" class="tdd-other-item prj-other">
              <img class="prj-other-thumb" src="{{ $other->main_image ? asset('uploads/'.$other->main_image) : 'https://images.unsplash.com/photo-1541888946425-d81bb19240f5?w=600&q=70' }}" alt="" loading="lazy">
              <div class="prj-other-text">
                <span class="tdd-other-ref">{{ $other->intervention->{"name_$lang"} ?? $other->intervention->name ?? '' }}</span>
                <span class="tdd-other-ttl">{{ $other->{"title_$lang"} ?? $other->title ?? '' }}</span>
              </div>
            </a>
          @endforeach
        </div>
      </div>
    </aside>

  </div>
</div>
@endsection