@if (isset($overallFormsData) && !empty($overallFormsData) && count($overallFormsData) > 0)
<div class="listing-view-data justify-content-between align-items-center">
    <table summary="Form Data List" class="table-theme" id="formdata-table">
            <thead id="formdataListHeader" style="background:#444444;color:#FEFEFE; ">
                <tr id="formdataListHeaderCol">
                    <th><div class="box_checkbox d-flex align-items-center box_checkbox_strong">
                            <input type="checkbox" class="allformscheckbox" id="allcheckbox" name="selectedItems[]" data-formstatus="" value="">
                            <label for="allcheckbox"></label>
                        </div> 
                    </th>
                    @foreach ($formsHeader as $headKey => $headVal)
                        <th scope="col">{{ $headVal->component_question_title ?? '' }}</th>
                    @endforeach
                    <th scope="col">Form Submitted</th>
                    <th scope="col">View</th>
                    <th scope="col">Actioned By</th>
                    
                    <th scope="col">
                        <a class="btn-edit-listing-view-data" onclick="getModalPopup('{{ route('form.getColumnsPopup', ['studioId' => $studioId ?? null,'formId' => base64_encode($formId) ]) }}')">
                            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0.25 10.9374V13.7499H3.0625L11.3575 5.45492L8.545 2.64242L0.25 10.9374ZM13.5325 3.27992C13.825 2.98742 13.825 2.51492 13.5325 2.22242L11.7775 0.467422C11.485 0.174922 11.0125 0.174922 10.72 0.467422L9.3475 1.83992L12.16 4.65242L13.5325 3.27992Z" fill="white"/>
                            </svg>
</a>
                    </th>
                </tr>
            </thead>
            <tbody id="formdataListBody">
                 
                @foreach ($overallFormsData as $userId => $userData)
                @php
                    $keys = array_column($overallFormsData, 'user_id');
                    $currentIndex = array_search($userData['user_id'], $keys); 
                    $previousUserId = $currentIndex > 0 ? $keys[$currentIndex - 1] : null;
                    $nextUserId = $currentIndex < count($keys) - 1 ? $keys[$currentIndex + 1] : null; 
                    $nextToNextUserId = $currentIndex < count($keys) - 2 ? $keys[$currentIndex + 2] : null; 
                @endphp
                <tr id="formdataListRow">
                        <td><div class="box_checkbox d-flex align-items-center box_checkbox_strong">
                                <input type="checkbox" class="itemcheckbox" id="itemcheckbox{{ $userData['user_id'] }}" name="selectedItems[]" data-formstatus="" value="{{$userData['user_id']}}">
                                <label for="itemcheckbox{{ $userData['user_id'] }}"></label>
                            </div> 
                        </td>
                        @if (!empty($userData['concatenated_answers']))
                            @php $lockedCount = 1; @endphp <!-- Initialize a counter for locked columns -->
                                @foreach ($userData['concatenated_answers'] as $ansDetails)
                                @php 
                                    $lockenableclass = ($ansDetails['is_locked'] == '1') ? 'locksticky' : ''; 
                                    if ($lockenableclass) {
                                        $lockedCount++; // Increment the locked column counter
                                    }
                                    
                                @endphp

                                                                
                                <td class="{{ $lockenableclass }}" data-id="{{ $ansDetails['user_filled_answer'] ?? '' }}">
                                                                    </td>
                            @endforeach
                        @endif
                        @php
                                $submitted_on = $userData['formuser_submittedon'] ?? null;
                                $dateTime = \Carbon\Carbon::parse($submitted_on);
                                $formattedDate = $dateTime->format('d M Y');
                                $restrictClass ='';
                                $buttonDisable = '';
                            if(Session::has('selected_studio_uuid')!=null){
                                if(Auth::user()->role_id==1){
                                    $restrictClass = 'disabled-linkss';
                                    $buttonDisable =  'disableLink';
                                }
                            }
                            @endphp
                        <td>{{ $formattedDate }}</td>
                        
                        <td class="viewFormDetail" data-user-id="{{ $userData['user_id'] }}" data-previous-id="{{$previousUserId}}" data-next-id="{{$nextUserId}}"><a
                            href="#">Full Form</a></td>
                        <td>{{ $userData['actioned_by'] }}</td>
                            <td>
                                <div class="d-flex justify-content-end">

                                    <button class="btn-theme btn-action {{$restrictClass ?? ''}} {{ $userData['mark_as_actioned'] == 1 ? 'dark tick-white-icon' : 'light undo-black-icon' }} dropdown-toggle markActionedBtn actioned-button btn-extra-small {!! $buttonDisable == 'disableLink' ? "disabled" : '' !!} {!! $buttonDisable == 'disableLink' ? 'more_info' : 'more_info-remove-title' !!}" {!! $buttonDisable == 'disableLink' ? 'data-title="Super Admin can\'t change status"' : '' !!}
                                        type="button" data-user-id="{{ $userData['user_id'] }}" id="{{ $buttonDisable }}" data-mark-flag="{{ $userData['mark_as_actioned'] }}" data-bs-toggle="dropdown" aria-expanded="false"> <span>{{ $userData['mark_as_actioned'] == 1 ? 'Mark as Actioned' : 'Undo' }}</span> 
                                    </button>


                                </div>
                        </td>
                    </tr>
                    <input type="hidden" name="lockedcount" id="lockedcount" value="">
                @endforeach
            </tbody>
    </table>
