@if(!empty($data))

<div class="card mb-45">
    <div class="card-header">
        <span class="text-blue text-125">{{ $tableTitle }}</span>
        <div class="card-toolbar align-self-center">
            <a href="#" data-action="toggle" class="card-toolbar-btn text-120"><i class="fa fa-chevron-up"></i></a>
        </div>
    </div>

    <div class="card-body">
        <div class="row">
            <div class="col-12">
                <div class="table-header">
                    <div class="row">
                        <div class="col-12 col-sm-6">
                            <div class="text-left w-auto table-per-page">
                                <label>Show
                                    <select name="" id="per-page-{{ $uid }}" class="custom-select custom-select-sm form-control form-control-sm">
                                        <option value="10">10</option>
                                        <option value="25">25</option>
                                        <option value="50">50</option>
                                        <option value="100">100</option>
                                    </select> entries</label>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 text-right table-tools-col">
                            <div class="card-toolbar dt-buttons btn-group bgc-white-tp2 text-right w-auto">
                                <div class="dropdown">
                                    <a href="#" data-action="settings" data-toggle="dropdown" class="card-toolbar-btn text-blue-m1">
                                    <i class="far fa-eye text-125 text-dark-m2"></i>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right dropdown-caret mr-n3 dropdown-animated">
                                        <div id="columns-{{ $uid }}">
                                            @foreach(json_decode($columns) as $column)
                                                <span class="toggle-columns dropdown-item
                                                {{ ($column->visible) ? 'active' : '' }}
                                                " data-name="{{ $column->field }}">{{ $column->title }}</span>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>

                                <button id="download-csv-{{ $uid }}" class="btn buttons-copy " >
                                    <span>
                                        <i class="fas fa-file-csv text-125 text-purple"></i>

                                        <span class="d-none">CSV</span>
                                    </span>
                                </button>


                                <button  id="download-xlsx-{{ $uid }}"  class="btn buttons-copy" >
                                    <span>
                                        <i class="fas fa-file-excel text-125 text-purple"></i>
                                        <span class="d-none">XLSX</span>
                                    </span>
                                </button>


                                <button id="download-pdf-{{ $uid }}" class="btn buttons-copy" >
                                    <span>
                                        <i class="fas fa-file-pdf text-125 text-purple"></i>
                                        <span class="d-none">PDF</span>
                                    </span>
                                </button>

                                <button id="save-state-{{ $uid }}" class="btn buttons-copy" >
                                    <span>
                                        <i class="fas fa-save text-125 text-purple"></i>
                                        <span class="d-none">Save</span>
                                    </span>
                                </button>

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

                <div class="table-wrapper">
                    <div class="fas fa-spinner fa-spin text-purple-m1 fa-2x mb-3" id="table-spiner-{{ $uid }}"></div>
                    <div  id="table-{{ $uid }}" class="mb-45">
                        <div {{ $attributes->merge(['class' => 'table table-hover text-dark-m2' ]) }} ></div>
                    </div>
                </div>

                <div id="pagination-{{ $uid }}" data-per-page = "{{ $perPage }}" data-page='1' data-sort-field='' data-sort-dir=''>
                    {!! $pagination !!}
                </div>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div>
</div>

@section('scripts')
@parent

