@extends('layouts.app')
@section('title', __('lang_v1.ticket'))
<style>
.comment {
    display: block;
    position: relative;
    margin-bottom: 30px;
    padding-left: 66px
}
.comment-operator{
  padding-left: 0 !important;
  padding-right:66px !important;
}

.comment .comment-author-ava-operator{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    border-radius: 50%;
    overflow: hidden
}
.comment .comment-author-ava-operator>img {
    display: block;
    width: 100%
}
.comment .comment-author-ava {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    border-radius: 50%;
    overflow: hidden
}

.comment .comment-author-ava>img {
    display: block;
    width: 100%
}

.comment-top-body {
  position: relative;
    padding: 24px;
    border: 1px solid #e1e7ec;
    border-radius: 7px;
    background-color: #fff;
    margin-bottom:20px;
}
.comment .comment-body .bg-operator{
  margin-left:10px;
}
/* .comment .comment-body .bg-operator{
  position: absolute;
  top:20px;
  right:20px;
}
.comment-operator .comment-body .bg-operator{
  position: absolute;
  top:20px;
  left:20px;
  right:auto;
} */
.comment-top-body .comment-text {
  /* margin-right:150px; */
}
.comment-top-body .comment-meta {
  color: #9da9b9;
  font-size: 13px;
}
.comment-top-body .ticket_status{
  /* width: 150px; */
  background:#f8f9fe;
  /* position: absolute;
  top:20px;
  right:20px; */
  margin-bottom:10px;
      border: 1px solid #e1e7ec;
      padding: 10px 10px;
      border-radius:10px;
      text-align:center;
  }
.comment-top-body .ticket_status small{
  font-size:12px;
  display: block;
  margin-bottom:10px;
}
.comment-top-body .ticket_status td{
      /* font-weight:bold;
      font-size:15px; */
}
.comment-top-body .fl{
  float: left;
}
.comment-top-body .fr{
  float: right;
}
.comment .comment-body {
    position: relative;
    padding: 24px;
    border: 1px solid #e1e7ec;
    border-radius: 7px;
    background-color: #fff
}

.comment .comment-body::after,
.comment .comment-body::before {
    position: absolute;
    top: 12px;
    right: 100%;
    width: 0;
    height: 0;
    border: solid transparent;
    content: '';
    pointer-events: none
}

.comment .comment-body::after {
    border-width: 9px;
    border-color: transparent;
    border-right-color: #fff
}

.comment .comment-body::before {
    margin-top: -1px;
    border-width: 10px;
    border-color: transparent;
    border-right-color: #e1e7ec
}

/*Comment Operator*/
.comment-operator .comment-body{
  /* text-align:right; */
}
.comment-operator .comment-body::after,
.comment-operator .comment-body::before {
    position: absolute;
    top: 12px;
    right: 0;
    left: 100%;
    width: 0;
    height: 0;
    border: solid transparent;
    content: '';
    pointer-events: none
}

.comment-operator .comment-body::after {
    border-width: 9px;
    border-color: transparent;
    border-right-color: #fff
}

.comment-operator .comment-body::before {
    margin-top: -1px;
    border-width: 10px;
    border-color: transparent;
    border-right-color: #e1e7ec
}


.comment .comment-title {
    margin-bottom: 8px;
    color: #606975;
    font-size: 14px;
    font-weight: 500
}

.comment .comment-text {
    margin-bottom: 12px
}

.comment .comment-footer {
    display: table;
    width: 100%;
    margin-bottom:10px;
}

.comment .comment-footer>.column {
    display: table-cell;
    vertical-align: middle
}

.comment .comment-footer>.column:last-child {
    text-align: right
}

.comment .comment-meta {
    color: #9da9b9;
    font-size: 13px
}

.comment .reply-link {
    transition: color .3s;
    color: #606975;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-decoration: none
}

.comment .reply-link>i {
    display: inline-block;
    margin-top: -3px;
    margin-right: 4px;
    vertical-align: middle
}

.comment .reply-link:hover {
    color: #0da9ef
}

.comment.comment-reply {
    margin-top: 30px;
    margin-bottom: 0
}

.comment_box .comment-footer{
  margin-bottom:10px;
}
.comment_box{
  padding: 20px 20px 0 !important;
}

@media (max-width: 576px) {
    .comment {
        padding-left: 0
    }
    .comment .comment-author-ava {
        display: none
    }
    .comment .comment-author-ava-operator {
        display: none
    }
    .comment .comment-body {
        padding: 15px
    }
    .comment .comment-body::before,
    .comment .comment-body::after {
        display: none
    }
}
.mb-20{
  margin-bottom:20px;
}
</style>
@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    @if($is_admin)
    <h1>@lang('lang_v1.ticket') Message</h1>
    @else
    <h1>@lang('lang_v1.help') Message</h1>
    @endif
    <!-- <h1>@lang('lang_v1.ticket') Message</h1> -->
    <!-- <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
        <li class="active">Here</li>
    </ol> -->
