@extends('layouts.admin')

@section('content')
    <div class="container-fluid">
        @include('elements.admin-breadcrumb')
        <style>
            /* Remove the spinner from number input */
            input[type="number"]::-webkit-outer-spin-button,
            input[type="number"]::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }

            input[type="number"] {
                -moz-appearance: textfield;
                /* Firefox */
            }

            .select2-container .select2-search--inline .select2-search__field {
                width: auto !important;
            }
            #schedule_required-error {
                margin-bottom: 10px;
            }
        </style>
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        @include('elements.alert-error')
                        <form
                            action="{{ isset($workshop) ? route('admin.workshop.update', $workshop->id) : route('admin.workshop.store') }}"
                            id="workshop_form" method="POST" class="form-horizontal" enctype="multipart/form-data"
                            novalidate="novalidate">
                            @csrf
                            @if (isset($workshop))
                                @method('PUT')
                            @endif

                            <ul class="nav nav-tabs mb-3" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <a href="#master" data-bs-toggle="tab" aria-expanded="false" class="nav-link active"
                                        aria-selected="true" role="tab">General</a>
                                </li>
                                @foreach (config('translatable.locales') as $locale => $language)
                                    <li class="nav-item" data-target-form="#profileForm">
                                        <a href="#{{ $locale }}" data-bs-toggle="tab" aria-expanded="true"
                                            class="nav-link" aria-selected="false" role="tab" tabindex="-1">
                                            {{ ucfirst($language) }}
                                        </a>
                                    </li>
                                @endforeach

                            </ul>
                            <div class="tab-content mb-0 b-0">

                                <div class="tab-pane active show" id="master">
                                    <div class="row mb-3">
                                        <div class="col-md-4">
                                            <label class="form-label" for="workshop_banner">Workshop Banner <span
                                                    class="text-danger">*</span> </label>
                                            <input type="file"
                                                value="{{ old('workshop_banner', $workshop ? $workshop->workshop_banner : '') }}"
                                                class="form-control" id="workshop_banner" name="workshop_banner"
                                                accept="image/*" required>
                                            @if (isset($workshop) && $workshop->workshop_banner)
                                                <div class="mt-3">
                                                    <img src="{{ asset('storage/' . $workshop->workshop_banner) }}"alt="Workshop Banner"
                                                        style="max-width: 100px; height: auto;">
                                                    <input type="hidden"
                                                        name="existing_workshop_banner"value="{{ $workshop->workshop_banner }}">
                                                </div>
                                            @endif
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label" for="thumbnail_image">Thumbnail Image <span
                                                    class="text-danger">*</span> </label>
                                            <input type="file"
                                                value="{{ old('thumbnail_image', $workshop ? $workshop->thumbnail_image : '') }}"
                                                class="form-control" id="thumbnail_image" name="thumbnail_image"
                                                accept="image/*" required>
                                            @if (isset($workshop) && $workshop->thumbnail_image)
                                                <div class="mt-3">
                                                    <img src="{{ asset('storage/' . $workshop->thumbnail_image) }}"alt="Thumbnail Image"
                                                        style="max-width: 100px; height: 100px;">
                                                    <input type="hidden"
                                                        name="existing_thumbnail_image"value="{{ $workshop->thumbnail_image }}">
                                                </div>
                                            @endif
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label" for="instructor_photo">Instructor Photo</label>
                                            <input type="file"
                                                value="{{ old('instructor_photo', $workshop ? $workshop->instructor_photo : '') }}"
                                                class="form-control" id="instructor_photo" name="instructor_photo"
                                                accept="image/*">
                                            @if (isset($workshop) && $workshop->instructor_photo)
                                                <div class="mt-3">
                                                    <img src="{{ asset('storage/' . $workshop->instructor_photo) }}"alt="Instructor Photo"
                                                        style="max-width: 100px; height: 100px;">
                                                    <input type="hidden"
                                                        name="existing_instructor_photo"value="{{ $workshop->instructor_photo }}">
                                                </div>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="form-label" for="date">Date <span
                                                        class="text-danger">*</span></label>
                                                <input type="date" class="form-control" id="date" name="date"
                                                    value="{{ old('date', $workshop ? $workshop->date : '') }}">
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label" for="start_time">Start Time <span
                                                    class="text-danger">*</span></label>
                                            <input type="time" class="form-control" id="start_time" name="start_time"
                                                placeholder="Start Time"
                                                value="{{ old('start_time', $workshop ? $workshop->start_time : '') }}">
                                            <span class="invalid-feedback"></span>
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label" for="end_time">End Time <span
                                                    class="text-danger">*</span></label>
                                            <input type="time" class="form-control" id="end_time" name="end_time"
                                                placeholder="End Time"
                                                value="{{ old('end_time', $workshop ? $workshop->end_time : '') }}">
                                            <span class="invalid-feedback"></span>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="form-label" for="date">Price <span
                                                        class="text-danger">*</span></label>
                                                <input type="number" class="form-control" id="price" name="price"
                                                    value="{{ old('price', $workshop ? $workshop->price : '') }}">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="form-label" for="discount_price">Discount Price <span
                                                        class="text-danger">*</span></label>
                                                <input type="number" class="form-control" id="discount_price"
                                                    name="discount_price"
                                                    value="{{ old('discount_price', $workshop ? $workshop->discount_price : '') }}">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="form-label" for="total_seats">Total Seats <span
                                                        class="text-danger">*</span></label>
                                                <input type="number" class="form-control" id="total_seats"
                                                    name="total_seats"
                                                    value="{{ old('total_seats', $workshop ? $workshop->total_seats : '') }}">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-md-4">
                                            <label class="form-label" for="tags">Tags <span
                                                    class="text-danger">*</span></label>
                                            <select class="form-control select2-multiple" name="tags[]"
                                                multiple="multiple">
                                                <option disabled>Select Tags</option>

                                                @php
                                                    $allTags = ['Limited Offer'];
                                                    $selectedTags = old(
                                                        'tags',
                                                        isset($workshop) && $workshop->tags
                                                            ? json_decode($workshop->tags, true)
                                                            : [],
                                                    );
                                                @endphp

                                                @foreach ($allTags as $tag)
                                                    <option value="{{ $tag }}"
                                                        {{ in_array($tag, $selectedTags) ? 'selected' : '' }}>
                                                        {{ $tag }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        {{-- <div class="col-md-3">
                                            <label class="form-label" for="course_type">Select Video <span
                                                    class="text-danger">*</span></label>
                                            <select class="form-control select2" data-toggle="select2"
                                                id="intro_video_id" name="intro_video_id">
                                                <option value="">Select Video</option>
                                                @foreach ($videos as $video)
                                                    <option value="{{ $video->id }}"
                                                        {{ old('intro_video_id', $workshop ? $workshop->intro_video_id : '') == $video->id ? 'selected' : '' }}>
                                                        {{ $video->title }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div> --}}

                                        {{-- <div class="col-md-6">
                                            <label class="form-label" for="video_ids">
                                                Select Videos <span class="text-danger">*</span>
                                            </label>
                                            <select class="form-control select2" id="video_ids" name="video_ids[]" multiple data-toggle="select2">
                                                @foreach ($videos as $video)
                                                    <option value="{{ $video->id }}"
                                                        @if(isset($workshop) && $workshop->videos->contains($video->id)) selected @endif>
                                                        {{ $video->title }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div> --}}

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="form-label" for="no_of_questions">No Of Questions <span
                                                        class="text-danger">*</span></label>
                                                <input type="number" class="form-control" id="no_of_questions"
                                                    name="no_of_questions"
                                                    value="{{ old('no_of_questions', $workshop ? $workshop->no_of_questions : '') }}">
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="form-label" for="exam_times">Exam Times (Min.) <span
                                                        class="text-danger">*</span></label>
                                                <input type="number" class="form-control" id="exam_times"
                                                    name="exam_times"
                                                    value="{{ old('exam_times', $workshop ? $workshop->exam_times : '') }}">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mb-2">
                                        <div class="col-12">
                                            <label class="form-label">Workshop Videos</label>
                                        </div>

                                        <input type="hidden" name="video_required" id="video_required">

                                        <div class="col-12" id="video-wrapper">
                                            @if(isset($workshop) && $workshop->videos->count() > 0)
                                                @foreach($workshop->videos as $workshopVideo)
                                                    <div class="row video-group mb-2" data-video-id="{{ $workshopVideo->id }}">
                                                        <input type="hidden" name="video_ids[]" value="{{ $workshopVideo->id }}">

                                                        <div class="col-md-6 mb-2">
                                                            <select class="form-control select2" name="video_id[{{ $workshopVideo->id }}]">
                                                                <option value="">Select Video</option>
                                                                @foreach($videos as $video)
                                                                    <option value="{{ $video->id }}"
                                                                        {{ $workshopVideo->id == $video->id ? 'selected' : '' }}>
                                                                        {{ $video->title }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>

                                                        <div class="col-md-4 mb-2">
                                                            <input type="number"
                                                                name="sequence_number[{{ $workshopVideo->id }}]"
                                                                class="form-control"
                                                                placeholder="Sequence Number"
                                                                value="{{ $workshopVideo->pivot->sequence_number }}">
                                                        </div>

                                                        <div class="col-md-2 mb-2">
                                                            <button type="button" class="btn btn-danger remove-video">X</button>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @else
                                                <div class="row video-group mb-2" data-video-id="new_0">
                                                    <input type="hidden" name="video_ids[]" value="new_0">

                                                    <div class="col-md-6 mb-2">
                                                        <select class="form-control select2" name="video_id[new_0]">
                                                            <option value="">Select Video</option>
                                                            @foreach($videos as $video)
                                                                <option value="{{ $video->id }}">{{ $video->title }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>

                                                    <div class="col-md-4 mb-2">
                                                        <input type="number" name="sequence_number[new_0]" class="form-control" placeholder="Sequence Number">
                                                    </div>

                                                    <div class="col-md-2 mb-2">
                                                        <button type="button" class="btn btn-danger remove-video">X</button>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>

                                        <div class="col-12">
                                            <button type="button" class="btn btn-outline-primary" id="add-video">+ Add More Video</button>
                                        </div>
                                    </div>

                                    <div class="row mb-2">
                                        <div class="col-12">
                                            <label class="form-label">Workshop PDFs</label>
                                        </div>

                                        <input type="hidden" name="pdf_required" id="pdf_required">

                                        <div class="col-12" id="pdf-wrapper">

                                            @if(isset($workshop) && $workshop->pdfs->count() > 0)
                                                @foreach($workshop->pdfs as $workshopPdf)
                                                    <div class="row pdf-group mb-2" data-pdf-id="{{ $workshopPdf->id }}">
                                                        <input type="hidden" name="pdf_ids[]" value="{{ $workshopPdf->id }}">

                                                        <div class="col-md-6 mb-2">
                                                            <input type="file" name="pdf_file[{{ $workshopPdf->id }}]" class="form-control pdf-input" value="{{ $workshopPdf->pdf_file }}" accept="application/pdf">
                                                            <small class="text-muted">Existing: {{ $workshopPdf->pdf_file }}</small>
                                                        </div>

                                                        <div class="col-md-4 mb-2">
                                                            <input type="number" name="pdf_sequence_number[{{ $workshopPdf->id }}]" class="form-control" value="{{ $workshopPdf->pdf_sequence_number }}" placeholder="PDF Sequence Number">
                                                        </div>

                                                        <div class="col-md-2 mb-2">
                                                            <button type="button" class="btn btn-danger remove-pdf">X</button>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @else
                                                <div class="row pdf-group mb-2" data-pdf-id="new_0">
                                                    <input type="hidden" name="pdf_ids[]" value="new_0">

                                                    <div class="col-md-6 mb-2">
                                                        <input type="file" name="pdf_file[new_0]" class="form-control pdf-input" accept="application/pdf">
                                                    </div>

                                                    <div class="col-md-4 mb-2">
                                                        <input type="number" name="pdf_sequence_number[new_0]" class="form-control" placeholder="PDF Sequence Number">
                                                    </div>

                                                    <div class="col-md-2 mb-2">
                                                        <button type="button" class="btn btn-danger remove-pdf">X</button>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>

                                        <div class="col-12">
                                            <button type="button" class="btn btn-outline-primary" id="add-pdf">
                                                + Add More PDF
                                            </button>
                                        </div>
                                    </div>


                                    <div class="row mb-3">
                                        <div class="col-md-8">
                                            <label class="form-label">What You Will Learn <span class="text-danger">*</span></label>
                                            <input type="hidden" name="what_you_learn_required" id="what_you_learn_required">
                                            <div id="whatYouLearnWrapper">
                                                @if (old('what_you_learn'))
                                                    @if (is_array(old('what_you_learn')))
                                                        @foreach (old('what_you_learn') as $learn)
                                                            <div class="input-group mt-1">
                                                                <input type="text" name="what_you_learn[]" class="form-control" value="{{ $learn }}" required>
                                                                <button type="button" class="btn btn-danger remove-field">Remove</button>
                                                            </div>
                                                        @endforeach
                                                    @else
                                                        @foreach (json_decode(old('what_you_learn'), true) as $learn)
                                                            <div class="input-group mt-1">
                                                                <input type="text" name="what_you_learn[]" class="form-control" value="{{ $learn }}" required>
                                                                <button type="button" class="btn btn-danger remove-field">Remove</button>
                                                            </div>
                                                        @endforeach
                                                    @endif
                                                @elseif($workshop && $workshop->what_you_learn)
                                                    @foreach (json_decode($workshop->what_you_learn, true) as $learn)
                                                        <div class="input-group mt-1">
                                                            <input type="text" name="what_you_learn[]" class="form-control" value="{{ $learn }}" required>
                                                            <button type="button" class="btn btn-danger remove-field">Remove</button>
                                                        </div>
                                                    @endforeach
                                                @else
                                                    <div class="input-group">
                                                        <input type="text" name="what_you_learn[]" class="form-control" placeholder="Enter What You Will Learn" required>
                                                        <button type="button" class="btn btn-danger remove-field">Remove</button>
                                                    </div>
                                                @endif
                                            </div>
                                            <button type="button" class="btn btn-outline-primary mt-2" id="addMore">+ Add More</button>
                                        </div>
                                    </div>

                                    <div class="row mb-2">
                                        <div class="col-12">
                                            <label class="form-label">Workshop Schedule <span class="text-danger">*</span></label>
                                        </div>

                                        <input type="hidden" name="schedule_required" id="schedule_required">

                                        <div class="col-12" id="schedule-wrapper">
                                            @if (isset($workshop) && $workshop->workshopSchedules->count() > 0)
                                                @foreach ($workshop->workshopSchedules as $workshopSchedule)
                                                    <div class="row schedule-group mb-2" data-schedule-id="{{ $workshopSchedule->id }}">
                                                        <input type="hidden" name="schedule_ids[]" value="{{ $workshopSchedule->id }}">
                                                        <div class="col-md-2 mb-2">
                                                            <input type="time" name="schedule_start_time[{{ $workshopSchedule->id }}]" class="form-control" placeholder="Start Time" value="{{ $workshopSchedule->start_time }}" required>
                                                        </div>
                                                        <div class="col-md-2 mb-2">
                                                            <input type="time" name="schedule_end_time[{{ $workshopSchedule->id }}]" class="form-control" placeholder="End Time" value="{{ $workshopSchedule->end_time }}" required>
                                                        </div>
                                                        <div class="col-md-3 mb-2">
                                                            <input type="text" name="schedule_title[{{ $workshopSchedule->id }}]" class="form-control" placeholder="Title" value="{{ $workshopSchedule->title }}" required>
                                                        </div>
                                                        <div class="col-md-4 mb-2">
                                                            <textarea name="schedule_description[{{ $workshopSchedule->id }}]" class="form-control" id="" placeholder="Description" required>{{ $workshopSchedule->description }}</textarea>
                                                        </div>
                                                        <div class="col-md-1 mb-2">
                                                            <button type="button" class="btn btn-danger remove-schedule">X</button>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @else
                                                <div class="row schedule-group mb-2" data-schedule-id="new_0">
                                                    <input type="hidden" name="schedule_ids[]" value="new_0">
                                                    <div class="col-md-2 mb-2">
                                                        <input type="time" name="schedule_start_time[new_0]" class="form-control" placeholder="Start Time" required>
                                                    </div>
                                                    <div class="col-md-2 mb-2">
                                                        <input type="time" name="schedule_end_time[new_0]" class="form-control" placeholder="End Time" required>
                                                    </div>
                                                    <div class="col-md-3 mb-2">
                                                        <input type="text" name="schedule_title[new_0]" class="form-control" placeholder="Title" required>
                                                    </div>
                                                    <div class="col-md-4 mb-2">
                                                        <textarea name="schedule_description[new_0]" class="form-control" id="" placeholder="Description" required></textarea>
                                                    </div>
                                                    <div class="col-md-1 mb-2">
                                                        <button type="button" class="btn btn-danger remove-schedule">X</button>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                        <div class="col-12">
                                            <button type="button" class="btn btn-outline-primary" id="add-schedule">+ Add More</button>
                                        </div>
                                    </div>
                                </div>

                                @foreach (config('translatable.locales') as $locale => $language)
                                    <div class="tab-pane fade" id="{{ $locale }}">
                                        <div class="row mb-3">
                                            <div class="col-md-12">
                                                <label class="form-label" for="title_{{ $language }}">Title: <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control"
                                                    id="title_{{ $language }}" name="title[{{ $language }}]"
                                                    placeholder="Title"
                                                    value="{{ old('title.' . $language, !empty($workshop) ? $workshop->getTranslation('title', $language) : '') }}"
                                                    required>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-12">
                                                <label class="form-label" for="overview_{{ $language }}">Overview:
                                                    <span class="text-danger">*</span></label>
                                                <textarea class="form-control" id="overview_{{ $language }}" placeholder="Overview" cols="30"
                                                    rows="10" name="overview[{{ $language }}]" required>{{ old('overview.' . $language, $workshop ? $workshop->getTranslation('overview', $language) : '') }}</textarea>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-12">
                                                <label class="form-label" for="intro_{{ $language }}">Intro: <span
                                                        class="text-danger">*</span></label>
                                                <textarea class="form-control" id="intro_{{ $language }}" name="intro[{{ $language }}]" cols="30"
                                                    rows="10" placeholder="Intro" required>{{ old('intro.' . $language, $workshop ? $workshop->getTranslation('intro', $language) : '') }}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach

                                <div class="mb-3 text-end">
                                    <button class="btn btn-primary mx-2" type="submit" name="submit"
                                        value="add">{{ isset($workshop) ? 'Update' : 'Save' }}</button>
                                    <a href="{{ route('admin.workshop.index') }}"
                                        class="btn btn-outline-danger">Cancel</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('assets/vendor/validation/jquery-validation.js') }}"></script>

    <script>
        $(document).ready(function() {
            $('.select2-multiple').select2({
                placeholder: "Select Options",
                width: '100%'
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const hasExistingThumbnail = $('input[name="existing_thumbnail_image"]').val();
            const hasExistingBanner = $('input[name="existing_workshop_banner"]').val();

            $.validator.addMethod("requireSchedule", function(value, element, param) {
                // check if at least one schedule-group exists
                return $('#schedule-wrapper .schedule-group').length > 0;
            }, "At least one schedule is required.");

            // $.validator.addMethod("requireVideo", function(value, element, param) {
            //     // check if at least one schedule-group exists
            //     return $('#video-wrapper .video-group').length > 0;
            // }, "At least one video is required.");

            $.validator.addMethod("requireWhatYouLearn", function(value, element, param) {
                // check if at least one schedule-group exists
                return $('#whatYouLearnWrapper .input-group').length > 0;
            }, "At least one what you learn is required.");

            const validator = $("#workshop_form").validate({
                ignore: [],

                rules: {
                    "title[en]": {
                        required: true
                    },
                    description: {
                        required: true
                    },
                    thumbnail_image: {
                        required: function() {
                            return !hasExistingThumbnail;
                        }
                    },
                    workshop_banner: {
                        required: function() {
                            return !hasExistingBanner;
                        }
                    },
                    price: {
                        required: true,
                        number: true
                    },
                    discount_price: {
                        required: true,
                        number: true
                    },
                    date: {
                        required: true
                    },
                    start_time: {
                        required: true
                    },
                    end_time: {
                        required: true
                    },
                    exam_times: {
                        required: true
                    },
                    "overview[en]": {
                        required: true
                    },
                    "intro[en]": {
                        required: true
                    },
                    "tags[]": {
                        required: true
                    },
                    total_seats: {
                        required: true
                    },
                    no_of_questions: {
                        required: true
                    },
                    // "video_ids[]": {
                    //     required: true
                    // },
                    schedule_required: {
                        requireSchedule: true
                    },
                    // video_required: {
                    //     requireVideo: true
                    // },
                    what_you_learn_required: {
                        requireWhatYouLearn: true
                    },
                    // dynamic handled below
                },
                messages: {
                    "title[en]": {
                        required: "Title is required"
                    },
                    thumbnail_image: {
                        required: "Thumbnail Image is required"
                    },
                    workshop_banner: {
                        required: "Workshop Banner is required"
                    },
                    description: {
                        required: "Description is required"
                    },
                    discount_price: {
                        required: "Discounted price is required",
                        number: "Please enter a valid number"
                    },
                    price: {
                        required: "Price is required",
                        number: "Please enter a valid number"
                    },
                    date: {
                        required: "Date is required"
                    },
                    start_time: {
                        required: "Start time is required"
                    },
                    end_time: {
                        required: "End time is required"
                    },
                    exam_times: {
                        required: "Exam time is required"
                    },
                    "overview[en]": {
                        required: "Overview is required"
                    },
                    "intro[en]": {
                        required: "Intro is required"
                    },
                    "tags[]": {
                        required: "Tags is required"
                    },
                    total_seats: {
                        required: "Total Seats is required"
                    },
                    no_of_questions: {
                        required: "No of questions is required"
                    },
                    // "video_ids[]": {
                    //     required: "Intro Video is required"
                    // },
                    schedule_required: {
                        requireSchedule: "Please add at least one schedule."
                    },
                    // video_required: {
                    //     requireVideo: "Please add at least one video."
                    // },
                    what_you_learn_required: {
                        requireWhatYouLearn: "Please add at least one what you learn."
                    }
                },
                invalidHandler: function(event, validator) {
                    if (validator.errorList.length) {
                        var firstError = validator.errorList[0].element;
                        var tabPane = $(firstError).closest('.tab-pane');
                        if (tabPane.length) {
                            var tabId = tabPane.attr('id');
                            $('a[href="#' + tabId + '"]').tab('show');
                        }
                    }
                },
                errorClass: "invalid-feedback",
                errorElement: 'span',
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "tags[]") {
                        error.insertAfter(element.next('.select2-container'));
                    } else if (element.attr("name") == "video_ids[]") {
                        error.insertAfter(element.next('.select2-container'));
                    } else if (element.closest('.input-group').length) {
                        error.insertAfter(element.closest('.input-group'));
                    } else {
                        error.insertAfter(element);
                    }
                    error.addClass('text-danger');
                },
                highlight: function(element) {
                    $(element).addClass('is-invalid').removeClass('is-valid');
                },
                unhighlight: function(element) {
                    $(element).removeClass('is-invalid').addClass('is-valid');
                },
                submitHandler: function(form) {
                    $('#error_messages').hide();
                    form.submit();
                }
            });

            // -------------------------
            // LEARNING POINT
            // -------------------------
            function renumberLearnNames() {
                $('#whatYouLearnWrapper .input-group input[type="text"]').each(function(i) {
                    const oldName = $(this).attr('name');
                    const newName = `what_you_learn[${i}]`;

                    // Update input name
                    $(this).attr('name', newName);

                    // Update error label/span id & for if it exists
                    const oldErrorId = oldName ? oldName.replace(/\[/g, "\\[").replace(/\]/g, "\\]") + "-error" : null;
                    const $error = $("#" + oldErrorId);

                    if ($error.length) {
                        $error.attr("id", newName + "-error");
                        $error.attr("for", newName);
                    }

                    // Re-attach validation rules
                    $(this).rules('add', {
                        required: true,
                        messages: {
                            required: "What you will learn is required",
                        }
                    });
                });
            }

            renumberLearnNames();

            $('#addMore').on('click', function() {
                const $group = $(`
                    <div class="input-group mt-1">
                        <input type="text" class="form-control" placeholder="Enter What You Will Learn">
                        <button type="button" class="btn btn-danger remove-field">Remove</button>
                    </div>
                `);

                $('#whatYouLearnWrapper').append($group);
                renumberLearnNames(); // re-attach rules for all
                $("#what_you_learn_required").valid();
            });

            $('#whatYouLearnWrapper').on('click', '.remove-field', function() {
                const $input = $(this).closest('.input-group').find('input');
                const inputName = $input.attr("name");

                if ($input.length) {
                    // Remove rules for this input
                    $input.rules('remove');

                    // Remove its error label/span
                    $("#" + inputName.replace(/\[/g, "\\[").replace(/\]/g, "\\]") + "-error").remove();
                }

                // Remove the field
                $(this).closest('.input-group').remove();

                // If no input left, add one blank field
                // if ($('#whatYouLearnWrapper .input-group').length === 0) {
                //     $('#whatYouLearnWrapper').append(`
                //         <div class="input-group">
                //             <input type="text" name="what_you_learn[0]" class="form-control" placeholder="Enter What You Will Learn" required>
                //             <button type="button" class="btn btn-danger remove-field">Remove</button>
                //         </div>
                //     `);
                // }
                $("#what_you_learn_required").valid();

                // Reindex remaining inputs & error IDs
                renumberLearnNames();
            });

            // -------------------------
            // WORKSHOP SCHEDULE
            // -------------------------


            let scheduleCounter = $('#schedule-wrapper .schedule-group').length; // start from existing count

            function addScheduleValidation($group) {
                const start = $group.find('input[type="time"]').eq(0);
                const end   = $group.find('input[type="time"]').eq(1);
                const title = $group.find('input[type="text"]');
                const desc  = $group.find('textarea');

                start.rules('add', {
                    required: true,
                    messages: { required: "Start time is required" }
                });

                end.rules('add', {
                    required: true,
                    messages: { required: "End time is required" }
                });

                title.rules('add', {
                    required: true,
                    messages: { required: "Title is required" }
                });

                desc.rules('add', {
                    required: true,
                    messages: { required: "Description is required" }
                });
            }

            // Apply validation on existing schedules at page load
            $('#schedule-wrapper .schedule-group').each(function() {
                addScheduleValidation($(this));
            });

            // Handle add new schedule
            $('#add-schedule').on('click', function() {
                scheduleCounter++; // always increment, never reset
                let newId = 'new_' + scheduleCounter;

                const $group = $(`
                    <div class="row schedule-group mb-2" data-schedule-id="${newId}">
                        <input type="hidden" name="schedule_ids[]" value="${newId}">
                        <div class="col-md-2 mb-2">
                            <input type="time" name="schedule_start_time[${newId}]" class="form-control">
                        </div>
                        <div class="col-md-2 mb-2">
                            <input type="time" name="schedule_end_time[${newId}]" class="form-control">
                        </div>
                        <div class="col-md-3 mb-2">
                            <input type="text" name="schedule_title[${newId}]" class="form-control" placeholder="Title">
                        </div>
                        <div class="col-md-4 mb-2">
                            <textarea name="schedule_description[${newId}]" class="form-control" placeholder="Description"></textarea>
                        </div>
                        <div class="col-md-1 mb-2">
                            <button type="button" class="btn btn-danger remove-schedule">X</button>
                        </div>
                    </div>
                `);

                $('#schedule-wrapper').append($group);

                // Apply validation rules to newly added fields
                addScheduleValidation($group);
                $("#schedule_required").valid();
            });

            // Handle remove schedule
            $('#schedule-wrapper').on('click', '.remove-schedule', function() {
                $(this).closest('.schedule-group').remove();
                $("#schedule_required").valid();
                // if ($('#schedule-wrapper .schedule-group').length === 0) {
                //     // Auto add a fresh empty schedule
                //     $('#add-schedule').trigger('click');
                // }
            });


            let videoCounter = $('#video-wrapper .video-group').length;

            // function addVideoValidation($group) {
            //     const select = $group.find('select');
            //     const seq = $group.find('input[type="number"]');

            //     select.rules('add', {
            //         required: true,
            //         messages: { required: "Please select a video" }
            //     });

            //     seq.rules('add', {
            //         required: true,
            //         number: true,
            //         messages: { required: "Sequence number is required" }
            //     });
            // }

            function addVideoValidation($group) {
                const select = $group.find('select');
                const seq = $group.find('input[type="number"]');

                // Remove any old validation rules first
                select.rules('remove');
                seq.rules('remove');

                // Add listener to video select
                select.on('change', function () {
                    const hasVideo = $(this).val().trim() !== '';

                    // Update sequence field validation based on video selection
                    seq.rules('remove');
                    if (hasVideo) {
                        seq.rules('add', {
                            required: true,
                            number: true,
                            messages: {
                                required: "Please enter sequence number when video is selected"
                            }
                        });
                    }
                });

                // Add listener to sequence input
                seq.on('input change', function () {
                    const hasSeq = $(this).val().trim() !== '';

                    // Update video dropdown validation based on sequence
                    select.rules('remove');
                    if (hasSeq) {
                        select.rules('add', {
                            required: true,
                            messages: {
                                required: "Please select a video when entering a sequence number"
                            }
                        });
                    }
                });

                // Initialize both once on page load (useful in edit mode)
                select.trigger('change');
                seq.trigger('change');
            }

            // Apply validation on existing ones
            $('#video-wrapper .video-group').each(function() {
                addVideoValidation($(this));
            });

            // Add new video row
            $('#add-video').on('click', function () {
                videoCounter++;
                const newId = 'new_' + videoCounter;

                const $group = $(`
                    <div class="row video-group mb-2" data-video-id="${newId}">
                        <input type="hidden" name="video_ids[]" value="${newId}">
                        <div class="col-md-6 mb-2">
                            <select class="form-control select2" name="video_id[${newId}]">
                                <option value="">Select Video</option>
                                @foreach($videos as $video)
                                    <option value="{{ $video->id }}">{{ $video->title }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4 mb-2">
                            <input type="number" name="sequence_number[${newId}]" class="form-control" placeholder="Sequence Number">
                        </div>
                        <div class="col-md-2 mb-2">
                            <button type="button" class="btn btn-danger remove-video">X</button>
                        </div>
                    </div>
                `);

                $('#video-wrapper').append($group);
                $('.select2').select2(); // reinit select2
                addVideoValidation($group);
                // $("#video_required").valid();
            });

            // Remove video row
            $('#video-wrapper').on('click', '.remove-video', function () {
                $(this).closest('.video-group').remove();
                // $("#video_required").valid();
            });

        });
    </script>

    <script>
        $(document).ready(function () {

            let pdfCounter = $('#pdf-wrapper .pdf-group').length;

            function isExistingPdf($group) {
                return !isNaN($group.data('pdf-id'));
            }

            function addPdfValidation($group) {

                const pdfInput = $group.find('.pdf-input');
                const seqInput = $group.find('input[type="number"]');
                const existing = isExistingPdf($group);

                pdfInput.rules('remove');
                seqInput.rules('remove');

                /** ----------------------------
                 * PDF CHANGE
                 -----------------------------*/
                pdfInput.on('change', function () {

                    const hasPdf = this.files.length > 0;

                    seqInput.rules('remove');

                    if (hasPdf) {
                        seqInput.rules('add', {
                            required: true,
                            number: true,
                            messages: {
                                required: "Please enter sequence number when PDF is uploaded"
                            }
                        });
                    }
                });

                /** ----------------------------
                 * SEQUENCE CHANGE
                 -----------------------------*/
                seqInput.on('input change', function () {

                    const hasSeq = $(this).val().trim() !== '';

                    pdfInput.rules('remove');

                    // 🔥 ONLY for NEW PDFs
                    if (hasSeq && !existing) {
                        pdfInput.rules('add', {
                            required: true,
                            messages: {
                                required: "Please upload PDF when sequence number is entered"
                            }
                        });
                    }
                });

                // Init only for NEW PDFs
                if (!existing) {
                    pdfInput.trigger('change');
                    seqInput.trigger('change');
                }
            }

            // Existing PDFs
            $('#pdf-wrapper .pdf-group').each(function () {
                addPdfValidation($(this));
            });

            // Add PDF
            $('#add-pdf').on('click', function () {

                pdfCounter++;
                const newId = 'new_' + pdfCounter;

                const $group = $(`
                    <div class="row pdf-group mb-2" data-pdf-id="${newId}">
                        <input type="hidden" name="pdf_ids[]" value="${newId}">
                        <div class="col-md-6 mb-2">
                            <input type="file"
                                name="pdf_file[${newId}]"
                                class="form-control pdf-input"
                                accept="application/pdf">
                        </div>
                        <div class="col-md-4 mb-2">
                            <input type="number"
                                name="pdf_sequence_number[${newId}]"
                                class="form-control"
                                placeholder="PDF Sequence Number">
                        </div>
                        <div class="col-md-2 mb-2">
                            <button type="button" class="btn btn-danger remove-pdf">X</button>
                        </div>
                    </div>
                `);

                $('#pdf-wrapper').append($group);
                addPdfValidation($group);
            });

            // Remove PDF
            $('#pdf-wrapper').on('click', '.remove-pdf', function () {
                $(this).closest('.pdf-group').remove();
            });

        });
    </script>
@endsection