@extends('dashboard.layout')

@section('title', 'Transactions')

@section('content')
<style>
  body { background-color: var(--mob-bg); }
  
  @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, .modal-sheet, .ios-modal-sheet { max-width: 480px; margin: 0 auto; left: 0; right: 0; }
  }
  
  .tx-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    padding-top: max(20px, env(safe-area-inset-top));
    background: var(--mob-bg);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .tx-header h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--mob-text);
  }
  .tx-header-icon {
    width: 40px; height: 40px;
    background: var(--mob-surface);
    border: 1px solid var(--mob-border);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--mob-text);
    box-shadow: var(--mob-shadow-sm);
    cursor: pointer;
    transition: 0.2s;
  }
  .tx-header-icon:active { transform: scale(0.95); }

  .tx-filters {
    display: flex;
    gap: 12px;
    padding: 10px 20px 20px 20px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tx-filters::-webkit-scrollbar { display: none; } 
  
  .filter-pill {
    background: var(--mob-surface);
    border: 1px solid var(--mob-border);
    color: var(--mob-text-muted);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
  }
  .filter-pill.active {
    background: var(--mob-primary);
    border-color: var(--mob-primary);
    color: white;
  }

  .tx-card {
    background: var(--mob-surface);
    border-radius: var(--mob-radius-lg);
    margin: 0 20px 24px 20px;
    padding: 8px 20px;
    box-shadow: var(--mob-shadow-sm);
    border: 1px solid var(--mob-border);
  }
  
  .mob-list-item {
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--mob-border);
    cursor: pointer;
    transition: background 0.2s;
  }
  .mob-list-item:last-child { border-bottom: none; }
  
  .mob-item-left { display: flex; align-items: center; gap: 16px; }
  .mob-item-icon {
    width: 40px; height: 40px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
  }
  .mob-item-details h4 { margin: 0; font-size: 16px; font-weight: 700; color: var(--mob-text); }
  .mob-item-details p { margin: 4px 0 0 0; font-size: 13px; color: var(--mob-text-muted); font-weight: 500; }
  .mob-item-right { font-weight: 700; font-size: 16px; }

  .tx-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--mob-text-muted);
  }
  .tx-empty-icon {
    width: 64px; height: 64px;
    background: var(--mob-surface);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px auto;
    border: 1px solid var(--mob-border);
    color: var(--mob-primary);
  }
  .tx-empty h3 { margin: 0 0 8px 0; font-size: 18px; color: var(--mob-text); font-weight: 700; }
  .tx-empty p { margin: 0; font-size: 14px; line-height: 1.5; }

  .modal-overlay {
    position: fixed; inset: 0; background: rgba(5, 16, 36, 0.6); z-index: 300; display: none; opacity: 0; transition: opacity 0.3s;
  }
  .modal-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));
  }
  .modal-sheet.open { transform: translateY(0); }
  .modal-overlay.open { display: block; opacity: 1; }
  
  .modal-close-bar { width: 40px; height: 5px; background: var(--mob-border); border-radius: 4px; margin: 0 auto 24px auto; }
  
  .tx-detail-hero { text-align: center; margin-bottom: 32px; }
  .tx-detail-icon { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 16px auto; display: flex; align-items: center; justify-content: center; }
  .tx-detail-icon svg { width: 28px; height: 28px; }
  .tx-detail-amount { font-size: 36px; font-weight: 800; color: var(--mob-text); margin: 0 0 4px 0; letter-spacing: -1px; }
  .tx-detail-name { font-size: 16px; color: var(--mob-text-muted); font-weight: 600; margin: 0; }

  .tx-detail-list { background: var(--mob-surface); border-radius: 16px; border: 1px solid var(--mob-border); padding: 8px 20px; }
  .tx-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--mob-border); }
  .tx-detail-row:last-child { border-bottom: none; }
  .tx-detail-label { font-size: 14px; color: var(--mob-text-muted); font-weight: 500; }
  .tx-detail-value { font-size: 14px; color: var(--mob-text); font-weight: 600; text-align: right; }
  
  .status-badge { padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; display: inline-block; text-transform: uppercase; }

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

<header class="tx-header">
  <div style="display: flex; align-items: center; gap: 12px;">
    <h1 style="margin: 0; font-size: 18px; font-weight: 800; color: var(--mob-text);">Transactions</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>

<div class="tx-filters">
  <button class="filter-pill active">All</button>
  <button class="filter-pill">Money In</button>
  <button class="filter-pill">Money Out</button>
</div>

