@extends('layouts.app')

@section('content')
<div class="max-w-3xl mx-auto p-6 bg-white shadow-lg rounded-lg">
  <h2 class="text-2xl font-semibold mb-4 text-gray-800">
    Détails du lien pour {{ $link->donateur->prenom }} {{ $link->donateur->nom }}
  </h2>

  {{-- Informations du lien --}}
  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
    <div class="space-y-2">
      <p><span class="font-medium">Campagne :</span> {{ $link->campaign->name }}</p>
      <p><span class="font-medium">Token :</span> {{ $link->token }}</p>
      <p><span class="font-medium">Statut :</span> 
        <span class="inline-block px-2 py-1 text-sm font-semibold rounded
          {{ $link->status->value === 'paid' ? 'bg-green-100 text-green-800' :
             ($link->status->value === 'pending' ? 'bg-yellow-100 text-yellow-800' :
             ($link->status->value === 'canceled' ? 'bg-gray-100 text-gray-800' : 'bg-red-100 text-red-800')) }}">
          {{ ucfirst($link->status->value) }}
        </span>
      </p>
    </div>

    {{-- Boutons ouverture & copie --}}
    <div class="flex items-start space-x-4">
      <button type="button"
              onclick="window.open('{{ $link->hosted_url }}','_blank')"
              class="flex-1 px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 shadow">
        Ouvrir la page de paiement
      </button>
      <button type="button" title="Copier le lien dans le presse-papiers"
              onclick="navigator.clipboard.writeText('{{ $link->hosted_url }}')"
              class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded shadow flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-600 mr-1" viewBox="0 0 20 20" fill="currentColor">
          <path d="M8 2a2 2 0 00-2 2v1H5a2 2 0 00-2 2v9a2 2 0 002 2h6a2 2 0 002-2v-1h1a2 2 0 002-2V6a2 2 0 00-2-2h-1V4a2 2 0 00-2-2H8z"/>
          <path d="M7 4h6v1H7V4z"/>
        </svg>
        Copier
      </button>
      <button type="button" onclick="openModal('manual-transaction')"
              class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 shadow">
        Ajouter transaction
      </button>
    </div>
  </div>

  {{-- Tableau des transactions --}}
  <h3 class="text-xl font-semibold mb-4 text-gray-800">Transactions associées</h3>

  @if($link->payments->isEmpty())
    <p class="text-gray-500">Aucune transaction enregistrée pour ce lien.</p>
  @else
    <div class="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">Date</th>
            <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Montant</th>
            <th class="px-4 py-2 text-center text-xs font-medium text-gray-500 uppercase">Devise</th>
            <th class="px-4 py-2 text-center text-xs font-medium text-gray-500 uppercase">Statut</th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          @foreach($link->payments as $payment)
          <tr class="hover:bg-gray-50">
            <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-700">
              {{ optional($payment->created_at ?? $payment->created_at)->format('d/m/Y H:i') }}
            </td>
            <td class="px-4 py-2 whitespace-nowrap text-right text-sm text-gray-700">
              {{ number_format($payment->amount, 0, ',', ' ') }}
            </td>
            <td class="px-4 py-2 whitespace-nowrap text-center text-sm text-gray-700">{{ strtoupper($payment->currency) }}</td>
            <td class="px-4 py-2 whitespace-nowrap text-center text-sm">
              @php
                $statusColor = [
                  'approved' => 'bg-green-100 text-green-800',
                  'declined' => 'bg-red-100 text-red-800',
                  'canceled' => 'bg-gray-100 text-gray-800',
                  'pending'  => 'bg-yellow-100 text-yellow-800',
                ][$payment->status->value] ?? 'bg-gray-100 text-gray-800';
              @endphp
              <span class="px-2 py-1 rounded {{ $statusColor }} font-semibold">
                {{ ucfirst($payment->status->value) }}
              </span>
            </td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  @endif

  <div class="mt-6 flex justify-end">
    <a href="{{ url()->previous() }}" 
       class="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300">
      ← Retour
    </a>
  </div>
</div>

<x-modal id="manual-transaction">
  <h2 class="text-xl font-semibold mb-4">Enregistrer une transaction</h2>
  <form method="POST" action="{{ route('links.manual_transaction', $link) }}" class="space-y-4">
    @csrf
    <div>
      <label class="block mb-1">ID de transaction</label>
      <input type="text" name="transaction_id" class="w-full border p-2 rounded" required>
    </div>
    <div class="text-right space-x-2">
      <button type="button" onclick="closeModal()" class="px-4 py-2 bg-gray-200 rounded">Annuler</button>
      <button type="submit" class="px-4 py-2 bg-green-600 text-white rounded">Valider</button>
    </div>
  </form>
</x-modal>
@endsection