@extends('layouts.app')
@section('content')
<div class="grid md:grid-cols-3 gap-6">
  <div class="md:col-span-2 bg-white rounded-2xl shadow p-5 overflow-x-auto">
    <div class="flex items-center justify-between mb-3">
      <h2 class="text-lg font-semibold">WhatsApp Links</h2>
    </div>
    <table class="w-full text-sm">
      <thead class="text-left text-slate-500">
        <tr><th class="py-2">Label</th><th>Slug</th><th>Clicks</th><th>URL</th><th></th></tr>
      </thead>
      <tbody>
        @forelse($links as $l)
        <tr class="border-t">
          <td class="py-2">{{ $l->label }}</td>
          <td><a class="text-indigo-600" target="_blank" href="{{ url('/go/'.$l->slug) }}">/go/{{ $l->slug }}</a></td>
          <td>{{ number_format($l->clicks()->count()) }}</td>
          <td class="truncate max-w-[280px]"><a class="text-slate-600" target="_blank" href="{{ $l->destination }}">{{ $l->destination }}</a></td>
          <td class="text-right">
            <form method="POST" action="{{ route('wa.destroy',$l->id) }}">@csrf @method('DELETE')
              <button class="text-red-600">Delete</button>
            </form>
          </td>
        </tr>
        @empty
        <tr><td colspan="5" class="py-6 text-center text-slate-500">No links yet.</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>

  <div class="bg-white rounded-2xl shadow p-5">
    <h3 class="font-semibold mb-2">Create WA Link</h3>
    <form method="POST" action="{{ route('wa.store') }}" class="space-y-3">
      @csrf
      <label class="block">
        <span class="text-sm">Label</span>
        <input name="label" class="mt-1 w-full border rounded-xl p-2" required />
      </label>
      <label class="block">
        <span class="text-sm">Destination (https://wa.me/… or https://api.whatsapp.com/send?...)</span>
        <input name="destination" class="mt-1 w-full border rounded-xl p-2" required />
      </label>
      <label class="block">
        <span class="text-sm">Custom Slug (optional)</span>
        <input name="slug" class="mt-1 w-full border rounded-xl p-2" />
      </label>
      <div class="grid grid-cols-2 gap-2">
        <input name="utm_source" placeholder="utm_source" class="border rounded-xl p-2" />
        <input name="utm_medium" placeholder="utm_medium" class="border rounded-xl p-2" />
        <input name="utm_campaign" placeholder="utm_campaign" class="border rounded-xl p-2" />
        <input name="utm_content" placeholder="utm_content" class="border rounded-xl p-2" />
      </div>
      <button class="w-full bg-slate-900 text-white rounded-xl py-2">Create</button>
    </form>
  </div>
</div>
@endsection