@extends('layouts.app')

@section('pagetitle', __('Ticket: :name', ['name' => $ticket->title]))

@section('breadcrumbs')
    <ol class="breadcrumb float-sm-right">
        <li class="breadcrumb-item"><a href="{{route('support.index')}}">{{__("Support")}}</a></li>
        <li class="breadcrumb-item active">@yield('pagetitle')</li>
    </ol>
@endsection

@section('content')
    <div class="row">
        <div class="col-md-12">
            <a href="{{route('support.index')}}" class="ml-2 btn btn-primary"><i
                        class="fa fa-arrow-left"></i> {{__('Back')}}</a>
            <div class="direct-chat-messages h-100">
                <!-- Message. Default to the left -->

                <div class="direct-chat-msg left">
                    <div class="direct-chat-infos clearfix">
                        <span class="direct-chat-name float-left">{{$ticket->sender_name}}</span>
                        <span class="direct-chat-timestamp float-right">{{$ticket->created_at->format('d-m-Y H:i')}}</span>
                    </div>
                    <!-- /.direct-chat-infos -->
                    <img class="direct-chat-img"
                         @if($ticket->client && $ticket->client->logo_path != null) src="{{asset('storage/'.$ticket->client->logo_path)}}"
                         @else src="{{asset('img/logov2-main-notext.png')}}" @endif alt="message user image">
                    <!-- /.direct-chat-img -->
                    <div class="direct-chat-text">
                        <h3>{{$ticket->title}}</h3>
                        {!! $ticket->message !!}
                    </div>
                    <!-- /.direct-chat-text -->
                </div>
                <!-- /.direct-chat-msg -->

            @foreach($ticket->replies as $reply)
                <!-- Message to the right -->


                    <div class="direct-chat-msg @if(!$reply->sender || $reply->sender->client_id != $ticket->client_id) right @else left @endif">
                        <div class="direct-chat-infos clearfix">
                            <span class="direct-chat-name @if(!$reply->sender || $reply->sender->client_id != $ticket->client_id) float-right @else float-left @endif">{{$reply->sender_name}}</span>
                            <span class="direct-chat-timestamp @if($reply->sender && $reply->sender->client_id == $ticket->client_id) float-right @else float-left @endif">{{$reply->created_at->format('d-m-Y H:i')}}</span>
                        </div>
                        <!-- /.direct-chat-infos -->
                        <img class="direct-chat-img"
                             @if($reply->sender && $reply->sender->client && $reply->sender->client->logo_path != null) src="{{asset('storage/'.$reply->sender->client->logo_path)}}"
                             @else src="{{asset('img/logov2-main-notext.png')}}" @endif alt="message user image">
                        <!-- /.direct-chat-img -->
                        <div class="direct-chat-text @if($reply->sender_id == 0) msg-autoreply @endif">
                            {!! $reply->message !!}
                        </div>
                        <!-- /.direct-chat-text -->
                    </div>
                    <!-- /.direct-chat-msg -->
                @endforeach
                <hr/>


                <!-- /.col -->
            <form action="{{route('support.reply', $ticket)}}" method="POST">
            @csrf
            <!-- /.card-header -->
                <div class="card-body">
                    <div class="form-group">
                        <label for="status_code">{{__("Reply")}}</label>
                    <textarea name="message" id="message" class="form-control">
                    </textarea>
                    </div>
                </div>
                <div class="card-footer">
                    <button type="submit" class="btn pull-right btn-primary"><i class="fas fa-paper-plane"></i> Send
                    </button>
                </div>
            </form>

        </div>
        </div>
        <!-- /.col -->
    </div>
@endsection