@extends('backend.layout.exposcale')

@section('page_title', 'Customer — ' . ($user->name ?? 'Detail'))

@section('content')
<div class="page-body">
  <!-- Back -->
  <a href="{{ route('exposcale.customers') }}" class="back-btn">← Back to Customers</a>

  @if(!$user)
    <div style="background:var(--card);border:1px solid var(--border);border-radius:10px;padding:24px;text-align:center;color:var(--red);margin-top:14px;font-weight:600;">
      Error fetching the data or data not found.
    </div>
  @else
{{-- <div class="page-body">
  <!-- Back -->
  <a href="{{ route('exposcale.customers') }}" class="back-btn">← Back to Customers</a> --}}

  <!-- Info bar -->
  <div id="cust-info-bar" style="background:var(--card); border:1px solid var(--border); border-radius:10px; padding:0; overflow:hidden; margin-bottom:14px; display:flex; align-items:stretch; flex-wrap:wrap;">
    <div style="padding: 24px; display: flex; flex-direction: column; gap: 24px; width: 100%;">
      <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 24px;">
        
        <div style="display: flex; gap: 16px; align-items: flex-start;">
          <!-- Avatar -->
          @php
             $initials = strtoupper(substr($user->first_name ?? $user->name ?? 'U', 0, 1) . substr($user->last_name ?? '', 0, 1));
             $fullName = trim(($user->first_name ?? '') . ' ' . ($user->last_name ?? '')) ?: ($user->name ?? 'Unknown');
          @endphp
          <div style="width: 32px; height: 32px; border-radius: 50%; background: var(--pbg); border: 1px solid rgba(124,58,237,.3); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--pl); flex-shrink: 0;">{{ $initials }}</div>
          
          <!-- Name/Email -->
          <div style="display: flex; flex-direction: column; gap: 4px; padding-right: 24px; border-right: 1px solid var(--border);">
            <span style="font-size: 12px; font-weight: 700; color: #fff;">{{ $fullName }}</span>
            <a href="mailto:{{ $user->email }}" style="font-size: 10px; color: var(--muted); text-decoration: none;">{{ $user->email }}</a>
          </div>

          <!-- Company/VAT -->
          <div style="display: flex; flex-direction: column; gap: 4px; padding-right: 24px; border-right: 1px solid var(--border);">
            <span style="font-size: 12px; font-weight: 700; color: #fff;">{{ $user->company ?? 'No Company' }}</span>
            <span style="font-size: 10px; color: var(--muted); font-family: monospace;">{{ $user->vat_number ?? '—' }}</span>
          </div>

          <!-- Address -->
          <div style="display: flex; flex-direction: column; gap: 4px;">
            <span style="font-size: 8px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;">Address</span>
            <span style="font-size: 11px; font-weight: 600; color: #fff;">{{ $user->address ?? '—' }}</span>
          </div>
        </div>

        <!-- Right Side Info -->
        <div style="display: flex; gap: 32px; align-items: flex-start;">
          <div style="display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--border); padding-right: 32px;">
            <span style="font-size: 8px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;">Referred By</span>
            <span style="font-size: 11px; color: var(--muted);">—</span>
          </div>
          
          <div style="display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--border); padding-right: 32px;">
            <span style="font-size: 8px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;">Renewal Date</span>
            <span style="font-size: 11px; font-weight: 600; color: var(--amber);">Nov 12, 2026</span>
          </div>

          <div style="display: flex; flex-direction: column; gap: 4px;">
            <span style="font-size: 8px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;">Client Since</span>
            <span style="font-size: 11px; font-weight: 600; color: #fff;">{{ $user->created_at ? $user->created_at->format('M Y') : '—' }}</span>
          </div>
        </div>

      </div>

      <!-- Divider -->
      <div style="height: 1px; background: var(--border); width: 100%;"></div>

      <!-- Bottom Row -->
      {{-- <div style="display: flex; gap: 40px; align-items: center; margin-left: 48px;">
        
        <div style="display: flex; flex-direction: column; gap: 6px;">
          <span style="font-size: 8px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;">Plan</span>
          <span class="badge bgrowth" style="font-size: 9px;">Growth</span>
        </div>

        <div style="display: flex; flex-direction: column; gap: 6px;">
          <span style="font-size: 8px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;">Prestige Tier</span>
          <span style="font-size: 11px; font-weight: 600; color: #fff;">Starter</span>
        </div>

        <div style="display: flex; flex-direction: column; gap: 6px;">
          <span style="font-size: 8px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;">Lifetime Top-Up (EUR)</span>
          <span style="font-size: 12px; font-weight: 700; color: var(--pl);">€ 3.050,00</span>
        </div>

        <div style="display: flex; flex-direction: column; gap: 6px;">
          <span style="font-size: 8px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;">Balance EUR</span>
          <span style="font-size: 12px; font-weight: 700; color: var(--green);">€ 1.200,00</span>
        </div>

        <div style="display: flex; flex-direction: column; gap: 6px;">
          <span style="font-size: 8px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;">Balance USD</span>
          <span style="font-size: 12px; font-weight: 700; color: var(--green);">$ 2.450,00</span>
        </div>

      </div> --}}
    </div>
  </div>

  <!-- Three columns -->
  <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;min-height:0;">

    <!-- Active Ad Accounts -->
    <div style="background:var(--card);border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;overflow:hidden;">
      <div style="padding:10px 14px;border-bottom:1px solid var(--border);font-size:12px;font-weight:700;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;">
        <span>Ad Accounts</span>
        <span id="acct-count-tag" style="font-size:10px;color:var(--muted);background:var(--card2);border:1px solid var(--border);border-radius:20px;padding:1px 7px;">{{ $user ? $user->adAccounts->count() : 0 }}</span>
      </div>
      <div id="cust-adaccounts" style="flex:1;overflow-y:auto;">
        @if($user && $user->adAccounts->count() > 0)
          @foreach($user->adAccounts as $adAccount)
            @php
              $isActive = in_array(strtolower($adAccount->status), ['approved', 'active', 'accepted']);
              $plat = $adAccount->platform ?? 'Meta';
              $platCls = strtolower($plat) == 'tiktok' ? 'plat-tiktok' : (strtolower($plat) == 'google' ? 'plat-google' : 'plat-meta');
              
              // Status Colors
              $statusBg = $isActive ? 'rgba(16, 185, 129, 0.1)' : 'rgba(239, 68, 68, 0.1)';
              $statusColor = $isActive ? 'var(--green)' : 'var(--red)';
              $statusBorder = $isActive ? 'rgba(16, 185, 129, 0.2)' : 'rgba(239, 68, 68, 0.2)';

              // Provider Colors
              $isRockads = strtolower($adAccount->provider) === 'rockads';
              $provBg = $isRockads ? 'rgba(59, 130, 246, 0.1)' : 'rgba(239, 68, 68, 0.1)';
              $provColor = $isRockads ? '#3b82f6' : '#ef4444';
              $provBorder = $isRockads ? 'rgba(59, 130, 246, 0.2)' : 'rgba(239, 68, 68, 0.2)';

              $currencySym = $adAccount->currency === 'USD' ? '$' : '€';
            @endphp
            <div class="adacct-row adacct-row-link" onclick="window.location.href='{{ route('exposcale.ad-account-detail', $adAccount->external_id) }}'">
              <div style="flex:1;min-width:0;">
                <div class="adacct-name" style="font-size:10px;font-weight:700;color:#fff;">{{ $adAccount->account_name ?: $adAccount->external_id }}</div>
                <div style="display:flex;gap:6px;margin-top:6px;align-items:center;">
                  <!-- Provider Badge -->
                  <span style="font-size:9px;padding:2px 6px;border-radius:4px;font-weight:600;background:{{ $provBg }};color:{{ $provColor }};border:1px solid {{ $provBorder }};">{{ ucfirst($adAccount->provider) }}</span>
                  <!-- Platform Badge -->
                  <span class="{{ $platCls }}" style="font-size:9px;padding:2px 6px;border-radius:4px;font-weight:700;">{{ ucfirst($plat) }}</span>
                </div>
              </div>
              <div style="text-align:right;">
                <div class="adacct-bal" style="font-size:13px;font-weight:700;color:var(--green);">{{ $currencySym }}{{ number_format((float)$adAccount->balance, 2) }}</div>
                <div style="display:flex;gap:5px;margin-top:6px;justify-content:flex-end;align-items:center;">
                  <!-- Status Badge -->
                  <span style="font-size:9px;padding:2px 6px;border-radius:4px;font-weight:600;background:{{ $statusBg }};color:{{ $statusColor }};border:1px solid {{ $statusBorder }};">{{ ucfirst($adAccount->status) }}</span>
                </div>
              </div>
              <div class="adacct-arrow" style="font-size:12px;margin-left:12px;color:var(--muted);">></div>
            </div>
          @endforeach
        @else
          <div style="padding:24px;text-align:center;color:var(--muted);font-size:11px;">No ad accounts.</div>
        @endif
      </div>
    </div>

    <!-- Affiliate Info -->
    <div style="background:var(--card);border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;overflow:hidden;">
      <div style="padding:10px 14px;border-bottom:1px solid var(--border);font-size:12px;font-weight:700;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;">
        <span>Affiliate</span>
        <a id="cust-aff-view-btn" href="{{ route('exposcale.affiliates') }}" style="font-size:9px;background:var(--pbg);color:var(--pl);border:1px solid rgba(124,58,237,.3);padding:3px 8px;border-radius:5px;cursor:pointer;display:none;text-decoration:none;">View Payments →</a>
      </div>
      <div id="cust-affiliate-body" style="flex:1;overflow-y:auto;padding:12px 14px;">
        <div style="padding:24px;text-align:center;color:var(--muted);font-size:11px;">No affiliate relationship.</div>
      </div>
    </div>

    <!-- Transactions -->
    <div style="background:var(--card);border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;overflow:hidden;">
      <div style="padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;">
        <span style="font-size:12px;font-weight:700;">Ad Account Transactions</span>
      </div>
      <div style="flex:1;overflow-y:auto;">
        <table id="detail-inv-table">
          <thead><tr><th>Ad Account</th><th>Date</th><th>Type</th><th>Amount</th></tr></thead>
          <tbody id="detail-invoices">
            @if($transactions && $transactions->count() > 0)
              @foreach($transactions as $tx)
                @php
                  $currency = $tx->adAccount->currency ?? 'USD';
                  $sym = $currency === 'EUR' ? '€' : '$';
                  $typeLabel = match(strtolower($tx->kind)) {
                      'topup' => 'Top Up',
                      'withdrawal' => 'Withdrawal',
                      'deposit' => 'Deposit',
                      'refund' => 'Refund',
                      'transfer2adaccount' => 'Transfer',
                      'withdraw4adaccount' => 'Withdraw',
                      default => ucfirst(str_replace('_', ' ', $tx->kind))
                  };
                  $typeColor = in_array(strtolower($tx->kind), ['topup', 'deposit', 'transfer2adaccount', 'refund']) ? 'var(--green)' : 'var(--red)';
                  $acctName = $tx->adAccount->account_name ?? $tx->adAccount->alias_name ?? $tx->adAccount->external_id;
                @endphp
                <tr>
                  <td style="font-size:11px;font-weight:600;"><a href="{{ route('exposcale.ad-account-detail', $tx->adAccount->external_id) }}" style="color:var(--pl);text-decoration:none;">{{ $acctName }}</a></td>
                  <td style="color:var(--muted);font-size:11px;">{{ $tx->created_at->format('M d, Y H:i') }}</td>
                  <td><span style="font-size:9px;color:{{ $typeColor }};background:{{ $typeColor }}22;padding:2px 6px;border-radius:4px;font-weight:600;">{{ $typeLabel }}</span></td>
                  <td style="font-weight:700;color:{{ $typeColor }};">{{ $sym }}{{ number_format((float)$tx->amount, 2) }}</td>
                </tr>
              @endforeach
            @else
              <tr><td colspan="4" style="text-align:center;color:var(--muted);padding:20px;">No transactions found.</td></tr>
            @endif
          </tbody>
        </table>
      </div>
      @if($transactions->hasPages())
        <div style="padding:12px 14px;border-top:1px solid var(--border);background:var(--card);display:flex;justify-content:flex-end;gap:6px;align-items:center;">
          @if($transactions->currentPage() > 1)
              <a href="{{ $transactions->previousPageUrl() }}" class="btn-pag" style="padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); text-decoration: none; font-weight: 500; font-size:11px;">&laquo; Prev</a>
          @else
              <span class="btn-pag disabled" style="padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); cursor: not-allowed; font-weight: 500; font-size:11px; opacity: 0.6;">&laquo; Prev</span>
          @endif

          @for($i = 1; $i <= $transactions->lastPage(); $i++)
              @if($i == $transactions->currentPage())
                  <span class="btn-pag active" style="padding: 6px 12px; border: 1px solid var(--purple); background: var(--purple); color: white; border-radius: 6px; font-weight: 600; font-size:11px;">{{ $i }}</span>
              @elseif($i == 1 || $i == $transactions->lastPage() || abs($i - $transactions->currentPage()) <= 2)
                  <a href="{{ $transactions->url($i) }}" class="btn-pag" style="padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); text-decoration: none; font-weight: 500; font-size:11px; transition: all 0.2s ease;">{{ $i }}</a>
              @elseif($i == 2 || $i == $transactions->lastPage() - 1)
                  <span style="padding: 6px 8px; color: var(--muted); font-size:11px;">...</span>
              @endif
          @endfor

          @if($transactions->hasMorePages())
              <a href="{{ $transactions->nextPageUrl() }}" class="btn-pag" style="padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); text-decoration: none; font-weight: 500; font-size:11px; transition: all 0.2s ease;">Next &raquo;</a>
          @else
              <span class="btn-pag disabled" style="padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); cursor: not-allowed; font-weight: 500; font-size:11px; opacity: 0.6;">Next &raquo;</span>
          @endif
        </div>
      @endif
    </div>
  </div>
  @endif
