@extends('layout.user')

@section('title', 'আমার ইনস্টাগ্রাম একাউন্ট হিস্ট্রি')

@section('content')
@php
    // 🎨 Dynamic Theme from General Settings
    $gs  = \App\Models\GeneralSetting::first();
    $g1  = $gs->icon_color   ?? '#0B5D1E';   // primary green
    $g2  = $gs->hover_color  ?? '#0F7A2E';   // secondary green
    $g3  = $gs->accent_color ?? '#E4002B';   // red accent
    $ink = $gs->text_color   ?? '#0f172a';   // text color
@endphp

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>

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

  /* ===== Flag Theme Utilities (Dynamic) ===== */
  .bd-grad{background:linear-gradient(90deg,var(--bd-green),var(--bd-green-2));}
  .bd-soft{
    background:linear-gradient(#fff,#fff) padding-box,
               linear-gradient(90deg,var(--bd-green),var(--bd-green-2)) border-box;
    border:2px solid transparent;
    border-radius:16px;
  }
  .bd-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    box-shadow:0 8px 22px rgba(0,0,0,.06);
  }
  .bd-chip{
    display:inline-flex;align-items:center;gap:8px;
    padding:8px 12px;border-radius:999px;font-weight:700;
    background:#fff;color:var(--bd-green);
    border:2px solid rgba(11,93,30,.25);
  }
  .bd-btn{
    background:linear-gradient(90deg,var(--bd-green),var(--bd-green-2));
    color:#fff;border:none;font-weight:700;
    transition:.25s;
  }
  .bd-btn:hover{
    background:linear-gradient(90deg,var(--bd-green-2),var(--bd-green));
    filter:brightness(1.07);
  }
  .bd-text-grad{
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    background-image:linear-gradient(90deg,var(--bd-green),var(--bd-green-2));
  }
</style>

<div class="max-w-3xl mx-auto px-2 py-3 font-[Noto_Sans_Bengali]">

  {{-- 🟢 Header --}}
  <div class="relative rounded-2xl overflow-hidden mb-5 bd-grad text-white shadow-lg">
    <div class="px-5 py-5 text-center">
      <div class="flex items-center justify-center gap-2">
        <span class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-white/15 border border-white/25">
          <i class="fab fa-instagram"></i>
        </span>
        <h2 class="text-xl sm:text-2xl font-extrabold tracking-wide">আমার ইনস্টাগ্রাম একাউন্ট হিস্ট্রি</h2>
      </div>
      <p class="text-white/90 text-center text-xs mt-2">আপনার সাবমিশনের স্টেটাস, সময় ও তথ্য এক জায়গায়</p>
    </div>
  </div>

  {{-- 🟢 Filter Tabs --}}
  @php
      $statuses = [
          'all' => 'সব',
          'pending' => 'Pending',
          'checked' => 'Checked',
          'sold' => 'Sold',
          'backed' => 'Backed'
      ];
  @endphp

  <div class="grid grid-cols-2 sm:grid-cols-5 gap-2 mb-4">
    @foreach ($statuses as $key => $label)
      <a href="{{ route('in.history', ['status' => $key]) }}"
         class="text-center text-xs sm:text-sm font-bold px-3 py-2 rounded-xl shadow-sm transition
                {{ $status === $key
                    ? 'text-white bd-btn'
                    : 'bg-white border border-gray-200 text-[var(--bd-green)] hover:bg-gray-50' }}">
        {{ $label }}
      </a>
    @endforeach
  </div>

  {{-- 🟢 Table Wrapper --}}
  <div class="bd-card">
    {{-- Header / Legend --}}
    <div class="flex flex-wrap items-center justify-between gap-2 px-4 py-3 border-b">
      <div class="flex items-center gap-2">
        <span class="bd-chip">
          <i class="fas fa-list"></i> হিস্ট্রি তালিকা
        </span>
      </div>
      <div class="flex items-center gap-2 text-xs">
        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-green-100 text-green-800 border border-green-200">
          <i class="fas fa-check-circle"></i> Sold
        </span>
        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-blue-100 text-blue-800 border border-blue-200">
          <i class="fas fa-search"></i> Checked
        </span>
        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-yellow-100 text-yellow-800 border border-yellow-200">
          <i class="far fa-clock"></i> Pending
        </span>
        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-red-100 text-red-800 border border-red-200">
          <i class="fas fa-undo"></i> Backed
        </span>
      </div>
    </div>

    {{-- 🧾 Table --}}
    <div class="overflow-x-auto">
      <table class="min-w-full text-sm text-left">
        <thead class="bg-[var(--bd-green)]/10">
          <tr class="text-[var(--bd-green)] font-extrabold">
            <th class="p-2">#</th>
            <th class="p-2">Username</th>
            <th class="p-2">Temp Mail</th>
            <th class="p-2">2FA</th>
            <th class="p-2">Status</th>
            <th class="p-2">Submitted</th>
          </tr>
        </thead>
        <tbody>
          @forelse($accounts as $index => $acc)
            @php
              $color = match($acc->status) {
                  'sold'    => 'bg-green-100 text-green-800 border-green-200',
                  'checked' => 'bg-blue-100 text-blue-800 border-blue-200',
                  'backed'  => 'bg-yellow-100 text-yellow-800 border-yellow-200',
                  default   => 'bg-gray-100 text-gray-800 border-gray-200'
              };
              $icon = match($acc->status) {
                  'sold'    => 'fas fa-check-circle',
                  'checked' => 'fas fa-search',
                  'backed'  => 'fas fa-undo',
                  default   => 'far fa-clock'
              };
            @endphp
            <tr class="border-t hover:bg-[var(--bd-green)]/5 transition">
              <td class="p-2">{{ $index + 1 }}</td>
              <td class="p-2 font-medium text-[var(--bd-ink)]">{{ $acc->username }}</td>
              <td class="p-2 text-gray-700">{{ $acc->temp_email }}</td>
              <td class="p-2 text-gray-700">{{ $acc->two_fa_code }}</td>
              <td class="p-2">
                <span class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border {{ $color }}">
                  <i class="{{ $icon }}"></i> {{ ucfirst($acc->status) }}
                </span>
              </td>
              <td class="p-2 whitespace-nowrap text-gray-600">{{ $acc->created_at->diffForHumans() }}</td>
            </tr>
          @empty
            <tr>
              <td colspan="6" class="text-center py-6">
                <div class="bd-soft inline-flex items-center gap-2 px-4 py-2 text-[var(--bd-green)] font-semibold">
                  <i class="fas fa-info-circle"></i> কোনো হিস্ট্রি পাওয়া যায়নি।
                </div>
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

  {{-- 🟢 Footer note --}}
  <p class="text-[11px] text-gray-500 text-center mt-3">
    * ডেটা স্বয়ংক্রিয়ভাবে আপডেট হয়। প্রয়োজনে পেজ রিফ্রেশ করুন।
  </p>
</div>
@endsection