@extends('layouts.app')

@section('content')
<div class="p-6 container mx-auto">
  <h1 class="text-3xl font-bold mb-4">{{ $portfolio->name }}</h1>

  {{-- Charts Placeholder --}}
  <div id="charts" class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
    <div class="card p-4">
      <h3 class="font-semibold mb-2">Performance Trend</h3>
      <canvas id="portfolioTrend"></canvas>
    </div>
    <div class="card p-4">
      <h3 class="font-semibold mb-2">Allocation</h3>
      <canvas id="allocationPie"></canvas>
    </div>
  </div>

  {{-- Funds Table --}}
  <div class="card overflow-auto">
    <table class="w-full table-auto">
      <thead class="bg-gray-100">
        <tr>
          <th>Fund</th>
          <th>Current Balance</th>
          <th>Total Deposits</th>
          <th>Gain</th>
          <th>Rate (%)</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        @foreach($portfolio->funds as $fund)
          @php
              $totalDeposits = $fund->entries->sum('deposit');
              $currentBalance = $fund->entries->last()?->current_balance ?? 0;
              $gain = $currentBalance - $totalDeposits;
              $rate = $totalDeposits > 0 ? ($gain / $totalDeposits) * 100 : 0;
          @endphp
          <tr>
              <td>{{ $fund->name }}</td>
              <td>{{ number_format($currentBalance) }}</td>
              <td>{{ number_format($totalDeposits) }}</td>
              <td>{{ number_format($gain) }}</td>
              <td>{{ number_format($rate, 2) }}%</td>
              <td>
                  <a href="{{ route('funds.entries.create', $fund->id) }}" class="text-blue-600">Add Entry</a>
              </td>
          </tr>
        @endforeach
      </tbody>
    </table>
  </div>
</div>
@endsection

{{-- Put scripts **after** the section! --}}
@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Assume first fund for trend
const entries = @json($portfolio->funds->first()?->entries->sortBy('date')->values() ?? []);
const performanceLabels = entries.map(e => e.date);
const performanceData = entries.map(e => e.current_balance);

// Allocation data for all funds
const allocations = [
    @foreach($portfolio->funds as $f)
        {
            label: '{{ $f->name }}',
            value: {{ $f->entries->last()?->current_balance ?? 0 }}
        },
    @endforeach
];

// Line Chart - Performance Trend
const ctx1 = document.getElementById('portfolioTrend').getContext('2d');
new Chart(ctx1, {
    type: 'line',
    data: {
        labels: performanceLabels,
        datasets: [{
            label: 'Balance',
            data: performanceData,
            borderWidth: 2,
            fill: false
        }]
    }
});

// Pie Chart - Allocation
const ctx2 = document.getElementById('allocationPie').getContext('2d');
new Chart(ctx2, {
    type: 'pie',
    data: {
        labels: allocations.map(a => a.label),
        datasets: [{
            data: allocations.map(a => a.value),
            backgroundColor: ['#4CAF50', '#1976D2', '#FFC107', '#E91E63', '#9C27B0', '#009688']
        }]
    }
});
</script>
@endsection