@extends('layouts/layoutMaster')
@section('style')
@section('title', 'Feedback Question')

@section('vendor-style')
    @vite(['resources/assets/vendor/libs/select2/select2.scss'])
@endsection

<!-- Vendor Scripts -->
@section('vendor-script')
    @vite(['resources/assets/vendor/libs/select2/select2.js'])
@endsection

@section('content')

  @php
    $helper = new \App\Helpers\Helpers();
    $common_date_format = $helper->general_setting_data()->date_format ?? 'd-M-y';
    $user_id = auth()->user()->user_id ;
    $role_id = auth()->user()->role_id ;
    $auth_id = auth()->user()->id ;
   @endphp
    <!-- Users List Table -->
    <div class="card">
        <div class="card-header pb-1">
            <ul class="nav nav-tabs flex-nowrap" role="tablist">
                <div class="scroll-container-wrapper">
                    <button class="scroll-btn left" id="scrollLeftBtn"><span class="scroll-arrow"><i
                                class="mdi mdi-chevron-left fs-2 text-white"></i></span></button>
                    <div class="scroll-container" id="scrollContainer">
                        <li class="item nav-item">
                            <a href="{{ url('/settings/general_settings') }}" type="button" class="nav-link scroll-link"
                                role="tab">
                                General Settings
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ url('/settings/broadcast_theme') }}" type="button"
                                class="nav-link scroll-link ">
                                Common
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ url('/settings/credential_book') }}" type="button"
                                class="nav-link scroll-link">
                                Entity
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ url('/settings/document') }}" type="button"
                                class="nav-link scroll-link ">
                                HRM
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ url('/settings/applicant_status') }}" type="button"
                                class="nav-link scroll-link">
                                Recruitment
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ url('/settings/interview_mode') }}" type="button"
                                class="nav-link scroll-link active">
                                Interview
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ url('/settings/department') }}" type="button"
                                class="nav-link scroll-link ">
                                Management
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ url('/settings/business/department') }}" type="button"
                                class="nav-link scroll-link ">
                                Business
                            </a>
                        </li>
                    </div>
                    <button class="scroll-btn right" id="scrollRightBtn" style="display: block;"><i
                            class="mdi mdi-chevron-right fs-2 text-white"></i></button>
                </div>
            </ul>
        </div>
        <div class="card-body px-1 py-1">
            <div class="nav-align-right nav-tabs-shadow">
                <ul class="nav nav-tabs" role="tablist">

                    <li class="nav-item">
                        <a href="{{ url('/settings/interview_mode') }}" type="button" class="nav-link " role="tab">
                            <label class="fs-6 right_nav">
                               Interview Mode
                               <span><i class="fa-solid fa-folder-open ms-2 fs-4"></i></span>
                            </label>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="{{ url('/settings/interview_category') }}" type="button" class="nav-link " role="tab">
                            <label class="fs-6 right_nav">
                               Interview Category
                               <span><i class="fa-solid fa-list-check ms-2 fs-4"></i></span>
                            </label>
                        </a>
                    </li>
                     <li class="nav-item">
                        <a href="{{ url('/settings/interview_question') }}" type="button" class="nav-link active" role="tab">
                            <label class="fs-6 right_nav">
                               Interview Question
                               <span><i class="mdi mdi-file-question-outline ms-2 fs-2"></i></span>
                            </label>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="{{ url('/settings/feedback_section') }}" type="button" class="nav-link "  role="tab">
                            <label class="fs-6 right_nav">
                               Feedback Section
                               <span><i class="mdi mdi-comment-text-outline ms-2 fs-2"></i></span>
                            </label>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="{{ url('/settings/feedback_question') }}" type="button" class="nav-link active" role="tab">
                            <label class="fs-6 right_nav">
                               Feedback Question
                               <span><i class="mdi mdi-comment-question-outline ms-2 fs-2"></i></span>
                            </label>
                        </a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="d-flex align-items-center justify-content-between pb-0 mb-4 pt-0 mt-0" style="border-bottom: 1px solid gray;">
                        <div class="d-flex flex-column align-items-start">
                            <h5 class="card-title mb-1 text-black">Feedback Question</h5>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb custom-breadcrumb">
                                    <!-- Home -->
                                    <li class="breadcrumb-item">
                                        <a href="{{ url('/dashboard') }}">
                                            <i class="mdi mdi-cog"></i> Settings
                                        </a>
                                    </li>
                                    <li class="breadcrumb-item" aria-current="page">
                                        <a href="javascript:void(0);">Interview</a>
                                    </li>
                                    <li class="breadcrumb-item active" aria-current="page">
                                        <a href="javascript:void(0);" class="active-link">
                                            Feedback Question
                                        </a>
                                    </li>
                                </ol>
                            </nav>
                        </div>
                        <div class="d-flex justify-content-end align-items-center mb-2 gap-2">
                            <a href="{{url('/settings/intreview/feedback_question_add')}}" class="btn btn-sm fw-bold btn-primary" >
                                <span class="me-2"><i class="mdi mdi-plus"></i></span>Add Question
                            </a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="d-flex align-items-center justify-content-between mb-4 ">
                                <div>
                                    <span>Show</span>
                                    <select id="perpage" class="form-select form-select-sm w-75px"
                                        onchange="loadThemes(1)">
                                        @php $options = [6,10, 25, 100, 500]; @endphp
                                        @foreach ($options as $option)
                                            <option value="{{ $option }}" {{ $perpage == $option ? 'selected' : '' }}>
                                                {{ $option }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="d-flex align-items-center justify-content-end flex-wrap gap-2">
                                    <div class="searchBar">
                                        <input type="text" id="search_filter" class="searchQueryInput"
                                            placeholder="Search Category/Question..."
                                            value="{{ $search_filter }}"/>
                                        
                                        <div class="searchAction">
                                            <div class="d-flex align-items-center">
                                                <a href="javascript:;"  class="searchSubmit" id="searchSubmit" >
                                                    <span class="mdi mdi-magnify fs-4 fw-bold"  style="color:#ab2b22;"></span>
                                                </a>
                                                <a href="javascript:;" class="refreshBar" id="refreshSearch" >
                                                    <span class="mdi mdi-refresh fs-4 fw-bold" style="color:#ab2b22;"></span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="table-responsive">
                                <table class="table align-middle table-row-dashed table-striped table-hover gy-0 gs-1 list_page">
                                    <thead>
                                        <tr class="text-start align-middle fw-bold fs-6 gs-0 bg-primary">
                                            <th class="w-200px">Question</th>
                                            <th class="min-w-100px">Section/<br>Category</th>
                                            <th class="min-w-100px">Language</th>
                                            <th class="min-w-50px">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="list-table-body" class="text-black fw-semibold fs-7 text-start">
                                        <tr class="skeleton-loader" id="skeleton-loader">
                                            
                                            <td class="skeleton-cell">
                                                <div class="skeleton"></div>
                                            </td>
                                            <td class="skeleton-cell">
                                                <div class="skeleton"></div>
                                            </td>
                                            <td class="skeleton-cell">
                                                <div class="skeleton"></div>
                                            </td>
                                            <td class="skeleton-cell">
                                                <div class="skeleton"></div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                         <div class="text-center my-3" id="pagination-container">
                            <!-- Pagination buttons will appear here -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!--begin::Modal - Add Document -->
    <div class="modal fade" id="kt_modal_add_document" tabindex="-1" aria-hidden="true"
        data-bs-keyboard="false" data-bs-backdrop="static" data-bs-focus="false">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-md">
            <!--begin::Modal content-->
            <div class="modal-content rounded">
                <!--begin::Modal header-->
                <div
                    class="modal-header d-flex align-items-center justify-content-between border border-bottom-1 pb-0 mb-4">
                    <div class="text-center mt-4">
                        <h3 class="text-center text-black">Create Document</h3>
                    </div>
                    <!--begin::Close-->
                    <div class="btn btn-sm btn-icon btn-active-color-primary rounded" style="border: 2px solid #000;" data-bs-dismiss="modal">
                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                        <span class="svg-icon svg-icon-1">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="#000" xmlns="http://www.w3.org/2000/svg">
                                <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="#000" />
                                <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="#000" />
                            </svg>
                        </span>
                        <!--end::Svg Icon-->
                    </div>
                    <!--end::Close-->
                </div>
                <!--end::Modal header-->
                <!--begin::Modal body-->
                <div class="modal-body pt-0 pb-10 px-10 px-xl-20">
                    <!--begin::Heading-->

                    <div class="row">
                        <!-- Basic -->
                        <div class="col-lg-12 mb-3">
                            <label class="text-dark mb-1 fs-6 fw-semibold">Document<span
                                    class="text-danger">*</span></label>
                            <input type="text" class="form-control" placeholder="Enter Document">
                        </div>
                        <div class="col-lg-12 mb-3">
                            <label class="text-dark mb-1 fs-6 fw-semibold">Description</label>
                            <textarea class="form-control" rows="1"  placeholder="Enter Description"></textarea>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mt-4">
                        <button type="reset" class="btn btn-outline-danger text-primary me-3" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" id="create_sms_btn" class="btn btn-primary"
                            data-bs-dismiss="modal">Create
                            Document</button>
                    </div>
                </div>
                <!--end::Modal body-->
            </div>
            <!--end::Modal content-->
        </div>
        <!--end::Modal dialog-->
    </div>
    <!--end::Modal - Add  Document-->


        <!--begin::Modal - Update Document -->
    <div class="modal fade" id="kt_modal_edit_document" tabindex="-1" aria-hidden="true"
        data-bs-keyboard="false" data-bs-backdrop="static" data-bs-focus="false">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-md">
            <!--begin::Modal content-->
            <div class="modal-content rounded">
                <!--begin::Modal header-->
                <div
                    class="modal-header d-flex align-items-center justify-content-between border border-bottom-1 pb-0 mb-4">
                    <div class="text-center mt-4">
                        <h3 class="text-center text-black">Update Document</h3>
                    </div>
                    <!--begin::Close-->
                    <div class="btn btn-sm btn-icon btn-active-color-primary rounded" style="border: 2px solid #000;" data-bs-dismiss="modal">
                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                        <span class="svg-icon svg-icon-1">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="#000" xmlns="http://www.w3.org/2000/svg">
                                <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="#000" />
                                <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="#000" />
                            </svg>
                        </span>
                        <!--end::Svg Icon-->
                    </div>
                    <!--end::Close-->
                </div>
                <!--end::Modal header-->
                <!--begin::Modal body-->
                <div class="modal-body pt-0 pb-10 px-10 px-xl-20">
                    <!--begin::Heading-->

                    <div class="row">
                        <!-- Basic -->
                        <div class="col-lg-12 mb-3">
                            <label class="text-dark mb-1 fs-6 fw-semibold">Document<span
                                    class="text-danger">*</span></label>
                            <input type="text" class="form-control" placeholder="Enter Document" value="10th Marksheet">
                        </div>
                        <div class="col-lg-12 mb-3">
                            <label class="text-dark mb-1 fs-6 fw-semibold">Description</label>
                            <textarea class="form-control" rows="1"  placeholder="Enter Description">-</textarea>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mt-4">
                        <button type="reset" class="btn btn-outline-danger text-primary me-3" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" id="create_sms_btn" class="btn btn-primary"
                            data-bs-dismiss="modal">Update Document</button>
                    </div>
                </div>
                <!--end::Modal body-->
            </div>
            <!--end::Modal content-->
        </div>
        <!--end::Modal dialog-->
    </div>
    <!--end::Modal - Update  Document-->




    <!--begin::Modal - Delete Document-->
    <div class="modal fade" id="kt_modal_delete_question" tabindex="-1" aria-hidden="true"
        data-bs-keyboard="false" data-bs-backdrop="static">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-m">
            <!--begin::Modal content-->
            <div class="modal-content rounded">
                <div class="swal2-icon swal2-danger swal2-icon-show" style="display: flex;">
                    <!-- <div class="swal2-icon-content"><i class="mdi mdi-trash fs-2 text-danger"></i></div> -->
                    <div>
                        <i class="fa-solid fa-trash text-danger" style="font-size: 35px;"></i>
                    </div>
                </div>
                <div class="swal2-html-container mb-4" id="swal2-html-container" style="display: block;">
                    <span id="delete_message">Are you sure you want to delete <br><b class="text-danger">Question </b>
                        ?</span>
                </div>
                <input type="hidden" name="delete_id" id="delete_id">
                <div class="d-flex justify-content-center align-items-center pt-8 mb-4">
                    <button type="button" class="btn btn-danger me-3" onclick="deleteDepartmentCategory()">Yes,
                        delete!</button>
                    <button type="reset" class="btn btn-secondary text-black" data-bs-dismiss="modal">No,cancel</button>
                </div>
            </div>
            <!--end::Modal content-->
        </div>
        <!--end::Modal dialog-->
    </div>
    <!--end::Modal - Delete Document-->




    <!-- Logo File Upload Start -->
    <!-- jQuery from CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
    let auth_user_id =@json($user_id);
    let auth_role_id =@json($role_id);
    let currentPage = 1;
    let isLoading = false;
    let abortController = new AbortController();

    function formatDate(date) {
        const options = { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: true };
        return new Date(date).toLocaleDateString('en-GB', options);
    }

    function buildRow(item,index) {
        let data = typeof item.data === 'string' ? item.data : JSON.stringify(item.data);
        // console.log(data)
        return `
            <tr >
                <td style="position:relative;">
                    <div class="d-flex align-items-center gap-2">
                        <div>
                            <div class="d-flex align-items-center">
                                <div class="text-truncate max-w-200px" data-bs-toggle="tooltip" data-bs-placement="bottom" title="${item.question_name}">
                                    ${item.question_name}
                                </div>
                            </div>
                             <div class="d-flex justify-content-start gap-1">
                                <span class="badge bg-warning text-black fs-9 f-bold">${item.question_type}</span>
                                <span data-bs-toggle="tooltip"
                                        data-bs-placement="right" title="${optionValue(item.question_option) || '-'}">
                                        <i class="mdi mdi mdi-help-circle text-dark"></i>
                                    </span>
                            </div>
                        </div>
                    </div>
                </td>
                <td>
                    <div>${item.section_name}</div>
                    <div>${item.interview_category_name}</div>
                </td>
                <td>
                    <div class="d-block">
                        <label class="fs-7 badge bg-success text-white fw-bold">${item.language_name}</label>
                    </div>
                </td>
                <td>
                    <div class="text-center">
                        <a class="btn btn-icon btn-sm waves-effect waves-light" data-bs-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                            <i class="mdi mdi-dots-vertical fs-3 text-black"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end" style="width:200px !important">
                            <a href="{{ url('/settings/intreview/intreview_question_edit/${item.encrypted_id}')}}" class="dropdown-item" >
                                <span><i class="mdi mdi-square-edit-outline fs-3 text-black me-1"></i>Edit</span>
                            </a>
                            <a href="javascript:;" class="dropdown-item" data-bs-toggle="modal"
                                data-bs-target="#kt_modal_delete_question" onclick='confirmDelete("${item.sno}","${item.field_name}")'>
                                <span><i class="mdi mdi-delete-outline fs-3 text-black me-1"></i>Delete</span>
                            </a>
                        </div>
                    </div>
                </td>
            </tr>
        `;
    }
    function loadThemes(page = 1) {
        const perpage = document.getElementById('perpage').value;
        const search = document.getElementById('search_filter').value;
        const url = `/settings/feedback_question?page=${page}&sorting_filter=${perpage}&search_filter=${search}`;

        // Show skeleton loader and clear old data before fetching new data
        isLoading = true;
        document.getElementById('list-table-body').innerHTML = ''; // Clear old data
        document.getElementById('list-table-body').insertAdjacentHTML('beforeend', skeletenRow()); // Clear old data
        $('#skeleton-loader').show(); // Show skeleton loader

        if (abortController.signal) {
            abortController.abort(); // Abort the previous request
        }
        abortController = new AbortController();

         fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }, signal: abortController.signal })
            .then(res => res.json())
            .then(res => {
                // Insert new data into the table
                if(res.data.length > 0){
                    res.data.forEach((item, index) => {
                        document.getElementById('list-table-body').insertAdjacentHTML('beforeend', buildRow(item, index+1));
                    });

                }else{
                    document.getElementById('list-table-body').insertAdjacentHTML('beforeend', NoDataFound());
                }
                     $('[data-bs-toggle="tooltip"]').tooltip();
                // Update pagination and results info
                updatePagination(res.current_page, res.last_page, res.total, perpage);

                // Hide skeleton loader after data is fetched
                isLoading = false;
                $('#skeleton-loader').hide();
            })
            .catch(error => {
                if (error.name !== 'AbortError') { // Only handle abort error
                    console.error('Error loading data:', error);
                }
                // Hide skeleton loader in case of error
                $('#skeleton-loader').hide();
                isLoading = false;
            });
    }

    function skeletenRow(){
        return `
            <tr class="skeleton-loader" id="skeleton-loader">
                <td class="skeleton-cell">
                    <div class="skeleton"></div>
                </td>
                <td class="skeleton-cell">
                    <div class="skeleton"></div>
                </td>
                <td class="skeleton-cell">
                    <div class="skeleton"></div>
                </td>
                <td class="skeleton-cell">
                    <div class="skeleton"></div>
                </td>
            </tr>
            `;
    }

    function NoDataFound(){
        return `
            <tr><td colspan="4" class="text-center">No Data Found</td></tr>
            `;
    }

    function updatePagination(currentPage, lastPage, total, perpage) {
        let paginationContainer = document.getElementById('pagination-container');
        paginationContainer.innerHTML = ''; // Clear old pagination

        // Set the pagination container style
        paginationContainer.style.display = "flex";
        paginationContainer.style.justifyContent = "space-between";
        paginationContainer.style.alignItems = "center";

        // Showing result count info (e.g., Showing 1 to 25 of 3556 results)
        let start = (currentPage - 1) * perpage + 1;
        let end = Math.min(currentPage * perpage, total);
        let showingInfo = `Showing ${start} to ${end} of ${total} results`;
        paginationContainer.insertAdjacentHTML('beforeend', showingInfo);

        // Create Pagination Buttons

        // << First button
        let firstButton = `<li class="page-item ${currentPage === 1 ? 'disabled' : ''}" data-bs-toggle="tooltip" data-bs-placement="top" title="First Page"><button class=" page-link" onclick="loadThemes(1)" >«</button> </li>`;
        
        // < Previous button
        let prevButton = `<li class="page-item ${currentPage > 1 ? '' : 'disabled'}" data-bs-toggle="tooltip" data-bs-placement="top" title="Previous"><button class=" page-link" onclick="loadThemes(${currentPage - 1})" >‹</button> </li>`;
        
        // Next button
        let nextButton = `<li class="page-item ${currentPage < lastPage ? '' : 'disabled'}" data-bs-toggle="tooltip" data-bs-placement="top" title="Next"><button class="page-link" onclick="loadThemes(${currentPage + 1})" >›</button> </li>`;
        
        // >> Last button
        let lastButton = `<li class="page-item ${currentPage === lastPage ? 'disabled' : ''}" data-bs-toggle="tooltip" data-bs-placement="top" title="Last Page"><button class=" page-link" onclick="loadThemes(${lastPage})" >»</button> </li>`;

        // Page Number Buttons (Dynamically show a range of pages around the current page)
        let pageButtons = '';
        let range = 2; // Show 2 pages before and after the current page
        let startPage = Math.max(1, currentPage - range);
        let endPage = Math.min(lastPage, currentPage + range);

        // Generate page numbers
        for (let i = startPage; i <= endPage; i++) {
            pageButtons += `<li class="page-item ${i === currentPage ? 'active' : ''}"><button class="page-link " onclick="loadThemes(${i})">${i}</button> </li>`;
        }

        // Add the pagination buttons and page numbers
        paginationContainer.insertAdjacentHTML('beforeend', `
            <nav aria-label="Page navigation example">
                <ul class="pagination">
                    ${firstButton}
                    ${prevButton}
                    ${pageButtons}
                    ${nextButton}
                    ${lastButton}
                </ul>
            </nav>
        `);

        // Update perpage dropdown if changed
        document.getElementById('perpage').value = perpage;
    }

    function debounceSearch(e) {
        if (e.keyCode === 13) {
            loadThemes(1);  // Trigger the search when the user presses enter
        }
    }

    // SearchBar
    document.getElementById('search_filter').addEventListener('input', function() {
        const searchValue = document.getElementById('search_filter').value;
        if (searchValue) {
            document.getElementById('refreshSearch').style.display = 'inline-block';  // Show the refresh button
        } else {
            document.getElementById('refreshSearch').style.display = 'none';  // Hide the refresh button
        }
    });

     // Listen for changes in the perpage dropdown and reload data
    document.getElementById('perpage').addEventListener('change', () => loadThemes(1));

    // Listen for Enter key in the search filter and reload data
    document.getElementById('search_filter').addEventListener('keyup', debounceSearch);

    document.getElementById('refreshSearch').addEventListener('click', function() {
        document.getElementById('search_filter').value = '';  // Clear the search input
        loadThemes(1);  // Reload the table data without the search filter
    });
    document.getElementById('searchSubmit').addEventListener('click', function() {
        loadThemes(1);  // Reload the table data without the search filter
    });

    // Initial load
    loadThemes(1);