</div>
@endsection

@section('page_scripts')
<script>
const CID = '{{ $user ? $user->id : "" }}';

const adAccountHistory = {};
@if($user && $user->adAccounts)
  @foreach($user->adAccounts as $adAccount)
    adAccountHistory['{{ $adAccount->id }}'] = {
      name: '{!! addslashes($adAccount->name) !!}',
      plat: '{!! addslashes($adAccount->platform ?? "Meta") !!}',
      currency: '{!! addslashes($adAccount->currency) !!}',
      bal: '{{ $adAccount->currency === "USD" ? "$" : "€" }}{{ number_format((float)$adAccount->balance, 2) }}',
      owner: CID,
      clientFee: 4.0
    };
  @endforeach
@endif

function filterDetailInvoices() {
  const plan = document.getElementById('inv-plan-filter')?.value || '';
  document.querySelectorAll('#detail-invoices tr').forEach(r => {
    r.style.display = (!plan || r.dataset.plan === plan) ? '' : 'none';
  });
}

function goToAccount(key) {
  const baseUrl = '{{ route("exposcale.ad-account-detail", ["externalId" => "REPLACE_ME"]) }}';
  window.location.href = baseUrl.replace('REPLACE_ME', key) + '?owner=' + CID;
}

function openTopUpForAcct(key) {
  const acct = adAccountHistory[key];
  if (!acct) return;
  _tuData = {name:acct.name, plat:acct.plat, platLabel:'Ads', currency:acct.currency, balance:acct.bal, owner:CID, clientFee:4.0};
  document.getElementById('tu-acct-name').textContent = acct.name;
  document.getElementById('tu-currency').textContent = acct.currency;
  document.getElementById('tu-platform').textContent = acct.plat;
  document.getElementById('tu-amount').value = '';
  updateTopUpCalc();
  document.getElementById('topup-modal').classList.add('open');
}

function openWithdrawForAcct(key) {
  const acct = adAccountHistory[key];
  if (!acct) return;
  _wdData = {name:acct.name, currency:acct.currency, balance:acct.bal, owner:CID, clientFee:4.0};
  document.getElementById('wd-acct-name').textContent = acct.name;
  document.getElementById('wd-balance').textContent = acct.bal;
  document.getElementById('wd-currency').textContent = acct.currency;
  document.getElementById('wd-amount').value = '';
  updateWdCalc();
  document.getElementById('withdraw-modal').classList.add('open');
}

function copyBankDetails() {
  showToast('No bank details on file', '#6b7280');
}

function exportAllInvoicesPDF() {
  showToast('📧 Exporting all invoices as PDF…', '#7c3aed');
}
</script>
@endsection