@extends('layouts.app')
@section('content')
<div class="max-w-full sm:max-w-7xl mx-auto p-4 sm:p-6 bg-white shadow rounded">
  <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 space-y-4 sm:space-y-0">
    <h1 class="text-2xl font-semibold">Campagnes</h1>
    <div class="flex flex-col sm:flex-row sm:items-center sm:space-x-2 space-y-2 sm:space-y-0 w-full sm:w-auto">
      <button type="button" onclick="openModal('create-campaign')" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 whitespace-nowrap">
        Nouvelle Campagne
      </button>
    </div>
  </div>

  {{-- Statistiques globales --}}
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-6">
    <div class="p-4 bg-blue-50 rounded text-center">
      <h3 class="text-sm text-gray-500 uppercase">Total Campagnes</h3>
      <p class="text-2xl font-bold">{{ $campaigns->count() }}</p>
    </div>
    <div class="p-4 bg-purple-50 rounded text-center">
      <h3 class="text-sm text-gray-500 uppercase">Liens générés</h3>
      <p class="text-2xl font-bold">{{ $campaigns->pluck('links_count')->sum() }}</p>
    </div>
    <div class="p-4 bg-green-50 rounded text-center">
      <h3 class="text-sm text-gray-500 uppercase">Payés</h3>
      <p class="text-2xl font-bold">{{ $campaigns->pluck('paid_count')->sum() }}</p>
    </div>
    <div class="p-4 bg-yellow-50 rounded text-center">
      <h3 class="text-sm text-gray-500 uppercase">Taux de conversion</h3>
      @php
        $totalLinks = $campaigns->pluck('links_count')->sum();
        $totalPaid  = $campaigns->pluck('paid_count')->sum();
        $rate = $totalLinks > 0 ? number_format(($totalPaid/$totalLinks)*100,1) : 0;
      @endphp
      <p class="text-2xl font-bold">{{ $rate }}%</p>
    </div>
  </div>

  {{-- Table des campagnes --}}
  <div class="overflow-x-auto">
    <table class="w-full table-auto 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">Nom</th>
          <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Liens</th>
          <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Payés</th>
          <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Conversion</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($campaigns as $camp)
        <tr class="hover:bg-gray-50">
          <td class="px-4 py-3 whitespace-nowrap">{{ $camp->name }}</td>
          <td class="px-4 py-3 whitespace-nowrap">{{ $camp->links_count }}</td>
          <td class="px-4 py-3 whitespace-nowrap">{{ $camp->paid_count }}</td>
          <td class="px-4 py-3 whitespace-nowrap">{{ $camp->links_count > 0 ? number_format(($camp->paid_count/$camp->links_count)*100,1) : 0 }}%</td>
          <td class="px-4 py-3 text-center space-x-1">
            <button type="button" onclick="loadCampaignDetails({{ $camp->id }})" class="text-indigo-600 hover:text-indigo-800 whitespace-nowrap">Détails</button>
            <a href="{{ route('campaigns.send_form',$camp) }}" class="text-indigo-600 hover:text-indigo-800 whitespace-nowrap">Envoyer</a>
            <button type="button" onclick="openModal('edit-campaign-{{ $camp->id }}')" class="text-blue-600 hover:text-blue-800 whitespace-nowrap">✎</button>
            <form id="delete-campaign-{{ $camp->id }}-form" action="{{ route('campaigns.destroy',$camp) }}" method="POST" class="inline">
              @csrf @method('DELETE')
              <button type="button" onclick="openModal('confirm-delete-campaign-{{ $camp->id }}')" class="text-red-600 hover:text-red-800 whitespace-nowrap">🗑</button>
            </form>
          </td>
        </tr>
        @endforeach
      </tbody>
    </table>
  </div>

</div>

<x-modal id="create-campaign">
  <h2 class="text-xl font-semibold mb-4">Nouvelle campagne</h2>
  <form method="POST" action="{{ route('campaigns.store') }}" enctype="multipart/form-data">
    @csrf
    @include('campaigns.partials.form')
    <div class="mt-4 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">Enregistrer</button>
    </div>
  </form>
</x-modal>

@foreach($campaigns as $camp)
  <x-modal id="edit-campaign-{{ $camp->id }}">
    <h2 class="text-xl font-semibold mb-4">Modifier la campagne</h2>
    <form method="POST" action="{{ route('campaigns.update', $camp) }}" enctype="multipart/form-data">
      @csrf
      @method('PUT')
      @include('campaigns.partials.form', ['campaign' => $camp])
      <div class="mt-4 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">Mettre à jour</button>
      </div>
    </form>
  </x-modal>
  <x-confirm-modal id="confirm-delete-campaign-{{ $camp->id }}" formId="delete-campaign-{{ $camp->id }}-form" message="Supprimer cette campagne ?" confirmText="Supprimer" />

@endforeach

<x-modal id="campaign-details-modal" maxWidth="max-w-5xl">
  <div id="campaign-details-content"></div>
  <div class="mt-4 text-right">
    <button type="button" onclick="closeModal()" class="px-4 py-2 bg-gray-200 rounded">Fermer</button>
  </div>
</x-modal>
</div>
@endsection