@extends('layouts.admin')

@section('content')
    <div class="container-fluid">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
        @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;
            }
        </style>
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        @include('elements.alert-error')
                        <form
                            action="{{ isset($course) ? route('admin.course.update', $course->id) : route('admin.course.store') }}"
                            id="course_form" method="POST" class="form-horizontal" enctype="multipart/form-data"
                            novalidate="novalidate">
                            @csrf
                            @if (isset($course))
                                @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-3">
                                            <label class="form-label" for="code">Course Code: <span
                                                    class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="code" name="code"
                                                placeholder="Course Code"
                                                value="{{ old('code', $course ? $course->code : '') }}" required>
                                        </div>

                                        <div class="col-md-3">
                                            <label class="form-label" for="sequence_number">Course Sequence Number: <span
                                                    class="text-danger">*</span></label>
                                            <input type="number" class="form-control" id="sequence_number"
                                                name="sequence_number" placeholder="Course Sequence Number"
                                                value="{{ old('sequence_number', $course ? $course->sequence_number : '') }}"
                                                required>
                                        </div>

                                        <div class="col-md-2">
                                            <label class="form-label" for="fees_MRP">Fees MRP: <span
                                                    class="text-danger">*</span></label>
                                            <input type="number" class="form-control" id="fees_MRP" placeholder="Fees MRP"
                                                name="fees_MRP"
                                                value="{{ old('fees_MRP', $course ? $course->fees_MRP : '') }}" required>
                                        </div>

                                        <div class="col-md-2">
                                            <label class="form-label" for="slug">SEO Title: </label>
                                            <input type="text" class="form-control" id="slug" name="slug"
                                                placeholder="SEO Title"
                                                value="{{ old('slug', $course ? $course->slug : '') }}">
                                        </div>

                                        <div class="col-md-2">
                                            <label class="form-label" for="course_type">Type: <span
                                                    class="text-danger">*</span></label>
                                            <select class="form-control" id="course_type" name="course_type" required>
                                                <option value="">Select Course Type</option>
                                                <option value="theory"
                                                    {{ old('course_type', isset($course) ? $course->course_type : '') == 'theory' ? 'selected' : '' }}>
                                                    Theory
                                                </option>
                                                <option value="practical"
                                                    {{ old('course_type', isset($course) ? $course->course_type : '') == 'practical' ? 'selected' : '' }}>
                                                    Practical
                                                </option>
                                            </select>
                                        </div>



                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-md-3">
                                            <label class="form-label" for="category_id">Category: <span
                                                    class="text-danger">*</span></label>
                                            <select class="form-control select2" data-toggle="select2" id="category_id"
                                                name="category_id" required>
                                                <option value="">Select Category</option>
                                                @foreach ($categories as $category)
                                                    <option value="{{ $category->id }}"
                                                        {{ old('category_id', $course ? $course->category_id : '') == $category->id ? 'selected' : '' }}>
                                                        {{ $category->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <p id="category_errors" class="text-danger"></p>
                                        </div>

                                        <div class="col-md-3">
                                            <label class="form-label" for="sub_category_id">Subcategory:</label>
                                            <select class="form-select" id="sub_category_id" name="sub_category_id">
                                                <option value="">Select Subcategory</option>

                                            </select>
                                        </div>

                                        <div class="col-md-3">
                                            <label class="form-label" for="duration">Duration (Hrs): <span
                                                    class="text-danger">*</span></label>
                                            <input type="number" class="form-control" id="duration" name="duration"
                                                placeholder="Hours"
                                                value="{{ old('duration', $course ? $course->duration : '') }}" required>
                                        </div>

                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="form-label" for="final_exam_times">Final Exam Time (.min): <span
                                                        class="text-danger">*</span></label>
                                                <input type="number" class="form-control" id="final_exam_times" name="final_exam_times" min="0"
                                                    placeholder="Final Exam Time"
                                                    value="{{ old('final_exam_times', isset($course) && $course->final_exam_times ? $course->final_exam_times : '') }}">
                                            </div>
                                        </div>
                                    </div>

                                    {{-- <div class="row mb-3">

                                        <div class="col-md-3">
                                            <label class="form-label" for="total_practical_hours">Total Course Hours : <span class="text-danger">*</span></label>
                                            <input type="number" class="form-control" id="total_practical_hours" name="total_practical_hours" min="0" placeholder="Total Course Hours" value="{{ old('total_practical_hours', $course ? $course->total_practical_hours : '') }}">
                                        </div>

                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="form-label" for="total_theory_hours">Total Theory Hours : <span class="text-danger">*</span></label>
                                                <input type="number" class="form-control" id="total_theory_hours" name="total_theory_hours" min="0" placeholder="Total Theory Hours" value="{{ old('total_theory_hours', isset($course) && $course->total_theory_hours ? $course->total_theory_hours : '') }}">
                                            </div>
                                        </div>
                                    </div> --}}


                                    {{-- <div class="row mb-3">
                                        <div class="col-md-4">
                                            <label class="form-label" for="meta_title">Meta Title: <span
                                                    class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="meta_title"
                                                placeholder="Meta Title" name="meta_title"
                                                value="{{ old('meta_title', $course ? $course->meta_title : '') }}"
                                                required>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label" for="meta_keywords">Meta Keywords: <span
                                                    class="text-danger">*</span></label>
                                            <textarea class="form-control" id="meta_keywords" placeholder="Meta Keywords" name="meta_keywords" required>{{ old('meta_keywords', $course ? $course->meta_keywords : '') }}</textarea>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label" for="meta_descriptions">Meta Descriptions: <span
                                                    class="text-danger">*</span></label>
                                            <textarea class="form-control" id="meta_descriptions" placeholder="Meta Descriptions" name="meta_descriptions" required>{{ old('meta_descriptions', $course ? $course->meta_descriptions : '') }}</textarea>
                                        </div>
                                    </div> --}}

                                    <div class="row mb-3">

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

                                        <div class="modal fade" id="exampleModal" tabindex="-1"
                                            aria-labelledby="exampleModal" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="exampleModalLabel">Discounted</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        @csrf
                                                        <div class="mb-3">
                                                            <label for="discounted_price"
                                                                class="col-form-label">Discounted Price:</label>
                                                            <input type="number" class="form-control"
                                                                id="discounted_price" placeholder="Discounted Price"
                                                                name="discounted_price"
                                                                value="{{ old('discounted_price', $course ? $course->discounted_price : '') }}">

                                                            <label for="start_date" class="col-form-label">Start
                                                                Date:</label>
                                                            <input type="date" class="form-control" id="start_date"
                                                                placeholder="Start Date" name="start_date"
                                                                value="{{ old('start_date', $course ? $course->start_date : '') }}">

                                                            <label for="end_date" class="col-form-label">End Date:</label>
                                                            <input type="date" class="form-control" id="end_date"
                                                                placeholder="End Date" name="end_date"
                                                                value="{{ old('end_date', $course ? $course->end_date : '') }}">
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-primary"
                                                            id="saveDiscountedPrice" data-bs-dismiss="modal">Save</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-2">
                                            <label class="form-label" for="discounted_price">Discounted Price:
                                            </label><br>
                                            <button style="margin-right: 20px;" type="button" class="btn btn-warning"
                                                data-bs-toggle="modal" data-bs-target="#exampleModal"><i
                                                    class="fa fa-plus"></i> </button>
                                            Price: <span
                                                id="displayDiscountedPrice">{{ $course ? $course->discounted_price : '0' }}</span>
                                        </div>

                                        <div class="col-md-2">
                                            <label class="form-label" for="status">Status: </label>
                                            <div class="form-check form-switch">
                                                <input type="checkbox" class="form-check-input" id="customSwitch1"
                                                    name="status" value="1"
                                                    {{ old('status', $course ? $course->status : 1) == 1 ? 'checked' : '' }}>
                                                <label class="form-check-label" for="customSwitch1">Active</label>
                                            </div>
                                        </div>

                                        <div class="col-md-2">
                                            <label class="form-label" for="is_government_course">Is Government Course: </label>
                                            <input type="hidden" name="is_government_course" value="0">
                                            <div class="form-check form-switch">
                                                <input type="checkbox" class="form-check-input" id="customSwitch2"
                                                    name="is_government_course" value="1"
                                                    {{ old('is_government_course', $course->is_government_course ?? 0) == 1 ? 'checked' : '' }}>
                                                {{-- <label class="form-check-label" for="customSwitch2">Is Government Course</label> --}}
                                            </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>
                                                    @php
                                                         $allTags = ['Hands-on Practice', 'Certification', 'Online Access', 'Study Materials', 'Flexible Learning'];
                                                         $selectedTags = isset($course) ? explode(',', $course->tags) : [];
                                                    @endphp
                                                    <select class="form-control select2-multiple" name="tags[]" multiple="multiple">
                                                        <option disabled>Select Tags</option>
                                                        @foreach ($allTags as $tag)
                                                            <option value="{{ $tag }}" {{ in_array($tag, $selectedTags) ? 'selected' : '' }}>
                                                                {{ $tag }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                            </div>

                                            <div class="col-md-4">
                                                <label class="form-label" for="show_on_details_page">Show On Details Page:</label>
                                                @php
                                                    $allShowOptions = ['Level', 'Type', 'Practical Hours', 'Price'];
                                                    $selectedShowOptions = isset($course) ? explode(',', $course->show_on_details_page) : [];
                                                @endphp
                                                <select class="form-control select2-multiple" name="show_on_details_page[]" multiple="multiple">
                                                    <option disabled>Select Show on Details Page</option>
                                                    @foreach ($allShowOptions as $option)
                                                        <option value="{{ $option }}" {{ in_array($option, $selectedShowOptions) ? 'selected' : '' }}>
                                                            {{ $option }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>

                                        </div> --}}
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-md-4">
                                            <label class="form-label" for="tags">Tags:</label>
                                            <select class="form-control select2-multiple" name="tags[]"
                                                multiple="multiple">
                                                <option disabled>Select Tags</option>
                                                @php
                                                    $allTags = [
                                                        'Certification',
                                                        'Flexible Learning',
                                                        'Hands-on Practice',
                                                        'Online Access',
                                                        'Study Materials',
                                                    ];
                                                    $selectedTags = isset($course) ? explode(',', $course->tags) : [];
                                                @endphp
                                                @foreach ($allTags as $tag)
                                                    <option value="{{ $tag }}"
                                                        {{ in_array($tag, $selectedTags) ? 'selected' : '' }}>
                                                        {{ $tag }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label" for="show_on_details_page">Show On Details
                                                Page:</label>
                                            <select class="form-control select2-multiple" name="show_on_details_page[]"
                                                multiple="multiple">
                                                <option disabled>Select Show on Details Page</option>
                                                @php
                                                    $allShowOptions = ['Level', 'Practical Hours', 'Price', 'Type'];
                                                    $selectedShowOptions = isset($course)
                                                        ? explode(',', $course->show_on_details_page)
                                                        : [];
                                                @endphp
                                                @foreach ($allShowOptions as $option)
                                                    <option value="{{ $option }}"
                                                        {{ in_array($option, $selectedShowOptions) ? 'selected' : '' }}>
                                                        {{ $option }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label class="form-label" for="number_of_questions">Number Of
                                                        Questions: <span class="text-danger">*</span></label>
                                                    <input type="number" placeholder="Number Of Questions"
                                                        class="form-control" id="number_of_questions"
                                                        name="number_of_questions"
                                                        value="{{ old('number_of_questions', $course ? $course->number_of_questions : '') }}">
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="form-label" for="number_of_chapters">Number Of Chapters:
                                                        <span class="text-danger">*</span></label>
                                                    <input type="number" placeholder="Number Of Chapters"
                                                        class="form-control" id="number_of_chapters"
                                                        name="number_of_chapters"
                                                        value="{{ old('number_of_chapters', $course ? $course->number_of_chapters : '') }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    {{-- <input type="text" id="slug" name="slug" value="{{ old('slug', $course ? $course->slug : '') }}"> --}}
                                </div>
                                @foreach (config('translatable.locales') as $locale => $language)
                                    <div class="tab-pane fade" id="{{ $locale }}">
                                        <div class="row mb-3">
                                            <div class="col-md-4">
                                                <label class="form-label" for="name_{{ $language }}">Course Name:
                                                    <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" id="name_{{ $language }}"
                                                    name="name[{{ $language }}]" placeholder="Course Name"
                                                    value="{{ old('name.' . $language, !empty($course) ? $course->getTranslation('name', $language) : '') }}"
                                                    required>
                                            </div>
                                            <div class="col-md-4">
                                                <label class="form-label"
                                                    for="short_description_{{ $language }}">Short Description: <span
                                                        class="text-danger">*</span></label>
                                                <textarea class="form-control" id="short_description_{{ $language }}" placeholder="Short Description"
                                                    name="short_description[{{ $language }}]" required>{{ old('short_description.' . $language, $course ? $course->getTranslation('short_description', $language) : '') }}</textarea>
                                            </div>
                                            <div class="col-md-4">
                                                <label class="form-label"
                                                    for="description_{{ $language }}">Description: <span
                                                        class="text-danger">*</span></label>
                                                <textarea class="form-control" id="description_{{ $language }}" name="description[{{ $language }}]"
                                                    placeholder="Description" required>{{ old('description.' . $language, $course ? $course->getTranslation('description', $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($course) ? 'Update' : 'Save' }}</button>
                                    <a href="{{ route('admin.course.index') }}" class="btn btn-outline-danger">Cancel</a>
                                </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        // flatpickr("#final_exam_times", {
        //     enableTime: true,
        //     noCalendar: true,
        //     dateFormat: "H:i", // 24-hour format
        //     time_24hr: true
        // });

        document.getElementById('saveDiscountedPrice').addEventListener('click', function() {
            var discountedPrice = document.getElementById('discounted_price').value;
            document.getElementById('displayDiscountedPrice').innerText = discountedPrice ? discountedPrice : '0';
        });
        $(document).ready(function() {
            $('#category_id').change(function() {
                var category_id = $(this).val();

                // Clear subcategory options
                $('#sub_category_id').empty();

                // Add default option
                $('#sub_category_id').append('<option value="">Select Subcategory</option>');

                // Fetch subcategories via AJAX
                $.ajax({
                    url: '{{ route('admin.course.subcategories', ':category_id') }}'.replace(
                        ':category_id', category_id),
                    type: 'GET',
                    success: function(response) {
                        var subcategories = response.subcategories;

                        // Populate subcategory dropdown
                        $.each(subcategories, function(key, value) {
                            $('#sub_category_id').append('<option value="' + value.id +
                                '">' + value.name.en + '</option>');
                        });

                        // Set the old value if present
                        var oldSubCategoryId =
                            '{{ old('sub_category_id', $course ? $course->sub_category_id : '') }}';
                        if (oldSubCategoryId) {
                            $('#sub_category_id').val(oldSubCategoryId);
                        } else {
                            $('#sub_category_id').val("");
                        }
                    },
                    error: function(xhr) {
                        // Handle errors if needed
                        console.error("Error fetching subcategories:", xhr.responseText);
                    }
                });
            });

            // Trigger change event on page load if category_id has a value
            if ($('#category_id').val()) {
                $('#category_id').trigger('change');
            }
        });
    </script>

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

    <script src="{{ asset('assets/vendor/validation/jquery-validation.js') }}"></script>
    <script>
        $(document).ready(function() {
            jQuery.validator.addMethod("pattern", function(value, element, param) {
                return this.optional(element) || param.test(value);
            }, "Invalid format.");

            $.validator.addMethod("safeInput", function(value, element) {
                return /^[a-zA-Z0-9\s\-_,.;:'"()!?/&]+$/.test(value);
            }, "Invalid characters in input");

            const hasExistingThumbnail = $('input[name="existing_thumbnail_image"]').val();
            $("#course_form").validate({
                rules: {
                    "name[en]": {
                        required: true,
                    },
                    sequence_number: {
                        required: true,
                        maxlength: 5,
                    },
                    code: {
                        required: true,
                        maxlength: 15,
                    },
                    category_id: {

                    },
                    sub_category_id: {

                    },
                    duration: {
                        required: true,
                        digits: true,
                    },
                    // total_practical_hours: {
                    //     required: true,
                    //     digits: true,
                    // },
                    // total_theory_hours: {
                    //     required: true,
                    //     digits: true,
                    // },
                    course_type: {
                        required: true,
                    },
                    number_of_questions: {
                        required: true,
                    },
                    number_of_chapters: {
                        required: true,
                    },
                    slug: {

                        pattern: /^[a-z0-9]+(?:-[a-z0-9]+)*$/
                    },
                    "description[en]": {
                        required: true,
                    },
                    "short_description[en]": {
                        required: true,
                    },

                    thumbnail_image: {

                        required: function() {
                            return !hasExistingThumbnail;
                        },
                    },
                    search_keywords: {
                        required: true,
                    },
                    // meta_title: {
                    //     required: true,
                    // },
                    // meta_keywords: {
                    //     required: true,
                    // },
                    // meta_descriptions: {
                    //     required: true,
                    // },

                    fees_MRP: {
                        required: true,
                        number: true,
                        maxlength: 7
                    },
                    discounted_price: {
                        required: true,
                        number: true
                    },
                    final_exam_times: {
                        required: true,
                        digits: false,
                    },

                },
                messages: {
                    "name[en]": {
                        required: "Course name is required",
                    },
                    course_type: {
                        required: "Course Type is required",
                    },
                    code: {
                        required: "Course code is required",
                        maxlength: "Course code cannot be more than 15 characters long"
                    },
                    sequence_number: {
                        required: "Sequence Number is required",
                        maxlength: "Sequence Number cannot be more than 5 characters long"
                    },
                    category_id: {
                        required: "Please select a category",
                    },
                    sub_category_id: {

                    },
                    thumbnail_image: {
                        required: "Thumbnail Image is required",
                    },
                    duration: {
                        required: "Duration is required",
                        digits: "Please enter a valid number of days"
                    },
                    // total_practical_hours: {
                    //     required: "Total course hours is required",
                    //     digits: "Please enter a valid number of days"
                    // },
                    // total_theory_hours: {
                    //     required: "Total theory hours is required",
                    //     digits: "Please enter a valid number of days"
                    // },
                    slug: {

                        pattern: "Slug can only contain lowercase letters, numbers, and hyphens"
                    },
                    "description[en]": {
                        required: "Description is required",
                    },
                    "short_description[en]": {
                        required: "Short Description is required",
                    },
                    search_keywords: {
                        required: "Search keywords are required",
                    },
                    // meta_title: {
                    //     required: "Meta title is required",
                    // },
                    // meta_keywords: {
                    //     required: "Meta keywords are required",
                    // },
                    // meta_descriptions: {
                    //     required: "Meta descriptions are required",
                    // },

                    fees_MRP: {
                        required: "Fees MRP is required",
                        number: "Please enter a valid number",
                        maxlength: "Fees MRP cannot be more than 7 characters long"
                    },
                    discounted_price: {
                        required: "Discounted price is required",
                        number: "Please enter a valid number"
                    },
                    number_of_questions: {
                        required: "Number of questions is required",
                    },
                    number_of_chapters: {
                        required: "Number of chapters is required",
                    },
                    final_exam_times: {
                        required: "Final exam time is required",
                        digits: "Please enter a valid time in minutes"
                    },
                },
                errorClass: "invalid-feedback",
                errorElement: 'span',
                errorPlacement: function(error, element) {
                    error.addClass('text-danger');

                    if (element.attr("name") == "category_id") {
                        error.appendTo('#category_errors');
                    } else {
                        error.insertAfter(element);
                    }


                    // Display the box alert with error messages
                    let errorMessages = [];
                    $('#course_form').find('.invalid-feedback').each(function() {
                        errorMessages.push($(this).text());
                    });
                    if (errorMessages.length > 0) {
                        $('#error_messages').html(errorMessages.join('<br>')).show();
                    }
                },
                highlight: function(element, errorClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element, errorClass) {
                    $(element).removeClass('is-invalid');
                },
                submitHandler: function(form) {
                    $('#error_messages').hide();
                    form.submit();
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).addClass('is-valid').removeClass('is-invalid');
                }
            });
        });
    </script>
@endsection