@php
    $item = $course;
    $overviewParas = old('overview_paragraphs', $item->overview_json ?: (['']));
    if (empty($overviewParas)) { $overviewParas = ['']; }

    $modulesHtml = old('modules_html', $item->exists ? $item->modulesHtml() : '');

    $careerFields = old('career_fields', $item->career_fields_json ?: ['']);
    if (empty($careerFields)) { $careerFields = ['']; }

    $keyInfo = old('key_info_labels') !== null
        ? collect(old('key_info_labels', []))->map(fn ($l, $i) => ['label' => $l, 'value' => old('key_info_values.'.$i, '')])->all()
        : collect($item->key_info_json ?: [
            'Study Level' => $item->studyLevelName(),
            'Study Mode' => $item->study_mode,
            'Duration' => $item->duration,
            'Intake' => $item->intake,
            'Tuition Fee' => $item->tuition_fee,
            'Campus' => $item->campuses_text,
        ])->map(fn ($v, $k) => ['label' => $k, 'value' => $v])->values()->all();
    if (empty($keyInfo)) { $keyInfo = [['label' => '', 'value' => '']]; }

    $faqs = old('faqs', $item->faqs_json ?: [['q' => '', 'a' => '']]);
    if (empty($faqs)) { $faqs = [['q' => '', 'a' => '']]; }
@endphp

