@extends('admin.layouts.app')

@section('title', 'Create Card')
@section('page-title', 'Create New 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.store') }}" method="POST">
        @csrf

        <!-- Deck Selection -->
        <div style="margin-bottom: 24px;">
            <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; font-size: 14px;">Deck *</label>
            <select 
                name="deck_id" 
                required
                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 a deck --</option>
                @foreach ($decks as $deck)
                    <option value="{{ $deck->id }}" {{ old('deck_id') == $deck->id ? 'selected' : '' }}>{{ $deck->name }}</option>
                @endforeach
            </select>
            @error('deck_id')
                <span style="color: #ef4444; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>
            @enderror
        </div>

        <!-- 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') }}" 
                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') }}" 
                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') }}</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') }}</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') }}</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="plus" size="18" />
                Create Card
            </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