@extends('dashboard.layout')

@section('title', 'Edit Keyword')
@section('meta_description', 'Edit an existing scraping keyword.')
@section('page_title', 'Keywords')

@section('content')

<div class="flex items-center gap-2 text-sm text-gray-900 mb-6">
    <a href="{{ route('keywords.index') }}" class="hover:text-violet-600 transition">Keywords</a>
    <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="m8.25 4.5 7.5 7.5-7.5 7.5"/>
    </svg>
    <span class="text-gray-900 font-medium">Edit: {{ $keyword->keyword }}</span>
</div>

<div class="max-w-xl">
    <div class="bg-white border border-gray-200 rounded-2xl shadow-sm">
        <div class="px-6 py-5 border-b border-gray-100">
            <h2 class="text-base font-semibold text-gray-900">Edit Keyword</h2>
            <p class="text-sm text-gray-900 mt-0.5">Update the keyword details below.</p>
        </div>

        <form id="edit-keyword-form" method="POST"
              action="{{ route('keywords.update', $keyword->id) }}"
              class="px-6 py-6 space-y-5">
            @csrf
            @method('PUT')

            <div>
                <label for="keyword" class="block text-sm font-medium text-gray-900 mb-1.5">
                    Keyword <span class="text-red-500">*</span>
                </label>
                <input id="keyword" type="text" name="keyword"
                       value="{{ old('keyword', $keyword->keyword) }}" required
                       placeholder="e.g. hotels near downtown"
                       class="w-full px-3 py-2.5 text-sm bg-gray-50 border rounded-xl transition
                              focus:outline-none focus:ring-2 focus:ring-violet-500/30 focus:border-violet-400
                              placeholder:text-gray-900 @error('keyword') border-red-400 bg-red-50 @else border-gray-200 @enderror">
                @error('keyword')
                    <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="parent_id" class="block text-sm font-medium text-gray-900 mb-1.5">
                    Parent Keyword <span class="text-gray-900 font-normal">(optional)</span>
                </label>
                <select id="parent_id" name="parent_id"
                        class="w-full px-3 py-2.5 text-sm bg-gray-50 border border-gray-200 rounded-xl transition
                               focus:outline-none focus:ring-2 focus:ring-violet-500/30 focus:border-violet-400
                               text-gray-900 appearance-none cursor-pointer @error('parent_id') border-red-400 @enderror">
                    <option value="">— None (top-level) —</option>
                    @foreach($parents as $pid => $pkeyword)
                        <option value="{{ $pid }}" @selected(old('parent_id', $keyword->parent_id) == $pid)>{{ $pkeyword }}</option>
                    @endforeach
                </select>
                @error('parent_id')
                    <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                @enderror
                <p class="mt-1.5 text-xs text-gray-900">
                    Only top-level keywords are available as parents. This keyword itself is excluded.
                </p>
            </div>

            <div class="flex items-center gap-3 pt-2">
                <button id="btn-update-keyword" type="submit"
                        class="inline-flex items-center gap-2 px-5 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">
                    <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="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z"/>
                    </svg>
                    Update Keyword
                </button>
                <a href="{{ route('keywords.index') }}"
                   class="px-4 py-2.5 rounded-xl text-sm font-medium text-gray-900 hover:text-gray-900 hover:bg-gray-100 transition-all">
                    Cancel
                </a>
            </div>
        </form>
    </div>

    {{-- Danger zone --}}
    <div class="mt-6 bg-white border border-red-200 rounded-2xl shadow-sm">
        <div class="px-6 py-5 border-b border-red-100">
            <h3 class="text-sm font-semibold text-red-700">Danger Zone</h3>
        </div>
        <div class="px-6 py-4 flex items-center justify-between gap-4">
            <p class="text-sm text-gray-900">
                Deleting this keyword will detach any child keywords (they become top-level).
            </p>
            <form method="POST" action="{{ route('keywords.destroy', $keyword->id) }}"
                  onsubmit="return confirm('Delete \'{{ addslashes($keyword->keyword) }}\'? Children will be detached.')">
                @csrf
                @method('DELETE')
                <button id="btn-delete-keyword" type="submit"
                        class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-red-600 text-white text-sm
                               font-medium shadow-sm hover:bg-red-700 active:scale-95 transition-all whitespace-nowrap">
                    <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>
                    Delete Keyword
                </button>
            </form>
        </div>
    </div>
</div>

@endsection