@model User
@inject IHttpContextAccessor HttpContextAccessor
@inject IDataContextFactory<SeniorDataContext> dbFactory
@using LinqToDB;

@{
    ViewBag.Title = "Chat";
    var session = HttpContextAccessor.HttpContext.Session;
    var username = session.GetString("username");
    var db = dbFactory.Create();
    var MaxMessages = 20;
    var messages = (from m in db.Messages
                    where (m.Username.Equals(Model.Username) && m.Receiver.Equals(username))
                        ||(m.Receiver.Equals(Model.Username) && m.Username.Equals(username))
                    orderby m.Time ascending
                    select m).Take(MaxMessages).ToArray();
}

<div class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary direct-chat direct-chat-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Messaggi con @Model.Name @Model.LastName</h3>
                </div>
                <div class="box-body">
                    <!-- Conversations are loaded here -->
                    <div class="direct-chat-messages">
                        @if (messages.Count() == 0)
                        {
                            <p class="text-red">Non hai messaggi</p>
                        }
                        else
                        {
                            foreach (var message in messages)
                            {
                                if (message.Seen == default && message.Receiver.Equals(username))
                                {
                                    message.Seen = DateTime.Now;
                                    db.Update(message);
                                }
                            <div>
                                @if (message.Receiver.Equals(username))
                                {
                                    <!-- Message. Default to the left -->
                                    <div class="row">
                                        <div class="pull-left direct-chat-msg col-md-6">
                                            <div class="direct-chat-info clearfix">
                                                <span class="direct-chat-name pull-left">@Model.LastName</span>
                                                <span class="direct-chat-timestamp pull-right">@message.Time</span>
                                            </div>
                                            <!-- /.direct-chat-info -->
                                            <img class="direct-chat-img" src="@Model.Avatar" alt="User image">
                                            <div class="direct-chat-text">
                                                @message.Body
                                            </div>
                                            <!-- /.direct-chat-text -->
                                        </div>
                                    </div>
                                }
                                else
                                {
                                    <!-- Message to the right -->
                                    <div class="row">
                                        <div class="pull-right direct-chat-msg right col-md-6">
                                            <div class="direct-chat-info clearfix">
                                                <span class="direct-chat-name pull-right">Tu</span>
                                                <span class="direct-chat-timestamp pull-left">@message.Time</span>
                                            </div>
                                            <!-- /.direct-chat-info and text -->
                                            <img class="direct-chat-img" src="@session.GetString("avatar")" alt="User image">
                                            <div class="direct-chat-text">
                                                @message.Body
                                            </div>
                                        </div>
                                    </div>
                                }
                            </div>
                            }
                        }
                    </div>
                </div>
                <!-- /.box-body -->
                <div class="box-footer">
                    <form action="#" method="post">
                        <div class="input-group">
                            <input type="text"id="res-message" name="message" placeholder="Scrivi un messaggio..." class="form-control">
                            <span class="input-group-btn">
                                <button type="submit" id="btn-send-message" class="btn btn-primary btn-flat">Spedisci</button>
                            </span>
                        </div>
                        <p id="message-error" class="text-red"></p>
                    </form>
                </div>
                <!-- /.box-footer-->
            </div>
            <!--/.direct-chat -->
        </div>
    </div>
    
    <div class="pull-right col-md-4">
        
    </div>
    <script>
        $("#btn-send-message").on("click", function () {
            var min = 10;
            var body = $("#res-message").val().trim();
            var endMessage = $("#message-error");
            if (body.length < min) {
                endMessage.html("Messaggio non valido (minimo " + min + " caratteri)");
                return false;
            }

            $.ajax({
                url: "/Account/_sendMessage",
                type: "POST",
                data: {
                    Receiver: "@Model.Username",
                    Body: body
                },
                success: function (data) {
                    console.log(data);
                    $("#res-message").val("");
                    endMessage.html("Messaggio inviato");
                    window.location.reload();
                }
            });
        });
    </script>
</div>