@extends('layouts.admin')
@section('title','Edit Passage')
@section('page-title','Edit 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-pencil me-2 text-primary"></i>
            Edit Passage — {{ $instructionGroup->title ?: 'Passage #'.$instructionGroup->id }}
        </h6>
    </div>
    <div class="card-body p-4">
        <form method="POST" action="{{ route('admin.instruction-groups.update', $instructionGroup) }}"
              enctype="multipart/form-data">
            @csrf @method('PUT')

            <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" required>
                        @foreach($subjects as $subject)
                            <option value="{{ $subject->id }}"
                                {{ old('subject_id', $instructionGroup->subject_id) == $subject->id ? 'selected' : '' }}>
                                {{ $subject->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-semibold">Title <small class="text-muted">(optional)</small></label>
                    <input type="text" name="title" class="form-control"
                           value="{{ old('title', $instructionGroup->title) }}">
                </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" rows="8">
                    {{ old('passage_text', $instructionGroup->passage_text) }}
                </textarea>
            </div>

            <div class="mb-4">
                <label class="form-label fw-semibold">Passage Image <small class="text-muted">(optional)</small></label>
                @if($instructionGroup->passage_image)
                    <div class="mb-2">
                        <img src="{{ asset('storage/' . $instructionGroup->passage_image) }}"
                             class="img-thumbnail" style="max-height:100px">
                        <small class="d-block text-muted">Upload below to replace.</small>
                    </div>
                @endif
                <input type="file" name="passage_image" class="form-control" accept="image/*">
            </div>

            <div class="alert alert-info py-2 small">
                <i class="bi bi-info-circle me-1"></i>
                This passage is linked to <strong>{{ $instructionGroup->questions()->count() }}</strong> question(s).
            </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>Update 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