@extends('member') @section('page-title')
<div class="row bg-title">

    <!-- .page title -->
    <div class="col-lg-8 col-md-5 col-sm-6 col-xs-12">
        <h4 class="page-title"><i class="icon-logout"></i> @lang('modules.ticket.details')
            <!-- <span class="text-info b-l p-l-10 m-l-5"></span> <span class="font-12 text-muted m-l-5"> @lang('modules.dashboard.totalClients')</span> -->
        </h4>
    </div>
    <!-- /.page title -->
    <!-- .breadcrumb -->
    <div class="col-lg-4 col-sm-6 col-md-7 col-xs-12 text-right">
		@if($ticket->status!='closed')
        <a href="/member/{!! $alias !!}/tickets/{{ $ticket->id }}/close" class="btn btn-outline btn-success btn-sm">@lang('modules.ticket.markclosed') <i class="fa fa-close"
                                                                                               aria-hidden="true"></i></a>
		@elseif($ticket->status=='closed' && $ticket->emp_id==$user->id)
			<a href="/member/{!! $alias !!}/tickets/{{ $ticket->id }}/reopen" class="btn btn-outline btn-success btn-sm">@lang('modules.ticket.reopen') <i class="fa fa-close" aria-hidden="true"></i></a>
		@endif

    </div>
    <!-- /.breadcrumb -->
</div>
@endsection @push('head-script')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-select/bootstrap-select.min.css">
<link rel="stylesheet" href="/assets/plugins/bower_components/custom-select/custom-select.css">
<link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css"> @endpush @section('content')

@if (isset($status))
<div class="pad margin no-print">
    <div class="alert alert-{{$status['code']}} alert-dismissible fade in" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4><i class="icon fa fa-ban"></i> {{ $status['header'] }}</h4>
        <ul>
            @foreach ($status['messages'] as $m)
            <li>{{$m}}</li>
            @endforeach
        </ul>
    </div>
</div>
@endif

<div class="row">
    <div class="col-xs-12">

        <div class="panel panel-inverse">
            <div class="panel-heading"> @lang('modules.ticket.details')</div>
            <div class="panel-wrapper collapse in" aria-expanded="true">
                <div class="panel-body">
                    {!! Form::model($ticket, ['id'=>'viewTicket','method' => 'post']) !!}
                    <div class="form-body">
                        <div class="row">
							<div class="form-group col-md-9">
								<h3>#{{ $ticket->id }} {{ $ticket->subject }}</h3>
							</div>
						</div>
						
						<div class="row">
							<div class="form-group col-md-4">
								<label>@lang('modules.ticket.severity')</label>
								<br>
								{{ $ticket->severity }}
							</div>
							<div class="form-group col-md-4">
								<label>@lang('modules.ticket.department')</label>
								<br>
								{{ $ticket->ticket_type }}
							</div>
							<div class="form-group col-md-4">
								<label>@lang('modules.ticket.status')</label>
								<br>
								{{ $ticket->status }}
							</div>
							<div class="form-group col-md-4">
								<label>@lang('modules.ticket.created_by')</label>
								<br>
								@if($ticket->created_by_id > 0)
								@if($ticket->created_by == 'U')
								{{ $ticket->createdByU->name }}
								@else
								{{ $ticket->createdByE->name }}
								@endif
								@endif
							</div>
							<div class="form-group col-md-4">
								<label>@lang('modules.ticket.raisedby')</label>
								<br>
								{{ $ticket->employee->name }}
							</div>
							<div class="form-group col-md-4">
								<label>@lang('modules.ticket.assignedTo')</label>
								<br>
								@if($ticket->assigned_to!=0)
								{{ $agent->name }}
								@endif
							</div>							
						</div>
						<div class="row">
							
						</div>
						<div class="row">
							@foreach($ticket->getMedia('attachments') as $attachment)
                            <div style="display:inline-block; position:relative; margin: 7px 7px 0 0;">
                                    @if($attachment->mime_type=="application/msword" || $attachment->mime_type=="appplication/docx" || $attachment->mime_type=="appplication/doc")
                                        <a href="/{{ ltrim($attachment->getUrl(), '/') }}" target="_blank"><img src="/assets/img/docx-icon.jpg" alt="attachment" style="height: 200px; width:200px; object-fit: contain;"></a> 
                                    @elseif($attachment->mime_type=="application/pdf")
                                        <a href="/{{ ltrim($attachment->getUrl(), '/') }}" target="_blank"><img src="/assets/img/pdf-icon.jpg" alt="attachment" style="height: 200px; width:200px; object-fit: contain;"></a> 
                                    @else
                                        <a href="/{{ ltrim($attachment->getUrl(), '/') }}" target="_blank"><img src="/{{ ltrim($attachment->getUrl(), '/') }}" alt="attachment" style="height: 200px; width:200px; object-fit: contain;"></a> 
                                    @endif
                                    
                                </div>
                            @endforeach
						</div>
						<div class="row">
						<section class="user-comment" id="ticket-description">			
			<div class="user-info">
			
				  <div class="user-pic-thumb image-lazy-load user-pointer-bottom"> <div class="thumb avatar-text circle text-center bg-0"> {{\Illuminate\Support\Str::limit($ticket->employee->name, 1, $end='')}}  </div> </div> 
				<div class="user-details">
					<h3 class="user-name">{{ $ticket->employee->name }}</h4>
					<span class="p-info">reported at <span class="timeago">{{ $ticket->created_at }}</span> </span>
					<div class="p-info">  </div>
				</div>
			
			</div>
			<div class="p-content" rel="image-enlarge">
				<div class="p-desc">
					<div style="font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; font-size:14px">
