{{-- =====================================================================
     COURSES SHARED FORM PARTIAL
     Used by: admin/courses/create.blade.php  &  admin/courses/edit.blade.php
     ===================================================================== --}}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

{{-- ╔══════════════════════════════════════════════╗
     ║  LEFT COLUMN  (main content, spans 2/3)      ║
     ╚══════════════════════════════════════════════╝ --}}
<div class="lg:col-span-2 space-y-6">

    {{-- ── Title ─────────────────────────────────────────────── --}}
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
        <label for="title" class="block text-sm font-bold text-gray-900 mb-2">
            Course Title <span class="text-red-500">*</span>
        </label>
        <input id="title" name="title" type="text" required
               value="{{ old('title', $course->title ?? '') }}"
               placeholder="e.g. Diploma in Caregiving"
               class="block w-full rounded-xl border-0 py-3 px-4 text-gray-900 text-lg font-semibold shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-primary-600 transition-all">
        @error('title')<p class="mt-1.5 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>

    {{-- ── Slug ──────────────────────────────────────────────── --}}
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
        <label for="slug" class="block text-sm font-bold text-gray-900 mb-1">
            URL Slug
            <span class="text-xs font-normal text-gray-400">(auto-generated from title if blank)</span>
        </label>
        <div class="flex items-center gap-x-2 mt-2">
            <span class="text-sm text-gray-400 whitespace-nowrap">/courses/</span>
            <input id="slug" name="slug" type="text"
                   value="{{ old('slug', $course->slug ?? '') }}"
                   placeholder="diploma-in-caregiving"
                   class="block flex-1 rounded-xl border-0 py-2.5 px-4 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-primary-600 text-sm transition-all">
        </div>
        @error('slug')<p class="mt-1.5 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>

    {{-- ── Short Description ─────────────────────────────────── --}}
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
        <label for="short_description" class="block text-sm font-bold text-gray-900 mb-1">
            Short Description
            <span class="text-xs font-normal text-gray-400">(shown on course cards on homepage)</span>
        </label>
        <textarea id="short_description" name="short_description" rows="3"
                  placeholder="A concise summary shown on course listing cards..."
                  class="mt-2 block w-full rounded-xl border-0 py-3 px-4 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-primary-600 resize-none text-sm transition-all">{{ old('short_description', $course->short_description ?? '') }}</textarea>
        @error('short_description')<p class="mt-1.5 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>

    {{-- ── Long Description (TinyMCE) ───────────────────────── --}}
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
        <label for="long_description" class="block text-sm font-bold text-gray-900 mb-1">
            Full Course Description
            <span class="text-xs font-normal text-gray-400">(shown on the course detail page)</span>
        </label>
        <div class="mt-2">
            <textarea id="long_description" name="long_description"
                      class="block w-full" rows="18"
                      placeholder="Write the full course details here…">{{ old('long_description', $course->long_description ?? '') }}</textarea>
        </div>
        @error('long_description')<p class="mt-1.5 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>

    {{-- ── SEO Section ────────────────────────────────────────── --}}
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
        <div class="flex items-center gap-x-3 mb-6">
            <div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0"
                 style="background:#027fc5;">
                <i class="fas fa-search-plus" style="color:#027fc5;"></i>
            </div>
            <div>
                <h3 class="text-base font-bold text-gray-900">SEO / Meta Settings</h3>
                <p class="text-xs text-gray-500">Improve this course page's search engine visibility</p>
            </div>
        </div>

        {{-- Google SERP preview --}}
        <div class="mb-6 rounded-xl bg-gray-50 border border-gray-200 p-4">
            <p class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-3">
                <i class="fab fa-google mr-1"></i>Google Preview
            </p>
            <div class="bg-white rounded-lg p-4 shadow-sm border border-gray-100">
                <p id="seo-preview-title" class="text-lg font-medium truncate" style="color:#1a0dab;">
                    {{ old('meta_title', $course->meta_title ?? $course->title ?? 'Course Title') }}
                </p>
                <p id="seo-preview-url" class="text-sm text-green-700 truncate mt-0.5">
                    {{ url('/courses/' . ($course->slug ?? 'course-slug')) }}
                </p>
                <p id="seo-preview-desc" class="text-sm text-gray-600 mt-1 leading-snug line-clamp-2">
                    {{ old('meta_description', $course->meta_description ?? $course->short_description ?? 'Meta description will appear here (150–160 chars).') }}
                </p>
            </div>
        </div>

        {{-- Meta Title --}}
        <div class="mb-5">
            <div class="flex justify-between mb-1.5">
                <label for="meta_title" class="text-sm font-semibold text-gray-900">Meta Title</label>
                <span id="meta-title-count" class="text-xs text-gray-400">0 / 60</span>
            </div>
            <input id="meta_title" name="meta_title" type="text" maxlength="60"
                   value="{{ old('meta_title', $course->meta_title ?? '') }}"
                   placeholder="SEO-optimised title (leave blank to use course title)"
                   class="block w-full rounded-xl border-0 py-3 px-4 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-primary-600 text-sm transition-all">
            <div class="mt-2 h-1.5 bg-gray-200 rounded-full overflow-hidden">
                <div id="meta-title-bar" class="h-full rounded-full transition-all" style="width:0%;background:#027fc5;"></div>
            </div>
            @error('meta_title')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
        </div>

        {{-- Meta Description --}}
        <div class="mb-5">
            <div class="flex justify-between mb-1.5">
                <label for="meta_description" class="text-sm font-semibold text-gray-900">Meta Description</label>
                <span id="meta-desc-count" class="text-xs text-gray-400">0 / 160</span>
            </div>
            <textarea id="meta_description" name="meta_description" rows="3" maxlength="160"
                      placeholder="Compelling search result snippet (150–160 chars recommended)"
                      class="block w-full rounded-xl border-0 py-3 px-4 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-primary-600 resize-none text-sm transition-all">{{ old('meta_description', $course->meta_description ?? '') }}</textarea>
            <div class="mt-2 h-1.5 bg-gray-200 rounded-full overflow-hidden">
                <div id="meta-desc-bar" class="h-full rounded-full transition-all" style="width:0%;background:#027fc5;"></div>
            </div>
            @error('meta_description')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
        </div>

        {{-- Meta Keywords --}}
        <div>
            <label for="meta_keywords" class="block text-sm font-semibold text-gray-900 mb-1.5">Meta Keywords</label>
            <input id="meta_keywords" name="meta_keywords" type="text"
                   value="{{ old('meta_keywords', $course->meta_keywords ?? '') }}"
                   placeholder="caregiving, aged care, diploma, international certification"
                   class="block w-full rounded-xl border-0 py-3 px-4 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-primary-600 text-sm transition-all">
            <p class="mt-1 text-xs text-gray-400">Separate keywords with commas</p>
            @error('meta_keywords')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
        </div>
    </div>

