@extends('layouts.dashboard')

@section('contents')
<section class="bg-white w-9/12 mx-auto rounded-lg mt-5 dark:bg-gray-900">
    <div class="py-4 px-4 mx-auto max-w-4xl lg:py-8">
        @if(Session::has('success'))
        <div id="alert-3" class="flex items-center p-4 mb-4 text-green-800 rounded-lg bg-green-200 dark:bg-gray-800 dark:text-green-400" role="alert">
            <svg class="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
            </svg>
            <span class="sr-only">Info</span>
            <div class="ms-3 text-sm font-medium">
                {{ Session::get('success') }}
                @php
                Session::forget('success');
                @endphp
            </div>
            <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-green-50 text-green-500 rounded-lg focus:ring-2 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-green-400 dark:hover:bg-gray-700" data-dismiss-target="#alert-3" aria-label="Close">
                <span class="sr-only">Close</span>
                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                </svg>
            </button>
        </div>
        @elseif(Session::has('failed'))
        <div id="alert-0" class="flex items-center p-4 mb-4 text-red-800 rounded-lg bg-red-200 dark:bg-gray-800 dark:text-red-400" role="alert">
            <svg class="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
            </svg>
            <span class="sr-only">Info</span>
            <div class="ms-3 text-sm font-medium">
                <p>{{ Session::get('failed') }}</p>
                @php
                Session::forget('failed');
                @endphp
            </div>
            <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-red-50 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700" data-dismiss-target="#alert-0" aria-label="Close">
                <span class="sr-only">Close</span>
                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                </svg>
            </button>
        </div>
        @endif
        <div class="flex justify-between items-center">
            <h2 class="lora-wt text-xl font-bold text-gray-900 dark:text-white"><span>Add Posts to Circular</span></h2>

            <button id="add-post" type="button" class="merriweather-wt focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"><i class="fa-solid fa-plus me-1"></i>Add Post</button>
        </div>
        <hr class="h-px my-0 bg-gray-400 border-0 dark:bg-gray-700">

        @if ($errors->any())
        <div class="mt-2 flex p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
            <svg class="shrink-0 inline w-4 h-4 me-3 mt-[2px]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
            </svg>
            <span class="sr-only">Danger</span>
            <div>
                <span class="font-medium">Ensure that these requirements are solved:</span>
                <ul class="mt-1.5 list-disc list-inside">
                    {{--
                    @foreach($errors->all() as $error)
                        <li>{{$error}}</li>
                        <li>{{ str_replace(['nposts.', 'nPostType.', 'ndepts.'], 'Row ', $error) }}</li>
                    @endforeach
                    --}}
                    @foreach($errors->getMessages() as $key => $messages)
                        @foreach($messages as $message)
                            <li>
                                @php
                                    // 1. Split 'nposts.0' into ['nposts', '0']
                                    $parts = explode('.', $key);
                                    $fieldName = $parts[0];
                                    $rowIndex = isset($parts[1]) ? ($parts[1] + 1) : null;

                                    // 2. Map your input names to nice Labels
                                    $labels = [
                                        'nposts'    => 'Post',
                                        'nPostType' => 'PostType',
                                        'ndepts'    => 'Department'
                                    ];

                                    $niceName = $labels[$fieldName] ?? $fieldName;
                                @endphp

                                @if($rowIndex)
                                    <strong>Row {{ $rowIndex }}:</strong> The {{ $niceName }} field is invalid.
                                @else
                                    {{ $message }}
                                @endif
                            </li>
                        @endforeach
                    @endforeach
                </ul>
            </div>
        </div>
        @endif

        <div class="border rounded-lg p-5 mt-5">
            <form id="post-config" action="{{route('add.posts')}}" method="POST">
                @csrf
                <div class="merriweather-wt grid gap-2 sm:grid-cols-2 sm:gap-5">
                    <div class="sm:col-span-2">
                        <label for="circular" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Circular*</label>
                        <select id="circular" name="circular" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                            <option value="" disabled selected>Choose the Circular</option>
                            @foreach($circulars as $circular)
                                <option value="{{$circular->id}}" {{ $nCircular == $circular->id ? 'selected' : '' }}>{{$circular->title}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="sm:col-span-2">
                        <table class="w-full text-left overflow-x-auto rtl:text-right">
                            <tbody id="tbl-body">
                            </tbody>
                        </table>
                    </div>
                </div>

                <button id="submit" type="submit" class="inline-flex w-1/2 justify-center items-center px-5 py-2.5 mt-4 sm:mt-6 text-sm font-medium text-center text-white bg-blue-700 rounded-lg focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900 hover:bg-blue-800">
                    <span><i class="fa-solid fa-gears me-1"></i> Add Posts</span>
                </button>
            </form>
        </div>
    </div>
</section>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        const depts = JSON.parse('@json($depts)');
        const posts = JSON.parse('@json($posts)');
        const postTypes = JSON.parse('@json($post_types)');

        let submission = 0;

        // A map to store dropdown instances so we can reference them later
        const dropdownInstancesPosts = {};
        const dropdownInstancesPostType = {};
        const dropdownInstancesDepts = {};

        $("#add-post").click(function() {
            submission += 1;

            let posts_list = '';
            let depts_list = '';
            let post_types = '';

            posts.forEach(post => {
                const uniquePostId = `row-${submission}-post-${post.id}`;
                posts_list += `
                <li>
                    <div class="flex p-2 rounded-sm hover:bg-gray-100 dark:hover:bg-gray-600">
                        <div class="flex items-center h-5">
                            <input id="${uniquePostId}" name="nposts[${submission}]" type="radio" value="${post.rank}" data-post-details="${post.details}" class="post-radio-item w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">
                        </div>
                        <div class="ms-2 text-sm">
                            <label for="${uniquePostId}" class="font-medium text-gray-900 dark:text-gray-300">
                                <div class="search-target-post">${post.details}</div>
                                <p id="helper-radio-text-4" class="text-xs font-normal text-gray-500 dark:text-gray-300">Teachers/Officers/Staff</p>
                            </label>
                        </div>
                    </div>
                </li>
                `;
            });

            depts.forEach(dept => {
                const uniqueDeptId = `row-${submission}-dept-${dept.id}`;
                depts_list += `
                <li>
                    <div class="flex items-center p-2 rounded-sm hover:bg-gray-100 dark:hover:bg-gray-600">
                        <input id="${uniqueDeptId}" type="checkbox" name="ndepts[${submission}][]" value="${dept.dept}" class="depts-check-item w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">
                        <label for="${uniqueDeptId}" class="search-target-dept w-full ms-2 text-sm font-medium text-gray-900 rounded-sm dark:text-gray-300">${dept.desc}</label>
                    </div>
                </li>
                `;
            });

            postTypes.forEach(postType => {
                const uniquePostTypeId = `row-${submission}-postType-${postType.id}`;
                post_types += `
                <li>
                    <div class="flex p-2 rounded-sm hover:bg-gray-100 dark:hover:bg-gray-600">
                        <div class="flex items-center h-5">
                            <input id="${uniquePostTypeId}" name="nPostType[${submission}]" type="radio" value="${postType.id}" data-posttype-details="${postType.type}" class="postType-radio-item w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">
                        </div>
                        <div class="ms-2 text-sm">
                            <label for="${uniquePostTypeId}" class="font-medium text-gray-900 dark:text-gray-300">
                                <div>${postType.type}</div>
                            </label>
                        </div>
                    </div>
                </li>
                `;
            });

            $("#tbl-body").append(
                `
                <tr class="border-b">
                    <th class="px-1 py-2 w-2/9">
                        <div class="w-full">
                            <button id="ddownPostsListButton-${submission}" data-dropdown-toggle="ddownPostsList-${submission}" class="flex w-full items-center justify-between text-dark bg-gray-100 hover:bg-gray-300 focus:ring-4 focus:outline-none focus:ring-gray-400 font-medium rounded-lg text-sm px-2.5 py-2.5 text-center inline-flex items-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800" type="button">
                                <span>*Select Post</span>
                                <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
                                </svg>
                            </button>

                            <div id="ddownPostsList-${submission}" class="z-10 hidden bg-gray-50 divide-y divide-gray-100 rounded-lg shadow-sm w-80 border-2 border-solid border-gray-300 dark:bg-gray-700 dark:divide-gray-600" data-popper-reference-hidden="" data-popper-escaped="" data-popper-placement="top">
                                <div class="p-3">
                                    <label for="search-post-${submission}" class="sr-only">Search</label>
                                    <div class="relative">
                                        <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
                                            <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
                                            </svg>
                                        </div>
                                        <input type="text" id="search-post-${submission}" class="ddown-search-posts bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5  dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search Posts">
                                    </div>
                                </div>
                                <ul class="h-[215px] p-3 overflow-y-auto space-y-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="ddownPostsListButton-${submission}">
                                    ${posts_list}
                                </ul>
                            </div>
                        </div>
                    </th>

                    <td class="px-1 py-2 w-2/9">
                        <div class="w-full">
                            <button id="ddownPostTypeButton-${submission}" data-dropdown-toggle="ddownPostTypes-${submission}" class="flex w-full items-center justify-between text-dark bg-gray-100 hover:bg-gray-300 focus:ring-4 focus:outline-none focus:ring-gray-400 font-medium rounded-lg text-sm px-2.5 py-2.5 text-center inline-flex items-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800" type="button">
                                <span>*Post Type</span>
                                <svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
                                </svg>
                            </button>

                            <div id="ddownPostTypes-${submission}" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700 dark:divide-gray-600">
                                <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="ddownPostTypeButton-${submission}">
                                    ${post_types}
                                </ul>
                            </div>
                        </div>
                    </td>

                    <td class="px-1 py-2 w-4/9">
                        <div class="w-full">
                            <button id="ddownDeptsButton-${submission}" data-dropdown-toggle="ddownDepts-${submission}" class="flex w-full items-center justify-between px-2.5 py-2.5 text-sm font-medium text-center text-dark bg-gray-100 rounded-lg hover:bg-gray-300 focus:ring-4 focus:outline-none focus:ring-gray-400 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800" type="button">
                                <span>Select Departments/Offices</span>
                                <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
                                </svg>
                            </button>
                            
                            <div id="ddownDepts-${submission}" class="z-10 hidden bg-white rounded-lg shadow-sm w-80 border-2 border-solid border-gray-300 dark:bg-gray-700">
                                <div class="p-3">
                                    <label for="search-depts-${submission}" class="sr-only">Search</label>
                                    <div class="relative">
                                        <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
                                            <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
                                            </svg>
                                        </div>
                                        <input type="text" id="search-depts-${submission}" class="ddown-search-depts bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5  dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search Dept./Office">
                                    </div>
                                </div>
                                <ul class="h-[215px] px-3 pb-3 overflow-y-auto text-sm text-gray-700 dark:text-gray-200" aria-labelledby="ddownDeptsButton-${submission}">
                                    ${depts_list}
                                </ul>
                                <button type="button" id="ddownDeptsX-${submission}" class="x-ddown-depts w-full flex items-center justify-center p-3 text-sm font-medium text-red-600 border-t border-gray-200 rounded-b-lg bg-gray-50 dark:border-gray-600 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-red-500">
                                    <i class="fa-solid fa-xmark me-2"></i>
                                    Close List
                                </button>
                            </div>
                        </div>
                    </td>

                    <td class="px-1 py-2 text-center w-1/9">
                        <a href="#" class="font-medium text-red-600 row-del-id"><i class="fa-solid fa-trash-can"></i></a>
                    </td>
                </tr>
                `
            );

            // --- Initialize Flowbite Posts Dropdown for this specific row ---
            const $targetEl_posts = document.getElementById(`ddownPostsList-${submission}`);
            const $triggerEl_posts = document.getElementById(`ddownPostsListButton-${submission}`);
            if ($targetEl_posts && $triggerEl_posts) {
                dropdownInstancesPosts[submission] = new Dropdown($targetEl_posts, $triggerEl_posts); // Create and store the instance
            }

            // --- Initialization for PostType Dropdown---
            const $targetEl_postType = document.getElementById(`ddownPostTypes-${submission}`);
            const $triggerEl_postType = document.getElementById(`ddownPostTypeButton-${submission}`);
            if ($targetEl_postType && $triggerEl_postType) {
                dropdownInstancesPostType[submission] = new Dropdown($targetEl_postType, $triggerEl_postType);
            }

            // --- Initialization for Depts Dropdown---
            const $targetEl_depts = document.getElementById(`ddownDepts-${submission}`);
            const $triggerEl_depts = document.getElementById(`ddownDeptsButton-${submission}`);
            if ($targetEl_depts && $triggerEl_depts) {
                dropdownInstancesDepts[submission] = new Dropdown($targetEl_depts, $triggerEl_depts);
            }

            /*
            if (typeof initFlowbite === 'function') {
                initFlowbite();
            }
            */

            visibleSubmission();
        });

        $(document).on('click', '.row-del-id', function(event) {
            event.preventDefault();

            const $row = $(this).closest('tr');
            
            const buttonPostsId = $row.find('button[id^="ddownPostsListButton-"]').attr('id');
            if (buttonPostsId) {
                const subId = buttonPostsId.split('-')[1];
                if(dropdownInstancesPosts[subId]){
                    dropdownInstancesPosts[subId].destroy(); // to remove all outside listeners Flowbite attaches to the window
                    delete dropdownInstancesPosts[subId]; //ensures the "previous data" isn't reused
                }
            }
            const buttonPostTypeId = $row.find('button[id^="ddownPostTypeButton-"]').attr('id');
            if (buttonPostTypeId) {
                const subId = buttonPostTypeId.split('-')[1];
                if(dropdownInstancesPostType[subId]){
                    dropdownInstancesPostType[subId].destroy();
                    delete dropdownInstancesPostType[subId]; //ensures the "previous data" isn't reused
                }
            }
            const buttonDeptsId = $row.find('button[id^="ddownDeptsButton-"]').attr('id');
            if (buttonDeptsId) {
                const subId = buttonDeptsId.split('-')[1];
                if(dropdownInstancesDepts[subId]){
                    dropdownInstancesDepts[subId].destroy();
                    delete dropdownInstancesDepts[subId];
                }
            }
            
            $row.remove();
            visibleSubmission();
        });

        $(document).on('change', '.post-radio-item', function(event) {
            event.preventDefault();
            const selectedPost = $(this).data('post-details');
            const $container = $(this).closest('th');
            $container.find('button[id^="ddownPostsListButton-"] span').text(selectedPost).removeClass('text-red-600 font-bold');
            // hiding-ddown
            const buttonId = $container.find('button[id^="ddownPostsListButton-"]').attr('id');
            const subId = buttonId.split('-')[1];
            if (dropdownInstancesPosts[subId]) {
                dropdownInstancesPosts[subId].hide();
            }
        });

        $(document).on('change', '.postType-radio-item', function(event) {
            event.preventDefault();
            const selectedPostType = $(this).data('posttype-details');
            const $container = $(this).closest('td');
            $container.find('button[id^="ddownPostTypeButton-"] span').text(selectedPostType).removeClass('text-red-600 font-bold');
            // hiding-ddown
            const buttonId = $container.find('button[id^="ddownPostTypeButton-"]').attr('id');
            const subId = buttonId.split('-')[1];
            if (dropdownInstancesPostType[subId]) {
                dropdownInstancesPostType[subId].hide();
            }
        });

        $(document).on('change', '.depts-check-item', function(event) {
            event.preventDefault();
            const $container = $(this).closest('td');
            const checkedCount = $container.find('.depts-check-item:checked').length;
            const $button = $container.find('button[id^="ddownDeptsButton-"]');

            if(checkedCount > 0) {
                $button.find('span').text(`Depts./Offices - ${checkedCount} selected.`);
                $button.addClass('font-extrabold');
            } else {
                $button.find('span').text('Select Departments/Offices');
                $button.removeClass('font-extrabold');
            }
        });

        $(document).on('input', '.ddown-search-posts', function() {
            const searchTerm = $(this).val().toLowerCase();
            const $dropdown = $(this).closest('div[id^="ddownPostsList-"]'); //ddown
            const $listItems = $dropdown.find('ul li');
            let hasResults = false;

            $listItems.each(function() {
                const detailText = $(this).find('.search-target-post').text().toLowerCase();
                const isMatch = detailText.indexOf(searchTerm) > -1;
                $(this).toggle(isMatch);
                if (isMatch) hasResults = true;
            });

            // Handle "No Results" message
            let $noResults = $dropdown.find('.no-post-results-msg');
            if (!hasResults) {
                if ($noResults.length === 0) {
                    $dropdown.find('ul').before('<div class="no-post-results-msg p-3 text-sm text-gray-500 text-center">No matches found. Please add first.</div>');
                }
            } else {
                $noResults.remove();
            }
        });

        $(document).on('input', '.ddown-search-depts', function() {
            const searchTerm = $(this).val().toLowerCase();
            const $dropdown = $(this).closest('div[id^="ddownDepts-"]'); //ddown
            const $listItems = $dropdown.find('ul li');
            let hasResults = false;

            $listItems.each(function() {
                const detailText = $(this).find('.search-target-dept').text().toLowerCase();
                const isMatch = detailText.indexOf(searchTerm) > -1;
                $(this).toggle(isMatch);
                if (isMatch) hasResults = true;
            });

            // Handle "No Results" message
            let $noResults = $dropdown.find('.no-dept-results-msg');
            if (!hasResults) {
                if ($noResults.length === 0) {
                    $dropdown.find('ul').before('<div class="no-dept-results-msg p-3 text-sm text-gray-500 text-center">No matches found. Please add first.</div>');
                }
            } else {
                $noResults.remove();
            }
        });

        $(document).on('click', '.x-ddown-depts', function(event) {
            event.preventDefault();
            event.stopPropagation();
            const subId = this.id.split('-')[1];
            if (dropdownInstancesDepts[subId]) {
                dropdownInstancesDepts[subId].hide();
            }
        });

        $('#post-config').on('submit', function(e) {
            let valid = true;
            let errorMessage = "";

            $('#tbl-body tr').each(function(index) {
                const rowNum = index + 1;
                const $postBtn = $(this).find('[id^="ddownPostsListButton"]');
                const $typeBtn = $(this).find('[id^="ddownPostTypeButton"]');
                const hasPost = $(this).find('input[name^="nposts"]:checked').length > 0;
                const hasType = $(this).find('input[name^="nPostType"]:checked').length > 0;

                if (!hasPost || !hasType) {
                    if (!hasPost) {
                        $postBtn.find('span').text('*Post Required!').addClass('text-red-600 font-bold');
                    }
                    if (!hasType) {
                        $typeBtn.find('span').text('*Type Required!').addClass('text-red-600 font-bold');
                    }
                    valid = false;
                    errorMessage = `Selection is needed for Row - ${rowNum}`;
                    return false; // Exit the .each() loop
                }
            });

            if (!valid) {
                e.preventDefault();
                alert(errorMessage);
            }
        });

        function visibleSubmission() {
            const rows = $("#tbl-body tr").length;

            if (rows > 0)
                $("#submit").removeClass('hidden');
            else
                $("#submit").addClass('hidden');
        }

        visibleSubmission();
    });
</script>
@endsection