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

    $facilities = old('facilities', $item->facilities_json ?: ['']);
    if (empty($facilities)) { $facilities = ['']; }

    $related = old('related_courses', $item->related_courses_json ?: [['title' => '', 'slug' => '', 'desc' => '']]);
    if (empty($related)) { $related = [['title' => '', 'slug' => '', 'desc' => '']]; }

    $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 ?: [
            'Campus Type' => $item->badge,
            'Address' => $item->address,
            'Phone' => $item->phone,
            'Email' => $item->email,
        ])->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.campuses.update', $item) : route('admin.campuses.store') }}" id="campusDetailsForm">
    @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="#ctab-basic" role="tab">Basic</a></li>
                        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#ctab-overview" role="tab">Overview</a></li>
                        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#ctab-facilities" role="tab">Facilities</a></li>
                        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#ctab-courses" role="tab">Related Courses</a></li>
                        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#ctab-keyinfo" role="tab">Key Info</a></li>
                        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#ctab-faqs" role="tab">FAQs</a></li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content">
                        <div class="tab-pane active" id="ctab-basic" role="tabpanel">
                            <div class="mb-3">
                                <label class="form-label">Category *</label>
                                <select name="campus_category_id" class="form-select" required>
                                    <option value="">Select category</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}" @selected(old('campus_category_id', $item->campus_category_id) == $category->id)>{{ $category->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Name *</label>
                                    <input type="text" name="name" class="form-control js-slug-source" value="{{ old('name', $item->name) }}" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Title *</label>
                                    <input type="text" name="title" class="form-control" value="{{ old('title', $item->title) }}" required>
                                </div>
                            </div>
                            <div class="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 class="mb-3">
                                <label class="form-label">Intro</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">Student life</label>
                                <textarea name="student_life" class="form-control js-ckeditor" data-height="140" rows="4">{{ old('student_life', $item->student_life) }}</textarea>
                            </div>
                            <div class="row">
                                <div class="col-md-4 mb-3"><label class="form-label">Badge</label><input type="text" name="badge" class="form-control" value="{{ old('badge', $item->badge) }}"></div>
                                <div class="col-md-4 mb-3"><label class="form-label">Students</label><input type="text" name="students" class="form-control" value="{{ old('students', $item->students) }}"></div>
                                <div class="col-md-4 mb-3"><label class="form-label">Courses count</label><input type="text" name="courses_count" class="form-control" value="{{ old('courses_count', $item->courses_count) }}"></div>
                            </div>
                            <div class="mb-3"><label class="form-label">Address</label><input type="text" name="address" class="form-control" value="{{ old('address', $item->address) }}"></div>
                            <div class="row">
                                <div class="col-md-6 mb-3"><label class="form-label">Phone</label><input type="text" name="phone" class="form-control" value="{{ old('phone', $item->phone) }}"></div>
                                <div class="col-md-6 mb-3"><label class="form-label">Email</label><input type="email" name="email" class="form-control" value="{{ old('email', $item->email) }}"></div>
                            </div>
                            <div class="mb-3"><label class="form-label">Map embed (iframe HTML)</label><textarea name="map_embed" class="form-control" rows="3">{{ old('map_embed', $item->map_embed) }}</textarea></div>
                            <div class="row">
                                <div class="col-md-6 mb-3"><label class="form-label">Latitude</label><input type="text" name="latitude" class="form-control" value="{{ old('latitude', $item->latitude) }}"></div>
                                <div class="col-md-6 mb-3"><label class="form-label">Longitude</label><input type="text" name="longitude" class="form-control" value="{{ old('longitude', $item->longitude) }}"></div>
                            </div>
                        </div>

                        <div class="tab-pane" id="ctab-overview" role="tabpanel">
                            <p class="text-muted mb-3">Paragraphs shown on the campus overview tab. Use the toolbar for formatting.</p>
                            <div id="campusOverviewRepeater">
                                @foreach($overviewParas as $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</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="3">{{ $para }}</textarea>
                                    </div>
                                @endforeach
                            </div>
                            <button type="button" class="btn btn-sm btn-soft-primary" id="addCampusOverview">+ Add paragraph</button>
                        </div>

                        <div class="tab-pane" id="ctab-facilities" role="tabpanel">
                            <div id="facilitiesRepeater">
                                @foreach($facilities as $facility)
                                    <div class="repeater-row input-group mb-2">
                                        <input type="text" name="facilities[]" class="form-control" value="{{ $facility }}" placeholder="Facility">
                                        <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="addFacility">+ Add facility</button>
                        </div>

                        <div class="tab-pane" id="ctab-courses" role="tabpanel">
                            <p class="text-muted mb-3">Courses linked from this campus page. Slug should match a course URL slug.</p>
                            <div id="relatedCoursesRepeater">
                                @foreach($related as $i => $course)
                                    <div class="repeater-row card border mb-3">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between mb-2">
                                                <strong>Related course</strong>
                                                <button type="button" class="btn btn-sm btn-outline-danger js-remove-row">Remove</button>
                                            </div>
                                            <div class="row g-2">
                                                <div class="col-md-6"><input type="text" name="related_courses[{{ $i }}][title]" class="form-control rc-title" value="{{ $course['title'] ?? '' }}" placeholder="Course title"></div>
                                                <div class="col-md-6"><input type="text" name="related_courses[{{ $i }}][slug]" class="form-control rc-slug" value="{{ $course['slug'] ?? '' }}" placeholder="ba-hons-business-management"></div>
                                                <div class="col-12"><input type="text" name="related_courses[{{ $i }}][desc]" class="form-control rc-desc" value="{{ $course['desc'] ?? '' }}" placeholder="Short description"></div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <button type="button" class="btn btn-sm btn-soft-primary" id="addRelatedCourse">+ Add course</button>
                        </div>

                        <div class="tab-pane" id="ctab-keyinfo" role="tabpanel">
                            <div id="campusKeyInfoRepeater">
                                @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="addCampusKeyInfo">+ Add row</button>
                        </div>

                        <div class="tab-pane" id="ctab-faqs" role="tabpanel">
                            <div id="campusFaqsRepeater">
                                @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="addCampusFaq">+ 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 Campus</button>
                    <a href="{{ route('admin.campuses.index') }}" class="btn btn-light w-100 mt-2">Back to list</a>
                    @if($item->exists && $item->slug)
                        <a href="{{ route('campus.details', $item->slug) }}" target="_blank" class="btn btn-soft-success w-100 mt-2">View on site</a>
                    @endif
                </div>
            </div>
        </div>
    </div>
</form>

<template id="tpl-campus-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="3"></textarea>
    </div>
</template>
<template id="tpl-facility-row">
    <div class="repeater-row input-group mb-2">
        <input type="text" name="facilities[]" class="form-control" placeholder="Facility">
        <button type="button" class="btn btn-outline-danger js-remove-row">&times;</button>
    </div>
</template>
<template id="tpl-related-course-row">
    <div class="repeater-row card border mb-3">
        <div class="card-body">
            <div class="d-flex justify-content-between mb-2">
                <strong>Related course</strong>
                <button type="button" class="btn btn-sm btn-outline-danger js-remove-row">Remove</button>
            </div>
            <div class="row g-2">
                <div class="col-md-6"><input type="text" name="related_courses[__I__][title]" class="form-control rc-title" placeholder="Course title"></div>
                <div class="col-md-6"><input type="text" name="related_courses[__I__][slug]" class="form-control rc-slug" placeholder="course-slug"></div>
                <div class="col-12"><input type="text" name="related_courses[__I__][desc]" class="form-control rc-desc" placeholder="Short description"></div>
            </div>
        </div>
    </div>
</template>
<template id="tpl-campus-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-campus-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>