@extends('backend.layouts.app')

@section('content')
    <div class="aiz-titlebar text-left mt-2 mb-3">
        <div class="row align-items-center">
            <div class="col-sm-6">
                <h1 class="h3">{{ translate('Pages') }}</h1>
            </div>
            <div class="col-sm-6 text-sm-right">
                <a href="javascript:void(0);" data-href="{{ route('custom-pages.create') }}"
                    class="add-items-btn ml-auto addEditor">
                    <span><i class="icons icon-plus" data-toggle="tooltip" data-placement="top" title="Add"
                            data-original-title="Add"></i></span> Add New Pages</a>

                <!-- <a href="{{ route('custom-pages.create') }}" class="add-items-btn ml-auto "><span><i class="icons icon-plus"></i></span> Add New Pages</a> -->
            </div>
        </div>
    </div>
    <div class="admin-list-table pt-0 mb-4">
        <div class="d-flex align-items-center py-3 tableTab-freeze">
            <div class="common-tbl-head m-0">
                <ul class="contactTableTabs m-0">
                    <li style="white-space: nowrap" class="active"><a href="javascript:void(0);" data-type="">All Pages</a></li>
                    <li style="white-space: nowrap" class=@if (request()->get('tab_type') == 'published') "active" @endif><a href="javascript:void(0);"
                            data-type="published">Published </a></li>
                    <li style="white-space: nowrap" class=@if (request()->get('tab_type') == 'Not Published') "active" @endif><a href="javascript:void(0);"
                            data-type="Not Published">Not Published </a></li>
                </ul>

                <div class="selected-prod">Selected Page (<span id="sProduct">0</span>)</div>
                <div class="delete-select" id="deletedData" style="display:none">
                    <a href="javascript:void(0);" id="delete_records">Delete Selected <i class="icons icon-delete"></i></a></div>
            </div>

            <div class="table-search ml-auto">
                <i class="icons icon-search-s" id="memberSearch"></i>
                <input type="text" class="form-control" id="search" value="" name="search" placeholder="Search">
                <input type="submit" class="d-none" id="submissions">
            </div>
        </div>
        <div class="admin-table" id="pageList">    <div class="admin-table table-freezed " id="table_list"><div class="loader_main"  style="  position: relative;
    top: 50%;
    left: 40%;
    transform: translate(50%, 50%);
    width: 100px;
    height:50vh;
    text-align: center;">
 <img width="100" src="{{ url('public/assets/img/ZKZg.gif') }}">
        </div>
        </div>
    </div>
@endsection