</script>

    <script>
        function updatelevelStatus(UniversityId, isChecked) {
            const status = isChecked ? 0 : 1; // Set status based on checkbox state

            fetch(`/interview_question_status_change/${UniversityId}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}' // Include CSRF token
                    },
                    body: JSON.stringify({
                        status: status
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 200) {
                        toastr.success('Question status Updated successfully!');
                        loadThemes(1);
                    } else {
                        toastr.error('Error updating Question status');
                    }
                })
                .catch(error => {
                    console.error('Error updating Question status:', error);
                });
        }
    </script>
    <script>
        function confirmDelete(sno, name) {
                $('#delete_id').val(sno)

                $('#delete_message').html(
              'Are you sure you want to Delete Question ?<br><br> <b class="text-danger">' +
              name +
              '</b>');
        }

        function deleteDepartmentCategory() {

            var universityId = $('#delete_id').val();

            fetch('/interview_question_delete/' + universityId, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 200) {
                        toastr.success('Question Deleted successfully!');
                        location.reload();

                    } else if(data.status === 302) {
                        toastr.error(data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }

        
    </script>
<!-- status Change  & Delete-->
    <script>
        function optionValue(data){
            if (!data) return '-';
            try{
                const parsedData = JSON.parse(data);
                return parsedData?.map(item => item.label).join(', ') || '-';
            }catch(e){
                return '-';
            }
            
        }   
    </script>
@endsection