@extends('admin.layouts.app')

@section('title', 'Edit Particle Quiz')
@section('page-title', 'Edit Particle Quiz')
@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.particle-sentences.update', $particleSentence) }}" method="POST">
        @csrf
        @method('PUT')

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px;">
            <!-- Question Text -->
            <div>
                <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; font-size: 14px;">Question (with blank / wrong particle) *</label>
                <input 
                    type="text" 
                    name="question" 
                    value="{{ old('question', $particleSentence->question) }}" 
                    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('question')
                    <span style="color: #ef4444; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>
                @enderror
            </div>

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

            <!-- Options -->
            <div>
                <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; font-size: 14px;">Options (Comma-separated) *</label>
                <input 
                    type="text" 
                    name="options" 
                    value="{{ old('options', implode(', ', $particleSentence->options ?? [])) }}" 
                    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;">Example: を, は, が, に</small>
                @error('options')
                    <span style="color: #ef4444; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>
                @enderror
            </div>

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

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

        <!-- Tip -->
        <div style="margin-bottom: 24px;">
            <label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; font-size: 14px;">💡 Quick Tip</label>
            <textarea 
                name="tip" 
                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('tip', $particleSentence->tip) }}</textarea>
            @error('tip')
                <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;">
                <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"/></svg>
                Save Changes
            </button>
            <a 
                href="{{ route('admin.particle-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;">
                <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"/></svg>
                Cancel
            </a>
        </div>
    </form>
</div>

{{-- Intercept form submit to convert comma-separated options into an array --}}
<script>
document.querySelector('form').addEventListener('submit', function(e) {
    const optionsInput = document.querySelector('input[name="options"]');
    if (optionsInput) {
        // We will create hidden inputs for the array since standard HTML form posting
        // an array from a single text input isn't native. 
        // A better approach is to just let Laravel handle the string and split it in the controller,
        // but since our validation rule is 'required|array', we need to submit it as an array.
        e.preventDefault();
        
        const form = this;
        const optionsStr = optionsInput.value;
        const optionsArr = optionsStr.split(',').map(s => s.trim()).filter(s => s);
        
        // Remove the original input's name attribute so it doesn't submit
        optionsInput.removeAttribute('name');
        
        // Add hidden inputs for each array element
        optionsArr.forEach((opt, index) => {
            const hidden = document.createElement('input');
            hidden.type = 'hidden';
            hidden.name = 'options[]';
            hidden.value = opt;
            form.appendChild(hidden);
        });
        
        form.submit();
    }
});
</script>
@endsection