@extends('layouts.master')
@section('title',trans('view ticket :ticket',['ticket' => $ticket->id]))
@section('header')
    <link rel="stylesheet" type="text/css" href="/panelAssets/app-assets/css/pages/app-chat.min.css">
    @if ($defaultLanguage->direction == 'rtl')
        <link rel="stylesheet" type="text/css" href="/panelAssets/app-assets/css-rtl/pages/app-chat.min.css">
    @endif
@endsection
@section('main')
    <section id="dashboard-analytics">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="content-header-title">{{trans('subject')}}:
                            <span class="font-medium-1">{{$ticket->subject}}</span>
                        </h4>
                    </div>
                    <div class="card-content">
                        <div>
                            <div class="row">
                                <div class="col-lg-3 col-md-3 col-sm-6">
                                    <div class="card card-icon mb-2">
                                        <div class="card-body text-center">
                                            <i class="feather icon-calendar icon-opacity warning font-large-2"></i>
                                            <p class="text-muted mt-2 mb-1">{{trans('created at')}}</p>
                                            <p class="text-primary text-17 line-height-1 m-0"
                                               dir="ltr">{{$ticket->created_at}}</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-3 col-md-3 col-sm-6">
                                    <div class="card card-icon mb-2">
                                        <div class="card-body text-center pb-1">
                                            <i class="feather icon-star icon-opacity primary font-large-2"></i>
                                            <p class="text-muted mt-2 mb-1">{{trans('status')}}</p>
                                            <span
                                                class="badge badge-pill badge-{{$ticket->status_class}} font-weight-light">{{$ticket->status_fa}}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-6">
                                    <div class="card card-icon mb-2">
                                        <div class="card-body text-center">
                                            <i class="feather icon-clock icon-opacity danger font-large-2"></i>
                                            <p class="text-muted mt-2 mb-1">{{trans('updated at')}}</p>
                                            <p class="text-primary text-17 line-height-1 m-0"
                                               dir="ltr">{{$ticket->updated_at}}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-6">
                                    <div class="card card-icon mb-2 ">
                                        <div class="card-body text-center">
                                            <i class="feather icon-message-circle icon-opacity info font-large-2"></i>
                                            <p class="text-muted mt-2 mb-1">{{trans('message count')}}</p>
                                            <p class="text-primary line-height-1 m-0">{{$ticket->answers->count()}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <section class="chat-app-window">
                                <div class="active-chat">
                                    <div class="chat_navbar border">
                                        <header
                                            class="chat_header d-flex justify-content-between align-items-center p-1">
                                            <div class="vs-con-items d-flex align-items-center">
                                                <div class="sidebar-toggle d-block d-lg-none mr-1"><i
                                                        class="feather icon-menu font-large-1"></i></div>
                                                <div class="avatar user-profile-toggle m-0 m-0 mr-1">
                                                    <svg height="40" width="40">
                                                        <text x="65%" y="50%"
                                                              style="font-family: IRANSans;font-size: 15px;font-weight: bold;fill: white">
                                                            {{mb_substr(Auth::user()->name,0,2,'utf-8')}}
                                                        </text>
                                                    </svg>
                                                </div>
                                                <h6 class="mb-0">{{Auth::user()->name}}</h6>
                                            </div>
                                            <div class="float-left">
                                                <a href="{{route('panel.ticket.close',['ticket' => $ticket])}}"
                                                   class="btn btn-outline-danger">
                                                    <i class="fa fa-close"></i>
                                                    {{trans('close')}}
                                                </a>
                                            </div>
                                        </header>
                                    </div>
                                    <div class="user-chats ps ps--active-y" id="chats"
                                         style="overflow-y: scroll !important;">
                                        <div class="chats">
                                            @if($ticket->role == 'admin')
                                                <div class="chat">
                                                    <div class="chat-avatar">
                                                        <a class="avatar m-0" data-toggle="tooltip" href="#"
                                                           data-placement="left"
                                                           title=""
                                                           data-original-title="">
                                                            <img src="{{ asset(Setting::get('logo')) }}"
                                                                 alt="{{Setting::get('title')}}"
                                                                 height="40"
                                                                 width="40"/>
                                                        </a>
                                                    </div>
                                                    <div class="chat-body">
                                                        <div class="chat-content">
                                                            <p>
                                                                {!! $ticket->message !!}
                                                            </p>
                                                            @if ($ticket->file)
                                                                <hr>
                                                                <span class="text-bold">{{trans('file')}}: </span>
                                                                <a target="_blank" href="{{asset($ticket->file)}}">
                                                                    <i class="feather icon-download"></i>
                                                                </a>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            @else
                                                <div class="chat chat-left">
                                                    <div class="chat-avatar">
                                                        <a class="avatar m-0" data-toggle="tooltip" href="#"
                                                           data-placement="left"
                                                           title=""
                                                           data-original-title="">
                                                            <svg height="40" width="40">
                                                                <text x="65%" y="50%"
                                                                      style="font-family: IRANSans;font-size: 15px;font-weight: bold;fill: white">
                                                                    {{mb_substr(Auth::user()->name,0,2,'utf-8')}}
                                                                </text>
                                                            </svg>
                                                        </a>
                                                    </div>
                                                    <div class="chat-body">
                                                        <div class="chat-content">
                                                            <p>
                                                                {!! $ticket->message !!}
                                                            </p>
                                                            @if ($ticket->file)
                                                                <hr>
                                                                <span class="text-bold">{{trans('file')}}: </span>
                                                                <a target="_blank" href="{{asset($ticket->file)}}">
                                                                    <i class="feather icon-download"></i>
                                                                </a>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                            @foreach($answers as $group)
                                                <div class="divider">
                                                    <div class="divider-text">{{$answers->keys()[$loop->index]}}</div>
                                                </div>
                                                @foreach($group as $answer)
                                                    @if ($answer->role == 'user')
                                                        <div class="chat chat-left">
                                                            <div class="chat-avatar">
                                                                <a class="avatar m-0" data-toggle="tooltip" href="#"
                                                                   data-placement="left"
                                                                   title=""
                                                                   data-original-title="">
                                                                    <svg height="40" width="40">
                                                                        <text x="65%" y="50%"
                                                                              style="font-family: IRANSans;font-size: 15px;font-weight: bold;fill: white">
                                                                            {{mb_substr(Auth::user()->name,0,2,'utf-8')}}
                                                                        </text>
                                                                    </svg>
                                                                </a>
                                                            </div>
                                                            <div class="chat-body">
                                                                <div class="chat-content">
                                                                    <p>
                                                                        {!! $answer->message !!}
                                                                    </p>
                                                                    @if ($answer->file)
                                                                        <hr>
                                                                        <span
                                                                            class="text-bold">{{trans('file')}}: </span>
                                                                        <a
                                                                            target="_blank"
                                                                            href="{{asset($answer->file)}}"><i
                                                                                class="feather icon-download"></i></a>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @else
                                                        <div class="chat">
                                                            <div class="chat-avatar">
                                                                <a class="avatar m-0" data-toggle="tooltip" href="#"
                                                                   data-placement="right"
                                                                   title=""
                                                                   data-original-title="">
                                                                    <img src="{{ asset(Setting::get('logo')) }}"
                                                                         alt="{{Setting::get('title')}}"
                                                                         height="40"
                                                                         width="40"/>
                                                                </a>
                                                            </div>
                                                            <div class="chat-body">
                                                                <div class="chat-content">
                                                                    <p>
                                                                        {!! $answer->message !!}
                                                                    </p>
                                                                    @if ($answer->file)
                                                                        <hr>
                                                                        <span
                                                                            class="text-bold">{{trans('file')}}: </span>
                                                                        <a
                                                                            target="_blank"
                                                                            href="{{asset($answer->file)}}"><i
                                                                                class="feather icon-download"></i></a>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endif
                                                @endforeach
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="chat-app-form">
                                        <form action="{{route('panel.ticket.update',['ticket' => $ticket])}}"
                                              autocomplete="off" method="post" class="chat-app-input needs-validation "
                                              enctype="multipart/form-data">
                                            @csrf
                                            <fieldset class="col-12 p-0">
                                                <div class="input-group">
                                                    <textarea class="form-control round" name="message"
                                                              placeholder="{{trans('message')}}"
                                                              id="message" cols="30" rows="3" required=""></textarea>
                                                </div>
                                            </fieldset>

                                            <div class="row mt-1">
                                                <fieldset class="col-12 col-md-2 offset-md-7 text-right mt-0">
                                                    <button type="submit"
                                                            class="btn btn-block btn-success round btn-min-width
                                                            btn-glow waves-effect waves-light">
                                                        {{trans('send')}}
                                                    </button>
                                                </fieldset>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('footer')
    <script>
        $('body').addClass('chat-application')
    </script>
@endsection