</section>
@php
  $form_class = empty($duplicate_product) ? 'create' : '';
  $is_image_required = !empty($common_settings['is_product_image_required']);
@endphp
{!! Form::open(['url' => action([\App\Http\Controllers\TicketController::class, 'reply']), 'method' => 'post', 
    'id' => 'product_add_form','class' => 'product_form ' . $form_class, 'files' => true ]) !!}
        
<div class="comment_box">
  <div class="comment-top-body">
    <div class="row">
            <div class="col-md-10 fl">
                        <div class="comment-footer"><span class="comment-meta">{!!$ticket->first_name.' '.$ticket->last_name!!} | {!!$ticket->created_at!!}</span></div>

                        <p class="comment-text"><b>Subject :</b> {!!$ticket->subject!!}</p>
              <p class="comment-text"><b>Description :</b></p>
              <p class="comment-text mb-20">{!!$ticket->body!!}</p>
            </div>
            <div class="col-md-2 fl">
              <div class="ticket_status">
              <small>Status</small>
              @php
              if($ticket->status=='new')
              {
                  $ticket_status = '<span class="label bg-blue">New</span>';
              }
              elseif($ticket->status=='progress')
              {
                  $ticket_status = '<span class="label bg-orange">In Progress</span>';
              }
              elseif($ticket->status=='closed')
              {
                  $ticket_status = '<span class="label bg-green">Closed</span>';
              }
              else
              {
                  $ticket_status = '<span class="label bg-blue">New</span>';
              }
              @endphp
              @if($is_admin)
                @if($ticket->status=='closed')
                    {!!$ticket_status!!}
                @else
                    {!! Form::select('status', $status, !empty($ticket->status) ? $ticket->status : null, ['class' => 'form-control select2', 'required']); !!}
                @endif
              @else
              {!!$ticket_status!!}
              @endif
              
              </div>

              <div class="ticket_status">
              <small>Priority</small>
              @php
              if($ticket->priority=='Low')
              {
                  $ticket_priority = '<span class="label bg-yellow">Low</span>';
              }
              elseif($ticket->priority=='Medium')
              {
                  $ticket_priority = '<span class="label bg-orange">Medium</span>';
              }
              elseif($ticket->priority=='High')
              {
                  $ticket_priority = '<span class="label bg-red">High</span>';
              }
              else
              {
                  $ticket_priority = '<span class="label bg-yellow">Low</span>';
              }
              @endphp

              @if($is_admin)
                @if($ticket->status=='closed')
                    {!!$ticket_priority!!}
                @else
                    {!! Form::select('priority', $priority, !empty($ticket->priority) ? $ticket->priority : null, ['class' => 'form-control select2', 'required']); !!}
                @endif
                    
              @else
              
              {!!$ticket_priority!!}
              @endif
              </div>
              @if($ticket->status!='closed' && !$is_admin)
              <div class="ticket_status">
              <!-- <small>Ch</small> -->
              <button type="button" class="btn btn-default closed-button" data-id="{{$ticket->id}}">Close Ticket</button>
              </div>
              @endif
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12">
                
          <p class="comment-text"><b>Attachments :</b></p>
          <p class="comment-text mb-20">
            @if($ticket->files!='')
              <a data-toggle="modal" data-target="#my_view"
              class="btn-modal-view" data-href="/uploads/media/{{$ticket->files}}" href="#"><img src="/uploads/media/{{$ticket->files}}" width="150"></a>
            @endif
          </p>
      </div>
  </div>
</div>


  <div class="row">
    <div class="col-sm-12">
        @foreach($ticket_reply as $key)
        @if($key->user_id==$ticket->user_id)

        <div class="comment">
            <div class="comment-author-ava">
              @if($key->user_id==$ticket->user_id)
              <img src="/img/avatar6.png" alt="Avatar">
              @else
              <img src="/img/vh-avatar.png" alt="Avatar">
              @endif
            </div>
            <div class="comment-body">
              
                <div class="comment-footer">
                  <span class="comment-meta">{!!$key->first_name.' '.$key->last_name!!}  | {!!$key->created_at!!}</span>
                  @if($key->user_id==$ticket->user_id)
                  <span class="label bg-green bg-operator">Owner</span>
                  @else
                  <span class="label bg-blue bg-operator">Operator</span>
                  @endif
                </div>

              <p class="comment-text"><b>Description :</b></p>
                <p class="comment-text mb-20">{!!$key->reply!!}</p>
                <p class="comment-text"><b>Attachments :</b></p>
                <p class="comment-text mb-20">
                  @if($key->files!='')
                    <a data-toggle="modal" data-target="#my_view"
              class="btn-modal-view" data-href="/uploads/media/{{$key->files}}"><img src="/uploads/media/{{$key->files}}" width="150"></a>
                  @endif
                </p>
            </div>
        </div>

        @else
        <div class="comment comment-operator">
            
            <div class="comment-body">
              <div class="comment-footer">
                <span class="comment-meta">{!!$key->first_name.' '.$key->last_name!!}  | {!!$key->created_at!!}</span>
                @if($key->user_id==$ticket->user_id)
                <span class="label bg-green bg-operator">Owner</span>
                @else
                <span class="label bg-blue bg-operator">Operator</span>
                @endif
              </div>
              <p class="comment-text"><b>Description :</b></p>
                <p class="comment-text mb-20">{!!$key->reply!!}</p>
                <p class="comment-text"><b>Attachments :</b></p>
                <p class="comment-text mb-20">
                  @if($key->files!='')
                    <a data-toggle="modal" data-target="#my_view"
              class="btn-modal-view" data-href="/uploads/media/{{$key->files}}"><img src="/uploads/media/{{$key->files}}" width="150"></a>
                  @endif
                </p>
                
            </div>
            <div class="comment-author-ava-operator">
              @if($key->user_id==$ticket->user_id)
              <img src="/img/avatar6.png" alt="Avatar">
              @else
              <img src="/img/vh-avatar.png" alt="Avatar">
              @endif
            </div>
        </div>

        @endif
        @endforeach
        <!-- <div class="comment">
            <div class="comment-author-ava"><img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="Avatar"></div>
            <div class="comment-body">
                <p class="comment-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                <div class="comment-footer"><span class="comment-meta">Jacob Hammond, Staff</span></div>
            </div>
        </div>
        <div class="comment">
            <div class="comment-author-ava"><img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="Avatar"></div>
            <div class="comment-body">
                <p class="comment-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <div class="comment-footer"><span class="comment-meta">Jacob Hammond, Staff</span></div>
            </div>
        </div> -->
  </div>
