@extends('layouts.app', ['redirectPage' => 'studio_owner_dashboard'])
@section('PageHeading', 'Dashboard')
@section('content')
@section('sidebar', 'true')
<div class="loader-new">
    <img src="{{ asset('images/load.gif') }}" alt="">
</div>
@php
 session()->forget('studio_create');
@endphp
<div class="container_fluid">
    <div class="box_content">
        <div class="box_overlayout">
            <div class="box_innerlayout">
                @if(Auth::user()->role_id==4)
                <div class="dashboard_card">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="dashboard_title">
                            <h1>Finish setting up your profile</h1>
                        </div>
                        <div class="dashboard_close">
                            <img src="{{ asset('images/close.svg') }}" alt="close">Close
                        </div>
                    </div>
                    <div class="profile_card">
                        <div class="profile_card_item create_card_item">
                            <img src="{{ asset('images/round_tick_white.svg') }}" alt="tick">
                            <p><a href="#">Create <span>Your</span> Account</a></p>
                        </div>
                        @if($ownUsersCount > 0)
                            <div class="profile_card_item create_card_item">
                                <img src="{{ asset('images/round_tick_white.svg') }}" alt="tick">
                                <p> <a href="{{ route('user.index', ['role' => 'team-member']) }}">Invite <span>Your</span> Team</a> </p>
                    
                            </div>
                        @else
                            <div class="profile_card_item">
                                <img src="{{ asset('images/book_light.svg') }}" alt="book_dark">
                                <p> <a href="{{ route('user.index', ['role' => 'team-member']) }}">Invite <span>Your</span> Team</a> </p>
                    
                            </div>
                        @endif
                               
                        @if($ownFormLibraryCount > 0)
                            <div class="profile_card_item create_card_item">  
                                <img src="{{ asset('images/round_tick_white.svg') }}" alt="tick">
                                <p>  <a href="{{ route('form.form_library') }}">
                                    Set Up <span>Your Form</span> Library</a></p>
                                </div>
                        @else
                            <div class="profile_card_item">
                                <img src="{{ asset('images/dash_icon2.svg') }}" alt="book_dark">
                                <p>  <a href="{{ route('form.form_library') }}">
                                    Set Up <span>Your Form</span> Library</a></p>
                            </div>
                        @endif
                        @if($ownStudioCustomizeCount == 0)
                            <div class="profile_card_item create_card_item">
                                <img src="{{ asset('images/round_tick_white.svg') }}" alt="tick">
                                <p> <a href="{{ route('settings.index') }}">
                                    Check <span>Your</span> Settings </a></p>
                            </div>
                        @else
                            <div class="profile_card_item">
                                <img src="{{ asset('images/settings_dark.svg') }}" alt="book_dark">
                                <p> <a href="{{ route('settings.index') }}">
                                    Check <span>Your</span> Settings </a></p>
                            </div>
                        @endif
                        @if($ownSocialMediaAccout != 0)
                            <div class="profile_card_item create_card_item">
                                <img src="{{ asset('images/round_tick_white.svg') }}" alt="tick">
                                <p><a href="{{ route('settings.index')}}">  
                                        Setup <span>Social Media</span>Links</a></p>
                            </div>
                        @else
                            <div class="profile_card_item">
                            <img src="{{ asset('images/book_dark.svg') }}" alt="book_dark">
                            <p><a href="{{ route('settings.index',['dashboard_redirect' => '1'])}}">
                                Setup <span>Social Media</span> Links</a></p>
                            </div>
                        @endif
                        @if($ownStudioCustomizeCount == 0)
                            <div class="profile_card_item create_card_item">
                                    <img src="{{ asset('images/round_tick_white.svg') }}" alt="tick">
                                    <p> <a href="{{ route('user.studio') }}">  
                                        Customise <span>Your Studio</span> Settings</a></p>
                            </div>
                        @else
                            <div class="profile_card_item">
                            <img src="{{ asset('images/book_dark.svg') }}" alt="book_dark">
                            <p> <a href="{{ route('user.studio') }}">  
                                Customise <span>Your Studio</span> Settings</a></p>
                            </div>
                        @endif
                    </div>
                </div>
                @endif
                @include('dashboard.barchart', ['chartDatas' => $chartDatas])
                <div class="box-modal-new">
                    <div class="box-modal-new-head">
                        <h2>Recently Submitted</h2>
                        <div class="d-flex gap-3">
                            <form action="" id="dashboardForm" class="filter-search bootstrap-select-primary">
                                @csrf <div class="d-flex gap-3">
                                    <div class="filter-search mob-w-100">
                                        <input type="text" name="search" id="billing-search" class="form-control"
                                            placeholder="Search..." autocomplete="off">
                                    </div>
                                    <div class="dropdown cust-dropdown-new mob-w-100">
                                        {{-- <button class="btn-theme dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                            Cancellation Form
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item" href="#">Cancellation Form</a></li>
                                            <li><a class="dropdown-item" href="#">Cancellation Form</a></li>
                                            <li><a class="dropdown-item" href="#">Cancellation Form</a></li>
                                        </ul> --}}

                                        <div class="form-group">
                                            <select class="form-control" id="userForm" name="userForm">
                                                {{-- <option value="" >Select Form</option> --}}
                                                @foreach ($chartDatas as $key=>$value)
                                                    @php
                                                        $selected ='';
                                                        if ($value['form_id'] == request()->get('userForm')) {
                                                            $selected = 'selected';
                                                        }
                                                        $itemsCount = $value['items'];
                                                       
                                                    @endphp
                                                                                                  @endforeach
                                            </select>
                                            @if (Auth::user()->role_id == 1 && session::has('selected_studio_uuid')!=null)
                                                <input type="hidden" name="studio" id="studio" class="scheck_so_role1"
                                                    value="{{ request()->get('studio') ?? session::get('selected_studio_uuid') }}">
                                                   
                                            @elseif(Auth::user()->role_id == 1)
                                            <input type="hidden" name="studio" id="studio" class="scheck_so"
                                                    value="{{ request()->get('studio') ?? '' }}">
                                            @elseif(Auth::user()->role_id == 4)
                                                {{-- <input type="hidden" name="studio" id="studio"
                                                    value="{{ request()->get('studio') ??Auth::user()->studios()->first()->uuid }}"> --}}
                                            @endif
                                            <input type="hidden" id ="range" name ="range"
                                                value="{{ request()->get('range') ?? '' }}">
                                            <input type="hidden" id="date" name="date"
                                                value="{{ request()->get('date') ?? '' }}">

                                        </div>
                                    </div>
                                    <a href="{{ route('form.form_library') }}" class="btn-theme dark mob-view-form-lib mob-btn-small">View <span class="rm-mob"> Form </span> Library</a>

                                </div>

                            </form>
                        </div>
                    </div>
                    <div class="box-modal-new-cont">

                        <div class="table-responsive">
                         <form>
                            <table summary="Invoice List" class="table-theme" id="invoice-table">
                                @if(count($chartDatas)>0)
                                    @if (isset($overallFormsData) && !empty($overallFormsData) && count($overallFormsData) > 0)
                                        <thead id="invoiceListHeader">
                                            <tr id="invoiceListHeaderCol">
                                                @foreach ($formsHeader as $headKey => $headVal)
                                                <th scope="col">{{ ucwords($headVal->component_question_title) ?? '' }}</th>
                                                @endforeach
                                                <th scope="col">Form Type</th>
                                                <th scope="col">Form Submitted</th>
                                                <th scope="col">View</th>
                                                <th scope="col"></th>
                                            </tr>
                                        </thead>
                                        <tbody id="invoiceListBody">
                                            @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="invoiceListRow">
                                                    @if (!empty($userData['concatenated_answers']))
                                                   
                                                     @foreach ($userData['concatenated_answers'] as $ansDetails)
                                                                                                               
                                                            <td><strong style="min-width:95px;display:inline-block;">                                                             </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 =  'disabledButton';
                                                                    $buttonDisable =  'disableLink';
                                                                }
                                                            }
                                                        @endphp
                                                   
                                                    <td class="form_name" id="form_name"></td>
                                                    <td><span style="min-width:95px;display:inline-block;">{{ $formattedDate }}</span></td>
                                                    <td class="viewFormDetail" data-user-id="{{ $userData['user_id'] }}" data-previous-id="{{$previousUserId}}" data-next-id="{{$nextUserId}}"><a
                                                        class="text-nowrap" href="#">Full Form </a></td>
                                                    <td>
                                                       
                                                        
                                                    <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> 
                                                    </td>  
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    @endif

                                @else
                                            <div class="empty-submission">No submissions yet</div>
                                       
                                @endif
                               
                                </table>
                            </form>
                            <div id="paginationContainer">
                                {{-- {!! $paginationHtml !!} --}}
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>
<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">
                @php
                $restrictClass ='';
                $buttonDisable = '';
                if(Session::has('selected_studio_uuid')!=null){
                    if(Auth::user()->role_id==1){
                        $restrictClass = 'disabled-linkss';
                        $buttonDisable =  'disableLink';
                    }
                }
                @endphp
                <!-- 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>
                <button class="btn-theme dark action_button_view actioned-button btn-small btn-action  {{$restrictClass??''}} {!! $buttonDisable == 'disableLink' ? 'more_info' : 'more_info-remove-title' !!}"  type="button"  
                id="{{$buttonDisable}}" {!! $buttonDisable == 'disableLink' ? " data-title='Superadmin cant change status'" : '' !!} 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() {
        $(".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);
        
        $('#billing-search').on('input', function() {
            var searchText = $(this).val().toLowerCase();
            $('#invoice-table tbody tr').each(function() {
                var rowText = $(this).text().toLowerCase();
                $(this).toggle(rowText.includes(searchText));
            });
        });
    });