<form method="POST" enctype="multipart/form-data" action="{{ $item->exists ? route('admin.courses.update', $item) : route('admin.courses.store') }}" id="courseDetailsForm">
    @csrf
    @if($item->exists) @method('PUT') @endif

    <div class="row">
        <div class="col-xl-9">
            <div class="card">
                <div class="card-header">
                    <ul class="nav nav-tabs-custom card-header-tabs border-bottom-0" role="tablist">
                        <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#tab-basic" role="tab">Basic</a></li>
                        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-overview" role="tab">Overview</a></li>
                        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-modules" role="tab">Modules</a></li>
                        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-career" role="tab">Career</a></li>
                        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-keyinfo" role="tab">Key Info</a></li>
                        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-faqs" role="tab">FAQs</a></li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab-basic" role="tabpanel">
                            <div class="mb-3">
                                <label class="form-label">Category *</label>
                                <select name="course_category_id" class="form-select" required>
                                    <option value="">Select category</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}" @selected(old('course_category_id', $item->course_category_id) == $category->id)>{{ $category->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Title *</label>
                                <input type="text" name="title" class="form-control js-slug-source" value="{{ old('title', $item->title) }}" required>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Short Title</label>
                                    <input type="text" name="short_title" class="form-control" value="{{ old('short_title', $item->short_title) }}">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Slug</label>
                                    <input type="text" name="slug" class="form-control js-slug-target" value="{{ old('slug', $item->slug) }}">
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Intro (hero / lead text)</label>
                                <textarea name="intro" class="form-control js-ckeditor" data-height="120" rows="3">{{ old('intro', $item->intro) }}</textarea>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Enquiry banner</label>
                                <textarea name="enquiry_note" class="form-control js-ckeditor" data-height="100" rows="3" placeholder="For all other enquiries, please call us on…">{{ old('enquiry_note', $item->enquiry_note) }}</textarea>
                                <div class="form-text">Blue box under the intro on the course page. Leave blank to use Site Settings phone/email.</div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3"><label class="form-label">Badge</label><input type="text" name="badge" class="form-control" value="{{ old('badge', $item->badge) }}" placeholder="Bachelor's Degree"></div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Study Level</label>
                                    <select name="study_level_id" class="form-select">
                                        <option value="">Select study level</option>
                                        @foreach(($studyLevels ?? collect()) as $level)
                                            <option value="{{ $level->id }}" @selected(old('study_level_id', $item->study_level_id) == $level->id)>{{ $level->name }}</option>
                                        @endforeach
                                    </select>
                                    <div class="form-text">Manage levels in <a href="{{ route('admin.study-levels.index') }}">Courses → Study Levels</a>.</div>
                                </div>
                                <div class="col-md-6 mb-3"><label class="form-label">Duration</label><input type="text" name="duration" class="form-control" value="{{ old('duration', $item->duration) }}"></div>
                                <div class="col-md-6 mb-3"><label class="form-label">Study Mode</label><input type="text" name="study_mode" class="form-control" value="{{ old('study_mode', $item->study_mode) }}"></div>
                                <div class="col-md-6 mb-3"><label class="form-label">Tuition Fee</label><input type="text" name="tuition_fee" class="form-control" value="{{ old('tuition_fee', $item->tuition_fee) }}"></div>
                                <div class="col-md-6 mb-3"><label class="form-label">Intake</label><input type="text" name="intake" class="form-control" value="{{ old('intake', $item->intake) }}"></div>
                                <div class="col-md-6 mb-3"><label class="form-label">Campuses</label><input type="text" name="campuses_text" class="form-control" value="{{ old('campuses_text', $item->campuses_text) }}"></div>
                            </div>
                        </div>

                        <div class="tab-pane" id="tab-overview" role="tabpanel">
                            <p class="text-muted mb-3">Each block is shown on the course details Overview tab. Use the toolbar for bold, lists, links, etc.</p>
                            <div id="overviewRepeater">
                                @foreach($overviewParas as $i => $para)
                                    <div class="repeater-row mb-3">
                                        <div class="d-flex justify-content-between align-items-center mb-1">
                                            <label class="form-label mb-0">Paragraph {{ $i + 1 }}</label>
                                            <button type="button" class="btn btn-sm btn-outline-danger js-remove-row" title="Remove">&times;</button>
                                        </div>
                                        <textarea name="overview_paragraphs[]" class="form-control js-ckeditor" data-height="160" rows="4">{{ $para }}</textarea>
                                    </div>
                                @endforeach
                            </div>
                            <button type="button" class="btn btn-sm btn-soft-primary" id="addOverviewPara">+ Add paragraph</button>
                        </div>

                        <div class="tab-pane" id="tab-modules" role="tabpanel">
                            <p class="text-muted mb-3">Write the full Course Modules content in one editor (levels, module names, credits, outcomes — whatever you need).</p>
                            <textarea name="modules_html" class="form-control js-ckeditor" data-height="360" rows="14">{{ $modulesHtml }}</textarea>
                        </div>

                        <div class="tab-pane" id="tab-career" role="tabpanel">
                            <div class="mb-3">
                                <label class="form-label">Career intro</label>
                                <textarea name="career_intro" class="form-control js-ckeditor" data-height="140" rows="4">{{ old('career_intro', $item->career_intro) }}</textarea>
                            </div>
                            <label class="form-label">Career fields / progression list</label>
                            <div id="careerFieldsRepeater">
                                @foreach($careerFields as $field)
                                    <div class="repeater-row input-group mb-2">
                                        <input type="text" name="career_fields[]" class="form-control" value="{{ $field }}" placeholder="e.g. Human Resources">
                                        <button type="button" class="btn btn-outline-danger js-remove-row">&times;</button>
                                    </div>
                                @endforeach
                            </div>
                            <button type="button" class="btn btn-sm btn-soft-primary" id="addCareerField">+ Add field</button>
                        </div>

                        <div class="tab-pane" id="tab-keyinfo" role="tabpanel">
                            <p class="text-muted mb-3">Label / value pairs shown in Key Information (Study Mode, Fee, Campus, etc.).</p>
                            <div id="keyInfoRepeater">
                                @foreach($keyInfo as $row)
                                    <div class="repeater-row row g-2 mb-2">
                                        <div class="col-md-4"><input type="text" name="key_info_labels[]" class="form-control" value="{{ $row['label'] }}" placeholder="Label"></div>
                                        <div class="col-md-7"><input type="text" name="key_info_values[]" class="form-control" value="{{ $row['value'] }}" placeholder="Value"></div>
                                        <div class="col-md-1"><button type="button" class="btn btn-outline-danger w-100 js-remove-row">&times;</button></div>
                                    </div>
                                @endforeach
                            </div>
                            <button type="button" class="btn btn-sm btn-soft-primary" id="addKeyInfo">+ Add row</button>
                        </div>

                        <div class="tab-pane" id="tab-faqs" role="tabpanel">
                            <div id="faqsRepeater">
                                @foreach($faqs as $faq)
                                    <div class="repeater-row card border mb-3">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between mb-2">
                                                <strong>FAQ</strong>
                                                <button type="button" class="btn btn-sm btn-outline-danger js-remove-row">Remove</button>
                                            </div>
                                            <div class="mb-2">
                                                <input type="text" name="faqs[{{ $loop->index }}][q]" class="form-control faq-q" value="{{ $faq['q'] ?? '' }}" placeholder="Question">
                                            </div>
                                            <textarea name="faqs[{{ $loop->index }}][a]" class="form-control faq-a js-ckeditor" data-height="120" rows="3" placeholder="Answer">{{ $faq['a'] ?? '' }}</textarea>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <button type="button" class="btn btn-sm btn-soft-primary" id="addFaq">+ Add FAQ</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3">
            <div class="card">
                <div class="card-header"><h5 class="mb-0">Publish</h5></div>
                <div class="card-body">
                    <div class="mb-3"><label class="form-label">Listing Image URL</label><input type="text" name="image" class="form-control" value="{{ old('image', $item->image) }}"></div>
                    <div class="mb-3"><label class="form-label">Upload Listing Image</label><input type="file" name="image_file" class="form-control" accept="image/*"></div>
                    <div class="mb-3">
                        <label class="form-label">Breadcrumb Image</label>
                        <p class="text-muted small mb-1">Hero banner. Falls back to listing image, then Site Settings default.</p>
                        @if($item->breadcrumb_image)
                            <div class="mb-2"><img src="{{ \App\Support\BreadcrumbImage::mediaUrl($item->breadcrumb_image) }}" alt="" class="img-fluid rounded" style="max-height:90px;"></div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" name="remove_breadcrumb_image" value="1" id="remove_breadcrumb_image">
                                <label class="form-check-label" for="remove_breadcrumb_image">Remove breadcrumb image</label>
                            </div>
                        @endif
                        <input type="file" name="breadcrumb_image_file" class="form-control" accept="image/*">
                    </div>
                    <div class="mb-3"><label class="form-label">Meta Title</label><input type="text" name="meta_title" class="form-control" value="{{ old('meta_title', $item->meta_title) }}"></div>
                    <div class="mb-3"><label class="form-label">Meta Description</label><textarea name="meta_description" class="form-control" rows="2">{{ old('meta_description', $item->meta_description) }}</textarea></div>
                    <div class="mb-3"><label class="form-label">Meta Keywords</label><input type="text" name="meta_keywords" class="form-control" value="{{ old('meta_keywords', $item->meta_keywords) }}"></div>
                    <div class="mb-3"><label class="form-label">Sort Order</label><input type="number" name="sort_order" class="form-control" value="{{ old('sort_order', $item->sort_order ?? 0) }}"></div>
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" name="status" value="1" id="status" @checked(old('status', $item->status ?? true))>
                        <label class="form-check-label" for="status">Active</label>
                    </div>
                    <button class="btn btn-primary w-100">Save Course</button>
                    <a href="{{ route('admin.courses.index') }}" class="btn btn-light w-100 mt-2">Back to list</a>
                    @if($item->exists && $item->slug)
                        <a href="{{ $item->url() }}" target="_blank" class="btn btn-soft-success w-100 mt-2">View on site</a>
                    @endif
                </div>
            </div>
        </div>
    </div>
