@extends('admin.layouts.app')

@section('title', 'Create Dictionary Entry')
@section('page-title', 'Create Dictionary Entry')
@section('page-title-jp', '辞書エントリを作成')

@section('content')
<div style="background: white; padding: 24px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); max-width: 700px;">
    <form action="{{ route('admin.dictionary.store') }}" method="POST">
        @csrf

        <!-- Word -->
        <div style="margin-bottom: 24px;">
            <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; font-size: 14px;">Word (Kanji) *</label>
            <input 
                type="text" 
                name="word" 
                value="{{ old('word') }}" 
                required
                style="width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; transition: all 0.2s;"
                onfocus="this.style.borderColor='#3b82f6'; this.style.boxShadow='0 0 0 3px rgba(59, 130, 246, 0.1)';"
                onblur="this.style.borderColor='#e2e8f0'; this.style.boxShadow='none';">
            @error('word')
                <span style="color: #ef4444; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>
            @enderror
        </div>

        <!-- Reading -->
        <div style="margin-bottom: 24px;">
            <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; font-size: 14px;">Reading (Hiragana/Katakana) *</label>
            <input 
                type="text" 
                name="reading" 
                value="{{ old('reading') }}" 
                required
                style="width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; transition: all 0.2s;"
                onfocus="this.style.borderColor='#3b82f6'; this.style.boxShadow='0 0 0 3px rgba(59, 130, 246, 0.1)';"
                onblur="this.style.borderColor='#e2e8f0'; this.style.boxShadow='none';">
            @error('reading')
                <span style="color: #ef4444; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>
            @enderror
        </div>

        <!-- Meaning -->
        <div style="margin-bottom: 24px;">
            <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; font-size: 14px;">Meaning *</label>
            <textarea 
                name="meaning" 
                required
                style="width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; min-height: 100px; transition: all 0.2s; font-family: inherit;"
                onfocus="this.style.borderColor='#3b82f6'; this.style.boxShadow='0 0 0 3px rgba(59, 130, 246, 0.1)';"
                onblur="this.style.borderColor='#e2e8f0'; this.style.boxShadow='none';">{{ old('meaning') }}</textarea>
            <small style="color: #64748b; display: block; margin-top: 4px;">Definition and usage examples</small>
            @error('meaning')
                <span style="color: #ef4444; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>
            @enderror
        </div>

        <!-- Part of Speech -->
        <div style="margin-bottom: 24px;">
            <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; font-size: 14px;">Part of Speech</label>
            <select 
                name="part_of_speech"
                style="width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; transition: all 0.2s; background: white; cursor: pointer;"
                onfocus="this.style.borderColor='#3b82f6'; this.style.boxShadow='0 0 0 3px rgba(59, 130, 246, 0.1)';"
                onblur="this.style.borderColor='#e2e8f0'; this.style.boxShadow='none';">
                <option value="">-- Select Part of Speech --</option>
                <option value="noun" {{ old('part_of_speech') === 'noun' ? 'selected' : '' }}>Noun (名詞)</option>
                <option value="verb" {{ old('part_of_speech') === 'verb' ? 'selected' : '' }}>Verb (動詞)</option>
                <option value="adjective" {{ old('part_of_speech') === 'adjective' ? 'selected' : '' }}>Adjective (形容詞)</option>
                <option value="adverb" {{ old('part_of_speech') === 'adverb' ? 'selected' : '' }}>Adverb (副詞)</option>
                <option value="particle" {{ old('part_of_speech') === 'particle' ? 'selected' : '' }}>Particle (助詞)</option>
                <option value="conjunction" {{ old('part_of_speech') === 'conjunction' ? 'selected' : '' }}>Conjunction (接続詞)</option>
                <option value="preposition" {{ old('part_of_speech') === 'preposition' ? 'selected' : '' }}>Preposition (前置詞)</option>
                <option value="interjection" {{ old('part_of_speech') === 'interjection' ? 'selected' : '' }}>Interjection (感動詞)</option>
            </select>
            @error('part_of_speech')
                <span style="color: #ef4444; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>
            @enderror
        </div>

        <!-- Action Buttons -->
        <div style="display: flex; gap: 12px; padding-top: 20px; border-top: 1px solid #e2e8f0;">
            <button 
                type="submit" 
                class="btn" 
                style="background-color: #3b82f6; color: white; padding: 10px 24px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s;">
                <x-icon name="plus" size="18" />
                Create Entry
            </button>
            <a 
                href="{{ route('admin.dictionary.index') }}" 
                class="btn" 
                style="background-color: #f1f5f9; color: #475569; padding: 10px 24px; border-radius: 8px; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #e2e8f0; transition: all 0.2s;">
                <x-icon name="close" size="18" />
                Cancel
            </a>
        </div>
    </form>
</div>
@endsection