Viewing file:  details.blade.php (18.93 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
{{-- @extends('layouts.customer')
@section('title')
{{ trans('admin.ticket.ticket_details') }}
@endsection
@section('extra-css')
<link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
.card {
width: 100%;
border: none;
border-radius: 15px
}
.adiv {
background: #04CB28;
border-radius: 15px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
font-size: 12px;
height: 46px
}
.chat {
border: none;
background: #E2FFE8;
font-size: 15px;
border-radius: 20px
}
.bg-white {
border: 1px solid #E7E7E9;
font-size: 15px;
border-radius: 20px
}
.myvideo img {
border-radius: 20px
}
.dot {
font-weight: bold
}
.form-control {
border-radius: 12px;
border: 1px solid #F0F0F0;
font-size: 12px
}
.form-control:focus {
box-shadow: none
}
.form-control::placeholder {
font-size: 14px;
color: #C4C4C4
}
.admin_message {
margin: 0 0 0 auto;
}
.custom_image {
float: right;
position: relative;
bottom: -39px;
right: 10px;
cursor: pointer;
}
.document_image {
width: 180px;
height: 100px;
}
.document_image img {
width: 100%;
height: 100%;
}
.c-pointer {
cursor: pointer;
}
.card_content {
box-shadow: 0 0 1px rgb(0 0 0 / 0%), 0 0px 0px rgb(0 0 0 / 0%) !important;
overflow-y: scroll;
height: 370px;
}
</style>
@endsection
@section('content')
<section class="content p-0">
<div class="row">
<div class="col-12">
<form action="{{ route('customer.ticket.reply') }}" id="messageForm" method="post"
enctype="multipart/form-data">
@csrf
<input type="hidden" name="id" value="{{ isset($ticket) ? $ticket->id : '' }}">
<div class="card-body">
<div class="row">
<div class="col-sm-12 col-12">
<div class="container d-flex justify-content-center">
<div class="card">
<div class="d-flex flex-row justify-content-between p-3 adiv text-white">
<i class="fas fa-chevron-left"></i> <span class="pb-3">Ticket
Conversation</span>
<i class="fas fa-times c-pointer"></i>
</div>
<div class="card card_content">
@foreach ($conversations as $conversation)
@if ($conversation->sent_status == 'customer')
@if ($conversation->document)
<div class="d-block">
<div class="document_image float-right"
style="margin-right: 45px">
<img src="{{ asset('uploads/' . $conversation->document) }}"
alt="">
</div>
</div>
@endif
<div class="d-flex flex-row p-3 admin_message">
<div class="bg-white mr-2 p-3"><span class="text-muted">
{{ $conversation->description }}
</span>
</div>
<img src="https://img.icons8.com/color/48/000000/circled-user-male-skin-type-7.png"
width="30" height="30">
</div>
@elseif($conversation->sent_status == 'admin')
@if ($conversation->document)
<div class="d-block">
<div class="document_image" style="margin-left: 45px;">
<a target="_blank"
href="{{ route('customer.ticket.download', ['id' => $conversation->id, 'file' => $conversation->document]) }}">
<img src="{{ asset('uploads/' . $conversation->document) }}"
alt="">
</a>
</div>
</div>
@endif
<div class="d-flex flex-row p-3">
<img src="https://img.icons8.com/color/48/000000/circled-user-female-skin-type-7.png"
width="30" height="30">
<div class="chat ml-2 p-3">
{{ $conversation->description }}
</div>
</div>
@endif
@endforeach
</div>
<div class="form-group px-3">
<div class="row align-items-end">
<div class="col-11">
<label class="custom_image" for="image"><i class="fa fa-link"></i></label>
<textarea class="form-control textBoxClass" name="description" rows="5" placeholder="Type your message"></textarea>
<input id="image" name="document" type="file" class="form-control"
style="display: none">
</div>
<div class="col-1">
<button class="btn btn-info">{{ trans('admin.sent') }}</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</section>
@endsection
@section('extra-scripts')
<script>
"use strict";
$(".textBoxClass").keypress(function(e) {
if (e.which == 13) {
$('#messageForm').submit();
}
});
$('.fa-times').on('click', function(e) {
location.href = '{{ route('customer.ticket.index') }}';
});
</script>
@endsection --}}
<!DOCTYPE html>
@php
$siteDirection = isset(json_decode(get_settings('local_setting'))->direction)
? json_decode(get_settings('local_setting'))->direction
: 'ltr';
@endphp
<html lang="en" dir="{{ $siteDirection }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title> {{ trans('admin.ticket.ticket_details') }}</title>
<link rel="stylesheet" href="{{ asset('plugins/fontawesome-free/css/all.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/toastr/toastr.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/adminlte.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/custom.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
.card {
width: 100%;
border: none;
border-radius: 15px
}
.adiv {
background: #04CB28;
border-radius: 15px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
font-size: 12px;
height: 46px
}
.chat {
border: none;
background: #E2FFE8;
font-size: 15px;
border-radius: 20px
}
.bg-white {
border: 1px solid #E7E7E9;
font-size: 15px;
border-radius: 20px
}
.myvideo img {
border-radius: 20px
}
.dot {
font-weight: bold
}
.form-control {
border-radius: 12px;
border: 1px solid #F0F0F0;
font-size: 12px
}
.form-control:focus {
box-shadow: none
}
.form-control::placeholder {
font-size: 14px;
color: #C4C4C4
}
.admin_message {
margin: 0 0 0 auto;
}
.custom_image {
float: right;
position: relative;
top: 68px;
right: 15px;
cursor: pointer;
}
.document_image {
width: 180px;
height: 100px;
}
.document_image img {
width: 100%;
height: 100%;
}
.c-pointer {
cursor: pointer;
}
.card_content {
box-shadow: 0 0 1px rgb(0 0 0 / 0%), 0 0px 0px rgb(0 0 0 / 0%) !important;
overflow-y: scroll;
height: 350px;
}
.admin_message-box {
max-width: 600px;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
}
@media (max-width: 991.98px) {
.admin_message-box {
max-width: 500px;
}
.card_content {
height: 300px;
}
.moblie-p {
padding: .5rem 0;
}
}
@media (max-width: 575.98px) {
.admin_message-box {
max-width: 200px;
}
.card_content {
height: 300px;
}
.moblie-p {
padding: .5rem 0;
}
}
.adiv a {
color: #fff;
}
.moblie-p {
position: fixed;
}
</style>
</head>
<body>
<section class="container">
<div class="row">
<div class="col-12">
<form action="{{ route('customer.ticket.reply') }}" id="messageForm" method="post"
enctype="multipart/form-data">
@csrf
<input type="hidden" name="id" value="{{ isset($ticket) ? $ticket->id : '' }}">
<div class="card-body pb-0 moblie-p">
<div class="row d-flex justify-content-center">
<div class="col-lg-10 col-md-12 col-12">
<div class="container d-flex justify-content-center">
<div class="card">
<div class="d-flex flex-row justify-content-between p-3 adiv text-white">
<a href="{{ route('customer.ticket.index') }}"><i
class="fas fa-chevron-left"></i></a>
<span class="pb-3">Ticket
Conversation</span>
<i class="fas fa-times c-pointer"></i>
</div>
<div class="card card_content">
@foreach ($conversations as $conversation)
@if ($conversation->sent_status == 'customer')
@if ($conversation->document)
<div class="d-block">
<div class="document_image float-right"
style="margin-right: 45px">
<img src="{{ asset('uploads/' . $conversation->document) }}"
alt="">
</div>
</div>
@endif
<div class="d-flex flex-row p-3 admin_message">
<div class="bg-white mr-2 p-3 admin_message-box"><span
class="text-muted">
{{ $conversation->description }}
</span>
</div>
<img src="https://img.icons8.com/color/48/000000/circled-user-male-skin-type-7.png"
width="30" height="30">
</div>
@elseif($conversation->sent_status == 'admin')
@if ($conversation->document)
<div class="d-block">
<div class="document_image" style="margin-left: 45px;">
<a target="_blank"
href="{{ route('customer.ticket.download', ['id' => $conversation->id, 'file' => $conversation->document]) }}">
<img src="{{ asset('uploads/' . $conversation->document) }}"
alt="">
</a>
</div>
</div>
@endif
<div class="d-flex flex-row p-3">
<img src="https://img.icons8.com/color/48/000000/circled-user-female-skin-type-7.png"
width="30" height="30">
<div class="chat ml-2 p-3">
{{ $conversation->description }}
</div>
</div>
@endif
@endforeach
</div>
<div class="form-group px-2">
<div class="row align-items-end">
<div class="col-lg-11 col-md-10 col-9">
<label class="custom_image" for="image"><i
class="fa fa-link"></i></label>
<textarea class="form-control textBoxClass" name="description" rows="3" placeholder="Type your message"></textarea>
<input id="image" name="document" type="file"
class="form-control" style="display: none">
</div>
<div class="col-lg-1 col-md-2 col-3">
<button class="btn btn-info">{{ trans('admin.sent') }}</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</section>
<script src="{{ asset('plugins/jquery/jquery.min.js') }}"></script>
<script src="{{ asset('plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script>
"use strict";
$(".textBoxClass").keypress(function(e) {
if (e.which == 13) {
$('#messageForm').submit();
}
});
$('.fa-times').on('click', function(e) {
location.href = '{{ route('customer.ticket.index') }}';
});
</script>
</body>
</html>
|