@extends('layout.user')

@section('title', 'ওয়েলকাম অফার')

@section('content')
@php
  $formattedAmount = number_format((float) $welcomeOfferAmount, 2);
  $claimedAmountFormatted = number_format((float) ($welcomeOfferClaim->reward_amount ?? $welcomeOfferAmount), 2);
  $themeFrom = (string) ($settings->icon_color ?? '#0B5D1E');
  $themeTo = (string) ($settings->hover_color ?? '#0F7A2E');
  $pageTitle = (string) ($welcomeOfferContent['page_title'] ?? ('টার্গেট পূরণ করলে পাবেন ৳' . $formattedAmount));
  $pageSummary = (string) ($welcomeOfferContent['page_summary'] ?? '');
  $statusText = (string) ($allTargetsCompleted
      ? ($welcomeOfferContent['status_ready_text'] ?? 'টার্গেট পূরণ হয়েছে')
      : ($welcomeOfferContent['status_pending_text'] ?? 'Verified member count live data থেকে চলছে'));
  $noticeTitle = (string) ($welcomeOfferContent['notice_title'] ?? 'আপডেট নোটিশ');
  $noticeBody = (string) ($welcomeOfferContent['notice_body'] ?? '');
  $levelOneNote = (string) ($welcomeOfferContent['level_one_note'] ?? '');
  $levelTwoNote = (string) ($welcomeOfferContent['level_two_note'] ?? '');
  $historyNote = (string) ($welcomeOfferContent['history_note'] ?? '');
  $claimSource = (string) ($welcomeOfferClaim->claim_source ?? '');
  $claimText = $claimSource === 'admin_manual_grant'
      ? 'আপনাকে এই অফারটি প্রদান করা হয়েছে।'
      : 'আপনি এই অফারটি সফলভাবে গ্রহণ করেছেন।';
  $claimDateLabel = $welcomeOfferClaim?->claimed_at?->format('d M Y, h:i A');
  $profilePhotoRaw = (string) (auth()->user()?->profile_photo ?? '');
  if ($profilePhotoRaw !== '') {
    if (preg_match('/^https?:\/\//i', $profilePhotoRaw)) {
      $profilePhotoUrl = $profilePhotoRaw;
    } elseif (str_contains($profilePhotoRaw, '/')) {
      $profilePhotoUrl = asset(ltrim($profilePhotoRaw, '/'));
    } else {
      $profilePhotoUrl = asset('images/profile/' . $profilePhotoRaw);
    }
  } else {
    $profilePhotoUrl = asset('images/profile/profile.png');
  }
@endphp

