@if($extendViewPath!="")
    @extends($extendViewPath)
@endif

@section("page_css")
@endsection

@section("page_js")
@endsection

@section('page_content')
    <script src="{{asset('backend/libs/datatables/datatables.min.js')}}"></script>
    @if($viewData->enableExport)
        <script src="https://cdn.datatables.net/select/1.2.6/js/dataTables.select.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
        <script src="https://cdn.datatables.net/fixedheader/3.1.8/js/dataTables.fixedHeader.min.js"></script>
    @endif

        <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-sm-9 mb-3">
                            <h4 class="header-title mb-0"></h4>
                        </div>
                        <div class="col-sm-3">
                            <div class="float-right">
                                
                                
                                                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div class="row">
                                                <div class="col-sm-12 d-flex justify-content-center">
                            <div id="export"></div>
                        </div>
                                            </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="adv-table table-responsive dataTables_wrapper dt-bootstrap4 no-footer pb-3">
                                <table class="display table" id="results">
                                    <thead>
                                    <tr>
                                        <th class="text-left" style="max-width:50px;">No</th>
                                                                                                                    </tr>
                                    </thead>

                                    <tfoot>
                                    <tr>
                                        <th class="text-left">No</th>
                                                                                                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script class="init">
        let table = null;
        let columns = [];
        let filterableColumnsBefore = [];
        let filterableColumnsAfter = [];
        let msFilters = [];
        let columnsVisible = [];
        let exportableColumns = [];

        
        $(document).ready(function() {
            window.start = 0;

                        exportableColumns = [];

            table = $("#results").DataTable({
                fixedHeader: {
                    header: true,
                },
                lengthChange: true,
                responsive: true,
                paging      : true,
                processing	: false,
                serverSide	: true,
                autoWidth	: true,
                pagingType  : "full_numbers",
                lengthMenu  : [[10, 25, 50, 100, 500, 1000, 2000, 5000, 8000], [10, 25, 50, 100, 500, 1000, 2000, 5000, 8000]],
                ajax	: {
                    url 	: "{{ $viewData->fetchUrl ?? '' }}",
                    type	: "POST",
                    data 	: function(data) {
                        window.start=data.start;
                        data.submit = "submit";
                        data._token = "{{ csrf_token() }}";
                        data = buildSearchData(data);
                    },
                    error:function () {
                        let errorText=[];
                        let errorData={};
                        errorText.push("Something went wrong. Please refresh the page.");

                        errorData.status="warning";
                        errorData.notify=errorText;

                        showNotifications(errorData);
                    }
                },
                order: [
                                    ],
                columns: [
                                                                            ],
                initComplete: function () {

                    let api = this.api();
                    let headerAdded = false;
                    let columnId = "";

                    if (filterableColumnsBefore.length > 0) {

                        filterableColumnsBefore.forEach(function (columnData, index) {

                            columnId = "custom_before_" + index;
                            setFilters(columnId, columnData, true, headerAdded, false);
                            headerAdded = true;
                        });
                    }

                    api.columns().indexes().flatten().each(function (index){

                        let column = api.column(index);
                        let columnData = columns[index];

                        if($(columnData).length > 0 && columnData.filterable) {

                            columnId = "default_" + index;
                            setFilters(columnId, columnData, false, headerAdded, column);
                            headerAdded = true;
                        }
                    });

                    if (filterableColumnsAfter.length > 0) {

                        filterableColumnsAfter.forEach(function (columnData, index) {

                            columnId = "custom_after_" + index;
                            setFilters(columnId, columnData, true, headerAdded, false);
                            headerAdded = true;
                        });
                    }
                }
            });

            
            setTableRowNumbers();
            setLinkTooltips();
            callOnDraw();
        });

        function buildSearchData(data) {

            if (filterableColumnsBefore.length > 0) {

                filterableColumnsBefore.forEach(function (columnData) {

                    let columnName = columnData.column;
                    data["custom_" + columnName] = $("input[name='custom_" + columnName + "']").val();
                });
            }

            if (filterableColumnsAfter.length > 0) {

                filterableColumnsAfter.forEach(function (columnData) {

                    let columnName = columnData.column;
                    data["custom_" + columnName] = $("input[name='custom_" + columnName + "']").val();
                });
            }

            return data;
        }

        function callOnDraw() {
            let callBack = "onDrawCallBack";
            let callBackArgs = "";
            let table = $('#results').DataTable();

            table.on('draw.dt order.dt search.dt', function () {

                if (typeof window[callBack] === 'function') {

                    window[callBack].apply(undefined, callBackArgs.split(","))
                }
            });
        }

        function onDrawCallBack() {
            if ($('.selectpicker') && $('.selectpicker').length > 0) {
                $('.selectpicker').selectpicker('show');
            }
        }

        function setTableRowNumbers() {
            let table = $('#results').DataTable();

            table.on('draw.dt order.dt search.dt', function () {
                table.column(0, {search: 'applied', order: 'applied'}).nodes().each(function (cell, i) {

                    i = i + window.start;

                    if (i + 1 < 10) {
                        cell.innerHTML = "0" + (i + 1);
                    } else {
                        cell.innerHTML = i + 1;
                    }
                });
            });
        }

        function setLinkTooltips() {
            let table = $('#results').DataTable();

            table.on('draw.dt', function () {

                //set tooltip
                $("table#results").find("a").each(function (index, element) {

                    let href = $(this).attr("href");
                    let titleText = "";
                    if (!$(this).attr("title") || !($(this).attr("title") && $(this).attr("title").length > 0)) {
                        titleText = "Go to " + $(this).text();

                        if (href.match("mailto:")) {
                            titleText = "Send an email to " + href.split("mailto:").join("");
                        }

                        $(this).attr("title", titleText);
                    }

                    $(this).attr("data-placement", "top");
                    $(this).attr("data-toggle", "tooltip");
                });

                $("table#results").find("a").tooltip();
            });
        }

        function setFilters(columnId, columnData, isCustom, headerAdded, column) {

            let columnName = columnData.column;
            if (!headerAdded) {
                let uiTop = '<div class="clearfix"></div><div class="container-fluid" style="padding-left: 2px; padding-right: 2px;"><div class="row"><div class="col-lg-12">';
                uiTop += '<h5>Filter Results</h5>';
                uiTop += '<div class="row filter-bar"></div></div></div></div>';

                $("#results").before(uiTop);
            }

            if (isCustom) {

                $("#results").append('<input type="hidden" name="custom_' + columnName + '" id="custom_' + columnName + '">');
            }

            let label = columnData.label;
            let filterMethod = columnData.filterMethod;
            let filterOptions = columnData.filterOptions;
            let basedColumns = columnData.basedColumns;

            if (filterMethod === "select") {

                let uiText = '<div class="col-lg-3 col-md-3 col-sm-3 filter-by-label">Filter By ' + label + '<br><div class="form-group" id="dt-search-col-' + columnId + '"></div></div>';
                $("#results_wrapper .filter-bar").append(uiText);

                if (typeof filterOptions == 'object') {

                    let select = $('<select class="custom-select form-control"><option value="">Filter By ' + label + '</option></select>').appendTo($("#dt-search-col-" + columnId)).on("change", function () {

                        let val = $(this).val();

                        if (isCustom) {

                            $("custom_" + columnName).val(val);
                            table.draw();
                        } else {
                            column.search(val ? $(this).val() : val, true, false).draw();
                        }
                    });

                    let uiText = "";
                    if (typeof filterOptions == 'object') {
                        $(filterOptions).each(function (index, elem) {

                            uiText += '<option value="' + elem.id + '">' + elem.name + '</option>';
                        });
                    } else {
                        uiText = filterOptions;
                    }

                    select.append(uiText);
                } else {

                    let select = $('<input type="text" class="form-control" placeholder="Filter By ' + label + '">').appendTo($("#dt-search-col-" + columnId));

                    let selectElem = $(select).magicSuggest({
                        allowFreeEntries: false,
                        toggleOnClick: true,
                        maxSelection: 999,
                        resultAsString: true,
                        data: filterOptions,
                        valueField: 'id',
                        dataUrlParams: {"_token": "{{ csrf_token() }}", "limit": "0"},
                        maxSelectionRenderer: function () {
                            return "";
                        }
                    });

                    msFilters[columnName] = selectElem;

                    $(selectElem).on('selectionchange', function () {

                        let val = this.getValue();
                        val = val.join(",");

                        if (isCustom) {

                            $("#custom_" + columnName).val(val);
                            table.draw();
                        } else {
                            column.search(val ? val : "", true, false).draw();
                        }
                    });

                    $(selectElem).on('beforeload', function (c) {

                        let params = {};
                        params._token = "{{ csrf_token() }}";
                        params.limit = 0;

                        let idNot = [];
                        let selections = selectElem.getSelection();
                        if ($(selections).length > 0) {
                            $(selections).each(function (index, selection) {

                                idNot.push(selection.id);
                            });
                        }
                        params.idNot = JSON.stringify(idNot);

                        if (basedColumns.length > 0) {

                            $(basedColumns).each(function (index, basedColumn) {

                                let column = basedColumn.column;
                                let param = basedColumn.param;

                                if (msFilters[column]) {

                                    let selections = msFilters[column].getSelection();
                                    let values = [];
                                    if ($(selections).length > 0) {
                                        $(selections).each(function (index, selection) {

                                            values.push(selection.id);
                                        });
                                    }

                                    params[param] = values;
                                }
                            });
                        }

                        selectElem.setDataUrlParams(params);
                    });
                }
            } else if (filterMethod === "date") {

                let format = "yyyy-mm-dd";

                let uiText = '<div class="col-lg-3 col-md-3 col-sm-3 filter-by-label">Filter By ' + label + '<br><div class="form-group" id="dt-search-col-' + columnId + '"></div></div>';
                $("#results_wrapper .filter-bar").append(uiText);

                let date = $('<input type="text" class="custom-select custom-select-sm form-control default-date-picker" data-format="' + format + '" placeholder="Filter By ' + label + '">').appendTo($("#dt-search-col-" + columnId));

                $(date).datepicker({
                    format: format,
                    orientation: 'bottom'
                }).on("blur", function (e) {

                    let val = this.value;

                    if (isCustom) {

                        $("#custom_" + columnName).val(val);
                        table.draw();
                    } else {
                        column.search(val ? val : "", true, false).draw();
                    }
                });
            } else if (filterMethod === "date_after") {
                let format = "yyyy-mm-dd";

                let uiText = '<div class="col-lg-3 col-md-3 col-sm-3 filter-by-label">Filter By ' + label + ' | Date After<br><div class="form-group" id="dt-search-col-' + columnId + '"></div></div>';
                $("#results_wrapper .filter-bar").append(uiText);

                let date = $('<input type="text" class="custom-select custom-select-sm form-control default-date-picker" data-format="' + format + '" placeholder="Filter By ' + label + ' | Date After">').appendTo($("#dt-search-col-" + columnId));

                $(date).datepicker({
                    format: format,
                    orientation: 'bottom'
                }).on("blur", function (e) {

                    let val = {};
                    val.type = "date_after";
                    val.date = this.value;

                    val = JSON.stringify(val);

                    if (isCustom) {

                        $("#custom_" + columnName).val(val);
                        table.draw();
                    } else {
                        column.search(val, true, false).draw();
                    }
                });
            } else if (filterMethod === "date_before") {
                let format = "yyyy-mm-dd";

                let uiText = '<div class="col-lg-3 col-md-3 col-sm-3 filter-by-label">Filter By ' + label + ' | Date Before<br><div class="form-group" id="dt-search-col-' + columnId + '"></div></div>';
                $("#results_wrapper .filter-bar").append(uiText);

                let date = $('<input type="text" class="custom-select custom-select-sm form-control default-date-picker" data-format="' + format + '" placeholder="Filter By ' + label + ' | Date Before">').appendTo($("#dt-search-col-" + columnId));

                $(date).datepicker({
                    format: format,
                    orientation: 'bottom'
                }).on("blur", function (e) {

                    let val = {};
                    val.type = "date_before";
                    val.date = this.value;
                    val = JSON.stringify(val);

                    if (isCustom) {

                        $("#custom_" + columnName).val(val);
                        table.draw();
                    } else {

                        column.search(val, true, false).draw();
                    }
                });
            } else if (filterMethod === "date_between") {

                let uiText = '<div class="col-lg-3 col-md-3 col-sm-3 filter-by-label">Filter By ' + label + ' | Date Between<br><div class="form-group" id="dt-search-col-' + columnId + '"></div></div>';
                $("#results_wrapper .filter-bar").append(uiText);

                let rangeUi = "";
                rangeUi += '<div id="dt-range-col-' + columnId + '" style="background: #fff; cursor: pointer; padding: 10px 10px; border: 1px solid #ced4da; border-radius: 0.25rem; width: 100% ">';
                rangeUi += '<i class="fa fa-calendar"></i>&nbsp;';
                rangeUi += '<span></span> <i class="fa fa-caret-down"></i>';
                rangeUi += '</div>';

                let rangeElem = $(rangeUi).appendTo($("#dt-search-col-" + columnId));

                $(rangeElem).daterangepicker({
                    autoUpdateInput: false,
                    locale: {
                        cancelLabel: 'Clear'
                    },
                    ranges: {
                        'Today': [moment(), moment()],
                        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                        'This Month': [moment().startOf('month'), moment().endOf('month')],
                        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                        'This Year': [moment().startOf('year'), moment().endOf('year')],
                        'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
                    }
                }, function (start, end) {

                    let value = "";
                    if (start._isValid && end._isValid) {

                        let val = {};
                        val.type = "date_between";
                        val.date_from = start.format('YYYY-MM-DD');
                        val.date_till = end.format('YYYY-MM-DD');

                        value = JSON.stringify(val);

                        rangeElem.find("span").html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                    } else {

                        rangeElem.find("span").html("");
                    }

                    if (isCustom) {

                        $("#custom_" + columnName).val(value);
                        table.draw();
                    } else {

                        column.search(value, true, false).draw();
                    }
                }).on('cancel.daterangepicker', function () {

                    rangeElem.find("span").html("");
                    column.search("", true, false).draw();
                });

                if (filterOptions.startDate && filterOptions.endDate) {

                    let startDate = filterOptions.startDate;
                    let endDate = filterOptions.endDate;

                    $(rangeElem).data('daterangepicker').setStartDate(startDate);
                    $(rangeElem).data('daterangepicker').setEndDate(endDate);

                    rangeElem.find("span").html(moment(startDate).format('MMMM D, YYYY') + ' - ' + moment(endDate).format('MMMM D, YYYY'));
                }
            } else if (filterMethod === "text") {

                let uiText = '<div class="col-lg-3 col-md-3 col-sm-3 filter-by-label">Filter By ' + label + '<br><div class="form-group" id="dt-search-col-' + columnId + '"></div></div>';
                $("#results_wrapper .filter-bar").append(uiText);

                $('<input type="text" class="form-control dt-search" placeholder="Filter By ' + label + '" />').appendTo($("#dt-search-col-" + columnId)).on("blur", function () {

                    let val = $(this).val();

                    if (isCustom) {

                        $("#custom_" + columnName).val(val);
                        table.draw();
                    } else {

                        column.search(val, true, false).draw();
                    }
                });
            }
        }

        function trashConfirm(id) {
            showConfirmation('', 'trashRecord', id)
        }

        
        function deleteConfirm(id) {
            showConfirmation('', 'deleteRecord', id)
        }

        
        function restoreConfirm(id) {
            showConfirmation('Are you sure you want to restore this record? Then confirm.', 'restoreRecord', id)
        }

            </script>

@endsection