@extends('back.layouts.main')
@section('title','Messenger')
@section('content-header')
    <div class="content-header">

    </div>
@endsection
@section('content')
    <section class="content container-fluid">
        <form action="{{ route('message.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('post')
            <fieldset class="content-group">
                <div class="row">
                    <div class="col-md-2">
                        <div class="card card-info numbers">
                            <div class="card-header with-border text-bold">Numbers</div>
                            <div class="card-body" style="padding: 0px;overflow: auto;height: 80vh;">
                                <div class="list-group">
                                    <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
                                    <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
                                    <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
                                    <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
                                    <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
                                    <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
                                    <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
                                    <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
                                    <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
                                    <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
                                    <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
                                    <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
                                    <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-7">
                        <div class="card direct-chat direct-chat-primary">
                            <div class="card-header ui-sortable-handle" style="cursor: move;">
                                <h3 class="card-title font-weight-bold">Direct Chat</h3>
                                <div class="card-tools">
                                    <span title="3 New Messages" class="badge badge-primary">3</span>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="direct-chat-messages">
                                    <div class="direct-chat-msg">
                                        <i class="direct-chat-img fas fa-user-circle fa-3x"></i>
                                        <div class="direct-chat-text">
                                            Is this template really for free? That's unbelievable!
                                        </div>
                                        <br>
                                        <div class="direct-chat-infos clearfix" style="margin-top: -14px;">
                                            <span class="direct-chat-name float-left">Alexander Pierce</span>
                                            <span class="direct-chat-timestamp float-left ml-3"><badge class="badge badge-warning">23 Jan 2:00 pm</badge></span>
                                        </div>
                                    </div>
                                    <div class="direct-chat-msg right">
                                        <i class="direct-chat-img fas fa-user-circle fa-3x text-primary"></i>
                                        <div class="direct-chat-text">
                                            You better believe it!
                                        </div>
                                        <br>
                                        <br>
                                        <div class="direct-chat-infos clearfix">
                                            <span class="direct-chat-timestamp float-right ml-3"><badge class="badge badge-warning">23 Jan 2:00 pm</badge></span>
                                            <span class="direct-chat-name float-right">Sarah Bullock</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <form action="#" method="post">
                                    <div class="input-group">
                                        <span class="input-group-append">
                                            <input type="file" name="image">
                                        </span>
                                        <input type="text" name="message" placeholder="Type Message ..." class="form-control">
                                        <span class="input-group-append">
                                            <button type="button" class="btn btn-primary">Send <i class="fa fa-paper-plane"></i></button>
                                        </span>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card card-success">
                            <div class="card-header with-border"><h3 class="card-title">Send New Message</h3></div>
                            <div class="card-body">
                                <div class="form-group">
                                    <label class="control-label">To<span class="text-danger"> *</span></label>
                                    <input type="text" name="to" class="form-control"/>
                                </div>
                                <div class="form-group">
                                    <label class="control-label">Message<span class="text-danger"> </span></label>
                                    <textarea name="message" class="form-control"></textarea>
                                </div>
                                <div class="form-group">
                                    <label class="control-label">Image<span class="text-danger"> </span></label>
                                    <input type="file" name="image" class="form-control">
                                </div>
                                <button type="submit" name="save" class="btn btn-success btn-block">Send <i class="fa fa-paper-plane"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>
        </form>
    </section>
@endsection