</div>{{-- END left column --}}

{{-- ╔══════════════════════════════════════════════╗
     ║  RIGHT COLUMN  (sidebar, spans 1/3)          ║
     ╚══════════════════════════════════════════════╝ --}}
<div class="space-y-6">

    {{-- ── Publish / Status ─────────────────────────────────── --}}
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
        <h3 class="text-sm font-bold text-gray-900 mb-5">Publish Settings</h3>

        {{-- Active toggle --}}
        <div class="flex items-center justify-between pb-4 mb-4 border-b border-gray-100"
             x-data="{ active: {{ old('is_active', ($course->is_active ?? true) ? 1 : 0) ? 'true' : 'false' }} }">
            <div>
                <p class="text-sm font-semibold text-gray-800">Visibility</p>
                <p class="text-xs text-gray-400 mt-0.5" x-text="active ? 'Visible on website' : 'Hidden from public'"></p>
            </div>
            <label class="relative inline-flex items-center cursor-pointer">
                <input type="hidden" name="is_active" value="0">
                <input type="checkbox" name="is_active" value="1" x-model="active"
                       {{ old('is_active', $course->is_active ?? true) ? 'checked' : '' }}
                       class="sr-only peer">
                <div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600"></div>
            </label>
        </div>

        {{-- Featured toggle --}}
        <div class="flex items-center justify-between mb-6"
             x-data="{ featured: {{ old('is_featured', ($course->is_featured ?? false) ? 1 : 0) ? 'true' : 'false' }} }">
            <div>
                <p class="text-sm font-semibold text-gray-800">Featured</p>
                <p class="text-xs text-gray-400 mt-0.5" x-text="featured ? 'Shown in featured list' : 'Standard listing'"></p>
            </div>
            <label class="relative inline-flex items-center cursor-pointer">
                <input type="hidden" name="is_featured" value="0">
                <input type="checkbox" name="is_featured" value="1" x-model="featured"
                       {{ old('is_featured', $course->is_featured ?? false) ? 'checked' : '' }}
                       class="sr-only peer">
                <div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-yellow-400"></div>
            </label>
        </div>

        {{-- Submit buttons --}}
        <div class="space-y-3">
            <button type="submit"
                    class="w-full flex items-center justify-center gap-x-2 rounded-xl px-5 py-3 text-sm font-bold text-white shadow-lg hover:shadow-xl transition-all hover:-translate-y-0.5"
                    style="background:#027fc5;">
                <i class="fas fa-save"></i> {{ $submitLabel }}
            </button>
            <a href="{{ route('admin.courses.index') }}"
               class="w-full flex items-center justify-center gap-x-2 rounded-xl px-5 py-3 text-sm font-semibold bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">
                <i class="fas fa-times"></i> Cancel
            </a>
        </div>
    </div>

    {{-- ── Featured Image ────────────────────────────────────── --}}
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
        <h3 class="text-sm font-bold text-gray-900 mb-4">Featured Image</h3>

        {{-- Current image (edit mode) --}}
        @if($course && $course->featured_image && file_exists(public_path('uploads/courses/'.$course->featured_image)))
        <div class="mb-4">
            <p class="text-xs font-semibold text-gray-500 uppercase mb-2">Current Image</p>
            <div class="relative rounded-xl overflow-hidden group">
                <img src="{{ asset('uploads/courses/'.$course->featured_image) }}"
                     alt="{{ $course->title }}"
                     class="w-full h-40 object-cover">
                <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                    <span class="text-white text-xs font-semibold bg-black/50 px-3 py-1 rounded-full">Upload new to replace</span>
                </div>
            </div>
        </div>
        @endif

        {{-- Upload area --}}
        <div x-data="{ preview: null, fileName: '' }">
            <label for="featured_image" class="block cursor-pointer">
                <div class="border-2 border-dashed border-gray-300 rounded-xl p-5 text-center hover:border-primary-400 transition-colors">
                    <template x-if="!preview">
                        <div>
                            <i class="fas fa-cloud-upload-alt text-3xl text-gray-300 mb-2"></i>
                            <p class="text-sm font-medium text-gray-600">Click to upload image</p>
                            <p class="text-xs text-gray-400 mt-1">PNG, JPG, WebP — max 5 MB</p>
                        </div>
                    </template>
                    <template x-if="preview">
                        <div>
                            <img :src="preview" class="w-full h-36 object-cover rounded-lg mb-2">
                            <p class="text-xs text-gray-500 truncate" x-text="fileName"></p>
                        </div>
                    </template>
                </div>
                <input id="featured_image" name="featured_image" type="file" accept="image/*" class="hidden"
                       @change="
                           fileName = $event.target.files[0]?.name || '';
                           if ($event.target.files[0]) {
                               const r = new FileReader();
                               r.onload = e => preview = e.target.result;
                               r.readAsDataURL($event.target.files[0]);
                           }">
            </label>
            @error('featured_image')<p class="mt-1.5 text-sm text-red-600">{{ $message }}</p>@enderror
        </div>
    </div>

    {{-- ── Course Details ────────────────────────────────────── --}}
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 space-y-4">
        <h3 class="text-sm font-bold text-gray-900">Course Details</h3>

        {{-- Duration --}}
        <div>
            <label class="block text-xs font-semibold text-gray-700 mb-1">Duration</label>
            <div class="relative">
                <span class="absolute inset-y-0 left-3 flex items-center text-gray-400 pointer-events-none"><i class="fas fa-clock text-sm"></i></span>
                <input name="duration" type="text"
                       value="{{ old('duration', $course->duration ?? '') }}"
                       placeholder="e.g. 12 Months"
                       class="block w-full rounded-xl border-0 py-2.5 pl-9 pr-4 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-primary-600 text-sm">
            </div>
        </div>

        {{-- Certification --}}
        <div>
            <label class="block text-xs font-semibold text-gray-700 mb-1">Certification</label>
            <div class="relative">
                <span class="absolute inset-y-0 left-3 flex items-center text-gray-400 pointer-events-none"><i class="fas fa-certificate text-sm"></i></span>
                <input name="certification" type="text"
                       value="{{ old('certification', $course->certification ?? '') }}"
                       placeholder="e.g. ISO / CTEVT"
                       class="block w-full rounded-xl border-0 py-2.5 pl-9 pr-4 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-primary-600 text-sm">
            </div>
        </div>

        {{-- Starting Date --}}
        <div>
            <label class="block text-xs font-semibold text-gray-700 mb-1">Starting Date</label>
            <div class="relative">
                <span class="absolute inset-y-0 left-3 flex items-center text-gray-400 pointer-events-none"><i class="fas fa-calendar text-sm"></i></span>
                <input name="starting_date" type="date"
                       value="{{ old('starting_date', isset($course->starting_date) ? $course->starting_date->format('Y-m-d') : '') }}"
                       class="block w-full rounded-xl border-0 py-2.5 pl-9 pr-4 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-primary-600 text-sm">
            </div>
        </div>

        {{-- Mode --}}
        <div>
            <label class="block text-xs font-semibold text-gray-700 mb-1">Mode of Study</label>
            <div class="relative">
                <span class="absolute inset-y-0 left-3 flex items-center text-gray-400 pointer-events-none"><i class="fas fa-map-marker-alt text-sm"></i></span>
                <input name="mode" type="text"
                       value="{{ old('mode', $course->mode ?? '') }}"
                       placeholder="e.g. Campus + Online Hybrid"
                       class="block w-full rounded-xl border-0 py-2.5 pl-9 pr-4 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-primary-600 text-sm">
            </div>
        </div>

        {{-- Max Students --}}
        <div>
            <label class="block text-xs font-semibold text-gray-700 mb-1">Max Students</label>
            <div class="relative">
                <span class="absolute inset-y-0 left-3 flex items-center text-gray-400 pointer-events-none"><i class="fas fa-users text-sm"></i></span>
                <input name="max_students" type="number" min="1" max="9999"
                       value="{{ old('max_students', $course->max_students ?? '') }}"
                       placeholder="e.g. 25"
                       class="block w-full rounded-xl border-0 py-2.5 pl-9 pr-4 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-primary-600 text-sm">
            </div>
        </div>

        {{-- Sort Order --}}
        <div>
            <label class="block text-xs font-semibold text-gray-700 mb-1">Sort Order</label>
            <div class="relative">
                <span class="absolute inset-y-0 left-3 flex items-center text-gray-400 pointer-events-none"><i class="fas fa-sort text-sm"></i></span>
                <input name="sort_order" type="number" min="0"
                       value="{{ old('sort_order', $course->sort_order ?? 0) }}"
                       placeholder="0"
                       class="block w-full rounded-xl border-0 py-2.5 pl-9 pr-4 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-primary-600 text-sm">
            </div>
            <p class="text-xs text-gray-400 mt-1">Lower number = shown first on homepage</p>
        </div>
    </div>

    {{-- ── Appearance ────────────────────────────────────────── --}}
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 space-y-4">
        <h3 class="text-sm font-bold text-gray-900">Card Appearance</h3>

        {{-- Icon class --}}
        <div>
            <label class="block text-xs font-semibold text-gray-700 mb-1">Font Awesome Icon Class</label>
            <input name="icon_class" type="text"
                   value="{{ old('icon_class', $course->icon_class ?? 'fas fa-user-nurse') }}"
                   placeholder="fas fa-user-nurse"
                   class="block w-full rounded-xl border-0 py-2.5 px-4 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-primary-600 text-sm font-mono">
            <p class="text-xs text-gray-400 mt-1">Used on card when no image. E.g. <code class="text-primary-600">fas fa-graduation-cap</code></p>
        </div>

        <input type="hidden" name="color_class" value="bg-[#027fc5]">
        <div class="rounded-xl bg-blue-50 border border-blue-100 p-4 text-sm text-gray-600">
            Course cards use the site brand color <span class="font-semibold text-[#027fc5]">#027fc5</span>.
        </div>
    </div>

