@extends('layouts.master')

@section('title', 'Dashboard')

@section('style-plugins')

@endsection

@section('style-custom')
    <style>
        .direct-chat-messages {
            height: 55vh !important;
        }

        .widget-user .widget-user-header {
            text-align: left !important;
            height: 50px !important;
            padding: 0.5rem !important;
            padding-left: 6rem !important;
        }
        .widget-user .widget-user-image {
            top: 10px !important;
        }
        .widget-user .card-footer {
            padding-top: 20px !important;
        }

        .right .direct-chat-text {
            font-size: .75rem !important;
        }
    </style>
@endsection

@section('header', '')

@section('content')
<div class="container-fluid">
    <!-- Widget: user widget style 1 -->
    <div class="card card-widget widget-user">
        <!-- Add the bg color to the header using any of the bg-* classes -->
        <div class="widget-user-header bg-primary">
            <div class="row">
                <div class="col-4 text-center">
                    <h5 class="widget-user-desc" id="pushname">PushName</h5>
                </div>
                <div class="col-4 text-center">
                </div>
                <div class="col-4 text-center">
                    <h5 class="widget-user-desc" id="wa_id">Whatsapp Auto Chat</h5>
                </div>
            </div>
        </div>
        <div class="widget-user-image">
            <img class="img-circle elevation-2" src="{{ asset('dist/img/logomidomidi.png') }}" alt="User Avatar">
        </div>
        <div class="card-footer">
            <div class="row">
                <div class="col-sm-3 border-right">
                    <div class="description-block">
                        <h5 class="description-header" id="state">Connection State</h5>
                    </div>
                    <!-- /.description-block -->
                </div>
                <!-- /.col -->
                <div class="col-sm-3 ">
                    <div class="description-block">
                        <h5 class="description-header" id="batt">Battery Status</h5>
                    </div>
                    <!-- /.description-block -->
                </div>
                <!-- /.col -->
                <div class="col-sm-3 border-right">
                    <div class="description-block">
                        <h5 class="description-header" id="platform">platform + phone.os_version</h5>
                    </div>
                    <!-- /.description-block -->
                </div>
                <!-- /.col -->
                <div class="col-sm-3">
                    <div class="description-block">
                        <h5 class="description-header" id="device_model">phone.device_model</h5>
                    </div>
                    <!-- /.description-block -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
    </div>
    <!-- /.widget-user -->
    <div class="row">
        <div class="col-md-7 col-12">
            <!-- Small boxes (Stat box) -->
            <div class="row">
                <div class="col-lg-4 col-12">
                    <!-- small box -->
                    <div class="small-box bg-info">
                        <div class="inner">
                            <h3 id="partisipan-tahunan"> - </h3>
                            <p>Partisipant</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-android-people"></i>
                        </div>
                        <a href="#" class="small-box-footer">{{ Carbon\Carbon::now()->year }}</i></a>
                    </div>
                </div>
                <!-- ./col -->
                <div class="col-lg-4 col-12">
                    <!-- small box -->
                    <div class="small-box bg-success">
                        <div class="inner">
                            <h3 id="inbox-tahunan"> - </h3>
                            <p>Pesan Masuk</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-email"></i>
                        </div>
                        <a href="#" class="small-box-footer">{{ Carbon\Carbon::now()->year }}</i></a>
                    </div>
                </div>
                <!-- ./col -->
                <div class="col-lg-4 col-12">
                    <!-- small box -->
                    <div class="small-box bg-warning">
                        <div class="inner">
                            <h3 id="sentitems-tahunan"> - </h3>
                            <p>Pesan Terkirim</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-paper-airplane"></i>
                        </div>
                        <a href="#" class="small-box-footer">{{ Carbon\Carbon::now()->year }}</i></a>
                    </div>
                </div>
                <!-- ./col -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-4 col-12">
                    <!-- small box -->
                    <div class="small-box bg-info">
                        <div class="inner">
                            <h3 id="partisipan-bulanan"> - </h3>
                            <p>Partisipant</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-android-people"></i>
                        </div>
                        <a href="#" class="small-box-footer">{{ Carbon\Carbon::now()->monthName }}</i></a>
                    </div>
                </div>
                <!-- ./col -->
                <div class="col-lg-4 col-12">
                    <!-- small box -->
                    <div class="small-box bg-success">
                        <div class="inner">
                            <h3 id="inbox-bulanan"> - </h3>
                            <p>Pesan Masuk</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-email"></i>
                        </div>
                        <a href="#" class="small-box-footer">{{ Carbon\Carbon::now()->monthName }}</i></a>
                    </div>
                </div>
                <!-- ./col -->
                <div class="col-lg-4 col-12">
                    <!-- small box -->
                    <div class="small-box bg-warning">
                        <div class="inner">
                            <h3 id="sentitems-bulanan"> - </h3>
                            <p>Pesan Terkirim</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-paper-airplane"></i>
                        </div>
                        <a href="#" class="small-box-footer">{{ Carbon\Carbon::now()->monthName }}</i></a>
                    </div>
                </div>
                <!-- ./col -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-4 col-12">
                    <!-- small box -->
                    <div class="small-box bg-info">
                        <div class="inner">
                            <h3 id="partisipan-harian"> - </h3>
                            <p>Partisipant</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-android-people"></i>
                        </div>
                        <a href="#" class="small-box-footer">{{ Carbon\Carbon::now()->format('d-m-Y') }}</i></a>
                    </div>
                </div>
                <!-- ./col -->
                <div class="col-lg-4 col-12">
                    <!-- small box -->
                    <div class="small-box bg-success">
                        <div class="inner">
                            <h3 id="inbox-harian"> - </h3>
                            <p>Pesan Masuk</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-email"></i>
                        </div>
                        <a href="#" class="small-box-footer">{{ Carbon\Carbon::now()->format('d-m-Y') }}</i></a>
                    </div>
                </div>
                <!-- ./col -->
                <div class="col-lg-4 col-12">
                    <!-- small box -->
                    <div class="small-box bg-warning">
                        <div class="inner">
                            <h3 id="sentitems-harian"> - </h3>
                            <p>Pesan Terkirim</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-paper-airplane"></i>
                        </div>
                        <a href="#" class="small-box-footer">{{ Carbon\Carbon::now()->format('d-m-Y') }}</i></a>
                    </div>
                </div>
                <!-- ./col -->
            </div>
            <!-- /.row -->
        </div>
        <div class="col-md-5 col-12">
            <!-- DIRECT CHAT SUCCESS -->
            <div class="card card-success card-outline direct-chat direct-chat-success shadow-sm">
                <div class="card-header">
                    <h3 class="card-title">Current Chat</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <!-- Conversations are loaded here -->
                    <div class="direct-chat-messages" id="chat-box">
                        {{-- <div class="direct-chat-msg">
                            <div class="direct-chat-infos clearfix">
                                <span class="direct-chat-name float-left">Alexander Pierce</span>
                                <span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
                            </div>
                            <img class="direct-chat-img" src="{{ asset('/dist/img/user1-128x128.jpg') }}"
                                alt="Message User Image">
                            <div class="direct-chat-text">
                                Is this template really for free? That's unbelievable!
                                <img src="{{ asset('/dist/img/photo2.png') }}" class="img-fluid px-5">
                            </div>
                        </div>

                        <div class="direct-chat-msg right">
                            <div class="direct-chat-infos clearfix">
                                <span class="direct-chat-name float-right">Sarah Bullock</span>
                                <span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
                            </div>
                            <img class="direct-chat-img" src="{{ asset('/dist/img/user3-128x128.jpg') }}"
                                alt="Message User Image">
                            <div class="direct-chat-text">
                                You better believe it!
                            </div>
                        </div> --}}
                    </div>
                </div>
                <!-- /.card-body -->
                {{-- <div class="card-footer">
                    <form action="#" method="post">
                        <div class="input-group">
                            <input type="text" name="message" placeholder="Type Message ..." class="form-control">
                            <span class="input-group-append">
                                <button type="submit" class="btn btn-success">Send</button>
                            </span>
                        </div>
                    </form>
                </div> --}}
                <!-- /.card-footer-->
            </div>
            <!--/.direct-chat -->
        </div>
    </div>
