@extends('layouts.admin')
@section('title','Add Passage')
@section('page-title','Add Comprehension Passage')

@section('content')
<div class="row justify-content-center">
<div class="col-xl-9">
<div class="card border-0 shadow-sm">
    <div class="card-header bg-white border-bottom py-3">
        <h6 class="mb-0 fw-bold"><i class="bi bi-paragraph me-2 text-primary"></i>Add New Passage</h6>
    </div>
    <div class="card-body p-4">
        <form method="POST" action="{{ route('admin.instruction-groups.store') }}" enctype="multipart/form-data">
            @csrf
            <div class="row g-3 mb-3">
                <div class="col-md-6">
                    <label class="form-label fw-semibold">Subject <span class="text-danger">*</span></label>
                    <select name="subject_id" class="form-select @error('subject_id') is-invalid @enderror" required>
                        <option value="">-- Select Subject --</option>
                        @foreach($subjects as $subject)
                            <option value="{{ $subject->id }}" {{ old('subject_id') == $subject->id ? 'selected' : '' }}>
                                {{ $subject->name }}
                            </option>
                        @endforeach
                    </select>
                    @error('subject_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-semibold">Passage Title <small class="text-muted">(optional)</small></label>
                    <input type="text" name="title" class="form-control" value="{{ old('title') }}"
                           placeholder="e.g. The Farmer and His Children">
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label fw-semibold">Passage Text <span class="text-danger">*</span></label>
                <textarea name="passage_text" id="passage_text"
                          class="form-control @error('passage_text') is-invalid @enderror"
                          rows="8">{{ old('passage_text') }}</textarea>
                @error('passage_text')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <div class="mb-4">
                <label class="form-label fw-semibold">Passage Image <small class="text-muted">(optional)</small></label>
                <input type="file" name="passage_image" class="form-control" accept="image/*">
                <small class="text-muted">For diagram-based passages</small>
            </div>

            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary px-4"><i class="bi bi-check-lg me-1"></i>Save Passage</button>
                <a href="{{ route('admin.instruction-groups.index') }}" class="btn btn-light px-4">Cancel</a>
            </div>
        </form>
    </div>
</div>
</div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.tiny.cloud/1/4tzz0ahvwcavgl831ae12qgzavkuy2vuxlc4zakkfikf7amv/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
    selector: '#passage_text',
    plugins: 'lists table charmap code',
    toolbar: 'undo redo | bold italic | bullist numlist | table | charmap | code',
    menubar: false, height: 300, branding: false, promotion: false,
    content_style: 'body { font-family: Arial, sans-serif; font-size: 14px; line-height: 1.8; }',
});
</script>
@endpush