<div dir="ltr">{{ $ticket->description }}</div>
</div>
				</div>

				
			</div>
		</section>
						@foreach($replies as $reply)
			
			<section class="user-comment" id="ticket-description">			
			<div class="user-info">
			
				  <div class="user-pic-thumb image-lazy-load user-pointer-bottom"> <div class="thumb avatar-text circle text-center bg-0"> {{\Illuminate\Support\Str::limit($reply->employee->name, 1, $end='')}}  </div> </div> 
				<div class="user-details">
					<h3 class="user-name">{{ $reply->employee->name }}</h4>
					<span class="p-info">reported at <span class="timeago">{{ $reply->created_at }}</span> </span>
					<div class="p-info">  </div>
				</div>
			
			</div>
			<div class="p-content" rel="image-enlarge">
				<div class="p-desc">
					<div style="font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; font-size:14px">
<div dir="ltr">{{ $reply->comment }}</div>
</div>
				</div>

				
			</div>
		</section>
			
			
			
			
		@endforeach
		</div>
			

        </div>
		@if($ticket->status!='closed')
            <div class="row">
                <div class="col-md-12">
                    <label>@lang('modules.ticket.comment')</label>
                    <div class="form-group">
                        <textarea name="comment"  required id="comment" class="form-control" cols="30" rows="5"></textarea> {!! $errors->first('comment', '<label class="control-label" for="comment">:message</label>')!!}
                    </div>
                </div>

                

            </div>
			
        <div class="form-actions">
            <button type="submit" id="save-form-2" class="btn btn-success"><i class="fa fa-check"></i>
				@lang('app.save')
			</button>

        </div>
		@endif
        {!! Form::close() !!}
		
		
		
		
		
		
    </div>

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


@endsection @push('footer-script')
<script src="/assets/plugins/bower_components/datatables/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<script src="/assets/plugins/bower_components/custom-select/custom-select.min.js"></script>
<script src="/assets/plugins/bower_components/bootstrap-select/bootstrap-select.min.js"></script>
<script src="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="/assets/plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
<!-- <script src="/assets/js/datatables/buttons.server-side.js"></script> -->



<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.print.min.js"></script>


<style>
.user-comment {
    margin: 5px 0 20px;
}
.user-info {
    *zoom: 1;
    margin-bottom: 10px;
}
.user-comment .user-pic-thumb {
    clear: none;
    margin: 0;
    z-index: 3;
}

.user-comment .user-pic-thumb {
    background: transparent;
}
.user-pic-thumb, .user-pic-normal {
    display: inline;
    float: left;
    margin-right: 10px;
    margin-left: -3px;
    border-radius: 3em;
    border: 0;
    padding: 2px;
    background-color: #fff;
    position: relative;
    line-height: 0;
    border: 1px solid #f3f5f7;
}
div.thumb {
    border-radius: 10%;
    width: 47px;
    height: 47px;
    line-height: 47px;
    font-size: 18px;
    font-weight: 200;
    color: #638699;
}

div.avatar-text {
    color: #fff;
    text-transform: uppercase;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
    text-align: center;
}
.circle {
    border-radius: 50% !important;
}
.bg-0 {
    background-color: #cdebc4;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 4%);
    color: rgba(0,0,0,0.3);
}
.user-info .user-details {
    margin-left: 55px;
    margin-top: 6px;
}
.ticket-main .user-details h4.user-name {
    display: inline;
    font-size: 16px;
}
.help-text, .p-info, .info-text, .list-noinfo, .description-text {
    font-size: 12px;
    line-height: 1.9;
    color: #6f7c87;
}

.article-body, .help-text, .p-info, .info-text, .list-noinfo, .description-text {
    max-height: 999999px;
}
.help-text, .p-info, .info-text, .list-noinfo, .description-text {
    font-weight: normal;
}
.p-content {
    background-color: #f8f9fa;
    border-radius: 4px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: solid 1px #DADFE3;
    padding: 10px 16px;
}
.p-content {
    border-radius: 5px;
    position: relative;
    margin: 0 0 10px;
}
.p-desc {
    word-break: normal;
    word-wrap: break-word;
    overflow-x: auto;
}

</style>
@endpush