@extends('admin.layouts.master')

@section('title', 'Create New Course')

@push('styles')
    {{-- SweetAlert --}}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    {{-- Remix Icons --}}
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
    {{-- Google Fonts --}}
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    {{-- Quill Editor (Replacement for Summernote) --}}
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

    <style>
        :root {
            --primary: #4f46e5;
            --primary-hover: #4338ca;
            --primary-light: #eef2ff;
            --bg-body: #f8fafc;
            --border: #e2e8f0;
            --text-main: #0f172a;
            --text-muted: #64748b;
            --radius-md: 12px;
            --radius-sm: 8px;
        }

        body {
            background-color: var(--bg-body);
            font-family: 'Inter', sans-serif;
            color: var(--text-main);
        }

        /* --- Header & Layout --- */
        .sticky-header {
            position: sticky;
            top: 60px;
            z-index: 99;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border);
            margin: 0 -1.5rem 2rem -1.5rem;
            padding: 1rem 2rem;
        }

        /* --- Forms --- */
        .form-label {
            font-size: 0.85rem;
            font-weight: 600;
            color: #334155;
            margin-bottom: 0.4rem;
        }

        .form-control,
        .form-select,
        .input-group-text {
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 0.65rem 1rem;
            font-size: 0.925rem;
            background-color: #fff;
            transition: all 0.2s;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px var(--primary-light);
            outline: none;
        }

        .input-group-text {
            background-color: #f8fafc;
            color: var(--text-muted);
            border-right: 0;
        }

        .input-group .form-control {
            border-left: 0;
        }

        /* --- Custom Tabs --- */
        .nav-pillss {
            background: #fff;
            padding: 0.5rem;
            border-radius: var(--radius-md);
            border: 1px solid var(--border);
            display: inline-flex;
            width: 100%;
        }

        .nav-pillss .nav-link {
            border-radius: var(--radius-sm);
            color: var(--text-muted);
            font-weight: 500;
            padding: 0.6rem 1rem;
            margin-right: 0.5rem;
            transition: all 0.2s;
        }

        .nav-pillss .nav-link.active {
            background-color: var(--primary-light);
            color: var(--primary);
            font-weight: 600;
        }

        /* --- File Upload --- */
        .upload-zone {
            position: relative;
            border: 2px dashed var(--border);
            border-radius: var(--radius-md);
            background: #fafafa;
            padding: 2rem;
            text-align: center;
            transition: all 0.2s;
            cursor: pointer;
        }

        .upload-zone:hover {
            border-color: var(--primary);
            background: var(--primary-light);
        }

        .upload-zone input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }

        /* --- Cards --- */
        .card-pro {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }

        .card-header-pro {
            padding: 1.25rem;
            border-bottom: 1px solid var(--border);
            font-weight: 600;
            font-size: 0.95rem;
        }

        .invoice-card {
            background: #f8fafc;
            border: 1px dashed #cbd5e1;
            border-radius: 12px;
        }

        .invoice-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
            color: #64748b;
        }

        .invoice-total {
            border-top: 1px dashed #cbd5e1;
            padding-top: 1rem;
            margin-top: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .invoice-total .amount {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--primary);
        }

        /* --- Validation & Animation --- */
        .shake-field {
            animation: shake 0.4s cubic-bezier(.36, .07, .19, .97) both;
            border-color: #ef4444 !important;
            background-color: #fef2f2;
        }

        @keyframes shake {

            0%,
            100% {
                transform: translateX(0);
            }

            10%,
            30%,
            50%,
            70%,
            90% {
                transform: translateX(-4px);
            }

            20%,
            40%,
            60%,
            80% {
                transform: translateX(4px);
            }
        }

        .is-invalid {
            border-color: #ef4444 !important;
        }

        .error-msg {
            color: #ef4444;
            font-size: 0.75rem;
            margin-top: 4px;
            display: none;
            font-weight: 500;
        }

        /* --- Quill Specific Overrides --- */
        .ql-toolbar.ql-snow {
            border-color: var(--border);
            border-top-left-radius: var(--radius-sm);
            border-top-right-radius: var(--radius-sm);
        }

        .ql-container.ql-snow {
            border-color: var(--border);
            border-bottom-left-radius: var(--radius-sm);
            border-bottom-right-radius: var(--radius-sm);
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
        }

        /* Style for Invalid Quill Editor */
        .ql-invalid .ql-container,
        .ql-invalid .ql-toolbar {
            border-color: #ef4444 !important;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid pb-5">

        <form id="courseForm" enctype="multipart/form-data" novalidate>
            @csrf

            <div class="d-flex align-items-center justify-content-between sticky-header shadow-sm">
                <div>
                    <h1 class="h4 mb-1 text-dark">Create Course</h1>
                    <p class="mb-0 text-muted fs-12">Fill in the details to publish a new course.</p>
                </div>
                <div class="d-flex gap-2">
                    <a href="{{ route('admin.course.courses') }}" class="btn btn-light border fw-medium px-4">Discard</a>
                    <button type="submit" class="btn btn-primary fw-medium px-4 shadow-sm" id="saveBtn">
                        <i class="ri-check-line align-bottom me-1"></i> Publish Course
                    </button>
                </div>
            </div>

            <div class="row g-4">
                <div class="col-xl-9">
                    <div class="mb-4">
                        <ul class="nav nav-pillss nav-fill" role="tablist" id="courseTabs">
                            <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#basic"
                                    id="tab-basic">1. Basic Info</a></li>
                            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#curriculum"
                                    id="tab-curriculum">2. Logistics</a></li>
                            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#financial"
                                    id="tab-financial">3. Pricing</a></li>
                            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#seo" id="tab-seo">4.
                                    SEO</a></li>
                            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#documents"
                                    id="tab-documents">5. Documents</a></li>
                        </ul>
                    </div>

                    <div class="card-pro">
                        <div class="card-body p-4 p-lg-5">
                            <div class="tab-content">

                                {{-- TAB 1: BASIC --}}
                                <div class="tab-pane fade show active" id="basic">
                                    <h5 class="mb-4 text-dark border-bottom pb-2">Core Identity</h5>
                                    <div class="row g-4">
                                        <div class="col-md-8">
                                            <label class="form-label">Course Title <span
                                                    class="text-danger">*</span></label>
                                            <input type="text" name="name" id="name"
                                                class="form-control form-control-lg fw-semibold"
                                                placeholder="e.g. Advanced Marine Engineering">
                                            <div class="error-msg">Title is required</div>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Course Code <span class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <span class="input-group-text"><i class="ri-barcode-line"></i></span>
                                                <input type="text" name="code" id="code"
                                                    class="form-control form-control-lg text-uppercase"
                                                    placeholder="AME-101">
                                            </div>
                                            <div class="error-msg">Code is required</div>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">Category <span class="text-danger">*</span></label>
                                            <select name="course_category_id" id="course_category_id" class="form-select">
                                                <option value="">Select Category...</option>
                                                @foreach ($categories as $cat)
                                                    <option value="{{ $cat->uuid }}">{{ $cat->name }}</option>
                                                @endforeach
                                            </select>
                                            <div class="error-msg">Category is required</div>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">Learning Mode</label>
                                            <select name="learning_mode" class="form-select">
                                                <option value="Physical">Physical (On Campus)</option>
                                                <option value="Online">Online (Remote)</option>
                                                <option value="Hybrid">Hybrid</option>
                                            </select>
                                        </div>

                                        <div class="col-12 mt-4" id="div_description">
                                            <label class="form-label">Description <span class="text-danger">*</span></label>
                                            <div id="description_editor" style="height: 200px;"></div>
                                            <input type="hidden" name="description" id="description">
                                            <div class="error-msg">Description is required</div>
                                        </div>
                                    </div>
                                </div>

                                {{-- TAB 2: LOGISTICS --}}
                                <div class="tab-pane fade" id="curriculum">
                                    <div class="d-flex align-items-center justify-content-between mb-4">
                                        <h5 class="text-dark mb-0">Course Schedule</h5>
                                        <span class="badge bg-light text-primary border">Logistics</span>
                                    </div>
                                    <div class="card bg-light border-0 mb-4">
                                        <div class="card-body p-4">
                                            <div class="row g-4">
                                                <div class="col-md-4">
                                                    <label
                                                        class="form-label text-muted small text-uppercase fw-bold mb-2">Duration
                                                        <span class="text-danger">*</span></label>
                                                    <div class="input-group bg-white rounded shadow-sm">
                                                        <span class="input-group-text"><i
                                                                class="ri-calendar-event-line"></i></span>
                                                        <input type="number" name="duration_days" id="duration_days"
                                                            class="form-control fw-bold text-dark" placeholder="10">
                                                        <span
                                                            class="input-group-text text-dark fw-medium border-start-0 ps-0">Days</span>
                                                    </div>
                                                    <div class="error-msg">Duration is required</div>
                                                </div>
                                                <div class="col-md-4">
                                                    <label
                                                        class="form-label text-muted small text-uppercase fw-bold mb-2">Daily
                                                        Start</label>
                                                    <div class="input-group bg-white rounded shadow-sm">
                                                        <span class="input-group-text"><i class="ri-time-line"></i></span>
                                                        <input type="time" name="start_time"
                                                            class="form-control fw-bold text-dark" value="09:00">
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <label
                                                        class="form-label text-muted small text-uppercase fw-bold mb-2">Daily
                                                        End</label>
                                                    <div class="input-group bg-white rounded shadow-sm">
                                                        <span class="input-group-text"><i class="ri-time-fill"></i></span>
                                                        <input type="time" name="end_time"
                                                            class="form-control fw-bold text-dark" value="17:00">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12" id="div_eligibility">
                                            <label class="form-label fw-bold">Eligibility Requirements <span
                                                    class="text-danger">*</span></label>
                                            <div id="eligibility_editor" style="height: 150px;"></div>
                                            <input type="hidden" name="eligibility" id="eligibility">
                                            <div class="error-msg">Eligibility requirements are required</div>
                                        </div>
                                    </div>
                                </div>

                                {{-- TAB 3: FINANCIAL --}}
                                <div class="tab-pane fade" id="financial">
                                    <div class="d-flex align-items-center justify-content-between mb-4">
                                        <h5 class="text-dark mb-0">Financial Configuration</h5>
                                        <span class="badge bg-light text-success border">Revenue</span>
                                    </div>
                                    <div class="row g-4">
                                        <div class="col-lg-7">
                                            <div class="row g-3">
                                                <div class="col-md-6">
                                                    <label class="form-label">Base Course Fee <span
                                                            class="text-danger">*</span></label>
                                                    <div class="input-group">
                                                        <span class="input-group-text text-muted">₹</span>
                                                        <input type="number" step="0.01" name="base_fee"
                                                            id="base_fee" class="form-control fw-bold"
                                                            placeholder="0.00">
                                                    </div>
                                                    <div class="error-msg">Base fee is required</div>
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="form-label">Exam Fee</label>
                                                    <div class="input-group">
                                                        <span class="input-group-text text-muted">₹</span>
                                                        <input type="number" step="0.01" name="exam_fee"
                                                            id="exam_fee" class="form-control fw-bold"
                                                            placeholder="0.00">
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <label class="form-label">GST / Tax Rate (%)</label>
                                                    <div class="input-group w-50">
                                                        <input type="number" step="0.01" name="tax_percentage"
                                                            id="tax_percentage" class="form-control" value="18">
                                                        <span class="input-group-text">%</span>
                                                    </div>
                                                </div>
                                                <div class="col-12 mt-4">
                                                    <label class="form-label">Cancellation Policy</label>
                                                    <div id="cancellation_editor" style="height: 120px;"></div>
                                                    <input type="hidden" name="cancellation_policy"
                                                        id="cancellation_policy">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-5">
                                            <div class="card invoice-card h-100">
                                                <div class="card-body p-4">
                                                    <h6 class="text-uppercase text-muted fs-11 fw-bold mb-4 ls-1">Student
                                                        Pricing Breakdown</h6>
                                                    <div class="invoice-row"><span>Tuition Fee</span><span
                                                            class="fw-medium text-dark" id="summary_base">₹0.00</span>
                                                    </div>
                                                    <div class="invoice-row"><span>Exam Fee</span><span
                                                            class="fw-medium text-dark" id="summary_exam">₹0.00</span>
                                                    </div>
                                                    <div class="invoice-row mt-3 pt-3 border-top border-light">
                                                        <span>Subtotal (Net)</span><span class="fw-bold text-dark"
                                                            id="summary_subtotal">₹0.00</span>
                                                    </div>
                                                    <div class="invoice-row"><span>Tax (GST)</span><span
                                                            class="text-danger" id="summary_tax">+ ₹0.00</span></div>
                                                    <div class="invoice-total"><span class="label">Final
                                                            Price</span><span class="amount"
                                                            id="total_display">₹0.00</span></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- TAB 4: SEO --}}
                                <div class="tab-pane fade" id="seo">
                                    <h5 class="mb-4 text-dark border-bottom pb-2">Search Optimization</h5>
                                    <div class="row g-3">
                                        <div class="col-12">
                                            <label class="form-label">URL Slug <span class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <span
                                                    class="input-group-text bg-light">{{ config('app.url') }}/courses/</span>
                                                <input type="text" name="slug" id="slug"
                                                    class="form-control fw-medium text-dark">
                                            </div>
                                            <div class="error-msg">Slug is required</div>
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label">Meta Title <span
                                                    class="text-danger">*</span></label>
                                            <input type="text" name="meta_title" id="meta_title"
                                                class="form-control">
                                            <div class="error-msg">Meta Title is required</div>
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label">Meta Description <span
                                                    class="text-danger">*</span></label>
                                            <textarea name="meta_description" id="meta_description" class="form-control" rows="3"></textarea>
                                            <div class="error-msg">Meta Description is required</div>
                                        </div>
                                    </div>
                                </div>

                                {{-- TAB 5: DOCUMENTS --}}
                                <div class="tab-pane fade" id="documents">
                                    <div class="d-flex align-items-center justify-content-between mb-4">
                                        <h5 class="text-dark mb-0">Required Documents</h5>
                                        <button type="button" class="btn btn-sm btn-outline-primary" id="addDocBtn">
                                            <i class="ri-add-line"></i> Add Document
                                        </button>
                                    </div>
                                    <div class="alert alert-light border mb-3 small">
                                        <i class="ri-information-line text-primary me-1"></i>
                                        Specify which documents students must upload during enrollment.
                                    </div>
                                    <div class="table-responsive border rounded-3">
                                        <table class="table table-hover mb-0 align-middle">
                                            <thead class="bg-light">
                                                <tr>
                                                    <th style="width: 50%;">Document Name</th>
                                                    <th style="width: 25%;">Requirement</th>
                                                    <th style="width: 10%; text-align:right;">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody id="docsBody">
                                                {{-- Dynamic Rows --}}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3">
                    <div class="card-pro mb-4">
                        <div class="card-header-pro">
                            <h6 class="mb-0 text-uppercase fs-12 text-muted">Thumbnail</h6>
                        </div>
                        <div class="card-body p-3">
                            <div class="upload-zone mb-3" id="dropArea">
                                <input type="file" name="cover_image" id="cover_image" accept="image/*"
                                    onchange="previewImage(this)">
                                <div id="uploadPlaceholder">
                                    <div class="mb-2"><i class="ri-upload-cloud-2-line fs-1 text-primary"></i></div>
                                    <p class="mb-0 fw-medium text-dark text-sm">Upload Image</p>
                                    <p class="text-muted text-xs mb-0">Max 5MB</p>
                                </div>
                                <img id="imagePreview" src=""
                                    class="img-fluid rounded shadow-sm d-none w-100 object-fit-cover"
                                    style="height: 140px;">
                            </div>
                            <div class="error-msg text-center">Thumbnail is required</div>
                        </div>
                    </div>

                    <div class="card-pro">
                        <div class="card-header-pro">
                            <h6 class="mb-0 text-uppercase fs-12 text-muted">Settings</h6>
                        </div>
                        <div class="card-body p-3">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <label class="fw-semibold text-sm" for="is_active">Publish</label>
                                <div class="form-check form-switch m-0">
                                    <input class="form-check-input" type="checkbox" name="is_active" id="is_active"
                                        checked>
                                </div>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <label class="fw-semibold text-sm" for="requires_certificate">Certificate</label>
                                <div class="form-check form-switch m-0">
                                    <input class="form-check-input" type="checkbox" name="requires_certificate"
                                        id="requires_certificate" checked>
                                </div>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <label class="fw-semibold text-sm" for="is_popular">Featured</label>
                                <div class="form-check form-switch m-0">
                                    <input class="form-check-input" type="checkbox" name="is_popular" id="is_popular">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>

    <script>
        // --- Document Repeater Logic ---
        let docIndex = 0;

        function addDocumentRow() {
            let html = `
                <tr id="doc_row_${docIndex}">
                    <td><input type="text" name="documents[${docIndex}][name]" class="form-control form-control-sm border-0 bg-light" placeholder="e.g. Passport, CDC"></td>
                    <td><div class="form-check form-switch"><input class="form-check-input" type="checkbox" name="documents[${docIndex}][mandatory]" value="1" checked id="req_${docIndex}"><label class="form-check-label small text-muted" for="req_${docIndex}">Mandatory</label></div></td>
                    <td class="text-end"><button type="button" class="btn btn-sm btn-icon text-danger" onclick="removeDocRow(${docIndex})"><i class="ri-delete-bin-line"></i></button></td>
                </tr>`;
            $('#docsBody').append(html);
            docIndex++;
        }

        function removeDocRow(index) {
            $(`#doc_row_${index}`).remove();
        }

        $(document).ready(function() {
            addDocumentRow();
            $('#addDocBtn').click(addDocumentRow);

            // --- 1. Initialize Quill Editors ---
            var toolbarOptions = [
                ['bold', 'italic', 'underline', 'strike'],
                [{
                    'list': 'ordered'
                }, {
                    'list': 'bullet'
                }],
                [{
                    'header': [3, 4, 5, false]
                }],
                ['link', 'clean']
            ];

            function initQuill(selector, inputId) {
                var quill = new Quill(selector, {
                    theme: 'snow',
                    modules: {
                        toolbar: toolbarOptions
                    }
                });
                quill.on('text-change', function() {
                    $(inputId).val(quill.root.innerHTML);
                    // Remove error state on type
                    $(selector).parent().removeClass('ql-invalid shake-field');
                    $(selector).parent().find('.error-msg').hide();
                });
                return quill;
            }

            // Init specific editors
            var quillDesc = initQuill('#description_editor', '#description');
            var quillElig = initQuill('#eligibility_editor', '#eligibility');
            var quillCancel = initQuill('#cancellation_editor', '#cancellation_policy');


            // --- 2. Calculations & Invoice ---
            function calculateTotal() {
                let base = parseFloat($('#base_fee').val()) || 0;
                let exam = parseFloat($('#exam_fee').val()) || 0;
                let taxPercent = parseFloat($('#tax_percentage').val()) || 0;
                let subtotal = base + exam;
                let taxAmount = subtotal * (taxPercent / 100);
                let total = subtotal + taxAmount;

                const fmt = (num) => '₹' + num.toLocaleString('en-IN', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
                $('#summary_base').text(fmt(base));
                $('#summary_exam').text(fmt(exam));
                $('#summary_subtotal').text(fmt(subtotal));
                $('#summary_tax').text('+ ' + fmt(taxAmount));
                $('#total_display').text(fmt(total));
            }
            $('#base_fee, #exam_fee, #tax_percentage').on('input', calculateTotal);

            // --- 3. Auto Slug ---
            $('#name').on('input', function() {
                let val = $(this).val();
                let slug = val.toLowerCase().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(
                    /^-+|-+$/g, '');
                $('#slug').val(slug);
                if (val) $('#meta_title').val(val + ' | Maritime Academy');
            });

            // --- 4. Image Preview ---
            window.previewImage = function(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#imagePreview').attr('src', e.target.result).removeClass('d-none');
                        $('#uploadPlaceholder').addClass('d-none');
                        $('.upload-zone').css('border-color', 'var(--primary)');
                        $('.upload-zone').next('.error-msg').hide();
                    }
                    reader.readAsDataURL(input.files[0]);
                }
            }

            // --- 5. Validation Logic ---
            $('#courseForm').on('submit', function(e) {
                e.preventDefault();

                // Clear previous errors
                $('.is-invalid').removeClass('is-invalid shake-field');
                $('.ql-invalid').removeClass('ql-invalid shake-field');
                $('.error-msg').hide();
                $('.upload-zone').css('border-color', '#e2e8f0');

                let isValid = true;
                let firstError = null;

                // Define fields to validate
                const required = [{
                        id: '#name',
                        tab: 'basic',
                        type: 'input'
                    },
                    {
                        id: '#code',
                        tab: 'basic',
                        type: 'input'
                    },
                    {
                        id: '#course_category_id',
                        tab: 'basic',
                        type: 'input'
                    },
                    {
                        id: '#description',
                        tab: 'basic',
                        type: 'quill',
                        container: '#div_description'
                    },

                    {
                        id: '#duration_days',
                        tab: 'curriculum',
                        type: 'input'
                    },
                    {
                        id: '#eligibility',
                        tab: 'curriculum',
                        type: 'quill',
                        container: '#div_eligibility'
                    },

                    {
                        id: '#base_fee',
                        tab: 'financial',
                        type: 'input'
                    },

                    {
                        id: '#slug',
                        tab: 'seo',
                        type: 'input'
                    },
                    {
                        id: '#meta_title',
                        tab: 'seo',
                        type: 'input'
                    },
                    {
                        id: '#meta_description',
                        tab: 'seo',
                        type: 'input'
                    }
                ];

                // Loop check
                required.forEach(field => {
                    let el = $(field.id);
                    let val = el.val();
                    let isEmpty = false;

                    // Specific check for Quill (removes HTML tags to check if empty)
                    if (field.type === 'quill') {
                        let textOnly = val.replace(/<[^>]*>/g, '').trim();
                        if (textOnly.length === 0) isEmpty = true;
                    } else {
                        if (!val || val.trim() === '') isEmpty = true;
                    }

                    if (isEmpty) {
                        isValid = false;

                        // Visual Error Application
                        if (field.type === 'quill') {
                            $(field.container).addClass('ql-invalid shake-field');
                            $(field.container).find('.error-msg').show();
                        } else {
                            el.addClass('is-invalid shake-field');
                            el.closest('div').find('.error-msg').show();
                        }

                        // Capture first error to switch tab later
                        if (!firstError) {
                            firstError = {
                                el: $(field.container || field.id),
                                tab: field.tab
                            };
                        }
                    }
                });

                // Image Validation
                if (!$('#cover_image').val()) {
                    $('.upload-zone').css('border-color', '#ef4444').addClass('shake-field');
                    $('.upload-zone').next('.error-msg').show();
                    isValid = false;
                    // Usually images are visible on sidebar, so we might not need tab switch,
                    // but if sidebar was responsive/hidden, we would handle it here.
                }

                // --- SWITCH TAB & SCROLL TO ERROR ---
                if (!isValid) {
                    if (firstError) {
                        // 1. Activate the Tab containing the error
                        let triggerEl = document.querySelector(`a[href="#${firstError.tab}"]`);
                        let tabInstance = new bootstrap.Tab(triggerEl);
                        tabInstance.show();

                        // 2. Wait for tab animation, then scroll/focus
                        setTimeout(() => {
                            firstError.el[0].scrollIntoView({
                                behavior: 'smooth',
                                block: 'center'
                            });
                            if (!firstError.el.is('div')) firstError.el.focus();
                        }, 200);
                    }

                    // Remove animation class after effect
                    setTimeout(() => {
                        $('.shake-field').removeClass('shake-field');
                    }, 500);
                    return;
                }

                // --- AJAX Submit ---
                let btn = $('#saveBtn');
                let originalText = btn.html();
                btn.html('<span class="spinner-border spinner-border-sm me-2"></span> Publishing...').prop(
                    'disabled', true);

                let formData = new FormData(this);

                $.ajax({
                    url: "{{ route('admin.course.store') }}",
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(res) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Published!',
                            text: 'Course created successfully.',
                            confirmButtonColor: '#4f46e5',
                            timer: 2000
                        }).then(() => {
                            window.location.href =
                                "{{ route('admin.course.courses') }}";
                        });
                    },
                    error: function(err) {
                        btn.html(originalText).prop('disabled', false);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Something went wrong.'
                        });
                    }
                });
            });

            // Input cleanup on type
            $('input, select, textarea').on('input change', function() {
                $(this).removeClass('is-invalid shake-field');
                $(this).closest('div').find('.error-msg').hide();
            });
        });
    </script>
@endpush