@extends('layouts.app')
@section('bodyClass', 'tasks-lists forms-overview')
@section('content')
@section('sidebar', 'true')
@section('PageHeading', 'Form Data - ' . $template->form_name)

<style type="text/css">
.studio_menu_layout {
    display: none;
}

.side-bar-display {
    display: none !important;
}
</style>
<div class="loader-new">
    <img src="{{ asset('images/load.gif') }}" alt="">
</div>

<link rel="stylesheet" href="https://cdn.datatables.net/2.0.1/css/dataTables.dataTables.css">
<!-- <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/5.0.0/css/fixedColumns.dataTables.css"> -->
<style>
th,
td {
    white-space: nowrap;
}

div.dataTables_wrapper {
    width: 800px;
    margin: 0 auto;
}

.table-theme tbody tr:first-child .more_info .title {
    top: -10px;
    left: auto;
    right: 100%;
}
</style>

<script src="https://cdn.datatables.net/2.0.1/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/5.0.0/js/dataTables.fixedColumns.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/5.0.0/js/fixedColumns.dataTables.js"></script>
<div class="container_fluid">
    <div class="box_content">
        <div class="box_overlayout">
            <div class="box_innerlayout">
                <div class="row align-items-center mb-2 cust-mob-filter-search">

                    <div class="col-lg-8 col-md-6 col-sm-12">
                        <form class="filter-search mob-filter-search-formdata"
                            action="{{ route('form.formDataExport',['studioId' => $encodedStudioId,'formId' => $encodedFormId]) }}"
                            method="POST">
                            @csrf
                            <div class="d-flex gap-3">
                                <a href="{{ route('form.form_library') }}" class="back-top-temp-arrow btn-theme dark"
                                    style="line-height:40px;">
                                    <svg width="8" height="12" viewBox="0 0 8 12" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M6.12369 12L7.53369 10.59L2.95369 6L7.53369 1.41L6.12369 8.30408e-07L0.123692 6L6.12369 12Z"
                                            fill="#FEFEFE" />
                                    </svg> Back To All Forms
                                </a>
                                <div class="dropdown dropdown-primary-new">
                                    <a id="dropdownMenuLink"
                                        class="btn-theme dark {{ Helper::limitedAccessStudio() ? 'disabled-link' : '' }}"
                                        href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <svg width="17" height="16" viewBox="0 0 17 16" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd" clip-rule="evenodd"
                                                d="M8.5007 4.53366C8.89661 5.66987 9.97735 6.48517 11.2485 6.48517C12.5197 6.48517 13.6004 5.66987 13.9963 4.53366H16.4V2.80033H14.053C13.7135 1.57029 12.5865 0.666992 11.2485 0.666992C9.91051 0.666992 8.78349 1.57029 8.444 2.80033H0.400024V4.53366H8.5007ZM9.79396 3.57608C9.79396 4.37941 10.4452 5.03063 11.2485 5.03063C12.0518 5.03063 12.7031 4.37941 12.7031 3.57608C12.7031 2.77276 12.0518 2.12154 11.2485 2.12154C10.4452 2.12154 9.79396 2.77276 9.79396 3.57608ZM5.5513 8.90942C4.25318 8.90942 3.15365 9.75968 2.77923 10.9337L0.400024 10.9337V12.667H2.76789C3.13102 13.8597 4.23981 14.7276 5.5513 14.7276C6.86279 14.7276 7.97159 13.8597 8.33471 12.667L16.4 12.667V10.9337L8.32338 10.9337C7.94896 9.75968 6.84942 8.90942 5.5513 8.90942ZM5.5513 10.364C6.35463 10.364 7.00585 11.0152 7.00585 11.8185C7.00585 12.6218 6.35463 13.2731 5.5513 13.2731C4.74798 13.2731 4.09676 12.6218 4.09676 11.8185C4.09676 11.0152 4.74798 10.364 5.5513 10.364Z"
                                                fill="#FEFEFE" />
                                        </svg>
                                        Filter
                                        <span>
                                            <svg width="10" height="6" viewBox="0 0 10 6" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M9.5 1.0575L8.4425 -4.62248e-08L5 3.435L1.5575 -3.47178e-07L0.5 1.0575L5 5.5575L9.5 1.0575Z"
                                                    fill="white" />
                                            </svg>
                                        </span>
                                    </a>

                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                                        <li class="label">Show:</li>
                                        <li>
                                            <div class="box_checkbox  d-flex align-items-center">
                                                <input type="checkbox" data-status="Active" name="filterStatus[]"
                                                    id="f_status1" value="1" class="f_status"
                                                    onchange="updateSelectedValue(this)" />
                                                <label for="f_status1"></label>
                                                <span>Need to Action</span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="box_checkbox  d-flex align-items-center">
                                                <input type="checkbox" name="filterStatus[]" class="f_status"
                                                    id="f_status2" value="2" data-status="InActive"
                                                    onchange="updateSelectedValue(this) " />
                                                <label for="f_status2"></label>
                                                <span>Actioned</span>
                                            </div>
                                        </li>
                                        <li class="label">Sort by:</li>
                                        <li>
                                            <div class="box_radio d-flex align-items-center">
                                                <input type="radio" name="filterSort" class="f_sort" id="f_sort1"
                                                    value="1" />
                                                <label for="f_sort1"></label>
                                                <span>Newest to Oldest</span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="box_radio d-flex align-items-center">
                                                <input type="radio" name="filterSort" class="f_sort" id="f_sort2"
                                                    value="2" />
                                                <label for="f_sort2"></label>
                                                <span>Oldest to Newest</span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="box_radio d-flex align-items-center">
                                                <input type="radio" name="filterSort" class="f_sort" id="f_sort3"
                                                    value="3" />
                                                <label for="f_sort3"></label>
                                                <span>A to Z</span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="box_radio d-flex align-items-center mb-0">
                                                <input type="radio" name="filterSort" id="f_sort4" class="f_sort"
                                                    value="4" />
                                                <label for="f_sort4"></label>
                                                <span>Z to A</span>
                                            </div>
                                        </li>

                                    </ul>
                                </div>
                                <div class="selected-filters">
                                    <!-- Selected filters will be displayed here -->
                                </div>
                            </div>



                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12 filter-search">
                        <div class="task_btn float-lg-end adduser gap-3">
                            <input type="text" name="keyword" id="search"
                                class="form-control search-keyword input-search sm-input-search" placeholder="Search..."
                                autocomplete="off" value="">

                            @if(count($recentSubmittedForms) > 0)
                            <button type="submit" class="btn-theme grey-dark btn-action formdataexport">
                                <svg width="10" height="12" viewBox="0 0 10 12" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M6.49967 4.5V5H6.99967H8.45923L4.99967 8.45956L1.54012 5H2.99967H3.49967V4.5V1H6.49967V4.5ZM9.16634 11.3333H0.833008V11H9.16634V11.3333Z"
                                        fill="white" stroke="white" />
                                </svg> Export
                            </button>
                            @endif

                        </div>
                    </div>

                    </form>
                </div>




                <div id="bulkeditToggle"
                    class="box-grey align-items-center justify-content-between bulkeditToggle-form-data"
                    style="display:none;">
                    <div class="d-flex align-items-center cust-fl-select-section">
                        <div class="box_checkbox d-flex align-items-center">
                            <!-- <input type="checkbox" class="allformscheckbox" id="itemAction">
                            <label for="itemAction"></label> -->
                            <span>Apply an action to</span>
                        </div>
                        <div class="box-grey-bold">
                            <span class="bulk-edit-count"></span>
                            <span class="bulk-edit-count-all">
                                selected forms</span>
                        </div>

                    </div>
                    <div class="d-flex gap-3">
                        <a class="btn-theme light-grey updateformstatus svg-initial1 cursor-pointer {{ Helper::limitedAccessStudio() ? 'disabled-link' : '' }}"
                            data-status='2'>
                            <svg width="24" height="25" viewBox="0 0 24 25" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0_5877_2079)">
                                    <path
                                        d="M12 2.5C6.48 2.5 2 6.98 2 12.5C2 18.02 6.48 22.5 12 22.5C17.52 22.5 22 18.02 22 12.5C22 6.98 17.52 2.5 12 2.5ZM10 17.5L5 12.5L6.41 11.09L10 14.67L17.59 7.08L19 8.5L10 17.5Z"
                                        fill="#7EDBB4" />
                                </g>
                                <defs>
                                    <clipPath id="clip0_5877_2079">
                                        <rect width="24" height="24" fill="white" transform="translate(0 0.5)" />
                                    </clipPath>
                                </defs>
                            </svg>
                            Mark as Actioned
                        </a>
                        <a class="btn-theme light-grey updateformstatus svg-initial cursor-pointer {{ Helper::limitedAccessStudio() ? 'disabled-link' : '' }}"
                            data-status='1'>
                            <svg width="17" height="17" viewBox="0 0 17 17" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0_5898_4350)">
                                    <path
                                        d="M8.79972 1.83301C5.11972 1.83301 2.13306 4.81967 2.13306 8.49967C2.13306 12.1797 5.11972 15.1663 8.79972 15.1663C12.4797 15.1663 15.4664 12.1797 15.4664 8.49967C15.4664 4.81967 12.4797 1.83301 8.79972 1.83301ZM8.79972 13.833C5.85306 13.833 3.46639 11.4463 3.46639 8.49967C3.46639 7.26634 3.88639 6.13301 4.59306 5.23301L12.0664 12.7063C11.1664 13.413 10.0331 13.833 8.79972 13.833ZM13.0064 11.7663L5.53306 4.29301C6.43306 3.58634 7.56639 3.16634 8.79972 3.16634C11.7464 3.16634 14.1331 5.55301 14.1331 8.49967C14.1331 9.73301 13.7131 10.8663 13.0064 11.7663Z"
                                        fill="black" />
                                </g>
                                <defs>
                                    <clipPath id="clip0_5898_4350">
                                        <rect width="16" height="16" fill="white" transform="translate(0.799805 0.5)" />
                                    </clipPath>
                                </defs>
                            </svg> Undo
                        </a>

                    </div>
                </div>

                <div id="overview-studio-list" class="overview-studio-list-form-data">
                    @include('forms.ajax_formdata_list')
                    @include('includes.loader')
                </div>
                <div id="paginationContainer">
                    {!! $paginationHtml !!}
                </div>
                <input type="hidden" id="page-no" value="{{ $recentSubmittedForms->currentPage() }}">

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