</script>
<script type="text/javascript">
    $(document).on('click', '.shortcut button', function() {
        $(this).closest('.shortcut').hide();
    })
    $(document).ready(function() {
        $('#disabledButton').on('click', function(e) {
      return e.preventDefault();
      e.stopPropagation();
      $(this).tooltip('show');

    });
        $('#formdata-search').on('input', function(e) {
            e.preventDefault();
            var searchValue = $(this).val();
            $.ajax({
                url: '{{ route('studio.search') }}/' + searchValue,
                type: 'GET',
                success: function(data) {
                    if (data === '') {
                        $('#table-body').html(
                            '<tr><td colspan="6">No records found</td></tr>');
                    } else {
                        $('tbody').html(data);
                    }
                },
                error: function(error) {
                    console.log('Error:', error);
                }
            });
        });
    });
</script>
<script>
    $(document).ready(function() {
        var selectedText = $('#userForm').find(':selected').text();
        $('#formDetailsModalLabel').text(selectedText);
        $('#invoiceListBody tr').each(function() {
            $(this).find('.form_name').text(selectedText);
        });
      
    });
    $('#userForm').on('change', function() {
     formChange();
    });
    function formChange(){
        $('.body').addClass("active-loader");
            var role_id = {{ auth()->user()->role_id }};
            var selectedValue = $('#userForm').val();
            var selectedText = $('#userForm').find(':selected').text();
            var selectedStudio = "{{ Session::get('selected_studio_uuid') }}";
            if (selectedStudio != '') {
                var studioValue = selectedStudio;
            } else {
                if(role_id===1){
                    var studioValue = "";
                } else {
                    
                }  
            }
            $('#studio').val(studioValue);
            var formId = 'dashboardForm';
            $('#' + formId).submit();
    }
    $(document).ready(function(){
        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() {  
        $(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');
           var start_date = '';
           var end_date = '';
            $('#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',
                data: {
                start_date: start_date,
                end_date: end_date
            },
                success: function(response) {        
                    if (response.nextUser && Object.keys(response.nextUser).length > 0) {
                        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);
                       $('.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 = $('#userForm').find(':selected').text();
                        $('#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(e) {
            // return e.preventDefault();
            // e.stopPropagation();
            var userId = $(this).data('user-id'); 
            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>

@endsection