@section('modal')
    @include('modals.delete_modal')

    <!--========================= ADD PAGE MODAL ==============================================--->

    <div class="modal right fade assign-modal" data-refresh="true" id="addWebPage" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header close-btn" style="padding: 16px 16px 0 16px;">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="" style="border-bottom:1px solid rgba(0,0,0,.1);width:100%;padding:0rem 0 12px 0;font-size:18px;">Add Page Information</h4>
                </div>
                <div class="modal-body pt-1" id="listedHtmlEdited" style="padding: 16px;">
                    @include('backend.website_settings.pages.create')
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="addForm">Add Page</button>
                </div>
            </div>
        </div>
    </div>

    <!--========================= EDIT PAGE MODAL ==============================================--->
    <div class="modal right fade assign-modal" data-refresh="true" id="editWebPage" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header close-btn" style="padding: 16px 16px 0 16px;" >
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="" style="border-bottom:1px solid rgba(0,0,0,.1);width:100%;padding:0rem 0 12px 0;font-size:18px;">Edit Page Information</h4>
                </div>
                <div class="modal-body pt-1" id="listedHtmlEdit" style="padding: 16px;">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="updateForm">Update</button>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('script')
    <script type="text/javascript">

        $(document).ready(function() {
            var url = "{{ url('/admin/website/list') }}";
            var data = "";
            pageList(url, data);

            /////////////// Page List //////////////////////////////////

            function pageList(url, type, search = "") {
                $.ajax({
                    type: 'GET',
                    url: url,
                    data: {
                        'type': type,
                        'search': search
                    },
                    success: function(response) {
                        $("#pageList").html(response);
                    }
                });
            }

            function loadStoredPagination() {
                var storedURL = localStorage.getItem('paginationURL');  
                
                if (storedURL) {
                    $.ajax({
                        url: storedURL,
                        cache: false,
                        success: function(data) { 
                            $("#pageList").html(data); 
                        }
                    });
                }
            } 

            //////////////// Click on Trash Button , Single Record will be deleted //////////////////////////////

            $(document).on('click', '.confirm-delete', function() {
                var url = $(this).data('href');
                var checkThis = $(this);
                var deleteModal = $('#delete-modal');
                deleteModal.modal({
                    backdrop: 'static',
                    keyboard: false
                });

                $('#delete-link').one('click', function(e) {
                    $.ajax({
                        url: url,
                        type: "GET",
                        success: function(obj) {
                            $('#delete-modal').modal('hide');
                            //checkThis.closest('tr').remove();

                            if (obj < 0) {
                                AIZ.plugins.notify('warning', 'Page Not Deleted');

                            } else {
                                AIZ.plugins.notify('success', 'Page Deleted successfully');
                            }
                            loadStoredPagination();  
                            // var data = "";
                            // var url = "{{ url('/admin/website/list') }}";
                            // pageList(url, data);
                        }
                    });
                });
            });

            $('#delete-modal').on('hidden.bs.modal', function () {
                $(this).find('#delete-link').off('click');
            });

            //////////////// ADD PAGE MODAL ///////////////////////////////
            $(document).on('click', '.addEditor', function() {
                $('#addWebPage').modal('show');
                var GetLink = $(this).data('href');
                $.ajax({
                    url: GetLink,
                    type: "GET",
                    success: function(obj) {
                        $("#listedHtmlEdited").html(obj);
                        AIZ.plugins.textEditor();
                        AIZ.plugins.tagify();
                    }
                });

                return false;
            });

            ////////////////// ADD PAGE FORM SUBMITTED /////////////////////////////////////
            $(document).on('click', '#addForm', function(e) {
                e.preventDefault();
                var formData = new FormData($("#addFormData")[0]);
                var action = $("#addFormData").attr('action');
                var modal = $('#addWebPage');

                $.ajax({
                    url: action,
                    type: "POST",
                    data: formData,
                    dataType: "JSON",
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        $("#addFormData .invalid-feedback").remove();
                        if (data.errors) {
                            $.each(data.errors, function(k, val) {
                                var err =
                                    '<span class="invalid-feedback" role="alert" style="display: block;"><p>' +
                                    val + '</p></span>';
                                $("#addFormData input[name=" + k + "]").after(err);
                                $("#addFormData textarea[name=" + k + "]").after(err);
                            });
                        } else {
                            AIZ.plugins.notify('success', 'Page created successfully!!');
                            modal.modal('hide');
                            var url = "{{ url('/admin/website/list') }}";
                            var data = ""
                            pageList(url, data);
                        }
                    },
                });
            });

            ////////////////  EDIT PAGE MODAL ///////////////////////////////
            $(document).on('click', '.openEditor', function() {
                $('#editWebPage').modal('show');
                var GetLink = $(this).data('href');
                $.ajax({
                    url: GetLink,
                    type: "GET",
                    success: function(obj) {
                        $("#listedHtmlEdit").html(obj);
                        AIZ.plugins.textEditor();
                        AIZ.plugins.tagify();
                    }
                });

                return false;
            });

            ////////////////// EDIT PAGE FORM SUBMITTED /////////////////////////////////////
            $(document).on('click', '#updateForm', function(e) {
                e.preventDefault();
                var formData = new FormData($("#updateFormData")[0]);
                var action = $("#updateFormData").attr('action');
                var modal = $('#editWebPage');

                $.ajax({
                    url: action,
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        $("#updateFormData .invalid-feedback").remove();
                        if (data.errors) {
                            $.each(data.errors, function(k, val) {
                                var err =
                                    '<span class="invalid-feedback" role="alert" style="display: block;"><strong>' +
                                    val + '</strong></span>';
                                $("#updateFormData input[name=" + k + "]").after(err);
                                $("#updateFormData textarea[name=" + k + "]").after(
                                    err);
                            });
                        } else {
                            AIZ.plugins.notify('success', 'Page updated successfully!!');
                            modal.modal('hide');
                            var url = "{{ url('/admin/website/list') }}";
                            var data = ""
                            pageList(url, data);
                        }
                    },
                });
            });

            ////////////////////////////////// Multiple checkbox Selected In Pages Module ///////////////////////////////////////////

            // $(document).on('change', "#chk-box", function() {
            //     $(document).find(".checkedoptions input:checkbox").prop('checked', $(this).prop("checked"));
            // });

            $(document).on('click', '#chk-box', function() {
                $("#sProduct").text("0");
                if ($(this).is(":checked")) {
                    $("#deletedData").css("display", "block");
                    $(this).closest('table').find('#searchPage tr').addClass('active');
                } else {
                    $("#deletedData").css("display", "none");
                    $(this).closest('table').find('#searchPage tr').removeClass('active');
                }
                $(".product_checkbox").prop("checked", this.checked);
                $("#select_count").html($("input.product_checkbox:checked").length + " Selected");
            });

            $('.contactTableTabs li').click(function() {
                $('.contactTableTabs li').removeClass('active');
                $(this).addClass('active');
                $("#deletedData").hide();
                $('input[type=checkbox]').prop('checked', false);
                $("#sProduct").text("0");
            });

            $(document).on('click', '.product_checkbox,#chk-box', function() {
                if ($(this).is(':checked')) {
                    $(this).closest('tr').addClass('active');
                }else{
                    $(this).closest('tr').removeClass('active');
                }
                if ($('.product_checkbox:checked').length == $('.product_checkbox').length) {
                    $('#chk-box').prop('checked', true);
                    $("#deletedData").css("display", "block");
                } else {
                    if ($('.product_checkbox:checked').length == "0") {
                        $("#deletedData").css("display", "none");
                    } else {
                        $("#deletedData").css("display", "block");
                    }
                    $('#chk-box').prop('checked', false);
                }
                $("#sProduct").text($("input.product_checkbox:checked").length);
            });

            $(document).on('click', '#delete_records', function() {
                var row = $(this).closest('tr');
                var deleteModal = $('#delete-modal');
                var products = [];
                $(".product_checkbox:checked").each(function() {
                    products.push($(this).data('emp-id'));
                });
                if (products.length <= 0) {
                    alert("Please select records.");
                } else {
                    var selected_values = products.join(",");
                    deleteModal.modal({
                        backdrop: 'static',
                        keyboard: false
                    });

                    $('#delete-link').one('click', function(e) {
                        $.ajax({
                            type: "POST",
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            url: "{{ url('/admin/website/pages/deleteMultiplePages') }}",
                            cache: false,
                            data: 'emp_id=' + selected_values,
                            success: function(response) {
                                var emp_ids = response.split(",");

                                for (var i = 0; i < emp_ids.length; i++) {
                                    $("#" + emp_ids[i]).closest("tr").remove();
                                }
                                $("#sProduct").text("0");
                                $(document).find('#AllMemberTabs li.active a').click();
                                if (emp_ids.length > 0) {
                                    AIZ.plugins.notify('success', 'Pages Deleted successfully');
                                } else {
                                    AIZ.plugins.notify('warning', 'Pages Not Deleted');
                                }
                                $('#delete-modal').modal('hide');
                                $("#deletedData").hide();
                                var data = "";
                                var url = "{{ url('/admin/website/list') }}";
                                pageList(url, data);
                            }
                        });
                    });
                }
            });

            ////////////////// Pages Status Changed/////////////

            $(document).on('change', ".page_status_class", function() {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                if ($(this).is(":checked")) {
                    var SetVal = 'published';
                } else {
                    var SetVal = 'Not published';
                }

                var checkTR = $(this);

                var id = $(this).data('id');
                $(this).val(SetVal);
                $.ajax({
                    type: 'POST',
                    url: "{{ url('/admin/website/pages/status') }}",
                    data: {
                        'value': SetVal,
                        'id': id
                    },
                    success: function(response) {
                        checkTR.closest('tr').find('.publishTxt').text(SetVal);
                        AIZ.plugins.notify('success', 'Page Status Updated Successfully!!');
                    }
                });

            });

            ////////// Meta Status Changed /////////////////////////

            $(document).on('change', ".meta_status", function() {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                if ($(this).is(":checked")) {
                    var SetVal = 'active';
                } else {
                    var SetVal = 'inactive';
                }

                var id = $(this).data('id');
                $(this).val(SetVal);
                $.ajax({
                    type: 'POST',
                    url: "{{ url('/admin/website/pages/meta_status') }}",
                    data: {
                        'value': SetVal,
                        'id': id
                    },
                    success: function(response) {
                        if (response == "2") {
                            AIZ.plugins.notify('success', 'Meta Status Updated Successfully!!');
                        } else {
                            AIZ.plugins.notify('danger', 'Try Again!!');
                        }
                    }
                });
            });

            ////////////////////// Searching functionality //////////////////////////////////

                $(document).on("keypress", "input[name='search']", function(event) {
                    if (event.keyCode == 13) {
                        var searchTerm = $(this).val();
                        memberSearchAjax(searchTerm);
                    }
                });

                $(document).on("click", "#memberSearch", function(event) {
                    var searchTerm = $("input[name='search']").val();
                    memberSearchAjax(searchTerm);
                });

                var typingTimer;
                var doneTypingInterval = 1000;
                function memberSearchAjax(searchTerm) {
                    var tab = $(".contactTableTabs li.active a").data('type');
                    var url = "{{ url('/admin/website/list') }}";
                    if (searchTerm) {
                        var data = {
                            'tab_type': tab,
                            'search': searchTerm
                        };
                        pageList(url, tab, searchTerm);
                    } else {
                        var data = {
                            'tab_type': tab,
                            'search': ''
                        };
                        pageList(url, tab, searchTerm);
                    }
                }


                /* var typingTimer;
                var doneTypingInterval = 500;

                $(document).on("keyup", "input[name='search']", function(e) {
                    clearTimeout(typingTimer);
                    var tab = $(".contactTableTabs li.active a").data('type');
                    var url = "{{ url('/admin/website/list') }}";
                    var searchTerm = $(this).val();

                    if (searchTerm) {
                        typingTimer = setTimeout(function() {

                            pageList(url, tab, searchTerm);
                        }, doneTypingInterval);
                    } else {
                        pageList(url, tab, searchTerm);
                    }
                });  */
 

            $(document).on('click', '.contactTableTabs li a', function() {
                var data = $(this).attr('data-type');

                $(this).parent().addClass('active').siblings().removeClass('active');
                var url = "{{ url('/admin/website/list') }}";
                pageList(url, data);

            });

            //////////////////////// Pagination //////////////////////////////////////////////

            $(document).on('click', 'a.page-link', function(event) {
                event.preventDefault();
                var data = ""
                var url = $(this).attr('href');
                localStorage.setItem('paginationURL', url);
                $.ajax({
                    type: 'GET',
                    url: url,
                    success: function(response) {
                        $("#pageList").html(response);
                    }
                });
                $('#sProduct').text('0');
                $('#deletedData').hide();
                $('#restoreData').hide();
            });
        });
    </script>
@endsection