</div>
@endsection

@section('script-plugins')
<script src="{{ asset('plugins/socket.io/client-dist/socket.io.min.js') }}"></script>
<script src="{{ asset('plugins/jquery-dotimeout/jquery.ba-dotimeout.js') }}"></script>
@endsection

@section('script-custom')
<script lang="text/javascript">
    $(function () {
        // var socketIO = io.connect('http://127.0.0.1:8800',{path: '/socket.io'});
        var socketIO = io.connect('https://sock.whatsapp.imisurabaya.id', {
                path: '/socket.io'
            });

        socketIO.on('state', function (msg) {
            console.log(msg);
            //var manufacture = msg.info.phone.device_manufacturer.toUpperCase();
            //var model = msg.info.phone.device_model.toUpperCase();
            //var platform = msg.info.platform.toUpperCase();
            //var osVersion = msg.info.phone.os_version;
            var manufacture = "XIAOMI";
            var model = "XIAOMI";
            var platform = "ANDROID";
            var osVersion = "ANDROID";

            $("#pushname").text(msg.info.pushname);
            $("#wa_id").text(msg.info.me.user);
            $("#state").text(msg.state);
            //$("#batt").text(msg.batt.battery + "%");
            $("#batt").text("89%");
            $("#platform").text(platform + ' ' + osVersion);
            $("#device_model").text(manufacture + ' ' + model);
        });

        socketIO.on('change_state', function (msg) {
            $("#state").text(msg);
        });
        socketIO.on('change_battery', function (msg) {
            $("#batt").text(msg.battery + "%");
        });

        socketIO.on('inbox', function (msg) {
            console.log(msg);
            var inbox = '<div class="direct-chat-msg">';
            inbox += '<div class="direct-chat-infos clearfix">';
            inbox += '<span class="direct-chat-name float-left">' + (msg.formatedContact.pushname?msg.formatedContact.pushname:msg.formatedContact.number) + '</span>';
            inbox += '<span class="direct-chat-timestamp float-right">' + moment(msg.formatedMessage.timestamp * 1000).format("DD-MM-YYYY hh:mm:ss") + '</span>';
            inbox += '</div>';
            inbox += '<img class="direct-chat-img" src="' + msg.formatedContact.profilepicturl + '" alt="N"/>';
            inbox += '<div class="direct-chat-text">';
            if (msg.formatedMessage.hasMedia) {
                inbox += '<img class="img-fluid px-5" src="data:' + msg.formatedMessage.media.mimetype + ';base64,' + msg.formatedMessage.media.data + '"/>'
            }
            inbox += '<br/>';
            inbox += nl2br(msg.formatedMessage.body);
            inbox += '</div>';
            inbox += '</div>';
            $("#chat-box").append(inbox);
            $("#chat-box").scrollTop($("#chat-box")[0].scrollHeight);
        });
        socketIO.on('send', function (msg) {
            console.log(msg);
            var send = '<div class="direct-chat-msg right">';
            send += '<div class="direct-chat-infos clearfix">';
            send += '<span class="direct-chat-name float-right">' + $("#pushname").text() + '</span>';
            send += '<span class="direct-chat-timestamp float-left">' + moment(msg.formatedMessage.timestamp * 1000).format("DD-MM-YYYY hh:mm:ss") + '</span>';
            send += '</div>';
            send += '<img class="direct-chat-img" src="' + "{{ asset('/dist/img/logomidomidi.png') }}" + '"alt="Message User Image">';
            send += '<div class="direct-chat-text">';
            if (msg.formatedMessage.hasMedia) {
                send += '<img class="img-fluid px-5" src="data:' + msg.formatedMessage.media.mimetype + ';base64,' + msg.formatedMessage.media.data + '"/>'
            }
            send += '<br/>';
            send += '@'+(msg.formatedContact.pushname?msg.formatedContact.pushname:msg.formatedContact.number)+'<br/>';
            send += nl2br(msg.formatedMessage.body);
            send += '</div>';
            send += '</div>';
            $("#chat-box").append(send);
            $("#chat-box").scrollTop($("#chat-box")[0].scrollHeight);
        });

        function dataHarian() {
            $.ajax({
                type: "POST",
                url: "{{ url('ajax/data-harian') }}",
                data: {
                    _token: "{{ csrf_token() }}"
                },
                success: function (response) {
                    $("#partisipan-harian").text(response.partisipan);
                    $("#inbox-harian").text(response.inbox);
                    $("#sentitems-harian").text(response.sentitems);
                }
            });
        }
        function dataBulanan() {
            $.ajax({
                type: "POST",
                url: "{{ url('ajax/data-bulanan') }}",
                data: {
                    _token: "{{ csrf_token() }}"
                },
                success: function (response) {
                    $("#partisipan-bulanan").text(response.partisipan);
                    $("#inbox-bulanan").text(response.inbox);
                    $("#sentitems-bulanan").text(response.sentitems);
                }
            });
        }
        function dataTahunan() {
            $.ajax({
                type: "POST",
                url: "{{ url('ajax/data-tahunan') }}",
                data: {
                    _token: "{{ csrf_token() }}"
                },
                success: function (response) {
                    $("#partisipan-tahunan").text(response.partisipan);
                    $("#inbox-tahunan").text(response.inbox);
                    $("#sentitems-tahunan").text(response.sentitems);
                }
            });
        }

        dataHarian();
        dataBulanan();
        dataTahunan();

        $.doTimeout(10000, function () {
            dataHarian();
            dataBulanan();
            dataTahunan();

            return true;
        });
    });
</script>
@endsection