@endsection
@push('scripts')

<script src="{{ asset('js/forms/sortable.js') }}"></script>

<script type="text/javascript">
$(document).ready(function() {
    // $('.dt-scroll-body').mCustomScrollbar();
});

document.getElementById("search").addEventListener("keydown", function(event) {
    if (event.keyCode === 13) { // 13 is the keycode for Enter key
        event.preventDefault();
        return false;
    }
});

$(document).on('click', '.itemcheckbox', function() {
    var checkedLength = $('.itemcheckbox:checked').length;
    if (checkedLength > 0) {
        $('#bulkeditToggle').addClass('d-flex');
        $('#bulkeditToggle').show();
        $('span.bulk-edit-count').text(checkedLength);
    } else {
        $('.allformscheckbox').prop('checked', false);
        $('#bulkeditToggle').removeClass('d-flex');
        $('#bulkeditToggle').hide();
    }

    if (!$(this).is(':checked')) {
        $('.allformscheckbox').prop('checked', false);
    }
});


$(document).on('click', '.allformscheck', function() {

    $('.allformscheckbox').prop('checked', true);
    $(".itemcheckbox").each(function() {
        this.checked = true;
    });
    var checkedLength = $('.itemcheckbox:checked').length;
    $('span.bulk-edit-count').text(checkedLength);
});

