@extends('layouts.dashboard')

@section('page-title', 'Itasted')
@section('page-subtitle', 'Avaliações e comentários dos usuários')

@section('content')

    <div class="bg-white rounded-2xl border border-slate-200 overflow-hidden">

        {{-- Toolbar --}}
        <div class="flex items-center justify-between px-6 py-4 border-b border-slate-100">
            <h2 class="text-base font-bold text-navy-900">Todos os Itasted</h2>
            <div class="flex items-center gap-3">
                <form method="GET" action="{{ route('testimonials.index') }}" class="flex items-center gap-3">
                    <div class="relative">
                        <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" fill="none"
                            stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                        <input type="text" name="search" value="{{ $filters['search'] ?? '' }}"
                            placeholder="Buscar Itasted..."
                            class="pl-9 pr-4 py-2 text-sm rounded-xl border border-slate-200 bg-slate-50
                               focus:outline-none focus:border-brand-500 focus:bg-white transition-all w-56">
                    </div>
                </form>
                <a href="{{ route('testimonials.create') }}"
                    class="flex items-center gap-2 bg-brand-600 hover:bg-brand-700 text-white text-sm font-semibold
                      px-4 py-2 rounded-xl transition-colors cursor-pointer">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                    </svg>
                    Novo Itasted
                </a>
            </div>
        </div>

        {{-- Table --}}
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="bg-slate-50 border-b border-slate-100">
                        <th class="text-left text-xs font-semibold text-slate-400 uppercase tracking-wider px-6 py-3">Autor</th>
                        <th class="text-left text-xs font-semibold text-slate-400 uppercase tracking-wider px-6 py-3">Título</th>
                        <th class="text-left text-xs font-semibold text-slate-400 uppercase tracking-wider px-6 py-3">Conteúdo</th>
                        <th class="text-left text-xs font-semibold text-slate-400 uppercase tracking-wider px-6 py-3">Destaque</th>
                        <th class="text-left text-xs font-semibold text-slate-400 uppercase tracking-wider px-6 py-3">Data</th>
                        <th class="px-6 py-3"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse ($testimonials as $t)
                        @php $t = (object) $t; @endphp
                        <tr class="hover:bg-slate-50 transition-colors">

                            {{-- Autor --}}
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-9 h-9 rounded-full bg-navy-800 flex items-center justify-center text-white font-bold text-sm shrink-0">
                                        {{ strtoupper(substr($t->author ?? '?', 0, 1)) }}
                                    </div>
                                    <span class="font-semibold text-navy-900 whitespace-nowrap">{{ $t->author ?? '—' }}</span>
                                </div>
                            </td>

                            {{-- Título --}}
                            <td class="px-6 py-4">
                                <span class="font-medium text-navy-900">{{ $t->title ?? '—' }}</span>
                            </td>

                            {{-- Contenido --}}
                            <td class="px-6 py-4 text-slate-400 max-w-xs">
                                <span class="block truncate">{{ $t->content ?? '—' }}</span>
                            </td>

                            {{-- Destacado --}}
                            <td class="px-6 py-4">
                                <form method="POST" action="{{ route('testimonials.featured', $t->idtestimonial) }}">
                                    @csrf
                                    <input type="hidden" name="is_featured" value="{{ $t->is_featured ? 0 : 1 }}">
                                    <button type="submit"
                                        title="{{ $t->is_featured ? 'Remover destaque' : 'Marcar como destaque' }}"
                                        class="cursor-pointer transition-opacity hover:opacity-70">
                                        @if ($t->is_featured)
                                            <span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-lg text-xs font-semibold bg-brand-500/10 text-brand-500">
                                                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                                </svg>
                                                Destaque
                                            </span>
                                        @else
                                            <span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-lg text-xs font-semibold bg-slate-100 text-slate-400 hover:bg-brand-500/10 hover:text-brand-500 transition-colors">
                                                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                                </svg>
                                                —
                                            </span>
                                        @endif
                                    </button>
                                </form>
                            </td>

                            {{-- Fecha --}}
                            <td class="px-6 py-4 text-slate-400 whitespace-nowrap">
                                {{ isset($t->created_at) ? \Carbon\Carbon::parse($t->created_at)->format('d M Y') : '—' }}
                            </td>

                            {{-- Acciones --}}
                            <td class="px-6 py-4">
                                <div class="flex items-center justify-end gap-1">
                                    <a href="{{ route('testimonials.edit', $t->idtestimonial) }}"
                                        class="p-2 text-slate-400 hover:text-brand-500 hover:bg-brand-500/10 rounded-lg transition-colors cursor-pointer"
                                        title="Editar">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                        </svg>
                                    </a>

                                    {{-- Eliminar (status = -1) com confirm --}}
                                    <form id="form-delete-{{ $t->idtestimonial }}" method="POST"
                                        action="{{ route('testimonials.state', $t->idtestimonial) }}">
                                        @csrf
                                        <input type="hidden" name="status" value="-1">
                                        <button type="button" onclick="confirmForm(this)"
                                            data-form="form-delete-{{ $t->idtestimonial }}"
                                            data-title="Eliminar Itasted"
                                            data-message="O Itasted será eliminado. Esta ação não pode ser desfeita."
                                            data-confirm="Eliminar"
                                            data-danger="true"
                                            class="p-2 text-slate-400 hover:text-red-500 hover:bg-red-500/10 rounded-lg transition-colors cursor-pointer"
                                            title="Eliminar">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                            </svg>
                                        </button>
                                    </form>
                                </div>
                            </td>

                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-16 text-center">
                                <svg class="w-10 h-10 text-slate-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                        d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
                                </svg>
                                <p class="text-slate-400 font-medium">Nenhum Itasted encontrado</p>
                                <p class="text-slate-300 text-xs mt-1">Tente com outro termo de busca</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Paginación --}}
        @if (($pagination['last_page'] ?? 1) > 1)
            <div class="px-6 py-4 border-t border-slate-100 flex items-center justify-between">
                <p class="text-sm text-slate-400">
                    Mostrando {{ $pagination['from'] }}–{{ $pagination['to'] }} de {{ $pagination['total'] }} Itasted
                </p>
                <div class="flex items-center gap-1">
                    @if ($pagination['current_page'] > 1)
                        <a href="?page={{ $pagination['current_page'] - 1 }}&search={{ $filters['search'] ?? '' }}"
                            class="px-3 py-1.5 text-sm text-slate-500 hover:text-navy-900 hover:bg-slate-100 rounded-lg transition-colors">
                            Anterior
                        </a>
                    @else
                        <span class="px-3 py-1.5 text-sm text-slate-300 cursor-not-allowed">Anterior</span>
                    @endif

                    @for ($p = 1; $p <= $pagination['last_page']; $p++)
                        <a href="?page={{ $p }}&search={{ $filters['search'] ?? '' }}"
                            class="w-8 h-8 flex items-center justify-center text-sm rounded-lg transition-colors
                                  {{ $p === $pagination['current_page'] ? 'bg-brand-600 text-white font-bold' : 'text-slate-500 hover:bg-slate-100' }}">
                            {{ $p }}
                        </a>
                    @endfor

                    @if ($pagination['current_page'] < $pagination['last_page'])
                        <a href="?page={{ $pagination['current_page'] + 1 }}&search={{ $filters['search'] ?? '' }}"
                            class="px-3 py-1.5 text-sm text-slate-500 hover:text-navy-900 hover:bg-slate-100 rounded-lg transition-colors">
                            Próximo
                        </a>
                    @else
                        <span class="px-3 py-1.5 text-sm text-slate-300 cursor-not-allowed">Próximo</span>
                    @endif
                </div>
            </div>
        @endif

    </div>

@endsection