</div>
<div class="clear"></div>
<!-- Main content -->
@if($ticket->status!='closed')
<div class="row">
<div class="col-sm-12">
  <div class="comment-top-body">
  <div class="clearfix"></div>
    <div class="col-sm-12">
    <div class="form-group">
    {!! Form::label('body', __('lang_v1.reply') . ':') !!}
    {!! Form::textarea('body', '', ['class' => 'form-control']); !!}
    <input type="hidden" name="id" value="{{$ticket->id}}">
    </div>
    </div>

    <div class="col-sm-6">
    <div class="form-group">
    {!! Form::label('upload_photo', __('lang_v1.ticket_image') . ':') !!}
    {!! Form::file('upload_photo', ['id' => 'upload_photo', 'accept' => 'image/*', 
    'class' => 'upload-element']); !!}
    <small><p class="help-block">@lang('purchase.max_file_size', ['size' => (config('constants.document_size_limit') / 1000000)]) </p></small>
    <small><p class="help-block">Accept File Type : jpg, bmp, gif, png </p></small>
    </div>
    </div>
  <div class="clearfix"></div>
  </div>

  <div class="row">
  <div class="col-sm-12">
  <input type="hidden" name="submit_type" id="submit_type">
  <div class="text-center">
  <div class="btn-group">
  <button type="submit" value="submit" class="btn btn-primary submit_product_form">@lang('messages.save')</button>
  </div>
  </div>
  </div>
  </div>

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

@endif

<!-- Trigger the modal with a button -->
<!-- <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#my_view">Open Modal</button> -->

<!-- Modal -->
<div id="my_view" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Preview Images</h4>
      </div>
      <div class="modal-body">
        <div class="thumbnail-view" style="text-align:center;"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
<!-- <div class="modal-dialog modal-xl view_image" role="modal"  aria-hidden="true">
  <div class="modal-content">

    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title">Preview Image</h4>
    </div>

    <div class="modal-body">
    	<div class="row">
    		<div class="col-sm-12">
          <div class="thumbnail"></div>
          dfgfdj
        </div>
    	</div>
    </div>

    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">@lang( 'messages.close' )</button>
    </div>


  </div>
</div> -->
<!-- /.content -->
{!! Form::close() !!}
@endsection

@section('javascript')
  @php $asset_v = env('APP_VERSION'); @endphp
  <!-- <script src="{{ asset('js/product.js?v=' . $asset_v) }}"></script> -->

<script type="text/javascript">
$(document).on('click', '.btn-modal-view', function() {
    var images_url = $(this).data('href');
    console.log(images_url);
    $('.thumbnail-view').html('<img src="'+images_url+'" style="width:auto; max-height: 499px !important; max-width: 100%;">');
    // $('.view_image').modal('show');
});
$(document).on('click', '.closed-button', function() {
var close_id = $(this).data('id');

    swal({
        title: 'Are you sure to closed this ticket?',
        icon: 'warning',
        buttons: true,
        dangerMode: true,
    }).then(willAction => {

        if (willAction) {
            // console.log(close_id);
            var closed_list = {
                "url": "/ticket/closed/"+close_id,
                "method": "GET",
                "timeout": 0,
            };
    
            $.ajax(closed_list).done(function (response) 
            {
                console.log(response);
                window.location.href = '/ticket';
            });
        }
    });
});
$(document).ready(function(){
  
// if ($('textarea#details').length > 0) {
    // tinymce.init({
    //     selector: 'textarea#details',
    //     height:250
    // });
// }
});
</script>
@endsection