@extends('template.layout')
@section('styles')
    <link href="{{asset('css/icheck/skins/all.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{asset('css/inbox.min.css')}}" rel="stylesheet" type="text/css"/>
@endsection
@section('content')
    <h1 class="page-title"> Chat
        <small>Mensajes</small>
    </h1>
    <div class="inbox">
        <div class="row">
            <div class="col-md-3">
                <div class="inbox-sidebar">
                    <a href="{{ url('messages/create') }}" data-title="Compose" class="btn red compose-btn btn-block">
                        <i class="fa fa-edit"></i> Enviar mensaje </a>
                    <ul class="inbox-nav">
                        <li class="active">
                            <a href="javascript:;" data-type="inbox" data-title="Inbox"> Todos
                            </a>
                        </li>
                    </ul>
                    <ul class="inbox-contacts">
                        <li class="divider margin-bottom-30"></li>
                        <li>
                            <strong>Últimas conversaciones</strong>
                        </li>
                        <li id="participants">
                            <a href="javascript:;">
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-md-9">

                <div class="inbox-body">
                    <div class="inbox-header">
                        <h1 class="pull-left">Bandeja de entrada</h1>
                        <div class="form-inline pull-right" >
                            <div class="input-group input-medium">
                                <input type="text" class="form-control" name="user" placeholder="Usuario" aria-controls="table-mensajes">
                                <span class="input-group-btn">
                                    <button type="button" id="filter-user" class="btn green">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="inbox-content">
                        @include('messenger.partials.flash')
                        <table id="table-mensajes" class="table table-striped table-advance table-hover">
                            <thead>
                                <tr>
                                    <th>
                                        <span class="pagination-info">Usuario</span>
                                    </th>
                                    <th>
                                        <span class="pagination-info">Último mensaje</span>
                                    </th>
                                    <th>
                                        <span class="pagination-info">Fecha</span>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                            @each('messenger.partials.thread', $threads, 'thread', 'messenger.partials.no-threads')
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        var oTable = $('#table-mensajes').DataTable({
            "sDom": "",
            "language": {
                "sProcessing":     "Procesando...",
                "sLengthMenu":     "Mostrar _MENU_ registros",
                "sZeroRecords":    "No se encontraron resultados",
                "sEmptyTable":     "Ningún dato disponible en esta tabla",
                "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
                "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
                "sInfoPostFix":    "",
                "sSearch":         "Buscar:",
                "sUrl":            "",
                "sInfoThousands":  ",",
                "sLoadingRecords": "Cargando...",
                "oPaginate": {
                    "sFirst":    "Primero",
                    "sLast":     "Último",
                    "sNext":     "Siguiente",
                    "sPrevious": "Anterior"
                },
                "oAria": {
                    "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                    "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                }
            },
            "order": [[ 2, "desc" ]],
            responsive:true
        });
        $('.click-row').on('click',function(){
            window.location = $(this).data("href");
        });

        $('#filter-user').on('click',function(){
            oTable
                .search($('input[name=user]').val())
                .draw();
        });

        $.ajax({
            url: '../messages/update/list',
            method: "GET",
            success: function(data) {
                $.each(data.participants,function(key,value){
                    console.log(value);
                    $('#participants').append('<a href="javascript:;">'+
                        '<span class="contact-name">'+value.user+'</span>'+
                    '</a>')
                });
            }
        });
    </script>
@endsection