@extends('layout.user')

@section('content')
@php
  // 🔵 Fixed Blue Theme
  $blue1 = '#2563eb';
  $blue2 = '#1d4ed8';
  $noticeEnabled = (bool) ($noticeEnabled ?? false);
  $noticeTitle = trim((string) ($noticeTitle ?? ''));
  $noticeBody = trim((string) ($noticeBody ?? ''));
  if ($noticeTitle === '') {
    $noticeTitle = 'উইথড্র আপডেট নোটিশ';
  }
  if ($noticeBody === '') {
    $noticeBody = 'উইথড্র সাময়িকভাবে বন্ধ আছে। পরে আবার চেষ্টা করুন।';
  }

  $statusLabels = [
    'all' => 'সব',
    'pending' => 'অপেক্ষারত',
    'approved' => 'অনুমোদিত',
    'rejected' => 'প্রত্যাখ্যাত',
  ];
  $eventLabels = [
    'submitted' => 'রিকোয়েস্ট জমা',
    'approved' => 'অনুমোদিত',
    'rejected' => 'প্রত্যাখ্যাত',
    'legacy_status' => 'পুরনো ডাটা sync',
  ];
@endphp

<style>
  :root{
    --blue1: {{ $blue1 }};
    --blue2: {{ $blue2 }};
  }

  /* 🔵 Gradient Text */
  .bd-grad-text{
    background:linear-gradient(90deg,var(--blue1),var(--blue2));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  /* 🔵 Tabs */
  .tab-active{
    background:linear-gradient(90deg,var(--blue1),var(--blue2));
    color:#fff;
    font-weight:700;
    border:1.5px solid var(--blue1);
  }

  .tab-normal{
    background:#fff;
    color:var(--blue1);
    border:1.5px solid var(--blue1);
    transition:.2s;
  }
  .tab-normal:hover{
    background:#eff6ff;
  }

  /* 🔵 Card */
  .card{
    background:#fff;
    border:1.5px solid var(--blue1);
    border-radius:16px;
    box-shadow:0 6px 16px rgba(37,99,235,.08);
  }

  /* 🔵 Button */
  .btn-blue{
    background:linear-gradient(90deg,var(--blue1),var(--blue2));
    color:#fff;
    border:1.5px solid var(--blue1);
  }

  /* 🔵 Status Pill (Blue Border) */
  .status-pill{
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    padding:4px 10px;
    border:1.5px solid var(--blue1);
  }

</style>

<div class="max-w-md mx-auto my-8 px-4 font-[Noto_Sans_Bengali]">

  {{-- 🔵 Title --}}
  <h2 class="text-2xl font-extrabold text-center mb-6 bd-grad-text">
    <i class="fas fa-file-invoice-dollar mr-2"></i> উইথড্রাল হিস্ট্রি
  </h2>

  {{-- 🔵 Filter Tabs --}}
  <div class="flex justify-between mb-6 gap-2">
    @php
      $tabs = ['all' => 'সব', 'pending' => 'অপেক্ষারত', 'approved' => 'অনুমোদিত', 'rejected' => 'প্রত্যাখ্যাত'];
    @endphp
    @foreach($tabs as $key => $label)
      <a href="{{ route('withdraw.history', ['status' => $key]) }}"
         class="flex-1 text-center py-2 rounded-lg text-sm
                {{ $status === $key ? 'tab-active' : 'tab-normal' }}">
        {{ $label }}
      </a>
    @endforeach
  </div>

  {{-- 🔵 New Withdraw Button --}}
  @if($noticeEnabled)
    <div class="card p-4 text-center mb-4" style="border-color:#f59e0b;background:#fff7ed;color:#9a3412;">
      <div class="font-extrabold mb-1">{{ $noticeTitle }}</div>
      <div class="text-sm leading-relaxed">{{ $noticeBody }}</div>
    </div>
    <div class="block mb-6 text-center py-2.5 rounded-lg font-semibold shadow btn-blue"
         style="opacity:.55;pointer-events:none;">
      <i class="fas fa-lock mr-1"></i> নতুন উইথড্রাল রিকোয়েস্ট
    </div>
  @else
    <a href="{{ route('withdraw.form') }}"
       class="block mb-6 text-center py-2.5 rounded-lg font-semibold shadow btn-blue">
      <i class="fas fa-plus-circle mr-1"></i> নতুন উইথড্রাল রিকোয়েস্ট
    </a>
  @endif

  @if($withdraws->isEmpty())
    <div class="card p-4 text-center text-gray-500">
      <i class="fas fa-info-circle mr-1 text-blue-500"></i>
      এই ক্যাটাগরিতে কোনো উইথড্রাল রিকোয়েস্ট পাওয়া যায়নি।
    </div>
  @else
    <ul class="space-y-4">
      @foreach($withdraws as $item)
        <li class="card p-4">

          <div class="flex justify-between mb-2 text-xs text-gray-500">
            <span>
              <i class="fas fa-calendar-alt mr-1 text-blue-500"></i>
              {{ $item->created_at->format('d M, Y h:i A') }}
            </span>

            <span class="status-pill text-blue-700 bg-blue-50">
              <i class="fas fa-circle mr-1 text-[8px] text-blue-500"></i>
              {{ $statusLabels[$item->status] ?? ucfirst($item->status) }}
            </span>
          </div>

          <div class="text-gray-700 text-sm leading-relaxed space-y-1">
            <p><i class="fas fa-credit-card mr-1 text-blue-500"></i>
              <strong>মেথড:</strong> {{ $item->method->name ?? 'N/A' }}
            </p>
            <p><i class="fas fa-list-alt mr-1 text-blue-500"></i>
              <strong>টাইপ:</strong> {{ $item->type->name ?? 'N/A' }}
            </p>
            <p><i class="fas fa-phone-alt mr-1 text-blue-500"></i>
              <strong>নাম্বার:</strong> {{ $item->number }}
            </p>
            <p><i class="fas fa-coins mr-1 text-blue-500"></i>
              <strong>পরিমাণ:</strong> ৳{{ number_format($item->amount, 2) }}
            </p>
            <p><i class="fas fa-receipt mr-1 text-blue-500"></i>
              <strong>রিকোয়েস্ট আইডি:</strong> {{ $item->transaction_id ?: ('#' . $item->id) }}
            </p>
          </div>

          @if(!empty($item->histories) && $item->histories->isNotEmpty())
            <div class="mt-3 border-t border-blue-100 pt-3">
              <div class="mb-2 text-xs font-extrabold text-blue-700">স্ট্যাটাস ট্রেইল</div>
              <div class="space-y-2">
                @foreach($item->histories->take(3) as $history)
                  <div class="rounded-lg bg-blue-50 px-3 py-2 text-xs text-slate-700">
                    <div class="font-bold">
                      {{ $eventLabels[$history->event] ?? $history->event }}
                      @if($history->to_status)
                        → {{ $statusLabels[$history->to_status] ?? $history->to_status }}
                      @endif
                    </div>
                    <div class="text-[11px] text-slate-500">
                      {{ optional($history->created_at)->format('d M, Y h:i A') ?? 'N/A' }}
                    </div>
                    @if($history->note)
                      <div class="mt-1 text-[11px]">{{ $history->note }}</div>
                    @endif
                  </div>
                @endforeach
              </div>
            </div>
          @endif

        </li>
      @endforeach
    </ul>
  @endif

</div>
@endsection
