@extends('layouts.dashboard')

@section('page-title', 'Blogs')
@section('page-subtitle', 'Gerencie os blogs e publicações da plataforma')

@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 blogs</h2>
            <div class="flex items-center gap-3">
            <form method="GET" action="{{ route('blogs.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 blog..."

                        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('blogs.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 blog
            </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">Título</th>
                        <th class="text-left text-xs font-semibold text-slate-400 uppercase tracking-wider px-6 py-3">Categoria</th>
                        <th class="text-left text-xs font-semibold text-slate-400 uppercase tracking-wider px-6 py-3">País</th>
                        <th class="text-left text-xs font-semibold text-slate-400 uppercase tracking-wider px-6 py-3">Link</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 ($blogs as $b)
                        @php $b = (object) $b; @endphp
                        <tr class="hover:bg-slate-50 transition-colors">

                            {{-- Título --}}
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 rounded-xl bg-slate-100 flex items-center justify-center shrink-0">
                                        <svg class="w-5 h-5 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                        </svg>
                                    </div>
                                    <div>
                                        <p class="font-semibold text-navy-900 leading-tight">{{ $b->title ?? '—' }}</p>
                                    </div>
                                </div>
                            </td>

                            {{-- Categoría --}}
                            <td class="px-6 py-4">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-lg text-xs font-semibold bg-slate-100 text-slate-600 whitespace-nowrap">
                                    {{ $b->category_name ?? '—' }}
                                </span>
                            </td>

                            {{-- País --}}
                            <td class="px-6 py-4">
                                <span class="text-slate-500 whitespace-nowrap">{{ $b->country_name ?? '—' }}</span>
                            </td>

                            {{-- Link --}}
                            <td class="px-6 py-4">
                                @if (!empty($b->link))
                                    <a href="{{ $b->link }}" target="_blank"
                                       class="inline-flex items-center gap-1 text-brand-500 hover:text-brand-600 text-xs font-medium transition-colors">
                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                                        </svg>
                                        Ver link
                                    </a>
                                @else
                                    <span class="text-slate-300 text-xs">—</span>
                                @endif
                            </td>

                            {{-- Fecha --}}
                            <td class="px-6 py-4 text-slate-400 whitespace-nowrap">
                                {{ isset($b->created_at) ? \Carbon\Carbon::parse($b->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('blogs.edit', $b->idblog) }}"
                                       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-{{ $b->idblog }}" method="POST"
                                          action="{{ route('blogs.state', $b->idblog) }}">
                                        @csrf
                                        <input type="hidden" name="status" value="-1">
                                        <button type="button" onclick="confirmForm(this)"
                                                data-form="form-delete-{{ $b->idblog }}"
                                                data-title="Eliminar blog"
                                                data-message="O blog 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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                </svg>
                                <p class="text-slate-400 font-medium">Nenhum blog 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'] }} blogs
                </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