</div>
@else
@include('includes.no_results', ['noResultText' => 'No Submissions Found'])
@endif
<div class="modal common-modal-new fade" id="formDetailsModal" tabindex="-1" role="dialog" aria-labelledby="formDetailsModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h1 id="formDetailsModalLabel"></h1>
                <a type="button" class="close-inner-modal float-right common-close-modall" data-bs-dismiss="modal" aria-label="Close">
                    <svg class="no-stroke me-2 close-bgmodal" width="12" height="11" viewBox="0 0 12 11" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M11.3332 1.24128L10.2589 0.166992L5.99984 4.42604L1.74079 0.166992L0.666504 1.24128L4.92555 5.50033L0.666504 9.75937L1.74079 10.8337L5.99984 6.57461L10.2589 10.8337L11.3332 9.75937L7.07412 5.50033L11.3332 1.24128Z"
                            fill="#000000" />
                    </svg>
                    Close
                </a>
            </div>
            <div class="modal-body" id="formDetailsModalBody">
                <!-- AJAX response will be displayed here -->
            </div>
            <div class="modal-footer d-flex justify-content-start fullform-footer" id="formFooter">
                <button class="btn-theme light btn-small previous_form" id="previous_form"  type="button"
                    data-bs-toggle="dropdown" aria-expanded="false" style="margin-left: 0;">
                    <svg width="9" height="13" viewBox="0 0 9 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6.9235 12.5L8.3335 11.09L3.7535 6.5L8.3335 1.91L6.9235 0.500001L0.923497 6.5L6.9235 12.5Z" fill="black"/>
                    </svg> Previous Form
                </button>
                <button class="btn-theme light btn-small next_form right-icon" type="button" id="next_form" data-bs-toggle="dropdown"
                    aria-expanded="false">
                     Next Form
                     <svg width="8" height="13" viewBox="0 0 8 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.41 0.5L0 1.91L4.58 6.5L0 11.09L1.41 12.5L7.41 6.5L1.41 0.5Z" fill="black"/>
                    </svg>
                </button>
                @php
                $restrictClass ='';
                $buttonDisable = '';
                    if(Session::has('selected_studio_uuid')!=null){
                        if(Auth::user()->role_id==1){
                            $restrictClass = 'disabled-linkss';
                            $buttonDisable =  'disableLink';
                        }
                    }
            @endphp
                <button class="btn-theme dark action_button_view actioned-button btn-small btn-action {{$restrictClass??''}} {!! $buttonDisable == 'disableLink' ? "disabled" : '' !!} {!! $buttonDisable == 'disableLink' ? 'more_info' : 'more_info-remove-title' !!}"  {!! $buttonDisable == 'disableLink' ? 'data-title="Super Admin can\'t change status"' : '' !!}type="button" 
                id="{{$buttonDisable}}"  data-bs-toggle="dropdown" aria-expanded="false" style="margin-left: auto;margin-right: 0;"><span></span>
                </button>
               
                {{-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> --}}
            </div>
        </div>
    </div>