</div>{{-- END right column --}}

</div>{{-- END grid --}}

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {

    // ── TinyMCE ──────────────────────────────────────────────────────────
    tinymce.init({
        selector: '#long_description',
        height: 500,
        menubar: true,
        plugins: [
            'advlist','autolink','lists','link','image','charmap','preview',
            'anchor','searchreplace','visualblocks','code','fullscreen',
            'insertdatetime','media','table','help','wordcount'
        ],
        toolbar:
            'undo redo | blocks | bold italic underline | ' +
            'alignleft aligncenter alignright alignjustify | ' +
            'bullist numlist outdent indent | link image media | ' +
            'forecolor backcolor | removeformat | code fullscreen | help',
        content_style: 'body { font-family: Inter, sans-serif; font-size: 16px; line-height: 1.7; }',
        branding: false,
        promotion: false,
    });

    // ── Auto-slug from title ─────────────────────────────────────────────
    const titleInput = document.getElementById('title');
    const slugInput  = document.getElementById('slug');
    const isEdit     = {{ $course ? 'true' : 'false' }};

    if (titleInput && slugInput && !isEdit) {
        titleInput.addEventListener('input', function () {
            if (!slugInput.dataset.manual) {
                slugInput.value = titleInput.value
                    .toLowerCase()
                    .replace(/[^a-z0-9\s-]/g, '')
                    .trim()
                    .replace(/\s+/g, '-');
            }
            updateSeoPreview();
        });
    }
    if (slugInput) {
        slugInput.addEventListener('input', function () {
            slugInput.dataset.manual = '1';
            document.getElementById('seo-preview-url').textContent =
                '{{ url("/courses/") }}/' + slugInput.value;
        });
    }

    // ── SEO live counters + preview ──────────────────────────────────────
    const metaTitleEl = document.getElementById('meta_title');
    const metaDescEl  = document.getElementById('meta_description');

    function updateSeoPreview() {
        const previewTitle = document.getElementById('seo-preview-title');
        if (previewTitle && metaTitleEl) {
            previewTitle.textContent = metaTitleEl.value ||
                (titleInput ? titleInput.value : '') || 'Course Title';
        }
    }

    if (metaTitleEl) {
        const bar = document.getElementById('meta-title-bar');
        const cnt = document.getElementById('meta-title-count');
        const fn = () => {
            const l = metaTitleEl.value.length;
            cnt.textContent = l + ' / 60';
            bar.style.width = Math.min(l / 60 * 100, 100) + '%';
            bar.style.background = l > 60 ? '#ef4444' : '#027fc5';
            updateSeoPreview();
        };
        metaTitleEl.addEventListener('input', fn);
        fn();
    }

    if (metaDescEl) {
        const bar = document.getElementById('meta-desc-bar');
        const cnt = document.getElementById('meta-desc-count');
        const fn = () => {
            const l = metaDescEl.value.length;
            cnt.textContent = l + ' / 160';
            bar.style.width = Math.min(l / 160 * 100, 100) + '%';
            bar.style.background = l > 160 ? '#ef4444' : '#027fc5';
            document.getElementById('seo-preview-desc').textContent =
                metaDescEl.value || 'Meta description will appear here.';
        };
        metaDescEl.addEventListener('input', fn);
        fn();
    }
});
</script>
@endpush