@extends('layout.admin')

@section('title', 'Typing Job History')

@section('content')
@php
  $adminUser = auth('admin')->user();
  $canViewSettings = $adminUser?->hasAnyProjectPermission(['typing_job', 'typing_job_settings']) ?? true;
@endphp
<div class="min-h-screen bg-slate-50">
  <div class="mx-auto max-w-7xl px-3 sm:px-4 py-4 sm:py-6 space-y-5">
    <div class="flex items-start justify-between gap-3 flex-wrap">
      <div>
        <h1 class="text-xl sm:text-2xl font-extrabold text-slate-900 leading-tight">Typing Job History</h1>
        <p class="mt-1 text-xs sm:text-sm font-semibold text-slate-500">
          রেফার কোড, নাম, মোবাইল, ইমেইল বা user ID দিয়ে search করলে member কতটি task করেছে, কত টাকা ইনকাম করেছে এবং সব task history দেখতে পারবেন।
        </p>
      </div>
      <div class="flex flex-wrap gap-2">
        @if($canViewSettings)
          <a href="{{ route('admin.typing-job.settings.edit') }}"
             class="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm font-extrabold text-slate-700 hover:bg-slate-50">
            <i class="fa-solid fa-sliders"></i>
            <span>Typing Settings</span>
          </a>
        @endif
        <a href="{{ route('admin.dashboard') }}"
           class="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm font-extrabold text-slate-700 hover:bg-slate-50">
          <i class="fa-solid fa-arrow-left"></i>
          <span>Dashboard</span>
        </a>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
      <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-[0_14px_30px_rgba(2,6,23,0.06)]">
        <div class="text-xs font-extrabold uppercase tracking-[0.16em] text-slate-400">Total Tasks</div>
        <div class="mt-2 text-3xl font-black text-slate-900">{{ number_format((int) ($summary['total_tasks'] ?? 0)) }}</div>
        <div class="mt-2 text-xs font-semibold text-slate-500">সব member মিলিয়ে সম্পন্ন task</div>
      </div>
      <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-[0_14px_30px_rgba(2,6,23,0.06)]">
        <div class="text-xs font-extrabold uppercase tracking-[0.16em] text-slate-400">Total Users</div>
        <div class="mt-2 text-3xl font-black text-slate-900">{{ number_format((int) ($summary['total_users'] ?? 0)) }}</div>
        <div class="mt-2 text-xs font-semibold text-slate-500">যারা অন্তত ১টি task করেছে</div>
      </div>
      <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-[0_14px_30px_rgba(2,6,23,0.06)]">
        <div class="text-xs font-extrabold uppercase tracking-[0.16em] text-slate-400">Total Earned</div>
        <div class="mt-2 text-3xl font-black text-slate-900">৳{{ number_format((float) ($summary['total_earned'] ?? 0), 2) }}</div>
        <div class="mt-2 text-xs font-semibold text-slate-500">Typing job reward total</div>
      </div>
      <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-[0_14px_30px_rgba(2,6,23,0.06)]">
        <div class="text-xs font-extrabold uppercase tracking-[0.16em] text-slate-400">Filtered Result</div>
        <div class="mt-2 text-3xl font-black text-slate-900">{{ number_format((int) ($summary['filtered_tasks'] ?? 0)) }}</div>
        <div class="mt-2 text-xs font-semibold text-slate-500">
          {{ number_format((int) ($summary['filtered_users'] ?? 0)) }} member • ৳{{ number_format((float) ($summary['filtered_earned'] ?? 0), 2) }}
        </div>
      </div>
    </div>

    <div class="rounded-2xl border border-slate-200 bg-white p-4 sm:p-5 shadow-[0_14px_30px_rgba(2,6,23,0.06)]">
      <form method="GET" action="{{ route('admin.typing-job.index') }}" class="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_auto_auto] gap-3">
        <input
          type="text"
          name="search"
          value="{{ $search }}"
          placeholder="রেফার কোড, নাম, ইমেইল, মোবাইল বা user ID দিয়ে search করুন"
          class="w-full rounded-xl border border-slate-300 bg-white px-4 py-3 text-sm font-bold text-slate-900 outline-none focus:border-slate-900 focus:ring-4 focus:ring-slate-100"
        />
        <button type="submit"
                class="rounded-xl bg-slate-900 px-5 py-3 text-sm font-extrabold text-white hover:bg-slate-800">
          <i class="fa-solid fa-magnifying-glass mr-2"></i> Search
        </button>
        <a href="{{ route('admin.typing-job.index') }}"
           class="rounded-xl border border-slate-200 bg-white px-5 py-3 text-center text-sm font-extrabold text-slate-700 hover:bg-slate-50">
          <i class="fa-solid fa-rotate-left mr-2"></i> Reset
        </a>
      </form>
    </div>

    <section class="rounded-2xl border border-slate-200 bg-white shadow-[0_14px_30px_rgba(2,6,23,0.06)] overflow-hidden">
      <div class="px-4 sm:px-5 py-4 border-b border-slate-100">
        <h2 class="text-base sm:text-lg font-extrabold text-slate-900">Member Wise Summary</h2>
      </div>

      @if(!$tableAvailable)
        <div class="px-5 py-6 text-sm font-bold text-amber-700 bg-amber-50 border border-amber-200">
          `typing_job_submissions` table এখনো ready না। Migration run হলে member history এখানে show হবে।
        </div>
      @else
        <div class="overflow-x-auto">
          <table class="min-w-[1120px] w-full divide-y divide-slate-200">
            <thead class="bg-slate-50">
              <tr class="text-left text-[11px] font-extrabold uppercase tracking-[0.14em] text-slate-500">
                <th class="px-4 py-3">Member</th>
                <th class="px-4 py-3">Referral</th>
                <th class="px-4 py-3">Upline / Referrer</th>
                <th class="px-4 py-3">Contact</th>
                <th class="px-4 py-3">Status</th>
                <th class="px-4 py-3">Tasks</th>
                <th class="px-4 py-3">Earned</th>
                <th class="px-4 py-3">Last Task</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-slate-100 bg-white text-sm">
              @forelse($memberSummaries as $member)
                <tr class="align-top">
                  <td class="px-4 py-4">
                    <div class="font-extrabold text-slate-900">{{ $member->name ?: 'Unknown User' }}</div>
                    <div class="mt-1 text-xs font-semibold text-slate-500">User ID: {{ $member->id }}</div>
                  </td>
                  <td class="px-4 py-4 font-bold text-slate-700">{{ $member->referral_code ?: '—' }}</td>
                  <td class="px-4 py-4">
                    <div class="font-extrabold text-slate-900">{{ $member->typing_job_upline_name ?: '—' }}</div>
                    <div class="mt-1 text-xs font-semibold text-slate-500">
                      Ref: {{ $member->typing_job_upline_referral ?: '—' }} • ID: {{ $member->typing_job_upline_user_id ?: '—' }}
                    </div>
                    <div class="mt-1 text-xs font-semibold text-slate-400">
                      {{ $member->typing_job_upline_mobile ?: '—' }}
                    </div>
                  </td>
                  <td class="px-4 py-4">
                    <div class="font-bold text-slate-800">{{ $member->mobile ?: 'No mobile' }}</div>
                    <div class="mt-1 text-xs font-semibold text-slate-500">{{ $member->email ?: 'No email' }}</div>
                  </td>
                  <td class="px-4 py-4">
                    <div class="inline-flex rounded-full px-3 py-1 text-[11px] font-extrabold {{ (int) $member->is_active === 1 ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700' }}">
                      {{ (int) $member->is_active === 1 ? 'Verified' : 'Not Verified' }}
                    </div>
                  </td>
                  <td class="px-4 py-4 font-extrabold text-slate-900">{{ (int) ($member->typing_job_submissions_count ?? 0) }}</td>
                  <td class="px-4 py-4 font-extrabold text-slate-900">৳{{ number_format((float) ($member->typing_job_earned ?? 0), 2) }}</td>
                  <td class="px-4 py-4">
                    <div class="font-bold text-slate-900">
                      {{ $member->last_typing_job_at ? \Illuminate\Support\Carbon::parse($member->last_typing_job_at)->format('d M Y') : '—' }}
                    </div>
                    <div class="mt-1 text-xs font-semibold text-slate-500">
                      {{ $member->last_typing_job_at ? \Illuminate\Support\Carbon::parse($member->last_typing_job_at)->format('h:i A') : '' }}
                    </div>
                  </td>
                </tr>
              @empty
                <tr>
                  <td colspan="8" class="px-4 py-10 text-center text-sm font-bold text-slate-500">
                    কোনো member typing job history পাওয়া যায়নি।
                  </td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>

        <div class="px-4 py-4 border-t border-slate-100">
          {{ $memberSummaries->links() }}
        </div>
      @endif
    </section>

    <section class="rounded-2xl border border-slate-200 bg-white shadow-[0_14px_30px_rgba(2,6,23,0.06)] overflow-hidden">
      <div class="px-4 sm:px-5 py-4 border-b border-slate-100">
        <h2 class="text-base sm:text-lg font-extrabold text-slate-900">Task History</h2>
      </div>

      @if($tableAvailable)
        <div class="overflow-x-auto">
          <table class="min-w-[1320px] w-full divide-y divide-slate-200">
            <thead class="bg-slate-50">
              <tr class="text-left text-[11px] font-extrabold uppercase tracking-[0.14em] text-slate-500">
                <th class="px-4 py-3">Member</th>
                <th class="px-4 py-3">Referral</th>
                <th class="px-4 py-3">Upline / Referrer</th>
                <th class="px-4 py-3">Expression</th>
                <th class="px-4 py-3">Correct</th>
                <th class="px-4 py-3">Submitted</th>
                <th class="px-4 py-3">Reward</th>
                <th class="px-4 py-3">Time</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-slate-100 bg-white text-sm">
              @forelse($submissions as $submission)
                <tr class="align-top">
                  <td class="px-4 py-4">
                    <div class="font-extrabold text-slate-900">{{ $submission->user?->name ?: 'Unknown User' }}</div>
                    <div class="mt-1 text-xs font-semibold text-slate-500">{{ $submission->user?->mobile ?: 'No mobile' }}</div>
                  </td>
                  <td class="px-4 py-4 font-bold text-slate-700">{{ $submission->user?->referral_code ?: '—' }}</td>
                  <td class="px-4 py-4">
                    <div class="font-extrabold text-slate-900">{{ $submission->upline_name ?: '—' }}</div>
                    <div class="mt-1 text-xs font-semibold text-slate-500">
                      Ref: {{ $submission->upline_referral_code ?: '—' }} • ID: {{ $submission->upline_user_id ?: '—' }}
                    </div>
                    <div class="mt-1 text-xs font-semibold text-slate-400">{{ $submission->upline_mobile ?: '—' }}</div>
                  </td>
                  <td class="px-4 py-4 font-extrabold text-slate-900">{{ $submission->expression }}</td>
                  <td class="px-4 py-4 font-bold text-slate-700">{{ $submission->correct_answer }}</td>
                  <td class="px-4 py-4 font-bold text-slate-700">{{ $submission->user_answer }}</td>
                  <td class="px-4 py-4 font-extrabold text-slate-900">৳{{ number_format((float) $submission->reward_amount, 2) }}</td>
                  <td class="px-4 py-4">
                    <div class="font-bold text-slate-900">{{ $submission->submitted_at?->format('d M Y') ?: '—' }}</div>
                    <div class="mt-1 text-xs font-semibold text-slate-500">{{ $submission->submitted_at?->format('h:i A') ?: '' }}</div>
                  </td>
                </tr>
              @empty
                <tr>
                  <td colspan="8" class="px-4 py-10 text-center text-sm font-bold text-slate-500">
                    কোনো typing task history পাওয়া যায়নি।
                  </td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>

        <div class="px-4 py-4 border-t border-slate-100">
          {{ $submissions->links() }}
        </div>
      @endif
    </section>
  </div>
</div>
@endsection
