@extends('dashboard.layout')

@section('title', 'Keywords')
@section('meta_description', 'Browse, search, create and edit scraping keywords.')
@section('page_title', 'Keywords')

@section('content')

{{-- Flash messages --}}
@if(session('success'))
    <div id="flash-success"
         class="mb-5 flex items-center gap-3 px-4 py-3 rounded-xl bg-emerald-50 border border-emerald-200 text-emerald-700 text-sm">
        <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m4.5 12.75 6 6 9-13.5"/>
        </svg>
        {{ session('success') }}
    </div>
@endif

{{-- ══════════════════════════════════════
     PAGE HEADER
═══════════════════════════════════════ --}}
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
    <div>
        <h2 class="text-xl font-bold text-gray-900">Keywords</h2>
        <p class="text-sm text-gray-900 mt-0.5">
            {{ number_format($keywords->total()) }} records
            @if($filters['search'])
                &mdash; filtered
            @endif
        </p>
    </div>

    <a id="btn-new-keyword"
       href="{{ route('keywords.create') }}"
       class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-violet-600 text-white text-sm
              font-medium shadow-sm hover:bg-violet-700 active:scale-95 transition-all self-start sm:self-auto">
        <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 4.5v15m7.5-7.5h-15"/>
        </svg>
        New Keyword
    </a>
</div>

{{-- ══════════════════════════════════════
     SEARCH BAR
═══════════════════════════════════════ --}}
<form id="filter-form"
      method="GET"
      action="{{ route('keywords.index') }}"
      class="bg-white border border-gray-200 rounded-2xl shadow-sm p-4 mb-6">

    <div class="flex gap-3">
        <div class="relative flex-1">
            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                <svg class="w-4 h-4 text-gray-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
                </svg>
            </div>
            <input id="search-input"
                   type="text"
                   name="search"
                   value="{{ $filters['search'] }}"
                   placeholder="Search keywords…"
                   class="w-full pl-9 pr-4 py-2.5 text-sm bg-gray-50 border border-gray-200 rounded-xl
                          focus:outline-none focus:ring-2 focus:ring-violet-500/30 focus:border-violet-400
                          placeholder:text-gray-900 transition">
        </div>

        <button id="btn-apply-search" type="submit"
                class="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl bg-violet-600 text-white text-sm
                       font-medium shadow-sm hover:bg-violet-700 active:scale-95 transition-all">
            Apply
        </button>

        @if($filters['search'])
            <a id="btn-clear-search"
               href="{{ route('keywords.index') }}"
               class="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl bg-gray-100 text-gray-900 text-sm
                      font-medium hover:bg-gray-200 active:scale-95 transition-all">
                <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="M6 18 18 6M6 6l12 12"/>
                </svg>
                Clear
            </a>
        @endif
    </div>
</form>

{{-- ══════════════════════════════════════
     TABLE
═══════════════════════════════════════ --}}
<div class="bg-white border border-gray-200 rounded-2xl shadow-sm overflow-hidden">

    @if($keywords->isEmpty())
        <div class="flex flex-col items-center justify-center py-20 text-center">
            <div class="w-14 h-14 rounded-2xl bg-gray-100 flex items-center justify-center mb-4">
                <svg class="w-7 h-7 text-gray-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                          d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 6h.008v.008H6V6Z"/>
                </svg>
            </div>
            <p class="text-sm font-medium text-gray-900">No keywords found</p>
            <p class="text-xs text-gray-900 mt-1">
                @if($filters['search'])
                    Try a different search term, or
                    <a href="{{ route('keywords.create') }}" class="text-violet-600 hover:underline">create one</a>.
                @else
                    <a href="{{ route('keywords.create') }}" class="text-violet-600 hover:underline">Create your first keyword</a>.
                @endif
            </p>
        </div>
    @else
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-gray-100 bg-gray-50/60">
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 uppercase tracking-wider w-14">#</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 uppercase tracking-wider">Keyword</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 uppercase tracking-wider">Parent</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 uppercase tracking-wider w-36">Updated</th>
                        <th class="px-4 py-3 text-right text-xs font-semibold text-gray-900 uppercase tracking-wider w-28">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @foreach($keywords as $kw)
                        <tr class="hover:bg-violet-50/30 transition-colors group">

                            <td class="px-4 py-3 text-xs font-mono text-gray-900">{{ $kw->id }}</td>

                            <td class="px-4 py-3">
                                <span class="font-medium text-gray-900">{{ $kw->keyword }}</span>
                            </td>

                            <td class="px-4 py-3">
                                @if($kw->parent_keyword)
                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[11px] font-medium
                                                 bg-violet-50 text-violet-700 border border-violet-200">
                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757"/>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="m10.81 15.312-1.242-7.244a4.5 4.5 0 0 0-6.364 6.364l4.5 4.5a4.5 4.5 0 0 0 7.244-1.242"/>
                                        </svg>
                                        {{ $kw->parent_keyword }}
                                    </span>
                                @else
                                    <span class="text-xs text-gray-900 italic">Top-level</span>
                                @endif
                            </td>

                            <td class="px-4 py-3 text-xs text-gray-900 whitespace-nowrap">
                                {{ \Carbon\Carbon::parse($kw->updated_at)->diffForHumans() }}
                            </td>

                            <td class="px-4 py-3 text-right">
                                <div class="inline-flex items-center gap-1">
                                    <a href="{{ route('keywords.edit', $kw->id) }}"
                                       class="p-1.5 rounded-lg text-gray-900 hover:text-violet-600 hover:bg-violet-50 transition"
                                       title="Edit">
                                        <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="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Z"/>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/>
                                        </svg>
                                    </a>

                                    <form method="POST"
                                          action="{{ route('keywords.destroy', $kw->id) }}"
                                          onsubmit="return confirm('Delete keyword \'{{ addslashes($kw->keyword) }}\'? Any child keywords will be detached.')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit"
                                                class="p-1.5 rounded-lg text-gray-900 hover:text-red-600 hover:bg-red-50 transition"
                                                title="Delete">
                                            <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="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/>
                                            </svg>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        @if($keywords->hasPages())
            <div class="px-4 py-3 border-t border-gray-100 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                <p class="text-xs text-gray-900">
                    Showing {{ $keywords->firstItem() }}–{{ $keywords->lastItem() }}
                    of {{ number_format($keywords->total()) }}
                </p>
                <div class="text-sm">
                    {{ $keywords->links() }}
                </div>
            </div>
        @endif
    @endif
</div>

@endsection