@extends('layouts.app')
@section('title', 'Testimonials — InLynq')
@section('heading', 'Testimonials')

@section('content')
<x-iq.page-head title="Testimonials">
  <x-slot:sub>Quotes from real, named people. Request one and they confirm it themselves.</x-slot:sub>
  <a class="iq-btn iq-btn-secondary" href="{{ route('testimonials.create') }}"><x-iq.icon name="plus" /> Add testimonial</a>
  <button type="button" class="iq-btn iq-btn-primary" data-dialog-open="request-dialog"><x-iq.icon name="mail" /> Request a testimonial</button>
</x-iq.page-head>

@if (session('requestUrl'))
  <div class="iq-banner success" style="margin-bottom:24px"><x-iq.icon name="link" /><div><b>Share this link.</b> <span class="iq-num" style="font-size:13px;word-break:break-all">{{ session('requestUrl') }}</span>
    <button type="button" class="iq-link" style="border:0;background:none;cursor:pointer;font:inherit" data-copy="{{ session('requestUrl') }}">Copy link</button></div></div>
@endif

@if ($testimonials->isEmpty())
  <x-iq.empty icon="quote" title="Let people tell your story." variant="secondary">Request a testimonial from a client or collaborator. They confirm it by email.
  </x-iq.empty>
@else
  <div class="iq-stack" style="gap:8px" data-reorder-url="{{ route('reorder', 'testimonials') }}">
    @foreach ($testimonials as $t)
      <div class="iq-dragrow {{ $t->is_public ? '' : 'is-hidden' }}" data-id="{{ $t->id }}" style="height:auto;padding:12px 12px 12px 8px;align-items:flex-start">
        <span class="grip" style="margin-top:4px"><x-iq.icon name="grip" /></span>
        <x-iq.avatar :name="$t->name" :src="$t->avatar_url" size="sm" />
        <div class="lbl" style="white-space:normal">
          <div>{{ $t->name }} <span class="iq-muted" style="font-weight:400">{{ $t->attribution() }}</span></div>
          <div class="iq-sub iq-serif" style="font-style:italic;font-size:16px;line-height:22px;margin-top:4px;font-weight:400">“{{ \Illuminate\Support\Str::limit($t->content, 160) }}”</div>
          <div class="iq-row" style="gap:6px;margin-top:6px">
            @if ($t->is_verified)<span class="iq-badge iq-badge-brand"><x-iq.icon name="check" size="sm" /> Confirmed by author</span>@endif
            @unless ($t->is_public)<span class="iq-badge">Hidden</span>@endunless
          </div>
        </div>
        <span class="acts">
          <a class="iq-btn iq-btn-quiet iq-btn-icon iq-btn-sm" href="{{ route('testimonials.edit', $t) }}" aria-label="Edit"><x-iq.icon name="edit" /></a>
          <form method="POST" action="{{ route('testimonials.destroy', $t) }}" class="app-inline-form" data-confirm="Delete this testimonial?" data-confirm-action="Delete">@csrf @method('DELETE')<button class="iq-btn iq-btn-quiet iq-btn-icon iq-btn-sm" aria-label="Delete"><x-iq.icon name="trash" /></button></form>
        </span>
      </div>
    @endforeach
  </div>
@endif

@if ($requests->isNotEmpty())
<div class="iq-stack" style="gap:12px;margin-top:32px">
  <span style="font-weight:600">Requests</span>
  <div class="iq-table-wrap"><table class="iq-table app-stack-table">
    <thead><tr><th>Sent to</th><th>Status</th><th>Expires</th><th></th></tr></thead>
    <tbody>
    @foreach ($requests as $r)
      <tr>
        <td class="strong">{{ $r->recipient_name }}<div class="iq-muted" style="font-weight:400;font-size:13px">{{ $r->recipient_email ?? 'Shared by link' }}</div></td>
        <td data-label="Status"><span class="iq-badge {{ $r->status->value === 'submitted' ? 'iq-badge-success' : '' }}">{{ $r->status->label() }}</span></td>
        <td data-label="Expires" class="iq-num">{{ $r->expires_at?->format('j M Y') ?? '—' }}</td>
        <td class="r">@if ($r->isOpen())
          <button type="button" class="iq-btn iq-btn-quiet iq-btn-sm" data-copy="{{ route('testimonials.submit.show', $r->token) }}"><x-iq.icon name="copy" /> Copy link</button>
          <form method="POST" action="{{ route('testimonial-requests.destroy', $r) }}" class="app-inline-form" data-confirm="Revoke this link?" data-confirm-action="Revoke">@csrf @method('DELETE')<button class="iq-btn iq-btn-quiet iq-btn-sm">Revoke</button></form>
        @endif</td>
      </tr>
    @endforeach
    </tbody>
  </table></div>
</div>
@endif

<x-iq.modal id="request-dialog" title="Request a testimonial">
  <form method="POST" action="{{ route('testimonial-requests.store') }}" class="iq-stack" id="request-form">
    @csrf
    <p style="margin:0">We'll create a private link. If you add their email, we'll send it for you. Their testimonial stays hidden until you choose to show it.</p>
    <x-iq.field label="Their name" name="recipient_name"><x-iq.input name="recipient_name" required maxlength="100" /></x-iq.field>
    <x-iq.field label="Their email" name="recipient_email" optional><x-iq.input type="email" name="recipient_email" /></x-iq.field>
    <x-iq.field label="A short note" name="message" optional><x-iq.textarea name="message" max="500" style="min-height:72px" placeholder="Would you write a sentence or two about working together?" /></x-iq.field>
  </form>
  <x-slot:footer><button type="button" class="iq-btn iq-btn-quiet" data-dialog-close>Cancel</button><button class="iq-btn iq-btn-primary" form="request-form">Create request link</button></x-slot:footer>
</x-iq.modal>
@endsection