</div>
<script>
     $(document).ready(function(){
        @if(session()->has('permission') && session('permission') == 1)
        var permission_session = {{ session('permission') }};
        console.log("permission_session form data: " + permission_session);
          $('.btn-action').addClass('disabled-action');
            $(".btn-action").prop( "disabled", true);
            $(".btn-action").unbind('click');
            $('.btn-action').click(function () {return false;}); 
        @endif
        $(".more_info").hover(function () {
            var $title = $(this).find(".title");
            if (!$title.length) {
                $(this).append('<span class="title">' + $(this).attr("data-title") + '</span>');
            } else {
                $title.remove();
            }

            
        });
        $(".more_info-remove-title").hover(function () {
            $(this).data("data-title", $(this).attr("data-title")).removeAttr("title");
        });

        $(".more_info").prop("disabled", true);
        const body = document.body;
        const elements = document.querySelectorAll('#disabledButton');
        const elementLink = document.querySelectorAll('#disableLink');
        elements.forEach(element => {
            element.addEventListener('mouseover', function() {
                document.body.classList.add('body-disable-tooltip');   
            });
            element.addEventListener('mouseout', function() {
                document.body.classList.remove('body-disable-tooltip');
            });
        });
        elementLink.forEach(elementLink => {
            elementLink.addEventListener('mouseover', function() {
            document.body.classList.add('body-disable-tooltip');
            });
            elementLink.addEventListener('mouseout', function() {
                document.body.classList.remove('body-disable-tooltip');
            });
        });  
    });
      $(document).ready(function() {

        $('#disabledButton').on('click', function(e) {
        // alert('in');
      // Prevent the default click behavior for the disabled button
      return e.preventDefault();
      e.stopPropagation();
      $(this).tooltip('show');

    });
    if ($(window).width() >= 1200) { 
        var fixedColumnsCnt = $('#lockedcount').val();
        $('#formdata-table').DataTable({
                fixedColumns: {
                    leftColumns: fixedColumnsCnt,
                    rightColumns: 1,
                },
                scrollCollapse: true,
                scrollX: true,
                paging: false, // Disable pagination
                searching: false, // Disable search
                ordering: false, // Disable ordering
                info: false, 
                bJQueryUI: false, 
                destroy: true,
                bDestroy: true,
                bAutoWidth : false,

            });
            $('.dtfc-top-blocker').remove();
        }
        
        $(document).off("click", ".viewFormDetail").on("click", ".viewFormDetail", function (e) {
       // $('.viewFormDetail').on('click', function(e) {
            e.preventDefault();
            var userId = $(this).closest('td.viewFormDetail').data('user-id');
            var previousUserId = $(this).closest('td.viewFormDetail').data('previous-id');
            var nextUserId = $(this).closest('td.viewFormDetail').data('next-id');
            $('#previous_form').show();
            $('#next_form').show();
            $('#previous_form').removeClass('disabled-link');
            $('#next_form').removeClass('disabled-link');
            $('#previous_form').attr('data-previous-id', previousUserId);
            $('#next_form').attr('data-next-id', nextUserId);
            if(previousUserId==''){
                $('#previous_form').hide();
            }
            if(nextUserId==''){
                $('#next_form').hide();
            }
            handleViewFormDetail(userId);
            var markFlag = $(this).closest('tr').find('.actioned-button').data('mark-flag');
            $('.action_button_view').attr("data-user-id", userId);
            $('.action_button_view').attr("data-mark-flag", markFlag);
           if (markFlag === 1) {
                $('.action_button_view > span').text('Mark as actioned');
                $('.action_button_view').removeClass('light').addClass('dark');
                $('.action_button_view').removeClass('undo-black-icon').addClass('tick-white-icon');   

            } else {
                $('.action_button_view > span').text('Undo');
                $('.action_button_view').removeClass('dark').addClass('light');
                $('.action_button_view').removeClass('tick-white-icon').addClass('undo-black-icon');      
            }
        });
        $(document).off("click", "#next_form").on("click", "#next_form", function () {
       // $('#next_form').on('click', function() {
            $('#previous_form').removeClass('disabled-link');
            $('#next_form').removeClass('disabled-link');
            userId = $(this).data('user-id');
            previousId = $('#previous_form').data('previous-id');
           // nextId = $(this).data('next-id');
            //console.log("nextId"+previousId);
            $('#previous_form').show();
            $('#next_form').show();
            var formType = 'next_form';
            $.ajax({
                url: '{{ route('getFormUserIds', ['userId' => ':userId', 'form_type' => ':formType']) }}'
                    .replace(':userId', userId)
                    .replace(':formType', formType),
                type: 'GET',
                success: function(response) {        
                    if (response.nextUser && Object.keys(response.nextUser).length > 0) {
                        //console.log("next form next id"+response.nextUser.id);
                        handleViewFormDetail(response.nextUser.id);
                        $('#next_form').prop('disabled', false);
                        $('.actioned-button').data('user-id',response.nextUser.id);
                        if(response.UserCount == 1){
                        $('#next_form').addClass('disabled-link');
                        } else {
                            $('#next_form').removeClass('disabled-link');
                        }
                    } else {
                        $('#next_form').prop('disabled', true);
                    }
                },
                error: function(xhr, status, error) {
                    console.log("Error occurred: " + error);
                    $('#next_form').addClass('disabled-link');
                }
            });
});
$(document).off("click", "#previous_form").on("click", "#previous_form", function () {
      //  $('#previous_form').on('click', function() {
            $('#previous_form').removeClass('disabled-link');
            $('#next_form').removeClass('disabled-link');
            userId = $(this).data('user-id');
            var formType = 'previous_form';
            $('#previous_form').show();
            $('#next_form').show();
            $.ajax({
                url: '{{ route('getFormUserIds', ['userId' => ':userId', 'form_type' => ':formType']) }}'
                    .replace(':userId', userId)
                    .replace(':formType', formType),
                type: 'GET',
                success: function(response) {                
                    if (response.nextUser && Object.keys(response.nextUser).length > 0) {
                       handleViewFormDetail(response.nextUser.id);
                       //console.log("previous form next id"+response.nextUser.id);
                       $('.actioned-button').data('user-id',response.nextUser.id);
                       if(response.UserCount == 1){
                        $('#previous_form').addClass('disabled-link');
                        } else {
                            $('#previous_form').removeClass('disabled-link');
                        }
                    } else {
                        $('#previous_form').prop('disabled', true);
                    }
                },
                error: function(xhr, status, error) {
                    console.log("Error occurred: " + error);
                    $('#previous_form').addClass('disabled-link');
                }
            });
        });

        function handleViewFormDetail(userId){
            $('.previous_form').data('flag',userId);
            $('.next_form').data('flag',userId);
            $.ajax({
                url: '{{ route('formSubmissionDetailedView', ['userId' => ':userId']) }}'
                    .replace(':userId', userId),
                type: 'GET',
                success: function(response) {
                    if (response.error) {
                        $('#formDetailsModalBody').html('<div class="alert alert-danger">' +
                            response.error + '</div>');
                    } else {
                        $('#formDetailsModalBody').html(response.html);
                        $('#formDetailsModal').modal('show');
                        var selectedText = {!! json_encode($template->form_name ?? '') !!};
                        $('#formDetailsModalLabel').text(selectedText);
                        $('.previous_form').data('user-id',userId);
                        $('.next_form').data('user-id',userId);
                        var markFlag = response.formuser_data.mark_as_actioned;
                        if (markFlag === 1) {
                            $('.action_button_view > span').text('Mark as actioned');
                            $('.action_button_view').removeClass('light').addClass('dark');
                            $('.action_button_view').removeClass('undo-black-icon').addClass('tick-white-icon');   

                        } else {
                            $('.action_button_view > span').text('Undo');
                            $('.action_button_view').removeClass('dark').addClass('light');
                            $('.action_button_view').removeClass('tick-white-icon').addClass('undo-black-icon');      
                        }
                       

                    }
                },
                error: function(xhr, status, error) {
                    console.error("AJAX error:", error);
                    $('#formDetailsModalBody').html(
                        '<div class="alert alert-danger">Error fetching form details. Please try again.</div>'
                    );
                },
                complete: function() {
                    // $('.loader').remove();
                }
            });
        }


        $('.actioned-button').on('click', function() {
            var userId = $(this).data('user-id');
           // console.log("actioned button user id"+userId);
            var mark_flag = $(this).data('mark-flag');
            $.ajax({
                url: '{{ route('setMarkAsActioned') }}',
                type: 'POST',
                data: {
                    userId: userId,
                    mark_flag: mark_flag,
                    _token: '{{ csrf_token() }}' // Include the CSRF token for Laravel
                },
                success: function(response) {
                   location.reload();
                },
                error: function(error) {
                    // Handle the error
                    console.error('AJAX error:', error);
                }
            });
        });
        
    });


    
    </script>