@extends('layouts.Home.app')

@section('content')


    <div class="container">

        <div class="page-section">
            <div class="container">

                <div class="col-md-12">
                    <h2>Daftar Konsultasi</h2>

                    <div class="input-group mb-3">
                        <input type="text" class="form-control" placeholder="Search" aria-label="Recipient's username"
                            aria-describedby="button-addon2" id="search">
                        <div class="input-group-append">
                            <button class="btn btn-outline-success" type="button" id="refresh"><i class="fa fa-refresh"
                                    aria-hidden="true"></i></button>
                        </div>
                    </div>

                    @if (count($results) > 0)
                        <section class="todo">
                            @include('guest.Konsultasi.load_todo_data')
                        </section>
                    @else
                        @include('guest.Konsultasi.load_todo_data')
                    @endif

                    {{-- <h3>List Konsultasi</h3> --}}

                </div>

            </div> <!-- .container -->
        </div>
    </div>
@endsection
@section('footer')
    <script>
        // let my_id = "{{ Auth::user()->id_user }}";
        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');
            channel.bind('my-event', function(data) {
                // console.log('masuk apa ini ? ', data);
                if(data.from == my_id){
                    location.reload();
                }else if(data.id_user_external == my_id && data.status == 'Approved'){
                    location.reload();
                }else if (data.id_user_external== my_id && data.status == 'ProsesPencarian'){
                    location.reload();
                }else if (data.id_user_external== my_id && data.status == 'solusi'){
                    location.reload();
                }else if (data.id_user_external== my_id && data.status == 'AkhirChat'){
                    location.reload();
                }else if (data.id_user_external== my_id && data.status == 'Chat'){
                    location.reload();
                }
            });

            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: '/Konsultasi/List?search='+this.value
                }).done(function(data) {
                    $('.todo').html(data);
                }).fail(function() {
                    console.log("Failed to load data!");
                });
            }, 500));

            $('#refresh').on('click', function () {
                var Status = $(this).val();
                $.ajax({
                    url: '/Konsultasi/List'
                }).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) {
                    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