@push('styles')
    <button id="kt_quick_actions_toggle" style="display: none;"></button>
    <style>
        .offcanvas {
            left: -500px;
            width: 500px;
        }
        .offcanvas-content {
            height: calc(100vh - 260px)!important;
        }
    </style>
    <link href="{{ asset('recorder/AVRecorder/av-recorder.css') }}" rel="stylesheet">
    <link href="{{ asset('recorder/AVRecorder/loader.css') }}" rel="stylesheet">
@endpush
@push('modals')
    <div id="kt_quick_actions" class="offcanvas offcanvas-left p-10">
        <div class="offcanvas-header d-flex align-items-center justify-content-between pb-10">
            <h3 class="font-weight-bold m-0">
                Percakapan <br>
                <small class="text-muted font-size-sm">Percakapan langsung guru dan siswa</small>
            </h3>
            <a href="#" class="btn btn-xs btn-icon btn-light btn-hover-primary" id="kt_quick_actions_close">
                <i class="ki ki-close icon-xs text-muted"></i>
            </a>
        </div>

        <div class="offcanvas-content pr-5 mr-n5" id="body_percakapan">
            <table class="table table-borderless mb-3" id="list_percakapan">
                <tr>
                    <td><h1 class="text-center"><i class="fa fa-spinner fa-spin fa-3x"></i></h1></td>
                </tr>
            </table>
        </div>
        <div class="offcanvas-footer">
            <div class="separator separator-dashed mb-3"></div>
            <textarea class="form-control border-0 p-0" rows="4" placeholder="Ketik Pesan" id="konten"></textarea>
            <div class="d-flex align-items-end mt-2">
                <button onclick="rekam_suara()" type="button" class="btn btn-success btn-md text-uppercase font-weight-bold chat-send py-2 px-6">Rekam Suara</button>
                <button onclick="simpan_percakapan()" type="button" class="btn btn-primary btn-md text-uppercase font-weight-bold chat-send py-2 px-6 ml-auto">Kirim</button>
            </div>
            <button id="buttonToBottom" onclick="scroll_to_bottom()" class="btn btn-icon btn-primary" style="position: absolute; bottom: 160px; left: 40px;display: none;"><i class="la la-arrow-down"></i></button>
        </div>
    </div>

    <div class="modal fade" id="rekam_suara" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modal_tampilkan_peserta_judul">Rekam Suara</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i aria-hidden="true" class="ki ki-close"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div data-scroll="true" data-height="600">
                        <input type="hidden" id="token" value="{{ csrf_token() }}">
                        <input type="hidden" id="private_id" value="">
                        <input type="hidden" id="user_id" value="{{ \Illuminate\Support\Facades\Auth::user()->id }}">
                        <div id="avRecorder-fallback-ajax-wrapper"></div>
                        <div id="avRecorder" class=""></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endpush
@push('scripts')
    <script src="{{ asset('recorder/recorderJs/recorder.js') }}"></script>
    <script src="{{ asset('recorder/AVRecorder/av-recorder-api.js') }}"></script>
    <script src="{{ asset('recorder/AVRecorder/av-recorder-html5.js') }}"></script>
    <script src="{{ asset('recorder/AVRecorder/av-recorder.js') }}"></script>
    <script>
        function rekam_suara() {
            $('#rekam_suara').modal('show');
            $('.av-recorder-enable').trigger('click');
        }

        var audio = true;
        var video = false;
        $(document).ready(function(){
            createRecorder();

            var browserUserAgent = navigator.userAgent;
            if(browserUserAgent.includes("Safari") == true && browserUserAgent.includes("Chrome") == false){
                $("#audioVideoControl option")[1].remove();
            }else if(browserUserAgent.includes("Edge") == true || browserUserAgent.includes("MSIE ") == true || browserUserAgent.includes("Trident") == true){
                $("#audioVideoControl option")[1].remove();
            }

            $("#audioVideoControl").change(function(){
                if($(this).val() == 1){
                    audio = true;
                    video = false;
                    window.location = "demo.php?recorderType=audio";
                }else if($(this).val() == 2){
                    audio = true;
                    video = true;
                    window.location = "demo.php?recorderType=video";
                }
            });

            $("#avRecorder").bind('uploadFinished', function (event, data) {
                console.log("uploadFinished");
            });
        });

        function createRecorder(){
            $("#avRecorder").AvRecorder('avRecorder',{
                constraints: {
                    audio: audio,
                    video: video,
                    video_resolution: "320"
                },
                file: null,
                time_limit: "1800",
                server_upload_endpoint: "{{ route('percakapan.save_rekaman') }}" //Will be appended to the window.orign that the request is coming from.
            });
        };
    </script>
    <script>
        let $list_percakapan = $('#list_percakapan');
        let listPercakapanData = [], firstLoad = true, private_id = '', last_private_id = null;
        function simpan_percakapan() {
            let konten = $('#konten').val();
            if (konten !== '') {
                $.post("{{ route('percakapan.save') }}", {
                    _token: '{{ csrf_token() }}',
                    user_id: '{{ \Illuminate\Support\Facades\Auth::user()->id }}',
                    tanggal: '{{ date('Y-m-d') }}',
                    konten: konten,
                    private_id: private_id
                }, function (result) {
                    $('#konten').val('');
                    //info_percakapan(result.id);
                }).fail(function (xhr) {
                    console.log(xhr.responseText);
                });
            } else {
                alert('Isi Pesan !');
            }
        }
        function info_percakapan(id) {
            $.post("{{ route('percakapan.info') }}", {
                _token: '{{ csrf_token() }}',
                id: id
            }, function (result) {
  console.log(dataTempZZZ);              $list_percakapan.append(result);
            });
        }
        function search_percakapan() {
            $.post("{{ route('percakapan.search') }}", {
                _token: '{{ csrf_token() }}',
                tanggal: '{{ date('Y-m-d') }}',
                private_id: private_id,
                ajax: (firstLoad === true ? '' : 'true')
            }, function (result) {
                if (firstLoad === true) {
                    firstLoad = false;
                    $list_percakapan.html(result);
                    scroll_to_bottom();
                } else {
                    if (result.length > listPercakapanData.length) {
                        for (i = listPercakapanData.length; i < result.length; i++) {
                            listPercakapanData.push(result[i].id);
                            info_percakapan(result[i].id);
                        }
                        $('#buttonToBottom').show();
                    }
                }
                if (listPercakapanData.length < 5) {
                    $('#body_percakapan').scrollTop(0);
                }
                setTimeout(function(){ search_percakapan() }, 1000);
            }).fail(function (xhr) {
                console.log(xhr.responseText);
                search_percakapan();
            });
        }
        function scroll_to_bottom() {
            $('#body_percakapan').scrollTop($('#body_percakapan')[0].scrollHeight);
            $('#buttonToBottom').hide();
        }
        search_percakapan();


        function pesanPribadi(userId) {
            if (private_id === '' || private_id !== userId) {
                private_id = userId;
                firstLoad = true;
                $('#private_id').val(private_id);
            }

            $('#kt_quick_actions_toggle').trigger('click');
        }
        function pesanSemua() {
            if (private_id !== '') {
                private_id = '';
                firstLoad = true;
                $('#private_id').val(private_id);
            }

            $('#kt_quick_actions_toggle').trigger('click');
        }
    </script>
@endpush