@extends('layout.admin.main')
@push('css')
<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="/plugins/bootstrap-3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
<script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
@endpush

@section('content')

    <div class="col-md-12 col-md-offset-0">
        <div class="panel panel-default">


            <div class="table-container"  id="listEmail">
                <table class="table table-filter">

                    <tr v-show="items.length>0" data-status="pagado" v-for="item in items">
                        <td>
                            <div class="ckbox">
                                <input type="checkbox" id="checkbox1">
                                <label for="checkbox1"></label>
                            </div>
                        </td>
                        <td>
                            <a href="javascript:;" class="star">
                                <i class="glyphicon glyphicon-star"></i>
                            </a>
                        </td>
                        <td>
                            <div class="media">
                                <div class="pull-left">@{{ item.user_id }}</div>
                                <div class="media-body">
                                    <p class="summary">@{{ item.content }}</p>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr v-show="items.length==0">
                        <td colspan="3">
                            Không có email nào
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="box col-sm-12">
            <div class="header" >
                Thư Mới
            </div>

        </div>
    </div>
    <script type="text/javascript">

        var listEmail=new Vue({
            el:'#listEmail',
            data:{
                items:[],
                hasItem:false
            },
            created:function(){

            }
        });
        var socket = io.connect('{{env('NODE_SERVER')}}');
        socket.on('message', function (data) {
            console.log(data);
            listEmail.items.unshift(data);

        });

    </script>
    @endsection

{{-- [#41217] Khối tài nguyên dưới đây vốn nằm NGOÀI mọi @push nhưng lại được đóng bằng @endpush ở
     cuối khối, nên Blade ném "Cannot end a push stack without first starting one" và màn
     /admin/list_message trả HTTP 500. Thêm @push('css') cho đúng cặp — giữ nguyên tài nguyên
     (font + chat.css + reset) vì layout admin nạp chúng qua stack 'css'. --}}
@push('css')
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="/css/chat.css?v={{config("sns-line.version")}}">
<script src="https://use.typekit.net/hoy3lrg.js"></script>
<script>
    try{Typekit.load({ async: true });}catch(e){}</script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css'>
<style class="cp-pen-styles">

</style>
@endpush
@section('content')


    <section>

        <div id="frame">
            <div id="sidepanel">
                <div id="profile">
                    <div class="wrap">
                        <img id="profile-img" src="http://emilcarlsson.se/assets/mikeross.png" class="online" alt="" />
                        <p>Mike Ross</p>
                        <i class="fa fa-chevron-down expand-button" aria-hidden="true"></i>
                        <div id="status-options">
                            <ul>
                                <li id="status-online" class="active"><span class="status-circle"></span> <p>Online</p></li>
                                <li id="status-away"><span class="status-circle"></span> <p>Away</p></li>
                                <li id="status-busy"><span class="status-circle"></span> <p>Busy</p></li>
                                <li id="status-offline"><span class="status-circle"></span> <p>Offline</p></li>
                            </ul>
                        </div>
                        <div id="expanded">
                            <label for="twitter"><i class="fa fa-facebook fa-fw" aria-hidden="true"></i></label>
                            <input name="twitter" type="text" value="mikeross" />
                            <label for="twitter"><i class="fa fa-twitter fa-fw" aria-hidden="true"></i></label>
                            <input name="twitter" type="text" value="ross81" />
                            <label for="twitter"><i class="fa fa-instagram fa-fw" aria-hidden="true"></i></label>
                            <input name="twitter" type="text" value="mike.ross" />
                        </div>
                    </div>
                </div>
                <div id="search">
                    <label for=""><i class="fa fa-search" aria-hidden="true"></i></label>
                    <input type="text" placeholder="Search contacts..." />
                </div>
                <div id="contacts">
                    <ul>
                        <li class="contact" v-for="item in listFriend" v-on:click="getHistory(item.line_user_id)">
                            <div class="wrap">
                                <span class="contact-status online"></span>
                                <img :src="(item.avatar_url!='')?(item.avatar_url):'/images/blank_avatar.png'" />
                                <div class="meta">
                                    <p class="name">@{{ item.name }}</p>
                                    {{--<p>@{{ item.id }}</p>--}}
                                    <p class="preview">You just got LITT up, Mike.</p>
                                </div>
                            </div>
                        </li>

                    </ul>
                </div>
                <div id="bottom-bar">
                    <button id="addcontact"><i class="fa fa-user-plus fa-fw" aria-hidden="true"></i> <span>Add contact</span></button>
                    <button id="settings"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> <span>Settings</span></button>
                </div>
            </div>
            <div class="content">
                <div class="contact-profile">
                    <img src="http://emilcarlsson.se/assets/harveyspecter.png" alt="" />
                    <p>Harvey Specter</p>
                    <div class="social-media">
                        <i class="fa fa-facebook" aria-hidden="true"></i>
                        <i class="fa fa-twitter" aria-hidden="true"></i>
                        <i class="fa fa-instagram" aria-hidden="true"></i>
                    </div>
                </div>
                <div class="messages">
                    <ul>

                        <li v-for="item in items" :class="(item.from=={{\Illuminate\Support\Facades\Session::get('current_bot_id')}})?'sent':'replies'">
                            <img src="http://emilcarlsson.se/assets/mikeross.png" alt="" />
                            <p>@{{ item.messages_content }}</p>
                        </li>

                    </ul>
                </div>
                <div class="message-input">
                    <div class="wrap">
                        <input type="text" placeholder="Write your message..." name="message"/>
                        <i class="fa fa-paperclip attachment" aria-hidden="true"></i>
                        <button class="submit" v-on:click="sendForm"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
                    </div>
                </div>
            </div>
        </div>

    </section>
    <script type="text/javascript">
        var my_id=