@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-md-6">
			<h1 class="h3">{{ translate('CMS Blocks') }}</h1>
        </div>
		<div class="col-md-6 text-md-right">
		<a href="javascript:void(0);" data-href="{{ route('blocks.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 CMS Block</a>

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

<div class="admin-list-table pt-0">
	<div class="d-flex align-items-center py-3 tableTab-freeze">
		<div class="common-tbl-head m-0">

			<div class="selected-prod">Selected Block (<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 form-control-sm searching" id="search" name="search"
                @isset($sort_search) value="{{ $sort_search }}" @endisset placeholder="Search">
		</div>
	</div>
</div>

<div class="admin-table">
    <div class="table-responsive" id ="pageList"><div class="admin-table table-freezed" id="brandsData">
        <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 BLOCK MODAL ==============================================--->

    <div class="modal right fade assign-modal block-info"  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 Block Information</h4>
                </div>
                <div class="modal-body pt-1" id="listedHtmlEdited" style="padding: 0px 16px 16px 16px;">
                    @include('backend.utm.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">Save</button>
                </div>
            </div>
        </div>
    </div>

    <!--========================= EDIT PAGE MODAL ==============================================--->
    <div class="modal right fade assign-modal block-info"  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 Block 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">

//////////////// ADD BLOCK MODAL ///////////////////////////////
$(document).ready(function() {
    var url = "{{ route('blocks.list') }}";
    var data = "";
    pageList(url, data);

    $(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();
            }
        });

        return false;
    });

    ////////////////  EDIT BLOCK 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;
    });

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

    ////////////////// ADD BLOCK FORM SUBMITTED /////////////////////////////////////

    $('#addForm').click(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,
            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', 'Block created successfully');
                    modal.modal('hide');
                    var url = "{{ route('blocks.list') }}";
                    var data = ""
                    pageList(url, data);
                }
            },
        });
    });


    ////////////////// EDIT BLOCK FORM SUBMITTED /////////////////////////////////////

    $('#updateForm').click(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', 'Block updated successfully');
                    modal.modal('hide');
                    var url = "{{ route('blocks.list') }}";
                    var data = ""
                    pageList(url, data);
                }
            },
        });
    });

    //////////////////////// PAGINATION //////////////////////////////////////////////

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

    $(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();

    });

    //////////////// CLICK ON DELETE 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', 'Block Not Deleted');

                    } else {
                        AIZ.plugins.notify('success', 'Block Deleted successfully');
                    }
                    loadStoredPagination();  
                      location.reload();
                    // var data = "";
                    // var url = "{{ route('blocks.list') }}";
                    // pageList(url,data);
                }
            });
        });
    });

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

    ////////////////////////////////// MULTIPLE CHECKBOX SELECTED IN CMS BLOCK ///////////////////////////////////////////

    $(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");
        } else {
            $("#deletedData").css("display", "none");
        }
        $(".product_checkbox").prop("checked", this.checked);
        $("#select_count").html($("input.product_checkbox:checked").length + " Selected");
    });

    $(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 products = [];
        var deleteModal = $('#delete-modal');
        $(".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/blocks/deleteMultipleBlock') }}",
                    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");
                        if (emp_ids.length > 0) {
                            AIZ.plugins.notify('success', 'Blocks Deleted successfully');
                        } else {
                            AIZ.plugins.notify('warning', 'Block Not Deleted');
                        }
                        $('#delete-modal').modal('hide');
                        $("#deletedData").hide();
                        var data = "";
                        var url = "{{ route('blocks.list') }}";
                        pageList(url,data);
                    }
                });
            });
        }
    });


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

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

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

    ////////////////////// 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 url = "{{ route('blocks.list') }}";
        $.ajax({
            type: 'GET',
            url: url,
            data: { 'name': searchTerm },
            success: function(response) {
                $("#pageList").html(response);
            }

        });
    }


    /* $("#search").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#searchPage tr").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    }); */
});

</script>
@endsection