<style>
  .wo-shell{
    --wo-pri: {{ $themeFrom }};
    --wo-pri-2: {{ $themeTo }};
    --wo-soft: color-mix(in srgb, var(--wo-pri) 10%, white);
    --wo-soft-2: color-mix(in srgb, var(--wo-pri-2) 12%, white);
    --wo-ring: color-mix(in srgb, var(--wo-pri) 20%, white);
    --wo-ring-strong: color-mix(in srgb, var(--wo-pri) 36%, white);
    --wo-text-soft: color-mix(in srgb, var(--wo-pri) 45%, #0f172a);
    --wo-shadow: color-mix(in srgb, var(--wo-pri) 22%, transparent);
    text-align:center;
  }
  .wo-shell{max-width:980px;margin:0 auto;padding:8px 4px 96px}
  .wo-stack{display:grid;gap:16px}
  .wo-flash{
    border-radius:20px;
    padding:14px 16px;
    font-size:13px;
    font-weight:800;
    border:1px solid;
  }
  .wo-flash-success{background:#ecfdf5;border-color:#a7f3d0;color:#047857}
  .wo-flash-error{background:#fff1f2;border-color:#fecdd3;color:#be123c}
  .wo-claim-banner{
    position:relative;
    overflow:hidden;
    display:grid;
    grid-template-columns:84px minmax(0,1fr) auto;
    gap:16px;
    align-items:center;
    border-radius:26px;
    padding:18px;
    background:
      radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 26%),
      linear-gradient(135deg, var(--wo-pri) 0%, var(--wo-pri-2) 100%);
    color:#fff;
    box-shadow:0 20px 40px var(--wo-shadow);
    justify-items:center;
    text-align:center;
  }
  .wo-claim-banner--centered{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
    padding:22px 18px;
  }
  .wo-claim-photo{
    width:84px;
    height:84px;
    display:block;
    margin:0 auto;
    border-radius:24px;
    object-fit:cover;
    border:3px solid rgba(255,255,255,.32);
    background:rgba(255,255,255,.18);
  }
  .wo-claim-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 11px;
    border-radius:999px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.2);
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .wo-claim-title{margin:10px 0 0;font-size:25px;line-height:1.15;font-weight:900}
  .wo-claim-copy{margin:8px auto 0;font-size:13px;line-height:1.7;font-weight:700;color:rgba(255,255,255,.92)}
  .wo-claim-meta{
    display:grid;
    gap:10px;
    justify-items:center;
  }
  .wo-claim-banner--centered .wo-claim-meta{justify-items:center}
  .wo-claim-banner--centered .wo-claim-copy{max-width:560px}
  .wo-claim-pill{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:9px 12px;
    border-radius:999px;
    background:rgba(15,23,42,.18);
    border:1px solid rgba(255,255,255,.18);
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
  }
  .wo-hero{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    padding:24px 18px;
    background:
      radial-gradient(circle at top left, rgba(255,255,255,.24), transparent 28%),
      radial-gradient(circle at bottom right, rgba(255,255,255,.16), transparent 26%),
      linear-gradient(135deg, var(--wo-pri) 0%, var(--wo-pri-2) 100%);
    color:#fff;
    box-shadow:0 22px 48px var(--wo-shadow);
    text-align:center;
  }
  .wo-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.22);
    font-size:12px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
  }
  .wo-hero-grid{display:grid;grid-template-columns:1.45fr .9fr;gap:16px;align-items:end;margin-top:16px;justify-items:center}
  .wo-title{margin:0;font-size:31px;line-height:1.12;font-weight:900}
  .wo-copy{margin:10px auto 0;font-size:14px;line-height:1.7;max-width:520px;font-weight:700;color:rgba(255,255,255,.92)}
  .wo-amount-card{
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.24);
    border-radius:24px;
    padding:16px;
    backdrop-filter:blur(8px);
    text-align:center;
  }
  .wo-amount-label{font-size:13px;font-weight:800;color:rgba(255,255,255,.88)}
  .wo-amount-value{margin-top:6px;font-size:34px;line-height:1;font-weight:900;letter-spacing:-.03em}
  .wo-amount-note{margin-top:8px;font-size:12px;font-weight:700;color:rgba(255,255,255,.84);line-height:1.6}
  .wo-claim-btn{
    margin-top:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    padding:13px 14px;
    border:0;
    border-radius:16px;
    background:#fff;
    color:var(--wo-pri);
    font-size:14px;
    font-weight:900;
    box-shadow:0 14px 30px rgba(15,23,42,.14);
  }
  .wo-claim-btn:hover{opacity:.95}
  .wo-state{
    margin-top:14px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    background:rgba(15,23,42,.18);
  }
  .wo-note{
    background:#fff;
    border:1px solid var(--wo-ring);
    border-radius:24px;
    padding:18px;
    box-shadow:0 16px 32px rgba(15,23,42,.05);
    text-align:center;
  }
  .wo-note--claimed{
    text-align:center;
    padding:22px 18px;
  }
  .wo-note-photo{
    width:88px;
    height:88px;
    border-radius:26px;
    object-fit:cover;
    border:3px solid var(--wo-ring);
    margin:0 auto 14px;
    background:#fff;
    box-shadow:0 12px 26px rgba(15,23,42,.08);
  }
  .wo-note-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:0 auto 12px;
    padding:8px 12px;
    border-radius:999px;
    background:linear-gradient(135deg, var(--wo-soft) 0%, var(--wo-soft-2) 100%);
    border:1px solid var(--wo-ring);
    color:var(--wo-text-soft);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
  }
  .wo-note-title{margin:0;font-size:18px;font-weight:900;color:#0f172a}
  .wo-note-copy{margin:8px 0 0;font-size:14px;line-height:1.7;font-weight:700;color:#475569}
  .wo-note-claim-copy{
    margin:14px auto 0;
    max-width:620px;
    font-size:14px;
    line-height:1.7;
    font-weight:800;
    color:#0f172a;
  }
  .wo-note-claim-meta{
    margin-top:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .wo-note-claim-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border-radius:999px;
    background:#f8fafc;
    border:1px solid #cbd5e1;
    padding:10px 13px;
    font-size:12px;
    font-weight:900;
    color:#334155;
  }
  .wo-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px;justify-items:center}
  .wo-point{
    border-radius:18px;
    background:linear-gradient(135deg, var(--wo-soft) 0%, var(--wo-soft-2) 100%);
    border:1px solid var(--wo-ring);
    padding:14px;
  }
  .wo-point-label{font-size:12px;font-weight:800;color:var(--wo-text-soft)}
  .wo-point-value{margin-top:8px;font-size:22px;line-height:1;font-weight:900;color:#0f172a}
  .wo-point-copy{margin-top:6px;font-size:12px;line-height:1.6;font-weight:700;color:#334155}
  .wo-card{
    display:block;
    background:#fff;
    border-radius:24px;
    padding:18px;
    border:1px solid #e2e8f0;
    box-shadow:0 14px 30px rgba(15,23,42,.05);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    text-align:center;
  }
  .wo-card:hover{
    transform:translateY(-2px);
    box-shadow:0 20px 36px rgba(15,23,42,.09);
    border-color:var(--wo-ring-strong);
  }
  .wo-card-head{
    display:grid;
    grid-template-columns:minmax(0,1.5fr) auto auto;
    gap:12px;
    align-items:center;
    justify-items:center;
  }
  .wo-card-title{margin:0;font-size:20px;font-weight:900;color:#0f172a}
  .wo-card-copy{margin:5px 0 0;font-size:13px;font-weight:700;color:#64748b;line-height:1.65}
  .wo-card-target,
  .wo-card-arrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:44px;
    border-radius:14px;
    font-weight:900;
  }
  .wo-card-target{
    padding:0 14px;
    background:linear-gradient(135deg, var(--wo-soft) 0%, var(--wo-soft-2) 100%);
    color:var(--wo-text-soft);
    border:1px solid var(--wo-ring);
    font-size:14px;
  }
  .wo-card-arrow{
    width:44px;
    background:#f8fafc;
    border:1px solid #cbd5e1;
    color:#334155;
    font-size:16px;
  }
  .wo-metrics{
    margin-top:16px;
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    gap:16px;
    align-items:center;
    justify-items:center;
  }
  .wo-count{font-size:44px;line-height:.95;font-weight:900;color:#0f172a;letter-spacing:-.04em}
  .wo-count-sub{margin-top:6px;font-size:12px;font-weight:800;color:#64748b}
  .wo-bar{
    height:14px;
    border-radius:999px;
    background:#e2e8f0;
    overflow:hidden;
  }
  .wo-bar>span{
    display:block;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--wo-pri),var(--wo-pri-2));
  }
  .wo-foot{
    margin-top:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
  }
  .wo-status{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    background:#f8fafc;
    color:#334155;
    border:1px solid #cbd5e1;
  }
  .wo-link-copy{font-size:13px;font-weight:800;color:var(--wo-pri)}
  @media (max-width:860px){
    .wo-claim-banner{grid-template-columns:1fr;justify-items:center}
    .wo-claim-meta{justify-items:center}
    .wo-claim-banner--centered{justify-items:center}
    .wo-hero-grid{grid-template-columns:1fr}
    .wo-points{grid-template-columns:1fr}
    .wo-card-head{grid-template-columns:1fr;gap:10px}
    .wo-card-arrow{display:none}
    .wo-card-target{width:100%;justify-content:center}
    .wo-metrics{grid-template-columns:1fr;gap:12px}
    .wo-count{font-size:38px}
    .wo-bar{height:16px}
    .wo-status{justify-content:center}
  }
  @media (max-width:520px){
    .wo-shell{padding-bottom:92px}
    .wo-hero{border-radius:24px;padding:20px 16px}
    .wo-title{font-size:26px}
    .wo-amount-value{font-size:30px}
    .wo-card{
      padding:18px;
      border-color:var(--wo-ring);
      box-shadow:0 18px 32px rgba(15,23,42,.08);
    }
    .wo-card-title{font-size:18px}
    .wo-count{font-size:36px}
    .wo-card-target{font-size:13px}
  }
</style>

<div class="wo-shell">
  <div class="wo-stack">
    @if(!$welcomeOfferClaim && session('success'))
      <div class="wo-flash wo-flash-success">{{ session('success') }}</div>
    @endif

    @if(session('error'))
      <div class="wo-flash wo-flash-error">{{ session('error') }}</div>
    @endif

    @if($welcomeOfferClaim)
      <section class="wo-claim-banner wo-claim-banner--centered">
        <img src="{{ $profilePhotoUrl }}" alt="" class="wo-claim-photo">

        <div>
          <div class="wo-claim-kicker">
            <i class="fa-solid fa-party-horn"></i>
            <span>Congratulations</span>
          </div>
          <h2 class="wo-claim-title">{{ auth()->user()->name }}, অভিনন্দন!</h2>
          <p class="wo-claim-copy">
            {{ $claimText }} আপনার claim history count এখন <b>1/1</b> এবং আপনি পেয়েছেন <b>৳{{ $claimedAmountFormatted }}</b>।
          </p>
        </div>

        <div class="wo-claim-meta">
          <div class="wo-claim-pill">
            <i class="fa-solid fa-badge-check"></i>
            <span>Offer নেওয়া হয়েছে</span>
          </div>
          @if($claimDateLabel)
            <div class="wo-claim-pill">
              <i class="fa-solid fa-clock-rotate-left"></i>
              <span>{{ $claimDateLabel }}</span>
            </div>
          @endif
        </div>
      </section>
    @else
      <section class="wo-hero">
        <div class="wo-kicker">
          <i class="fa-solid fa-gift"></i>
          <span>ওয়েলকাম অফার</span>
        </div>

        <div class="wo-hero-grid">
          <div>
            <h1 class="wo-title">{{ $pageTitle }}</h1>
            <p class="wo-copy">{{ $pageSummary }}</p>
            <div class="wo-state">
              <i class="fa-solid {{ $allTargetsCompleted ? 'fa-circle-check' : 'fa-clock' }}"></i>
              <span>{{ $statusText }}</span>
            </div>
          </div>

          <div class="wo-amount-card">
            <div class="wo-amount-label">বর্তমান রিওয়ার্ড</div>
            <div class="wo-amount-value">৳{{ $formattedAmount }}</div>
            @if($canClaimWelcomeOffer)
              <div class="wo-amount-note">
                আপনার target পূরণ হয়েছে। এখন একবারই এই অফারটি নিতে পারবেন।
              </div>
              <form method="POST" action="{{ route('welcome-offer.claim') }}">
                @csrf
                <button type="submit" class="wo-claim-btn">
                  <i class="fa-solid fa-gift-card"></i>
                  <span>অফারটি নিন</span>
                </button>
              </form>
            @else
              <div class="wo-amount-note">
                টার্গেট পূরণ হলে এই reward প্রযোজ্য হবে।
              </div>
            @endif
          </div>
        </div>
      </section>

      @include('partials.mobile_action_cards', [
        'primaryVisible' => false,
        'videoVisible' => ($currentProjectTutorialLink ?? '') !== '',
        'videoLink' => $currentProjectTutorialLink ?? '',
        'videoType' => $currentProjectTutorialPlayerType ?? '',
        'videoSrc' => $currentProjectTutorialPlayerSrc ?? '',
        'videoTitle' => ($currentProjectTutorialTitle ?? 'ওয়েলকাম অফার ভিডিও'),
        'videoLabel' => 'ভিডিও',
        'videoSubtitle' => 'ওয়েলকাম অফার কাজের ভিডিও দেখুন',
        'themeColor' => $themeFrom,
        'themeRing' => 'color-mix(in srgb, ' . $themeFrom . ' 36%, white)',
        'themeShadow' => 'color-mix(in srgb, ' . $themeFrom . ' 10%, transparent)',
      ])

      @foreach($levelCards as $card)
        <a href="{{ route('welcome-offer.history', ['level' => $card['level']]) }}" class="wo-card">
          <div class="wo-card-head">
            <div>
              <h2 class="wo-card-title">{{ $card['label'] }} verified member</h2>
              <p class="wo-card-copy">
                Target {{ $card['target'] }} জন। Click করলে এই level-এর verified member history খুলবে।
              </p>
            </div>
            <div class="wo-card-target">Target {{ $card['target'] }}</div>
            <div class="wo-card-arrow"><i class="fa-solid fa-arrow-right"></i></div>
          </div>

          <div class="wo-metrics">
            <div>
              <div class="wo-count">{{ $card['count'] }}</div>
              <div class="wo-count-sub">Verified member counted</div>
            </div>

            <div>
              <div class="wo-bar">
                <span style="width: {{ $card['progress_percent'] }}%"></span>
              </div>
              <div class="wo-foot">
                <div class="wo-status">
                  <i class="fa-solid {{ $card['is_complete'] ? 'fa-circle-check' : 'fa-user-clock' }}"></i>
                  <span>
                    {{ $card['is_complete'] ? 'Target complete' : ($card['remaining'] . ' জন verified member বাকি') }}
                  </span>
                </div>
                <div class="wo-link-copy">হিস্টোরি দেখুন</div>
              </div>
            </div>
          </div>
        </a>
      @endforeach
    @endif
  </div>
</div>
@endsection
