@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('Restored Specification') }}</h1>
            </div>
            <div class="col-md-6">
                <div style="text-align: right">
                    <div class="table-search ml-auto">
                        <i class="icons icon-search-s" id="memberSearch"></i>
                        <input type="text" class="form-control" id="search" name="search" placeholder="Search">
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div style="margin: 1rem 0px;
                border-top: 1px solid #d2d2d2">
                </div>
            </div>
        </div>
    </div>
    <div class="admin-table table-freezed " id="restore_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>
@endsection

@section('script')
    <script type="text/javascript">
        $(document).ready(function() {
            var data = "";
            var url = "{{ url('admin/attributes/specification/restored-list') }}";
            dataList(data, url);

            function dataList(data, url) {
                $.ajax({
                    url: url,
                    type: 'GET',
                    data: data,
                    success: function(data) {
                        $("#restore_list").html(data);
                    }
                });
            }

            // Searching
            $(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 = "{{ url('admin/attributes/specification/restored-list') }}";
                if (searchTerm) {
                    var data = {
                        'search': searchTerm
                    };
                    dataList(data, url);
                } else {
                    var data = {
                        'search': ''
                    };
                    dataList(data, url);
                }
            }

            //////// Pagination
            $(document).on('click', 'a.page-link', function(event) {
                event.preventDefault();
                var data = ""
                var url = $(this).attr('href');
                dataList(data, url);
            });
        });
    </script>
@endsection