</form>

<template id="tpl-overview-row">
    <div class="repeater-row mb-3">
        <div class="d-flex justify-content-between align-items-center mb-1">
            <label class="form-label mb-0">Paragraph</label>
            <button type="button" class="btn btn-sm btn-outline-danger js-remove-row">&times;</button>
        </div>
        <textarea name="overview_paragraphs[]" class="form-control js-ckeditor" data-height="160" rows="4"></textarea>
    </div>
</template>

<template id="tpl-career-row">
    <div class="repeater-row input-group mb-2">
        <input type="text" name="career_fields[]" class="form-control" placeholder="e.g. Human Resources">
        <button type="button" class="btn btn-outline-danger js-remove-row">&times;</button>
    </div>
</template>

<template id="tpl-keyinfo-row">
    <div class="repeater-row row g-2 mb-2">
        <div class="col-md-4"><input type="text" name="key_info_labels[]" class="form-control" placeholder="Label"></div>
        <div class="col-md-7"><input type="text" name="key_info_values[]" class="form-control" placeholder="Value"></div>
        <div class="col-md-1"><button type="button" class="btn btn-outline-danger w-100 js-remove-row">&times;</button></div>
    </div>
</template>

<template id="tpl-faq-row">
    <div class="repeater-row card border mb-3">
        <div class="card-body">
            <div class="d-flex justify-content-between mb-2">
                <strong>FAQ</strong>
                <button type="button" class="btn btn-sm btn-outline-danger js-remove-row">Remove</button>
            </div>
            <div class="mb-2"><input type="text" name="faqs[__I__][q]" class="form-control faq-q" placeholder="Question"></div>
            <textarea name="faqs[__I__][a]" class="form-control faq-a js-ckeditor" data-height="120" rows="3" placeholder="Answer"></textarea>
        </div>
    </div>
</template>