@extends('layouts.app')

@php
  $currencySymbol = match (($stats['currency'] ?? 'USD')) {
    'EUR' => '€',
    'GBP' => '£',
    default => '$',
  };
@endphp

@push('style')
<style>
  .referral-stat-card {
    border: 0;
    border-radius: 22px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    min-height: 164px;
  }

  .referral-stat-card .card-body {
    padding: 1.4rem 1.4rem 1.25rem;
  }

  .referral-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 1rem;
  }

  .referral-stat-title {
    color: #6b7280;
    font-size: 0.92rem;
    font-weight: 600;
    margin-bottom: 0.55rem;
  }

  .referral-stat-value {
    font-size: 2rem;
    line-height: 1;
    font-weight: 800;
    color: #1f2937;
    letter-spacing: -0.04em;
  }

  .referral-stat-value.is-orange {
    color: var(--user-accent, #ff9208);
  }

  .referral-section-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 1rem;
  }

  .referral-muted-box {
    min-height: 138px;
  }
</style>
@endpush

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  @can('view referrals')
    <div class="row g-4 mb-4">
      <div class="col-xl-4 col-md-6">
        <div class="card referral-stat-card">
          <div class="card-body">
            <span class="referral-stat-icon bg-label-primary">
              <i class="icon-base ti tabler-wallet"></i>
            </span>
            <div class="referral-stat-title">Current Balance</div>
            <div class="referral-stat-value is-orange">{{ number_format($stats['current_balance'] ?? 0, 2) }}{{ $currencySymbol }}</div>
          </div>
        </div>
      </div>

      <div class="col-xl-4 col-md-6">
        <div class="card referral-stat-card">
          <div class="card-body">
            <span class="referral-stat-icon bg-label-success">
              <i class="icon-base ti tabler-cash"></i>
            </span>
            <div class="referral-stat-title">Can Be Withdraw</div>
            <div class="referral-stat-value">{{ number_format($stats['can_withdraw'] ?? 0, 2) }}{{ $currencySymbol }}</div>
          </div>
        </div>
      </div>

      <div class="col-xl-4 col-md-6">
        <div class="card referral-stat-card">
          <div class="card-body">
            <span class="referral-stat-icon bg-label-warning">
              <i class="icon-base ti tabler-rosette-discount-check"></i>
            </span>
            <div class="referral-stat-title">Successfully Withdraw</div>
            <div class="referral-stat-value">{{ number_format($stats['successful_withdraw'] ?? 0, 2) }}{{ $currencySymbol }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="referral-section-title">Share Benefits</div>

    <div class="row g-4 mb-4">
      <div class="col-xl-6">
        <div class="card referral-stat-card referral-muted-box">
          <div class="card-body">
            <span class="referral-stat-icon bg-label-info">
              <i class="icon-base ti tabler-chart-bar"></i>
            </span>
            <div class="referral-stat-title">Total Revenue</div>
            <div class="referral-stat-value">{{ number_format($stats['total_revenue'] ?? 0, 2) }}{{ $currencySymbol }}</div>
          </div>
        </div>
      </div>

      <div class="col-xl-6">
        <div class="card referral-stat-card referral-muted-box">
          <div class="card-body">
            <span class="referral-stat-icon bg-label-secondary">
              <i class="icon-base ti tabler-sparkles"></i>
            </span>
            <div class="referral-stat-title">Coming Soon</div>
            <div class="referral-stat-value">00.00{{ $currencySymbol }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
        <h5 class="mb-0">{{ ($isSuperAdmin ?? false) ? 'All Referrals' : 'My Referrals' }}</h5>
        <span class="text-muted small">Referral and earning history</span>
      </div>

      <div class="table-responsive">
        <table @if($referrals->count() > 0) id="referrals-table" @endif class="table">
          <thead>
            <tr>
              @if($isSuperAdmin ?? false)<th>Referrer</th>@endif
              <th>Code</th>
              <th>Referred User</th>
              <th>Reward</th>
              <th>Status</th>
              <th>Date</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            @forelse($referrals as $referral)
            <tr>
              @if($isSuperAdmin ?? false)<td>{{ $referral->referrer->name ?? 'N/A' }}</td>@endif
              <td>{{ $referral->code }}</td>
              <td>{{ $referral->referredUser->name ?? 'N/A' }}</td>
              <td>{{ $currencySymbol }}{{ number_format($referral->reward_amount, 2) }}</td>
              <td>{{ ucfirst($referral->status) }}</td>
              <td>{{ $referral->created_at->format('Y-m-d') }}</td>
              <td>
                @if(auth()->check() && auth()->user()->hasRole('super admin'))
                  <form method="POST" action="{{ route('admin.referrals.destroy', $referral) }}">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Delete this referral?')">Delete</button>
                  </form>
                @else
                  <span class="text-muted">-</span>
                @endif
              </td>
            </tr>
            @empty
            <tr><td colspan="{{ ($isSuperAdmin ?? false) ? 7 : 6 }}" class="text-center py-4">No referrals yet.</td></tr>
            @endforelse
          </tbody>
        </table>
      </div>

      <div class="card-body">{{ $referrals->links() }}</div>
    </div>
  @else
    <div class="card">
      <div class="card-body">
        <div class="alert alert-warning mb-0">You do not have permission to view referrals.</div>
      </div>
    </div>
  @endcan
</div>
@endsection

@if($referrals->count() > 0)
@push('script')
<script>
$(document).ready(function () {
  const $table = $('#referrals-table');
  if (!$table.length) return;
  const dateColumnIndex = {{ ($isSuperAdmin ?? false) ? 5 : 4 }};

  $table.DataTable({
    responsive: false,
    scrollX: true,
    pageLength: 10,
    lengthMenu: [5, 10, 25, 50, 100],
    order: [[dateColumnIndex, 'desc']],
    columnDefs: [{ orderable: false, targets: -1 }]
  });
});
</script>
@endpush
@endif