@extends('dashboard.layout')

@section('title', 'Accounts')

@section('content')
<style>
  body { background-color: var(--mob-bg); overflow-x: hidden; }
  
  @media (min-width: 768px) {
    body { max-width: 480px; margin: 0 auto; border-left: 1px solid var(--mob-border); border-right: 1px solid var(--mob-border); box-shadow: 0 0 50px rgba(0,0,0,0.1); position: relative; min-height: 100vh; }
    .mob-bottom-nav, .upgrade-sheet, .toast-notif, .ios-modal-sheet { max-width: 480px; margin: 0 auto; left: 0; right: 0; }
  }
  
  .acc-header { display: flex; align-items: center; padding: 16px 20px; padding-top: max(20px, env(safe-area-inset-top)); background: var(--mob-bg); position: sticky; top: 0; z-index: 100; }
  .acc-close-btn { background: var(--mob-surface); border: 1px solid var(--mob-border); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--mob-text); box-shadow: var(--mob-shadow-sm); transition: 0.2s; text-decoration: none; }
  .acc-close-btn:active { transform: scale(0.95); }
  .acc-header h1 { margin: 0 0 0 16px; font-size: 20px; font-weight: 800; color: var(--mob-text); }

  .acc-promo-card { background: var(--mob-primary); border-radius: var(--mob-radius-lg); padding: 28px 24px; margin: 10px 20px 24px 20px; color: white; position: relative; overflow: hidden; box-shadow: var(--mob-shadow-md); }
  .acc-promo-card::after { content: ''; position: absolute; top: -50%; right: -20%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(0, 229, 196, 0.15) 0%, transparent 70%); pointer-events: none; }
  .acc-promo-card h2 { font-size: 22px; font-weight: 800; margin: 0 0 12px 0; line-height: 1.2; letter-spacing: -0.5px; position: relative; z-index: 1; }
  .acc-promo-card p { font-size: 14px; color: rgba(255,255,255,0.8); margin: 0 0 24px 0; line-height: 1.5; max-width: 90%; position: relative; z-index: 1; }
  .acc-promo-btn { background: var(--mob-accent); color: var(--mob-primary); border: none; padding: 12px 24px; border-radius: 20px; font-size: 14px; font-weight: 800; cursor: pointer; transition: transform 0.2s; position: relative; z-index: 1; }
  .acc-promo-btn:active { transform: scale(0.96); }

  .acc-section-title { display: flex; justify-content: space-between; align-items: center; margin: 0 24px 12px 24px; }
  .acc-section-title h3 { font-size: 15px; font-weight: 700; color: var(--mob-text-muted); margin: 0; display: flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: 0.5px;}
  .acc-currency-badge { background: var(--mob-surface); border: 1px solid var(--mob-border); padding: 4px 10px 4px 6px; border-radius: 20px; font-size: 12px; font-weight: 700; color: var(--mob-text); display: flex; align-items: center; gap: 6px; box-shadow: var(--mob-shadow-sm); text-transform: none; letter-spacing: 0; }
  .acc-currency-icon { width: 18px; height: 18px; background: var(--mob-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; }
  .acc-currency-icon svg { width: 10px; height: 10px; stroke-width: 3px; }
  .acc-section-title button { background: none; border: none; color: var(--mob-primary); font-weight: 700; font-size: 14px; cursor: pointer; }

  .acc-details-card { background: var(--mob-surface); margin: 0 20px 24px 20px; border-radius: var(--mob-radius-lg); padding: 12px 20px; box-shadow: var(--mob-shadow-sm); border: 1px solid var(--mob-border); }
  .acc-detail-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--mob-border); }
  .acc-detail-row:last-child { border-bottom: none; }
  .acc-detail-text { display: flex; flex-direction: column; gap: 4px; flex: 1; padding-right: 12px; }
  .acc-detail-label { font-size: 13px; color: var(--mob-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
  .acc-detail-value { font-size: 16px; font-weight: 700; color: var(--mob-text); word-break: break-all; }
  .acc-detail-value.monospace { font-family: monospace; letter-spacing: 0.5px; }
  .acc-copy-btn { background: var(--mob-bg); color: var(--mob-primary); border: 1px solid var(--mob-border); width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; flex-shrink: 0; }
  .acc-copy-btn svg { width: 16px; height: 16px; stroke-width: 2.5px; }

  .acc-plan-card { background: var(--mob-surface); margin: 0 20px 24px 20px; border-radius: var(--mob-radius-md); padding: 20px; display: flex; align-items: center; gap: 16px; box-shadow: var(--mob-shadow-sm); border: 1px solid var(--mob-border); cursor: pointer; text-decoration: none; transition: transform 0.2s; }
  .acc-plan-card:active { transform: scale(0.98); }
  .acc-plan-icon { width: 44px; height: 44px; background: var(--mob-primary-dim); color: var(--mob-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .acc-plan-icon svg { width: 22px; height: 22px; stroke-width: 2px; }
  .acc-plan-text h4 { margin: 0 0 4px 0; font-size: 15px; font-weight: 700; color: var(--mob-text); }
  .acc-plan-text p { margin: 0; font-size: 13px; color: var(--mob-text-muted); line-height: 1.4; }
  
  .status-alert { background: #fefce8; color: #854d0e; padding: 16px 20px; margin: 10px 20px 20px 20px; border-radius: 12px; font-size: 13px; font-weight: 600; border: 1px solid #fde047; display: flex; align-items: center; gap: 12px; }

  .upgrade-sheet-overlay { position: fixed; inset: 0; background: rgba(5, 16, 36, 0.6); z-index: 300; display: none; opacity: 0; transition: opacity 0.3s; }
  .upgrade-sheet { position: fixed; bottom: 0; left: 0; right: 0; background: var(--mob-bg); border-radius: 24px 24px 0 0; z-index: 301; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); padding: 24px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .upgrade-sheet.open { transform: translateY(0); }
  .upgrade-sheet-overlay.open { display: block; opacity: 1; }
  
  .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
  .modal-header h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--mob-text); }
  .modal-close-btn { background: var(--mob-surface); border: 1px solid var(--mob-border); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }

  .plan-option { background: var(--mob-surface); border: 1px solid var(--mob-border); border-radius: 16px; padding: 20px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; transition: 0.2s; }
  .plan-option.active { border-color: var(--mob-primary); box-shadow: 0 0 0 2px var(--mob-primary-dim); background: var(--mob-surface); }
  .plan-text h4 { margin: 0 0 4px 0; font-size: 16px; font-weight: 700; color: var(--mob-text); }
  .plan-text p { margin: 0; font-size: 13px; color: var(--mob-text-muted); }
  .btn-select-plan { background: white; border: 1px solid var(--mob-primary); color: var(--mob-primary); padding: 8px 16px; border-radius: 12px; font-weight: 700; font-size: 13px; cursor: pointer; transition: 0.2s; }
  .badge-active { background: var(--mob-primary); color: white; padding: 6px 12px; border-radius: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; }

  .toast-notif { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-100px); background: var(--mob-primary); color: white; padding: 12px 24px; border-radius: 20px; font-size: 14px; font-weight: 600; box-shadow: var(--mob-shadow-md); z-index: 999; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); white-space: nowrap; }
  .toast-notif.show { transform: translateX(-50%) translateY(0); }

  .mob-nav-icon svg { width: 24px; height: 24px; stroke-width: 2px; margin-bottom: 2px; }
</style>

<div id="toast" class="toast-notif">Message</div>

<header class="acc-header" style="justify-content: space-between;">
  <div style="display: flex; align-items: center; gap: 12px;">
    <a href="{{ route('dashboard') }}" class="acc-close-btn"><i data-lucide="arrow-left" style="width: 18px;"></i></a>
    <h1 style="margin: 0; font-size: 20px; font-weight: 800; color: var(--mob-text);">Accounts</h1>
  </div>
  
  <div style="display: flex; gap: 8px; align-items: center;">
    <button class="mob-avatar-mini" onclick="openProfileMenu()">
      {{ strtoupper(substr($user->name, 0, 1)) }}
    </button>
  </div>
</header>

<main class="mob-main-content" style="padding: 0; padding-bottom: 90px;">
  
  <div class="acc-promo-card">
    <h2>Scale your banking experience</h2>
    <p>Upgrade to a Premium or VIP tier to unlock higher daily transaction allowances and priority processing.</p>
    <button class="acc-promo-btn" onclick="openUpgradeSheet()">View Plans</button>
  </div>

  <div class="acc-plan-card" onclick="openUpgradeSheet()">
    <div class="acc-plan-icon"><i data-lucide="gem"></i></div>
    <div class="acc-plan-text">
      <h4>Current Plan</h4>
      <p>{{ ucfirst($user->plan_type) }} Tier</p>
    </div>
  </div>

  <div class="acc-section-title">
    <h3>
      Account details
      <div class="acc-currency-badge">
        <div class="acc-currency-icon"><i data-lucide="euro"></i></div>
        Euro
      </div>
    </h3>
    <button onclick="showToast('Multi-currency accounts coming soon!')">Add new</button>
  </div>

  <div class="acc-details-card">
    
    <div class="acc-detail-row">
      <div class="acc-detail-text">
        <span class="acc-detail-label">Account holder</span>
        <span class="acc-detail-value">{{ $user->name }}</span>
      </div>
    </div>
    
    <div class="acc-detail-row">
      <div class="acc-detail-text">
        <span class="acc-detail-label">Account (IBAN)</span>
        <span class="acc-detail-value monospace">
          {{ $user->iban ?? 'Pending Verification...' }}
        </span>
      </div>
      
    </div>
    
    <div class="acc-detail-row">
      <div class="acc-detail-text">
        <span class="acc-detail-label">BIC / SWIFT</span>
        <span class="acc-detail-value monospace">
          {{ $user->swift ?? 'Pending Verification...' }}
        </span>
      </div>
      
    </div>

  </div>

  <a href="{{ route('support') }}" class="acc-plan-card" style="margin-top: 32px; text-decoration: none;">
    <div class="acc-plan-icon" style="background: var(--mob-surface); border: 1px solid var(--mob-border); color: var(--mob-text-muted);"><i data-lucide="life-buoy"></i></div>
    <div class="acc-plan-text">
      <h4>Help & Support</h4>
      <p>If you need any assistance, contact our 24/7 team.</p>
    </div>
  </a>

</main>

<div class="upgrade-sheet-overlay" id="upgradeOverlay" onclick="closeUpgradeSheet()"></div>
<div class="upgrade-sheet" id="upgradeSheet">
  <div class="modal-header">
    <h2>Choose your plan</h2>
    <button class="modal-close-btn" onclick="closeUpgradeSheet()"><i data-lucide="x" style="width: 16px;"></i></button>
  </div>

  <div class="plan-option active">
    <div class="plan-text">
      <h4>Basic</h4>
      <p>€10,000/day limit</p>
    </div>
    
      <span class="badge-active">ACTIVE</span>
    
  </div>

  <div class="plan-option ">
    <div class="plan-text">
      <h4>Standard</h4>
      <p>€50,000/day limit</p>
    </div>
    
      <form action="{{ route('account.upgrade') }}" method="POST" style="margin: 0;">
        @csrf
        <input type="hidden" name="tier" value="Standard">
        <button type="submit" class="btn-select-plan">Select</button>
      </form>
    
  </div>

  <div class="plan-option ">
    <div class="plan-text">
      <h4>Premium</h4>
      <p>€100,000/day limit</p>
    </div>
    
      <form action="{{ route('account.upgrade') }}" method="POST" style="margin: 0;">
        @csrf
        <input type="hidden" name="tier" value="Premium">
        <button type="submit" class="btn-select-plan">Select</button>
      </form>
    
  </div>

  <div class="plan-option ">
    <div class="plan-text">
      <h4>VIP</h4>
      <p>€250,000/day limit</p>
    </div>
    
      <form action="{{ route('account.upgrade') }}" method="POST" style="margin: 0;">
        @csrf
        <input type="hidden" name="tier" value="VIP">
        <button type="submit" class="btn-select-plan">Select</button>
      </form>
    
  </div>
</div>

<div class="ios-modal-overlay" id="iosModalOverlay" onclick="closeIOSModal()"></div>
<div class="ios-modal-sheet" id="iosModalSheet">
  <div class="ios-modal-icon">
    <img src="{{ asset('512/6202/6202860.png') }}" alt="Clear.Bank" style="width: 40px; height: 40px;">
  </div>
  <h3>Install Clear.Bank App</h3>
  <p>Install this application on your home screen for quick and easy access when you're on the go.</p>
  <div class="ios-steps">
    <div class="ios-step">
      <span>1.</span>
      <span>Tap the <strong>Share</strong> button at the bottom of Safari.</span>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-left: auto; color: var(--cb-black);"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path><polyline points="16 6 12 2 8 6"></polyline><line x1="12" y1="2" x2="12" y2="15"></line></svg>
    </div>
    <div class="ios-step">
      <span>2.</span>
      <span>Scroll down and select <strong>Add to Home Screen</strong>.</span>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-left: auto; color: var(--cb-black);"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
    </div>
  </div>
  <button class="btn-got-it" onclick="closeIOSModal()">Got it!</button>
</div>

<nav class="mob-bottom-nav">
  <a href="{{ route('dashboard') }}" class="mob-nav-link">
    <span class="mob-nav-icon"><i data-lucide="home"></i></span>
    Home
  </a>
  <a href="{{ route('account') }}" class="mob-nav-link active">
    <span class="mob-nav-icon"><i data-lucide="credit-card"></i></span>
    Accounts
  </a>
  <a href="{{ route('transfers') }}" class="mob-nav-link">
    <span class="mob-nav-icon"><i data-lucide="arrow-right-left"></i></span>
    Transactions
  </a>
  <a href="{{ route('support') }}" class="mob-nav-link">
    <span class="mob-nav-icon"><i data-lucide="headphones"></i></span>
    Support
  </a>
</nav>

<script>
  lucide.createIcons();

  function showToast(msg) {
    const toast = document.getElementById('toast');
    toast.innerText = msg;
    toast.classList.add('show');
    setTimeout(() => toast.classList.remove('show'), 3000);
  }

  function openUpgradeSheet() {
    document.getElementById('upgradeOverlay').classList.add('open');
    setTimeout(() => document.getElementById('upgradeSheet').classList.add('open'), 10);
  }

  function closeUpgradeSheet() {
    document.getElementById('upgradeSheet').classList.remove('open');
    setTimeout(() => document.getElementById('upgradeOverlay').classList.remove('open'), 300);
  }
</script>
@endsection
