@extends('layout.user')

@section('content')
  @php
    $brand = '#2563eb';
    $ink = '#0f172a';
    $muted = '#64748b';
    $pageBg = '#eef6ff';
    $verifyFee = round((float) ($verifyFee ?? 0), 2);
    $voucherBalance = round((float) ($voucherBalance ?? 0), 2);
    $hasEnoughVoucher = $voucherBalance >= $verifyFee && $verifyFee > 0;
    $tutorialLink = trim((string) ($currentProjectTutorialLink ?? ''));
    $tutorialType = trim((string) ($currentProjectTutorialPlayerType ?? ''));
    $tutorialSrc = trim((string) ($currentProjectTutorialPlayerSrc ?? ''));
    $tutorialTitle = trim((string) ($currentProjectTutorialTitle ?? '')) ?: 'একাউন্ট ভেরিফাই ভিডিও';
    $hasTutorialLink = $tutorialLink !== '' && $tutorialLink !== '#' && $tutorialType !== '' && $tutorialSrc !== '';
  @endphp

  <style>
    body {
      background:
        radial-gradient(circle at top left, rgba(249, 115, 22, .15), transparent 30%),
        radial-gradient(circle at top right, rgba(37, 99, 235, .18), transparent 32%),
        linear-gradient(180deg, #eef4ff 0%, #fff7ed 48%, #f8fafc 100%);
    }

    .activation-shell {
      max-width: 560px;
      margin: 0 auto;
      padding: 18px 12px 96px;
      font-family: 'Hind Siliguri', sans-serif;
    }

    .activation-card {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 250, 255, 0.98) 100%);
      border: 1px solid rgba(37, 99, 235, .16);
      border-radius: 28px;
      box-shadow: 0 26px 60px rgba(37, 99, 235, .14);
      overflow: hidden;
      text-align: center;
    }

    .activation-hero {
      padding: 24px 20px 18px;
      background:
        radial-gradient(circle at top left, rgba(249, 115, 22, .18), transparent 34%),
        radial-gradient(circle at top right, rgba(37, 99, 235, .24), transparent 38%),
        linear-gradient(135deg, #eff6ff 0%, #fff7ed 58%, #ffffff 100%);
    }

    .activation-badge {
      display: inline-flex;
      align-items: center;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(249, 115, 22, .12);
      color: #c2410c;
      font-size: 12px;
      font-weight: 900;
      margin: 0 auto 14px;
      box-shadow: inset 0 0 0 1px rgba(249, 115, 22, .14);
    }

    .activation-title {
      font-size: 29px;
      line-height: 1.42;
      font-weight: 900;
      color:
        {{ $ink }}
      ;
      margin: 0;
      text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
    }

    .activation-body {
      padding: 18px 20px 22px;
    }

    .flash {
      border-radius: 18px;
      padding: 12px 14px;
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 14px;
    }

    .flash.error {
      background: #fff1f2;
      border: 1px solid rgba(244, 63, 94, .18);
      color: #9f1239;
    }

    .flash.info {
      background: #eff6ff;
      border: 1px solid rgba(37, 99, 235, .15);
      color: #1d4ed8;
    }

    .fee-panel {
      display: grid;
      gap: 8px;
      justify-items: center;
      padding: 22px 18px;
      border-radius: 24px;
      background:
        radial-gradient(circle at top, rgba(255, 255, 255, .15), transparent 50%),
        linear-gradient(135deg, #0f172a 0%, #1d4ed8 52%, #f97316 100%);
      color: #fff;
      box-shadow: 0 20px 38px rgba(29, 78, 216, .24);
    }

    .fee-label {
      font-size: 14px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      opacity: .92;
    }

    .fee-amount {
      font-size: 40px;
      font-weight: 900;
      line-height: 1;
      text-shadow: 0 2px 14px rgba(15, 23, 42, .22);
    }

    .pending-note {
      margin-top: 14px;
      border-radius: 18px;
      padding: 12px 14px;
      border: 1px dashed rgba(37, 99, 235, .24);
      color: #1e40af;
      background: rgba(219, 234, 254, .55);
      font-size: 13px;
      font-weight: 700;
    }

    .action-stack {
      display: grid;
      gap: 12px;
      margin-top: 18px;
    }

    .action-btn,
    .action-link,
    .action-submit {
      width: 100%;
      border: none;
      border-radius: 18px;
      padding: 15px 16px;
      font-size: 15px;
      font-weight: 900;
      text-align: center;
      text-decoration: none;
      cursor: pointer;
      transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    }

    .action-btn:hover,
    .action-link:hover,
    .action-submit:hover {
      transform: translateY(-1px);
    }

    .action-btn.primary,
    .action-submit.primary {
      background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
      color: #fff;
      box-shadow: 0 14px 26px rgba(20, 184, 166, .22);
    }

    .action-link.secondary {
      display: block;
      background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
      color: #fff;
      box-shadow: 0 14px 28px rgba(37, 99, 235, .22);
    }

    .action-btn:disabled,
    .action-submit:disabled {
      opacity: .55;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .tiny-note {
      margin-top: 12px;
      text-align: center;
      font-size: 12px;
      color:
        {{ $muted }}
      ;
      font-weight: 700;
    }

    .tutorial-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px 16px;
      margin-bottom: 16px;
      border-radius: 20px;
      background: linear-gradient(135deg, rgba(37, 99, 235, .10) 0%, rgba(255, 255, 255, .95) 100%);
      border: 1px solid rgba(37, 99, 235, .20);
      text-align: left;
      box-shadow: 0 14px 28px rgba(37, 99, 235, .10);
    }

    .tutorial-link:hover {
      transform: translateY(-1px);
      box-shadow: 0 18px 34px rgba(37, 99, 235, .14);
    }

    .tutorial-icon {
      width: 48px;
      height: 48px;
      border-radius: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
      color: #fff;
      font-size: 19px;
      box-shadow: 0 10px 20px rgba(37, 99, 235, .22);
      flex: 0 0 auto;
    }

    .tutorial-arrow {
      width: 36px;
      height: 36px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      color: #2563eb;
      border: 1px solid rgba(37, 99, 235, .18);
      flex: 0 0 auto;
    }

    .verify-modal {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, .54);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px 14px;
      z-index: 9999;
    }

    .verify-modal.is-open {
      display: flex;
    }

    .verify-dialog {
      width: min(100%, 420px);
      max-height: min(88vh, 720px);
      background: #fff;
      border-radius: 28px;
      overflow: hidden;
      box-shadow: 0 28px 64px rgba(15, 23, 42, .28);
      text-align: center;
      display: flex;
      flex-direction: column;
    }

    .verify-top {
      padding: 22px 20px 16px;
      background:
        radial-gradient(circle at top left, rgba(249, 115, 22, .18), transparent 35%),
        radial-gradient(circle at top right, rgba(20, 184, 166, .22), transparent 35%),
        linear-gradient(135deg, #f8fafc 0%, #fff7ed 100%);
    }

    .verify-kicker {
      display: inline-flex;
      padding: 7px 11px;
      border-radius: 999px;
      background: rgba(20, 184, 166, .10);
      color: #0f766e;
      font-size: 12px;
      font-weight: 900;
      margin: 0 auto 10px;
    }

    .verify-title {
      margin: 0;
      font-size: 22px;
      line-height: 1.35;
      color:
        {{ $ink }}
      ;
      font-weight: 900;
    }

    .verify-body {
      padding: 18px 20px 22px;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .verify-copy {
      margin: 0 0 14px;
      color: #334155;
      font-size: 14px;
      line-height: 1.7;
      font-weight: 700;
    }

    .verify-metrics {
      display: grid;
      gap: 10px;
      margin-bottom: 16px;
    }

    .metric {
      display: grid;
      justify-items: center;
      text-align: center;
      gap: 8px;
      padding: 13px 14px;
      border-radius: 18px;
      background: #f8fafc;
      border: 1px solid rgba(148, 163, 184, .14);
    }

    .metric-label {
      color:
        {{ $muted }}
      ;
      font-size: 13px;
      font-weight: 700;
    }

    .metric-value {
      color:
        {{ $ink }}
      ;
      font-size: 17px;
      font-weight: 900;
    }

    .verify-state {
      border-radius: 18px;
      padding: 13px 14px;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.6;
      margin-bottom: 16px;
    }

    .verify-state.ok {
      color: #166534;
      background: rgba(22, 163, 74, .10);
      border: 1px solid rgba(22, 163, 74, .16);
    }

    .verify-state.low {
      color: #be123c;
      background: rgba(244, 63, 94, .08);
      border: 1px solid rgba(244, 63, 94, .16);
    }

    .verify-actions {
      display: grid;
      gap: 10px;
    }

    .verify-close {
      border: none;
      background: #e2e8f0;
      color: #334155;
      border-radius: 16px;
      padding: 13px 14px;
      font-size: 14px;
      font-weight: 900;
      cursor: pointer;
    }

    @media (max-width: 520px) {
      .activation-title {
        font-size: 23px;
      }

      .fee-amount {
        font-size: 34px;
      }

      .verify-modal {
        align-items: flex-end;
        padding: 12px 10px calc(16px + env(safe-area-inset-bottom));
      }

      .verify-dialog {
        width: min(100%, 360px);
        max-height: 82vh;
        border-radius: 24px;
      }

      .verify-top {
        padding: 18px 16px 12px;
      }

      .verify-title {
        font-size: 19px;
      }

      .verify-body {
        padding: 14px 16px 18px;
      }

      .verify-copy {
        font-size: 13px;
        line-height: 1.6;
      }

      .metric-value {
        font-size: 16px;
      }
    }
  </style>

  <div class="activation-shell">
    <div class="activation-card">
      <div class="activation-hero">
        <div class="activation-badge">একাউন্ট ভেরিফিকেশন</div>
        <h1 class="activation-title">আপনার সফলতার প্রথম ধাপ শুরু হউক, <br> একাউন্ট ভেরিফিকেশন দিয়ে, <br> এখনই ভেরিফাই
          করুন</h1>
      </div>

      <div class="activation-body">
        @if($errors->any())
          <div class="flash error">
            @foreach($errors->all() as $error)
              <div>{{ $error }}</div>
            @endforeach
          </div>
        @endif

        @if(session('success'))
          <div class="flash info">{{ session('success') }}</div>
        @endif

        @include('partials.mobile_action_cards', [
          'primaryVisible' => false,
          'videoVisible' => $hasTutorialLink,
          'renderDisabledVideo' => false,
          'videoLink' => $tutorialLink,
          'videoType' => $tutorialType,
          'videoSrc' => $tutorialSrc,
          'videoTitle' => $tutorialTitle,
          'videoLabel' => 'ভিডিও',
          'videoSubtitle' => 'ভাউচার বা direct verify-এর নিয়ম আগে দেখে নিন',
        ])

        <div class="fee-panel">
          <div class="fee-label">সাবস্ক্রিপশন ফি</div>
          <div class="fee-amount">৳ {{ number_format($verifyFee, 2) }}</div>
        </div>

        @if(!empty($hasPendingRequest))
          <div class="pending-note">
            আপনার আগের activation request pending থাকলেও এখন সরাসরি বা ভাউচার দিয়ে verify করতে পারবেন।
          </div>
        @endif

        <div class="action-stack">
          <button type="button" class="action-btn primary" id="openVoucherVerify" @disabled($verifyFee <= 0)>
            ভাউচার থেকে ভেরিফাই করুন
          </button>

          <form method="POST" action="{{ route('activate.pay') }}">
            @csrf
            <button type="submit" class="action-submit primary"
              style="background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%); box-shadow: 0 14px 26px rgba(37,99,235,.22);"
              @disabled($verifyFee <= 0)>
              সরাসরি ভেরিফাই করুন
            </button>
          </form>
        </div>

        <div class="tiny-note">ভেরিফিকেশন সম্পন্ন হলে আপনার একাউন্ট সাথে সাথে সক্রিয় হয়ে যাবে।</div>
      </div>
    </div>
  </div>

  <div class="verify-modal" id="voucherVerifyModal" aria-hidden="true">
    <div class="verify-dialog" role="dialog" aria-modal="true" aria-labelledby="voucherVerifyTitle">
      <div class="verify-top">
        <div class="verify-kicker">Voucher Verification</div>
        <h2 class="verify-title" id="voucherVerifyTitle">ভাউচার ব্যালেন্স দিয়ে ভেরিফিকেশন নিশ্চিত করুন</h2>
      </div>

      <div class="verify-body">
        <p class="verify-copy">আপনি এখন ভাউচার ব্যালেন্স ব্যবহার করে আপনার একাউন্ট ভেরিফাই করতে যাচ্ছেন। কনফার্ম করলে সাথে
          সাথে ভেরিফিকেশন হবে।</p>

        <div class="verify-metrics">
          <div class="metric">
            <span class="metric-label">ভেরিফিকেশন ফি</span>
            <span class="metric-value">৳ {{ number_format($verifyFee, 2) }}</span>
          </div>
          <div class="metric">
            <span class="metric-label">আপনার ভাউচারে আছে</span>
            <span class="metric-value">৳ {{ number_format($voucherBalance, 2) }}</span>
          </div>
        </div>

        @if($hasEnoughVoucher)
          <div class="verify-state ok">আপনার ভাউচার ব্যালেন্স যথেষ্ট আছে। নিচের কনফার্ম করুন বাটনে ক্লিক করলে ভেরিফিকেশন
            সম্পন্ন হয়ে যাবে।</div>

          <div class="verify-actions">
            <form method="POST" action="{{ route('activation.voucher') }}" id="voucherVerifyForm">
              @csrf
              <button type="submit" class="action-submit primary" id="voucherConfirmButton">কনফার্ম করুন</button>
            </form>

            <button type="button" class="verify-close" data-close-modal>এখন না</button>
          </div>
        @else
          <div class="verify-state low">আপনার ভাউচারে পর্যাপ্ত টাকা নেই। আগে ভাউচারে টাকা যোগ করুন, তারপর আবার কনফার্ম করুন।
          </div>

          <div class="verify-actions">
            <a href="{{ route('addmoney.form') }}" class="action-link secondary">ভাউচারে টাকা এড করুন</a>
            <button type="button" class="verify-close" data-close-modal>বন্ধ করুন</button>
          </div>
        @endif
      </div>
    </div>
  </div>

  <script>
    (() => {
      const modal = document.getElementById('voucherVerifyModal');
      const openButton = document.getElementById('openVoucherVerify');
      const closeButtons = document.querySelectorAll('[data-close-modal]');
      const voucherForm = document.getElementById('voucherVerifyForm');
      const confirmButton = document.getElementById('voucherConfirmButton');

      if (!modal || !openButton) {
        return;
      }

      const openModal = () => {
        modal.classList.add('is-open');
        modal.setAttribute('aria-hidden', 'false');
        document.body.style.overflow = 'hidden';
      };

      const closeModal = () => {
        modal.classList.remove('is-open');
        modal.setAttribute('aria-hidden', 'true');
        document.body.style.overflow = '';
      };

      openButton.addEventListener('click', openModal);

      closeButtons.forEach((button) => {
        button.addEventListener('click', closeModal);
      });

      modal.addEventListener('click', (event) => {
        if (event.target === modal) {
          closeModal();
        }
      });

      document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape' && modal.classList.contains('is-open')) {
          closeModal();
        }
      });

      if (voucherForm && confirmButton) {
        voucherForm.addEventListener('submit', () => {
          confirmButton.disabled = true;
          confirmButton.textContent = 'ভেরিফিকেশন হচ্ছে...';
        });
      }
    })();
  </script>
@endsection