<main class="mob-main-content" style="padding-top: 0; padding-bottom: 100px;">
  
  @forelse ($transactions as $tx)
    <div class="tx-card">
      <div class="mob-list-item" onclick="showTxDetail('{{ $tx->id }}', '{{ $tx->recipient_name }}', '{{ $tx->amount }}', '{{ $tx->status }}', '{{ $tx->created_at->format('M d, Y') }}', '{{ $tx->reference }}')">
        <div class="mob-item-left">
          <div class="mob-item-icon" style="background: {{ $tx->type === 'credit' ? '#d1fae5' : '#fee2e2' }}; color: {{ $tx->type === 'credit' ? '#059669' : '#dc2626' }};">
            <i data-lucide="{{ $tx->type === 'credit' ? 'arrow-down-left' : 'arrow-up-right' }}" style="width: 20px;"></i>
          </div>
          <div class="mob-item-details">
            <h4>{{ $tx->recipient_name ?? 'Transfer' }}</h4>
            <p>{{ $tx->created_at->format('M d, Y') }}</p>
          </div>
        </div>
        <div class="mob-item-right" style="color: {{ $tx->type === 'credit' ? '#059669' : 'var(--mob-text)' }};">
          {{ $tx->type === 'credit' ? '+' : '-' }}€{{ number_format($tx->amount, 2) }}
        </div>
      </div>
    </div>
  @empty
    <div class="tx-empty">
      <div class="tx-empty-icon"><i data-lucide="file-search"></i></div>
      <h3>No transactions yet</h3>
      <p>When you send or receive money, it will show up here.</p>
    </div>
  @endforelse

  {{ $transactions->links() }}

</main>

<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">
    <span class="mob-nav-icon"><i data-lucide="credit-card"></i></span>
    Accounts
  </a>
  <a href="{{ route('transfers') }}" class="mob-nav-link active">
    <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>

<div class="modal-overlay" id="txOverlay" onclick="closeTxDetail()"></div>
<div class="modal-sheet" id="txSheet">
  <div class="modal-close-bar"></div>
  
  <div class="tx-detail-hero">
    <div class="tx-detail-icon" id="modalIconContainer">
      <i data-lucide="landmark" id="modalIcon"></i>
    </div>
    <h2 class="tx-detail-amount" id="modalAmount">€0.00</h2>
    <p class="tx-detail-name" id="modalName">Merchant Name</p>
  </div>

  <div class="tx-detail-list">
    <div class="tx-detail-row">
      <div class="tx-detail-label">Status</div>
      <div class="tx-detail-value">
        <span class="status-badge" id="modalStatusBadge">Completed</span>
      </div>
    </div>
    <div class="tx-detail-row">
      <div class="tx-detail-label">Date</div>
      <div class="tx-detail-value" id="modalDate">Today</div>
    </div>
    <div class="tx-detail-row">
      <div class="tx-detail-label">Reference ID</div>
      <div class="tx-detail-value" style="font-family: monospace; color: var(--mob-text-muted);" id="modalId">#TXN</div>
    </div>
  </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(--mob-text);"><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(--mob-text);"><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>

<script>
  lucide.createIcons();

  function showTxDetail(id, name, amount, status, date, ref) {
    document.getElementById('modalAmount').innerText = '€' + parseFloat(amount).toLocaleString('en-US', {minimumFractionDigits: 2});
    document.getElementById('modalName').innerText = name;
    document.getElementById('modalDate').innerText = date;
    document.getElementById('modalId').innerText = '#' + ref;
    
    const badge = document.getElementById('modalStatusBadge');
    badge.innerText = status.charAt(0).toUpperCase() + status.slice(1);
    
    const iconContainer = document.getElementById('modalIconContainer');
    const icon = document.getElementById('modalIcon');
    
    if (status === 'completed') {
      iconContainer.style.background = '#d1fae5';
      iconContainer.style.color = '#059669';
      icon.setAttribute('data-lucide', 'check-circle');
    } else if (status === 'pending') {
      iconContainer.style.background = '#fef3c7';
      iconContainer.style.color = '#d97706';
      icon.setAttribute('data-lucide', 'clock');
    } else {
      iconContainer.style.background = '#fee2e2';
      iconContainer.style.color = '#dc2626';
      icon.setAttribute('data-lucide', 'x-circle');
    }
    lucide.createIcons();

    document.getElementById('txOverlay').classList.add('open');
    setTimeout(() => document.getElementById('txSheet').classList.add('open'), 10);
  }

  function closeTxDetail() {
    document.getElementById('txSheet').classList.remove('open');
    setTimeout(() => document.getElementById('txOverlay').classList.remove('open'), 300);
  }

  function openProfileMenu() { document.getElementById('profileMenu').classList.add('open'); }
  function closeProfileMenu() { document.getElementById('profileMenu').classList.remove('open'); }
</script>
@endsection
