@extends('layouts.admin.app')

@section('content')


    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <section class="content-header">
                <h1>
                    Konsultasi
                    {{-- <small>Control panel</small> --}}
                </h1>
                <ol class="breadcrumb">
                    <li><a href="#"><i class="fa fa-folder"></i> Konsultasi</a></li>
                    <li class="active">Daftar Konsultasi</li>
                </ol>
            </section>

            <!-- Main content -->
            <section class="content">
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">Belum approved</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body no-padding">

                        <div class="col-lg-12">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search.." ria-label="Recipient's username"
                                aria-describedby="button-addon2" id="search">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button" id="refresh"><i class="fa fa-refresh"
                                        aria-hidden="true"></i></button>
                                </span>
                            </div><!-- /input-group -->
                        </div><!-- /.col-lg-6 -->
                    </div>

                    <section class="todo">

                        @include('admins.Konsultasi.load-todo-approved')

                    </section>
                </div>
                <!-- /.box-body -->
    </div>

    </section>
    <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->



@endsection
@section('footer')
    <script>
        let search = ''

        $(document).ready(function() {
            // ajax setup form csrf token
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            Pusher.logToConsole = true;

            var pusher = new Pusher('cf41b2c9effee3d8c5c9', {
                cluster: 'ap1'
            });

            var channel = pusher.subscribe('my-channel-todoIn');
            channel.bind('my-todoIn', function(data) {
                if (data.status == 'Konsultasi') {
                    loadKonsul();
                }
            });

            var channel = pusher.subscribe('my-channel');
            channel.bind('my-event', function(data) {
                if (data.status == 'Approved') {
                    loadKonsul();
                }
            });

            function delay(callback, ms) {
                var timer = 0;
                return function() {
                    var context = this,
                        args = arguments;
                    clearTimeout(timer);
                    timer = setTimeout(function() {
                        callback.apply(context, args);
                    }, ms || 0);
                };
            }

            $('#search').keyup(delay(function(e) {
                search = this.value;
                $.ajax({
                    url: '/Konsultasis?search=' + this.value
                }).done(function(data) {
                    $('.todo').html(data);
                }).fail(function() {
                    console.log("Failed to load data!");
                });
            }, 500));

            $('#refresh').on('click', function() {
                loadKonsul();
            });

            function loadKonsul() {
                $.ajax({
                    url: '/Konsultasis'
                }).done(function(data) {
                    $('.todo').html(data);
                }).fail(function() {
                    console.log("Failed to load data!");
                });
            }
        });

        $(function() {
            $('body').on('click', '.pagination a', function(e) {
                e.preventDefault();
                $('#load').append(
                    '<img style="position: absolute; left: 0; top: 0; z-index: 10000;" src="https://i.imgur.com/v3KWF05.gif />'
                );

                let url = $(this).attr('href');
                if (search != null && search != '') {
                    url = url + `&search=` + search
                }
                window.history.pushState("", "", url);
                loadBooks(url);
            });

            function loadBooks(url) {
                $.ajax({
                    url: url
                }).done(function(data) {
                    $('.todo').html(data);
                }).fail(function() {
                    console.log("Failed to load data!");
                });
            }
        });
    </script>
@stop