@extends('layouts.profile')
@section('page_title')
@parent
تیکت - {{$ticket->subject}}
@endsection
@section('head-js')
<script src="{{url('/assets/plugins/ckeditor1/ckeditor.js')}}"></script>
@endsection
@section('main-head')
<section class="breadcrumb-section section-b-space">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="page-title">
                    <h1>تیکت - {{$ticket->subject}}</h1>
                </div>
            </div>
            <div class="col-12">
                <nav aria-label="breadcrumb" class="theme-breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{url('/')}}">خانه</a></li>
                        <li class="breadcrumb-item"><a href="{{url('/profile/dashboard')}}">پروفایل</a></li>
                        <li class="breadcrumb-item"><a href="{{url('/profile/tickets')}}">تیکت های پشتیبانی</a></li>
                        <li class="breadcrumb-item active" aria-current="page">تیکت - {{$ticket->subject}}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</section>
@stop
@section('main')
<div class="profile-content">
    <div class="profile-stats">
        <div class="profile-stats-row">
          <h4>تیکت - {{$ticket->subject}}</h4>
          @foreach($msgs as $msg)
            @if($msg->isuser == 1)

            <div class="row send">
              <div class="col-sm-1">
                  <div class="smessage-avatar">
                    <img @if($user->avatar) src="{{asset('/uploads/avatars/'.$user->avatar)}}" @else src="/avatar.png" @endif width="50px" height="50px" class="smessage-avatar img-fluid">
                  </div>
                  <div class="msg-name">
                      <h5>{{$user->fname}} {{$user->lname}}</h5>
                  </div>
              </div>
              <!-- <div class="arrow-right-msg"></div> -->
              <div class="col-sm-6" >
                 <div class="msg-profile">
                    <div class="msg-content">
                      {!! $msg->content !!}
                    </div>
                    <div class="attach">
                        @if($msg->attach)
                          <a class="attach" target="_blank" href="{{asset('uploads/ticket-attach/'.$msg->attach)}}">
                            <i class="fa fa-paperclip attach"></i> {{$msg->attach}}
                          </a>
                        @endif

                    </div>
                      <small>{{\Morilog\Jalali\Jalalian::forge($msg->created_at)->format('d F Y در h:i')}}</small>
                 </div>
              </div>
              <div class="col-sm-5"></div>
            </div>


            @else
          <div class="row recieve">
            <div class="col-sm-5"></div>
              <div class="col-sm-6" >
                 <div class="msg-profile">
                    <div class="msg-content">
                      {!! $msg->content !!}
                    </div>
                    <div class="attach">
                        @if($msg->attach)
                          <a class="attach" target="_blank" href="{{asset('uploads/ticket-attach/'.$msg->attach)}}">
                            <i class="fa fa-paperclip attach"></i> {{$msg->attach}}
                          </a>
                        @endif
                    </div>
                    <small>{{\Morilog\Jalali\Jalalian::forge($msg->created_at)->format('d F Y در h:i')}}</small>
                 </div>
              </div>
              <div class="col-sm-1">
                  <div class="smessage-avatar">
                    <img  src="/uploads/general/avatar-aghayedaroo.jpg" width="50px" height="50px" class="smessage-avatar img-fluid">
                  </div>
                  <div class="msg-name">
                      <h5>{{$defaultset->webtitle}}</h5>
                  </div>
              </div>

            </div>

            @endif
            @endforeach
            @if($ticket->nstatus != \App\Models\Ticket::CLOSED)
            <div class="row reply-row">
              <div class="col-md-12">
              {!! Form::open(['url' => '/profile/tickets/answer/'.$ticket->id, 'method' => 'post' ,'enctype'=>'multipart/form-data']) !!}
                  <div class="panel reply-row">
                     <div class="panel-content panel-comment">
                      <div class="form-group pt16">
                            <textarea type="text" class="form-control" name="content" rows="4" placeholder="متن پیام ..." required></textarea>
                            <script>CKEDITOR.replace('content',{
                              language: 'fa',
                              removePlugins: 'toolbar'
                            } );
                            </script>
                      </div>
                      <div class="form-group">
                        <h5>بارگذاری ضمیمه</h5>
                        <input type="file" name="attach" class="form-control">
                        <p>حداکثر حجم 10 مگابایت و پسوند های مجاز jpeg,jpg,png,bmp,pdf,doc,docx</p>
                      </div>
                      <button class="btn btn-dark" type="submit">ارسال پاسخ</button>
                    </div>
                  </div>
              {!! Form::close() !!}
                </div>
              </div>
            @endif
        </div>
    </div>
</div>
<style type="text/css">

.content {
  padding-top: 30px;
}
.panel-comment{
padding: 20px 3px 10px 3px !important;
}
.fileinput.fileinput-new.input-group {
  padding: 13px;
}
.fileinput.input-group{
padding: 13px;
}
.bg-gray{
background-color: #eee;
height: 100px;
padding: 20px;
}

.attach i {
  font-size: 13px;
  color: #000;
  margin-right: 8px;
}
.attach {
  padding-top: 30px;
}
.smessage-avatar {
    width: auto;
    border-radius: 50%;
}
.msg-name h5 {
    font-size: 12px;
    text-align: center;
}
.msg-profile {
    padding: 17px;
    background: #eee;
}
.msg-profile small {
    font-size: 11px;
}
.row.send {
    margin-bottom: 20px;
}
.row.recieve {
    margin-bottom: 20px;
}
.msg-profile p {
    text-align: right !important;
}
</style>
@stop