@extends('admin.layouts.app')

@section('title', 'Edit Kanji')
@section('page-title', 'Edit Kanji: ' . $kanji->character)
@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: 800px;">
    <form action="{{ route('admin.kanjis.update', $kanji) }}" method="POST">
        @csrf
        @method('PUT')

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px;">
            <!-- Character -->
            <div>
                <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; font-size: 14px;">Character *</label>
                <input type="text" name="character" value="{{ old('character', $kanji->character) }}" required maxlength="4"
                    style="width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 24px; text-align: center; font-family: serif; 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('character')<span style="color: #ef4444; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>@enderror
            </div>

            <!-- Radical -->
            <div>
                <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; font-size: 14px;">Radical *</label>
                <input type="text" name="radical" value="{{ old('radical', $kanji->radical) }}" required maxlength="4"
                    style="width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 24px; text-align: center; font-family: serif; 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('radical')<span style="color: #ef4444; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>@enderror
            </div>
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px;">
            <!-- Onyomi -->
            <div>
                <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; font-size: 14px;">Onyomi (Katakana) *</label>
                <input type="text" name="onyomi" value="{{ old('onyomi', $kanji->onyomi) }}" required
                    style="width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; transition: all 0.2s;">
                @error('onyomi')<span style="color: #ef4444; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>@enderror
            </div>

            <!-- Onyomi Variation -->
            <div>
                <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; font-size: 14px;">Onyomi Variation</label>
                <input type="text" name="onyomi_variation" value="{{ old('onyomi_variation', $kanji->onyomi_variation) }}"
                    style="width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; transition: all 0.2s;">
                @error('onyomi_variation')<span style="color: #ef4444; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>@enderror
            </div>
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px;">
            <!-- Kunyomi -->
            <div>
                <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; font-size: 14px;">Kunyomi (Hiragana) *</label>
                <input type="text" name="kunyomi" value="{{ old('kunyomi', $kanji->kunyomi) }}" required
                    style="width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; transition: all 0.2s;">
                @error('kunyomi')<span style="color: #ef4444; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>@enderror
            </div>

            <!-- JLPT Level -->
            <div>
                <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; font-size: 14px;">JLPT Level</label>
                <select name="jlpt_level"
                    style="width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; transition: all 0.2s; background: white;">
                    <option value="">None</option>
                    @foreach(['N5', 'N4', 'N3', 'N2', 'N1'] as $level)
                        <option value="{{ $level }}" {{ old('jlpt_level', $kanji->jlpt_level) == $level ? 'selected' : '' }}>{{ $level }}</option>
                    @endforeach
                </select>
                @error('jlpt_level')<span style="color: #ef4444; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>@enderror
            </div>
        </div>

        <!-- Explanation -->
        <div style="margin-bottom: 32px;">
            <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; font-size: 14px;">Explanation / Meaning *</label>
            <textarea name="explanation" required
                style="width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; min-height: 80px; font-family: inherit; transition: all 0.2s;">{{ old('explanation', $kanji->explanation) }}</textarea>
            @error('explanation')<span style="color: #ef4444; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>@enderror
        </div>

        <!-- Sample Words -->
        <div style="margin-bottom: 24px;">
            <h3 style="font-size: 16px; font-weight: 600; margin-bottom: 16px; color: #0f172a; border-bottom: 1px solid #e2e8f0; padding-bottom: 8px;">Sample Words (Up to 5)</h3>
            
            @php
                $sampleWords = $kanji->sample_words ?? [];
            @endphp

            @for ($i = 0; $i < 5; $i++)
                @php
                    $word = old('sample_word_'.$i, $sampleWords[$i]['word'] ?? '');
                    $meaning = old('sample_meaning_'.$i, $sampleWords[$i]['meaning'] ?? '');
                @endphp
                <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 16px; margin-bottom: 12px;">
                    <div>
                        <input type="text" name="sample_word_{{ $i }}" value="{{ $word }}" placeholder="Word {{ $i+1 }} (e.g. 漢字)"
                            style="width: 100%; padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 14px;">
                    </div>
                    <div>
                        <input type="text" name="sample_meaning_{{ $i }}" value="{{ $meaning }}" placeholder="Meaning {{ $i+1 }} (e.g. kanji, Chinese characters)"
                            style="width: 100%; padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 14px;">
                    </div>
                </div>
            @endfor
        </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;">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="18" height="18">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                </svg>
                Update Kanji
            </button>
            <a href="{{ route('admin.kanjis.index') }}" class="btn" style="background-color: #f1f5f9; color: #475569; padding: 10px 24px; border-radius: 8px; text-decoration: none; font-weight: 600; border: 1px solid #e2e8f0; display: inline-flex; align-items: center; gap: 8px;">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="18" height="18">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
                Cancel
            </a>
        </div>
    </form>
</div>
@endsection