$(document).on('click', '.allformscheckbox', function() {
    var allFormsCheckbox = $(this);
    var isChecked = allFormsCheckbox.prop('checked');

    $(".itemcheckbox").prop('checked', isChecked);

    var checkedLength = isChecked ? $('.itemcheckbox').length : 0;
    $('span.bulk-edit-count').text(checkedLength);
    if (isChecked == true) {
        $('#bulkeditToggle').addClass('d-flex');
        $('#bulkeditToggle').show();
        $('span.bulk-edit-count').text(checkedLength);
    } else {
        $('.allformscheckbox').prop('checked', false);
        $('#bulkeditToggle').removeClass('d-flex');
        $('#bulkeditToggle').hide();
    }
});

$(document).on('click', '.updateformstatus', function() {
    var checkedLength = $('.itemcheckbox:checked').length;
    if (checkedLength > 0) {
        var itemIds = [];
        var status = $(this).data('status');

        $('.itemcheckbox:checked').each(function() {
            itemIds.push($(this).val());
        });
        // console.log("item ids"+itemIds);

        if (itemIds.length > 0) {
            formAjaxList(itemIds, status, 'update');
        }
    }
});

$(document).on('click', '.updateformstatuspop', function() {

    if ($('.updateformstatuspop').length > 0) {
        var itemIds = $(this).data('formid');
        var status = $(this).data('status');

        if (itemIds != '') {
            var page = $('#page-no').val();
            formAjaxList(itemIds, status, 'update', page);
        }
    }
});


