@extends('layout.user')

@section('content')
@php
    $gs  = \App\Models\GeneralSetting::first();
    $g1  = $gs->icon_color   ?? '#0B5D1E';
    $g2  = $gs->hover_color  ?? '#0F7A2E';
    $g3  = $gs->accent_color ?? '#E4002B';
    $ink = $gs->text_color   ?? '#0f172a';
@endphp

<style>
  :root{
    --bd-green: {{ $g1 }};
    --bd-green-2: {{ $g2 }};
    --bd-red: {{ $g3 }};
    --ink: {{ $ink }};
  }

  .bd-title{
    display:flex;align-items:center;gap:8px;
    font-weight:900;color:var(--bd-green);
  }
  .bd-title i{color:var(--bd-red);}
  .bd-card{
    background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:14px;
    box-shadow:0 8px 18px rgba(0,0,0,.06);transition:.25s;
  }
  .bd-card:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 26px rgba(0,0,0,.12);
  }
  .bd-badge{
    font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:6px;
    padding:5px 10px;border-radius:999px;border:1px solid transparent;
  }
  .approved{
    background:#dcfce7;border-color:#bbf7d0;color:var(--bd-green);
  }
  .rejected{
    background:#fee2e2;border-color:#fecaca;color:var(--bd-red);
  }
  .bd-info{
    display:flex;align-items:center;gap:6px;
    font-size:13px;color:var(--ink);
  }
  .bd-empty{
    background:linear-gradient(90deg,var(--bd-red),var(--bd-green));
    color:#fff;border-radius:12px;padding:14px;
    display:flex;align-items:center;gap:8px;font-weight:600;
    box-shadow:0 8px 18px rgba(0,0,0,.1);
  }
</style>

<div class="px-2 pt-2 pb-24 md:pb-20 max-w-3xl mx-auto font-[Noto_Sans_Bengali]">

  {{-- Header --}}
  <h2 class="text-base sm:text-lg mb-6 bd-title">
    <i class="fas fa-clipboard-check"></i>
    {{ $job->title }} → রিভিউ সাবমিশনসমূহ
  </h2>

  {{-- Submissions --}}
  @if($submissions->count())
    <div class="space-y-3">
      @foreach($submissions as $submission)
        <div class="bd-card">
          {{-- Header Row --}}
          <div class="flex items-start justify-between mb-3">
            <div class="flex items-center gap-2 text-sm font-semibold" style="color:var(--ink);">
              <i class="fas fa-user" style="color:#94a3b8;"></i> {{ $submission->user->name }}
            </div>

            @php
              $status = $submission->status;
              $statusMap = [
                'approved' => ['class' => 'approved', 'icon' => 'fas fa-check-circle', 'label' => 'Approved'],
                'rejected' => ['class' => 'rejected', 'icon' => 'fas fa-times-circle', 'label' => 'Rejected'],
              ];
            @endphp
            @if(isset($statusMap[$status]))
              <span class="bd-badge {{ $statusMap[$status]['class'] }}">
                <i class="{{ $statusMap[$status]['icon'] }}"></i>
                {{ $statusMap[$status]['label'] }}
              </span>
            @endif
          </div>

          {{-- Info Grid --}}
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-y-2 gap-x-6">
            {{-- Proof Link --}}
            <div class="bd-info">
              <i class="fas fa-link" style="color:var(--bd-green);"></i>
              <span>প্রুফ:</span>
              <a href="{{ $submission->proof_link }}" target="_blank"
                 class="hover:underline font-semibold" style="color:var(--bd-green-2);">
                দেখুন
              </a>
            </div>

            {{-- Submission Time --}}
            <div class="bd-info">
              <i class="fas fa-clock" style="color:var(--bd-red);"></i>
              <span>সময়:</span>
              <span class="font-medium text-gray-700">
                {{ $submission->created_at->format('d M Y, h:i A') }}
              </span>
            </div>
          </div>
        </div>
      @endforeach
    </div>

  {{-- Empty State --}}
  @else
    <div class="bd-empty mt-4">
      <i class="fas fa-info-circle"></i>
      <span>কোনো এপ্রুভড বা রিজেক্টেড সাবমিশন নেই।</span>
    </div>
  @endif
</div>
@endsection