@extends('admin.layouts.app')

@section('title', 'Edit Practice Sentence')
@section('page-title', 'Edit Practice Sentence')
@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.practice-sentences.update', $practiceSentence) }}" method="POST">
        @csrf
        @method('PUT')

        <!-- Japanese Text -->
        <div style="margin-bottom: 24px;">
            <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; font-size: 14px;">Japanese Text *</label>
            <input 
                type="text" 
                name="ja" 
                value="{{ old('ja', $practiceSentence->ja) }}" 
                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('ja')
                <span style="color: #ef4444; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>
            @enderror
        </div>

        <!-- Annotated Japanese -->
        <div style="margin-bottom: 24px;">
            <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; font-size: 14px;">Annotated Japanese (Furigana)</label>
            <input 
                type="text" 
                name="ja_annotated" 
                value="{{ old('ja_annotated', $practiceSentence->ja_annotated) }}"
                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;">Japanese text with furigana annotations</small>
            @error('ja_annotated')
                <span style="color: #ef4444; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>
            @enderror
        </div>

        <!-- Indonesian Translation -->
        <div style="margin-bottom: 24px;">
            <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; font-size: 14px;">Indonesian Translation</label>
            <textarea 
                name="id_translation" 
                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('id_translation', $practiceSentence->id_translation) }}</textarea>
            @error('id_translation')
                <span style="color: #ef4444; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>
            @enderror
        </div>

        <!-- English Translation -->
        <div style="margin-bottom: 24px;">
            <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; font-size: 14px;">English Translation</label>
            <textarea 
                name="en_translation" 
                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('en_translation', $practiceSentence->en_translation) }}</textarea>
            @error('en_translation')
                <span style="color: #ef4444; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>
            @enderror
        </div>

        <!-- Explanation -->
        <div style="margin-bottom: 24px;">
            <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; font-size: 14px;">Explanation</label>
            <textarea 
                name="explanation" 
                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('explanation', $practiceSentence->explanation) }}</textarea>
            <small style="color: #64748b; display: block; margin-top: 4px;">Grammar notes, usage tips, or additional context</small>
            @error('explanation')
                <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.practice-sentences.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