@extends('layouts.app')
@section('content')
<!-- Header -->
<div class="header bg-gradient-danger pb-8 pt-5 pt-md-6">
   <div class="container-fluid">
      <div class="header-body">
         <div class="row align-items-center py-4">
            <div class="col-lg-6 col-7">
               <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                   <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                     <li class="breadcrumb-item"><a href="{{url('home')}}"><i class="fas fa-home"></i></a></li>
                     <li class="breadcrumb-item"><a href="{{url('orders')}}">Orders</a></li>
                     <li class="breadcrumb-item"><a href="javascript:">Number: {{$order->order_no}}</a></li>
                     <li class="breadcrumb-item active" aria-current="page">Messaging</li>
                  </ol>
               </nav>
            </div>
         </div>
      </div>
   </div>
</div>
<div class="container-fluid mt--7">
<!-- Table -->
<div class="row">
   <div class="col">
      <div class="card shadow">
         <div class="card-header bg-white">
              <div class="row align-items-center">
                <div class="col-12">
                  <h4 class="mb-0">Order Number: {{$order->order_no}} -  Message List <span style="float: right;"><a href="{{url('orders')}}" class="btn btn-danger btn-sm">Back</a></span></h4>
                </div>
              </div>
            </div>
             <div class="table-responsive">

                <ul class="timeline">
                    @foreach($messaging as $row)
                    <li>
                      <div class="timeline-badge danger"><i class="glyphicon glyphicon-credit-card"></i></div>
                      <div class="timeline-panel" @if($row->user_id==1) style="margin-left: 280px;width: 70%;border:1px dotted red;" @endif> 
                        <div class="timeline-heading">
                          <h4 class="timeline-title">{{$row->name}}</h4>
                          <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> {{date('d/m/Y h:ia',strtotime($row->created_at))}}</small></p>
                        </div>
                        <div class="timeline-body">
                          <p>{{$row->user_message}}</p>
                        </div>
                      </div>
                    </li>
                    @endforeach
                </ul>

                 <form name="user_editform" id="user_editform" method="post" action="{{ url('messaging/admin_reply') }}" accept-charset="UTF-8" enctype="multipart/form-data">
                    {{ csrf_field() }} 
                    <input type="hidden" name="user_id" id="user_id" value="{{Request::segment(3)}}">
                    <input type="hidden" name="order_id" id="order_id" value="{{Request::segment(4)}}">
                        <div class="container">
                          <div class="row">
                            <div class="col-sm">
                                <div class="card-body" style="background: #ffffff;">
                                    <div class="row">
                                      <div class="col-lg-11">
                                        <div class="form-group">
                                          <textarea name="message" id="message" rows="3" cols="45" placeholder="Type a message" class="form-control" required></textarea>
                                        </div>
                                      </div>   
                                      <div class="col-lg-1">
                                        <div class="form-group">
                                          <input type="submit" class="btn btn-primary btn-sm send" value="Send">
                                        </div>
                                      </div>   
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>         
                        <style>
                        input { font-size: 13px !important; height: 35px !important; }
                        label { font-size: 13px !important; }
                        select { font-size: 13px !important; height: 40px !important; }
                        .send { margin-top: 20px; }
                        </style>
                  </form>

             </div>
      </div>
   </div>
</div>
</div>

<a id="footer"></a>

<style type="text/css">
.timeline{list-style:none;padding:0 0 20px;position:relative;margin-top:10px; margin-left:40px;}.timeline:before{top:30px;bottom:25px;position:absolute;content:" ";width:3px;background-color:#ccc;left:25px;margin-right:-1.5px}.timeline>li,.timeline>li>.timeline-panel{margin-bottom:5px;position:relative}.timeline>li:after,.timeline>li:before{content:" ";display:table}.timeline>li:after{clear:both}.timeline>li>.timeline-panel{margin-left:55px;float:left;top:19px;padding:4px 10px 8px 15px;border:1px solid #ccc;border-radius:5px;width:90%}.timeline>li>.timeline-badge{color:#fff;width:36px;height:36px;line-height:36px;font-size:1.2em;text-align:center;position:absolute;top:26px;left:9px;margin-right:-25px;background-color:#fff;z-index:100;border-radius:50%;border:1px solid #d4d4d4}.timeline>li.timeline-inverted>.timeline-panel{float:left}.timeline>li.timeline-inverted>.timeline-panel:before{border-right-width:0;border-left-width:15px;right:-15px;left:auto}.timeline>li.timeline-inverted>.timeline-panel:after{border-right-width:0;border-left-width:14px;right:-14px;left:auto}.timeline-badge.primary{background-color:#2e6da4!important}.timeline-badge.success{background-color:#3f903f!important}.timeline-badge.warning{background-color:#f0ad4e!important}.timeline-badge.danger{background-color:#d9534f!important}.timeline-badge.info{background-color:#5bc0de!important}.timeline-title{margin-top:0;color:inherit}.timeline-body>p,.timeline-body>ul{margin-bottom:0;margin-top:0}.timeline-body>p+p{margin-top:5px}.timeline-badge>.glyphicon{margin-right:0px;color:#fff}.timeline-body>h4{margin-bottom:0!important} .danger { color: #f4524d !important; }
</style>