function formAjaxList(itemIds, status, type, page = 0) {
    // $('.loader-new').addClass("active-loader");
    var encodedformId = {
        !!json_encode($encodedFormId) !!
    };
    var encodedstudioId = {
        !!json_encode($encodedStudioId) !!
    };
    var ajaxUrl, ajaxMethod;
    if (type == 'update') {
        ajaxUrl = "{{ route('form.updateUserFormAction') }}";
        ajaxMethod = "POST";
    } else {
        ajaxUrl = "{{ route('form.formdata', ['studioId' => $encodedStudioId, 'formId' => $encodedFormId]) }}";
        ajaxMethod = "GET";
    }
    var keyword = $.trim($('.search-keyword').val());
    var secondTdDataId = $('#formdataListRow td:nth-child(2)').attr('data-id');
    //alert(secondTdDataId);
    var filterStatus = [];
    $('.f_status:checked').each(function() {
        filterStatus.push($(this).val());
    });
    var filterSort = $('.f_sort:checked').val();
    var postData = {
        itemIds: itemIds,
        status: status,
        keyword: keyword,
        filterStatus: filterStatus,
        componentId: secondTdDataId,
        filterSort: filterSort,
        formId: encodedformId,
        studioId: encodedstudioId,
        page: page,
        _token: '{{ csrf_token() }}',
    };
    $.ajax({
        type: ajaxMethod,
        dataType: 'json',
        data: postData,
        url: ajaxUrl,
        success: function(data) {
            $('.loader-new').removeClass("active-loader");
            if (data.status) {

                $('#overview-studio-list').html(data.html);
                $('#paginationContainer').html(data.paginationHtml);

                if (!data.exportenable) {
                    $('.formdataexport').hide();
                } else {
                    $('.formdataexport').show();
                }
                var page_no_text = $('.pagination li').find('span.page-link').text();
                var page_no = parseInt(page_no_text);
                $('#page-no').val(page_no);

                if ($(window).width() >= 768) {
                    var fixedColumnsCnt = $('#lockedcount').val();
                    $('#formdata-table').DataTable({
                        fixedColumns: {
                            leftColumns: fixedColumnsCnt,
                            rightColumns: 2,
                        },
                        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();
                }
                // $('#paginationContainer').html(data.paginationHtml);

                // var page_no_text = $('.pagination li').find('span.page-link').text();
                // var page_no = parseInt(page_no_text);
                // $('#page-no').val(page_no);

                $('#single-modal-in-the-page').modal('hide');
                $('#bulkeditToggle').removeClass('d-flex');
                $('#bulkeditToggle').hide();
                $('.allformscheckbox').prop('checked', false);
                //window.location.reload();
            } else {

                // alert('Something went wrong');
            }
        }
    });
}

$(document).on('click', '.f_status', function() {
    var checkedLength = $('.f_status:checked').length;
    formAjaxList('', '', 'list');
});
$(document).on('click', '.f_sort', function() {
    var radioChecked = $('.f_sort:checked').length;
    formAjaxList('', '', 'list');

});

$(document).on('click', '.pagination a', function(e) {
    e.preventDefault();
    var page = $(this).attr('href').split('page=')[1];
    formAjaxList('', '', 'list', page);
    $('body').mCustomScrollbar();
});

function updateSelectedValue(input) {
    var selectedValues = [];
    var selectedCheckboxes = document.querySelectorAll('.f_status:checked');
    //var selectedRadio = document.querySelector('.f_sort:checked');
    //console.log(selectedCheckboxes);
    selectedCheckboxes.forEach(function(checkbox) {
        var label = checkbox.parentElement.querySelector('span');
        selectedValues.push(label.textContent);
    });

    // if (selectedRadio) {
    //     selectedValues.push(selectedRadio.nextElementSibling.textContent);
    // }

    var selectedFiltersElement = document.querySelector('.selected-filters');
    selectedFiltersElement.innerHTML = '';

    selectedValues.forEach(function(value) {
        var filterItem = document.createElement('span');
        filterItem.className = 'filter-item';
        filterItem.innerHTML = value + '<span class="f-close" onclick="removeFilter(this)">&times;</span>';
        var checkboxId = value === 'Need to Action' ? 'f_status1' : 'f_status2';
        filterItem.setAttribute('data-checkbox-id', checkboxId);
        selectedFiltersElement.appendChild(filterItem);
    });

    if (selectedValues.length > 0) {
        selectedFiltersElement.classList.add('active-filter');
    } else {
        selectedFiltersElement.classList.remove('active-filter');
    }
}

function removeFilter(closeIcon) {
    var filterItem = closeIcon.parentElement;
    // alert(filterItem);
    var checkboxId = filterItem.getAttribute('data-checkbox-id');
    var checkbox = document.getElementById(checkboxId);
    checkbox.checked = false;
    formAjaxList('', '', 'list');
    filterItem.remove();
    updateSelectedValue();
}
</script>
@endpush('scripts')