@extends('admin.layouts.app')

@section('title', 'Edit Card')
@section('page-title', 'Edit Card')
@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.cards.update', $card) }}" method="POST">
        @csrf
        @method('PUT')

        <!-- Kanji -->
        <div style="margin-bottom: 24px;">
            <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; font-size: 14px;">Kanji *</label>
            <input 
                type="text" 
                name="kanji" 
                value="{{ old('kanji', $card->kanji) }}" 
                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';">
            <small style="color: #64748b; display: block; margin-top: 4px;">The kanji or word</small>
            @error('kanji')
                <span style="color: #ef4444; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>
            @enderror
        </div>

        <!-- Kana (Reading) -->
        <div style="margin-bottom: 24px;">
            <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; font-size: 14px;">Kana (Reading) *</label>
            <input 
                type="text" 
                name="kana" 
                value="{{ old('kana', $card->kana) }}" 
                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';">
            <small style="color: #64748b; display: block; margin-top: 4px;">Hiragana or Katakana reading</small>
            @error('kana')
                <span style="color: #ef4444; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>
            @enderror
        </div>

        <!-- Meaning (English) -->
        <div style="margin-bottom: 24px;">
            <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; font-size: 14px;">Meaning (English) *</label>
            <textarea 
                name="meaning_en" 
                required
                style="width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; min-height: 80px; 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_en', $card->meaning_en) }}</textarea>
            <small style="color: #64748b; display: block; margin-top: 4px;">English meaning or translation</small>
            @error('meaning_en')
                <span style="color: #ef4444; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>
            @enderror
        </div>

        <!-- Example Sentence (Japanese) -->
        <div style="margin-bottom: 24px;">
            <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; font-size: 14px;">Example Sentence (Japanese)</label>
            <textarea 
                name="example_sentence_ja" 
                style="width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; min-height: 60px; 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('example_sentence_ja', $card->example_sentence_ja) }}</textarea>
            @error('example_sentence_ja')
                <span style="color: #ef4444; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>
            @enderror
        </div>

        <!-- Example Sentence (English) -->
        <div style="margin-bottom: 24px;">
            <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; font-size: 14px;">Example Sentence (English)</label>
            <textarea 
                name="example_sentence_en" 
                style="width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; min-height: 60px; 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('example_sentence_en', $card->example_sentence_en) }}</textarea>
            @error('example_sentence_en')
                <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="check" size="18" />
                Save Changes
            </button>
            <a 
                href="{{ route('admin.cards.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