<script>
    var table_{{ $uid }} = new Tabulator("#table-{{ $uid }}", {
        data: {!! $data !!},
        layout: "fitColumns",
        layoutColumnsOnNewData: true,
        movableColumns: true,
        columns: {!! $columns !!},
        ajaxSorting:true,
        ajaxRequesting:function(url, params){
            return false;
        },
        dataEdited: function(data) {
            alert("EDITED")
        },
        dataLoading:function(data){
            $('#table-spiner-{{ $uid }}').show();
        },
        dataLoaded:function(data){
            setTimeout(() => {
                $('#table-spiner-{{ $uid }}').fadeOut(300);
            }, 300);
        },
        columnMoved: function(data) {
            $.ajax({
                "url": "{{ route('cms.ajax.datatable.save') }}",
                "dataType": "json",
                "type": "POST",
                "data": {
                    tableUid:'{{ $preparedUid }}',
                    tableData: table_{{ $uid }}.getColumnLayout()
                },
                "success": function(response) {
                    localStorage.setItem('zs_{{ $preparedUid }}', JSON.stringify(response))
                },
                "error": function(response) {
                    return false;
                }
            });
        },
    });

    function fetch_data(page, tableUid, perPage, pagination, sort)
    {
        if(sort == undefined) {
            sort = {};
        }

        $.ajax({
        url:"{{ $route ?? ''}}",
        method: 'POST',
        data: {page: page, perPage: perPage, sort: sort},
        success:function(data)
            {
                result = JSON.parse(data);
                tableUid.setData(result.content);
                pagination.html(result.pagination);
                if(!$.isEmptyObject(sort)) {
                    pagination.attr("data-sort-field", sort.field);
                    pagination.attr("data-sort-dir", sort.dir);
                }
            }
        });
    }

    if (localStorage.getItem('zs_{{ $preparedUid }}') == null) {
        localStorage.setItem('zs_{{ $preparedUid }}', JSON.stringify({!! $columns !!}));
    } else {
        table_{{ $uid }}.setColumnLayout(JSON.parse(localStorage.getItem('zs_{{ $preparedUid }}')));
    }

    $(document).on('click', '#pagination-{{ $uid }} .pagination li', function(event){
        event.preventDefault();
        var url = new URL($(this).find('a').attr('href'));
        var params = new URLSearchParams(url.search);
        var page = params.get('page');
        fetch_data(page, table_{{ $uid }}, $(this).closest('#pagination-{{ $uid }}').attr('data-per-page'), $(this).closest('#pagination-{{ $uid }}'), {field: $(this).closest('#pagination-{{ $uid }}').attr('data-sort-field'), dir: $(this).closest('#pagination-{{ $uid }}').attr('data-sort-dir') });
    });

    $(document).on('click', '#table-{{ $uid }} .tabulator-sortable', function(event){
        event.preventDefault();
        var per_page = $('#pagination-{{ $uid }}').attr('data-per-page');
        fetch_data(1, table_{{ $uid }}, per_page, $('#pagination-{{ $uid }}'), {field: $(this).attr('tabulator-field'), dir: $(this).attr('aria-sort') });
    });


    document.getElementById("download-csv-{{ $uid }}").addEventListener("click", function() {
        table_{{ $uid }}.download("csv", "data.csv");
    });


    document.getElementById("download-xlsx-{{ $uid }}").addEventListener("click", function() {
        table_{{ $uid }}.download("xlsx", "data.xlsx", {
            sheetName: "My Data"
        });
    });

    document.getElementById("download-pdf-{{ $uid }}").addEventListener("click", function() {
        table_{{ $uid }}.download("pdf", "data.pdf", {
            orientation: "portrait", //set page orientation to portrait
            title: "Example Report", //add title to report
        });
    });

    $('#columns-{{ $uid }} span').click(function(){
        var col = $(this).data('name');
        var tableUid = $(this).parent().data('table');
        column = table_{{ $uid }}.getColumn(col);
        column.toggle();

        if(column.isVisible()) {
            $(this).addClass('active');
        } else {
            $(this).removeClass('active');
        }

        $(this).toggleClass('acitve');
        $.ajax({
            "url": "{{ route('cms.ajax.datatable.save') }}",
            "dataType": "json",
            "type": "POST",
            "data": {
                tableUid:'{{ $preparedUid }}',
                tableData: table_{{ $uid }}.getColumnLayout()
            },
            "success": function(response) {
                localStorage.setItem('zs_{{ $preparedUid }}', JSON.stringify(response));
                table_{{ $uid }}.setColumnLayout(JSON.parse(localStorage.getItem('zs_{{ $preparedUid }}')));
            },
            "error": function(response) {
                return false;
            }
        });
    });

    $("#per-page-{{ $uid }}").on('change', function(){
        event.preventDefault();
        var per_page = $(this).val();
        $('#pagination-{{ $uid }}').attr('data-per-page', per_page);
        fetch_data(1, table_{{ $uid }}, per_page, $('#pagination-{{ $uid }}'), {field: $('#pagination-{{ $uid }}').attr('data-sort-field'), dir: $('#pagination-{{ $uid }}').attr('data-sort-dir') });
    });

</script>
@endsection
@endif