@extends('layouts.app')
@section('content')
<div class="max-w-7xl mx-auto p-6">
  <h1 class="text-2xl font-semibold mb-4">Reporting & Dashboard</h1>

  <form method="GET" action="{{ route('reports.index') }}"
        class="grid grid-cols-1 sm:grid-cols-5 gap-4 mb-6">
    <select name="campaign_id" class="rounded border-gray-300">
      <option value="">Toutes campagnes</option>
      @foreach($campaigns as $c)
        <option value="{{ $c->id }}" {{ $c->id == $campaignId ? 'selected' : '' }}>
          {{ $c->name }}
        </option>
      @endforeach
    </select>
    <input type="date" name="from" value="{{ $from }}" class="rounded border-gray-300" />
    <input type="date" name="to"   value="{{ $to }}"   class="rounded border-gray-300" />
    <select name="status" class="rounded border-gray-300">
      <option value="">Tous</option>
      <option value="paid" {{ $status === 'paid' ? 'selected' : '' }}>paid</option>
      <option value="pending" {{ $status === 'pending' ? 'selected' : '' }}>pending</option>
      <option value="failed" {{ $status === 'failed' ? 'selected' : '' }}>failed</option>
    </select>
    <div class="flex space-x-2">
      <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
        Filtrer
      </button>
      <a href="{{ route('reports.export', array_merge(request()->query(), ['type'=>'all'])) }}"
        class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700">Export Tous</a>
      <a href="{{ route('reports.export', array_merge(request()->query(), ['type'=>'paid'])) }}"
        class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">Export Payés</a>
      <a href="{{ route('reports.export', array_merge(request()->query(), ['type'=>'pending'])) }}"
        class="px-4 py-2 bg-yellow-600 text-white rounded hover:bg-yellow-700">Export En attente</a>

    </div>
  </form>

  <div class="grid grid-cols-1 sm:grid-cols-4 gap-4 mb-6">
    <div class="p-4 bg-white shadow rounded">
      <h2 class="text-lg">Total Links</h2>
      <p class="text-2xl">{{ $totalLinks }}</p>
    </div>
    <div class="p-4 bg-white shadow rounded">
      <h2 class="text-lg">Paid Links</h2>
      <p class="text-2xl">{{ $paidLinks }}</p>
    </div>
    <div class="p-4 bg-white shadow rounded">
      <h2 class="text-lg">Taux Conversion</h2>
      <p class="text-2xl">{{ $conversionRate }}%</p>
    </div>
    <div class="p-4 bg-white shadow rounded">
      <h2 class="text-lg">Total Collecté</h2>
      <p class="text-2xl">{{ number_format($totalAmount,0,',',' ') }} XOF</p>
    </div>
  </div>

  <div class="bg-white shadow rounded p-6">
    <canvas id="linksChart"></canvas>
  </div>

  <div class="mt-6 bg-white shadow rounded overflow-x-auto">
    <table class="min-w-full divide-y divide-gray-200 datatable">
      <thead class="bg-gray-50">
        <tr>
          <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Campagne</th>
          <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Donateur</th>
          <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Montant payé</th>
          <th class="px-4 py-2 text-center text-xs font-medium text-gray-500 uppercase">Statut</th>
          <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Créé le</th>
          <th class="px-4 py-2 text-center text-xs font-medium text-gray-500 uppercase">Actions</th>
        </tr>
      </thead>
      <tbody class="bg-white divide-y divide-gray-200">
        @foreach($links as $link)
        @php $totalPayment = $link->payments->sum('amount');
            $payment = $link->payments->first(); @endphp
        @php
          $statusColor = [
            'paid' => 'bg-green-100 text-green-800',
            'pending' => 'bg-yellow-100 text-yellow-800',
            'failed' => 'bg-red-100 text-red-800',
          ][$link->status->value] ?? 'bg-gray-100 text-gray-800';
        @endphp
        <tr class="hover:bg-gray-50">
          <td class="px-4 py-3 whitespace-nowrap">{{ $link->campaign->name }}</td>
          <td class="px-4 py-3 whitespace-nowrap">{{ $link->donateur->prenom }} {{ $link->donateur->nom }}</td>
          <td class="px-4 py-3 whitespace-nowrap text-right">
            {{ $totalPayment > 0 ? number_format($totalPayment,0,',',' ') : '-' }}
          </td>
          <td class="px-4 py-3 whitespace-nowrap text-center">
            <span class="px-2 py-1 rounded {{ $statusColor }} font-semibold">
              {{ ucfirst($link->status->value) }}
            </span>
          </td>
          <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">{{ $link->created_at->format('d/m/Y') }}</td>
          <td class="px-4 py-3 text-center">
            <a href="{{ route('links.details', $link) }}" class="text-indigo-600 hover:text-indigo-800">Détails</a>
          </td>
        </tr>
        @endforeach
      </tbody>
    </table>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const ctx = document.getElementById('linksChart').getContext('2d');
  new Chart(ctx, {
      type: 'line',
      data: {
          labels: @json($dates),
          datasets: [
            { label: 'Total', data: @json($totals), borderWidth: 1, fill: false },
            { label: 'Paid',  data: @json($paids),  borderWidth: 1, fill: false },
          ]
      },
      options: { scales: { y: { beginAtZero: true } } }
  });
</script>
@endsection