@extends('layout.user')

@section('content')
@php
    // 🎨 General settings থেকে কালার আনা
    $gs  = \App\Models\GeneralSetting::first();
    $g1  = $gs->icon_color   ?? '#0B5D1E';   // primary green
    $g2  = $gs->hover_color  ?? '#0F7A2E';   // deep green
    $g3  = $gs->accent_color ?? '#E4002B';   // red
    $ink = $gs->text_color   ?? '#0f172a';   // text color
@endphp

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

  .dc-wrap{max-width:1100px;margin:0 auto;}
  .dc-title{
    display:flex;align-items:center;gap:8px;font-weight:900;color:var(--ink);
  }
  .dc-title i{color:var(--bd-green);}
  .dc-chip{
    display:inline-flex;align-items:center;gap:8px;margin-left:6px;
    background:linear-gradient(0deg,#fff,#fff) padding-box,
               linear-gradient(90deg,var(--bd-red),var(--bd-green)) border-box;
    border:2px solid transparent;border-radius:999px;
    padding:4px 10px;font-size:12px;font-weight:800;color:var(--ink);
  }

  .dc-card{
    background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:14px;
    box-shadow:0 8px 22px rgba(0,0,0,.06);transition:.25s;position:relative;overflow:hidden;
  }
  .dc-card::before{
    content:"";position:absolute;inset:0 0 auto 0;height:3px;
    background:linear-gradient(90deg,var(--bd-red),var(--bd-green),var(--bd-green-2));
  }
  .dc-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.1);}

  .badge-pending{
    display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;
    padding:5px 10px;border-radius:999px;
    border:1px solid #fde68a;background:#fef3c7;color:#92400e;
  }

  .dc-btn{
    display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;
    padding:7px 12px;border-radius:10px;border:0;cursor:pointer;transition:.15s;color:#fff;
  }
  .dc-btn.approve{
    background:linear-gradient(90deg,var(--bd-green),var(--bd-green-2));
    box-shadow:0 10px 22px rgba(11,93,30,.18);
  }
  .dc-btn.approve:hover{
    background:linear-gradient(90deg,var(--bd-green-2),var(--bd-green));
    filter:brightness(1.08);
  }
  .dc-btn.reject{
    background:linear-gradient(90deg,var(--bd-red),#b91c1c);
    box-shadow:0 10px 22px rgba(220,38,38,.18);
  }
  .dc-btn.reject:hover{
    background:linear-gradient(90deg,#b91c1c,var(--bd-red));
    filter:brightness(1.08);
  }

  .dc-empty{
    background:linear-gradient(0deg,#fff,#fff) padding-box,
               linear-gradient(90deg,var(--bd-red),var(--bd-green)) border-box;
    border:2px solid transparent;border-radius:14px;padding:14px;
    color:var(--bd-red);display:flex;align-items:center;gap:8px;
  }
</style>

<div class="px-2 pt-2 pb-24 md:pb-20 dc-wrap">

  {{-- Header --}}
  <h2 class="text-base sm:text-lg mb-4 dc-title">
    <i class="fas fa-users"></i>
    <span>{{ $job->title }} → Pending সাবমিশনসমূহ</span>
    <span class="dc-chip">
      <i class="fas fa-clipboard-check" style="color:var(--bd-green)"></i> রিভিউ কিউ
    </span>
  </h2>

  {{-- List --}}
  @if($submissions->count())
    <div class="space-y-4">
      @foreach($submissions as $submission)
        <div class="dc-card">
          {{-- Top Section --}}
          <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between mb-3 gap-2">
            <div class="space-y-1">
              {{-- ইউজারের নাম --}}
              <div class="flex items-center gap-2 text-sm font-medium" style="color:var(--ink);">
                <i class="fas fa-user" style="color:#94a3b8;"></i>
                {{ $submission->user->name }}
              </div>

              {{-- প্রুফ লিংক --}}
              <div class="flex items-center gap-2 text-xs" style="color:#64748b;">
                <i class="fas fa-link" style="color:var(--bd-green);"></i>
                <span>প্রুফ:</span>
                <a href="{{ $submission->proof_link }}" target="_blank"
                   class="hover:underline truncate font-semibold"
                   style="color:var(--bd-green-2);">দেখুন</a>
              </div>

              {{-- ⏰ সাবমিশন টাইম --}}
              <div class="text-xs flex items-center gap-1" style="color:#64748b;">
                <i class="fas fa-clock" style="color:var(--bd-red);"></i>
                <span>সাবমিশন টাইম:</span>
                <span style="color:var(--ink);font-weight:600;">
                  {{ $submission->created_at->format('d/m/Y') }} & {{ $submission->created_at->diffForHumans() }}
                </span>
              </div>
            </div>

            {{-- স্ট্যাটাস ব্যাজ --}}
            <span class="badge-pending self-start">
              <i class="fas fa-hourglass-half"></i> Pending
            </span>
          </div>

          {{-- Approve / Reject Buttons --}}
          <div class="flex gap-2 justify-end mt-3">
            {{-- Approve --}}
            <form action="{{ route('user.job-submission.update', $submission->id) }}" method="POST">
              @csrf
              @method('PUT')
              <input type="hidden" name="status" value="approved">
              <button type="submit" class="dc-btn approve">
                <i class="fas fa-check-circle"></i> Approve
              </button>
            </form>

            {{-- Reject --}}
            <form action="{{ route('user.job-submission.update', $submission->id) }}" method="POST">
              @csrf
              @method('PUT')
              <input type="hidden" name="status" value="rejected">
              <button type="submit" class="dc-btn reject">
                <i class="fas fa-times-circle"></i> Reject
              </button>
            </form>
          </div>
        </div>
      @endforeach
    </div>
  @else
    {{-- Empty --}}
    <div class="dc-empty">
      <i class="fas fa-info-circle"></i>
      <span>কোনো pending সাবমিশন নেই।</span>
    </div>
  @endif
</div>
@endsection