@extends('dashboard.layout')

@section('title', 'New Keyword')
@section('meta_description', 'Create a new 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">New 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">Create Keyword</h2>
            <p class="text-sm text-gray-900 mt-0.5">Add a new keyword to the scraping list.</p>
        </div>

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

            <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') }}" 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') == $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.</p>
            </div>

            <div class="flex items-center gap-3 pt-2">
                <button id="btn-save-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>
                    Save 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>
</div>

@endsection